Changes to snaplid.scroll.pub

root

22 days ago

Initial commit

body.html

Changed around line 1
+ 
+   
+     SnapLid
+     
+       
+     
+     
+       Features
+       Products
+       About
+       Contact
+     
+   
+ 
+ 
+ 
+   
+     
+       The Perfect Seal for Every Sip
+       Innovative spill-proof technology for hot and cold beverages
+       
+     
+   
+ 
+   
+     Why Choose SnapLid
+     
+       
+         🌡️
+         Temperature Control
+         Double-layer insulation keeps drinks at ideal temperature
+       
+       
+         💧
+         Leak-Proof
+         Advanced sealing technology prevents spills
+       
+       
+         ♻️
+         Eco-Friendly
+         Made from sustainable materials
+       
+     
+   
+ 
+   
+     Our Products
+     
+       
+         SnapLid Classic
+         Perfect for everyday use
+       
+       
+         SnapLid Pro
+         Enhanced insulation for professionals
+       
+       
+         SnapLid Ultra
+         Premium design with smart features
+       
+     
+   
+ 
+ 
+ 
+   
+     
+       Contact Us
+       info@snaplid.scroll.pub
+       1-800-SNAPLID
+     
+     
+       Follow Us
+       
+         Twitter
+         Instagram
+       
+     
+   
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://snaplid.scroll.pub
+ metaTags
+  description Premium spill-proof cup lids for hot and cold beverages
+  keywords cup lid, drink lid, coffee lid, beverage lid, spill proof lid
+ editButton /edit.html
+ title SnapLid - Premium Beverage Lid Solutions
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "msg_0198uXCJpUyLdZ7D6Rn7QTTU",
+   "type": "message",
+   "role": "assistant",
+   "model": "claude-3-5-sonnet-20241022",
+   "content": [
+     {
+       "type": "text",
+       "text": "Let me create a website for a premium cup lid product called \"SnapLid\" - a modern, secure lid solution for beverages.\n\n---domain---\nsnaplid.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://snaplid.scroll.pub\nmetaTags\n description Premium spill-proof cup lids for hot and cold beverages\n keywords cup lid, drink lid, coffee lid, beverage lid, spill proof lid\neditButton /edit.html\ntitle SnapLid - Premium Beverage Lid Solutions\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n\n  \n    SnapLid
\n    \n    \n      Features
\n      Products
\n      About
\n      Contact
\n    \n  \n\n\n\n  \n    \n      The Perfect Seal for Every Sip\n      Innovative spill-proof technology for hot and cold beverages
\n      \n    
\n  \n\n  \n    Why Choose SnapLid\n    \n      \n        🌡️
\n        Temperature Control\n        Double-layer insulation keeps drinks at ideal temperature
\n      
\n      \n        💧
\n        Leak-Proof\n        Advanced sealing technology prevents spills
\n      
\n      \n        ♻️
\n        Eco-Friendly\n        Made from sustainable materials
\n      
\n    
\n  \n\n  \n    Our Products\n    \n      \n        SnapLid Classic\n        Perfect for everyday use
\n      
\n      \n        SnapLid Pro\n        Enhanced insulation for professionals
\n      
\n      \n        SnapLid Ultra\n        Premium design with smart features
\n      
\n    
\n  \n\n\n\n  \n    \n      Contact Us\n      info@snaplid.scroll.pub
\n      1-800-SNAPLID
\n    
\n    \n      Follow Us\n      \n        Twitter\n        Instagram\n      
\n    
\n  
\n\n\n---style.css---\n:root {\n  --primary: #2A6B9B;\n  --secondary: #1B4965;\n  --accent: #62B6CB;\n  --background: #f5f5f5;\n  --text: #333;\n}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;\n  line-height: 1.6;\n  color: var(--text);\n  background: var(--background);\n}\n\n/* Navigation */\nnav {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1rem 5%;\n  background: white;\n  box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n}\n\n.logo {\n  font-size: 1.5rem;\n  font-weight: bold;\n  color: var(--primary);\n}\n\n.nav-links {\n  display: flex;\n  list-style: none;\n  gap: 2rem;\n}\n\n.nav-links a {\n  text-decoration: none;\n  color: var(--text);\n  transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n  color: var(--primary);\n}\n\n.mobile-menu {\n  display: none;\n}\n\n/* Hero Section */\n.hero {\n  height: 80vh;\n  background: linear-gradient(135deg, var(--primary), var(--secondary));\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: white;\n}\n\n.hero-content {\n  max-width: 800px;\n  padding: 2rem;\n}\n\n.hero h1 {\n  font-size: 3.5rem;\n  margin-bottom: 1rem;\n  line-height: 1.2;\n}\n\n.cta {\n  padding: 1rem 2rem;\n  font-size: 1.1rem;\n  background: var(--accent);\n  border: none;\n  border-radius: 30px;\n  color: white;\n  cursor: pointer;\n  transition: transform 0.3s ease;\n}\n\n.cta:hover {\n  transform: translateY(-2px);\n}\n\n/* Features Section */\n.features {\n  padding: 5rem 10%;\n}\n\n.feature-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 2rem;\n  margin-top: 3rem;\n}\n\n.feature-card {\n  background: white;\n  padding: 2rem;\n  border-radius: 10px;\n  text-align: center;\n  box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n  transition: transform 0.3s ease;\n}\n\n.feature-card:hover {\n  transform: translateY(-5px);\n}\n\n.icon {\n  font-size: 2.5rem;\n  margin-bottom: 1rem;\n}\n\n/* Products Section */\n.products {\n  padding: 5rem 10%;\n  background: #fff;\n}\n\n.product-slider {\n  display: flex;\n  gap: 2rem;\n  overflow-x: auto;\n  padding: 2rem 0;\n}\n\n.product-card {\n  min-width: 300px;\n  padding: 2rem;\n  background: var(--background);\n  border-radius: 10px;\n  box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\n/* Footer */\nfooter {\n  background: var(--secondary);\n  color: white;\n  padding: 3rem 10%;\n}\n\n.footer-content {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 2rem;\n}\n\n.social-links a {\n  color: white;\n  text-decoration: none;\n  margin-right: 1rem;\n}\n\n/* Mobile Responsiveness */\n@media (max-width: 768px) {\n  .mobile-menu {\n    display: block;\n    background: none;\n    border: none;\n    cursor: pointer;\n  }\n\n  .mobile-menu span {\n    display: block;\n    width: 25px;\n    height: 3px;\n    background: var(--text);\n    margin: 5px 0;\n    transition: 0.3s;\n  }\n\n  .nav-links {\n    display: none;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    background: white;\n    flex-direction: column;\n    padding: 1rem;\n    text-align: center;\n  }\n\n  .nav-links.active {\n    display: flex;\n  }\n\n  .hero h1 {\n    font-size: 2.5rem;\n  }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n  // Mobile menu toggle\n  const mobileMenu = document.querySelector('.mobile-menu');\n  const navLinks = document.querySelector('.nav-links');\n\n  mobileMenu.addEventListener('click', () => {\n    navLinks.classList.toggle('active');\n    \n    // Animate hamburger to X\n    const spans = mobileMenu.querySelectorAll('span');\n    spans.forEach(span => span.classList.toggle('active'));\n  });\n\n  // Smooth scroll for navigation links\n  document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n    anchor.addEventListener('click', function (e) {\n      e.preventDefault();\n      document.querySelector(this.getAttribute('href')).scrollIntoView({\n        behavior: 'smooth'\n      });\n    });\n  });\n\n  // Product slider animation\n  const productCards = document.querySelectorAll('.product-card');\n  productCards.forEach(card => {\n    card.addEventListener('mouseenter', () => {\n      card.style.transform = 'scale(1.05)';\n      card.style.transition = 'transform 0.3s ease';\n    });\n\n    card.addEventListener('mouseleave', () => {\n      card.style.transform = 'scale(1)';\n    });\n  });\n\n  // Intersection Observer for fade-in animations\n  const observer = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        entry.target.classList.add('fade-in');\n      }\n    });\n  }, { threshold: 0.1 });\n\n  document.querySelectorAll('.feature-card, .product-card').forEach((el) => {\n    observer.observe(el);\n  });\n});\n\n---end---"
+     }
+   ],
+   "stop_reason": "end_turn",
+   "stop_sequence": null,
+   "usage": {
+     "input_tokens": 279,
+     "cache_creation_input_tokens": 0,
+     "cache_read_input_tokens": 0,
+     "output_tokens": 2696
+   }
+ }

readme.scroll

Changed around line 1

+ # snaplid.scroll.pub

+ Website generated by Claude from prompt: Create an official website for a cup lid product.

script.js

Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+   // Mobile menu toggle
+   const mobileMenu = document.querySelector('.mobile-menu');
+   const navLinks = document.querySelector('.nav-links');
+ 
+   mobileMenu.addEventListener('click', () => {
+     navLinks.classList.toggle('active');
+ 
+     // Animate hamburger to X
+     const spans = mobileMenu.querySelectorAll('span');
+     spans.forEach(span => span.classList.toggle('active'));
+   });
+ 
+   // Smooth scroll for navigation links
+   document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+     anchor.addEventListener('click', function (e) {
+       e.preventDefault();
+       document.querySelector(this.getAttribute('href')).scrollIntoView({
+         behavior: 'smooth'
+       });
+     });
+   });
+ 
+   // Product slider animation
+   const productCards = document.querySelectorAll('.product-card');
+   productCards.forEach(card => {
+     card.addEventListener('mouseenter', () => {
+       card.style.transform = 'scale(1.05)';
+       card.style.transition = 'transform 0.3s ease';
+     });
+ 
+     card.addEventListener('mouseleave', () => {
+       card.style.transform = 'scale(1)';
+     });
+   });
+ 
+   // Intersection Observer for fade-in animations
+   const observer = new IntersectionObserver((entries) => {
+     entries.forEach(entry => {
+       if (entry.isIntersecting) {
+         entry.target.classList.add('fade-in');
+       }
+     });
+   }, { threshold: 0.1 });
+ 
+   document.querySelectorAll('.feature-card, .product-card').forEach((el) => {
+     observer.observe(el);
+   });
+ });

style.css

Changed around line 1
+ :root {
+   --primary: #2A6B9B;
+   --secondary: #1B4965;
+   --accent: #62B6CB;
+   --background: #f5f5f5;
+   --text: #333;
+ }
+ 
+ * {
+   margin: 0;
+   padding: 0;
+   box-sizing: border-box;
+ }
+ 
+ body {
+   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+   line-height: 1.6;
+   color: var(--text);
+   background: var(--background);
+ }
+ 
+ /* Navigation */
+ nav {
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+   padding: 1rem 5%;
+   background: white;
+   box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+ }
+ 
+ .logo {
+   font-size: 1.5rem;
+   font-weight: bold;
+   color: var(--primary);
+ }
+ 
+ .nav-links {
+   display: flex;
+   list-style: none;
+   gap: 2rem;
+ }
+ 
+ .nav-links a {
+   text-decoration: none;
+   color: var(--text);
+   transition: color 0.3s ease;
+ }
+ 
+ .nav-links a:hover {
+   color: var(--primary);
+ }
+ 
+ .mobile-menu {
+   display: none;
+ }
+ 
+ /* Hero Section */
+ .hero {
+   height: 80vh;
+   background: linear-gradient(135deg, var(--primary), var(--secondary));
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   text-align: center;
+   color: white;
+ }
+ 
+ .hero-content {
+   max-width: 800px;
+   padding: 2rem;
+ }
+ 
+ .hero h1 {
+   font-size: 3.5rem;
+   margin-bottom: 1rem;
+   line-height: 1.2;
+ }
+ 
+ .cta {
+   padding: 1rem 2rem;
+   font-size: 1.1rem;
+   background: var(--accent);
+   border: none;
+   border-radius: 30px;
+   color: white;
+   cursor: pointer;
+   transition: transform 0.3s ease;
+ }
+ 
+ .cta:hover {
+   transform: translateY(-2px);
+ }
+ 
+ /* Features Section */
+ .features {
+   padding: 5rem 10%;
+ }
+ 
+ .feature-grid {
+   display: grid;
+   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+   gap: 2rem;
+   margin-top: 3rem;
+ }
+ 
+ .feature-card {
+   background: white;
+   padding: 2rem;
+   border-radius: 10px;
+   text-align: center;
+   box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+   transition: transform 0.3s ease;
+ }
+ 
+ .feature-card:hover {
+   transform: translateY(-5px);
+ }
+ 
+ .icon {
+   font-size: 2.5rem;
+   margin-bottom: 1rem;
+ }
+ 
+ /* Products Section */
+ .products {
+   padding: 5rem 10%;
+   background: #fff;
+ }
+ 
+ .product-slider {
+   display: flex;
+   gap: 2rem;
+   overflow-x: auto;
+   padding: 2rem 0;
+ }
+ 
+ .product-card {
+   min-width: 300px;
+   padding: 2rem;
+   background: var(--background);
+   border-radius: 10px;
+   box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+ }
+ 
+ /* Footer */
+ footer {
+   background: var(--secondary);
+   color: white;
+   padding: 3rem 10%;
+ }
+ 
+ .footer-content {
+   display: grid;
+   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+   gap: 2rem;
+ }
+ 
+ .social-links a {
+   color: white;
+   text-decoration: none;
+   margin-right: 1rem;
+ }
+ 
+ /* Mobile Responsiveness */
+ @media (max-width: 768px) {
+   .mobile-menu {
+     display: block;
+     background: none;
+     border: none;
+     cursor: pointer;
+   }
+ 
+   .mobile-menu span {
+     display: block;
+     width: 25px;
+     height: 3px;
+     background: var(--text);
+     margin: 5px 0;
+     transition: 0.3s;
+   }
+ 
+   .nav-links {
+     display: none;
+     position: absolute;
+     top: 100%;
+     left: 0;
+     right: 0;
+     background: white;
+     flex-direction: column;
+     padding: 1rem;
+     text-align: center;
+   }
+ 
+   .nav-links.active {
+     display: flex;
+   }
+ 
+   .hero h1 {
+     font-size: 2.5rem;
+   }
+ }