commit 347ab5f7d51e280a1ac8eaa53bc4100adeffe4b6
Author: root <root@hub.scroll.pub>
Date: 2024-12-31 14:21:04 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..858beaf
--- /dev/null
+++ b/body.html
@@ -0,0 +1,18 @@
+<main class="card-container">
+ <div class="card">
+ <div class="card-front">
+ <h1>Feliz Año Nuevo, Mi Amor</h1>
+ <h2>新年快乐，我的爱</h2>
+ <div class="fireworks"></div>
+ <button class="flip-button">Open Card ❤️</button>
+ </div>
+ <div class="card-back">
+ <div class="message">
+ <p class="spanish">Cada momento contigo hace que mi vida brille más que todas las estrellas del cielo. En este nuevo año, deseo que nuestro amor siga creciendo y brillando.</p>
+ <p class="chinese">与你在一起的每一刻，都让我的生命比天上的星星更闪耀。在新的一年里，愿我们的爱继续成长和闪耀。</p>
+ <div class="hearts-container"></div>
+ </div>
+ <button class="flip-button">Close Card 💌</button>
+ </div>
+ </div>
+</main>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..9e73029
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://amoryear.scroll.pub
+metaTags
+editButton /edit.html
+title Mi Amor - New Year's Wishes
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..aca45d9
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01L5z1AmmbNfRL5w1ubLCMw7",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Here's a romantic New Year greeting card website:\n\n---domain---\namoryear.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://amoryear.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Mi Amor - New Year's Wishes\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<main class=\"card-container\">\n <div class=\"card\">\n <div class=\"card-front\">\n <h1>Feliz Año Nuevo, Mi Amor</h1>\n <h2>新年快乐，我的爱</h2>\n <div class=\"fireworks\"></div>\n <button class=\"flip-button\">Open Card ❤️</button>\n </div>\n <div class=\"card-back\">\n <div class=\"message\">\n <p class=\"spanish\">Cada momento contigo hace que mi vida brille más que todas las estrellas del cielo. En este nuevo año, deseo que nuestro amor siga creciendo y brillando.</p>\n <p class=\"chinese\">与你在一起的每一刻，都让我的生命比天上的星星更闪耀。在新的一年里，愿我们的爱继续成长和闪耀。</p>\n <div class=\"hearts-container\"></div>\n </div>\n <button class=\"flip-button\">Close Card 💌</button>\n </div>\n </div>\n</main>\n\n---style.css---\n:root {\n --primary-color: #ff4d6d;\n --secondary-color: #ffb3c1;\n --text-color: #2b2d42;\n --bg-color: #fff0f3;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n background: var(--bg-color);\n font-family: 'Arial', sans-serif;\n perspective: 1000px;\n}\n\n.card-container {\n width: 100%;\n max-width: 600px;\n height: 400px;\n padding: 20px;\n}\n\n.card {\n width: 100%;\n height: 100%;\n position: relative;\n transform-style: preserve-3d;\n transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.card.flipped {\n transform: rotateY(180deg);\n}\n\n.card-front, .card-back {\n position: absolute;\n width: 100%;\n height: 100%;\n backface-visibility: hidden;\n border-radius: 20px;\n padding: 30px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n}\n\n.card-front {\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n color: white;\n}\n\n.card-back {\n background: white;\n transform: rotateY(180deg);\n}\n\nh1, h2 {\n text-align: center;\n margin: 10px 0;\n}\n\nh1 {\n font-size: 2.5em;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.2);\n}\n\nh2 {\n font-size: 2em;\n}\n\n.message {\n text-align: center;\n font-size: 1.2em;\n line-height: 1.6;\n color: var(--text-color);\n}\n\n.spanish, .chinese {\n margin: 20px 0;\n}\n\n.flip-button {\n padding: 12px 24px;\n border: none;\n border-radius: 25px;\n background: white;\n color: var(--primary-color);\n font-size: 1.1em;\n cursor: pointer;\n transition: transform 0.3s, box-shadow 0.3s;\n margin-top: 20px;\n}\n\n.flip-button:hover {\n transform: translateY(-2px);\n box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n}\n\n.fireworks {\n position: absolute;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n\n@media (max-width: 600px) {\n .card-container {\n height: 500px;\n }\n \n h1 {\n font-size: 2em;\n }\n \n h2 {\n font-size: 1.5em;\n }\n \n .message {\n font-size: 1em;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const card = document.querySelector('.card');\n const buttons = document.querySelectorAll('.flip-button');\n \n buttons.forEach(button => {\n button.addEventListener('click', () => {\n card.classList.toggle('flipped');\n });\n });\n\n // Create floating hearts animation\n const heartsContainer = document.querySelector('.hearts-container');\n \n function createHeart() {\n const heart = document.createElement('div');\n heart.innerHTML = '❤️';\n heart.style.position = 'absolute';\n heart.style.fontSize = Math.random() * 20 + 10 + 'px';\n heart.style.left = Math.random() * 100 + '%';\n heart.style.opacity = '0';\n heart.style.animation = `float ${Math.random() * 2 + 3}s ease-in forwards`;\n heartsContainer.appendChild(heart);\n \n setTimeout(() => heart.remove(), 5000);\n }\n\n setInterval(createHeart, 300);\n\n // Add CSS animation for floating hearts\n const style = document.createElement('style');\n style.textContent = `\n @keyframes float {\n 0% {\n transform: translateY(100%) rotate(0deg);\n opacity: 1;\n }\n 100% {\n transform: translateY(-100vh) rotate(360deg);\n opacity: 0;\n }\n }\n `;\n document.head.appendChild(style);\n\n // Create fireworks effect\n const fireworks = document.querySelector('.fireworks');\n \n function createParticle() {\n const particle = document.createElement('div');\n particle.style.position = 'absolute';\n particle.style.width = '4px';\n particle.style.height = '4px';\n particle.style.background = `hsl(${Math.random() * 360}deg, 100%, 50%)`;\n particle.style.borderRadius = '50%';\n particle.style.left = Math.random() * 100 + '%';\n particle.style.top = Math.random() * 100 + '%';\n particle.style.animation = `sparkle ${Math.random() * 1 + 0.5}s ease-out forwards`;\n fireworks.appendChild(particle);\n \n setTimeout(() => particle.remove(), 1500);\n }\n\n setInterval(createParticle, 50);\n\n // Add CSS animation for fireworks\n const fireworksStyle = document.createElement('style');\n fireworksStyle.textContent = `\n @keyframes sparkle {\n 0% {\n transform: scale(0);\n opacity: 1;\n }\n 100% {\n transform: scale(20);\n opacity: 0;\n }\n }\n `;\n document.head.appendChild(fireworksStyle);\n});\n\n---end---\n\nThis creates a beautiful, interactive New Year greeting card with:\n- 3D flip animation\n- Floating hearts animation\n- Fireworks particle effects\n- Romantic messages in both Spanish and Chinese\n- Fully responsive design\n- Gradient backgrounds\n- Smooth animations and transitions\n- Interactive buttons\n- Modern, clean design\n\nThe card flips when clicked, revealing the message on the back. The animations (hearts and fireworks) add a romantic, celebratory feel while keeping the focus on the heartfelt message."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 302,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2134
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..83f7a4d
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# amoryear.scroll.pub
+Website generated by Claude from prompt: A website shows a New Year greeting card with written wishing in Spanish and Chinese to my Spanish lover. It should have images and interactivity. Be creative.
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..b9c2477
--- /dev/null
+++ b/script.js
@@ -0,0 +1,80 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const card = document.querySelector('.card');
+ const buttons = document.querySelectorAll('.flip-button');
+
+ buttons.forEach(button => {
+ button.addEventListener('click', () => {
+ card.classList.toggle('flipped');
+ });
+ });
+
+ // Create floating hearts animation
+ const heartsContainer = document.querySelector('.hearts-container');
+
+ function createHeart() {
+ const heart = document.createElement('div');
+ heart.innerHTML = '❤️';
+ heart.style.position = 'absolute';
+ heart.style.fontSize = Math.random() * 20 + 10 + 'px';
+ heart.style.left = Math.random() * 100 + '%';
+ heart.style.opacity = '0';
+ heart.style.animation = `float ${Math.random() * 2 + 3}s ease-in forwards`;
+ heartsContainer.appendChild(heart);
+
+ setTimeout(() => heart.remove(), 5000);
+ }
+
+ setInterval(createHeart, 300);
+
+ // Add CSS animation for floating hearts
+ const style = document.createElement('style');
+ style.textContent = `
+ @keyframes float {
+ 0% {
+ transform: translateY(100%) rotate(0deg);
+ opacity: 1;
+ }
+ 100% {
+ transform: translateY(-100vh) rotate(360deg);
+ opacity: 0;
+ }
+ }
+ `;
+ document.head.appendChild(style);
+
+ // Create fireworks effect
+ const fireworks = document.querySelector('.fireworks');
+
+ function createParticle() {
+ const particle = document.createElement('div');
+ particle.style.position = 'absolute';
+ particle.style.width = '4px';
+ particle.style.height = '4px';
+ particle.style.background = `hsl(${Math.random() * 360}deg, 100%, 50%)`;
+ particle.style.borderRadius = '50%';
+ particle.style.left = Math.random() * 100 + '%';
+ particle.style.top = Math.random() * 100 + '%';
+ particle.style.animation = `sparkle ${Math.random() * 1 + 0.5}s ease-out forwards`;
+ fireworks.appendChild(particle);
+
+ setTimeout(() => particle.remove(), 1500);
+ }
+
+ setInterval(createParticle, 50);
+
+ // Add CSS animation for fireworks
+ const fireworksStyle = document.createElement('style');
+ fireworksStyle.textContent = `
+ @keyframes sparkle {
+ 0% {
+ transform: scale(0);
+ opacity: 1;
+ }
+ 100% {
+ transform: scale(20);
+ opacity: 0;
+ }
+ }
+ `;
+ document.head.appendChild(fireworksStyle);
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..9ce38bd
--- /dev/null
+++ b/style.css
@@ -0,0 +1,132 @@
+:root {
+ --primary-color: #ff4d6d;
+ --secondary-color: #ffb3c1;
+ --text-color: #2b2d42;
+ --bg-color: #fff0f3;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ min-height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: var(--bg-color);
+ font-family: 'Arial', sans-serif;
+ perspective: 1000px;
+}
+
+.card-container {
+ width: 100%;
+ max-width: 600px;
+ height: 400px;
+ padding: 20px;
+}
+
+.card {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ transform-style: preserve-3d;
+ transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.card.flipped {
+ transform: rotateY(180deg);
+}
+
+.card-front, .card-back {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ backface-visibility: hidden;
+ border-radius: 20px;
+ padding: 30px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+}
+
+.card-front {
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ color: white;
+}
+
+.card-back {
+ background: white;
+ transform: rotateY(180deg);
+}
+
+h1, h2 {
+ text-align: center;
+ margin: 10px 0;
+}
+
+h1 {
+ font-size: 2.5em;
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
+}
+
+h2 {
+ font-size: 2em;
+}
+
+.message {
+ text-align: center;
+ font-size: 1.2em;
+ line-height: 1.6;
+ color: var(--text-color);
+}
+
+.spanish, .chinese {
+ margin: 20px 0;
+}
+
+.flip-button {
+ padding: 12px 24px;
+ border: none;
+ border-radius: 25px;
+ background: white;
+ color: var(--primary-color);
+ font-size: 1.1em;
+ cursor: pointer;
+ transition: transform 0.3s, box-shadow 0.3s;
+ margin-top: 20px;
+}
+
+.flip-button:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+}
+
+.fireworks {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+}
+
+@media (max-width: 600px) {
+ .card-container {
+ height: 500px;
+ }
+
+ h1 {
+ font-size: 2em;
+ }
+
+ h2 {
+ font-size: 1.5em;
+ }
+
+ .message {
+ font-size: 1em;
+ }
+}