Changes to poopscience.scroll.pub

root

25 days ago

Initial commit

body.html

Changed around line 1
+ 
+   
+     
+       About
+       Facts
+       Health
+     
+   
+ 
+ 
+ 
+   
+     
+       Understanding Human Waste
+       A scientific exploration of digestive health
+     
+   
+ 
+   
+     
+       About
+       
+         
+           Everyone does it, but few understand it. Let's explore the science behind human waste and its importance to health.
+         
+         
+           
+         
+       
+     
+   
+ 
+   
+     
+       Quick Facts
+       
+         
+           60%
+           Water content
+         
+         
+           1-3x
+           Daily frequency
+         
+         
+           24h
+           Transit time
+         
+       
+     
+   
+ 
+ 
+ 
+   
+     Educational content for medical awareness
+   
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://poopscience.scroll.pub
+ metaTags
+ editButton /edit.html
+ title The Science of Human Waste
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "msg_01JqdBrHPHpmGRiRnCWJTFUd",
+   "type": "message",
+   "role": "assistant",
+   "model": "claude-3-5-sonnet-20241022",
+   "content": [
+     {
+       "type": "text",
+       "text": "Let me create a whimsical yet professional website about this unusual topic, treating it with scientific/educational approach.\n\n---domain---\npoopscience.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://poopscience.scroll.pub\nmetaTags\neditButton /edit.html\ntitle The Science of Human Waste\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n\n  \n    \n      About
\n      Facts
\n      Health
\n    \n  \n\n\n\n  \n    \n      Understanding Human Waste\n      A scientific exploration of digestive health
\n    
\n  \n\n  \n    \n      About\n      \n        \n          Everyone does it, but few understand it. Let's explore the science behind human waste and its importance to health.
\n        
\n        \n          
\n        
\n      
\n    
\n  \n\n  \n    \n      Quick Facts\n      \n        \n          60%\n          Water content
\n        
\n        \n          1-3x\n          Daily frequency
\n        
\n        \n          24h\n          Transit time
\n        
\n      
\n    
\n  \n\n\n\n  \n    Educational content for medical awareness
\n  
\n\n\n---style.css---\n:root {\n  --primary: #8B4513;\n  --secondary: #DEB887;\n  --background: #FFF8DC;\n  --text: #2C1810;\n}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: 'Segoe UI', system-ui, sans-serif;\n  line-height: 1.6;\n  color: var(--text);\n  background: var(--background);\n}\n\n.container {\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 0 20px;\n}\n\n/* Header */\nheader {\n  background: var(--primary);\n  padding: 1rem 0;\n  position: fixed;\n  width: 100%;\n  z-index: 1000;\n}\n\nnav ul {\n  display: flex;\n  justify-content: center;\n  list-style: none;\n  gap: 2rem;\n}\n\nnav a {\n  color: white;\n  text-decoration: none;\n  font-weight: 500;\n  transition: color 0.3s ease;\n}\n\nnav a:hover {\n  color: var(--secondary);\n}\n\n/* Hero Section */\n#hero {\n  height: 100vh;\n  display: flex;\n  align-items: center;\n  background: linear-gradient(45deg, var(--primary), var(--secondary));\n  color: white;\n  text-align: center;\n}\n\n#hero h1 {\n  font-size: 4rem;\n  margin-bottom: 1rem;\n  animation: fadeIn 1s ease-out;\n}\n\n/* Content Sections */\nsection {\n  padding: 5rem 0;\n}\n\n.content-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 2rem;\n  align-items: center;\n}\n\n/* Cards */\n.fact-cards {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 2rem;\n  margin-top: 2rem;\n}\n\n.card {\n  background: white;\n  padding: 2rem;\n  border-radius: 15px;\n  box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n  text-align: center;\n  transition: transform 0.3s ease;\n}\n\n.card:hover {\n  transform: translateY(-5px);\n}\n\n/* Animations */\n@keyframes fadeIn {\n  from { opacity: 0; transform: translateY(20px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n.circle-animation {\n  width: 200px;\n  height: 200px;\n  background: linear-gradient(var(--primary), var(--secondary));\n  border-radius: 50%;\n  margin: auto;\n  animation: pulse 2s infinite;\n}\n\n@keyframes pulse {\n  0% { transform: scale(1); }\n  50% { transform: scale(1.05); }\n  100% { transform: scale(1); }\n}\n\n/* Mobile Responsive */\n@media (max-width: 768px) {\n  #hero h1 {\n    font-size: 2.5rem;\n  }\n  \n  .content-grid {\n    grid-template-columns: 1fr;\n  }\n  \n  nav ul {\n    flex-direction: column;\n    text-align: center;\n    gap: 1rem;\n  }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n  // Smooth scrolling 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  // Intersection Observer for fade-in 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  }, { threshold: 0.1 });\n\n  // Observe all cards\n  document.querySelectorAll('.card').forEach((card) => {\n    card.style.opacity = 0;\n    card.style.transform = 'translateY(20px)';\n    observer.observe(card);\n  });\n\n  // Add scroll-based header transparency\n  const header = document.querySelector('header');\n  window.addEventListener('scroll', () => {\n    if (window.scrollY > 50) {\n      header.style.backgroundColor = 'rgba(139, 69, 19, 0.95)';\n    } else {\n      header.style.backgroundColor = 'var(--primary)';\n    }\n  });\n});\n\n---end---\n\nThis website takes a scientific approach to the topic, using a warm, earth-toned color scheme and professional animations. It's fully responsive, accessible, and includes smooth scrolling and intersection observer animations. The design is clean and modern, with a fixed header, hero section, and informative cards that fade in as you scroll."
+     }
+   ],
+   "stop_reason": "end_turn",
+   "stop_sequence": null,
+   "usage": {
+     "input_tokens": 273,
+     "cache_creation_input_tokens": 0,
+     "cache_read_input_tokens": 0,
+     "output_tokens": 1931
+   }
+ }

readme.scroll

Changed around line 1

+ # poopscience.scroll.pub

+ Website generated by Claude from prompt: Poop

script.js

Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+   // Smooth scrolling for navigation links
+   document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+     anchor.addEventListener('click', function (e) {
+       e.preventDefault();
+       document.querySelector(this.getAttribute('href')).scrollIntoView({
+         behavior: 'smooth'
+       });
+     });
+   });
+ 
+   // Intersection Observer for fade-in animations
+   const observer = new IntersectionObserver((entries) => {
+     entries.forEach(entry => {
+       if (entry.isIntersecting) {
+         entry.target.style.opacity = 1;
+         entry.target.style.transform = 'translateY(0)';
+       }
+     });
+   }, { threshold: 0.1 });
+ 
+   // Observe all cards
+   document.querySelectorAll('.card').forEach((card) => {
+     card.style.opacity = 0;
+     card.style.transform = 'translateY(20px)';
+     observer.observe(card);
+   });
+ 
+   // Add scroll-based header transparency
+   const header = document.querySelector('header');
+   window.addEventListener('scroll', () => {
+     if (window.scrollY > 50) {
+       header.style.backgroundColor = 'rgba(139, 69, 19, 0.95)';
+     } else {
+       header.style.backgroundColor = 'var(--primary)';
+     }
+   });
+ });

style.css

Changed around line 1
+ :root {
+   --primary: #8B4513;
+   --secondary: #DEB887;
+   --background: #FFF8DC;
+   --text: #2C1810;
+ }
+ 
+ * {
+   margin: 0;
+   padding: 0;
+   box-sizing: border-box;
+ }
+ 
+ body {
+   font-family: 'Segoe UI', system-ui, sans-serif;
+   line-height: 1.6;
+   color: var(--text);
+   background: var(--background);
+ }
+ 
+ .container {
+   max-width: 1200px;
+   margin: 0 auto;
+   padding: 0 20px;
+ }
+ 
+ /* Header */
+ header {
+   background: var(--primary);
+   padding: 1rem 0;
+   position: fixed;
+   width: 100%;
+   z-index: 1000;
+ }
+ 
+ nav ul {
+   display: flex;
+   justify-content: center;
+   list-style: none;
+   gap: 2rem;
+ }
+ 
+ nav a {
+   color: white;
+   text-decoration: none;
+   font-weight: 500;
+   transition: color 0.3s ease;
+ }
+ 
+ nav a:hover {
+   color: var(--secondary);
+ }
+ 
+ /* Hero Section */
+ #hero {
+   height: 100vh;
+   display: flex;
+   align-items: center;
+   background: linear-gradient(45deg, var(--primary), var(--secondary));
+   color: white;
+   text-align: center;
+ }
+ 
+ #hero h1 {
+   font-size: 4rem;
+   margin-bottom: 1rem;
+   animation: fadeIn 1s ease-out;
+ }
+ 
+ /* Content Sections */
+ section {
+   padding: 5rem 0;
+ }
+ 
+ .content-grid {
+   display: grid;
+   grid-template-columns: 1fr 1fr;
+   gap: 2rem;
+   align-items: center;
+ }
+ 
+ /* Cards */
+ .fact-cards {
+   display: grid;
+   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+   gap: 2rem;
+   margin-top: 2rem;
+ }
+ 
+ .card {
+   background: white;
+   padding: 2rem;
+   border-radius: 15px;
+   box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+   text-align: center;
+   transition: transform 0.3s ease;
+ }
+ 
+ .card:hover {
+   transform: translateY(-5px);
+ }
+ 
+ /* Animations */
+ @keyframes fadeIn {
+   from { opacity: 0; transform: translateY(20px); }
+   to { opacity: 1; transform: translateY(0); }
+ }
+ 
+ .circle-animation {
+   width: 200px;
+   height: 200px;
+   background: linear-gradient(var(--primary), var(--secondary));
+   border-radius: 50%;
+   margin: auto;
+   animation: pulse 2s infinite;
+ }
+ 
+ @keyframes pulse {
+   0% { transform: scale(1); }
+   50% { transform: scale(1.05); }
+   100% { transform: scale(1); }
+ }
+ 
+ /* Mobile Responsive */
+ @media (max-width: 768px) {
+   #hero h1 {
+     font-size: 2.5rem;
+   }
+ 
+   .content-grid {
+     grid-template-columns: 1fr;
+   }
+ 
+   nav ul {
+     flex-direction: column;
+     text-align: center;
+     gap: 1rem;
+   }
+ }