Changes to sets2.scroll.pub

root

16 days ago

Initial commit

body.html

Changed around line 1
+ 
+   
+     Sets²
+     
+       Basics
+       Operations
+       Playground
+     
+   
+ 
+ 
+ 
+   
+     Explore Set Theory
+     An interactive journey into mathematical sets
+   
+ 
+   
+     Set Basics
+     
+       
+         Definition
+         A set is a collection of distinct objects
+       
+       
+         Notation
+         Sets are written as {a, b, c}
+       
+       
+         Properties
+         Order doesn't matter, duplicates are ignored
+       
+     
+   
+ 
+   
+     Set Operations
+     
+       
+         Union
+         
+       
+       
+         Intersection
+         
+       
+     
+   
+ 
+   
+     Interactive Playground
+     
+       
+       
+     
+     
+   
+ 
+ 
+ 
+   Built with Scroll | Source
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://sets2.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Sets2 - Modern Set Theory Explorer
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "msg_015PqJpq5bTRXk4h2CmiTAFw",
+   "type": "message",
+   "role": "assistant",
+   "model": "claude-3-5-sonnet-20241022",
+   "content": [
+     {
+       "type": "text",
+       "text": "For a website about sets and set theory, I suggest:\n\n---domain---\nsets2.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://sets2.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Sets2 - Modern Set Theory Explorer\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n\n  \n    Sets²
\n    \n      Basics\n      Operations\n      Playground\n    
\n  \n\n\n\n  \n    Explore Set Theory\n    An interactive journey into mathematical sets
\n  \n\n  \n    Set Basics\n    \n      \n        Definition\n        A set is a collection of distinct objects
\n      
\n      \n        Notation\n        Sets are written as {a, b, c}
\n      
\n      \n        Properties\n        Order doesn't matter, duplicates are ignored
\n      
\n    
\n  \n\n  \n    Set Operations\n    \n      \n        Union\n        
\n      
\n      \n        Intersection\n        
\n      
\n    
\n  \n\n  \n    Interactive Playground\n    \n      \n      \n    
\n    
\n  \n\n\n\n  Built with Scroll | Source
\n\n\n---style.css---\n:root {\n  --primary: #2a6c8f;\n  --secondary: #f0f7ff;\n  --accent: #ff6b6b;\n  --text: #333;\n  --background: #fff;\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  line-height: 1.6;\n  color: var(--text);\n  background: var(--background);\n}\n\nheader {\n  background: var(--primary);\n  padding: 1rem;\n  position: fixed;\n  width: 100%;\n  top: 0;\n  z-index: 100;\n  box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n}\n\nnav {\n  max-width: 1200px;\n  margin: 0 auto;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.logo {\n  font-size: 2rem;\n  color: white;\n  font-weight: bold;\n}\n\n.nav-links a {\n  color: white;\n  text-decoration: none;\n  margin-left: 2rem;\n  transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n  color: var(--accent);\n}\n\nmain {\n  margin-top: 4rem;\n  padding: 2rem;\n}\n\n.hero {\n  text-align: center;\n  padding: 4rem 0;\n  background: var(--secondary);\n  border-radius: 1rem;\n  margin-bottom: 3rem;\n}\n\n.hero h1 {\n  font-size: 3.5rem;\n  margin-bottom: 1rem;\n  background: linear-gradient(45deg, var(--primary), var(--accent));\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n\n.card-grid {\n  margin: 3rem 0;\n}\n\n.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: 1rem;\n  box-shadow: 0 4px 20px rgba(0,0,0,0.1);\n  transition: transform 0.3s ease;\n}\n\n.card:hover {\n  transform: translateY(-5px);\n}\n\n.operations {\n  margin: 3rem 0;\n}\n\n.operation-container {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n  gap: 2rem;\n  margin-top: 2rem;\n}\n\n.operation {\n  text-align: center;\n  padding: 2rem;\n  background: var(--secondary);\n  border-radius: 1rem;\n}\n\n.venn-diagram {\n  width: 200px;\n  height: 200px;\n  margin: 2rem auto;\n  position: relative;\n  border: 2px solid var(--primary);\n  border-radius: 50%;\n}\n\n.playground {\n  margin: 3rem 0;\n}\n\n.set-builder {\n  display: flex;\n  gap: 1rem;\n  margin-bottom: 2rem;\n}\n\ninput {\n  flex: 1;\n  padding: 0.8rem;\n  border: 2px solid var(--primary);\n  border-radius: 0.5rem;\n  font-size: 1rem;\n}\n\nbutton {\n  padding: 0.8rem 1.5rem;\n  background: var(--primary);\n  color: white;\n  border: none;\n  border-radius: 0.5rem;\n  cursor: pointer;\n  transition: background 0.3s ease;\n}\n\nbutton:hover {\n  background: var(--accent);\n}\n\nfooter {\n  text-align: center;\n  padding: 2rem;\n  background: var(--secondary);\n  margin-top: 3rem;\n}\n\n@media (max-width: 768px) {\n  .nav-links {\n    display: none;\n  }\n  \n  .hero h1 {\n    font-size: 2.5rem;\n  }\n  \n  .cards {\n    grid-template-columns: 1fr;\n  }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n  // Set creation functionality\n  const setInput = document.getElementById('setInput');\n  const createSetBtn = document.getElementById('createSet');\n  const setDisplay = document.getElementById('setDisplay');\n\n  createSetBtn.addEventListener('click', () => {\n    const elements = setInput.value.split(',').map(e => e.trim());\n    const uniqueElements = [...new Set(elements)];\n    \n    if (elements.length > 0 && elements[0] !== '') {\n      const setElement = document.createElement('div');\n      setElement.classList.add('card');\n      setElement.innerHTML = `\n        Created Set\n        {${uniqueElements.join(', ')}}
\n      `;\n      setDisplay.prepend(setElement);\n    }\n    \n    setInput.value = '';\n  });\n\n  // Smooth scrolling for navigation\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  // Animation for cards on scroll\n  const observerOptions = {\n    threshold: 0.1\n  };\n\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  }, observerOptions);\n\n  document.querySelectorAll('.card').forEach(card => {\n    card.style.opacity = '0';\n    card.style.transform = 'translateY(20px)';\n    card.style.transition = 'all 0.5s ease-out';\n    observer.observe(card);\n  });\n});\n\n---end---\n\nThis implementation creates a modern, interactive website for exploring set theory. It features:\n\n1. Clean, semantic HTML5 structure\n2. Beautiful gradient text and smooth animations\n3. Responsive design that works on all devices\n4. Interactive set creation playground\n5. Smooth scrolling navigation\n6. Intersection Observer for scroll animations\n7. CSS variables for easy theming\n8. Accessible navigation and content structure\n9. Modern card-based layout\n10. Beautiful color scheme and visual hierarchy\n\nThe design is minimal yet engaging, with subtle animations and interactions that make the experience feel polished and professional."
+     }
+   ],
+   "stop_reason": "end_turn",
+   "stop_sequence": null,
+   "usage": {
+     "input_tokens": 287,
+     "cache_creation_input_tokens": 0,
+     "cache_read_input_tokens": 0,
+     "output_tokens": 2444
+   }
+ }

readme.scroll

Changed around line 1

+ # sets2.scroll.pub

+ Website generated by Claude from prompt: https://github.com/breck7/sets.scroll.pub sets2

script.js

Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+   // Set creation functionality
+   const setInput = document.getElementById('setInput');
+   const createSetBtn = document.getElementById('createSet');
+   const setDisplay = document.getElementById('setDisplay');
+ 
+   createSetBtn.addEventListener('click', () => {
+     const elements = setInput.value.split(',').map(e => e.trim());
+     const uniqueElements = [...new Set(elements)];
+ 
+     if (elements.length > 0 && elements[0] !== '') {
+       const setElement = document.createElement('div');
+       setElement.classList.add('card');
+       setElement.innerHTML = `
+         Created Set
+         {${uniqueElements.join(', ')}}
+       `;
+       setDisplay.prepend(setElement);
+     }
+ 
+     setInput.value = '';
+   });
+ 
+   // Smooth scrolling for navigation
+   document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+     anchor.addEventListener('click', function (e) {
+       e.preventDefault();
+       document.querySelector(this.getAttribute('href')).scrollIntoView({
+         behavior: 'smooth'
+       });
+     });
+   });
+ 
+   // Animation for cards on scroll
+   const observerOptions = {
+     threshold: 0.1
+   };
+ 
+   const observer = new IntersectionObserver((entries) => {
+     entries.forEach(entry => {
+       if (entry.isIntersecting) {
+         entry.target.style.opacity = '1';
+         entry.target.style.transform = 'translateY(0)';
+       }
+     });
+   }, observerOptions);
+ 
+   document.querySelectorAll('.card').forEach(card => {
+     card.style.opacity = '0';
+     card.style.transform = 'translateY(20px)';
+     card.style.transition = 'all 0.5s ease-out';
+     observer.observe(card);
+   });
+ });

style.css

Changed around line 1
+ :root {
+   --primary: #2a6c8f;
+   --secondary: #f0f7ff;
+   --accent: #ff6b6b;
+   --text: #333;
+   --background: #fff;
+ }
+ 
+ * {
+   margin: 0;
+   padding: 0;
+   box-sizing: border-box;
+ }
+ 
+ body {
+   font-family: system-ui, -apple-system, sans-serif;
+   line-height: 1.6;
+   color: var(--text);
+   background: var(--background);
+ }
+ 
+ header {
+   background: var(--primary);
+   padding: 1rem;
+   position: fixed;
+   width: 100%;
+   top: 0;
+   z-index: 100;
+   box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+ }
+ 
+ nav {
+   max-width: 1200px;
+   margin: 0 auto;
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+ }
+ 
+ .logo {
+   font-size: 2rem;
+   color: white;
+   font-weight: bold;
+ }
+ 
+ .nav-links a {
+   color: white;
+   text-decoration: none;
+   margin-left: 2rem;
+   transition: color 0.3s ease;
+ }
+ 
+ .nav-links a:hover {
+   color: var(--accent);
+ }
+ 
+ main {
+   margin-top: 4rem;
+   padding: 2rem;
+ }
+ 
+ .hero {
+   text-align: center;
+   padding: 4rem 0;
+   background: var(--secondary);
+   border-radius: 1rem;
+   margin-bottom: 3rem;
+ }
+ 
+ .hero h1 {
+   font-size: 3.5rem;
+   margin-bottom: 1rem;
+   background: linear-gradient(45deg, var(--primary), var(--accent));
+   -webkit-background-clip: text;
+   -webkit-text-fill-color: transparent;
+ }
+ 
+ .card-grid {
+   margin: 3rem 0;
+ }
+ 
+ .cards {
+   display: grid;
+   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+   gap: 2rem;
+   margin-top: 2rem;
+ }
+ 
+ .card {
+   background: white;
+   padding: 2rem;
+   border-radius: 1rem;
+   box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+   transition: transform 0.3s ease;
+ }
+ 
+ .card:hover {
+   transform: translateY(-5px);
+ }
+ 
+ .operations {
+   margin: 3rem 0;
+ }
+ 
+ .operation-container {
+   display: grid;
+   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+   gap: 2rem;
+   margin-top: 2rem;
+ }
+ 
+ .operation {
+   text-align: center;
+   padding: 2rem;
+   background: var(--secondary);
+   border-radius: 1rem;
+ }
+ 
+ .venn-diagram {
+   width: 200px;
+   height: 200px;
+   margin: 2rem auto;
+   position: relative;
+   border: 2px solid var(--primary);
+   border-radius: 50%;
+ }
+ 
+ .playground {
+   margin: 3rem 0;
+ }
+ 
+ .set-builder {
+   display: flex;
+   gap: 1rem;
+   margin-bottom: 2rem;
+ }
+ 
+ input {
+   flex: 1;
+   padding: 0.8rem;
+   border: 2px solid var(--primary);
+   border-radius: 0.5rem;
+   font-size: 1rem;
+ }
+ 
+ button {
+   padding: 0.8rem 1.5rem;
+   background: var(--primary);
+   color: white;
+   border: none;
+   border-radius: 0.5rem;
+   cursor: pointer;
+   transition: background 0.3s ease;
+ }
+ 
+ button:hover {
+   background: var(--accent);
+ }
+ 
+ footer {
+   text-align: center;
+   padding: 2rem;
+   background: var(--secondary);
+   margin-top: 3rem;
+ }
+ 
+ @media (max-width: 768px) {
+   .nav-links {
+     display: none;
+   }
+ 
+   .hero h1 {
+     font-size: 2.5rem;
+   }
+ 
+   .cards {
+     grid-template-columns: 1fr;
+   }
+ }