Changes to foldermetrics.scroll.pub

root

11 days ago

Initial commit

body.html

Changed around line 1
+ 
+   
+     📊 FolderStats
+     
+       Features
+       Demo
+       About
+     
+   
+ 
+ 
+ 
+   
+     Analyze Your File System
+     Powerful folder statistics and insights at your fingertips
+     
+   
+ 
+   
+     Features
+     
+       
+         📁
+         Size Analysis
+         Get detailed size breakdowns of folders and subfolders
+       
+       
+         📊
+         Visual Stats
+         Beautiful charts and graphs of your file system
+       
+       
+         🔍
+         Deep Scan
+         Analyze nested folder structures with ease
+       
+       
+         📈
+         Trends
+         Track changes and growth over time
+       
+     
+   
+ 
+   
+     Live Demo
+     
+       
+         /Users/Documents
+         
+           
+             Total Size
+             0 GB
+           
+           
+             Files
+             0
+           
+           
+             Folders
+             0
+           
+         
+         
+       
+     
+   
+ 
+ 
+ 
+   FolderStats - Made with 💙 for file organization
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://foldermetrics.scroll.pub
+ metaTags
+ editButton /edit.html
+ title FolderStats - File System Analytics
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "msg_01DpLs9LBvShmGRxy72bc65j",
+   "type": "message",
+   "role": "assistant",
+   "model": "claude-3-5-sonnet-20241022",
+   "content": [
+     {
+       "type": "text",
+       "text": "Let me create a website for displaying and analyzing folder statistics and file system information.\n\n---domain---\nfoldermetrics.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://foldermetrics.scroll.pub\nmetaTags\neditButton /edit.html\ntitle FolderStats - File System Analytics\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n\n  \n    📊 FolderStats
\n    \n      Features\n      Demo\n      About\n    
\n  \n\n\n\n  \n    Analyze Your File System\n    Powerful folder statistics and insights at your fingertips
\n    \n  \n\n  \n    Features\n    \n      \n        📁\n        Size Analysis\n        Get detailed size breakdowns of folders and subfolders
\n      
\n      \n        📊\n        Visual Stats\n        Beautiful charts and graphs of your file system
\n      
\n      \n        🔍\n        Deep Scan\n        Analyze nested folder structures with ease
\n      
\n      \n        📈\n        Trends\n        Track changes and growth over time
\n      
\n    
\n  \n\n  \n    Live Demo\n    \n      \n        /Users/Documents
\n        \n          \n            Total Size\n            0 GB\n          
\n          \n            Files\n            0\n          
\n          \n            Folders\n            0\n          
\n        
\n        
\n      
\n    
\n  \n\n\n\n  FolderStats - Made with 💙 for file organization
\n\n\n---style.css---\n:root {\n  --primary-color: #2563eb;\n  --secondary-color: #1e40af;\n  --background-color: #f8fafc;\n  --text-color: #1e293b;\n  --card-background: #ffffff;\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-color);\n  background: var(--background-color);\n}\n\nheader {\n  background: var(--card-background);\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n  position: fixed;\n  width: 100%;\n  top: 0;\n  z-index: 100;\n}\n\nnav {\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 1rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.logo {\n  font-size: 1.5rem;\n  font-weight: bold;\n  color: var(--primary-color);\n}\n\n.nav-links a {\n  margin-left: 2rem;\n  text-decoration: none;\n  color: var(--text-color);\n  transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n  color: var(--primary-color);\n}\n\nmain {\n  margin-top: 4rem;\n}\n\n.hero {\n  text-align: center;\n  padding: 4rem 1rem;\n  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n  color: white;\n}\n\n.hero h1 {\n  font-size: 3rem;\n  margin-bottom: 1rem;\n}\n\n.cta-button {\n  background: white;\n  color: var(--primary-color);\n  border: none;\n  padding: 1rem 2rem;\n  border-radius: 2rem;\n  font-size: 1.1rem;\n  cursor: pointer;\n  margin-top: 2rem;\n  transition: transform 0.3s ease;\n}\n\n.cta-button:hover {\n  transform: scale(1.05);\n}\n\n.features {\n  padding: 4rem 1rem;\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n.feature-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 2rem;\n  margin-top: 2rem;\n}\n\n.feature-card {\n  background: var(--card-background);\n  padding: 2rem;\n  border-radius: 1rem;\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: 2rem;\n  margin-bottom: 1rem;\n  display: block;\n}\n\n.demo {\n  padding: 4rem 1rem;\n  background: #f1f5f9;\n}\n\n.stats-container {\n  max-width: 1000px;\n  margin: 2rem auto;\n}\n\n.stats-panel {\n  background: var(--card-background);\n  padding: 2rem;\n  border-radius: 1rem;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\n.folder-path {\n  font-family: monospace;\n  padding: 0.5rem;\n  background: #f1f5f9;\n  border-radius: 0.5rem;\n  margin-bottom: 1rem;\n}\n\n.stats-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n  gap: 1rem;\n  margin-bottom: 2rem;\n}\n\n.stat-item {\n  text-align: center;\n  padding: 1rem;\n  background: #f8fafc;\n  border-radius: 0.5rem;\n}\n\n.stat-label {\n  font-size: 0.9rem;\n  color: #64748b;\n  display: block;\n}\n\n.stat-value {\n  font-size: 1.5rem;\n  font-weight: bold;\n  color: var(--primary-color);\n}\n\n.visualization {\n  height: 300px;\n  background: #f1f5f9;\n  border-radius: 0.5rem;\n  margin-top: 1rem;\n}\n\nfooter {\n  text-align: center;\n  padding: 2rem;\n  background: var(--card-background);\n  margin-top: 4rem;\n}\n\n@media (max-width: 768px) {\n  .nav-links {\n    display: none;\n  }\n  \n  .hero h1 {\n    font-size: 2rem;\n  }\n  \n  .feature-grid {\n    grid-template-columns: 1fr;\n  }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n  const analyzeBtn = document.getElementById('analyzeBtn');\n  const totalSize = document.getElementById('totalSize');\n  const fileCount = document.getElementById('fileCount');\n  const folderCount = document.getElementById('folderCount');\n  const visualization = document.getElementById('visualization');\n\n  // Demo animation\n  let size = 0;\n  let files = 0;\n  let folders = 0;\n\n  function animateStats() {\n    const targetSize = 128;\n    const targetFiles = 1458;\n    const targetFolders = 86;\n    \n    const sizeInterval = setInterval(() => {\n      size += 2;\n      if (size >= targetSize) {\n        size = targetSize;\n        clearInterval(sizeInterval);\n      }\n      totalSize.textContent = `${size} GB`;\n    }, 20);\n\n    const filesInterval = setInterval(() => {\n      files += 25;\n      if (files >= targetFiles) {\n        files = targetFiles;\n        clearInterval(filesInterval);\n      }\n      fileCount.textContent = files.toLocaleString();\n    }, 20);\n\n    const foldersInterval = setInterval(() => {\n      folders += 2;\n      if (folders >= targetFolders) {\n        folders = targetFolders;\n        clearInterval(foldersInterval);\n      }\n      folderCount.textContent = folders.toLocaleString();\n    }, 20);\n  }\n\n  // Smooth scroll 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  // Initialize demo\n  analyzeBtn.addEventListener('click', () => {\n    size = 0;\n    files = 0;\n    folders = 0;\n    animateStats();\n    analyzeBtn.disabled = true;\n    setTimeout(() => {\n      analyzeBtn.disabled = false;\n    }, 2000);\n  });\n\n  // Initial animation\n  setTimeout(animateStats, 1000);\n});\n\n---end---\n\nThis website features:\n1. A modern, clean design with smooth animations\n2. Responsive layout that works on all devices\n3. Interactive demo section with animated statistics\n4. Feature cards with hover effects\n5. Gradient hero section\n6. Accessible navigation and semantic HTML\n7. Performance-optimized CSS with minimal code\n8. Clean JavaScript with smooth animations\n9. Professional color scheme and typography\n10. Beautiful card-based layout with shadows and transitions\n\nThe domain name \"foldermetrics.scroll.pub\" is:\n- Memorable and descriptive\n- Combines \"folder\" with \"metrics\"\n- Professional sounding\n- Easy to spell\n- Relevant to the service"
+     }
+   ],
+   "stop_reason": "end_turn",
+   "stop_sequence": null,
+   "usage": {
+     "input_tokens": 274,
+     "cache_creation_input_tokens": 0,
+     "cache_read_input_tokens": 0,
+     "output_tokens": 2889
+   }
+ }

readme.scroll

Changed around line 1

+ # foldermetrics.scroll.pub

+ website generated by Claude from prompt: folderstats

script.js

Changed around line 1
+ document.addEventListener('DOMContentLoaded', function() {
+   const analyzeBtn = document.getElementById('analyzeBtn');
+   const totalSize = document.getElementById('totalSize');
+   const fileCount = document.getElementById('fileCount');
+   const folderCount = document.getElementById('folderCount');
+   const visualization = document.getElementById('visualization');
+ 
+   // Demo animation
+   let size = 0;
+   let files = 0;
+   let folders = 0;
+ 
+   function animateStats() {
+     const targetSize = 128;
+     const targetFiles = 1458;
+     const targetFolders = 86;
+ 
+     const sizeInterval = setInterval(() => {
+       size += 2;
+       if (size >= targetSize) {
+         size = targetSize;
+         clearInterval(sizeInterval);
+       }
+       totalSize.textContent = `${size} GB`;
+     }, 20);
+ 
+     const filesInterval = setInterval(() => {
+       files += 25;
+       if (files >= targetFiles) {
+         files = targetFiles;
+         clearInterval(filesInterval);
+       }
+       fileCount.textContent = files.toLocaleString();
+     }, 20);
+ 
+     const foldersInterval = setInterval(() => {
+       folders += 2;
+       if (folders >= targetFolders) {
+         folders = targetFolders;
+         clearInterval(foldersInterval);
+       }
+       folderCount.textContent = folders.toLocaleString();
+     }, 20);
+   }
+ 
+   // Smooth scroll for navigation
+   document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+     anchor.addEventListener('click', function (e) {
+       e.preventDefault();
+       document.querySelector(this.getAttribute('href')).scrollIntoView({
+         behavior: 'smooth'
+       });
+     });
+   });
+ 
+   // Initialize demo
+   analyzeBtn.addEventListener('click', () => {
+     size = 0;
+     files = 0;
+     folders = 0;
+     animateStats();
+     analyzeBtn.disabled = true;
+     setTimeout(() => {
+       analyzeBtn.disabled = false;
+     }, 2000);
+   });
+ 
+   // Initial animation
+   setTimeout(animateStats, 1000);
+ });

style.css

Changed around line 1
+ :root {
+   --primary-color: #2563eb;
+   --secondary-color: #1e40af;
+   --background-color: #f8fafc;
+   --text-color: #1e293b;
+   --card-background: #ffffff;
+ }
+ 
+ * {
+   margin: 0;
+   padding: 0;
+   box-sizing: border-box;
+ }
+ 
+ body {
+   font-family: system-ui, -apple-system, sans-serif;
+   line-height: 1.6;
+   color: var(--text-color);
+   background: var(--background-color);
+ }
+ 
+ header {
+   background: var(--card-background);
+   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+   position: fixed;
+   width: 100%;
+   top: 0;
+   z-index: 100;
+ }
+ 
+ nav {
+   max-width: 1200px;
+   margin: 0 auto;
+   padding: 1rem;
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+ }
+ 
+ .logo {
+   font-size: 1.5rem;
+   font-weight: bold;
+   color: var(--primary-color);
+ }
+ 
+ .nav-links a {
+   margin-left: 2rem;
+   text-decoration: none;
+   color: var(--text-color);
+   transition: color 0.3s ease;
+ }
+ 
+ .nav-links a:hover {
+   color: var(--primary-color);
+ }
+ 
+ main {
+   margin-top: 4rem;
+ }
+ 
+ .hero {
+   text-align: center;
+   padding: 4rem 1rem;
+   background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+   color: white;
+ }
+ 
+ .hero h1 {
+   font-size: 3rem;
+   margin-bottom: 1rem;
+ }
+ 
+ .cta-button {
+   background: white;
+   color: var(--primary-color);
+   border: none;
+   padding: 1rem 2rem;
+   border-radius: 2rem;
+   font-size: 1.1rem;
+   cursor: pointer;
+   margin-top: 2rem;
+   transition: transform 0.3s ease;
+ }
+ 
+ .cta-button:hover {
+   transform: scale(1.05);
+ }
+ 
+ .features {
+   padding: 4rem 1rem;
+   max-width: 1200px;
+   margin: 0 auto;
+ }
+ 
+ .feature-grid {
+   display: grid;
+   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+   gap: 2rem;
+   margin-top: 2rem;
+ }
+ 
+ .feature-card {
+   background: var(--card-background);
+   padding: 2rem;
+   border-radius: 1rem;
+   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: 2rem;
+   margin-bottom: 1rem;
+   display: block;
+ }
+ 
+ .demo {
+   padding: 4rem 1rem;
+   background: #f1f5f9;
+ }
+ 
+ .stats-container {
+   max-width: 1000px;
+   margin: 2rem auto;
+ }
+ 
+ .stats-panel {
+   background: var(--card-background);
+   padding: 2rem;
+   border-radius: 1rem;
+   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ }
+ 
+ .folder-path {
+   font-family: monospace;
+   padding: 0.5rem;
+   background: #f1f5f9;
+   border-radius: 0.5rem;
+   margin-bottom: 1rem;
+ }
+ 
+ .stats-grid {
+   display: grid;
+   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+   gap: 1rem;
+   margin-bottom: 2rem;
+ }
+ 
+ .stat-item {
+   text-align: center;
+   padding: 1rem;
+   background: #f8fafc;
+   border-radius: 0.5rem;
+ }
+ 
+ .stat-label {
+   font-size: 0.9rem;
+   color: #64748b;
+   display: block;
+ }
+ 
+ .stat-value {
+   font-size: 1.5rem;
+   font-weight: bold;
+   color: var(--primary-color);
+ }
+ 
+ .visualization {
+   height: 300px;
+   background: #f1f5f9;
+   border-radius: 0.5rem;
+   margin-top: 1rem;
+ }
+ 
+ footer {
+   text-align: center;
+   padding: 2rem;
+   background: var(--card-background);
+   margin-top: 4rem;
+ }
+ 
+ @media (max-width: 768px) {
+   .nav-links {
+     display: none;
+   }
+ 
+   .hero h1 {
+     font-size: 2rem;
+   }
+ 
+   .feature-grid {
+     grid-template-columns: 1fr;
+   }
+ }