commit 4762ac3f4e6f23a12b75d9f5d01beb2fcbad8ac5
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 17:53:16 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..29bc3bf
--- /dev/null
+++ b/body.html
@@ -0,0 +1,60 @@
+<header>
+ <h1>EconoCompare</h1>
+ <p class="tagline">Compare Economic Indicators Worldwide</p>
+</header>
+
+<main>
+ <section class="comparison-tool">
+ <div class="country-selectors">
+ <div class="country-select">
+ <label for="country1">First Country</label>
+ <select id="country1" aria-label="Select first country">
+ <option value="">Select a country</option>
+ </select>
+ </div>
+ <div class="vs-badge">VS</div>
+ <div class="country-select">
+ <label for="country2">Second Country</label>
+ <select id="country2" aria-label="Select second country">
+ <option value="">Select a country</option>
+ </select>
+ </div>
+ </div>
+
+ <div class="comparison-results">
+ <div class="country-data" id="country1-data">
+ <div class="metric gdp">
+ <h3>GDP</h3>
+ <p class="value">-</p>
+ </div>
+ <div class="metric population">
+ <h3>Population</h3>
+ <p class="value">-</p>
+ </div>
+ <div class="metric gdp-per-capita">
+ <h3>GDP per Capita</h3>
+ <p class="value">-</p>
+ </div>
+ </div>
+
+ <div class="country-data" id="country2-data">
+ <div class="metric gdp">
+ <h3>GDP</h3>
+ <p class="value">-</p>
+ </div>
+ <div class="metric population">
+ <h3>Population</h3>
+ <p class="value">-</p>
+ </div>
+ <div class="metric gdp-per-capita">
+ <h3>GDP per Capita</h3>
+ <p class="value">-</p>
+ </div>
+ </div>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <p>Made with 💙 for economics enthusiasts</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..5b20f5e
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://econocompare.scroll.pub
+metaTags
+editButton /edit.html
+title EconoCompare - Global Economy Comparison Tool
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..c23d01d
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01VdTTpSprit5AqufrYMTYqy",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a website for comparing country economies. Here's a suitable domain name and implementation:\n\n---domain---\neconocompare.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://econocompare.scroll.pub\nmetaTags\neditButton /edit.html\ntitle EconoCompare - Global Economy Comparison Tool\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <h1>EconoCompare</h1>\n <p class=\"tagline\">Compare Economic Indicators Worldwide</p>\n</header>\n\n<main>\n <section class=\"comparison-tool\">\n <div class=\"country-selectors\">\n <div class=\"country-select\">\n <label for=\"country1\">First Country</label>\n <select id=\"country1\" aria-label=\"Select first country\">\n <option value=\"\">Select a country</option>\n </select>\n </div>\n <div class=\"vs-badge\">VS</div>\n <div class=\"country-select\">\n <label for=\"country2\">Second Country</label>\n <select id=\"country2\" aria-label=\"Select second country\">\n <option value=\"\">Select a country</option>\n </select>\n </div>\n </div>\n\n <div class=\"comparison-results\">\n <div class=\"country-data\" id=\"country1-data\">\n <div class=\"metric gdp\">\n <h3>GDP</h3>\n <p class=\"value\">-</p>\n </div>\n <div class=\"metric population\">\n <h3>Population</h3>\n <p class=\"value\">-</p>\n </div>\n <div class=\"metric gdp-per-capita\">\n <h3>GDP per Capita</h3>\n <p class=\"value\">-</p>\n </div>\n </div>\n\n <div class=\"country-data\" id=\"country2-data\">\n <div class=\"metric gdp\">\n <h3>GDP</h3>\n <p class=\"value\">-</p>\n </div>\n <div class=\"metric population\">\n <h3>Population</h3>\n <p class=\"value\">-</p>\n </div>\n <div class=\"metric gdp-per-capita\">\n <h3>GDP per Capita</h3>\n <p class=\"value\">-</p>\n </div>\n </div>\n </div>\n </section>\n</main>\n\n<footer>\n <p>Made with 💙 for economics enthusiasts</p>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --secondary-color: #3498db;\n --background-color: #ecf0f1;\n --text-color: #2c3e50;\n --card-background: #ffffff;\n --accent-color: #e74c3c;\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 background: var(--background-color);\n color: var(--text-color);\n line-height: 1.6;\n}\n\nheader {\n background: var(--primary-color);\n color: white;\n padding: 2rem;\n text-align: center;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n}\n\nh1 {\n font-size: 2.5rem;\n margin-bottom: 0.5rem;\n background: linear-gradient(45deg, #3498db, #2ecc71);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.tagline {\n font-size: 1.2rem;\n opacity: 0.9;\n}\n\nmain {\n max-width: 1200px;\n margin: 2rem auto;\n padding: 0 1rem;\n}\n\n.comparison-tool {\n background: var(--card-background);\n border-radius: 15px;\n padding: 2rem;\n box-shadow: 0 4px 20px rgba(0,0,0,0.1);\n}\n\n.country-selectors {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 1rem;\n margin-bottom: 2rem;\n}\n\n.country-select {\n flex: 1;\n}\n\n.vs-badge {\n background: var(--accent-color);\n color: white;\n padding: 0.5rem 1rem;\n border-radius: 50px;\n font-weight: bold;\n}\n\nlabel {\n display: block;\n margin-bottom: 0.5rem;\n font-weight: 500;\n}\n\nselect {\n width: 100%;\n padding: 0.8rem;\n border: 2px solid var(--primary-color);\n border-radius: 8px;\n font-size: 1rem;\n transition: border-color 0.3s;\n}\n\nselect:focus {\n outline: none;\n border-color: var(--secondary-color);\n}\n\n.comparison-results {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 2rem;\n}\n\n.country-data {\n display: grid;\n gap: 1rem;\n}\n\n.metric {\n background: var(--background-color);\n padding: 1.5rem;\n border-radius: 10px;\n transition: transform 0.3s;\n}\n\n.metric:hover {\n transform: translateY(-5px);\n}\n\n.metric h3 {\n color: var(--primary-color);\n margin-bottom: 0.5rem;\n}\n\n.value {\n font-size: 1.5rem;\n font-weight: bold;\n color: var(--secondary-color);\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n background: var(--primary-color);\n color: white;\n margin-top: 2rem;\n}\n\n@media (max-width: 768px) {\n .country-selectors {\n flex-direction: column;\n }\n \n .comparison-results {\n grid-template-columns: 1fr;\n }\n \n .vs-badge {\n margin: 1rem 0;\n }\n}\n\n---script.js---\nconst countries = {\n 'US': {\n name: 'United States',\n gdp: '21.43T',\n population: '331M',\n gdpPerCapita: '63,544'\n },\n 'CN': {\n name: 'China',\n gdp: '14.72T',\n population: '1.4B',\n gdpPerCapita: '10,500'\n },\n 'JP': {\n name: 'Japan',\n gdp: '5.06T',\n population: '126M',\n gdpPerCapita: '40,193'\n },\n 'DE': {\n name: 'Germany',\n gdp: '3.85T',\n population: '83M',\n gdpPerCapita: '46,208'\n }\n};\n\ndocument.addEventListener('DOMContentLoaded', () => {\n const country1Select = document.getElementById('country1');\n const country2Select = document.getElementById('country2');\n \n // Populate country dropdowns\n Object.keys(countries).forEach(code => {\n const option = document.createElement('option');\n option.value = code;\n option.textContent = countries[code].name;\n country1Select.appendChild(option.cloneNode(true));\n country2Select.appendChild(option);\n });\n\n function updateComparison(countryElement, countryCode) {\n if (!countryCode) return;\n \n const data = countries[countryCode];\n const elements = countryElement.querySelectorAll('.value');\n \n elements[0].textContent = data.gdp;\n elements[1].textContent = data.population;\n elements[2].textContent = data.gdpPerCapita;\n }\n\n country1Select.addEventListener('change', (e) => {\n updateComparison(document.getElementById('country1-data'), e.target.value);\n });\n\n country2Select.addEventListener('change', (e) => {\n updateComparison(document.getElementById('country2-data'), e.target.value);\n });\n});\n\n---end---\n\nThis implementation creates a sleek, modern website for comparing economic indicators between countries. It features:\n\n1. Clean, minimalist design with smooth animations\n2. Responsive layout that works well on all devices\n3. Interactive country selection with real-time comparison updates\n4. Beautiful gradient effects and hover states\n5. Accessible form controls and semantic HTML\n6. Sample data for four major economies\n7. Modern CSS with variables and flexible layouts\n8. Professional animations and transitions\n9. Clear visual hierarchy and intuitive interface\n\nThe domain name \"econocompare\" is:\n- Short and memorable\n- Describes the purpose clearly\n- Easy to spell and pronounce\n- Combines \"economy\" and \"compare\"\n- Professional sounding"
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 286,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2349
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..097cab9
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# econocompare.scroll.pub
+Website generated by Claude from prompt: Create simple page allowing to compeare economy of conutries. be creative.
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..a7a52a8
--- /dev/null
+++ b/script.js
@@ -0,0 +1,59 @@
+const countries = {
+ 'US': {
+ name: 'United States',
+ gdp: '21.43T',
+ population: '331M',
+ gdpPerCapita: '63,544'
+ },
+ 'CN': {
+ name: 'China',
+ gdp: '14.72T',
+ population: '1.4B',
+ gdpPerCapita: '10,500'
+ },
+ 'JP': {
+ name: 'Japan',
+ gdp: '5.06T',
+ population: '126M',
+ gdpPerCapita: '40,193'
+ },
+ 'DE': {
+ name: 'Germany',
+ gdp: '3.85T',
+ population: '83M',
+ gdpPerCapita: '46,208'
+ }
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+ const country1Select = document.getElementById('country1');
+ const country2Select = document.getElementById('country2');
+
+ // Populate country dropdowns
+ Object.keys(countries).forEach(code => {
+ const option = document.createElement('option');
+ option.value = code;
+ option.textContent = countries[code].name;
+ country1Select.appendChild(option.cloneNode(true));
+ country2Select.appendChild(option);
+ });
+
+ function updateComparison(countryElement, countryCode) {
+ if (!countryCode) return;
+
+ const data = countries[countryCode];
+ const elements = countryElement.querySelectorAll('.value');
+
+ elements[0].textContent = data.gdp;
+ elements[1].textContent = data.population;
+ elements[2].textContent = data.gdpPerCapita;
+ }
+
+ country1Select.addEventListener('change', (e) => {
+ updateComparison(document.getElementById('country1-data'), e.target.value);
+ });
+
+ country2Select.addEventListener('change', (e) => {
+ updateComparison(document.getElementById('country2-data'), e.target.value);
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..2077fef
--- /dev/null
+++ b/style.css
@@ -0,0 +1,150 @@
+:root {
+ --primary-color: #2c3e50;
+ --secondary-color: #3498db;
+ --background-color: #ecf0f1;
+ --text-color: #2c3e50;
+ --card-background: #ffffff;
+ --accent-color: #e74c3c;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ background: var(--background-color);
+ color: var(--text-color);
+ line-height: 1.6;
+}
+
+header {
+ background: var(--primary-color);
+ color: white;
+ padding: 2rem;
+ text-align: center;
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+h1 {
+ font-size: 2.5rem;
+ margin-bottom: 0.5rem;
+ background: linear-gradient(45deg, #3498db, #2ecc71);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.tagline {
+ font-size: 1.2rem;
+ opacity: 0.9;
+}
+
+main {
+ max-width: 1200px;
+ margin: 2rem auto;
+ padding: 0 1rem;
+}
+
+.comparison-tool {
+ background: var(--card-background);
+ border-radius: 15px;
+ padding: 2rem;
+ box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+}
+
+.country-selectors {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 1rem;
+ margin-bottom: 2rem;
+}
+
+.country-select {
+ flex: 1;
+}
+
+.vs-badge {
+ background: var(--accent-color);
+ color: white;
+ padding: 0.5rem 1rem;
+ border-radius: 50px;
+ font-weight: bold;
+}
+
+label {
+ display: block;
+ margin-bottom: 0.5rem;
+ font-weight: 500;
+}
+
+select {
+ width: 100%;
+ padding: 0.8rem;
+ border: 2px solid var(--primary-color);
+ border-radius: 8px;
+ font-size: 1rem;
+ transition: border-color 0.3s;
+}
+
+select:focus {
+ outline: none;
+ border-color: var(--secondary-color);
+}
+
+.comparison-results {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 2rem;
+}
+
+.country-data {
+ display: grid;
+ gap: 1rem;
+}
+
+.metric {
+ background: var(--background-color);
+ padding: 1.5rem;
+ border-radius: 10px;
+ transition: transform 0.3s;
+}
+
+.metric:hover {
+ transform: translateY(-5px);
+}
+
+.metric h3 {
+ color: var(--primary-color);
+ margin-bottom: 0.5rem;
+}
+
+.value {
+ font-size: 1.5rem;
+ font-weight: bold;
+ color: var(--secondary-color);
+}
+
+footer {
+ text-align: center;
+ padding: 2rem;
+ background: var(--primary-color);
+ color: white;
+ margin-top: 2rem;
+}
+
+@media (max-width: 768px) {
+ .country-selectors {
+ flex-direction: column;
+ }
+
+ .comparison-results {
+ grid-template-columns: 1fr;
+ }
+
+ .vs-badge {
+ margin: 1rem 0;
+ }
+}