Changes to ribbit.scroll.pub

root

12 days ago

Initial commit

body.html

Changed around line 1
+ 
+   
+     
+       Home
+       Gallery
+       Fun Facts
+     
+   
+ 
+ 
+ 
+   
+     
+       
+         
+           
+           
+         
+       
+     
+     Welcome to the Pond
+     Where every lily pad tells a story
+   
+ 
+   
+     Froggy Friends
+     
+       
+         
+         Tree Frog
+       
+       
+         
+         Poison Dart
+       
+       
+         
+         Blue Poison
+       
+     
+   
+ 
+   
+     Fascinating Frog Facts
+     
+       
+         A group of frogs is called an army
+       
+       
+         Some frogs can jump 20 times their body length
+       
+       
+         Frogs don't drink water, they absorb it through their skin
+       
+     
+   
+ 
+ 
+ 
+   Made with 💚 for frog lovers everywhere
+ 

index.scroll

Changed around line 1
+ 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

prompt.json

Changed around line 1
+ {
+   "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\n  \n    \n      Home
\n      Gallery
\n      Fun Facts
\n    \n  \n\n\n\n  \n    \n      \n        \n          
\n          
\n        
\n      
\n    
\n    Welcome to the Pond\n    Where every lily pad tells a story
\n  \n\n  \n    Froggy Friends\n    \n      \n        
\n        Tree Frog\n      
\n      \n        
\n        Poison Dart\n      
\n      \n        
\n        Blue Poison\n      
\n    
\n  \n\n  \n    Fascinating Frog Facts\n    \n      \n        A group of frogs is called an army
\n      
\n      \n        Some frogs can jump 20 times their body length
\n      
\n      \n        Frogs don't drink water, they absorb it through their skin
\n      
\n    
\n  \n\n\n\n  Made with 💚 for frog lovers everywhere
\n\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
+   }
+ }

readme.scroll

Changed around line 1

+ # ribbit.scroll.pub

+ website generated by Claude from prompt: nice froggy site

script.js

Changed around line 1
+ 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);
+   });
+ });

style.css

Changed around line 1
+ :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;
+   }
+ }