commit 6770bc738e352e46b93fbb3c1c3780c010b17822
Author: root <root@hub.scroll.pub>
Date: 2024-12-30 17:46:33 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..e27a0c6
--- /dev/null
+++ b/body.html
@@ -0,0 +1,82 @@
+<header>
+ <nav>
+ <div class="logo">Chinese Journey</div>
+ <div class="nav-links">
+ <a href="#timeline">Timeline</a>
+ <a href="#statistics">Statistics</a>
+ <a href="#stories">Stories</a>
+ <a href="#impact">Impact</a>
+ </div>
+ </nav>
+</header>
+
+<main>
+ <section id="hero">
+ <h1>Journey Across Oceans</h1>
+ <p>Exploring Chinese Immigration Through Time</p>
+ <div class="scroll-indicator"></div>
+ </section>
+
+ <section id="timeline">
+ <h2>Immigration Timeline</h2>
+ <div class="timeline-container">
+ <div class="timeline-item" data-year="1850">
+ <h3>Gold Rush Era</h3>
+ <p>First major wave of Chinese immigrants</p>
+ </div>
+ <div class="timeline-item" data-year="1882">
+ <h3>Exclusion Act</h3>
+ <p>Chinese Exclusion Act implemented</p>
+ </div>
+ <div class="timeline-item" data-year="1943">
+ <h3>Repeal</h3>
+ <p>Exclusion Act repealed</p>
+ </div>
+ <div class="timeline-item" data-year="1965">
+ <h3>New Era</h3>
+ <p>Immigration and Nationality Act</p>
+ </div>
+ </div>
+ </section>
+
+ <section id="statistics">
+ <h2>Immigration Data</h2>
+ <div class="chart-container">
+ <canvas id="populationChart"></canvas>
+ </div>
+ </section>
+
+ <section id="stories">
+ <h2>Personal Stories</h2>
+ <div class="story-grid">
+ <article class="story-card">
+ <h3>The Railroad Workers</h3>
+ <p>Stories of those who built the transcontinental railroad</p>
+ </article>
+ <article class="story-card">
+ <h3>Chinatown Origins</h3>
+ <p>How communities formed and flourished</p>
+ </article>
+ <article class="story-card">
+ <h3>Modern Pioneers</h3>
+ <p>Contemporary immigration stories</p>
+ </article>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <div class="footer-content">
+ <div class="footer-section">
+ <h4>Contact</h4>
+ <p>info@chinese-journey.scroll.pub</p>
+ </div>
+ <div class="footer-section">
+ <h4>Follow Us</h4>
+ <div class="social-links">
+ <a href="#" aria-label="Twitter">Twitter</a>
+ <a href="#" aria-label="Instagram">Instagram</a>
+ </div>
+ </div>
+ </div>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..c8e6372
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,11 @@
+buildHtml
+baseUrl https://chinese-journey.scroll.pub
+metaTags
+ description "Explore the rich history and impact of Chinese immigration through interactive data visualizations and compelling stories"
+ keywords "Chinese immigrants, immigration history, interactive data, Chinese American history"
+ author "Chinese Journey Project"
+editButton /edit.html
+title Chinese Immigration Journey: Stories Through Data
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..fe0d733
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01LNtRTTWpsFPGToKP4NTQfm",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create an engaging website about Chinese immigrants with interactive data visualizations and creative elements.\n\n---domain---\nchinese-journey.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://chinese-journey.scroll.pub\nmetaTags\n description \"Explore the rich history and impact of Chinese immigration through interactive data visualizations and compelling stories\"\n keywords \"Chinese immigrants, immigration history, interactive data, Chinese American history\"\n author \"Chinese Journey Project\"\neditButton /edit.html\ntitle Chinese Immigration Journey: Stories Through Data\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">Chinese Journey</div>\n <div class=\"nav-links\">\n <a href=\"#timeline\">Timeline</a>\n <a href=\"#statistics\">Statistics</a>\n <a href=\"#stories\">Stories</a>\n <a href=\"#impact\">Impact</a>\n </div>\n </nav>\n</header>\n\n<main>\n <section id=\"hero\">\n <h1>Journey Across Oceans</h1>\n <p>Exploring Chinese Immigration Through Time</p>\n <div class=\"scroll-indicator\"></div>\n </section>\n\n <section id=\"timeline\">\n <h2>Immigration Timeline</h2>\n <div class=\"timeline-container\">\n <div class=\"timeline-item\" data-year=\"1850\">\n <h3>Gold Rush Era</h3>\n <p>First major wave of Chinese immigrants</p>\n </div>\n <div class=\"timeline-item\" data-year=\"1882\">\n <h3>Exclusion Act</h3>\n <p>Chinese Exclusion Act implemented</p>\n </div>\n <div class=\"timeline-item\" data-year=\"1943\">\n <h3>Repeal</h3>\n <p>Exclusion Act repealed</p>\n </div>\n <div class=\"timeline-item\" data-year=\"1965\">\n <h3>New Era</h3>\n <p>Immigration and Nationality Act</p>\n </div>\n </div>\n </section>\n\n <section id=\"statistics\">\n <h2>Immigration Data</h2>\n <div class=\"chart-container\">\n <canvas id=\"populationChart\"></canvas>\n </div>\n </section>\n\n <section id=\"stories\">\n <h2>Personal Stories</h2>\n <div class=\"story-grid\">\n <article class=\"story-card\">\n <h3>The Railroad Workers</h3>\n <p>Stories of those who built the transcontinental railroad</p>\n </article>\n <article class=\"story-card\">\n <h3>Chinatown Origins</h3>\n <p>How communities formed and flourished</p>\n </article>\n <article class=\"story-card\">\n <h3>Modern Pioneers</h3>\n <p>Contemporary immigration stories</p>\n </article>\n </div>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <div class=\"footer-section\">\n <h4>Contact</h4>\n <p>info@chinese-journey.scroll.pub</p>\n </div>\n <div class=\"footer-section\">\n <h4>Follow Us</h4>\n <div class=\"social-links\">\n <a href=\"#\" aria-label=\"Twitter\">Twitter</a>\n <a href=\"#\" aria-label=\"Instagram\">Instagram</a>\n </div>\n </div>\n </div>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #c41e3a;\n --secondary-color: #f8c537;\n --text-color: #333;\n --background-color: #fff;\n --accent-color: #1a1a1a;\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}\n\nheader {\n position: fixed;\n width: 100%;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n z-index: 1000;\n box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 5%;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n color: var(--primary-color);\n}\n\n.nav-links a {\n margin-left: 2rem;\n text-decoration: none;\n color: var(--text-color);\n transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n color: var(--primary-color);\n}\n\n#hero {\n height: 100vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),\n url('data:image/svg+xml,<svg width=\"100\" height=\"100\" viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"100\" height=\"100\" fill=\"%23c41e3a\"/></svg>');\n background-size: cover;\n color: white;\n text-align: center;\n}\n\n#hero h1 {\n font-size: 4rem;\n margin-bottom: 1rem;\n animation: fadeIn 1s ease-out;\n}\n\n.timeline-container {\n display: flex;\n justify-content: space-between;\n margin: 4rem 0;\n position: relative;\n padding: 2rem 0;\n}\n\n.timeline-item {\n flex: 1;\n padding: 1rem;\n position: relative;\n text-align: center;\n}\n\n.timeline-item::before {\n content: attr(data-year);\n position: absolute;\n top: -2rem;\n left: 50%;\n transform: translateX(-50%);\n font-weight: bold;\n color: var(--primary-color);\n}\n\n.story-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n padding: 2rem;\n}\n\n.story-card {\n background: white;\n padding: 2rem;\n border-radius: 10px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n transition: transform 0.3s ease;\n}\n\n.story-card:hover {\n transform: translateY(-5px);\n}\n\n@keyframes fadeIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n@media (max-width: 768px) {\n .nav-links {\n display: none;\n }\n \n #hero h1 {\n font-size: 2.5rem;\n }\n \n .timeline-container {\n flex-direction: column;\n }\n \n .timeline-item {\n margin-bottom: 2rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n // Timeline Animation\n const timelineItems = document.querySelectorAll('.timeline-item');\n \n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.opacity = 1;\n entry.target.style.transform = 'translateY(0)';\n }\n });\n });\n\n timelineItems.forEach(item => {\n item.style.opacity = 0;\n item.style.transform = 'translateY(20px)';\n item.style.transition = 'all 0.5s ease-out';\n observer.observe(item);\n });\n\n // Population Chart\n const ctx = document.getElementById('populationChart').getContext('2d');\n \n // Simple line chart using canvas API\n function drawChart() {\n const data = [\n {year: 1850, population: 50},\n {year: 1880, population: 300},\n {year: 1920, population: 200},\n {year: 1960, population: 400},\n {year: 2000, population: 800},\n {year: 2020, population: 1000}\n ];\n\n const canvas = ctx.canvas;\n const width = canvas.width;\n const height = canvas.height;\n\n ctx.clearRect(0, 0, width, height);\n ctx.beginPath();\n ctx.moveTo(0, height - (data[0].population / 10));\n\n data.forEach((point, index) => {\n const x = (width / (data.length - 1)) * index;\n const y = height - (point.population / 10);\n ctx.lineTo(x, y);\n });\n\n ctx.strokeStyle = '#c41e3a';\n ctx.lineWidth = 2;\n ctx.stroke();\n }\n\n drawChart();\n window.addEventListener('resize', drawChart);\n\n // Smooth Scroll\n document.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\n---end---\n\nThis website features:\n1. A fixed header with smooth navigation\n2. A dramatic hero section\n3. An interactive timeline of Chinese immigration history\n4. A data visualization section with a custom canvas chart\n5. A story grid with hover effects\n6. Responsive design for all screen sizes\n7. Smooth scrolling and animations\n8. Accessibility features\n9. SEO optimization\n10. Modern CSS with variables and animations\n11. Clean, semantic HTML structure\n12. Interactive JavaScript elements\n\nThe design uses traditional Chinese colors (red and gold) in a modern way, with smooth animations and transitions throughout. The layout is clean and professional while maintaining visual interest through interactive elements and careful typography."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 285,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2703
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..fe5f031
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# chinese-journey1.scroll.pub
+Website generated by Claude from prompt: Create a website that talks about Chinese immigrant，be interactive data driven and creative
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..872e9b4
--- /dev/null
+++ b/script.js
@@ -0,0 +1,66 @@
+document.addEventListener('DOMContentLoaded', function() {
+ // Timeline Animation
+ const timelineItems = document.querySelectorAll('.timeline-item');
+
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.style.opacity = 1;
+ entry.target.style.transform = 'translateY(0)';
+ }
+ });
+ });
+
+ timelineItems.forEach(item => {
+ item.style.opacity = 0;
+ item.style.transform = 'translateY(20px)';
+ item.style.transition = 'all 0.5s ease-out';
+ observer.observe(item);
+ });
+
+ // Population Chart
+ const ctx = document.getElementById('populationChart').getContext('2d');
+
+ // Simple line chart using canvas API
+ function drawChart() {
+ const data = [
+ {year: 1850, population: 50},
+ {year: 1880, population: 300},
+ {year: 1920, population: 200},
+ {year: 1960, population: 400},
+ {year: 2000, population: 800},
+ {year: 2020, population: 1000}
+ ];
+
+ const canvas = ctx.canvas;
+ const width = canvas.width;
+ const height = canvas.height;
+
+ ctx.clearRect(0, 0, width, height);
+ ctx.beginPath();
+ ctx.moveTo(0, height - (data[0].population / 10));
+
+ data.forEach((point, index) => {
+ const x = (width / (data.length - 1)) * index;
+ const y = height - (point.population / 10);
+ ctx.lineTo(x, y);
+ });
+
+ ctx.strokeStyle = '#c41e3a';
+ ctx.lineWidth = 2;
+ ctx.stroke();
+ }
+
+ drawChart();
+ window.addEventListener('resize', drawChart);
+
+ // Smooth Scroll
+ 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..64568b3
--- /dev/null
+++ b/style.css
@@ -0,0 +1,140 @@
+:root {
+ --primary-color: #c41e3a;
+ --secondary-color: #f8c537;
+ --text-color: #333;
+ --background-color: #fff;
+ --accent-color: #1a1a1a;
+}
+
+* {
+ 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);
+}
+
+header {
+ position: fixed;
+ width: 100%;
+ background: rgba(255, 255, 255, 0.95);
+ backdrop-filter: blur(10px);
+ z-index: 1000;
+ box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
+}
+
+nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 5%;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ color: var(--primary-color);
+}
+
+.nav-links a {
+ margin-left: 2rem;
+ text-decoration: none;
+ color: var(--text-color);
+ transition: color 0.3s ease;
+}
+
+.nav-links a:hover {
+ color: var(--primary-color);
+}
+
+#hero {
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
+ url('data:image/svg+xml,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100" fill="%23c41e3a"/></svg>');
+ background-size: cover;
+ color: white;
+ text-align: center;
+}
+
+#hero h1 {
+ font-size: 4rem;
+ margin-bottom: 1rem;
+ animation: fadeIn 1s ease-out;
+}
+
+.timeline-container {
+ display: flex;
+ justify-content: space-between;
+ margin: 4rem 0;
+ position: relative;
+ padding: 2rem 0;
+}
+
+.timeline-item {
+ flex: 1;
+ padding: 1rem;
+ position: relative;
+ text-align: center;
+}
+
+.timeline-item::before {
+ content: attr(data-year);
+ position: absolute;
+ top: -2rem;
+ left: 50%;
+ transform: translateX(-50%);
+ font-weight: bold;
+ color: var(--primary-color);
+}
+
+.story-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ padding: 2rem;
+}
+
+.story-card {
+ background: white;
+ padding: 2rem;
+ border-radius: 10px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ transition: transform 0.3s ease;
+}
+
+.story-card:hover {
+ transform: translateY(-5px);
+}
+
+@keyframes fadeIn {
+ from { opacity: 0; transform: translateY(20px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+@media (max-width: 768px) {
+ .nav-links {
+ display: none;
+ }
+
+ #hero h1 {
+ font-size: 2.5rem;
+ }
+
+ .timeline-container {
+ flex-direction: column;
+ }
+
+ .timeline-item {
+ margin-bottom: 2rem;
+ }
+}