commit 0834c91efcc6a6e449e0feb49bcc40cf536b40ca
Author: root <root@hub.scroll.pub>
Date: 2025-01-10 03:58:25 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..29b151d
--- /dev/null
+++ b/body.html
@@ -0,0 +1,61 @@
+<header>
+ <nav>
+ <ul>
+ <li><a href="#home" class="active">Home</a></li>
+ <li><a href="#gallery">Gallery</a></li>
+ <li><a href="#facts">Fun Facts</a></li>
+ </ul>
+ </nav>
+</header>
+
+<main>
+ <section id="home" class="hero">
+ <div class="frog-container">
+ <div class="frog">
+ <div class="eyes">
+ <div class="eye left"></div>
+ <div class="eye right"></div>
+ </div>
+ </div>
+ </div>
+ <h1>Welcome to the Pond</h1>
+ <p>Where every lily pad tells a story</p>
+ </section>
+
+ <section id="gallery" class="gallery">
+ <h2>Froggy Friends</h2>
+ <div class="frog-grid">
+ <div class="frog-card" tabindex="0">
+ <div class="frog-image green"></div>
+ <h3>Tree Frog</h3>
+ </div>
+ <div class="frog-card" tabindex="0">
+ <div class="frog-image red"></div>
+ <h3>Poison Dart</h3>
+ </div>
+ <div class="frog-card" tabindex="0">
+ <div class="frog-image blue"></div>
+ <h3>Blue Poison</h3>
+ </div>
+ </div>
+ </section>
+
+ <section id="facts" class="facts">
+ <h2>Fascinating Frog Facts</h2>
+ <div class="fact-container">
+ <div class="fact" tabindex="0">
+ <p>A group of frogs is called an army</p>
+ </div>
+ <div class="fact" tabindex="0">
+ <p>Some frogs can jump 20 times their body length</p>
+ </div>
+ <div class="fact" tabindex="0">
+ <p>Frogs don't drink water, they absorb it through their skin</p>
+ </div>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <p>Made with 💚 for frog lovers everywhere</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..6ee8ec6
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,13 @@
+buildHtml
+baseUrl https://ribbit.scroll.pub
+metaTags
+ description "Discover the enchanting world of frogs through beautiful interactive animations and fun facts"
+ keywords "frogs, amphibians, nature, interactive, animation"
+ author "Frog Enthusiast"
+ ogTitle "Ribbit - The Magical World of Frogs"
+ ogDescription "Hop into an enchanting experience with our interactive frog sanctuary"
+editButton /edit.html
+title Ribbit - The Magical World of Frogs
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..8441ecb
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01QBrgWyMsQX63hfQVMxg4z7",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a fun, whimsical frog-themed website with beautiful animations and interactions.\n\n---domain---\nribbit.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://ribbit.scroll.pub\nmetaTags\n description \"Discover the enchanting world of frogs through beautiful interactive animations and fun facts\"\n keywords \"frogs, amphibians, nature, interactive, animation\"\n author \"Frog Enthusiast\"\n ogTitle \"Ribbit - The Magical World of Frogs\"\n ogDescription \"Hop into an enchanting experience with our interactive frog sanctuary\"\neditButton /edit.html\ntitle Ribbit - The Magical World of Frogs\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <ul>\n <li><a href=\"#home\" class=\"active\">Home</a></li>\n <li><a href=\"#gallery\">Gallery</a></li>\n <li><a href=\"#facts\">Fun Facts</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section id=\"home\" class=\"hero\">\n <div class=\"frog-container\">\n <div class=\"frog\">\n <div class=\"eyes\">\n <div class=\"eye left\"></div>\n <div class=\"eye right\"></div>\n </div>\n </div>\n </div>\n <h1>Welcome to the Pond</h1>\n <p>Where every lily pad tells a story</p>\n </section>\n\n <section id=\"gallery\" class=\"gallery\">\n <h2>Froggy Friends</h2>\n <div class=\"frog-grid\">\n <div class=\"frog-card\" tabindex=\"0\">\n <div class=\"frog-image green\"></div>\n <h3>Tree Frog</h3>\n </div>\n <div class=\"frog-card\" tabindex=\"0\">\n <div class=\"frog-image red\"></div>\n <h3>Poison Dart</h3>\n </div>\n <div class=\"frog-card\" tabindex=\"0\">\n <div class=\"frog-image blue\"></div>\n <h3>Blue Poison</h3>\n </div>\n </div>\n </section>\n\n <section id=\"facts\" class=\"facts\">\n <h2>Fascinating Frog Facts</h2>\n <div class=\"fact-container\">\n <div class=\"fact\" tabindex=\"0\">\n <p>A group of frogs is called an army</p>\n </div>\n <div class=\"fact\" tabindex=\"0\">\n <p>Some frogs can jump 20 times their body length</p>\n </div>\n <div class=\"fact\" tabindex=\"0\">\n <p>Frogs don't drink water, they absorb it through their skin</p>\n </div>\n </div>\n </section>\n</main>\n\n<footer>\n <p>Made with 💚 for frog lovers everywhere</p>\n</footer>\n\n---style.css---\n:root {\n --primary: #2ecc71;\n --secondary: #27ae60;\n --background: #f0fff4;\n --text: #2c3e50;\n --accent: #e74c3c;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: system-ui, -apple-system, sans-serif;\n background: var(--background);\n color: var(--text);\n line-height: 1.6;\n}\n\nheader {\n position: fixed;\n width: 100%;\n background: rgba(255, 255, 255, 0.9);\n backdrop-filter: blur(10px);\n z-index: 100;\n}\n\nnav ul {\n display: flex;\n justify-content: center;\n list-style: none;\n padding: 1rem;\n}\n\nnav a {\n color: var(--text);\n text-decoration: none;\n padding: 0.5rem 1rem;\n margin: 0 1rem;\n border-radius: 20px;\n transition: all 0.3s ease;\n}\n\nnav a:hover, nav a.active {\n background: var(--primary);\n color: white;\n}\n\n.hero {\n height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: 2rem;\n}\n\n.frog-container {\n width: 200px;\n height: 200px;\n position: relative;\n margin-bottom: 2rem;\n}\n\n.frog {\n width: 100%;\n height: 100%;\n background: var(--primary);\n border-radius: 50%;\n position: relative;\n animation: bounce 2s infinite ease-in-out;\n}\n\n.eyes {\n position: absolute;\n top: 30%;\n width: 100%;\n display: flex;\n justify-content: space-around;\n}\n\n.eye {\n width: 30px;\n height: 30px;\n background: white;\n border-radius: 50%;\n position: relative;\n}\n\n.eye::after {\n content: '';\n position: absolute;\n width: 15px;\n height: 15px;\n background: black;\n border-radius: 50%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.gallery {\n padding: 4rem 2rem;\n}\n\n.frog-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.frog-card {\n background: white;\n border-radius: 15px;\n padding: 1rem;\n text-align: center;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n transition: transform 0.3s ease;\n cursor: pointer;\n}\n\n.frog-card:hover {\n transform: translateY(-10px);\n}\n\n.frog-image {\n height: 200px;\n border-radius: 10px;\n margin-bottom: 1rem;\n}\n\n.frog-image.green { background: var(--primary); }\n.frog-image.red { background: var(--accent); }\n.frog-image.blue { background: #3498db; }\n\n.facts {\n padding: 4rem 2rem;\n background: white;\n}\n\n.fact-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.fact {\n background: var(--background);\n padding: 2rem;\n border-radius: 15px;\n text-align: center;\n transition: transform 0.3s ease;\n}\n\n.fact:hover {\n transform: scale(1.05);\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n background: var(--primary);\n color: white;\n}\n\n@keyframes bounce {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-20px); }\n}\n\n@media (max-width: 768px) {\n nav ul {\n flex-direction: column;\n align-items: center;\n }\n \n nav a {\n margin: 0.5rem 0;\n }\n \n .hero {\n padding-top: 6rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Smooth scrolling for navigation\n document.querySelectorAll('nav a').forEach(anchor => {\n anchor.addEventListener('click', function(e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n window.scrollTo({\n top: target.offsetTop - 60,\n behavior: 'smooth'\n });\n \n // Update active state\n document.querySelectorAll('nav a').forEach(a => a.classList.remove('active'));\n this.classList.add('active');\n });\n });\n\n // Interactive eyes that follow cursor\n const eyes = document.querySelectorAll('.eye');\n document.addEventListener('mousemove', (e) => {\n eyes.forEach(eye => {\n const rect = eye.getBoundingClientRect();\n const x = rect.left + rect.width / 2;\n const y = rect.top + rect.height / 2;\n const rad = Math.atan2(e.pageX - x, e.pageY - y);\n const rot = (rad * (180 / Math.PI) * -1) + 180;\n eye.style.transform = `rotate(${rot}deg)`;\n });\n });\n\n // Intersection Observer for scroll animations\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.opacity = '1';\n entry.target.style.transform = 'translateY(0)';\n }\n });\n });\n\n document.querySelectorAll('.frog-card, .fact').forEach(el => {\n el.style.opacity = '0';\n el.style.transform = 'translateY(20px)';\n el.style.transition = 'all 0.6s ease-out';\n observer.observe(el);\n });\n});\n\n---end---\n\nThis website features:\n1. A bouncing frog mascot with eyes that follow the cursor\n2. Smooth scroll navigation\n3. Responsive grid layouts\n4. Beautiful hover animations\n5. Intersection Observer for scroll animations\n6. Accessible keyboard navigation\n7. Clean semantic HTML structure\n8. Modern CSS with variables and transforms\n9. Optimized for mobile devices\n10. Engaging visual hierarchy and micro-interactions\n\nThe color scheme is nature-inspired, and the design maintains a professional yet playful aesthetic that's perfect for the subject matter."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 275,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2617
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..a9ba756
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,3 @@
+# ribbit.scroll.pub
+
+website generated by Claude from prompt: nice froggy site
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..991f09b
--- /dev/null
+++ b/script.js
@@ -0,0 +1,47 @@
+document.addEventListener('DOMContentLoaded', () => {
+ // Smooth scrolling for navigation
+ document.querySelectorAll('nav a').forEach(anchor => {
+ anchor.addEventListener('click', function(e) {
+ e.preventDefault();
+ const target = document.querySelector(this.getAttribute('href'));
+ window.scrollTo({
+ top: target.offsetTop - 60,
+ behavior: 'smooth'
+ });
+
+ // Update active state
+ document.querySelectorAll('nav a').forEach(a => a.classList.remove('active'));
+ this.classList.add('active');
+ });
+ });
+
+ // Interactive eyes that follow cursor
+ const eyes = document.querySelectorAll('.eye');
+ document.addEventListener('mousemove', (e) => {
+ eyes.forEach(eye => {
+ const rect = eye.getBoundingClientRect();
+ const x = rect.left + rect.width / 2;
+ const y = rect.top + rect.height / 2;
+ const rad = Math.atan2(e.pageX - x, e.pageY - y);
+ const rot = (rad * (180 / Math.PI) * -1) + 180;
+ eye.style.transform = `rotate(${rot}deg)`;
+ });
+ });
+
+ // Intersection Observer for scroll animations
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.style.opacity = '1';
+ entry.target.style.transform = 'translateY(0)';
+ }
+ });
+ });
+
+ document.querySelectorAll('.frog-card, .fact').forEach(el => {
+ el.style.opacity = '0';
+ el.style.transform = 'translateY(20px)';
+ el.style.transition = 'all 0.6s ease-out';
+ observer.observe(el);
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..74f5756
--- /dev/null
+++ b/style.css
@@ -0,0 +1,189 @@
+:root {
+ --primary: #2ecc71;
+ --secondary: #27ae60;
+ --background: #f0fff4;
+ --text: #2c3e50;
+ --accent: #e74c3c;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: system-ui, -apple-system, sans-serif;
+ background: var(--background);
+ color: var(--text);
+ line-height: 1.6;
+}
+
+header {
+ position: fixed;
+ width: 100%;
+ background: rgba(255, 255, 255, 0.9);
+ backdrop-filter: blur(10px);
+ z-index: 100;
+}
+
+nav ul {
+ display: flex;
+ justify-content: center;
+ list-style: none;
+ padding: 1rem;
+}
+
+nav a {
+ color: var(--text);
+ text-decoration: none;
+ padding: 0.5rem 1rem;
+ margin: 0 1rem;
+ border-radius: 20px;
+ transition: all 0.3s ease;
+}
+
+nav a:hover, nav a.active {
+ background: var(--primary);
+ color: white;
+}
+
+.hero {
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ padding: 2rem;
+}
+
+.frog-container {
+ width: 200px;
+ height: 200px;
+ position: relative;
+ margin-bottom: 2rem;
+}
+
+.frog {
+ width: 100%;
+ height: 100%;
+ background: var(--primary);
+ border-radius: 50%;
+ position: relative;
+ animation: bounce 2s infinite ease-in-out;
+}
+
+.eyes {
+ position: absolute;
+ top: 30%;
+ width: 100%;
+ display: flex;
+ justify-content: space-around;
+}
+
+.eye {
+ width: 30px;
+ height: 30px;
+ background: white;
+ border-radius: 50%;
+ position: relative;
+}
+
+.eye::after {
+ content: '';
+ position: absolute;
+ width: 15px;
+ height: 15px;
+ background: black;
+ border-radius: 50%;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.gallery {
+ padding: 4rem 2rem;
+}
+
+.frog-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+.frog-card {
+ background: white;
+ border-radius: 15px;
+ padding: 1rem;
+ text-align: center;
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+ transition: transform 0.3s ease;
+ cursor: pointer;
+}
+
+.frog-card:hover {
+ transform: translateY(-10px);
+}
+
+.frog-image {
+ height: 200px;
+ border-radius: 10px;
+ margin-bottom: 1rem;
+}
+
+.frog-image.green { background: var(--primary); }
+.frog-image.red { background: var(--accent); }
+.frog-image.blue { background: #3498db; }
+
+.facts {
+ padding: 4rem 2rem;
+ background: white;
+}
+
+.fact-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+.fact {
+ background: var(--background);
+ padding: 2rem;
+ border-radius: 15px;
+ text-align: center;
+ transition: transform 0.3s ease;
+}
+
+.fact:hover {
+ transform: scale(1.05);
+}
+
+footer {
+ text-align: center;
+ padding: 2rem;
+ background: var(--primary);
+ color: white;
+}
+
+@keyframes bounce {
+ 0%, 100% { transform: translateY(0); }
+ 50% { transform: translateY(-20px); }
+}
+
+@media (max-width: 768px) {
+ nav ul {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ nav a {
+ margin: 0.5rem 0;
+ }
+
+ .hero {
+ padding-top: 6rem;
+ }
+}