commit 9b67a0a63978b90ac9d9ce2de862780f42531022
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 05:27:58 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..a1eb08a
--- /dev/null
+++ b/body.html
@@ -0,0 +1,63 @@
+<header>
+ <h1>Bitcoin Retirement Calculator</h1>
+ <p>Plan your financial future with Bitcoin</p>
+</header>
+
+<main>
+ <section class="calculator">
+ <div class="input-group">
+ <label for="currentAge">Current Age</label>
+ <input type="number" id="currentAge" min="18" max="100" value="30">
+ </div>
+
+ <div class="input-group">
+ <label for="retirementAge">Retirement Age</label>
+ <input type="number" id="retirementAge" min="18" max="100" value="65">
+ </div>
+
+ <div class="input-group">
+ <label for="monthlySavings">Monthly Savings (USD)</label>
+ <input type="number" id="monthlySavings" min="0" value="500">
+ </div>
+
+ <div class="input-group">
+ <label for="bitcoinAllocation">Bitcoin Allocation (%)</label>
+ <input type="range" id="bitcoinAllocation" min="0" max="100" value="50">
+ <span id="allocationValue">50%</span>
+ </div>
+
+ <div class="input-group">
+ <label for="bitcoinGrowth">Annual Bitcoin Growth (%)</label>
+ <input type="number" id="bitcoinGrowth" min="0" value="10">
+ </div>
+
+ <div class="input-group">
+ <label for="inflation">Annual Inflation (%)</label>
+ <input type="number" id="inflation" min="0" value="2">
+ </div>
+
+ <button id="calculate">Calculate</button>
+ </section>
+
+ <section class="results">
+ <h2>Retirement Projections</h2>
+ <div class="result-cards">
+ <div class="card">
+ <h3>Total Savings</h3>
+ <p id="totalSavings">$0</p>
+ </div>
+ <div class="card">
+ <h3>Bitcoin Holdings</h3>
+ <p id="bitcoinHoldings">0 BTC</p>
+ </div>
+ <div class="card">
+ <h3>Retirement Income</h3>
+ <p id="retirementIncome">$0/year</p>
+ </div>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <p>Disclaimer: This is for informational purposes only. Consult a financial advisor for professional advice.</p>
+</footer>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..18d4e15
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://bitretire.scroll.pub
+metaTags
+editButton /edit.html
+title Bitcoin Retirement Calculator
+style.css
+body.html
+script.js
\ No newline at end of file
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..8ae25c8
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,25 @@
+{
+ "id": "e58e40d2-e70c-49b3-bf58-652846e8fb71",
+ "object": "chat.completion",
+ "created": 1735363656,
+ "model": "deepseek-chat",
+ "choices": [
+ {
+ "index": 0,
+ "message": {
+ "role": "assistant",
+ "content": "---domain---\nbitretire.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://bitretire.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Bitcoin Retirement Calculator\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <h1>Bitcoin Retirement Calculator</h1>\n <p>Plan your financial future with Bitcoin</p>\n</header>\n\n<main>\n <section class=\"calculator\">\n <div class=\"input-group\">\n <label for=\"currentAge\">Current Age</label>\n <input type=\"number\" id=\"currentAge\" min=\"18\" max=\"100\" value=\"30\">\n </div>\n \n <div class=\"input-group\">\n <label for=\"retirementAge\">Retirement Age</label>\n <input type=\"number\" id=\"retirementAge\" min=\"18\" max=\"100\" value=\"65\">\n </div>\n \n <div class=\"input-group\">\n <label for=\"monthlySavings\">Monthly Savings (USD)</label>\n <input type=\"number\" id=\"monthlySavings\" min=\"0\" value=\"500\">\n </div>\n \n <div class=\"input-group\">\n <label for=\"bitcoinAllocation\">Bitcoin Allocation (%)</label>\n <input type=\"range\" id=\"bitcoinAllocation\" min=\"0\" max=\"100\" value=\"50\">\n <span id=\"allocationValue\">50%</span>\n </div>\n \n <div class=\"input-group\">\n <label for=\"bitcoinGrowth\">Annual Bitcoin Growth (%)</label>\n <input type=\"number\" id=\"bitcoinGrowth\" min=\"0\" value=\"10\">\n </div>\n \n <div class=\"input-group\">\n <label for=\"inflation\">Annual Inflation (%)</label>\n <input type=\"number\" id=\"inflation\" min=\"0\" value=\"2\">\n </div>\n \n <button id=\"calculate\">Calculate</button>\n </section>\n\n <section class=\"results\">\n <h2>Retirement Projections</h2>\n <div class=\"result-cards\">\n <div class=\"card\">\n <h3>Total Savings</h3>\n <p id=\"totalSavings\">$0</p>\n </div>\n <div class=\"card\">\n <h3>Bitcoin Holdings</h3>\n <p id=\"bitcoinHoldings\">0 BTC</p>\n </div>\n <div class=\"card\">\n <h3>Retirement Income</h3>\n <p id=\"retirementIncome\">$0/year</p>\n </div>\n </div>\n </section>\n</main>\n\n<footer>\n <p>Disclaimer: This is for informational purposes only. Consult a financial advisor for professional advice.</p>\n</footer>\n---style.css---\n:root {\n --primary: #f7931a;\n --secondary: #4a90e2;\n --background: #f5f5f5;\n --text: #333;\n --card-bg: #fff;\n --shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\nbody {\n font-family: 'Segoe UI', sans-serif;\n line-height: 1.6;\n color: var(--text);\n background: var(--background);\n margin: 0;\n padding: 0;\n}\n\nheader {\n background: var(--primary);\n color: white;\n padding: 2rem;\n text-align: center;\n}\n\nmain {\n max-width: 800px;\n margin: 2rem auto;\n padding: 0 1rem;\n}\n\n.calculator {\n background: var(--card-bg);\n padding: 2rem;\n border-radius: 8px;\n box-shadow: var(--shadow);\n}\n\n.input-group {\n margin-bottom: 1.5rem;\n}\n\nlabel {\n display: block;\n margin-bottom: 0.5rem;\n font-weight: 600;\n}\n\ninput[type=\"number\"],\ninput[type=\"range\"] {\n width: 100%;\n padding: 0.5rem;\n border: 1px solid #ddd;\n border-radius: 4px;\n}\n\ninput[type=\"range\"] {\n -webkit-appearance: none;\n height: 8px;\n background: #ddd;\n border-radius: 4px;\n margin-top: 0.5rem;\n}\n\ninput[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 20px;\n height: 20px;\n background: var(--primary);\n border-radius: 50%;\n cursor: pointer;\n}\n\nbutton {\n background: var(--secondary);\n color: white;\n border: none;\n padding: 1rem 2rem;\n border-radius: 4px;\n cursor: pointer;\n width: 100%;\n font-size: 1rem;\n transition: background 0.3s;\n}\n\nbutton:hover {\n background: #357abd;\n}\n\n.results {\n margin-top: 2rem;\n}\n\n.result-cards {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1rem;\n}\n\n.card {\n background: var(--card-bg);\n padding: 1.5rem;\n border-radius: 8px;\n box-shadow: var(--shadow);\n text-align: center;\n}\n\nfooter {\n text-align: center;\n padding: 1rem;\n background: var(--card-bg);\n margin-top: 2rem;\n}\n\n@media (max-width: 600px) {\n header {\n padding: 1rem;\n }\n \n .calculator {\n padding: 1rem;\n }\n \n .result-cards {\n grid-template-columns: 1fr;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n const currentAge = document.getElementById('currentAge');\n const retirementAge = document.getElementById('retirementAge');\n const monthlySavings = document.getElementById('monthlySavings');\n const bitcoinAllocation = document.getElementById('bitcoinAllocation');\n const allocationValue = document.getElementById('allocationValue');\n const bitcoinGrowth = document.getElementById('bitcoinGrowth');\n const inflation = document.getElementById('inflation');\n const calculateButton = document.getElementById('calculate');\n \n const totalSavings = document.getElementById('totalSavings');\n const bitcoinHoldings = document.getElementById('bitcoinHoldings');\n const retirementIncome = document.getElementById('retirementIncome');\n\n bitcoinAllocation.addEventListener('input', function() {\n allocationValue.textContent = `${this.value}%`;\n });\n\n calculateButton.addEventListener('click', function() {\n const yearsToRetirement = retirementAge.value - currentAge.value;\n const totalMonths = yearsToRetirement * 12;\n const bitcoinPercent = bitcoinAllocation.value / 100;\n const traditionalPercent = 1 - bitcoinPercent;\n \n // Traditional savings calculation\n const traditionalFutureValue = monthlySavings.value * traditionalPercent * \n (((Math.pow(1 + (inflation.value/100), yearsToRetirement) - 1) / (inflation.value/100)));\n \n // Bitcoin savings calculation\n const bitcoinFutureValue = monthlySavings.value * bitcoinPercent * \n (((Math.pow(1 + (bitcoinGrowth.value/100), yearsToRetirement) - 1) / (bitcoinGrowth.value/100)));\n \n const totalFutureValue = traditionalFutureValue + bitcoinFutureValue;\n \n // Display results\n totalSavings.textContent = `$${Math.round(totalFutureValue).toLocaleString()}`;\n bitcoinHoldings.textContent = `${Math.round(bitcoinFutureValue / 50000)} BTC`; // Assuming $50,000 per BTC\n retirementIncome.textContent = `$${Math.round(totalFutureValue * 0.04).toLocaleString()}/year`; // 4% rule\n });\n});\n---end---"
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 259,
+ "completion_tokens": 1749,
+ "total_tokens": 2008,
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 259
+ },
+ "system_fingerprint": "fp_f1afce2943"
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..7ad41e8
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# bitretire.scroll.pub
+Website generated by DeepSeek from prompt: Create a bitcoin retirement calculator with lots of different options, toggles, sliders, and relevant questions for retiring on bitcoin
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..7512082
--- /dev/null
+++ b/script.js
@@ -0,0 +1,40 @@
+document.addEventListener('DOMContentLoaded', function() {
+ const currentAge = document.getElementById('currentAge');
+ const retirementAge = document.getElementById('retirementAge');
+ const monthlySavings = document.getElementById('monthlySavings');
+ const bitcoinAllocation = document.getElementById('bitcoinAllocation');
+ const allocationValue = document.getElementById('allocationValue');
+ const bitcoinGrowth = document.getElementById('bitcoinGrowth');
+ const inflation = document.getElementById('inflation');
+ const calculateButton = document.getElementById('calculate');
+
+ const totalSavings = document.getElementById('totalSavings');
+ const bitcoinHoldings = document.getElementById('bitcoinHoldings');
+ const retirementIncome = document.getElementById('retirementIncome');
+
+ bitcoinAllocation.addEventListener('input', function() {
+ allocationValue.textContent = `${this.value}%`;
+ });
+
+ calculateButton.addEventListener('click', function() {
+ const yearsToRetirement = retirementAge.value - currentAge.value;
+ const totalMonths = yearsToRetirement * 12;
+ const bitcoinPercent = bitcoinAllocation.value / 100;
+ const traditionalPercent = 1 - bitcoinPercent;
+
+ // Traditional savings calculation
+ const traditionalFutureValue = monthlySavings.value * traditionalPercent *
+ (((Math.pow(1 + (inflation.value/100), yearsToRetirement) - 1) / (inflation.value/100)));
+
+ // Bitcoin savings calculation
+ const bitcoinFutureValue = monthlySavings.value * bitcoinPercent *
+ (((Math.pow(1 + (bitcoinGrowth.value/100), yearsToRetirement) - 1) / (bitcoinGrowth.value/100)));
+
+ const totalFutureValue = traditionalFutureValue + bitcoinFutureValue;
+
+ // Display results
+ totalSavings.textContent = `$${Math.round(totalFutureValue).toLocaleString()}`;
+ bitcoinHoldings.textContent = `${Math.round(bitcoinFutureValue / 50000)} BTC`; // Assuming $50,000 per BTC
+ retirementIncome.textContent = `$${Math.round(totalFutureValue * 0.04).toLocaleString()}/year`; // 4% rule
+ });
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..891b0ca
--- /dev/null
+++ b/style.css
@@ -0,0 +1,127 @@
+:root {
+ --primary: #f7931a;
+ --secondary: #4a90e2;
+ --background: #f5f5f5;
+ --text: #333;
+ --card-bg: #fff;
+ --shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+body {
+ font-family: 'Segoe UI', sans-serif;
+ line-height: 1.6;
+ color: var(--text);
+ background: var(--background);
+ margin: 0;
+ padding: 0;
+}
+
+header {
+ background: var(--primary);
+ color: white;
+ padding: 2rem;
+ text-align: center;
+}
+
+main {
+ max-width: 800px;
+ margin: 2rem auto;
+ padding: 0 1rem;
+}
+
+.calculator {
+ background: var(--card-bg);
+ padding: 2rem;
+ border-radius: 8px;
+ box-shadow: var(--shadow);
+}
+
+.input-group {
+ margin-bottom: 1.5rem;
+}
+
+label {
+ display: block;
+ margin-bottom: 0.5rem;
+ font-weight: 600;
+}
+
+input[type="number"],
+input[type="range"] {
+ width: 100%;
+ padding: 0.5rem;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+}
+
+input[type="range"] {
+ -webkit-appearance: none;
+ height: 8px;
+ background: #ddd;
+ border-radius: 4px;
+ margin-top: 0.5rem;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ width: 20px;
+ height: 20px;
+ background: var(--primary);
+ border-radius: 50%;
+ cursor: pointer;
+}
+
+button {
+ background: var(--secondary);
+ color: white;
+ border: none;
+ padding: 1rem 2rem;
+ border-radius: 4px;
+ cursor: pointer;
+ width: 100%;
+ font-size: 1rem;
+ transition: background 0.3s;
+}
+
+button:hover {
+ background: #357abd;
+}
+
+.results {
+ margin-top: 2rem;
+}
+
+.result-cards {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 1rem;
+}
+
+.card {
+ background: var(--card-bg);
+ padding: 1.5rem;
+ border-radius: 8px;
+ box-shadow: var(--shadow);
+ text-align: center;
+}
+
+footer {
+ text-align: center;
+ padding: 1rem;
+ background: var(--card-bg);
+ margin-top: 2rem;
+}
+
+@media (max-width: 600px) {
+ header {
+ padding: 1rem;
+ }
+
+ .calculator {
+ padding: 1rem;
+ }
+
+ .result-cards {
+ grid-template-columns: 1fr;
+ }
+}
\ No newline at end of file