commit 39a9158e65e11cbdb00984ca53e84e837353fc3f
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 17:23:34 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..c1c75f2
--- /dev/null
+++ b/body.html
@@ -0,0 +1,36 @@
+<header>
+ <div class="heart-container">
+ <div class="heart"></div>
+ </div>
+ <h1>My Beloved Soukaina</h1>
+</header>
+
+<main>
+ <section class="hero">
+ <div class="floating-hearts"></div>
+ <h2>To The Love of My Life</h2>
+ <p class="subtitle">Every day with you is a gift</p>
+ </section>
+
+ <section class="love-letter">
+ <div class="paper">
+ <h3>My Dearest Soukaina</h3>
+ <p>Words cannot express the depth of my love for you. You are my sunshine, my inspiration, and my soulmate. Your smile brightens my darkest days, and your love gives meaning to my life.</p>
+ <p>Thank you for being the amazing person you are.</p>
+ <p class="signature">Forever Yours</p>
+ </div>
+ </section>
+
+ <section class="gallery">
+ <h3>Our Beautiful Moments</h3>
+ <div class="photo-grid">
+ <div class="photo-frame">Photo 1</div>
+ <div class="photo-frame">Photo 2</div>
+ <div class="photo-frame">Photo 3</div>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <p>Made with love for Soukaina</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..b6db434
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://soukaina-love.scroll.pub
+metaTags
+editButton /edit.html
+title My Beloved Soukaina
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..dd72763
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_0141v8GDUJu15Vywmor8FHrH",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll help create a romantic website for Soukaina. For the domain, I suggest:\n\n---domain---\nsoukaina-love.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://soukaina-love.scroll.pub\nmetaTags\neditButton /edit.html\ntitle My Beloved Soukaina\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <div class=\"heart-container\">\n <div class=\"heart\"></div>\n </div>\n <h1>My Beloved Soukaina</h1>\n</header>\n\n<main>\n <section class=\"hero\">\n <div class=\"floating-hearts\"></div>\n <h2>To The Love of My Life</h2>\n <p class=\"subtitle\">Every day with you is a gift</p>\n </section>\n\n <section class=\"love-letter\">\n <div class=\"paper\">\n <h3>My Dearest Soukaina</h3>\n <p>Words cannot express the depth of my love for you. You are my sunshine, my inspiration, and my soulmate. Your smile brightens my darkest days, and your love gives meaning to my life.</p>\n <p>Thank you for being the amazing person you are.</p>\n <p class=\"signature\">Forever Yours</p>\n </div>\n </section>\n\n <section class=\"gallery\">\n <h3>Our Beautiful Moments</h3>\n <div class=\"photo-grid\">\n <div class=\"photo-frame\">Photo 1</div>\n <div class=\"photo-frame\">Photo 2</div>\n <div class=\"photo-frame\">Photo 3</div>\n </div>\n </section>\n</main>\n\n<footer>\n <p>Made with love for Soukaina</p>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #ff6b6b;\n --secondary-color: #f9f1f1;\n --text-color: #4a4a4a;\n --accent-color: #ffd3d3;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n color: var(--text-color);\n line-height: 1.6;\n background: linear-gradient(135deg, #fff5f5 0%, #ffe9e9 100%);\n}\n\nheader {\n text-align: center;\n padding: 2rem;\n position: relative;\n}\n\n.heart-container {\n height: 100px;\n position: relative;\n margin-bottom: 1rem;\n}\n\n.heart {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n width: 50px;\n height: 50px;\n background-color: var(--primary-color);\n transform-origin: center;\n animation: heartbeat 1.5s ease-in-out infinite;\n}\n\n.heart:before,\n.heart:after {\n content: '';\n position: absolute;\n width: 50px;\n height: 50px;\n background-color: var(--primary-color);\n border-radius: 50%;\n}\n\n.heart:before {\n left: -25px;\n}\n\n.heart:after {\n top: -25px;\n}\n\nh1 {\n color: var(--primary-color);\n font-size: 3rem;\n margin-bottom: 1rem;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.1);\n}\n\n.hero {\n text-align: center;\n padding: 4rem 2rem;\n position: relative;\n overflow: hidden;\n}\n\n.floating-hearts {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n pointer-events: none;\n}\n\n.love-letter {\n padding: 2rem;\n display: flex;\n justify-content: center;\n}\n\n.paper {\n background: var(--secondary-color);\n padding: 3rem;\n max-width: 600px;\n border-radius: 10px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n transform: rotate(-1deg);\n transition: transform 0.3s ease;\n}\n\n.paper:hover {\n transform: rotate(0deg) scale(1.02);\n}\n\n.signature {\n text-align: right;\n font-style: italic;\n margin-top: 2rem;\n}\n\n.gallery {\n padding: 4rem 2rem;\n text-align: center;\n}\n\n.photo-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n padding: 2rem;\n}\n\n.photo-frame {\n background: var(--secondary-color);\n height: 250px;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n transition: transform 0.3s ease;\n}\n\n.photo-frame:hover {\n transform: translateY(-10px);\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n background: var(--accent-color);\n margin-top: 4rem;\n}\n\n@keyframes heartbeat {\n 0% { transform: translateX(-50%) scale(1); }\n 50% { transform: translateX(-50%) scale(1.1); }\n 100% { transform: translateX(-50%) scale(1); }\n}\n\n@media (max-width: 768px) {\n h1 { font-size: 2rem; }\n .paper { padding: 1.5rem; }\n .photo-grid { padding: 1rem; }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n // Create floating hearts\n const floatingHearts = document.querySelector('.floating-hearts');\n \n function createHeart() {\n const heart = document.createElement('div');\n heart.classList.add('floating-heart');\n heart.style.left = Math.random() * 100 + 'vw';\n heart.style.animationDuration = Math.random() * 3 + 2 + 's';\n heart.style.opacity = Math.random() * 0.5 + 0.5;\n heart.innerHTML = '❤️';\n heart.style.position = 'absolute';\n heart.style.fontSize = Math.random() * 20 + 10 + 'px';\n heart.style.animation = 'float-up ' + (Math.random() * 3 + 2) + 's linear forwards';\n \n floatingHearts.appendChild(heart);\n \n setTimeout(() => {\n heart.remove();\n }, 5000);\n }\n\n setInterval(createHeart, 300);\n});\n\n// Add floating heart animation to CSS\nconst style = document.createElement('style');\nstyle.textContent = `\n @keyframes float-up {\n 0% {\n transform: translateY(100vh) rotate(0deg);\n }\n 100% {\n transform: translateY(-100vh) rotate(360deg);\n }\n }\n`;\ndocument.head.appendChild(style);\n\n---end---\n\nThis romantic website features:\n1. A beating heart animation in the header\n2. Floating heart particles in the background\n3. A romantic love letter section with a paper effect\n4. A photo gallery section (placeholders included)\n5. Smooth animations and transitions\n6. Fully responsive design\n7. Soft, romantic color scheme\n8. Interactive elements with hover effects\n\nYou can customize the content, add real photos, and adjust the colors to match your preferences. The design is clean, modern, and focuses on expressing love and appreciation for Soukaina."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 279,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2065
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..7db6591
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# soukaina-love.scroll.pub
+Website generated by Claude from prompt: create romantic website for my wife soukaina
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..f2063b0
--- /dev/null
+++ b/script.js
@@ -0,0 +1,38 @@
+document.addEventListener('DOMContentLoaded', function() {
+ // Create floating hearts
+ const floatingHearts = document.querySelector('.floating-hearts');
+
+ function createHeart() {
+ const heart = document.createElement('div');
+ heart.classList.add('floating-heart');
+ heart.style.left = Math.random() * 100 + 'vw';
+ heart.style.animationDuration = Math.random() * 3 + 2 + 's';
+ heart.style.opacity = Math.random() * 0.5 + 0.5;
+ heart.innerHTML = '❤️';
+ heart.style.position = 'absolute';
+ heart.style.fontSize = Math.random() * 20 + 10 + 'px';
+ heart.style.animation = 'float-up ' + (Math.random() * 3 + 2) + 's linear forwards';
+
+ floatingHearts.appendChild(heart);
+
+ setTimeout(() => {
+ heart.remove();
+ }, 5000);
+ }
+
+ setInterval(createHeart, 300);
+});
+
+// Add floating heart animation to CSS
+const style = document.createElement('style');
+style.textContent = `
+ @keyframes float-up {
+ 0% {
+ transform: translateY(100vh) rotate(0deg);
+ }
+ 100% {
+ transform: translateY(-100vh) rotate(360deg);
+ }
+ }
+`;
+document.head.appendChild(style);
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..7f10ccc
--- /dev/null
+++ b/style.css
@@ -0,0 +1,155 @@
+:root {
+ --primary-color: #ff6b6b;
+ --secondary-color: #f9f1f1;
+ --text-color: #4a4a4a;
+ --accent-color: #ffd3d3;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ color: var(--text-color);
+ line-height: 1.6;
+ background: linear-gradient(135deg, #fff5f5 0%, #ffe9e9 100%);
+}
+
+header {
+ text-align: center;
+ padding: 2rem;
+ position: relative;
+}
+
+.heart-container {
+ height: 100px;
+ position: relative;
+ margin-bottom: 1rem;
+}
+
+.heart {
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 50px;
+ height: 50px;
+ background-color: var(--primary-color);
+ transform-origin: center;
+ animation: heartbeat 1.5s ease-in-out infinite;
+}
+
+.heart:before,
+.heart:after {
+ content: '';
+ position: absolute;
+ width: 50px;
+ height: 50px;
+ background-color: var(--primary-color);
+ border-radius: 50%;
+}
+
+.heart:before {
+ left: -25px;
+}
+
+.heart:after {
+ top: -25px;
+}
+
+h1 {
+ color: var(--primary-color);
+ font-size: 3rem;
+ margin-bottom: 1rem;
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
+}
+
+.hero {
+ text-align: center;
+ padding: 4rem 2rem;
+ position: relative;
+ overflow: hidden;
+}
+
+.floating-hearts {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ pointer-events: none;
+}
+
+.love-letter {
+ padding: 2rem;
+ display: flex;
+ justify-content: center;
+}
+
+.paper {
+ background: var(--secondary-color);
+ padding: 3rem;
+ max-width: 600px;
+ border-radius: 10px;
+ box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+ transform: rotate(-1deg);
+ transition: transform 0.3s ease;
+}
+
+.paper:hover {
+ transform: rotate(0deg) scale(1.02);
+}
+
+.signature {
+ text-align: right;
+ font-style: italic;
+ margin-top: 2rem;
+}
+
+.gallery {
+ padding: 4rem 2rem;
+ text-align: center;
+}
+
+.photo-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ padding: 2rem;
+}
+
+.photo-frame {
+ background: var(--secondary-color);
+ height: 250px;
+ border-radius: 10px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+ transition: transform 0.3s ease;
+}
+
+.photo-frame:hover {
+ transform: translateY(-10px);
+}
+
+footer {
+ text-align: center;
+ padding: 2rem;
+ background: var(--accent-color);
+ margin-top: 4rem;
+}
+
+@keyframes heartbeat {
+ 0% { transform: translateX(-50%) scale(1); }
+ 50% { transform: translateX(-50%) scale(1.1); }
+ 100% { transform: translateX(-50%) scale(1); }
+}
+
+@media (max-width: 768px) {
+ h1 { font-size: 2rem; }
+ .paper { padding: 1.5rem; }
+ .photo-grid { padding: 1rem; }
+}