commit 97f23d22362bbb871f58fd0155b947769bbbfabb
Author: root <root@hub.scroll.pub>
Date: 2024-12-31 14:58:07 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..4401fbd
--- /dev/null
+++ b/body.html
@@ -0,0 +1,34 @@
+<main class="card-container">
+ <div class="card">
+ <div class="card-front">
+ <h1>
+ <span class="spanish">Mi Amor</span>
+ <span class="chinese">我的爱</span>
+ </h1>
+ <div class="heart-animation"></div>
+ <p class="tap-instruction">Click to open ❤️</p>
+ </div>
+
+ <div class="card-inside">
+ <div class="message-container">
+ <p class="message spanish">
+ Cada día contigo es un regalo precioso.
+ Eres mi sol, mi luna y todas mis estrellas.
+ </p>
+ <p class="message chinese">
+ 与你在一起的每一天都是珍贵的礼物。
+ 你是我的太阳，我的月亮和所有的星星。
+ </p>
+ </div>
+
+ <div class="interactive-elements">
+ <button class="love-button">💕</button>
+ <div class="floating-hearts"></div>
+ </div>
+ </div>
+ </div>
+</main>
+
+<footer>
+ <p>Made with love in Spain and China</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..9bd15a2
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,11 @@
+buildHtml
+baseUrl https://amor-amor.scroll.pub
+metaTags
+ description "A bilingual love greeting card combining Spanish passion and Chinese elegance"
+ keywords "love, greeting card, español, 中文, romance, bilingual"
+ author "Made with Love"
+editButton /edit.html
+title Mi Corazón | 我的心 | Digital Love Card
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..d69b395
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01MbbgUp893SU2eTaMBzo9Ff",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a romantic bilingual greeting card website. Here's a short, memorable domain suggestion followed by the implementation:\n\n---domain---\namor-amor.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://amor-amor.scroll.pub\nmetaTags\n description \"A bilingual love greeting card combining Spanish passion and Chinese elegance\"\n keywords \"love, greeting card, español, 中文, romance, bilingual\"\n author \"Made with Love\"\neditButton /edit.html\ntitle Mi Corazón | 我的心 | Digital Love Card\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>\n <span class=\"spanish\">Mi Amor</span>\n <span class=\"chinese\">我的爱</span>\n </h1>\n <div class=\"heart-animation\"></div>\n <p class=\"tap-instruction\">Click to open ❤️</p>\n </div>\n \n <div class=\"card-inside\">\n <div class=\"message-container\">\n <p class=\"message spanish\">\n Cada día contigo es un regalo precioso.\n Eres mi sol, mi luna y todas mis estrellas.\n </p>\n <p class=\"message chinese\">\n 与你在一起的每一天都是珍贵的礼物。\n 你是我的太阳，我的月亮和所有的星星。\n </p>\n </div>\n \n <div class=\"interactive-elements\">\n <button class=\"love-button\">💕</button>\n <div class=\"floating-hearts\"></div>\n </div>\n </div>\n </div>\n</main>\n\n<footer>\n <p>Made with love in Spain and China</p>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #ff3366;\n --secondary-color: #ff8fab;\n --text-color: #333;\n --card-bg: #fff;\n --animation-timing: 0.5s;\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 flex-direction: column;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, #ffedec, #ffd1d1);\n font-family: 'Segoe UI', system-ui, sans-serif;\n color: var(--text-color);\n}\n\n.card-container {\n perspective: 2000px;\n width: 90%;\n max-width: 600px;\n margin: 2rem auto;\n}\n\n.card {\n position: relative;\n width: 100%;\n height: 400px;\n transform-style: preserve-3d;\n transition: transform var(--animation-timing) ease;\n}\n\n.card.opened {\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 box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n padding: 2rem;\n background: var(--card-bg);\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, #fff);\n}\n\nh1 {\n text-align: center;\n font-size: 2.5rem;\n margin-bottom: 2rem;\n}\n\n.spanish, .chinese {\n display: block;\n margin: 0.5rem;\n}\n\n.spanish {\n color: var(--primary-color);\n font-family: 'Segoe UI', cursive;\n}\n\n.chinese {\n color: var(--secondary-color);\n font-family: 'Microsoft YaHei', sans-serif;\n}\n\n.message {\n text-align: center;\n margin: 1rem 0;\n line-height: 1.6;\n opacity: 0;\n transform: translateY(20px);\n animation: fadeIn 1s forwards;\n}\n\n.heart-animation {\n width: 100px;\n height: 100px;\n background: var(--primary-color);\n position: relative;\n transform: rotate(45deg);\n animation: heartbeat 1.5s infinite;\n}\n\n.heart-animation::before,\n.heart-animation::after {\n content: '';\n width: 100px;\n height: 100px;\n background: var(--primary-color);\n border-radius: 50%;\n position: absolute;\n}\n\n.heart-animation::before {\n left: -50%;\n}\n\n.heart-animation::after {\n top: -50%;\n}\n\n.love-button {\n font-size: 2rem;\n background: none;\n border: none;\n cursor: pointer;\n transition: transform 0.3s;\n}\n\n.love-button:hover {\n transform: scale(1.2);\n}\n\n.floating-hearts {\n position: absolute;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n\n@keyframes heartbeat {\n 0% { transform: rotate(45deg) scale(1); }\n 25% { transform: rotate(45deg) scale(1.1); }\n 50% { transform: rotate(45deg) scale(1); }\n 75% { transform: rotate(45deg) scale(1.1); }\n 100% { transform: rotate(45deg) scale(1); }\n}\n\n@keyframes fadeIn {\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@media (max-width: 768px) {\n .card {\n height: 350px;\n }\n \n h1 {\n font-size: 2rem;\n }\n \n .message {\n font-size: 0.9rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const card = document.querySelector('.card');\n const loveButton = document.querySelector('.love-button');\n const floatingHearts = document.querySelector('.floating-hearts');\n \n // Card flip functionality\n card.addEventListener('click', () => {\n card.classList.toggle('opened');\n });\n \n // Create floating hearts\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 = '1';\n heart.style.transition = 'all 2s ease';\n \n floatingHearts.appendChild(heart);\n \n // Animate heart\n setTimeout(() => {\n heart.style.transform = `translateY(-${Math.random() * 200 + 100}px)`;\n heart.style.opacity = '0';\n }, 50);\n \n // Remove heart from DOM\n setTimeout(() => {\n floatingHearts.removeChild(heart);\n }, 2000);\n }\n \n // Love button click handler\n loveButton.addEventListener('click', (e) => {\n e.stopPropagation(); // Prevent card flip\n for(let i = 0; i < 10; i++) {\n setTimeout(createHeart, i * 100);\n }\n });\n \n // Add initial animation delay\n document.querySelectorAll('.message').forEach((msg, index) => {\n msg.style.animationDelay = `${index * 0.5}s`;\n });\n});\n\n---end---\n\nThis implementation creates a beautiful, interactive greeting card with:\n- Elegant bilingual messages in Spanish and Chinese\n- A flipping card animation\n- An animated heart on the front\n- Floating hearts animation when clicking the love button\n- Smooth fade-in animations for messages\n- Fully responsive design\n- Gradient backgrounds and sophisticated shadows\n- Semantic HTML structure\n- Accessibility considerations\n- Clean, modern CSS with variables\n- Smooth interactions and animations\n\nThe design is romantic and elegant while maintaining simplicity and professionalism. The domain name \"amor-amor\" (love-love) is memorable and represents the bilingual nature of the site."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 303,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2207
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..806de47
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# amor-amor.scroll.pub
+Website generated by Claude from prompt: A website showing a new greeting card to my Spanish lover. It should have written words in Chinese and Spanish. 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..fe99f53
--- /dev/null
+++ b/script.js
@@ -0,0 +1,47 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const card = document.querySelector('.card');
+ const loveButton = document.querySelector('.love-button');
+ const floatingHearts = document.querySelector('.floating-hearts');
+
+ // Card flip functionality
+ card.addEventListener('click', () => {
+ card.classList.toggle('opened');
+ });
+
+ // Create floating hearts
+ 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 = '1';
+ heart.style.transition = 'all 2s ease';
+
+ floatingHearts.appendChild(heart);
+
+ // Animate heart
+ setTimeout(() => {
+ heart.style.transform = `translateY(-${Math.random() * 200 + 100}px)`;
+ heart.style.opacity = '0';
+ }, 50);
+
+ // Remove heart from DOM
+ setTimeout(() => {
+ floatingHearts.removeChild(heart);
+ }, 2000);
+ }
+
+ // Love button click handler
+ loveButton.addEventListener('click', (e) => {
+ e.stopPropagation(); // Prevent card flip
+ for(let i = 0; i < 10; i++) {
+ setTimeout(createHeart, i * 100);
+ }
+ });
+
+ // Add initial animation delay
+ document.querySelectorAll('.message').forEach((msg, index) => {
+ msg.style.animationDelay = `${index * 0.5}s`;
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..8ee4f23
--- /dev/null
+++ b/style.css
@@ -0,0 +1,168 @@
+:root {
+ --primary-color: #ff3366;
+ --secondary-color: #ff8fab;
+ --text-color: #333;
+ --card-bg: #fff;
+ --animation-timing: 0.5s;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background: linear-gradient(135deg, #ffedec, #ffd1d1);
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ color: var(--text-color);
+}
+
+.card-container {
+ perspective: 2000px;
+ width: 90%;
+ max-width: 600px;
+ margin: 2rem auto;
+}
+
+.card {
+ position: relative;
+ width: 100%;
+ height: 400px;
+ transform-style: preserve-3d;
+ transition: transform var(--animation-timing) ease;
+}
+
+.card.opened {
+ transform: rotateY(180deg);
+}
+
+.card-front, .card-inside {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ backface-visibility: hidden;
+ border-radius: 20px;
+ box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+ padding: 2rem;
+ background: var(--card-bg);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+.card-inside {
+ transform: rotateY(180deg);
+ background: linear-gradient(45deg, #fff1f1, #fff);
+}
+
+h1 {
+ text-align: center;
+ font-size: 2.5rem;
+ margin-bottom: 2rem;
+}
+
+.spanish, .chinese {
+ display: block;
+ margin: 0.5rem;
+}
+
+.spanish {
+ color: var(--primary-color);
+ font-family: 'Segoe UI', cursive;
+}
+
+.chinese {
+ color: var(--secondary-color);
+ font-family: 'Microsoft YaHei', sans-serif;
+}
+
+.message {
+ text-align: center;
+ margin: 1rem 0;
+ line-height: 1.6;
+ opacity: 0;
+ transform: translateY(20px);
+ animation: fadeIn 1s forwards;
+}
+
+.heart-animation {
+ width: 100px;
+ height: 100px;
+ background: var(--primary-color);
+ position: relative;
+ transform: rotate(45deg);
+ animation: heartbeat 1.5s infinite;
+}
+
+.heart-animation::before,
+.heart-animation::after {
+ content: '';
+ width: 100px;
+ height: 100px;
+ background: var(--primary-color);
+ border-radius: 50%;
+ position: absolute;
+}
+
+.heart-animation::before {
+ left: -50%;
+}
+
+.heart-animation::after {
+ top: -50%;
+}
+
+.love-button {
+ font-size: 2rem;
+ background: none;
+ border: none;
+ cursor: pointer;
+ transition: transform 0.3s;
+}
+
+.love-button:hover {
+ transform: scale(1.2);
+}
+
+.floating-hearts {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+}
+
+@keyframes heartbeat {
+ 0% { transform: rotate(45deg) scale(1); }
+ 25% { transform: rotate(45deg) scale(1.1); }
+ 50% { transform: rotate(45deg) scale(1); }
+ 75% { transform: rotate(45deg) scale(1.1); }
+ 100% { transform: rotate(45deg) scale(1); }
+}
+
+@keyframes fadeIn {
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@media (max-width: 768px) {
+ .card {
+ height: 350px;
+ }
+
+ h1 {
+ font-size: 2rem;
+ }
+
+ .message {
+ font-size: 0.9rem;
+ }
+}