commit f981b3df7a8e6bed9a3876f98e4b5c301bea75ed
Author: root <root@hub.scroll.pub>
Date: 2024-12-31 15:24:26 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..490221e
--- /dev/null
+++ b/body.html
@@ -0,0 +1,29 @@
+<main class="card-container">
+ <div class="lantern left"></div>
+ <div class="lantern right"></div>
+
+ <section class="greeting-card">
+ <div class="card-front">
+ <h1 class="chinese">新年快乐</h1>
+ <h2 class="spanish">Feliz Año Nuevo</h2>
+ <div class="interactive-heart" role="button" tabindex="0" aria-label="Click to open card">❤</div>
+ </div>
+
+ <div class="card-inside">
+ <div class="message-container">
+ <p class="chinese-message">亲爱的，愿新的一年里：</p>
+ <p class="spanish-message">Mi amor, para este año nuevo deseo:</p>
+
+ <ul class="wish-list">
+ <li data-cn="你的笑容永远灿烂" data-es="Que tu sonrisa brille siempre"></li>
+ <li data-cn="我们的爱情天长地久" data-es="Que nuestro amor sea eterno"></li>
+ <li data-cn="所有美好都属于你" data-es="Que toda la felicidad sea tuya"></li>
+ </ul>
+ </div>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <p>Made with love for you | 用爱制作</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..a5b8cd5
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://amorlunar.scroll.pub
+metaTags
+editButton /edit.html
+title Feliz Año Nuevo, Mi Amor | 新年快乐，亲爱的
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..28a4401
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01WcVYgDWXB9T4PkjjVuh5Mf",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a heartwarming, interactive New Year greeting card that combines Chinese and Spanish cultures.\n\n---domain---\namorlunar.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://amorlunar.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Feliz Año Nuevo, Mi Amor | 新年快乐，亲爱的\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\">\n <div class=\"card-front\">\n <h1 class=\"chinese\">新年快乐</h1>\n <h2 class=\"spanish\">Feliz Año Nuevo</h2>\n <div class=\"interactive-heart\" role=\"button\" tabindex=\"0\" aria-label=\"Click to open card\">❤</div>\n </div>\n \n <div class=\"card-inside\">\n <div class=\"message-container\">\n <p class=\"chinese-message\">亲爱的，愿新的一年里：</p>\n <p class=\"spanish-message\">Mi amor, para este año nuevo deseo:</p>\n \n <ul class=\"wish-list\">\n <li data-cn=\"你的笑容永远灿烂\" data-es=\"Que tu sonrisa brille siempre\"></li>\n <li data-cn=\"我们的爱情天长地久\" data-es=\"Que nuestro amor sea eterno\"></li>\n <li data-cn=\"所有美好都属于你\" data-es=\"Que toda la felicidad sea tuya\"></li>\n </ul>\n </div>\n </div>\n </section>\n</main>\n\n<footer>\n <p>Made with love for you | 用爱制作</p>\n</footer>\n\n---style.css---\n:root {\n --primary-red: #ff4d4d;\n --gold: #ffd700;\n --card-bg: #fff1f1;\n --text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);\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, #ff9999, #ff4d4d);\n font-family: system-ui, -apple-system, sans-serif;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n overflow-x: hidden;\n}\n\n.card-container {\n position: relative;\n perspective: 1500px;\n margin: 2rem;\n}\n\n.greeting-card {\n width: 300px;\n height: 400px;\n position: relative;\n transform-style: preserve-3d;\n transition: transform 1s ease;\n}\n\n.card-front, .card-inside {\n position: absolute;\n width: 100%;\n height: 100%;\n backface-visibility: hidden;\n border-radius: 20px;\n padding: 2rem;\n background: var(--card-bg);\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n\n.card-inside {\n transform: rotateY(180deg);\n background: linear-gradient(45deg, #fff1f1, #ffe6e6);\n}\n\n.chinese, .spanish {\n text-align: center;\n margin: 1rem 0;\n color: var(--primary-red);\n text-shadow: var(--text-shadow);\n}\n\n.chinese {\n font-size: 2.5rem;\n}\n\n.spanish {\n font-size: 2rem;\n}\n\n.interactive-heart {\n font-size: 4rem;\n color: var(--primary-red);\n cursor: pointer;\n transition: transform 0.3s ease;\n animation: pulse 1.5s infinite;\n}\n\n.lantern {\n position: absolute;\n width: 60px;\n height: 80px;\n background: var(--primary-red);\n border-radius: 30px;\n box-shadow: 0 0 20px rgba(255, 77, 77, 0.6);\n z-index: -1;\n}\n\n.left {\n left: -80px;\n animation: float 3s ease-in-out infinite;\n}\n\n.right {\n right: -80px;\n animation: float 3s ease-in-out infinite 1.5s;\n}\n\n.wish-list li {\n list-style: none;\n margin: 1rem 0;\n text-align: center;\n font-size: 1.1rem;\n opacity: 0;\n transform: translateY(20px);\n transition: all 0.5s ease;\n}\n\nfooter {\n margin-top: 2rem;\n text-align: center;\n color: white;\n}\n\n@keyframes pulse {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.2); }\n 100% { transform: scale(1); }\n}\n\n@keyframes float {\n 0% { transform: translateY(0); }\n 50% { transform: translateY(-20px); }\n 100% { transform: translateY(0); }\n}\n\n@media (max-width: 768px) {\n .greeting-card {\n width: 280px;\n height: 380px;\n }\n \n .lantern {\n display: none;\n }\n}\n\n.flipped {\n transform: rotateY(180deg);\n}\n\n.visible {\n opacity: 1;\n transform: translateY(0);\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const card = document.querySelector('.greeting-card');\n const heart = document.querySelector('.interactive-heart');\n const wishList = document.querySelectorAll('.wish-list li');\n let isFlipped = false;\n\n // Toggle card flip\n heart.addEventListener('click', () => {\n isFlipped = !isFlipped;\n card.classList.toggle('flipped');\n \n if (isFlipped) {\n // Animate wishes appearing\n wishList.forEach((wish, index) => {\n setTimeout(() => {\n wish.classList.add('visible');\n \n // Toggle between Chinese and Spanish text\n let isSpanish = false;\n setInterval(() => {\n wish.textContent = isSpanish ? wish.dataset.es : wish.dataset.cn;\n isSpanish = !isSpanish;\n }, 3000);\n }, index * 500);\n });\n }\n });\n\n // Keyboard accessibility\n heart.addEventListener('keypress', (e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n heart.click();\n }\n });\n\n // Add hover effect to heart\n heart.addEventListener('mouseover', () => {\n heart.style.transform = 'scale(1.2)';\n });\n\n heart.addEventListener('mouseout', () => {\n heart.style.transform = 'scale(1)';\n });\n});\n\n---end---\n\nThis creates a beautiful, interactive greeting card with the following features:\n\n1. Floating red lanterns on both sides (traditional Chinese New Year decoration)\n2. A pulsing heart that when clicked flips the card\n3. Bilingual messages that alternate between Chinese and Spanish\n4. Animated appearance of wishes\n5. Beautiful gradient backgrounds and shadows\n6. Fully responsive design\n7. Keyboard accessibility\n8. Smooth animations and transitions\n\nThe domain name \"amorlunar\" combines Spanish \"amor\" (love) with \"lunar\" (referring to the lunar new year), creating a poetic and memorable fusion of both cultures.\n\nTo use the card, simply click or press Enter on the heart to reveal the inside messages, which will appear one by one and automatically alternate between Chinese and Spanish text."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 297,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2089
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..3d9e55b
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# amorlunar1.scroll.pub
+Website generated by Claude from prompt: A new year greeting card for my Spanish boyfriend, shown written words in Chinese and Spanish. 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..6a4c6f9
--- /dev/null
+++ b/script.js
@@ -0,0 +1,44 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const card = document.querySelector('.greeting-card');
+ const heart = document.querySelector('.interactive-heart');
+ const wishList = document.querySelectorAll('.wish-list li');
+ let isFlipped = false;
+
+ // Toggle card flip
+ heart.addEventListener('click', () => {
+ isFlipped = !isFlipped;
+ card.classList.toggle('flipped');
+
+ if (isFlipped) {
+ // Animate wishes appearing
+ wishList.forEach((wish, index) => {
+ setTimeout(() => {
+ wish.classList.add('visible');
+
+ // Toggle between Chinese and Spanish text
+ let isSpanish = false;
+ setInterval(() => {
+ wish.textContent = isSpanish ? wish.dataset.es : wish.dataset.cn;
+ isSpanish = !isSpanish;
+ }, 3000);
+ }, index * 500);
+ });
+ }
+ });
+
+ // Keyboard accessibility
+ heart.addEventListener('keypress', (e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ heart.click();
+ }
+ });
+
+ // Add hover effect to heart
+ heart.addEventListener('mouseover', () => {
+ heart.style.transform = 'scale(1.2)';
+ });
+
+ heart.addEventListener('mouseout', () => {
+ heart.style.transform = 'scale(1)';
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..c8a5a79
--- /dev/null
+++ b/style.css
@@ -0,0 +1,148 @@
+:root {
+ --primary-red: #ff4d4d;
+ --gold: #ffd700;
+ --card-bg: #fff1f1;
+ --text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ min-height: 100vh;
+ background: linear-gradient(135deg, #ff9999, #ff4d4d);
+ font-family: system-ui, -apple-system, sans-serif;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ overflow-x: hidden;
+}
+
+.card-container {
+ position: relative;
+ perspective: 1500px;
+ margin: 2rem;
+}
+
+.greeting-card {
+ width: 300px;
+ height: 400px;
+ position: relative;
+ transform-style: preserve-3d;
+ transition: transform 1s ease;
+}
+
+.card-front, .card-inside {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ backface-visibility: hidden;
+ border-radius: 20px;
+ padding: 2rem;
+ background: var(--card-bg);
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+.card-inside {
+ transform: rotateY(180deg);
+ background: linear-gradient(45deg, #fff1f1, #ffe6e6);
+}
+
+.chinese, .spanish {
+ text-align: center;
+ margin: 1rem 0;
+ color: var(--primary-red);
+ text-shadow: var(--text-shadow);
+}
+
+.chinese {
+ font-size: 2.5rem;
+}
+
+.spanish {
+ font-size: 2rem;
+}
+
+.interactive-heart {
+ font-size: 4rem;
+ color: var(--primary-red);
+ cursor: pointer;
+ transition: transform 0.3s ease;
+ animation: pulse 1.5s infinite;
+}
+
+.lantern {
+ position: absolute;
+ width: 60px;
+ height: 80px;
+ background: var(--primary-red);
+ border-radius: 30px;
+ box-shadow: 0 0 20px rgba(255, 77, 77, 0.6);
+ z-index: -1;
+}
+
+.left {
+ left: -80px;
+ animation: float 3s ease-in-out infinite;
+}
+
+.right {
+ right: -80px;
+ animation: float 3s ease-in-out infinite 1.5s;
+}
+
+.wish-list li {
+ list-style: none;
+ margin: 1rem 0;
+ text-align: center;
+ font-size: 1.1rem;
+ opacity: 0;
+ transform: translateY(20px);
+ transition: all 0.5s ease;
+}
+
+footer {
+ margin-top: 2rem;
+ text-align: center;
+ color: white;
+}
+
+@keyframes pulse {
+ 0% { transform: scale(1); }
+ 50% { transform: scale(1.2); }
+ 100% { transform: scale(1); }
+}
+
+@keyframes float {
+ 0% { transform: translateY(0); }
+ 50% { transform: translateY(-20px); }
+ 100% { transform: translateY(0); }
+}
+
+@media (max-width: 768px) {
+ .greeting-card {
+ width: 280px;
+ height: 380px;
+ }
+
+ .lantern {
+ display: none;
+ }
+}
+
+.flipped {
+ transform: rotateY(180deg);
+}
+
+.visible {
+ opacity: 1;
+ transform: translateY(0);
+}