commit 621f065f1d4199e714f88858c2ea93e005431a9f
Author: root <root@hub.scroll.pub>
Date: 2024-12-29 13:04:28 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..d85cbaf
--- /dev/null
+++ b/body.html
@@ -0,0 +1,61 @@
+<header>
+ <h1>US-China Comparison</h1>
+ <p>Explore the geography and history of two global superpowers.</p>
+</header>
+
+<main>
+ <section id="comparison-tools">
+ <h2>Interactive Comparison Tools</h2>
+ <div class="tool-container">
+ <div class="tool">
+ <h3>Geography Comparison</h3>
+ <div class="map-container">
+ <div id="us-map" class="map"></div>
+ <div id="china-map" class="map"></div>
+ </div>
+ <button onclick="compareGeography()">Compare Geography</button>
+ </div>
+ <div class="tool">
+ <h3>History Timeline</h3>
+ <div class="timeline-container">
+ <div id="us-timeline" class="timeline"></div>
+ <div id="china-timeline" class="timeline"></div>
+ </div>
+ <button onclick="compareHistory()">Compare History</button>
+ </div>
+ </div>
+ </section>
+
+ <section id="data-visualization">
+ <h2>Data Visualization</h2>
+ <div class="chart-container">
+ <canvas id="comparison-chart"></canvas>
+ </div>
+ </section>
+
+ <section id="key-facts">
+ <h2>Key Facts</h2>
+ <div class="facts-container">
+ <div class="fact">
+ <h3>United States</h3>
+ <ul>
+ <li>Area: 9.8 million km²</li>
+ <li>Population: 331 million</li>
+ <li>Capital: Washington, D.C.</li>
+ </ul>
+ </div>
+ <div class="fact">
+ <h3>China</h3>
+ <ul>
+ <li>Area: 9.6 million km²</li>
+ <li>Population: 1.4 billion</li>
+ <li>Capital: Beijing</li>
+ </ul>
+ </div>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <p>Explore more about the US and China.</p>
+</footer>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..5736df4
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://us-china.scroll.pub
+metaTags
+editButton /edit.html
+title US-China Comparison: Geography & History
+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..f7476d6
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,25 @@
+{
+ "id": "550e0bc9-462a-4bf1-b753-7ca07e6735fe",
+ "object": "chat.completion",
+ "created": 1735477447,
+ "model": "deepseek-chat",
+ "choices": [
+ {
+ "index": 0,
+ "message": {
+ "role": "assistant",
+ "content": "---domain---\nus-china.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://us-china.scroll.pub\nmetaTags\neditButton /edit.html\ntitle US-China Comparison: Geography & History\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <h1>US-China Comparison</h1>\n <p>Explore the geography and history of two global superpowers.</p>\n</header>\n\n<main>\n <section id=\"comparison-tools\">\n <h2>Interactive Comparison Tools</h2>\n <div class=\"tool-container\">\n <div class=\"tool\">\n <h3>Geography Comparison</h3>\n <div class=\"map-container\">\n <div id=\"us-map\" class=\"map\"></div>\n <div id=\"china-map\" class=\"map\"></div>\n </div>\n <button onclick=\"compareGeography()\">Compare Geography</button>\n </div>\n <div class=\"tool\">\n <h3>History Timeline</h3>\n <div class=\"timeline-container\">\n <div id=\"us-timeline\" class=\"timeline\"></div>\n <div id=\"china-timeline\" class=\"timeline\"></div>\n </div>\n <button onclick=\"compareHistory()\">Compare History</button>\n </div>\n </div>\n </section>\n\n <section id=\"data-visualization\">\n <h2>Data Visualization</h2>\n <div class=\"chart-container\">\n <canvas id=\"comparison-chart\"></canvas>\n </div>\n </section>\n\n <section id=\"key-facts\">\n <h2>Key Facts</h2>\n <div class=\"facts-container\">\n <div class=\"fact\">\n <h3>United States</h3>\n <ul>\n <li>Area: 9.8 million km²</li>\n <li>Population: 331 million</li>\n <li>Capital: Washington, D.C.</li>\n </ul>\n </div>\n <div class=\"fact\">\n <h3>China</h3>\n <ul>\n <li>Area: 9.6 million km²</li>\n <li>Population: 1.4 billion</li>\n <li>Capital: Beijing</li>\n </ul>\n </div>\n </div>\n </section>\n</main>\n\n<footer>\n <p>Explore more about the US and China.</p>\n</footer>\n---style.css---\nbody {\n font-family: 'Arial', sans-serif;\n margin: 0;\n padding: 0;\n background-color: #f4f4f4;\n color: #333;\n}\n\nheader {\n background-color: #2c3e50;\n color: #fff;\n padding: 20px;\n text-align: center;\n}\n\nh1 {\n margin: 0;\n font-size: 2.5em;\n}\n\np {\n font-size: 1.2em;\n}\n\nmain {\n padding: 20px;\n}\n\nsection {\n margin-bottom: 40px;\n}\n\nh2 {\n font-size: 2em;\n margin-bottom: 20px;\n}\n\n.tool-container {\n display: flex;\n justify-content: space-between;\n flex-wrap: wrap;\n}\n\n.tool {\n background-color: #fff;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n width: 48%;\n margin-bottom: 20px;\n}\n\n.map-container, .timeline-container {\n display: flex;\n justify-content: space-between;\n}\n\n.map, .timeline {\n width: 48%;\n height: 200px;\n background-color: #e0e0e0;\n border-radius: 8px;\n}\n\nbutton {\n background-color: #3498db;\n color: #fff;\n border: none;\n padding: 10px 20px;\n border-radius: 5px;\n cursor: pointer;\n margin-top: 10px;\n}\n\nbutton:hover {\n background-color: #2980b9;\n}\n\n.chart-container {\n background-color: #fff;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.facts-container {\n display: flex;\n justify-content: space-between;\n}\n\n.fact {\n background-color: #fff;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n width: 48%;\n}\n\nfooter {\n background-color: #2c3e50;\n color: #fff;\n text-align: center;\n padding: 10px;\n margin-top: 40px;\n}\n\n@media (max-width: 768px) {\n .tool, .fact {\n width: 100%;\n }\n\n .map-container, .timeline-container {\n flex-direction: column;\n }\n\n .map, .timeline {\n width: 100%;\n margin-bottom: 10px;\n }\n}\n---script.js---\nfunction compareGeography() {\n alert('Geography comparison feature coming soon!');\n}\n\nfunction compareHistory() {\n alert('History comparison feature coming soon!');\n}\n\nconst ctx = document.getElementById('comparison-chart').getContext('2d');\nconst comparisonChart = new Chart(ctx, {\n type: 'bar',\n data: {\n labels: ['Area', 'Population', 'GDP'],\n datasets: [\n {\n label: 'United States',\n data: [9.8, 331, 21.44],\n backgroundColor: 'rgba(52, 152, 219, 0.5)',\n borderColor: 'rgba(52, 152, 219, 1)',\n borderWidth: 1\n },\n {\n label: 'China',\n data: [9.6, 1400, 14.72],\n backgroundColor: 'rgba(231, 76, 60, 0.5)',\n borderColor: 'rgba(231, 76, 60, 1)',\n borderWidth: 1\n }\n ]\n },\n options: {\n scales: {\n y: {\n beginAtZero: true\n }\n }\n }\n});\n---end---"
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 258,
+ "completion_tokens": 1431,
+ "total_tokens": 1689,
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 258
+ },
+ "system_fingerprint": "fp_f1afce2943"
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..2b6aab2
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# us-china.scroll.pub
+Website generated by DeepSeek from prompt: Create a US and China comparison of geography and history, with some interactive tools and comparison tools. Be creative and professional.
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..9af45c7
--- /dev/null
+++ b/script.js
@@ -0,0 +1,38 @@
+function compareGeography() {
+ alert('Geography comparison feature coming soon!');
+}
+
+function compareHistory() {
+ alert('History comparison feature coming soon!');
+}
+
+const ctx = document.getElementById('comparison-chart').getContext('2d');
+const comparisonChart = new Chart(ctx, {
+ type: 'bar',
+ data: {
+ labels: ['Area', 'Population', 'GDP'],
+ datasets: [
+ {
+ label: 'United States',
+ data: [9.8, 331, 21.44],
+ backgroundColor: 'rgba(52, 152, 219, 0.5)',
+ borderColor: 'rgba(52, 152, 219, 1)',
+ borderWidth: 1
+ },
+ {
+ label: 'China',
+ data: [9.6, 1400, 14.72],
+ backgroundColor: 'rgba(231, 76, 60, 0.5)',
+ borderColor: 'rgba(231, 76, 60, 1)',
+ borderWidth: 1
+ }
+ ]
+ },
+ options: {
+ scales: {
+ y: {
+ beginAtZero: true
+ }
+ }
+ }
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..427cf5b
--- /dev/null
+++ b/style.css
@@ -0,0 +1,120 @@
+body {
+ font-family: 'Arial', sans-serif;
+ margin: 0;
+ padding: 0;
+ background-color: #f4f4f4;
+ color: #333;
+}
+
+header {
+ background-color: #2c3e50;
+ color: #fff;
+ padding: 20px;
+ text-align: center;
+}
+
+h1 {
+ margin: 0;
+ font-size: 2.5em;
+}
+
+p {
+ font-size: 1.2em;
+}
+
+main {
+ padding: 20px;
+}
+
+section {
+ margin-bottom: 40px;
+}
+
+h2 {
+ font-size: 2em;
+ margin-bottom: 20px;
+}
+
+.tool-container {
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+}
+
+.tool {
+ background-color: #fff;
+ padding: 20px;
+ border-radius: 8px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ width: 48%;
+ margin-bottom: 20px;
+}
+
+.map-container, .timeline-container {
+ display: flex;
+ justify-content: space-between;
+}
+
+.map, .timeline {
+ width: 48%;
+ height: 200px;
+ background-color: #e0e0e0;
+ border-radius: 8px;
+}
+
+button {
+ background-color: #3498db;
+ color: #fff;
+ border: none;
+ padding: 10px 20px;
+ border-radius: 5px;
+ cursor: pointer;
+ margin-top: 10px;
+}
+
+button:hover {
+ background-color: #2980b9;
+}
+
+.chart-container {
+ background-color: #fff;
+ padding: 20px;
+ border-radius: 8px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.facts-container {
+ display: flex;
+ justify-content: space-between;
+}
+
+.fact {
+ background-color: #fff;
+ padding: 20px;
+ border-radius: 8px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ width: 48%;
+}
+
+footer {
+ background-color: #2c3e50;
+ color: #fff;
+ text-align: center;
+ padding: 10px;
+ margin-top: 40px;
+}
+
+@media (max-width: 768px) {
+ .tool, .fact {
+ width: 100%;
+ }
+
+ .map-container, .timeline-container {
+ flex-direction: column;
+ }
+
+ .map, .timeline {
+ width: 100%;
+ margin-bottom: 10px;
+ }
+}
\ No newline at end of file