Changes to investwise1.scroll.pub

root
root
25 days ago
Initial commit
body.html
Changed around line 1
+
+
+
+
+ Calculator
+ Strategies
+ Planner
+
+
+
+
+
+
+

Plan Your Financial Future

+

Professional investment calculations and strategy planning tools

+
+
+
+

Investment Calculator

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Investment Strategies

+
+
+

Conservative

+
+
60% Bonds
+
40% Stocks
+
+
+
+

Balanced

+
+
50% Bonds
+
50% Stocks
+
+
+
+

Aggressive

+
+
20% Bonds
+
80% Stocks
+
+
+
+
+
+
+
+

InvestWise - Smart Investment Planning

+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://investwise.scroll.pub
+ metaTags
+ editButton /edit.html
+ title InvestWise - Smart Investment Calculator & Planner
+ style.css
+ body.html
+ script.js
prompt.json
Changed around line 1
+ {
+ "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
\n \n
\n\n
\n
\n

Plan Your Financial Future

\n

Professional investment calculations and strategy planning tools

\n
\n\n
\n

Investment Calculator

\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n
\n
\n\n
\n

Investment Strategies

\n
\n
\n

Conservative

\n
\n
60% Bonds
\n
40% Stocks
\n
\n
\n
\n

Balanced

\n
\n
50% Bonds
\n
50% Stocks
\n
\n
\n
\n

Aggressive

\n
\n
20% Bonds
\n
80% Stocks
\n
\n
\n
\n
\n
\n\n
\n

InvestWise - Smart Investment Planning

\n
\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

Investment Results

\n

Future Value: $${total.toFixed(2)}

\n

Total Contributions: $${(initial + (monthly * months)).toFixed(2)}

\n

Total Interest Earned: $${interest.toFixed(2)}

\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
+ }
+ }
readme.scroll
Changed around line 1
+ # 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
script.js
Changed around line 1
+ 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 = `
+

Investment Results

+

Future Value: $${total.toFixed(2)}

+

Total Contributions: $${(initial + (monthly * months)).toFixed(2)}

+

Total Interest Earned: $${interest.toFixed(2)}

+ `;
+
+ 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'
+ });
+ });
+ });
style.css
Changed around line 1
+ :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;
+ }
+ }