Changes to newyear20251.scroll.pub

ffff:86.38.32.230

23 days ago

updated index.scroll

index.scroll

Changed around line 3: baseUrl https://newyear2025.scroll.pub

- keywords new year 2025, lunar new year, chinese new year, year of the dragon, 新年快乐

+ keywords new year 2025, lunar new year, chinese new year, year of the snake, 新年快乐

root

23 days ago

Initial commit

body.html

Changed around line 1
+ 
+   
+     新年快乐
+     Happy New Year
+     2025
+   
+ 
+ 
+ 
+   
+   
+ 
+   
+     
+       
+         恭喜发财
+         Prosperity and Fortune
+       
+       
+     
+   
+ 
+   
+     
+   
+ 
+ 
+ 
+   May the Year of the Dragon bring you joy and prosperity
+   龙年大吉
+ 

index.scroll

Changed around line 1
+ 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

prompt.json

Changed around line 1
+ {
+   "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\n  \n    新年快乐\n    Happy New Year\n    2025\n  \n\n\n\n  
\n  
\n  \n  \n    \n      \n        恭喜发财
\n        Prosperity and Fortune
\n      
\n      \n    
\n  \n\n  \n    \n  \n\n\n\n  May the Year of the Dragon bring you joy and prosperity
\n  龙年大吉
\n\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
+   }
+ }

readme.scroll

Changed around line 1

+ # 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.

script.js

Changed around line 1
+ // 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);

style.css

Changed around line 1
+ :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;
+   }
+ }