Changes to foodcount.scroll.pub

ffff:12.186.22.250

8 days ago

updated index.scroll

index.scroll

Changed around line 5: editButton /edit.html

+ counters.scroll

ffff:12.186.22.250

8 days ago

updated counters.scroll

counters.scroll

Changed around line 1
+ # Since you loaded this page...
+ font Tahoma
+ 
+ thinColumns 3
+ 
+ ## Fruits
+ 
+ counter 5.3 Apples Eaten
+  https://www.worldatlas.com/articles/the-most-popular-fruits-in-the-world.html
+ 
+ counter 4.2 Bananas Eaten
+  https://www.worldatlas.com/articles/the-most-popular-fruits-in-the-world.html
+ 
+ counter 3.1 Oranges Eaten
+  https://www.worldatlas.com/articles/the-most-popular-fruits-in-the-world.html
+ 
+ counter 2.8 Grapes Eaten
+  https://www.worldatlas.com/articles/the-most-popular-fruits-in-the-world.html
+ 
+ counter 2.5 Mangoes Eaten
+  https://www.worldatlas.com/articles/the-most-popular-fruits-in-the-world.html
+ 
+ counter 2.0 Pineapples Eaten
+  https://www.worldatlas.com/articles/the-most-popular-fruits-in-the-world.html
+ 
+ counter 1.9 Strawberries Eaten
+  https://www.worldatlas.com/articles/the-most-popular-fruits-in-the-world.html
+ 
+ ## Vegetables
+ 
+ counter 6.1 Potatoes Eaten
+  https://www.statista.com/statistics/279553/vegetable-consumption-worldwide-by-type/
+ 
+ counter 4.7 Tomatoes Eaten
+  https://www.statista.com/statistics/279553/vegetable-consumption-worldwide-by-type/
+ 
+ counter 3.6 Onions Eaten
+  https://www.statista.com/statistics/279553/vegetable-consumption-worldwide-by-type/
+ 
+ counter 2.9 Carrots Eaten
+  https://www.statista.com/statistics/279553/vegetable-consumption-worldwide-by-type/
+ 
+ counter 2.4 Bell Peppers Eaten
+  https://www.statista.com/statistics/279553/vegetable-consumption-worldwide-by-type/
+ 
+ counter 2.1 Broccoli Eaten
+  https://www.statista.com/statistics/279553/vegetable-consumption-worldwide-by-type/
+ 
+ counter 1.8 Spinach Eaten
+  https://www.statista.com/statistics/279553/vegetable-consumption-worldwide-by-type/
+ 
+ ## Meats
+ 
+ counter 8.5 Chicken Eaten
+  https://ourworldindata.org/meat-production
+ 
+ counter 4.6 Pork Eaten
+  https://ourworldindata.org/meat-production
+ 
+ counter 2.3 Beef Eaten
+  https://ourworldindata.org/meat-production
+ 
+ counter 1.5 Lamb Eaten
+  https://ourworldindata.org/meat-production
+ 
+ counter 0.9 Duck Eaten
+  https://ourworldindata.org/meat-production
+ 
+ counter 0.7 Turkey Eaten
+  https://ourworldindata.org/meat-production
+ 
+ counter 0.3 Goat Eaten
+  https://ourworldindata.org/meat-production
+ 
+ ## Dairy Products
+ 
+ counter 4.3 Milk Drunk
+  https://www.statista.com/statistics/281324/global-dairy-consumption-per-capita/
+ 
+ counter 2.1 Cheese Eaten
+  https://www.statista.com/statistics/281324/global-dairy-consumption-per-capita/
+ 
+ counter 1.9 Yogurt Eaten
+  https://www.statista.com/statistics/281324/global-dairy-consumption-per-capita/
+ 
+ counter 1.2 Butter Consumed
+  https://www.statista.com/statistics/281324/global-dairy-consumption-per-capita/
+ 
+ counter 1.0 Ice Cream Eaten
+  https://www.statista.com/statistics/281324/global-dairy-consumption-per-capita/
+ 
+ counter 0.8 Cream Consumed
+  https://www.statista.com/statistics/281324/global-dairy-consumption-per-capita/
+ 
+ counter 0.5 Whey Consumed
+  https://www.statista.com/statistics/281324/global-dairy-consumption-per-capita/
+ 
+ ## Fish & Shellfish
+ 
+ counter 3.2 Salmon Eaten
+  https://www.fisheries.noaa.gov/
+ 
+ counter 2.9 Tuna Eaten
+  https://www.fisheries.noaa.gov/
+ 
+ counter 2.5 Shrimp Eaten
+  https://www.fisheries.noaa.gov/
+ 
+ counter 1.7 Cod Eaten
+  https://www.fisheries.noaa.gov/
+ 
+ counter 1.4 Crab Eaten
+  https://www.fisheries.noaa.gov/
+ 
+ counter 1.0 Lobster Eaten
+  https://www.fisheries.noaa.gov/
+ 
+ counter 0.8 Sardines Eaten
+  https://www.fisheries.noaa.gov/
+ 
+ ## Nuts
+ 
+ counter 2.3 Almonds Eaten
+  https://nuts.com/
+ 
+ counter 1.7 Walnuts Eaten
+  https://nuts.com/
+ 
+ counter 1.5 Cashews Eaten
+  https://nuts.com/
+ 
+ counter 1.2 Pistachios Eaten
+  https://nuts.com/
+ 
+ counter 1.0 Peanuts Eaten
+  https://nuts.com/
+ 
+ counter 0.8 Hazelnuts Eaten
+  https://nuts.com/
+ 
+ counter 0.6 Pecans Eaten
+  https://nuts.com/

ffff:12.186.22.250

8 days ago

created counters.scroll

counters.scroll

root

8 days ago

Initial commit

body.html

Changed around line 1
+ 
+   
+     FoodCount
+     
+       Statistics
+       Cuisines
+       About
+     
+   
+ 
+ 
+ 
+   
+     Global Food Statistics
+     Discover the numbers behind world cuisines
+   
+ 
+   
+     
+       0
+       Countries
+     
+     
+       0
+       Unique Dishes
+     
+     
+       0
+       Restaurants
+     
+     
+       0
+       Ingredients
+     
+   
+ 
+   
+     Popular Cuisines
+     
+       
+         Italian
+         
+       
+       
+         Japanese
+         
+       
+       
+         Indian
+         
+       
+     
+   
+ 
+ 
+ 
+   Made with passion by FoodCount
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://foodcount.scroll.pub
+ metaTags
+ editButton /edit.html
+ title World Food Counters | Global Cuisine Statistics
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "msg_01CGbwEbAbaXjAFD461mLsdS",
+   "type": "message",
+   "role": "assistant",
+   "model": "claude-3-5-sonnet-20241022",
+   "content": [
+     {
+       "type": "text",
+       "text": "I'll create a beautiful food counter website showcasing world cuisines with animated counters and statistics.\n\n---domain---\nfoodcount.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://foodcount.scroll.pub\nmetaTags\neditButton /edit.html\ntitle World Food Counters | Global Cuisine Statistics\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n\n  \n    FoodCount
\n    \n      Statistics\n      Cuisines\n      About\n    
\n  \n\n\n\n  \n    Global Food Statistics\n    Discover the numbers behind world cuisines
\n  \n\n  \n    \n      0
\n      Countries\n    
\n    \n      0
\n      Unique Dishes\n    
\n    \n      0
\n      Restaurants\n    
\n    \n      0
\n      Ingredients\n    
\n  \n\n  \n    Popular Cuisines\n    \n      \n        Italian\n        
\n      
\n      \n        Japanese\n        
\n      
\n      \n        Indian\n        
\n      
\n    
\n  \n\n\n\n  Made with passion by FoodCount
\n\n\n---style.css---\n:root {\n  --primary: #ff6b6b;\n  --secondary: #4ecdc4;\n  --dark: #2d3436;\n  --light: #f9f9f9;\n}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;\n  line-height: 1.6;\n  color: var(--dark);\n  background: var(--light);\n}\n\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 15px 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 a {\n  margin-left: 2rem;\n  text-decoration: none;\n  color: var(--dark);\n  transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n  color: var(--primary);\n}\n\n.hero {\n  height: 60vh;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  background: linear-gradient(45deg, var(--primary), var(--secondary));\n  color: white;\n}\n\n.hero h1 {\n  font-size: 3.5rem;\n  margin-bottom: 1rem;\n  animation: fadeInUp 1s ease;\n}\n\n.hero p {\n  font-size: 1.2rem;\n  animation: fadeInUp 1s ease 0.2s backwards;\n}\n\n.counter-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 2rem;\n  padding: 5rem 5%;\n}\n\n.counter-card {\n  background: white;\n  padding: 2rem;\n  border-radius: 15px;\n  text-align: center;\n  box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n  transition: transform 0.3s ease;\n}\n\n.counter-card:hover {\n  transform: translateY(-10px);\n}\n\n.counter {\n  font-size: 2.5rem;\n  font-weight: bold;\n  color: var(--primary);\n  margin-bottom: 1rem;\n}\n\n.cuisine-section {\n  padding: 5rem 5%;\n  background: #f5f5f5;\n}\n\n.cuisine-section h2 {\n  text-align: center;\n  margin-bottom: 3rem;\n}\n\n.cuisine-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 2rem;\n}\n\n.cuisine-card {\n  background: white;\n  padding: 2rem;\n  border-radius: 15px;\n  text-align: center;\n  position: relative;\n  overflow: hidden;\n}\n\n.percentage {\n  height: 4px;\n  background: #eee;\n  margin-top: 1rem;\n  position: relative;\n}\n\n.percentage::after {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 100%;\n  background: var(--secondary);\n  width: 0;\n  transition: width 1.5s ease;\n}\n\nfooter {\n  text-align: center;\n  padding: 2rem;\n  background: var(--dark);\n  color: white;\n}\n\n@keyframes fadeInUp {\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@media (max-width: 768px) {\n  .hero h1 {\n    font-size: 2.5rem;\n  }\n  \n  .nav-links {\n    display: none;\n  }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n  // Animate counters\n  const counters = document.querySelectorAll('.counter');\n  \n  const animateCounter = (counter) => {\n    const target = parseInt(counter.getAttribute('data-target'));\n    const duration = 2000; // 2 seconds\n    const steps = 50;\n    const stepValue = target / steps;\n    let current = 0;\n    \n    const updateCounter = () => {\n      current += stepValue;\n      if (current < target) {\n        counter.textContent = Math.ceil(current);\n        setTimeout(updateCounter, duration / steps);\n      } else {\n        counter.textContent = target;\n      }\n    };\n    \n    updateCounter();\n  };\n\n  // Intersection Observer for counters\n  const counterObserver = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        animateCounter(entry.target);\n        counterObserver.unobserve(entry.target);\n      }\n    });\n  });\n\n  counters.forEach(counter => counterObserver.observe(counter));\n\n  // Animate percentage bars\n  const percentages = document.querySelectorAll('.percentage');\n  \n  const percentageObserver = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        const bar = entry.target;\n        const value = bar.getAttribute('data-value');\n        bar.style.setProperty('--width', `${value}%`);\n        bar.querySelector('::after').style.width = `${value}%`;\n        percentageObserver.unobserve(bar);\n      }\n    });\n  });\n\n  percentages.forEach(percentage => {\n    const value = percentage.getAttribute('data-value');\n    percentage.style.setProperty('--width', '0%');\n    percentageObserver.observe(percentage);\n  });\n});\n\n---end---\n\nThis website features:\n- Beautiful gradient hero section with animated text\n- Animated counters that increment when scrolled into view\n- Percentage bars that fill up on scroll\n- Hover effects on counter cards\n- Fully responsive design\n- Clean, semantic HTML structure\n- Modern CSS with variables and animations\n- Intersection Observer for scroll-based animations\n- Smooth performance with no external dependencies\n\nThe design is clean and professional while incorporating engaging animations and interactions. The color scheme is vibrant but not overwhelming, and the layout is optimized for both desktop and mobile viewing."
+     }
+   ],
+   "stop_reason": "end_turn",
+   "stop_sequence": null,
+   "usage": {
+     "input_tokens": 279,
+     "cache_creation_input_tokens": 0,
+     "cache_read_input_tokens": 0,
+     "output_tokens": 2362
+   }
+ }

readme.scroll

Changed around line 1

+ # foodcount.scroll.pub

+ website generated by Claude from prompt: world food counters. beautiful. cool css

script.js

Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+   // Animate counters
+   const counters = document.querySelectorAll('.counter');
+ 
+   const animateCounter = (counter) => {
+     const target = parseInt(counter.getAttribute('data-target'));
+     const duration = 2000; // 2 seconds
+     const steps = 50;
+     const stepValue = target / steps;
+     let current = 0;
+ 
+     const updateCounter = () => {
+       current += stepValue;
+       if (current < target) {
+         counter.textContent = Math.ceil(current);
+         setTimeout(updateCounter, duration / steps);
+       } else {
+         counter.textContent = target;
+       }
+     };
+ 
+     updateCounter();
+   };
+ 
+   // Intersection Observer for counters
+   const counterObserver = new IntersectionObserver((entries) => {
+     entries.forEach(entry => {
+       if (entry.isIntersecting) {
+         animateCounter(entry.target);
+         counterObserver.unobserve(entry.target);
+       }
+     });
+   });
+ 
+   counters.forEach(counter => counterObserver.observe(counter));
+ 
+   // Animate percentage bars
+   const percentages = document.querySelectorAll('.percentage');
+ 
+   const percentageObserver = new IntersectionObserver((entries) => {
+     entries.forEach(entry => {
+       if (entry.isIntersecting) {
+         const bar = entry.target;
+         const value = bar.getAttribute('data-value');
+         bar.style.setProperty('--width', `${value}%`);
+         bar.querySelector('::after').style.width = `${value}%`;
+         percentageObserver.unobserve(bar);
+       }
+     });
+   });
+ 
+   percentages.forEach(percentage => {
+     const value = percentage.getAttribute('data-value');
+     percentage.style.setProperty('--width', '0%');
+     percentageObserver.observe(percentage);
+   });
+ });

style.css

Changed around line 1
+ :root {
+   --primary: #ff6b6b;
+   --secondary: #4ecdc4;
+   --dark: #2d3436;
+   --light: #f9f9f9;
+ }
+ 
+ * {
+   margin: 0;
+   padding: 0;
+   box-sizing: border-box;
+ }
+ 
+ body {
+   font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+   line-height: 1.6;
+   color: var(--dark);
+   background: var(--light);
+ }
+ 
+ nav {
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+   padding: 1rem 5%;
+   background: white;
+   box-shadow: 0 2px 15px rgba(0,0,0,0.1);
+ }
+ 
+ .logo {
+   font-size: 1.5rem;
+   font-weight: bold;
+   color: var(--primary);
+ }
+ 
+ .nav-links a {
+   margin-left: 2rem;
+   text-decoration: none;
+   color: var(--dark);
+   transition: color 0.3s ease;
+ }
+ 
+ .nav-links a:hover {
+   color: var(--primary);
+ }
+ 
+ .hero {
+   height: 60vh;
+   display: flex;
+   flex-direction: column;
+   justify-content: center;
+   align-items: center;
+   text-align: center;
+   background: linear-gradient(45deg, var(--primary), var(--secondary));
+   color: white;
+ }
+ 
+ .hero h1 {
+   font-size: 3.5rem;
+   margin-bottom: 1rem;
+   animation: fadeInUp 1s ease;
+ }
+ 
+ .hero p {
+   font-size: 1.2rem;
+   animation: fadeInUp 1s ease 0.2s backwards;
+ }
+ 
+ .counter-grid {
+   display: grid;
+   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+   gap: 2rem;
+   padding: 5rem 5%;
+ }
+ 
+ .counter-card {
+   background: white;
+   padding: 2rem;
+   border-radius: 15px;
+   text-align: center;
+   box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+   transition: transform 0.3s ease;
+ }
+ 
+ .counter-card:hover {
+   transform: translateY(-10px);
+ }
+ 
+ .counter {
+   font-size: 2.5rem;
+   font-weight: bold;
+   color: var(--primary);
+   margin-bottom: 1rem;
+ }
+ 
+ .cuisine-section {
+   padding: 5rem 5%;
+   background: #f5f5f5;
+ }
+ 
+ .cuisine-section h2 {
+   text-align: center;
+   margin-bottom: 3rem;
+ }
+ 
+ .cuisine-grid {
+   display: grid;
+   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+   gap: 2rem;
+ }
+ 
+ .cuisine-card {
+   background: white;
+   padding: 2rem;
+   border-radius: 15px;
+   text-align: center;
+   position: relative;
+   overflow: hidden;
+ }
+ 
+ .percentage {
+   height: 4px;
+   background: #eee;
+   margin-top: 1rem;
+   position: relative;
+ }
+ 
+ .percentage::after {
+   content: '';
+   position: absolute;
+   left: 0;
+   top: 0;
+   height: 100%;
+   background: var(--secondary);
+   width: 0;
+   transition: width 1.5s ease;
+ }
+ 
+ footer {
+   text-align: center;
+   padding: 2rem;
+   background: var(--dark);
+   color: white;
+ }
+ 
+ @keyframes fadeInUp {
+   from {
+     opacity: 0;
+     transform: translateY(20px);
+   }
+   to {
+     opacity: 1;
+     transform: translateY(0);
+   }
+ }
+ 
+ @media (max-width: 768px) {
+   .hero h1 {
+     font-size: 2.5rem;
+   }
+ 
+   .nav-links {
+     display: none;
+   }
+ }