commit 4e63a6b21f89b19d324766b3ae6ceabade948b2c
Author: root <root@hub.scroll.pub>
Date: 2025-01-11 00:04:30 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..cf4a146
--- /dev/null
+++ b/body.html
@@ -0,0 +1,72 @@
+<header>
+ <nav>
+ <div class="logo">📊 FolderStats</div>
+ <div class="nav-links">
+ <a href="#features">Features</a>
+ <a href="#demo">Demo</a>
+ <a href="#about">About</a>
+ </div>
+ </nav>
+</header>
+
+<main>
+ <section class="hero">
+ <h1>Analyze Your File System</h1>
+ <p>Powerful folder statistics and insights at your fingertips</p>
+ <button class="cta-button" id="analyzeBtn">Analyze Folder</button>
+ </section>
+
+ <section id="features" class="features">
+ <h2>Features</h2>
+ <div class="feature-grid">
+ <div class="feature-card">
+ <span class="icon">📁</span>
+ <h3>Size Analysis</h3>
+ <p>Get detailed size breakdowns of folders and subfolders</p>
+ </div>
+ <div class="feature-card">
+ <span class="icon">📊</span>
+ <h3>Visual Stats</h3>
+ <p>Beautiful charts and graphs of your file system</p>
+ </div>
+ <div class="feature-card">
+ <span class="icon">🔍</span>
+ <h3>Deep Scan</h3>
+ <p>Analyze nested folder structures with ease</p>
+ </div>
+ <div class="feature-card">
+ <span class="icon">📈</span>
+ <h3>Trends</h3>
+ <p>Track changes and growth over time</p>
+ </div>
+ </div>
+ </section>
+
+ <section id="demo" class="demo">
+ <h2>Live Demo</h2>
+ <div class="stats-container">
+ <div class="stats-panel" id="statsPanel">
+ <div class="folder-path">/Users/Documents</div>
+ <div class="stats-grid">
+ <div class="stat-item">
+ <span class="stat-label">Total Size</span>
+ <span class="stat-value" id="totalSize">0 GB</span>
+ </div>
+ <div class="stat-item">
+ <span class="stat-label">Files</span>
+ <span class="stat-value" id="fileCount">0</span>
+ </div>
+ <div class="stat-item">
+ <span class="stat-label">Folders</span>
+ <span class="stat-value" id="folderCount">0</span>
+ </div>
+ </div>
+ <div class="visualization" id="visualization"></div>
+ </div>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <p>FolderStats - Made with 💙 for file organization</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..c4f4771
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://foldermetrics.scroll.pub
+metaTags
+editButton /edit.html
+title FolderStats - File System Analytics
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..c462579
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "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<header>\n <nav>\n <div class=\"logo\">📊 FolderStats</div>\n <div class=\"nav-links\">\n <a href=\"#features\">Features</a>\n <a href=\"#demo\">Demo</a>\n <a href=\"#about\">About</a>\n </div>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <h1>Analyze Your File System</h1>\n <p>Powerful folder statistics and insights at your fingertips</p>\n <button class=\"cta-button\" id=\"analyzeBtn\">Analyze Folder</button>\n </section>\n\n <section id=\"features\" class=\"features\">\n <h2>Features</h2>\n <div class=\"feature-grid\">\n <div class=\"feature-card\">\n <span class=\"icon\">📁</span>\n <h3>Size Analysis</h3>\n <p>Get detailed size breakdowns of folders and subfolders</p>\n </div>\n <div class=\"feature-card\">\n <span class=\"icon\">📊</span>\n <h3>Visual Stats</h3>\n <p>Beautiful charts and graphs of your file system</p>\n </div>\n <div class=\"feature-card\">\n <span class=\"icon\">🔍</span>\n <h3>Deep Scan</h3>\n <p>Analyze nested folder structures with ease</p>\n </div>\n <div class=\"feature-card\">\n <span class=\"icon\">📈</span>\n <h3>Trends</h3>\n <p>Track changes and growth over time</p>\n </div>\n </div>\n </section>\n\n <section id=\"demo\" class=\"demo\">\n <h2>Live Demo</h2>\n <div class=\"stats-container\">\n <div class=\"stats-panel\" id=\"statsPanel\">\n <div class=\"folder-path\">/Users/Documents</div>\n <div class=\"stats-grid\">\n <div class=\"stat-item\">\n <span class=\"stat-label\">Total Size</span>\n <span class=\"stat-value\" id=\"totalSize\">0 GB</span>\n </div>\n <div class=\"stat-item\">\n <span class=\"stat-label\">Files</span>\n <span class=\"stat-value\" id=\"fileCount\">0</span>\n </div>\n <div class=\"stat-item\">\n <span class=\"stat-label\">Folders</span>\n <span class=\"stat-value\" id=\"folderCount\">0</span>\n </div>\n </div>\n <div class=\"visualization\" id=\"visualization\"></div>\n </div>\n </div>\n </section>\n</main>\n\n<footer>\n <p>FolderStats - Made with 💙 for file organization</p>\n</footer>\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
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..08b76b2
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,3 @@
+# foldermetrics.scroll.pub
+
+website generated by Claude from prompt: folderstats
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..140e3de
--- /dev/null
+++ b/script.js
@@ -0,0 +1,70 @@
+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);
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..ec13b22
--- /dev/null
+++ b/style.css
@@ -0,0 +1,197 @@
+: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;
+ }
+}