commit 930f8f58007a57fa0bcbd5dac0652f46f6f377b6
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 15:42:33 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..6c3518c
--- /dev/null
+++ b/body.html
@@ -0,0 +1,68 @@
+<header>
+ <nav>
+ <div class="logo">MacroMeter</div>
+ <div class="nav-links">
+ <a href="#gdp">GDP</a>
+ <a href="#inflation">Inflation</a>
+ <a href="#employment">Employment</a>
+ <a href="#rates">Rates</a>
+ </div>
+ </nav>
+</header>
+
+<main>
+ <section class="hero">
+ <h1>Global Economic Indicators</h1>
+ <p>Real-time tracking of major market-moving metrics</p>
+ </section>
+
+ <section id="dashboard">
+ <div class="metric-card" id="gdp">
+ <h2>GDP Growth</h2>
+ <div class="chart-container">
+ <canvas id="gdpChart"></canvas>
+ </div>
+ <div class="metric-value">
+ <span class="current">3.2%</span>
+ <span class="change positive">↑ 0.4%</span>
+ </div>
+ </div>
+
+ <div class="metric-card" id="inflation">
+ <h2>Inflation Rate</h2>
+ <div class="chart-container">
+ <canvas id="inflationChart"></canvas>
+ </div>
+ <div class="metric-value">
+ <span class="current">2.9%</span>
+ <span class="change negative">↓ 0.2%</span>
+ </div>
+ </div>
+
+ <div class="metric-card" id="employment">
+ <h2>Employment Rate</h2>
+ <div class="chart-container">
+ <canvas id="employmentChart"></canvas>
+ </div>
+ <div class="metric-value">
+ <span class="current">94.8%</span>
+ <span class="change positive">↑ 0.3%</span>
+ </div>
+ </div>
+
+ <div class="metric-card" id="rates">
+ <h2>Interest Rates</h2>
+ <div class="chart-container">
+ <canvas id="ratesChart"></canvas>
+ </div>
+ <div class="metric-value">
+ <span class="current">5.25%</span>
+ <span class="change neutral">→ 0.0%</span>
+ </div>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <p>MacroMeter - Updated Daily</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..6402c58
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://macrometer.scroll.pub
+metaTags
+editButton /edit.html
+title MacroMeter - Global Economic Indicators Dashboard
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..021dcf3
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01UMvw26Qfr58gYB3KQ4yYgL",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Here's a modern economic dashboard website:\n\n---domain---\nmacrometer.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://macrometer.scroll.pub\nmetaTags\neditButton /edit.html\ntitle MacroMeter - Global Economic Indicators Dashboard\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">MacroMeter</div>\n <div class=\"nav-links\">\n <a href=\"#gdp\">GDP</a>\n <a href=\"#inflation\">Inflation</a>\n <a href=\"#employment\">Employment</a>\n <a href=\"#rates\">Rates</a>\n </div>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <h1>Global Economic Indicators</h1>\n <p>Real-time tracking of major market-moving metrics</p>\n </section>\n\n <section id=\"dashboard\">\n <div class=\"metric-card\" id=\"gdp\">\n <h2>GDP Growth</h2>\n <div class=\"chart-container\">\n <canvas id=\"gdpChart\"></canvas>\n </div>\n <div class=\"metric-value\">\n <span class=\"current\">3.2%</span>\n <span class=\"change positive\">↑ 0.4%</span>\n </div>\n </div>\n\n <div class=\"metric-card\" id=\"inflation\">\n <h2>Inflation Rate</h2>\n <div class=\"chart-container\">\n <canvas id=\"inflationChart\"></canvas>\n </div>\n <div class=\"metric-value\">\n <span class=\"current\">2.9%</span>\n <span class=\"change negative\">↓ 0.2%</span>\n </div>\n </div>\n\n <div class=\"metric-card\" id=\"employment\">\n <h2>Employment Rate</h2>\n <div class=\"chart-container\">\n <canvas id=\"employmentChart\"></canvas>\n </div>\n <div class=\"metric-value\">\n <span class=\"current\">94.8%</span>\n <span class=\"change positive\">↑ 0.3%</span>\n </div>\n </div>\n\n <div class=\"metric-card\" id=\"rates\">\n <h2>Interest Rates</h2>\n <div class=\"chart-container\">\n <canvas id=\"ratesChart\"></canvas>\n </div>\n <div class=\"metric-value\">\n <span class=\"current\">5.25%</span>\n <span class=\"change neutral\">→ 0.0%</span>\n </div>\n </div>\n </section>\n</main>\n\n<footer>\n <p>MacroMeter - Updated Daily</p>\n</footer>\n\n---style.css---\n:root {\n --primary: #2c3e50;\n --secondary: #34495e;\n --accent: #3498db;\n --text: #2c3e50;\n --background: #ecf0f1;\n --card-bg: #ffffff;\n --positive: #27ae60;\n --negative: #c0392b;\n --neutral: #7f8c8d;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n background: var(--background);\n color: var(--text);\n line-height: 1.6;\n}\n\nheader {\n background: var(--primary);\n padding: 1rem;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\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 ease;\n}\n\n.nav-links a:hover {\n color: var(--accent);\n}\n\n.hero {\n text-align: center;\n padding: 4rem 2rem;\n background: linear-gradient(135deg, var(--primary), var(--secondary));\n color: white;\n}\n\n.hero h1 {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n}\n\n#dashboard {\n max-width: 1200px;\n margin: 2rem auto;\n padding: 0 1rem;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 2rem;\n}\n\n.metric-card {\n background: var(--card-bg);\n border-radius: 12px;\n padding: 1.5rem;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n transition: transform 0.3s ease;\n}\n\n.metric-card:hover {\n transform: translateY(-5px);\n}\n\n.metric-card h2 {\n margin-bottom: 1rem;\n color: var(--primary);\n}\n\n.chart-container {\n height: 200px;\n margin-bottom: 1rem;\n}\n\n.metric-value {\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: 1.25rem;\n}\n\n.change.positive { color: var(--positive); }\n.change.negative { color: var(--negative); }\n.change.neutral { color: var(--neutral); }\n\nfooter {\n text-align: center;\n padding: 2rem;\n background: var(--primary);\n color: white;\n margin-top: 2rem;\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 #dashboard {\n grid-template-columns: 1fr;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Simple chart drawing function\n const drawChart = (canvasId, data) => {\n const canvas = document.getElementById(canvasId);\n const ctx = canvas.getContext('2d');\n const width = canvas.width;\n const height = canvas.height;\n \n // Clear canvas\n ctx.clearRect(0, 0, width, height);\n \n // Draw chart\n ctx.beginPath();\n ctx.strokeStyle = '#3498db';\n ctx.lineWidth = 2;\n \n data.forEach((point, index) => {\n const x = (width / (data.length - 1)) * index;\n const y = height - (point * height);\n \n if (index === 0) {\n ctx.moveTo(x, y);\n } else {\n ctx.lineTo(x, y);\n }\n });\n \n ctx.stroke();\n };\n\n // Sample data for charts\n const gdpData = [0.4, 0.5, 0.3, 0.6, 0.8, 0.7, 0.9];\n const inflationData = [0.2, 0.3, 0.4, 0.3, 0.2, 0.3, 0.2];\n const employmentData = [0.8, 0.85, 0.82, 0.88, 0.9, 0.92, 0.94];\n const ratesData = [0.4, 0.45, 0.5, 0.52, 0.525, 0.525, 0.525];\n\n // Initialize charts\n drawChart('gdpChart', gdpData);\n drawChart('inflationChart', inflationData);\n drawChart('employmentChart', employmentData);\n drawChart('ratesChart', ratesData);\n\n // Add resize handler\n window.addEventListener('resize', () => {\n drawChart('gdpChart', gdpData);\n drawChart('inflationChart', inflationData);\n drawChart('employmentChart', employmentData);\n drawChart('ratesChart', ratesData);\n });\n});\n\n---end---\n\nThis creates a sleek, modern dashboard for tracking major economic indicators. Key features:\n\n1. Responsive grid layout\n2. Beautiful gradient backgrounds\n3. Hover animations on cards\n4. Simple but effective line charts\n5. Color-coded indicators for changes\n6. Clean typography and spacing\n7. Mobile-friendly design\n8. Semantic HTML structure\n9. Accessible color contrast\n10. Smooth transitions and animations\n\nThe domain name \"macrometer\" combines \"macro\" (economics) with \"meter\" (measurement) for a memorable, relevant name that clearly communicates the site's purpose."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 285,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2324
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..ce6970c
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# macrometer.scroll.pub
+Website generated by Claude from prompt: a monitor dashboard of yearly major macroeconomic indicators that move the market
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..73b749a
--- /dev/null
+++ b/script.js
@@ -0,0 +1,50 @@
+document.addEventListener('DOMContentLoaded', () => {
+ // Simple chart drawing function
+ const drawChart = (canvasId, data) => {
+ const canvas = document.getElementById(canvasId);
+ const ctx = canvas.getContext('2d');
+ const width = canvas.width;
+ const height = canvas.height;
+
+ // Clear canvas
+ ctx.clearRect(0, 0, width, height);
+
+ // Draw chart
+ ctx.beginPath();
+ ctx.strokeStyle = '#3498db';
+ ctx.lineWidth = 2;
+
+ data.forEach((point, index) => {
+ const x = (width / (data.length - 1)) * index;
+ const y = height - (point * height);
+
+ if (index === 0) {
+ ctx.moveTo(x, y);
+ } else {
+ ctx.lineTo(x, y);
+ }
+ });
+
+ ctx.stroke();
+ };
+
+ // Sample data for charts
+ const gdpData = [0.4, 0.5, 0.3, 0.6, 0.8, 0.7, 0.9];
+ const inflationData = [0.2, 0.3, 0.4, 0.3, 0.2, 0.3, 0.2];
+ const employmentData = [0.8, 0.85, 0.82, 0.88, 0.9, 0.92, 0.94];
+ const ratesData = [0.4, 0.45, 0.5, 0.52, 0.525, 0.525, 0.525];
+
+ // Initialize charts
+ drawChart('gdpChart', gdpData);
+ drawChart('inflationChart', inflationData);
+ drawChart('employmentChart', employmentData);
+ drawChart('ratesChart', ratesData);
+
+ // Add resize handler
+ window.addEventListener('resize', () => {
+ drawChart('gdpChart', gdpData);
+ drawChart('inflationChart', inflationData);
+ drawChart('employmentChart', employmentData);
+ drawChart('ratesChart', ratesData);
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..164f258
--- /dev/null
+++ b/style.css
@@ -0,0 +1,131 @@
+:root {
+ --primary: #2c3e50;
+ --secondary: #34495e;
+ --accent: #3498db;
+ --text: #2c3e50;
+ --background: #ecf0f1;
+ --card-bg: #ffffff;
+ --positive: #27ae60;
+ --negative: #c0392b;
+ --neutral: #7f8c8d;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+ background: var(--background);
+ color: var(--text);
+ line-height: 1.6;
+}
+
+header {
+ background: var(--primary);
+ padding: 1rem;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+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 ease;
+}
+
+.nav-links a:hover {
+ color: var(--accent);
+}
+
+.hero {
+ text-align: center;
+ padding: 4rem 2rem;
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
+ color: white;
+}
+
+.hero h1 {
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+}
+
+#dashboard {
+ max-width: 1200px;
+ margin: 2rem auto;
+ padding: 0 1rem;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+ gap: 2rem;
+}
+
+.metric-card {
+ background: var(--card-bg);
+ border-radius: 12px;
+ padding: 1.5rem;
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+ transition: transform 0.3s ease;
+}
+
+.metric-card:hover {
+ transform: translateY(-5px);
+}
+
+.metric-card h2 {
+ margin-bottom: 1rem;
+ color: var(--primary);
+}
+
+.chart-container {
+ height: 200px;
+ margin-bottom: 1rem;
+}
+
+.metric-value {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-size: 1.25rem;
+}
+
+.change.positive { color: var(--positive); }
+.change.negative { color: var(--negative); }
+.change.neutral { color: var(--neutral); }
+
+footer {
+ text-align: center;
+ padding: 2rem;
+ background: var(--primary);
+ color: white;
+ margin-top: 2rem;
+}
+
+@media (max-width: 768px) {
+ .nav-links {
+ display: none;
+ }
+
+ .hero h1 {
+ font-size: 2rem;
+ }
+
+ #dashboard {
+ grid-template-columns: 1fr;
+ }
+}