commit e6d2cbf929e2a6423f030d274f66495038fd1454
Author: root <root@hub.scroll.pub>
Date: 2024-12-31 14:30:41 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..ad5ed90
--- /dev/null
+++ b/body.html
@@ -0,0 +1,32 @@
+<main class="card-container">
+ <div class="floating-hearts"></div>
+
+ <section class="greeting-card">
+ <div class="card-front">
+ <h1 class="multilingual">
+ <span class="spanish">Feliz Año Nuevo</span>
+ <span class="chinese">新年快乐</span>
+ </h1>
+ <div class="moon-decoration"></div>
+ </div>
+
+ <div class="card-inside">
+ <p class="spanish-text">Mi querido amor,</p>
+ <p class="chinese-text">亲爱的，</p>
+
+ <div class="message">
+ <p class="spanish-text">Que este nuevo año nos traiga más momentos mágicos juntos.</p>
+ <p class="chinese-text">愿新的一年带给我们更多美好的时光。</p>
+ </div>
+
+ <button class="toggle-language" aria-label="Toggle language">
+ <span>ES</span>
+ <span>中</span>
+ </button>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <p>Created with love | 用爱创作</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..49f12bb
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,11 @@
+buildHtml
+baseUrl https://amorlunar.scroll.pub
+metaTags
+ description "A bilingual New Year love greeting in Spanish and Chinese"
+ keywords "love, greeting card, new year, spanish, chinese, romance"
+ author "Amor Lunar"
+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..0079873
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01EwFuQgd2ovqnqqq5VfHJtx",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a romantic New Year greeting card website with a Spanish-Chinese fusion theme.\n\n---domain---\namorlunar.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://amorlunar.scroll.pub\nmetaTags\n description \"A bilingual New Year love greeting in Spanish and Chinese\"\n keywords \"love, greeting card, new year, spanish, chinese, romance\"\n author \"Amor Lunar\"\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=\"floating-hearts\"></div>\n \n <section class=\"greeting-card\">\n <div class=\"card-front\">\n <h1 class=\"multilingual\">\n <span class=\"spanish\">Feliz Año Nuevo</span>\n <span class=\"chinese\">新年快乐</span>\n </h1>\n <div class=\"moon-decoration\"></div>\n </div>\n \n <div class=\"card-inside\">\n <p class=\"spanish-text\">Mi querido amor,</p>\n <p class=\"chinese-text\">亲爱的，</p>\n \n <div class=\"message\">\n <p class=\"spanish-text\">Que este nuevo año nos traiga más momentos mágicos juntos.</p>\n <p class=\"chinese-text\">愿新的一年带给我们更多美好的时光。</p>\n </div>\n \n <button class=\"toggle-language\" aria-label=\"Toggle language\">\n <span>ES</span>\n <span>中</span>\n </button>\n </div>\n </section>\n</main>\n\n<footer>\n <p>Created with love | 用爱创作</p>\n</footer>\n\n---style.css---\n:root {\n --purple: #8a2be2;\n --yellow: #ffd700;\n --gradient: linear-gradient(135deg, var(--purple), var(--yellow));\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n min-height: 100vh;\n background: #1a1a1a;\n font-family: system-ui, sans-serif;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n color: white;\n}\n\n.card-container {\n position: relative;\n width: 100%;\n max-width: 600px;\n height: 80vh;\n perspective: 1000px;\n}\n\n.greeting-card {\n position: relative;\n width: 100%;\n height: 100%;\n transform-style: preserve-3d;\n transition: transform 1s;\n cursor: pointer;\n}\n\n.greeting-card.flipped {\n transform: rotateY(180deg);\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(--gradient);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n box-shadow: 0 0 30px rgba(138, 43, 226, 0.3);\n}\n\n.card-inside {\n transform: rotateY(180deg);\n background: white;\n color: var(--purple);\n}\n\n.multilingual {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 1rem;\n font-size: clamp(2rem, 5vw, 4rem);\n text-align: center;\n}\n\n.moon-decoration {\n width: 100px;\n height: 100px;\n background: var(--yellow);\n border-radius: 50%;\n margin: 2rem;\n box-shadow: 0 0 30px var(--yellow);\n animation: glow 3s infinite alternate;\n}\n\n.floating-hearts {\n position: absolute;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n\n.toggle-language {\n position: absolute;\n bottom: 20px;\n right: 20px;\n background: var(--purple);\n color: white;\n border: none;\n padding: 0.5rem 1rem;\n border-radius: 20px;\n cursor: pointer;\n transition: transform 0.3s;\n}\n\n.toggle-language:hover {\n transform: scale(1.1);\n}\n\nfooter {\n margin-top: 2rem;\n font-size: 0.8rem;\n opacity: 0.7;\n}\n\n@keyframes glow {\n from { box-shadow: 0 0 30px var(--yellow); }\n to { box-shadow: 0 0 50px var(--yellow); }\n}\n\n@media (max-width: 768px) {\n .card-container {\n height: 70vh;\n margin: 2rem;\n }\n \n .multilingual {\n font-size: clamp(1.5rem, 4vw, 2.5rem);\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const card = document.querySelector('.greeting-card');\n const hearts = document.querySelector('.floating-hearts');\n const languageToggle = document.querySelector('.toggle-language');\n let isSpanish = true;\n\n // Card flip\n card.addEventListener('click', (e) => {\n if (e.target !== languageToggle) {\n card.classList.toggle('flipped');\n }\n });\n\n // Floating hearts animation\n function createHeart() {\n const heart = document.createElement('div');\n heart.innerHTML = '♥';\n heart.style.position = 'absolute';\n heart.style.color = Math.random() > 0.5 ? 'var(--purple)' : 'var(--yellow)';\n heart.style.fontSize = Math.random() * 20 + 10 + 'px';\n heart.style.left = Math.random() * 100 + '%';\n heart.style.top = '0';\n heart.style.opacity = '0';\n heart.style.transform = `rotate(${Math.random() * 360}deg)`;\n heart.style.transition = 'all 3s ease-out';\n \n hearts.appendChild(heart);\n \n setTimeout(() => {\n heart.style.opacity = '1';\n heart.style.transform = `translateY(${Math.random() * 100 + 100}px) rotate(${Math.random() * 360}deg)`;\n }, 100);\n \n setTimeout(() => {\n heart.remove();\n }, 3000);\n }\n\n setInterval(createHeart, 300);\n\n // Language toggle\n languageToggle.addEventListener('click', (e) => {\n e.stopPropagation();\n isSpanish = !isSpanish;\n document.querySelectorAll('.spanish-text').forEach(el => {\n el.style.display = isSpanish ? 'block' : 'none';\n });\n document.querySelectorAll('.chinese-text').forEach(el => {\n el.style.display = isSpanish ? 'none' : 'block';\n });\n });\n});\n\n---end---\n\nThis creates a beautiful, interactive greeting card with:\n1. A flip animation when clicked\n2. Floating hearts animation in purple and yellow\n3. Language toggle between Spanish and Chinese\n4. Glowing moon decoration\n5. Gradient background\n6. Responsive design\n7. Smooth animations and transitions\n8. Clean, semantic HTML\n9. Accessible controls\n10. Modern CSS features\n\nThe domain name \"amorlunar\" combines \"amor\" (love in Spanish) with \"lunar\" (moon-related), creating a romantic and memorable name that reflects the fusion of cultures in the greeting card."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 306,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2069
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..1c3c389
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# amorlunar.scroll.pub
+Website generated by Claude from prompt: A new year greeting card to my Spanish lover, showing written words in Chinese and Spanish. It should have images in colour purple and yellow. Have some interactivity. Be creative.
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..250f0b0
--- /dev/null
+++ b/script.js
@@ -0,0 +1,52 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const card = document.querySelector('.greeting-card');
+ const hearts = document.querySelector('.floating-hearts');
+ const languageToggle = document.querySelector('.toggle-language');
+ let isSpanish = true;
+
+ // Card flip
+ card.addEventListener('click', (e) => {
+ if (e.target !== languageToggle) {
+ card.classList.toggle('flipped');
+ }
+ });
+
+ // Floating hearts animation
+ function createHeart() {
+ const heart = document.createElement('div');
+ heart.innerHTML = '♥';
+ heart.style.position = 'absolute';
+ heart.style.color = Math.random() > 0.5 ? 'var(--purple)' : 'var(--yellow)';
+ heart.style.fontSize = Math.random() * 20 + 10 + 'px';
+ heart.style.left = Math.random() * 100 + '%';
+ heart.style.top = '0';
+ heart.style.opacity = '0';
+ heart.style.transform = `rotate(${Math.random() * 360}deg)`;
+ heart.style.transition = 'all 3s ease-out';
+
+ hearts.appendChild(heart);
+
+ setTimeout(() => {
+ heart.style.opacity = '1';
+ heart.style.transform = `translateY(${Math.random() * 100 + 100}px) rotate(${Math.random() * 360}deg)`;
+ }, 100);
+
+ setTimeout(() => {
+ heart.remove();
+ }, 3000);
+ }
+
+ setInterval(createHeart, 300);
+
+ // Language toggle
+ languageToggle.addEventListener('click', (e) => {
+ e.stopPropagation();
+ isSpanish = !isSpanish;
+ document.querySelectorAll('.spanish-text').forEach(el => {
+ el.style.display = isSpanish ? 'block' : 'none';
+ });
+ document.querySelectorAll('.chinese-text').forEach(el => {
+ el.style.display = isSpanish ? 'none' : 'block';
+ });
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..2bafaed
--- /dev/null
+++ b/style.css
@@ -0,0 +1,129 @@
+:root {
+ --purple: #8a2be2;
+ --yellow: #ffd700;
+ --gradient: linear-gradient(135deg, var(--purple), var(--yellow));
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ min-height: 100vh;
+ background: #1a1a1a;
+ font-family: system-ui, sans-serif;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ color: white;
+}
+
+.card-container {
+ position: relative;
+ width: 100%;
+ max-width: 600px;
+ height: 80vh;
+ perspective: 1000px;
+}
+
+.greeting-card {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ transform-style: preserve-3d;
+ transition: transform 1s;
+ cursor: pointer;
+}
+
+.greeting-card.flipped {
+ transform: rotateY(180deg);
+}
+
+.card-front, .card-inside {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ backface-visibility: hidden;
+ border-radius: 20px;
+ padding: 2rem;
+ background: var(--gradient);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 0 30px rgba(138, 43, 226, 0.3);
+}
+
+.card-inside {
+ transform: rotateY(180deg);
+ background: white;
+ color: var(--purple);
+}
+
+.multilingual {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 1rem;
+ font-size: clamp(2rem, 5vw, 4rem);
+ text-align: center;
+}
+
+.moon-decoration {
+ width: 100px;
+ height: 100px;
+ background: var(--yellow);
+ border-radius: 50%;
+ margin: 2rem;
+ box-shadow: 0 0 30px var(--yellow);
+ animation: glow 3s infinite alternate;
+}
+
+.floating-hearts {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+}
+
+.toggle-language {
+ position: absolute;
+ bottom: 20px;
+ right: 20px;
+ background: var(--purple);
+ color: white;
+ border: none;
+ padding: 0.5rem 1rem;
+ border-radius: 20px;
+ cursor: pointer;
+ transition: transform 0.3s;
+}
+
+.toggle-language:hover {
+ transform: scale(1.1);
+}
+
+footer {
+ margin-top: 2rem;
+ font-size: 0.8rem;
+ opacity: 0.7;
+}
+
+@keyframes glow {
+ from { box-shadow: 0 0 30px var(--yellow); }
+ to { box-shadow: 0 0 50px var(--yellow); }
+}
+
+@media (max-width: 768px) {
+ .card-container {
+ height: 70vh;
+ margin: 2rem;
+ }
+
+ .multilingual {
+ font-size: clamp(1.5rem, 4vw, 2.5rem);
+ }
+}