Last 10 Commits for newyear20251.scroll.pub

commit 7b5d1d05b1991d0b047d9e2e32ca55985f5f9f55 Author: root <root@hub.scroll.pub> Date: 2024-12-29 17:07:11 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..a35a2e2 --- /dev/null +++ b/body.html @@ -0,0 +1,31 @@ +<header> + <h1 class="main-title"> + <span class="chinese">新年快乐</span> + <span class="english">Happy New Year</span> + <span class="year">2025</span> + </h1> +</header> + +<main> + <div class="lantern left"></div> + <div class="lantern right"></div> + + <section class="greeting-card" aria-label="Interactive greeting card"> + <div class="card-inner"> + <div class="greeting-text"> + <p class="chinese-text">恭喜发财</p> + <p class="english-text">Prosperity and Fortune</p> + </div> + <button class="change-greeting" aria-label="Change greeting">↻</button> + </div> + </section> + + <section class="fireworks-container"> + <canvas id="fireworks" aria-hidden="true"></canvas> + </section> +</main> + +<footer> + <p>May the Year of the Dragon bring you joy and prosperity</p> + <p>龙年大吉</p> +</footer> diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..97622be --- /dev/null +++ b/index.scroll @@ -0,0 +1,11 @@ +buildHtml +baseUrl https://newyear2025.scroll.pub +metaTags + title Lunar New Year 2025 Greetings | 新年快乐 + description Celebrate Lunar New Year 2025 with interactive greetings in Chinese and English. Share joy and prosperity for the Year of the Dragon. + keywords new year 2025, lunar new year, chinese new year, year of the dragon, 新年快乐 +editButton /edit.html +title Lunar New Year 2025 Greetings | 新年快乐 +style.css +body.html +script.js diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..53b7f84 --- /dev/null +++ b/prompt.json @@ -0,0 +1,20 @@ +{ + "id": "msg_01NXahYRgVUnFoDoDWX2ktsT", + "type": "message", + "role": "assistant", + "model": "claude-3-5-sonnet-20241022", + "content": [ + { + "type": "text", + "text": "I'll create a festive, interactive New Year greeting website.\n\n---domain---\nnewyear2025.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://newyear2025.scroll.pub\nmetaTags\n title Lunar New Year 2025 Greetings | 新年快乐\n description Celebrate Lunar New Year 2025 with interactive greetings in Chinese and English. Share joy and prosperity for the Year of the Dragon.\n keywords new year 2025, lunar new year, chinese new year, year of the dragon, 新年快乐\neditButton /edit.html\ntitle Lunar New Year 2025 Greetings | 新年快乐\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <h1 class=\"main-title\">\n <span class=\"chinese\">新年快乐</span>\n <span class=\"english\">Happy New Year</span>\n <span class=\"year\">2025</span>\n </h1>\n</header>\n\n<main>\n <div class=\"lantern left\"></div>\n <div class=\"lantern right\"></div>\n \n <section class=\"greeting-card\" aria-label=\"Interactive greeting card\">\n <div class=\"card-inner\">\n <div class=\"greeting-text\">\n <p class=\"chinese-text\">恭喜发财</p>\n <p class=\"english-text\">Prosperity and Fortune</p>\n </div>\n <button class=\"change-greeting\" aria-label=\"Change greeting\">↻</button>\n </div>\n </section>\n\n <section class=\"fireworks-container\">\n <canvas id=\"fireworks\" aria-hidden=\"true\"></canvas>\n </section>\n</main>\n\n<footer>\n <p>May the Year of the Dragon bring you joy and prosperity</p>\n <p>龙年大吉</p>\n</footer>\n\n---style.css---\n:root {\n --primary-red: #e60012;\n --primary-gold: #ffd700;\n --background-dark: #1a0f1f;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n background: var(--background-dark);\n color: var(--primary-gold);\n font-family: system-ui, -apple-system, sans-serif;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n overflow-x: hidden;\n}\n\n.main-title {\n text-align: center;\n padding: 2rem 1rem;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.chinese {\n font-size: clamp(2.5rem, 8vw, 5rem);\n font-weight: 900;\n color: var(--primary-red);\n text-shadow: 2px 2px 4px rgba(0,0,0,0.3);\n}\n\n.english {\n font-size: clamp(1.5rem, 5vw, 3rem);\n font-weight: 300;\n}\n\n.year {\n font-size: clamp(2rem, 6vw, 4rem);\n color: var(--primary-gold);\n font-weight: 700;\n}\n\n.greeting-card {\n background: rgba(255,215,0,0.1);\n backdrop-filter: blur(10px);\n border-radius: 1rem;\n padding: 2rem;\n margin: 2rem auto;\n max-width: 600px;\n width: 90%;\n border: 2px solid var(--primary-gold);\n box-shadow: 0 0 20px rgba(255,215,0,0.2);\n}\n\n.card-inner {\n position: relative;\n text-align: center;\n}\n\n.greeting-text {\n transition: transform 0.5s ease;\n}\n\n.chinese-text {\n font-size: clamp(2rem, 6vw, 3.5rem);\n margin-bottom: 1rem;\n}\n\n.english-text {\n font-size: clamp(1rem, 4vw, 1.5rem);\n}\n\n.change-greeting {\n position: absolute;\n right: -1rem;\n top: -1rem;\n background: var(--primary-gold);\n border: none;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n cursor: pointer;\n font-size: 1.5rem;\n transition: transform 0.3s ease;\n}\n\n.change-greeting:hover {\n transform: rotate(180deg);\n}\n\n.lantern {\n position: fixed;\n width: 60px;\n height: 80px;\n background: var(--primary-red);\n border-radius: 30px;\n box-shadow: 0 0 20px rgba(230,0,18,0.6);\n animation: sway 3s ease-in-out infinite;\n}\n\n.lantern.left {\n left: 5%;\n top: 20%;\n}\n\n.lantern.right {\n right: 5%;\n top: 20%;\n animation-delay: -1.5s;\n}\n\n@keyframes sway {\n 0%, 100% { transform: rotate(-5deg); }\n 50% { transform: rotate(5deg); }\n}\n\nfooter {\n margin-top: auto;\n text-align: center;\n padding: 2rem;\n font-size: 0.9rem;\n}\n\n#fireworks {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: -1;\n}\n\n@media (max-width: 768px) {\n .lantern {\n width: 40px;\n height: 60px;\n }\n}\n\n---script.js---\n// Greetings array with Chinese and English pairs\nconst greetings = [\n { cn: \"恭喜发财\", en: \"Prosperity and Fortune\" },\n { cn: \"万事如意\", en: \"May All Go Well\" },\n { cn: \"新年快乐\", en: \"Happy New Year\" },\n { cn: \"龙年大吉\", en: \"Lucky Year of the Dragon\" },\n { cn: \"身体健康\", en: \"Good Health\" }\n];\n\n// Greeting changer\nconst changeGreetingBtn = document.querySelector('.change-greeting');\nconst chineseText = document.querySelector('.chinese-text');\nconst englishText = document.querySelector('.english-text');\n\nlet currentGreeting = 0;\n\nchangeGreetingBtn.addEventListener('click', () => {\n currentGreeting = (currentGreeting + 1) % greetings.length;\n \n const greetingCard = document.querySelector('.greeting-text');\n greetingCard.style.transform = 'scale(0.8)';\n \n setTimeout(() => {\n chineseText.textContent = greetings[currentGreeting].cn;\n englishText.textContent = greetings[currentGreeting].en;\n greetingCard.style.transform = 'scale(1)';\n }, 150);\n});\n\n// Fireworks animation\nconst canvas = document.getElementById('fireworks');\nconst ctx = canvas.getContext('2d');\n\nfunction resizeCanvas() {\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n}\n\nwindow.addEventListener('resize', resizeCanvas);\nresizeCanvas();\n\nclass Particle {\n constructor(x, y, color) {\n this.x = x;\n this.y = y;\n this.color = color;\n this.velocity = {\n x: (Math.random() - 0.5) * 8,\n y: (Math.random() - 0.5) * 8\n };\n this.alpha = 1;\n }\n\n draw() {\n ctx.save();\n ctx.globalAlpha = this.alpha;\n ctx.beginPath();\n ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);\n ctx.fillStyle = this.color;\n ctx.fill();\n ctx.restore();\n }\n\n update() {\n this.velocity.y += 0.1;\n this.x += this.velocity.x;\n this.y += this.velocity.y;\n this.alpha -= 0.01;\n }\n}\n\nlet particles = [];\n\nfunction createFirework(x, y) {\n const colors = ['#ffd700', '#ff0000', '#ffff00', '#ff6600'];\n for (let i = 0; i < 50; i++) {\n particles.push(new Particle(\n x,\n y,\n colors[Math.floor(Math.random() * colors.length)]\n ));\n }\n}\n\nfunction animate() {\n requestAnimationFrame(animate);\n ctx.fillStyle = 'rgba(26, 15, 31, 0.2)';\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n particles = particles.filter(particle => particle.alpha > 0);\n particles.forEach(particle => {\n particle.update();\n particle.draw();\n });\n}\n\n// Create random fireworks\nsetInterval(() => {\n createFirework(\n Math.random() * canvas.width,\n Math.random() * canvas.height * 0.5\n );\n}, 2000);\n\nanimate();\n\n// Start with one firework\ncreateFirework(canvas.width / 2, canvas.height / 2);\n\n---end---\n\nThis creates a festive and interactive New Year greeting website with:\n- Animated lanterns\n- Interactive greeting card that changes messages\n- Continuous fireworks animation\n- Responsive design\n- Beautiful typography and colors\n- Smooth animations and transitions\n- Accessibility features\n- SEO optimization\n\nThe site uses traditional Chinese New Year colors (red and gold) and includes both Chinese and English greetings. The fireworks animation creates a celebratory atmosphere, while the floating lanterns add depth and movement to the design." + } + ], + "stop_reason": "end_turn", + "stop_sequence": null, + "usage": { + "input_tokens": 298, + "cache_creation_input_tokens": 0, + "cache_read_input_tokens": 0, + "output_tokens": 2581 + } +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..2aa80f4 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# newyear20251.scroll.pub +Website generated by Claude from prompt: A website shows 2025 New Year's greetings in Chinese characters and English. It should have interactivity. Be creative. \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..6487879 --- /dev/null +++ b/script.js @@ -0,0 +1,108 @@ +// Greetings array with Chinese and English pairs +const greetings = [ + { cn: "恭喜发财", en: "Prosperity and Fortune" }, + { cn: "万事如意", en: "May All Go Well" }, + { cn: "新年快乐", en: "Happy New Year" }, + { cn: "龙年大吉", en: "Lucky Year of the Dragon" }, + { cn: "身体健康", en: "Good Health" } +]; + +// Greeting changer +const changeGreetingBtn = document.querySelector('.change-greeting'); +const chineseText = document.querySelector('.chinese-text'); +const englishText = document.querySelector('.english-text'); + +let currentGreeting = 0; + +changeGreetingBtn.addEventListener('click', () => { + currentGreeting = (currentGreeting + 1) % greetings.length; + + const greetingCard = document.querySelector('.greeting-text'); + greetingCard.style.transform = 'scale(0.8)'; + + setTimeout(() => { + chineseText.textContent = greetings[currentGreeting].cn; + englishText.textContent = greetings[currentGreeting].en; + greetingCard.style.transform = 'scale(1)'; + }, 150); +}); + +// Fireworks animation +const canvas = document.getElementById('fireworks'); +const ctx = canvas.getContext('2d'); + +function resizeCanvas() { + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; +} + +window.addEventListener('resize', resizeCanvas); +resizeCanvas(); + +class Particle { + constructor(x, y, color) { + this.x = x; + this.y = y; + this.color = color; + this.velocity = { + x: (Math.random() - 0.5) * 8, + y: (Math.random() - 0.5) * 8 + }; + this.alpha = 1; + } + + draw() { + ctx.save(); + ctx.globalAlpha = this.alpha; + ctx.beginPath(); + ctx.arc(this.x, this.y, 2, 0, Math.PI * 2); + ctx.fillStyle = this.color; + ctx.fill(); + ctx.restore(); + } + + update() { + this.velocity.y += 0.1; + this.x += this.velocity.x; + this.y += this.velocity.y; + this.alpha -= 0.01; + } +} + +let particles = []; + +function createFirework(x, y) { + const colors = ['#ffd700', '#ff0000', '#ffff00', '#ff6600']; + for (let i = 0; i < 50; i++) { + particles.push(new Particle( + x, + y, + colors[Math.floor(Math.random() * colors.length)] + )); + } +} + +function animate() { + requestAnimationFrame(animate); + ctx.fillStyle = 'rgba(26, 15, 31, 0.2)'; + ctx.fillRect(0, 0, canvas.width, canvas.height); + + particles = particles.filter(particle => particle.alpha > 0); + particles.forEach(particle => { + particle.update(); + particle.draw(); + }); +} + +// Create random fireworks +setInterval(() => { + createFirework( + Math.random() * canvas.width, + Math.random() * canvas.height * 0.5 + ); +}, 2000); + +animate(); + +// Start with one firework +createFirework(canvas.width / 2, canvas.height / 2); diff --git a/style.css b/style.css new file mode 100644 index 0000000..fe41eba --- /dev/null +++ b/style.css @@ -0,0 +1,145 @@ +:root { + --primary-red: #e60012; + --primary-gold: #ffd700; + --background-dark: #1a0f1f; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background: var(--background-dark); + color: var(--primary-gold); + font-family: system-ui, -apple-system, sans-serif; + min-height: 100vh; + display: flex; + flex-direction: column; + overflow-x: hidden; +} + +.main-title { + text-align: center; + padding: 2rem 1rem; + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.chinese { + font-size: clamp(2.5rem, 8vw, 5rem); + font-weight: 900; + color: var(--primary-red); + text-shadow: 2px 2px 4px rgba(0,0,0,0.3); +} + +.english { + font-size: clamp(1.5rem, 5vw, 3rem); + font-weight: 300; +} + +.year { + font-size: clamp(2rem, 6vw, 4rem); + color: var(--primary-gold); + font-weight: 700; +} + +.greeting-card { + background: rgba(255,215,0,0.1); + backdrop-filter: blur(10px); + border-radius: 1rem; + padding: 2rem; + margin: 2rem auto; + max-width: 600px; + width: 90%; + border: 2px solid var(--primary-gold); + box-shadow: 0 0 20px rgba(255,215,0,0.2); +} + +.card-inner { + position: relative; + text-align: center; +} + +.greeting-text { + transition: transform 0.5s ease; +} + +.chinese-text { + font-size: clamp(2rem, 6vw, 3.5rem); + margin-bottom: 1rem; +} + +.english-text { + font-size: clamp(1rem, 4vw, 1.5rem); +} + +.change-greeting { + position: absolute; + right: -1rem; + top: -1rem; + background: var(--primary-gold); + border: none; + width: 40px; + height: 40px; + border-radius: 50%; + cursor: pointer; + font-size: 1.5rem; + transition: transform 0.3s ease; +} + +.change-greeting:hover { + transform: rotate(180deg); +} + +.lantern { + position: fixed; + width: 60px; + height: 80px; + background: var(--primary-red); + border-radius: 30px; + box-shadow: 0 0 20px rgba(230,0,18,0.6); + animation: sway 3s ease-in-out infinite; +} + +.lantern.left { + left: 5%; + top: 20%; +} + +.lantern.right { + right: 5%; + top: 20%; + animation-delay: -1.5s; +} + +@keyframes sway { + 0%, 100% { transform: rotate(-5deg); } + 50% { transform: rotate(5deg); } +} + +footer { + margin-top: auto; + text-align: center; + padding: 2rem; + font-size: 0.9rem; +} + +#fireworks { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: -1; +} + +@media (max-width: 768px) { + .lantern { + width: 40px; + height: 60px; + } +}