Last 10 Commits for modash.scroll.pub

commit 4a78711df16a1bf2bbd196c08ac74d878969e7aa Author: root <root@hub.scroll.pub> Date: 2025-01-08 04:53:01 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..84979af --- /dev/null +++ b/body.html @@ -0,0 +1,77 @@ +<header> + <nav> + <div class="logo">ModDash</div> + <div class="nav-links"> + <a href="#dashboard" class="active">Dashboard</a> + <a href="#analytics">Analytics</a> + <a href="#reports">Reports</a> + <a href="#settings">Settings</a> + </div> + <button class="theme-toggle" aria-label="Toggle dark mode"> + <i class="moon-icon"></i> + </button> + </nav> +</header> + +<main> + <aside class="sidebar"> + <div class="user-profile"> + <div class="avatar"></div> + <h2>John Doe</h2> + <p>Admin</p> + </div> + <nav class="side-nav"> + <a href="#overview" class="active">Overview</a> + <a href="#sales">Sales</a> + <a href="#customers">Customers</a> + <a href="#inventory">Inventory</a> + </nav> + </aside> + + <div class="dashboard-content"> + <div class="stats-grid"> + <div class="stat-card"> + <h3>Total Revenue</h3> + <p class="stat-value">$124,563</p> + <span class="trend positive">+12.5%</span> + </div> + <div class="stat-card"> + <h3>Active Users</h3> + <p class="stat-value">8,942</p> + <span class="trend positive">+5.2%</span> + </div> + <div class="stat-card"> + <h3>Conversion Rate</h3> + <p class="stat-value">2.4%</p> + <span class="trend negative">-0.8%</span> + </div> + <div class="stat-card"> + <h3>Avg. Order Value</h3> + <p class="stat-value">$86</p> + <span class="trend positive">+3.1%</span> + </div> + </div> + + <div class="charts-container"> + <div class="chart-card"> + <h3>Revenue Overview</h3> + <canvas id="revenueChart"></canvas> + </div> + <div class="chart-card"> + <h3>User Activity</h3> + <canvas id="usersChart"></canvas> + </div> + </div> + + <div class="recent-activity"> + <h3>Recent Activity</h3> + <div class="activity-list"> +  + </div> + </div> + </div> +</main> + +<footer> + <p>ModDash - Modern Analytics Dashboard</p> +</footer> diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..42d621c --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://modash.scroll.pub +metaTags +editButton /edit.html +title ModDash - Modern Analytics Dashboard +style.css +body.html +script.js diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..19d8033 --- /dev/null +++ b/prompt.json @@ -0,0 +1,20 @@ +{ + "id": "msg_01J6QSAqeJdL1zVPg4v5TNaZ", + "type": "message", + "role": "assistant", + "model": "claude-3-5-sonnet-20241022", + "content": [ + { + "type": "text", + "text": "Let me create a modern dashboard website with fictional data.\n\n---domain---\nmodash.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://modash.scroll.pub\nmetaTags\neditButton /edit.html\ntitle ModDash - Modern Analytics Dashboard\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">ModDash</div>\n <div class=\"nav-links\">\n <a href=\"#dashboard\" class=\"active\">Dashboard</a>\n <a href=\"#analytics\">Analytics</a>\n <a href=\"#reports\">Reports</a>\n <a href=\"#settings\">Settings</a>\n </div>\n <button class=\"theme-toggle\" aria-label=\"Toggle dark mode\">\n <i class=\"moon-icon\"></i>\n </button>\n </nav>\n</header>\n\n<main>\n <aside class=\"sidebar\">\n <div class=\"user-profile\">\n <div class=\"avatar\"></div>\n <h2>John Doe</h2>\n <p>Admin</p>\n </div>\n <nav class=\"side-nav\">\n <a href=\"#overview\" class=\"active\">Overview</a>\n <a href=\"#sales\">Sales</a>\n <a href=\"#customers\">Customers</a>\n <a href=\"#inventory\">Inventory</a>\n </nav>\n </aside>\n\n <div class=\"dashboard-content\">\n <div class=\"stats-grid\">\n <div class=\"stat-card\">\n <h3>Total Revenue</h3>\n <p class=\"stat-value\">$124,563</p>\n <span class=\"trend positive\">+12.5%</span>\n </div>\n <div class=\"stat-card\">\n <h3>Active Users</h3>\n <p class=\"stat-value\">8,942</p>\n <span class=\"trend positive\">+5.2%</span>\n </div>\n <div class=\"stat-card\">\n <h3>Conversion Rate</h3>\n <p class=\"stat-value\">2.4%</p>\n <span class=\"trend negative\">-0.8%</span>\n </div>\n <div class=\"stat-card\">\n <h3>Avg. Order Value</h3>\n <p class=\"stat-value\">$86</p>\n <span class=\"trend positive\">+3.1%</span>\n </div>\n </div>\n\n <div class=\"charts-container\">\n <div class=\"chart-card\">\n <h3>Revenue Overview</h3>\n <canvas id=\"revenueChart\"></canvas>\n </div>\n <div class=\"chart-card\">\n <h3>User Activity</h3>\n <canvas id=\"usersChart\"></canvas>\n </div>\n </div>\n\n <div class=\"recent-activity\">\n <h3>Recent Activity</h3>\n <div class=\"activity-list\">\n \n </div>\n </div>\n </div>\n</main>\n\n<footer>\n <p>ModDash - Modern Analytics Dashboard</p>\n</footer>\n\n---style.css---\n:root {\n --primary: #6366f1;\n --secondary: #4f46e5;\n --background: #f8fafc;\n --surface: #ffffff;\n --text: #1e293b;\n --text-light: #64748b;\n --border: #e2e8f0;\n --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);\n}\n\n[data-theme=\"dark\"] {\n --background: #0f172a;\n --surface: #1e293b;\n --text: #f1f5f9;\n --text-light: #94a3b8;\n --border: #334155;\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 background: var(--background);\n color: var(--text);\n line-height: 1.5;\n transition: background-color 0.3s ease;\n}\n\nheader {\n background: var(--surface);\n box-shadow: var(--shadow);\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 100;\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 2rem;\n max-width: 1400px;\n margin: 0 auto;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n color: var(--primary);\n}\n\n.nav-links a {\n color: var(--text);\n text-decoration: none;\n padding: 0.5rem 1rem;\n border-radius: 0.5rem;\n transition: background-color 0.2s ease;\n}\n\n.nav-links a:hover,\n.nav-links a.active {\n background: var(--primary);\n color: white;\n}\n\nmain {\n display: grid;\n grid-template-columns: 250px 1fr;\n gap: 2rem;\n max-width: 1400px;\n margin: 5rem auto 2rem;\n padding: 0 2rem;\n}\n\n.sidebar {\n background: var(--surface);\n border-radius: 1rem;\n padding: 2rem;\n height: fit-content;\n position: sticky;\n top: 5rem;\n}\n\n.user-profile {\n text-align: center;\n margin-bottom: 2rem;\n}\n\n.avatar {\n width: 80px;\n height: 80px;\n border-radius: 50%;\n background: var(--primary);\n margin: 0 auto 1rem;\n}\n\n.side-nav {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.side-nav a {\n color: var(--text);\n text-decoration: none;\n padding: 0.75rem 1rem;\n border-radius: 0.5rem;\n transition: all 0.2s ease;\n}\n\n.side-nav a:hover,\n.side-nav a.active {\n background: var(--primary);\n color: white;\n}\n\n.stats-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n gap: 1.5rem;\n margin-bottom: 2rem;\n}\n\n.stat-card {\n background: var(--surface);\n padding: 1.5rem;\n border-radius: 1rem;\n box-shadow: var(--shadow);\n}\n\n.stat-value {\n font-size: 2rem;\n font-weight: bold;\n margin: 0.5rem 0;\n}\n\n.trend {\n font-size: 0.875rem;\n padding: 0.25rem 0.5rem;\n border-radius: 0.25rem;\n}\n\n.trend.positive {\n background: #dcfce7;\n color: #166534;\n}\n\n.trend.negative {\n background: #fee2e2;\n color: #991b1b;\n}\n\n.charts-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));\n gap: 1.5rem;\n margin-bottom: 2rem;\n}\n\n.chart-card {\n background: var(--surface);\n padding: 1.5rem;\n border-radius: 1rem;\n box-shadow: var(--shadow);\n}\n\n.recent-activity {\n background: var(--surface);\n padding: 1.5rem;\n border-radius: 1rem;\n box-shadow: var(--shadow);\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n color: var(--text-light);\n}\n\n@media (max-width: 768px) {\n main {\n grid-template-columns: 1fr;\n }\n\n .sidebar {\n position: static;\n }\n\n .nav-links {\n display: none;\n }\n}\n\n---script.js---\n// Theme toggling\nconst themeToggle = document.querySelector('.theme-toggle');\nconst prefersDark = window.matchMedia('(prefers-color-scheme: dark)');\n\nfunction setTheme(isDark) {\n document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');\n localStorage.setItem('theme', isDark ? 'dark' : 'light');\n}\n\nthemeToggle.addEventListener('click', () => {\n const isDark = document.documentElement.getAttribute('data-theme') === 'dark';\n setTheme(!isDark);\n});\n\n// Initialize theme\nconst savedTheme = localStorage.getItem('theme');\nif (savedTheme) {\n setTheme(savedTheme === 'dark');\n} else {\n setTheme(prefersDark.matches);\n}\n\n// Charts initialization (using canvas 2D context for simplicity)\nfunction initializeCharts() {\n const revenueCtx = document.getElementById('revenueChart').getContext('2d');\n const usersCtx = document.getElementById('usersChart').getContext('2d');\n\n // Simple line drawing for demonstration\n function drawLine(ctx, points, color) {\n ctx.beginPath();\n ctx.strokeStyle = color;\n ctx.lineWidth = 2;\n points.forEach((point, index) => {\n if (index === 0) {\n ctx.moveTo(point.x, point.y);\n } else {\n ctx.lineTo(point.x, point.y);\n }\n });\n ctx.stroke();\n }\n\n // Generate random data points\n const revenueData = Array.from({length: 12}, (_, i) => ({\n x: i * 30,\n y: 100 + Math.random() * 100\n }));\n\n const userData = Array.from({length: 12}, (_, i) => ({\n x: i * 30,\n y: 100 + Math.random() * 100\n }));\n\n drawLine(revenueCtx, revenueData, '#6366f1');\n drawLine(usersCtx, userData, '#4f46e5');\n}\n\n// Recent activity data\nconst activityData = [\n { action: 'New order received', time: '2 minutes ago' },\n { action: 'User registration', time: '15 minutes ago' },\n { action: 'Payment processed', time: '1 hour ago' },\n { action: 'Inventory updated', time: '2 hours ago' },\n];\n\nfunction populateActivity() {\n const activityList = document.querySelector('.activity-list');\n activityData.forEach(item => {\n const div = document.createElement('div');\n div.className = 'activity-item';\n div.innerHTML = `\n <p>${item.action}</p>\n <span>${item.time}</span>\n `;\n activityList.appendChild(div);\n });\n}\n\n// Initialize everything when DOM is loaded\ndocument.addEventListener('DOMContentLoaded', () => {\n initializeCharts();\n populateActivity();\n});\n\n---end---\n\nThis creates a modern, responsive dashboard with:\n- Dark/light theme support\n- Responsive layout\n- Interactive charts (simplified for demo)\n- Activity feed\n- Stats cards with trends\n- Clean, accessible navigation\n- Modern CSS with CSS variables\n- Smooth transitions and hover effects\n- Mobile-friendly design\n\nThe design follows modern best practices and uses semantic HTML5 elements. All functionality is implemented with vanilla JavaScript, and the styling uses modern CSS features while maintaining broad browser compatibility." + } + ], + "stop_reason": "end_turn", + "stop_sequence": null, + "usage": { + "input_tokens": 284, + "cache_creation_input_tokens": 0, + "cache_read_input_tokens": 0, + "output_tokens": 3044 + } +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..777dc92 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,3 @@ +# modash.scroll.pub + +website generated by Claude from prompt: vamos criar uma dashboard moderna completa, com dados fictícios \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..db72cb1 --- /dev/null +++ b/script.js @@ -0,0 +1,83 @@ +// Theme toggling +const themeToggle = document.querySelector('.theme-toggle'); +const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); + +function setTheme(isDark) { + document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light'); + localStorage.setItem('theme', isDark ? 'dark' : 'light'); +} + +themeToggle.addEventListener('click', () => { + const isDark = document.documentElement.getAttribute('data-theme') === 'dark'; + setTheme(!isDark); +}); + +// Initialize theme +const savedTheme = localStorage.getItem('theme'); +if (savedTheme) { + setTheme(savedTheme === 'dark'); +} else { + setTheme(prefersDark.matches); +} + +// Charts initialization (using canvas 2D context for simplicity) +function initializeCharts() { + const revenueCtx = document.getElementById('revenueChart').getContext('2d'); + const usersCtx = document.getElementById('usersChart').getContext('2d'); + + // Simple line drawing for demonstration + function drawLine(ctx, points, color) { + ctx.beginPath(); + ctx.strokeStyle = color; + ctx.lineWidth = 2; + points.forEach((point, index) => { + if (index === 0) { + ctx.moveTo(point.x, point.y); + } else { + ctx.lineTo(point.x, point.y); + } + }); + ctx.stroke(); + } + + // Generate random data points + const revenueData = Array.from({length: 12}, (_, i) => ({ + x: i * 30, + y: 100 + Math.random() * 100 + })); + + const userData = Array.from({length: 12}, (_, i) => ({ + x: i * 30, + y: 100 + Math.random() * 100 + })); + + drawLine(revenueCtx, revenueData, '#6366f1'); + drawLine(usersCtx, userData, '#4f46e5'); +} + +// Recent activity data +const activityData = [ + { action: 'New order received', time: '2 minutes ago' }, + { action: 'User registration', time: '15 minutes ago' }, + { action: 'Payment processed', time: '1 hour ago' }, + { action: 'Inventory updated', time: '2 hours ago' }, +]; + +function populateActivity() { + const activityList = document.querySelector('.activity-list'); + activityData.forEach(item => { + const div = document.createElement('div'); + div.className = 'activity-item'; + div.innerHTML = ` + <p>${item.action}</p> + <span>${item.time}</span> + `; + activityList.appendChild(div); + }); +} + +// Initialize everything when DOM is loaded +document.addEventListener('DOMContentLoaded', () => { + initializeCharts(); + populateActivity(); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..471af14 --- /dev/null +++ b/style.css @@ -0,0 +1,198 @@ +:root { + --primary: #6366f1; + --secondary: #4f46e5; + --background: #f8fafc; + --surface: #ffffff; + --text: #1e293b; + --text-light: #64748b; + --border: #e2e8f0; + --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); +} + +[data-theme="dark"] { + --background: #0f172a; + --surface: #1e293b; + --text: #f1f5f9; + --text-light: #94a3b8; + --border: #334155; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: system-ui, -apple-system, sans-serif; + background: var(--background); + color: var(--text); + line-height: 1.5; + transition: background-color 0.3s ease; +} + +header { + background: var(--surface); + box-shadow: var(--shadow); + position: fixed; + width: 100%; + top: 0; + z-index: 100; +} + +nav { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 2rem; + max-width: 1400px; + margin: 0 auto; +} + +.logo { + font-size: 1.5rem; + font-weight: bold; + color: var(--primary); +} + +.nav-links a { + color: var(--text); + text-decoration: none; + padding: 0.5rem 1rem; + border-radius: 0.5rem; + transition: background-color 0.2s ease; +} + +.nav-links a:hover, +.nav-links a.active { + background: var(--primary); + color: white; +} + +main { + display: grid; + grid-template-columns: 250px 1fr; + gap: 2rem; + max-width: 1400px; + margin: 5rem auto 2rem; + padding: 0 2rem; +} + +.sidebar { + background: var(--surface); + border-radius: 1rem; + padding: 2rem; + height: fit-content; + position: sticky; + top: 5rem; +} + +.user-profile { + text-align: center; + margin-bottom: 2rem; +} + +.avatar { + width: 80px; + height: 80px; + border-radius: 50%; + background: var(--primary); + margin: 0 auto 1rem; +} + +.side-nav { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.side-nav a { + color: var(--text); + text-decoration: none; + padding: 0.75rem 1rem; + border-radius: 0.5rem; + transition: all 0.2s ease; +} + +.side-nav a:hover, +.side-nav a.active { + background: var(--primary); + color: white; +} + +.stats-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + gap: 1.5rem; + margin-bottom: 2rem; +} + +.stat-card { + background: var(--surface); + padding: 1.5rem; + border-radius: 1rem; + box-shadow: var(--shadow); +} + +.stat-value { + font-size: 2rem; + font-weight: bold; + margin: 0.5rem 0; +} + +.trend { + font-size: 0.875rem; + padding: 0.25rem 0.5rem; + border-radius: 0.25rem; +} + +.trend.positive { + background: #dcfce7; + color: #166534; +} + +.trend.negative { + background: #fee2e2; + color: #991b1b; +} + +.charts-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); + gap: 1.5rem; + margin-bottom: 2rem; +} + +.chart-card { + background: var(--surface); + padding: 1.5rem; + border-radius: 1rem; + box-shadow: var(--shadow); +} + +.recent-activity { + background: var(--surface); + padding: 1.5rem; + border-radius: 1rem; + box-shadow: var(--shadow); +} + +footer { + text-align: center; + padding: 2rem; + color: var(--text-light); +} + +@media (max-width: 768px) { + main { + grid-template-columns: 1fr; + } + + .sidebar { + position: static; + } + + .nav-links { + display: none; + } +}