commit 8b1fd738666699662695338f8e57b5eab92fbff4
Author: root <root@hub.scroll.pub>
Date: 2024-12-31 19:36:44 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..d8ca854
--- /dev/null
+++ b/body.html
@@ -0,0 +1,30 @@
+<main class="card-container">
+ <div class="lantern left"></div>
+ <div class="lantern right"></div>
+
+ <section class="greeting-card" aria-label="New Year Greeting Card">
+ <h1 class="hidden">Lunar New Year Greetings</h1>
+
+ <div class="card-content">
+ <div class="chinese-text">
+ <p class="main-greeting">新年快乐</p>
+ <p class="sub-greeting">恭喜发财</p>
+ </div>
+
+ <div class="english-text">
+ <p class="main-greeting-en">Happy New Year</p>
+ <p class="sub-greeting-en">Prosperity and Fortune</p>
+ </div>
+ </div>
+
+ <button class="toggle-animation" aria-label="Toggle Animation">
+ <span class="firework-icon">✨</span>
+ </button>
+ </section>
+
+ <div class="fireworks-container"></div>
+</main>
+
+<footer>
+ <p>Made with joy for the Lunar New Year</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..0e49d49
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://newyearwish.scroll.pub
+metaTags
+editButton /edit.html
+title Lunar New Year Greetings - Interactive Card
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..4961eba
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01Tmwap1XKXtuewXjJkDznPN",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a festive and interactive New Year greeting card website.\n\n---domain---\nnewyearwish.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://newyearwish.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Lunar New Year Greetings - Interactive Card\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<main class=\"card-container\">\n <div class=\"lantern left\"></div>\n <div class=\"lantern right\"></div>\n \n <section class=\"greeting-card\" aria-label=\"New Year Greeting Card\">\n <h1 class=\"hidden\">Lunar New Year Greetings</h1>\n \n <div class=\"card-content\">\n <div class=\"chinese-text\">\n <p class=\"main-greeting\">新年快乐</p>\n <p class=\"sub-greeting\">恭喜发财</p>\n </div>\n \n <div class=\"english-text\">\n <p class=\"main-greeting-en\">Happy New Year</p>\n <p class=\"sub-greeting-en\">Prosperity and Fortune</p>\n </div>\n </div>\n\n <button class=\"toggle-animation\" aria-label=\"Toggle Animation\">\n <span class=\"firework-icon\">✨</span>\n </button>\n </section>\n\n <div class=\"fireworks-container\"></div>\n</main>\n\n<footer>\n <p>Made with joy for the Lunar New Year</p>\n</footer>\n\n---style.css---\n:root {\n --red: #ff3838;\n --gold: #ffd700;\n --black: #1a1a1a;\n --white: #ffffff;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n min-height: 100vh;\n background: linear-gradient(135deg, #670d10, #092756);\n font-family: \"Segoe UI\", system-ui, sans-serif;\n display: flex;\n flex-direction: column;\n overflow-x: hidden;\n}\n\n.card-container {\n flex: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 2rem;\n position: relative;\n}\n\n.greeting-card {\n background: rgba(255, 255, 255, 0.1);\n backdrop-filter: blur(10px);\n border-radius: 20px;\n padding: 3rem;\n box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);\n text-align: center;\n transform-style: preserve-3d;\n transition: transform 0.5s ease;\n max-width: 90vw;\n}\n\n.hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n\n.chinese-text {\n margin-bottom: 2rem;\n}\n\n.main-greeting {\n font-size: 4rem;\n color: var(--gold);\n text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);\n animation: float 3s ease-in-out infinite;\n}\n\n.sub-greeting {\n font-size: 2.5rem;\n color: var(--red);\n margin-top: 1rem;\n}\n\n.english-text {\n color: var(--white);\n}\n\n.main-greeting-en {\n font-size: 2rem;\n margin-bottom: 0.5rem;\n}\n\n.sub-greeting-en {\n font-size: 1.2rem;\n opacity: 0.8;\n}\n\n.lantern {\n position: absolute;\n width: 60px;\n height: 80px;\n background: var(--red);\n border-radius: 50% / 10%;\n animation: sway 4s ease-in-out infinite;\n}\n\n.lantern::before {\n content: \"\";\n position: absolute;\n top: -10px;\n left: 50%;\n transform: translateX(-50%);\n width: 20px;\n height: 10px;\n background: var(--gold);\n border-radius: 5px;\n}\n\n.lantern.left {\n left: 10%;\n animation-delay: -2s;\n}\n\n.lantern.right {\n right: 10%;\n}\n\n.toggle-animation {\n margin-top: 2rem;\n padding: 0.8rem 1.5rem;\n background: transparent;\n border: 2px solid var(--gold);\n color: var(--gold);\n border-radius: 25px;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.toggle-animation:hover {\n background: var(--gold);\n color: var(--black);\n}\n\n.firework {\n position: absolute;\n pointer-events: none;\n}\n\nfooter {\n text-align: center;\n padding: 1rem;\n color: var(--white);\n font-size: 0.9rem;\n opacity: 0.7;\n}\n\n@keyframes float {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-10px); }\n}\n\n@keyframes sway {\n 0%, 100% { transform: rotate(-5deg); }\n 50% { transform: rotate(5deg); }\n}\n\n@media (max-width: 768px) {\n .main-greeting { font-size: 3rem; }\n .sub-greeting { font-size: 2rem; }\n .main-greeting-en { font-size: 1.5rem; }\n .sub-greeting-en { font-size: 1rem; }\n .lantern { display: none; }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const card = document.querySelector('.greeting-card');\n const fireworksContainer = document.querySelector('.fireworks-container');\n let isAnimating = false;\n\n // 3D card effect\n document.addEventListener('mousemove', (e) => {\n if (window.innerWidth > 768) {\n const xAxis = (window.innerWidth / 2 - e.pageX) / 25;\n const yAxis = (window.innerHeight / 2 - e.pageY) / 25;\n card.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;\n }\n });\n\n // Fireworks animation\n function createFirework() {\n if (!isAnimating) return;\n\n const firework = document.createElement('div');\n firework.className = 'firework';\n \n const colors = ['#ff0', '#f0f', '#0ff', '#ff4444', '#44ff44'];\n const color = colors[Math.floor(Math.random() * colors.length)];\n \n const size = Math.random() * 5 + 3;\n const left = Math.random() * 100;\n const animationDuration = Math.random() * 1 + 0.5;\n\n firework.style.cssText = `\n width: ${size}px;\n height: ${size}px;\n left: ${left}vw;\n background: ${color};\n position: absolute;\n bottom: -20px;\n border-radius: 50%;\n animation: shootUp ${animationDuration}s ease-out forwards;\n `;\n\n fireworksContainer.appendChild(firework);\n \n setTimeout(() => {\n firework.remove();\n }, animationDuration * 1000);\n }\n\n // Toggle fireworks\n const toggleButton = document.querySelector('.toggle-animation');\n toggleButton.addEventListener('click', () => {\n isAnimating = !isAnimating;\n toggleButton.classList.toggle('active');\n \n if (isAnimating) {\n setInterval(createFirework, 100);\n }\n });\n\n // Add dynamic style for firework animation\n const style = document.createElement('style');\n style.textContent = `\n @keyframes shootUp {\n 0% {\n transform: translateY(0) scale(1);\n opacity: 1;\n }\n 100% {\n transform: translateY(-100vh) scale(0);\n opacity: 0;\n }\n }\n `;\n document.head.appendChild(style);\n});\n\n---end---\n\nThis creates an elegant and interactive New Year greeting card with the following features:\n\n1. Responsive 3D card effect that follows mouse movement\n2. Floating Chinese characters with animation\n3. Traditional red and gold color scheme\n4. Animated lanterns on both sides\n5. Toggle button for fireworks animation\n6. Mobile-responsive design\n7. Smooth animations and transitions\n8. Accessible semantic HTML\n9. Beautiful gradient background\n10. Glass-morphism effect on the main card\n\nThe website is both festive and professional, with careful attention to performance and accessibility. The animations are smooth but not overwhelming, and all interactive elements are keyboard-accessible."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 292,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2361
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..75df365
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# newyearwish.scroll.pub
+Website generated by Claude from prompt: I want a New Year greeting card shown words in Chinese and English. 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..843175f
--- /dev/null
+++ b/script.js
@@ -0,0 +1,73 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const card = document.querySelector('.greeting-card');
+ const fireworksContainer = document.querySelector('.fireworks-container');
+ let isAnimating = false;
+
+ // 3D card effect
+ document.addEventListener('mousemove', (e) => {
+ if (window.innerWidth > 768) {
+ const xAxis = (window.innerWidth / 2 - e.pageX) / 25;
+ const yAxis = (window.innerHeight / 2 - e.pageY) / 25;
+ card.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
+ }
+ });
+
+ // Fireworks animation
+ function createFirework() {
+ if (!isAnimating) return;
+
+ const firework = document.createElement('div');
+ firework.className = 'firework';
+
+ const colors = ['#ff0', '#f0f', '#0ff', '#ff4444', '#44ff44'];
+ const color = colors[Math.floor(Math.random() * colors.length)];
+
+ const size = Math.random() * 5 + 3;
+ const left = Math.random() * 100;
+ const animationDuration = Math.random() * 1 + 0.5;
+
+ firework.style.cssText = `
+ width: ${size}px;
+ height: ${size}px;
+ left: ${left}vw;
+ background: ${color};
+ position: absolute;
+ bottom: -20px;
+ border-radius: 50%;
+ animation: shootUp ${animationDuration}s ease-out forwards;
+ `;
+
+ fireworksContainer.appendChild(firework);
+
+ setTimeout(() => {
+ firework.remove();
+ }, animationDuration * 1000);
+ }
+
+ // Toggle fireworks
+ const toggleButton = document.querySelector('.toggle-animation');
+ toggleButton.addEventListener('click', () => {
+ isAnimating = !isAnimating;
+ toggleButton.classList.toggle('active');
+
+ if (isAnimating) {
+ setInterval(createFirework, 100);
+ }
+ });
+
+ // Add dynamic style for firework animation
+ const style = document.createElement('style');
+ style.textContent = `
+ @keyframes shootUp {
+ 0% {
+ transform: translateY(0) scale(1);
+ opacity: 1;
+ }
+ 100% {
+ transform: translateY(-100vh) scale(0);
+ opacity: 0;
+ }
+ }
+ `;
+ document.head.appendChild(style);
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..08b66c8
--- /dev/null
+++ b/style.css
@@ -0,0 +1,161 @@
+:root {
+ --red: #ff3838;
+ --gold: #ffd700;
+ --black: #1a1a1a;
+ --white: #ffffff;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ min-height: 100vh;
+ background: linear-gradient(135deg, #670d10, #092756);
+ font-family: "Segoe UI", system-ui, sans-serif;
+ display: flex;
+ flex-direction: column;
+ overflow-x: hidden;
+}
+
+.card-container {
+ flex: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 2rem;
+ position: relative;
+}
+
+.greeting-card {
+ background: rgba(255, 255, 255, 0.1);
+ backdrop-filter: blur(10px);
+ border-radius: 20px;
+ padding: 3rem;
+ box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
+ text-align: center;
+ transform-style: preserve-3d;
+ transition: transform 0.5s ease;
+ max-width: 90vw;
+}
+
+.hidden {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ border: 0;
+}
+
+.chinese-text {
+ margin-bottom: 2rem;
+}
+
+.main-greeting {
+ font-size: 4rem;
+ color: var(--gold);
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+ animation: float 3s ease-in-out infinite;
+}
+
+.sub-greeting {
+ font-size: 2.5rem;
+ color: var(--red);
+ margin-top: 1rem;
+}
+
+.english-text {
+ color: var(--white);
+}
+
+.main-greeting-en {
+ font-size: 2rem;
+ margin-bottom: 0.5rem;
+}
+
+.sub-greeting-en {
+ font-size: 1.2rem;
+ opacity: 0.8;
+}
+
+.lantern {
+ position: absolute;
+ width: 60px;
+ height: 80px;
+ background: var(--red);
+ border-radius: 50% / 10%;
+ animation: sway 4s ease-in-out infinite;
+}
+
+.lantern::before {
+ content: "";
+ position: absolute;
+ top: -10px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 20px;
+ height: 10px;
+ background: var(--gold);
+ border-radius: 5px;
+}
+
+.lantern.left {
+ left: 10%;
+ animation-delay: -2s;
+}
+
+.lantern.right {
+ right: 10%;
+}
+
+.toggle-animation {
+ margin-top: 2rem;
+ padding: 0.8rem 1.5rem;
+ background: transparent;
+ border: 2px solid var(--gold);
+ color: var(--gold);
+ border-radius: 25px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+.toggle-animation:hover {
+ background: var(--gold);
+ color: var(--black);
+}
+
+.firework {
+ position: absolute;
+ pointer-events: none;
+}
+
+footer {
+ text-align: center;
+ padding: 1rem;
+ color: var(--white);
+ font-size: 0.9rem;
+ opacity: 0.7;
+}
+
+@keyframes float {
+ 0%, 100% { transform: translateY(0); }
+ 50% { transform: translateY(-10px); }
+}
+
+@keyframes sway {
+ 0%, 100% { transform: rotate(-5deg); }
+ 50% { transform: rotate(5deg); }
+}
+
+@media (max-width: 768px) {
+ .main-greeting { font-size: 3rem; }
+ .sub-greeting { font-size: 2rem; }
+ .main-greeting-en { font-size: 1.5rem; }
+ .sub-greeting-en { font-size: 1rem; }
+ .lantern { display: none; }
+}