commit cc88dcc0605a735145ecd7fc65a7722c502979d3
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 04:48:32 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..fa9c590
--- /dev/null
+++ b/body.html
@@ -0,0 +1,58 @@
+<header>
+ <div class="sparkle-container">
+ <h1>Baby Omomia's Happy Place</h1>
+ <div class="sparkles"></div>
+ </div>
+</header>
+
+<main>
+ <section class="hero">
+ <div class="floating-clouds">
+ <div class="cloud"></div>
+ <div class="cloud"></div>
+ <div class="cloud"></div>
+ </div>
+ <div class="welcome-message">
+ <h2>Welcome to Our Little Corner of Joy!</h2>
+ <p>Celebrating every precious moment with our one-year-old sunshine ✨</p>
+ </div>
+ </section>
+
+ <section class="memory-wall">
+ <h2>Our Happy Moments</h2>
+ <div class="photo-frames">
+ <div class="frame" aria-label="Photo frame 1">
+ <div class="polaroid">
+ <div class="photo-placeholder">
+ <span>First Smile</span>
+ </div>
+ </div>
+ </div>
+ <div class="frame" aria-label="Photo frame 2">
+ <div class="polaroid">
+ <div class="photo-placeholder">
+ <span>First Steps</span>
+ </div>
+ </div>
+ </div>
+ <div class="frame" aria-label="Photo frame 3">
+ <div class="polaroid">
+ <div class="photo-placeholder">
+ <span>First Word</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <section class="interactive-area">
+ <h2>Play With Me!</h2>
+ <div class="bubble-container">
+ <button id="bubbleButton" aria-label="Make bubbles">Make Bubbles!</button>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <p>Made with love for Baby Omomia</p>
+</footer>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..845b0bf
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://babyomomia.scroll.pub
+metaTags
+editButton /edit.html
+title Baby Omomia's Happy Place
+style.css
+body.html
+script.js
\ No newline at end of file
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..871febd
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01TBi2V11oJDwTidg3XW8MyC",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll help create a cheerful website for Baby Omomia. For the domain, I suggest:\n\n---domain---\nbabyomomia.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://babyomomia.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Baby Omomia's Happy Place\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <div class=\"sparkle-container\">\n <h1>Baby Omomia's Happy Place</h1>\n <div class=\"sparkles\"></div>\n </div>\n</header>\n\n<main>\n <section class=\"hero\">\n <div class=\"floating-clouds\">\n <div class=\"cloud\"></div>\n <div class=\"cloud\"></div>\n <div class=\"cloud\"></div>\n </div>\n <div class=\"welcome-message\">\n <h2>Welcome to Our Little Corner of Joy!</h2>\n <p>Celebrating every precious moment with our one-year-old sunshine ✨</p>\n </div>\n </section>\n\n <section class=\"memory-wall\">\n <h2>Our Happy Moments</h2>\n <div class=\"photo-frames\">\n <div class=\"frame\" aria-label=\"Photo frame 1\">\n <div class=\"polaroid\">\n <div class=\"photo-placeholder\">\n <span>First Smile</span>\n </div>\n </div>\n </div>\n <div class=\"frame\" aria-label=\"Photo frame 2\">\n <div class=\"polaroid\">\n <div class=\"photo-placeholder\">\n <span>First Steps</span>\n </div>\n </div>\n </div>\n <div class=\"frame\" aria-label=\"Photo frame 3\">\n <div class=\"polaroid\">\n <div class=\"photo-placeholder\">\n <span>First Word</span>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"interactive-area\">\n <h2>Play With Me!</h2>\n <div class=\"bubble-container\">\n <button id=\"bubbleButton\" aria-label=\"Make bubbles\">Make Bubbles!</button>\n </div>\n </section>\n</main>\n\n<footer>\n <p>Made with love for Baby Omomia</p>\n</footer>\n---style.css---\n:root {\n --primary-color: #ff9ecd;\n --secondary-color: #87ceeb;\n --accent-color: #ffd700;\n --text-color: #4a4a4a;\n --background-color: #fff5f8;\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 background-color: var(--background-color);\n color: var(--text-color);\n line-height: 1.6;\n}\n\nheader {\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n padding: 2rem;\n text-align: center;\n}\n\nh1 {\n color: white;\n font-size: 2.5rem;\n text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);\n animation: float 3s ease-in-out infinite;\n}\n\n.sparkle-container {\n position: relative;\n}\n\n.sparkles {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n\n.cloud {\n width: 100px;\n height: 40px;\n background: white;\n border-radius: 20px;\n position: absolute;\n animation: float-cloud 15s linear infinite;\n opacity: 0.8;\n}\n\n.cloud:nth-child(1) { top: 20%; left: -100px; animation-delay: 0s; }\n.cloud:nth-child(2) { top: 40%; left: -100px; animation-delay: 5s; }\n.cloud:nth-child(3) { top: 60%; left: -100px; animation-delay: 10s; }\n\n.welcome-message {\n text-align: center;\n padding: 3rem 1rem;\n}\n\n.memory-wall {\n padding: 3rem 1rem;\n}\n\n.photo-frames {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n padding: 2rem;\n}\n\n.polaroid {\n background: white;\n padding: 1rem;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n transform: rotate(var(--rotation));\n transition: transform 0.3s ease;\n}\n\n.polaroid:hover {\n transform: scale(1.05) rotate(var(--rotation));\n}\n\n.photo-placeholder {\n background: var(--secondary-color);\n height: 200px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 1.2rem;\n}\n\n.interactive-area {\n text-align: center;\n padding: 3rem 1rem;\n}\n\n#bubbleButton {\n background: var(--accent-color);\n border: none;\n padding: 1rem 2rem;\n border-radius: 25px;\n font-size: 1.2rem;\n cursor: pointer;\n transition: transform 0.3s ease;\n}\n\n#bubbleButton:hover {\n transform: scale(1.1);\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));\n color: white;\n}\n\n@keyframes float {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-10px); }\n}\n\n@keyframes float-cloud {\n from { transform: translateX(-100px); }\n to { transform: translateX(calc(100vw + 100px)); }\n}\n\n@media (max-width: 768px) {\n h1 { font-size: 2rem; }\n .photo-frames { grid-template-columns: 1fr; }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Sparkle effect\n function createSparkle() {\n const sparkle = document.createElement('div');\n sparkle.className = 'sparkle';\n sparkle.style.left = Math.random() * 100 + '%';\n sparkle.style.top = Math.random() * 100 + '%';\n sparkle.style.animationDuration = Math.random() * 1 + 0.5 + 's';\n document.querySelector('.sparkles').appendChild(sparkle);\n setTimeout(() => sparkle.remove(), 1000);\n }\n\n setInterval(createSparkle, 300);\n\n // Bubble effect\n const bubbleButton = document.getElementById('bubbleButton');\n \n function createBubble(e) {\n const bubble = document.createElement('div');\n bubble.className = 'bubble';\n bubble.style.left = e.clientX + 'px';\n bubble.style.top = e.clientY + 'px';\n document.body.appendChild(bubble);\n \n bubble.addEventListener('animationend', () => {\n bubble.remove();\n });\n }\n\n bubbleButton.addEventListener('click', (e) => {\n for(let i = 0; i < 10; i++) {\n setTimeout(() => createBubble(e), i * 100);\n }\n });\n\n // Random rotation for polaroids\n document.querySelectorAll('.polaroid').forEach(polaroid => {\n polaroid.style.setProperty('--rotation', `${Math.random() * 6 - 3}deg`);\n });\n});\n---end---\n\nThis creates a delightful, interactive website with:\n- Floating animations\n- Sparkle effects\n- Interactive bubble generator\n- Cloud animations\n- Polaroid-style photo frames\n- Pastel color scheme\n- Fully responsive design\n- Accessible interactive elements\n- Smooth animations and transitions\n\nThe site features a playful but clean design that's perfect for a baby's website while maintaining professional quality code standards. The animations and interactivity create an engaging experience without being overwhelming."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 299,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2205
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..9945d85
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# babyomomia.scroll.pub
+Website generated by Claude from prompt: Make a happy website for my baby, my new year old daughter, her name is Baby Omomia, this should be our happy place
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..ef910ed
--- /dev/null
+++ b/script.js
@@ -0,0 +1,40 @@
+document.addEventListener('DOMContentLoaded', () => {
+ // Sparkle effect
+ function createSparkle() {
+ const sparkle = document.createElement('div');
+ sparkle.className = 'sparkle';
+ sparkle.style.left = Math.random() * 100 + '%';
+ sparkle.style.top = Math.random() * 100 + '%';
+ sparkle.style.animationDuration = Math.random() * 1 + 0.5 + 's';
+ document.querySelector('.sparkles').appendChild(sparkle);
+ setTimeout(() => sparkle.remove(), 1000);
+ }
+
+ setInterval(createSparkle, 300);
+
+ // Bubble effect
+ const bubbleButton = document.getElementById('bubbleButton');
+
+ function createBubble(e) {
+ const bubble = document.createElement('div');
+ bubble.className = 'bubble';
+ bubble.style.left = e.clientX + 'px';
+ bubble.style.top = e.clientY + 'px';
+ document.body.appendChild(bubble);
+
+ bubble.addEventListener('animationend', () => {
+ bubble.remove();
+ });
+ }
+
+ bubbleButton.addEventListener('click', (e) => {
+ for(let i = 0; i < 10; i++) {
+ setTimeout(() => createBubble(e), i * 100);
+ }
+ });
+
+ // Random rotation for polaroids
+ document.querySelectorAll('.polaroid').forEach(polaroid => {
+ polaroid.style.setProperty('--rotation', `${Math.random() * 6 - 3}deg`);
+ });
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..6bfcb00
--- /dev/null
+++ b/style.css
@@ -0,0 +1,139 @@
+:root {
+ --primary-color: #ff9ecd;
+ --secondary-color: #87ceeb;
+ --accent-color: #ffd700;
+ --text-color: #4a4a4a;
+ --background-color: #fff5f8;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ background-color: var(--background-color);
+ color: var(--text-color);
+ line-height: 1.6;
+}
+
+header {
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ padding: 2rem;
+ text-align: center;
+}
+
+h1 {
+ color: white;
+ font-size: 2.5rem;
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+ animation: float 3s ease-in-out infinite;
+}
+
+.sparkle-container {
+ position: relative;
+}
+
+.sparkles {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+}
+
+.cloud {
+ width: 100px;
+ height: 40px;
+ background: white;
+ border-radius: 20px;
+ position: absolute;
+ animation: float-cloud 15s linear infinite;
+ opacity: 0.8;
+}
+
+.cloud:nth-child(1) { top: 20%; left: -100px; animation-delay: 0s; }
+.cloud:nth-child(2) { top: 40%; left: -100px; animation-delay: 5s; }
+.cloud:nth-child(3) { top: 60%; left: -100px; animation-delay: 10s; }
+
+.welcome-message {
+ text-align: center;
+ padding: 3rem 1rem;
+}
+
+.memory-wall {
+ padding: 3rem 1rem;
+}
+
+.photo-frames {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ padding: 2rem;
+}
+
+.polaroid {
+ background: white;
+ padding: 1rem;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ transform: rotate(var(--rotation));
+ transition: transform 0.3s ease;
+}
+
+.polaroid:hover {
+ transform: scale(1.05) rotate(var(--rotation));
+}
+
+.photo-placeholder {
+ background: var(--secondary-color);
+ height: 200px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: white;
+ font-size: 1.2rem;
+}
+
+.interactive-area {
+ text-align: center;
+ padding: 3rem 1rem;
+}
+
+#bubbleButton {
+ background: var(--accent-color);
+ border: none;
+ padding: 1rem 2rem;
+ border-radius: 25px;
+ font-size: 1.2rem;
+ cursor: pointer;
+ transition: transform 0.3s ease;
+}
+
+#bubbleButton:hover {
+ transform: scale(1.1);
+}
+
+footer {
+ text-align: center;
+ padding: 2rem;
+ background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
+ color: white;
+}
+
+@keyframes float {
+ 0%, 100% { transform: translateY(0); }
+ 50% { transform: translateY(-10px); }
+}
+
+@keyframes float-cloud {
+ from { transform: translateX(-100px); }
+ to { transform: translateX(calc(100vw + 100px)); }
+}
+
+@media (max-width: 768px) {
+ h1 { font-size: 2rem; }
+ .photo-frames { grid-template-columns: 1fr; }
+}
\ No newline at end of file