commit 56af07d3502755590553b6ff22cba1abc7c0bcae
Author: root <root@hub.scroll.pub>
Date: 2024-12-31 15:39:45 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..aa25016
--- /dev/null
+++ b/body.html
@@ -0,0 +1,27 @@
+<main class="card-container">
+ <div class="lantern left"></div>
+ <div class="lantern right"></div>
+
+ <section class="greeting-card">
+ <div class="card-front">
+ <h1>
+ <span class="chinese">新年快乐</span>
+ <span class="spanish">Feliz Año Nuevo</span>
+ </h1>
+ <button class="open-card" aria-label="Abrir tarjeta">❤️</button>
+ </div>
+
+ <div class="card-inside">
+ <div class="message">
+ <p class="chinese">亲爱的</p>
+ <p class="spanish">Mi Amor</p>
+ <p class="chinese">愿我们的爱情像春节的烟花一样绚丽多彩</p>
+ <p class="spanish">Que nuestro amor brille como los fuegos artificiales del Año Nuevo</p>
+ </div>
+ <div class="interactive-elements">
+ <button class="floating-hearts" aria-label="Mostrar corazones">💕</button>
+ <button class="play-music" aria-label="Reproducir música">🎵</button>
+ </div>
+ </div>
+ </section>
+</main>
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..17e51be
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01EvGrrWMxjzWTFtMpw3kfyx",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a romantic New Year greeting card website that combines Chinese and Spanish elements.\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>\n <span class=\"chinese\">新年快乐</span>\n <span class=\"spanish\">Feliz Año Nuevo</span>\n </h1>\n <button class=\"open-card\" aria-label=\"Abrir tarjeta\">❤️</button>\n </div>\n \n <div class=\"card-inside\">\n <div class=\"message\">\n <p class=\"chinese\">亲爱的</p>\n <p class=\"spanish\">Mi Amor</p>\n <p class=\"chinese\">愿我们的爱情像春节的烟花一样绚丽多彩</p>\n <p class=\"spanish\">Que nuestro amor brille como los fuegos artificiales del Año Nuevo</p>\n </div>\n <div class=\"interactive-elements\">\n <button class=\"floating-hearts\" aria-label=\"Mostrar corazones\">💕</button>\n <button class=\"play-music\" aria-label=\"Reproducir música\">🎵</button>\n </div>\n </div>\n </section>\n</main>\n\n---style.css---\n:root {\n --primary-red: #e60012;\n --gold: #ffd700;\n --card-width: min(90vw, 600px);\n --card-height: min(80vh, 800px);\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, #1a0f1f, #2c1810);\n display: grid;\n place-items: center;\n font-family: system-ui, sans-serif;\n overflow: hidden;\n}\n\n.card-container {\n position: relative;\n perspective: 2000px;\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(230, 0, 18, 0.6);\n animation: sway 3s ease-in-out infinite;\n}\n\n.lantern.left {\n left: -100px;\n animation-delay: -1.5s;\n}\n\n.lantern.right {\n right: -100px;\n}\n\n.greeting-card {\n width: var(--card-width);\n height: var(--card-height);\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 display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 2rem;\n}\n\n.card-front {\n background: linear-gradient(45deg, var(--primary-red), #ff4d4d);\n color: var(--gold);\n text-align: center;\n}\n\n.card-inside {\n background: linear-gradient(45deg, #fff1f1, #ffe4e4);\n transform: rotateY(180deg);\n}\n\nh1 {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.chinese {\n font-size: clamp(1.5rem, 5vw, 3rem);\n}\n\n.spanish {\n font-size: clamp(1.2rem, 4vw, 2.5rem);\n}\n\n.open-card {\n font-size: 2rem;\n background: none;\n border: none;\n cursor: pointer;\n transition: transform 0.3s;\n}\n\n.open-card:hover {\n transform: scale(1.2);\n}\n\n.message {\n text-align: center;\n line-height: 1.6;\n}\n\n.interactive-elements {\n display: flex;\n gap: 1rem;\n}\n\n.interactive-elements button {\n font-size: 1.5rem;\n background: none;\n border: none;\n cursor: pointer;\n transition: transform 0.3s;\n}\n\n.interactive-elements button:hover {\n transform: scale(1.2);\n}\n\n@keyframes sway {\n 0%, 100% { transform: translateX(0) rotate(5deg); }\n 50% { transform: translateX(10px) rotate(-5deg); }\n}\n\n@media (max-width: 768px) {\n .lantern {\n display: none;\n }\n}\n\n.flipped {\n transform: rotateY(180deg);\n}\n\n.heart {\n position: absolute;\n font-size: 1.5rem;\n pointer-events: none;\n animation: float 2s ease-out forwards;\n}\n\n@keyframes float {\n 0% {\n transform: translateY(0) scale(0.5);\n opacity: 1;\n }\n 100% {\n transform: translateY(-100vh) scale(1.5);\n opacity: 0;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const card = document.querySelector('.greeting-card');\n const openButton = document.querySelector('.open-card');\n const heartsButton = document.querySelector('.floating-hearts');\n const musicButton = document.querySelector('.play-music');\n \n const audio = new Audio();\n audio.src = 'data:audio/wav;base64,UklGRl9vT19XQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgA';\n \n openButton.addEventListener('click', () => {\n card.classList.add('flipped');\n });\n \n heartsButton.addEventListener('click', createHearts);\n \n musicButton.addEventListener('click', () => {\n if (audio.paused) {\n audio.play();\n musicButton.textContent = '🔇';\n } else {\n audio.pause();\n musicButton.textContent = '🎵';\n }\n });\n \n function createHearts() {\n for (let i = 0; i < 10; i++) {\n setTimeout(() => {\n const heart = document.createElement('span');\n heart.className = 'heart';\n heart.textContent = '❤️';\n heart.style.left = Math.random() * 100 + '%';\n document.body.appendChild(heart);\n \n setTimeout(() => {\n heart.remove();\n }, 2000);\n }, i * 100);\n }\n }\n \n // Allow card to be closed by clicking anywhere on the inside\n card.addEventListener('click', (e) => {\n if (e.target.closest('.card-inside') && \n !e.target.closest('.interactive-elements')) {\n card.classList.remove('flipped');\n }\n });\n});\n\n---end---\n\nThis creates a beautiful, interactive New Year greeting card with the following features:\n\n1. 3D card flip animation\n2. Floating Chinese lanterns with sway animation\n3. Bilingual messages in Chinese and Spanish\n4. Interactive buttons for:\n - Opening the card\n - Creating floating hearts animation\n - Playing background music (though audio is mocked for this example)\n5. Responsive design that works on all devices\n6. Beautiful gradient backgrounds\n7. Smooth animations and transitions\n8. Accessible buttons with ARIA labels\n9. Clean, semantic HTML structure\n10. Modern CSS with variables and fluid typography\n\nThe domain name \"amorlunar\" combines \"amor\" (love in Spanish) with \"lunar\" (referring to Chinese New Year/Lunar New Year), creating a romantic and culturally meaningful name."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 296,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2159
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..f21d536
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# amorlunar2.scroll.pub
+Website generated by Claude from prompt: A new year greeting card for my Spanish boyfriend. It should show words in Chinese and Spanish. Have interactivity. Be creative
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..e1cf133
--- /dev/null
+++ b/script.js
@@ -0,0 +1,49 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const card = document.querySelector('.greeting-card');
+ const openButton = document.querySelector('.open-card');
+ const heartsButton = document.querySelector('.floating-hearts');
+ const musicButton = document.querySelector('.play-music');
+
+ const audio = new Audio();
+ audio.src = 'data:audio/wav;base64,UklGRl9vT19XQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgA';
+
+ openButton.addEventListener('click', () => {
+ card.classList.add('flipped');
+ });
+
+ heartsButton.addEventListener('click', createHearts);
+
+ musicButton.addEventListener('click', () => {
+ if (audio.paused) {
+ audio.play();
+ musicButton.textContent = '🔇';
+ } else {
+ audio.pause();
+ musicButton.textContent = '🎵';
+ }
+ });
+
+ function createHearts() {
+ for (let i = 0; i < 10; i++) {
+ setTimeout(() => {
+ const heart = document.createElement('span');
+ heart.className = 'heart';
+ heart.textContent = '❤️';
+ heart.style.left = Math.random() * 100 + '%';
+ document.body.appendChild(heart);
+
+ setTimeout(() => {
+ heart.remove();
+ }, 2000);
+ }, i * 100);
+ }
+ }
+
+ // Allow card to be closed by clicking anywhere on the inside
+ card.addEventListener('click', (e) => {
+ if (e.target.closest('.card-inside') &&
+ !e.target.closest('.interactive-elements')) {
+ card.classList.remove('flipped');
+ }
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..246bbac
--- /dev/null
+++ b/style.css
@@ -0,0 +1,159 @@
+:root {
+ --primary-red: #e60012;
+ --gold: #ffd700;
+ --card-width: min(90vw, 600px);
+ --card-height: min(80vh, 800px);
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ min-height: 100vh;
+ background: linear-gradient(135deg, #1a0f1f, #2c1810);
+ display: grid;
+ place-items: center;
+ font-family: system-ui, sans-serif;
+ overflow: hidden;
+}
+
+.card-container {
+ position: relative;
+ perspective: 2000px;
+}
+
+.lantern {
+ position: absolute;
+ 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: -100px;
+ animation-delay: -1.5s;
+}
+
+.lantern.right {
+ right: -100px;
+}
+
+.greeting-card {
+ width: var(--card-width);
+ height: var(--card-height);
+ 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;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 2rem;
+}
+
+.card-front {
+ background: linear-gradient(45deg, var(--primary-red), #ff4d4d);
+ color: var(--gold);
+ text-align: center;
+}
+
+.card-inside {
+ background: linear-gradient(45deg, #fff1f1, #ffe4e4);
+ transform: rotateY(180deg);
+}
+
+h1 {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+.chinese {
+ font-size: clamp(1.5rem, 5vw, 3rem);
+}
+
+.spanish {
+ font-size: clamp(1.2rem, 4vw, 2.5rem);
+}
+
+.open-card {
+ font-size: 2rem;
+ background: none;
+ border: none;
+ cursor: pointer;
+ transition: transform 0.3s;
+}
+
+.open-card:hover {
+ transform: scale(1.2);
+}
+
+.message {
+ text-align: center;
+ line-height: 1.6;
+}
+
+.interactive-elements {
+ display: flex;
+ gap: 1rem;
+}
+
+.interactive-elements button {
+ font-size: 1.5rem;
+ background: none;
+ border: none;
+ cursor: pointer;
+ transition: transform 0.3s;
+}
+
+.interactive-elements button:hover {
+ transform: scale(1.2);
+}
+
+@keyframes sway {
+ 0%, 100% { transform: translateX(0) rotate(5deg); }
+ 50% { transform: translateX(10px) rotate(-5deg); }
+}
+
+@media (max-width: 768px) {
+ .lantern {
+ display: none;
+ }
+}
+
+.flipped {
+ transform: rotateY(180deg);
+}
+
+.heart {
+ position: absolute;
+ font-size: 1.5rem;
+ pointer-events: none;
+ animation: float 2s ease-out forwards;
+}
+
+@keyframes float {
+ 0% {
+ transform: translateY(0) scale(0.5);
+ opacity: 1;
+ }
+ 100% {
+ transform: translateY(-100vh) scale(1.5);
+ opacity: 0;
+ }
+}