commit db74e46830c486b6d4b784a9b1c97441854fa489
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 18:25:17 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..d791422
--- /dev/null
+++ b/body.html
@@ -0,0 +1,72 @@
+<header>
+ <nav>
+ <div class="logo">InvestWise</div>
+ <div class="nav-links">
+ <a href="#calculator">Calculator</a>
+ <a href="#strategies">Strategies</a>
+ <a href="#planner">Planner</a>
+ </div>
+ </nav>
+</header>
+
+<main>
+ <section class="hero">
+ <h1>Plan Your Financial Future</h1>
+ <p>Professional investment calculations and strategy planning tools</p>
+ </section>
+
+ <section id="calculator" class="calculator-section">
+ <h2>Investment Calculator</h2>
+ <div class="calculator-grid">
+ <div class="input-group">
+ <label for="initial">Initial Investment ($)</label>
+ <input type="number" id="initial" value="10000">
+ </div>
+ <div class="input-group">
+ <label for="monthly">Monthly Contribution ($)</label>
+ <input type="number" id="monthly" value="500">
+ </div>
+ <div class="input-group">
+ <label for="years">Time Period (Years)</label>
+ <input type="number" id="years" value="10">
+ </div>
+ <div class="input-group">
+ <label for="rate">Expected Return Rate (%)</label>
+ <input type="number" id="rate" value="7">
+ </div>
+ </div>
+ <button onclick="calculateInvestment()" class="calculate-btn">Calculate</button>
+ <div id="result" class="result-card"></div>
+ </section>
+
+ <section id="strategies" class="strategies-section">
+ <h2>Investment Strategies</h2>
+ <div class="strategy-cards">
+ <div class="strategy-card">
+ <h3>Conservative</h3>
+ <div class="allocation">
+ <div class="bonds" style="width: 60%">60% Bonds</div>
+ <div class="stocks" style="width: 40%">40% Stocks</div>
+ </div>
+ </div>
+ <div class="strategy-card">
+ <h3>Balanced</h3>
+ <div class="allocation">
+ <div class="bonds" style="width: 50%">50% Bonds</div>
+ <div class="stocks" style="width: 50%">50% Stocks</div>
+ </div>
+ </div>
+ <div class="strategy-card">
+ <h3>Aggressive</h3>
+ <div class="allocation">
+ <div class="bonds" style="width: 20%">20% Bonds</div>
+ <div class="stocks" style="width: 80%">80% Stocks</div>
+ </div>
+ </div>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <p>InvestWise - Smart Investment Planning</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..3aa852b
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://investwise.scroll.pub
+metaTags
+editButton /edit.html
+title InvestWise - Smart Investment Calculator & Planner
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..6096010
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01WZijARXPGinsnTPnEyyYXt",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create an investment calculator and planning website. Here's my suggestion:\n\n---domain---\ninvestwise.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://investwise.scroll.pub\nmetaTags\neditButton /edit.html\ntitle InvestWise - Smart Investment Calculator & Planner\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">InvestWise</div>\n <div class=\"nav-links\">\n <a href=\"#calculator\">Calculator</a>\n <a href=\"#strategies\">Strategies</a>\n <a href=\"#planner\">Planner</a>\n </div>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <h1>Plan Your Financial Future</h1>\n <p>Professional investment calculations and strategy planning tools</p>\n </section>\n\n <section id=\"calculator\" class=\"calculator-section\">\n <h2>Investment Calculator</h2>\n <div class=\"calculator-grid\">\n <div class=\"input-group\">\n <label for=\"initial\">Initial Investment ($)</label>\n <input type=\"number\" id=\"initial\" value=\"10000\">\n </div>\n <div class=\"input-group\">\n <label for=\"monthly\">Monthly Contribution ($)</label>\n <input type=\"number\" id=\"monthly\" value=\"500\">\n </div>\n <div class=\"input-group\">\n <label for=\"years\">Time Period (Years)</label>\n <input type=\"number\" id=\"years\" value=\"10\">\n </div>\n <div class=\"input-group\">\n <label for=\"rate\">Expected Return Rate (%)</label>\n <input type=\"number\" id=\"rate\" value=\"7\">\n </div>\n </div>\n <button onclick=\"calculateInvestment()\" class=\"calculate-btn\">Calculate</button>\n <div id=\"result\" class=\"result-card\"></div>\n </section>\n\n <section id=\"strategies\" class=\"strategies-section\">\n <h2>Investment Strategies</h2>\n <div class=\"strategy-cards\">\n <div class=\"strategy-card\">\n <h3>Conservative</h3>\n <div class=\"allocation\">\n <div class=\"bonds\" style=\"width: 60%\">60% Bonds</div>\n <div class=\"stocks\" style=\"width: 40%\">40% Stocks</div>\n </div>\n </div>\n <div class=\"strategy-card\">\n <h3>Balanced</h3>\n <div class=\"allocation\">\n <div class=\"bonds\" style=\"width: 50%\">50% Bonds</div>\n <div class=\"stocks\" style=\"width: 50%\">50% Stocks</div>\n </div>\n </div>\n <div class=\"strategy-card\">\n <h3>Aggressive</h3>\n <div class=\"allocation\">\n <div class=\"bonds\" style=\"width: 20%\">20% Bonds</div>\n <div class=\"stocks\" style=\"width: 80%\">80% Stocks</div>\n </div>\n </div>\n </div>\n </section>\n</main>\n\n<footer>\n <p>InvestWise - Smart Investment Planning</p>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --accent-color: #3498db;\n --background-color: #f8f9fa;\n --text-color: #2c3e50;\n --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', system-ui, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background: var(--background-color);\n}\n\nheader {\n background: var(--primary-color);\n padding: 1rem;\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 1000;\n}\n\nnav {\n max-width: 1200px;\n margin: 0 auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.logo {\n color: white;\n font-size: 1.5rem;\n font-weight: bold;\n}\n\n.nav-links a {\n color: white;\n text-decoration: none;\n margin-left: 2rem;\n transition: color 0.3s;\n}\n\n.nav-links a:hover {\n color: var(--accent-color);\n}\n\nmain {\n margin-top: 4rem;\n padding: 2rem;\n}\n\n.hero {\n text-align: center;\n padding: 4rem 0;\n background: linear-gradient(135deg, var(--primary-color), var(--accent-color));\n color: white;\n border-radius: 10px;\n margin-bottom: 3rem;\n}\n\n.hero h1 {\n font-size: 3rem;\n margin-bottom: 1rem;\n}\n\n.calculator-section {\n max-width: 800px;\n margin: 0 auto 3rem;\n padding: 2rem;\n background: white;\n border-radius: 10px;\n box-shadow: var(--card-shadow);\n}\n\n.calculator-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1.5rem;\n margin: 2rem 0;\n}\n\n.input-group {\n display: flex;\n flex-direction: column;\n}\n\ninput {\n padding: 0.5rem;\n border: 1px solid #ddd;\n border-radius: 4px;\n font-size: 1rem;\n}\n\n.calculate-btn {\n background: var(--accent-color);\n color: white;\n border: none;\n padding: 1rem 2rem;\n border-radius: 4px;\n cursor: pointer;\n font-size: 1rem;\n transition: background 0.3s;\n}\n\n.calculate-btn:hover {\n background: #2980b9;\n}\n\n.result-card {\n margin-top: 2rem;\n padding: 1rem;\n border-radius: 4px;\n background: #f8f9fa;\n}\n\n.strategy-cards {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.strategy-card {\n background: white;\n padding: 1.5rem;\n border-radius: 10px;\n box-shadow: var(--card-shadow);\n}\n\n.allocation {\n margin-top: 1rem;\n background: #f8f9fa;\n border-radius: 4px;\n overflow: hidden;\n}\n\n.bonds, .stocks {\n padding: 0.5rem;\n color: white;\n display: inline-block;\n}\n\n.bonds {\n background: #e74c3c;\n}\n\n.stocks {\n background: #27ae60;\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n background: var(--primary-color);\n color: white;\n margin-top: 3rem;\n}\n\n@media (max-width: 768px) {\n .nav-links {\n display: none;\n }\n \n .hero h1 {\n font-size: 2rem;\n }\n \n main {\n padding: 1rem;\n }\n}\n\n---script.js---\nfunction calculateInvestment() {\n const initial = parseFloat(document.getElementById('initial').value);\n const monthly = parseFloat(document.getElementById('monthly').value);\n const years = parseFloat(document.getElementById('years').value);\n const rate = parseFloat(document.getElementById('rate').value) / 100;\n \n const monthlyRate = rate / 12;\n const months = years * 12;\n \n let total = initial;\n for (let i = 0; i < months; i++) {\n total += monthly;\n total *= (1 + monthlyRate);\n }\n \n const interest = total - (initial + (monthly * months));\n \n const resultHTML = `\n <h3>Investment Results</h3>\n <p>Future Value: $${total.toFixed(2)}</p>\n <p>Total Contributions: $${(initial + (monthly * months)).toFixed(2)}</p>\n <p>Total Interest Earned: $${interest.toFixed(2)}</p>\n `;\n \n document.getElementById('result').innerHTML = resultHTML;\n}\n\n// Add smooth scrolling for navigation links\ndocument.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n document.querySelector(this.getAttribute('href')).scrollIntoView({\n behavior: 'smooth'\n });\n });\n});\n\n---end---\n\nThis website features:\n1. A modern, clean design with a fixed navigation header\n2. A hero section with gradient background\n3. An investment calculator with compound interest calculations\n4. Visual representation of different investment strategies\n5. Responsive design that works on all devices\n6. Smooth scrolling navigation\n7. Beautiful animations and transitions\n8. Accessibility-friendly semantic HTML\n9. Clear visual hierarchy\n10. Professional color scheme and typography\n\nThe calculator allows users to input their initial investment, monthly contributions, time period, and expected return rate to calculate future value and interest earned. The strategies section provides visual representations of different investment allocations between stocks and bonds."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 288,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2517
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..8066fee
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# investwise1.scroll.pub
+Website generated by Claude from prompt: I want a website which can calculate multiple investment strategy and help in investment planning.be creative
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..5fc626f
--- /dev/null
+++ b/script.js
@@ -0,0 +1,36 @@
+function calculateInvestment() {
+ const initial = parseFloat(document.getElementById('initial').value);
+ const monthly = parseFloat(document.getElementById('monthly').value);
+ const years = parseFloat(document.getElementById('years').value);
+ const rate = parseFloat(document.getElementById('rate').value) / 100;
+
+ const monthlyRate = rate / 12;
+ const months = years * 12;
+
+ let total = initial;
+ for (let i = 0; i < months; i++) {
+ total += monthly;
+ total *= (1 + monthlyRate);
+ }
+
+ const interest = total - (initial + (monthly * months));
+
+ const resultHTML = `
+ <h3>Investment Results</h3>
+ <p>Future Value: $${total.toFixed(2)}</p>
+ <p>Total Contributions: $${(initial + (monthly * months)).toFixed(2)}</p>
+ <p>Total Interest Earned: $${interest.toFixed(2)}</p>
+ `;
+
+ document.getElementById('result').innerHTML = resultHTML;
+}
+
+// Add smooth scrolling for navigation links
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
+ behavior: 'smooth'
+ });
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..2413863
--- /dev/null
+++ b/style.css
@@ -0,0 +1,180 @@
+:root {
+ --primary-color: #2c3e50;
+ --accent-color: #3498db;
+ --background-color: #f8f9fa;
+ --text-color: #2c3e50;
+ --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+ background: var(--background-color);
+}
+
+header {
+ background: var(--primary-color);
+ padding: 1rem;
+ position: fixed;
+ width: 100%;
+ top: 0;
+ z-index: 1000;
+}
+
+nav {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.logo {
+ color: white;
+ font-size: 1.5rem;
+ font-weight: bold;
+}
+
+.nav-links a {
+ color: white;
+ text-decoration: none;
+ margin-left: 2rem;
+ transition: color 0.3s;
+}
+
+.nav-links a:hover {
+ color: var(--accent-color);
+}
+
+main {
+ margin-top: 4rem;
+ padding: 2rem;
+}
+
+.hero {
+ text-align: center;
+ padding: 4rem 0;
+ background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
+ color: white;
+ border-radius: 10px;
+ margin-bottom: 3rem;
+}
+
+.hero h1 {
+ font-size: 3rem;
+ margin-bottom: 1rem;
+}
+
+.calculator-section {
+ max-width: 800px;
+ margin: 0 auto 3rem;
+ padding: 2rem;
+ background: white;
+ border-radius: 10px;
+ box-shadow: var(--card-shadow);
+}
+
+.calculator-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 1.5rem;
+ margin: 2rem 0;
+}
+
+.input-group {
+ display: flex;
+ flex-direction: column;
+}
+
+input {
+ padding: 0.5rem;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ font-size: 1rem;
+}
+
+.calculate-btn {
+ background: var(--accent-color);
+ color: white;
+ border: none;
+ padding: 1rem 2rem;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 1rem;
+ transition: background 0.3s;
+}
+
+.calculate-btn:hover {
+ background: #2980b9;
+}
+
+.result-card {
+ margin-top: 2rem;
+ padding: 1rem;
+ border-radius: 4px;
+ background: #f8f9fa;
+}
+
+.strategy-cards {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+.strategy-card {
+ background: white;
+ padding: 1.5rem;
+ border-radius: 10px;
+ box-shadow: var(--card-shadow);
+}
+
+.allocation {
+ margin-top: 1rem;
+ background: #f8f9fa;
+ border-radius: 4px;
+ overflow: hidden;
+}
+
+.bonds, .stocks {
+ padding: 0.5rem;
+ color: white;
+ display: inline-block;
+}
+
+.bonds {
+ background: #e74c3c;
+}
+
+.stocks {
+ background: #27ae60;
+}
+
+footer {
+ text-align: center;
+ padding: 2rem;
+ background: var(--primary-color);
+ color: white;
+ margin-top: 3rem;
+}
+
+@media (max-width: 768px) {
+ .nav-links {
+ display: none;
+ }
+
+ .hero h1 {
+ font-size: 2rem;
+ }
+
+ main {
+ padding: 1rem;
+ }
+}