Last 10 Commits for chinese-journey.scroll.pub

commit 3e820ae7954aaa981502c166d29cd465b5fc4026 Author: root <root@hub.scroll.pub> Date: 2024-12-30 17:36:30 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..355b1c4 --- /dev/null +++ b/body.html @@ -0,0 +1,77 @@ +<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 of Chinese Immigrants</h1> + <div class="parallax-container"></div> + </section> + + <section id="timeline"> + <h2>Immigration Timeline</h2> + <div class="timeline-container"> + <div class="timeline-item" data-year="1848"> + <h3>Gold Rush Era</h3> + <p>First major wave of Chinese immigrants arrive in America</p> + </div> + <div class="timeline-item" data-year="1882"> + <h3>Chinese Exclusion Act</h3> + <p>Immigration restrictions implemented</p> + </div> + <div class="timeline-item" data-year="1943"> + <h3>Magnuson Act</h3> + <p>Repealing of exclusion laws</p> + </div> + <div class="timeline-item" data-year="1965"> + <h3>Immigration Act</h3> + <p>New era of Chinese immigration begins</p> + </div> + </div> + </section> + + <section id="statistics"> + <h2>Immigration Data</h2> + <div class="chart-container"> + <canvas id="populationChart"></canvas> + <div class="chart-legend"></div> + </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 Chinese laborers who built the transcontinental railroad</p> + </article> + <article class="story-card"> + <h3>Chinatown Origins</h3> + <p>How Chinese communities formed and flourished</p> + </article> + <article class="story-card"> + <h3>Modern Success</h3> + <p>Contemporary stories of achievement and contribution</p> + </article> + </div> + </section> +</main> + +<footer> + <div class="footer-content"> + <p>Created with dedication to preserve and share Chinese immigrant history</p> + <nav class="footer-links"> + <a href="#about">About</a> + <a href="#contact">Contact</a> + <a href="#sources">Sources</a> + </nav> + </div> +</footer> diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..015adcc --- /dev/null +++ b/index.scroll @@ -0,0 +1,11 @@ +buildHtml +baseUrl https://chinese-journey.scroll.pub +metaTags + description "Explore the rich history and data of Chinese immigration through an interactive journey" + keywords "Chinese immigrants, immigration history, interactive data, Chinese American history" + author "Chinese Journey Project" +editButton /edit.html +title Journey of Chinese Immigrants: An Interactive Experience +style.css +body.html +script.js diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..c8b2da1 --- /dev/null +++ b/prompt.json @@ -0,0 +1,20 @@ +{ + "id": "msg_01BABzcuYwT2ENfU84vVBSRf", + "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 data of Chinese immigration through an interactive journey\"\n keywords \"Chinese immigrants, immigration history, interactive data, Chinese American history\"\n author \"Chinese Journey Project\"\neditButton /edit.html\ntitle Journey of Chinese Immigrants: An Interactive Experience\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 of Chinese Immigrants</h1>\n <div class=\"parallax-container\"></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=\"1848\">\n <h3>Gold Rush Era</h3>\n <p>First major wave of Chinese immigrants arrive in America</p>\n </div>\n <div class=\"timeline-item\" data-year=\"1882\">\n <h3>Chinese Exclusion Act</h3>\n <p>Immigration restrictions implemented</p>\n </div>\n <div class=\"timeline-item\" data-year=\"1943\">\n <h3>Magnuson Act</h3>\n <p>Repealing of exclusion laws</p>\n </div>\n <div class=\"timeline-item\" data-year=\"1965\">\n <h3>Immigration Act</h3>\n <p>New era of Chinese immigration begins</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 class=\"chart-legend\"></div>\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 Chinese laborers who built the transcontinental railroad</p>\n </article>\n <article class=\"story-card\">\n <h3>Chinatown Origins</h3>\n <p>How Chinese communities formed and flourished</p>\n </article>\n <article class=\"story-card\">\n <h3>Modern Success</h3>\n <p>Contemporary stories of achievement and contribution</p>\n </article>\n </div>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <p>Created with dedication to preserve and share Chinese immigrant history</p>\n <nav class=\"footer-links\">\n <a href=\"#about\">About</a>\n <a href=\"#contact\">Contact</a>\n <a href=\"#sources\">Sources</a>\n </nav>\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: #1a4d2e;\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 z-index: 1000;\n box-shadow: 0 2px 10px 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}\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 align-items: center;\n justify-content: center;\n position: relative;\n overflow: hidden;\n}\n\n.parallax-container {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><rect width=\"100\" height=\"100\" fill=\"%23c41e3a\"/></svg>');\n background-size: cover;\n opacity: 0.1;\n}\n\nh1 {\n font-size: 4rem;\n color: var(--primary-color);\n text-align: center;\n z-index: 1;\n text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);\n}\n\nsection {\n padding: 5rem 10%;\n}\n\n.timeline-container {\n display: grid;\n grid-gap: 2rem;\n margin: 4rem 0;\n}\n\n.timeline-item {\n position: relative;\n padding: 2rem;\n background: white;\n border-radius: 8px;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n transition: transform 0.3s ease;\n}\n\n.timeline-item:hover {\n transform: translateY(-5px);\n}\n\n.timeline-item::before {\n content: attr(data-year);\n position: absolute;\n top: -1rem;\n left: 2rem;\n background: var(--primary-color);\n color: white;\n padding: 0.5rem 1rem;\n border-radius: 20px;\n}\n\n.chart-container {\n margin: 2rem 0;\n height: 400px;\n position: relative;\n}\n\n.story-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n margin: 2rem 0;\n}\n\n.story-card {\n background: white;\n padding: 2rem;\n border-radius: 8px;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n transition: transform 0.3s ease;\n}\n\n.story-card:hover {\n transform: translateY(-5px);\n}\n\nfooter {\n background: var(--accent-color);\n color: white;\n padding: 2rem 5%;\n}\n\n.footer-content {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.footer-links a {\n color: white;\n text-decoration: none;\n margin-left: 1rem;\n}\n\n@media (max-width: 768px) {\n h1 {\n font-size: 2.5rem;\n }\n\n nav {\n flex-direction: column;\n padding: 1rem;\n }\n\n .nav-links {\n margin-top: 1rem;\n }\n\n .nav-links a {\n margin: 0 0.5rem;\n }\n\n section {\n padding: 3rem 5%;\n }\n\n .footer-content {\n flex-direction: column;\n text-align: center;\n }\n\n .footer-links {\n margin-top: 1rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Parallax effect for hero section\n window.addEventListener('scroll', () => {\n const parallax = document.querySelector('.parallax-container');\n const scrolled = window.pageYOffset;\n parallax.style.transform = `translateY(${scrolled * 0.5}px)`;\n });\n\n // Population chart\n const ctx = document.getElementById('populationChart').getContext('2d');\n const data = {\n labels: ['1850', '1880', '1920', '1960', '2000', '2020'],\n values: [4000, 105000, 61000, 237000, 2432000, 5400000]\n };\n\n function drawChart() {\n ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);\n \n const maxValue = Math.max(...data.values);\n const heightRatio = ctx.canvas.height / maxValue;\n const barWidth = ctx.canvas.width / data.labels.length - 40;\n\n ctx.fillStyle = '#c41e3a';\n \n data.values.forEach((value, index) => {\n const x = (ctx.canvas.width / data.labels.length) * index + 20;\n const barHeight = value * heightRatio;\n const y = ctx.canvas.height - barHeight;\n \n ctx.fillRect(x, y, barWidth, barHeight);\n \n // Add labels\n ctx.fillStyle = '#333';\n ctx.font = '12px Arial';\n ctx.fillText(data.labels[index], x, ctx.canvas.height - 10);\n ctx.fillText(value.toLocaleString(), x, y - 10);\n ctx.fillStyle = '#c41e3a';\n });\n }\n\n // Responsive chart\n function resizeChart() {\n ctx.canvas.width = ctx.canvas.parentNode.offsetWidth;\n ctx.canvas.height = 400;\n drawChart();\n }\n\n window.addEventListener('resize', resizeChart);\n resizeChart();\n\n // Intersection Observer for timeline items\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 = 'translateX(0)';\n }\n });\n }, { threshold: 0.1 });\n\n document.querySelectorAll('.timeline-item').forEach(item => {\n item.style.opacity = '0';\n item.style.transform = 'translateX(-50px)';\n item.style.transition = 'opacity 0.5s ease, transform 0.5s ease';\n observer.observe(item);\n });\n});\n\n---end---\n\nThis website features:\n1. A parallax hero section\n2. An interactive timeline of Chinese immigration history\n3. A custom-built responsive chart showing population growth\n4. Story cards with hover effects\n5. Smooth animations and transitions\n6. Mobile-responsive design\n7. Semantic HTML structure\n8. Accessible navigation\n9. Performance optimized code\n10. Clean, modern design with traditional Chinese colors\n\nThe domain name \"chinese-journey.scroll.pub\" reflects the content while being memorable and descriptive." + } + ], + "stop_reason": "end_turn", + "stop_sequence": null, + "usage": { + "input_tokens": 285, + "cache_creation_input_tokens": 0, + "cache_read_input_tokens": 0, + "output_tokens": 2978 + } +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..4409ba4 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# chinese-journey.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..859a017 --- /dev/null +++ b/script.js @@ -0,0 +1,67 @@ +document.addEventListener('DOMContentLoaded', () => { + // Parallax effect for hero section + window.addEventListener('scroll', () => { + const parallax = document.querySelector('.parallax-container'); + const scrolled = window.pageYOffset; + parallax.style.transform = `translateY(${scrolled * 0.5}px)`; + }); + + // Population chart + const ctx = document.getElementById('populationChart').getContext('2d'); + const data = { + labels: ['1850', '1880', '1920', '1960', '2000', '2020'], + values: [4000, 105000, 61000, 237000, 2432000, 5400000] + }; + + function drawChart() { + ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); + + const maxValue = Math.max(...data.values); + const heightRatio = ctx.canvas.height / maxValue; + const barWidth = ctx.canvas.width / data.labels.length - 40; + + ctx.fillStyle = '#c41e3a'; + + data.values.forEach((value, index) => { + const x = (ctx.canvas.width / data.labels.length) * index + 20; + const barHeight = value * heightRatio; + const y = ctx.canvas.height - barHeight; + + ctx.fillRect(x, y, barWidth, barHeight); + + // Add labels + ctx.fillStyle = '#333'; + ctx.font = '12px Arial'; + ctx.fillText(data.labels[index], x, ctx.canvas.height - 10); + ctx.fillText(value.toLocaleString(), x, y - 10); + ctx.fillStyle = '#c41e3a'; + }); + } + + // Responsive chart + function resizeChart() { + ctx.canvas.width = ctx.canvas.parentNode.offsetWidth; + ctx.canvas.height = 400; + drawChart(); + } + + window.addEventListener('resize', resizeChart); + resizeChart(); + + // Intersection Observer for timeline items + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.style.opacity = '1'; + entry.target.style.transform = 'translateX(0)'; + } + }); + }, { threshold: 0.1 }); + + document.querySelectorAll('.timeline-item').forEach(item => { + item.style.opacity = '0'; + item.style.transform = 'translateX(-50px)'; + item.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; + observer.observe(item); + }); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..89d584e --- /dev/null +++ b/style.css @@ -0,0 +1,188 @@ +:root { + --primary-color: #c41e3a; + --secondary-color: #f8c537; + --text-color: #333; + --background-color: #fff; + --accent-color: #1a4d2e; +} + +* { + 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); + z-index: 1000; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +} + +nav { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 5%; +} + +.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; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; +} + +.parallax-container { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23c41e3a"/></svg>'); + background-size: cover; + opacity: 0.1; +} + +h1 { + font-size: 4rem; + color: var(--primary-color); + text-align: center; + z-index: 1; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); +} + +section { + padding: 5rem 10%; +} + +.timeline-container { + display: grid; + grid-gap: 2rem; + margin: 4rem 0; +} + +.timeline-item { + position: relative; + padding: 2rem; + background: white; + border-radius: 8px; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease; +} + +.timeline-item:hover { + transform: translateY(-5px); +} + +.timeline-item::before { + content: attr(data-year); + position: absolute; + top: -1rem; + left: 2rem; + background: var(--primary-color); + color: white; + padding: 0.5rem 1rem; + border-radius: 20px; +} + +.chart-container { + margin: 2rem 0; + height: 400px; + position: relative; +} + +.story-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + margin: 2rem 0; +} + +.story-card { + background: white; + padding: 2rem; + border-radius: 8px; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease; +} + +.story-card:hover { + transform: translateY(-5px); +} + +footer { + background: var(--accent-color); + color: white; + padding: 2rem 5%; +} + +.footer-content { + display: flex; + justify-content: space-between; + align-items: center; +} + +.footer-links a { + color: white; + text-decoration: none; + margin-left: 1rem; +} + +@media (max-width: 768px) { + h1 { + font-size: 2.5rem; + } + + nav { + flex-direction: column; + padding: 1rem; + } + + .nav-links { + margin-top: 1rem; + } + + .nav-links a { + margin: 0 0.5rem; + } + + section { + padding: 3rem 5%; + } + + .footer-content { + flex-direction: column; + text-align: center; + } + + .footer-links { + margin-top: 1rem; + } +}