commit 96c90f59f1512684940ca59b1ebb856451e12b41
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 14:09:51 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..6f7599f
--- /dev/null
+++ b/body.html
@@ -0,0 +1,56 @@
+<header class="header">
+ <nav class="navbar">
+ <div class="logo">DashFlow</div>
+ <ul class="nav-links">
+ <li><a href="#overview">Overview</a></li>
+ <li><a href="#analytics">Analytics</a></li>
+ <li><a href="#settings">Settings</a></li>
+ </ul>
+ <button class="menu-toggle" aria-label="Toggle menu">☰</button>
+ </nav>
+</header>
+
+<main class="dashboard">
+ <section id="overview" class="glass-panel">
+ <h2>Overview</h2>
+ <div class="widgets">
+ <div class="widget" draggable="true">
+ <h3>Sales</h3>
+ <canvas id="salesChart"></canvas>
+ </div>
+ <div class="widget" draggable="true">
+ <h3>Traffic</h3>
+ <canvas id="trafficChart"></canvas>
+ </div>
+ </div>
+ </section>
+
+ <section id="analytics" class="glass-panel">
+ <h2>Analytics</h2>
+ <div class="widgets">
+ <div class="widget" draggable="true">
+ <h3>Revenue</h3>
+ <canvas id="revenueChart"></canvas>
+ </div>
+ <div class="widget" draggable="true">
+ <h3>Users</h3>
+ <canvas id="usersChart"></canvas>
+ </div>
+ </div>
+ </section>
+
+ <section id="settings" class="glass-panel">
+ <h2>Settings</h2>
+ <div class="settings-content">
+ <label for="theme">Theme:</label>
+ <select id="theme">
+ <option value="dark">Dark</option>
+ <option value="light">Light</option>
+ </select>
+ </div>
+ </section>
+</main>
+
+<footer class="footer">
+ <p>DashFlow - Futuristic Dashboard</p>
+</footer>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..48e44f8
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://dashflow.scroll.pub
+metaTags
+editButton /edit.html
+title DashFlow - Futuristic Dashboard
+style.css
+body.html
+script.js
\ No newline at end of file
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..0597871
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,25 @@
+{
+ "id": "ddab369f-db6d-4d4c-89bb-153626dc1b11",
+ "object": "chat.completion",
+ "created": 1735394972,
+ "model": "deepseek-chat",
+ "choices": [
+ {
+ "index": 0,
+ "message": {
+ "role": "assistant",
+ "content": "---domain---\ndashflow.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://dashflow.scroll.pub\nmetaTags\neditButton /edit.html\ntitle DashFlow - Futuristic Dashboard\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header class=\"header\">\n <nav class=\"navbar\">\n <div class=\"logo\">DashFlow</div>\n <ul class=\"nav-links\">\n <li><a href=\"#overview\">Overview</a></li>\n <li><a href=\"#analytics\">Analytics</a></li>\n <li><a href=\"#settings\">Settings</a></li>\n </ul>\n <button class=\"menu-toggle\" aria-label=\"Toggle menu\">☰</button>\n </nav>\n</header>\n\n<main class=\"dashboard\">\n <section id=\"overview\" class=\"glass-panel\">\n <h2>Overview</h2>\n <div class=\"widgets\">\n <div class=\"widget\" draggable=\"true\">\n <h3>Sales</h3>\n <canvas id=\"salesChart\"></canvas>\n </div>\n <div class=\"widget\" draggable=\"true\">\n <h3>Traffic</h3>\n <canvas id=\"trafficChart\"></canvas>\n </div>\n </div>\n </section>\n\n <section id=\"analytics\" class=\"glass-panel\">\n <h2>Analytics</h2>\n <div class=\"widgets\">\n <div class=\"widget\" draggable=\"true\">\n <h3>Revenue</h3>\n <canvas id=\"revenueChart\"></canvas>\n </div>\n <div class=\"widget\" draggable=\"true\">\n <h3>Users</h3>\n <canvas id=\"usersChart\"></canvas>\n </div>\n </div>\n </section>\n\n <section id=\"settings\" class=\"glass-panel\">\n <h2>Settings</h2>\n <div class=\"settings-content\">\n <label for=\"theme\">Theme:</label>\n <select id=\"theme\">\n <option value=\"dark\">Dark</option>\n <option value=\"light\">Light</option>\n </select>\n </div>\n </section>\n</main>\n\n<footer class=\"footer\">\n <p>DashFlow - Futuristic Dashboard</p>\n</footer>\n---style.css---\n:root {\n --bg-color: #1a1a1a;\n --text-color: #ffffff;\n --accent-cyan: #00ffff;\n --accent-purple: #8000ff;\n --glass-bg: rgba(255, 255, 255, 0.1);\n --glass-border: rgba(255, 255, 255, 0.2);\n --blur: 10px;\n}\n\nbody {\n background-color: var(--bg-color);\n color: var(--text-color);\n font-family: 'Arial', sans-serif;\n margin: 0;\n padding: 0;\n overflow-x: hidden;\n}\n\n.header {\n background: var(--glass-bg);\n backdrop-filter: blur(var(--blur));\n padding: 1rem;\n position: sticky;\n top: 0;\n z-index: 1000;\n}\n\n.navbar {\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(--accent-cyan);\n}\n\n.nav-links {\n list-style: none;\n display: flex;\n gap: 1rem;\n}\n\n.nav-links a {\n color: var(--text-color);\n text-decoration: none;\n transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n color: var(--accent-purple);\n}\n\n.menu-toggle {\n display: none;\n background: none;\n border: none;\n color: var(--text-color);\n font-size: 1.5rem;\n cursor: pointer;\n}\n\n.dashboard {\n padding: 2rem;\n display: grid;\n gap: 2rem;\n}\n\n.glass-panel {\n background: var(--glass-bg);\n backdrop-filter: blur(var(--blur));\n border: 1px solid var(--glass-border);\n border-radius: 1rem;\n padding: 1.5rem;\n transition: transform 0.3s ease;\n}\n\n.glass-panel:hover {\n transform: translateY(-5px);\n}\n\n.widgets {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 1.5rem;\n}\n\n.widget {\n background: var(--glass-bg);\n backdrop-filter: blur(var(--blur));\n border: 1px solid var(--glass-border);\n border-radius: 1rem;\n padding: 1rem;\n transition: transform 0.3s ease;\n}\n\n.widget:hover {\n transform: scale(1.05);\n}\n\n.widget h3 {\n color: var(--accent-cyan);\n}\n\ncanvas {\n width: 100%;\n height: 200px;\n}\n\n.footer {\n text-align: center;\n padding: 1rem;\n background: var(--glass-bg);\n backdrop-filter: blur(var(--blur));\n margin-top: 2rem;\n}\n\n@media (max-width: 768px) {\n .nav-links {\n display: none;\n }\n\n .menu-toggle {\n display: block;\n }\n\n .dashboard {\n grid-template-columns: 1fr;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function () {\n const widgets = document.querySelectorAll('.widget');\n const themeSelect = document.getElementById('theme');\n\n widgets.forEach(widget => {\n widget.addEventListener('dragstart', handleDragStart);\n widget.addEventListener('dragend', handleDragEnd);\n });\n\n function handleDragStart(e) {\n e.target.classList.add('dragging');\n }\n\n function handleDragEnd(e) {\n e.target.classList.remove('dragging');\n }\n\n themeSelect.addEventListener('change', function () {\n document.body.classList.toggle('light-theme', this.value === 'light');\n });\n\n document.body.classList.toggle('light-theme', themeSelect.value === 'light');\n});\n---end---"
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 440,
+ "completion_tokens": 1384,
+ "total_tokens": 1824,
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 440
+ },
+ "system_fingerprint": "fp_f1afce2943"
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..89f803a
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# dashflow.scroll.pub
+Website generated by DeepSeek from prompt: A futuristic dashboard website with buttery smooth animations features a sleek, minimalistic design with dark mode as the default theme, accented by neon highlights in cyan and purple. The UI employs glassmorphism, with translucent panels and soft-blurred backgrounds that provide depth. Widgets and data visualizations—like graphs, charts, and metrics—are modular and draggable, responding instantly with fluid, elastic animations. Hover effects include subtle glows and responsive micro-interactions. Navigation utilizes a side or top panel that smoothly expands and collapses. Page transitions feel seamless with fade-ins, slide animations, and parallax scrolling. Loading states are barely noticeable, with skeleton screens and smooth progressive reveals. Interactive elements, such as buttons and toggles, are responsive with tactile feedback animations. The overall aesthetic balances high-tech sophistication with user-friendly clarity, ensuring that data is always the focal point. Advanced UI features like real-time updates, predictive analytics previews, and adaptive layouts ensure functionality matches the visual finesse.
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..7393fa8
--- /dev/null
+++ b/script.js
@@ -0,0 +1,23 @@
+document.addEventListener('DOMContentLoaded', function () {
+ const widgets = document.querySelectorAll('.widget');
+ const themeSelect = document.getElementById('theme');
+
+ widgets.forEach(widget => {
+ widget.addEventListener('dragstart', handleDragStart);
+ widget.addEventListener('dragend', handleDragEnd);
+ });
+
+ function handleDragStart(e) {
+ e.target.classList.add('dragging');
+ }
+
+ function handleDragEnd(e) {
+ e.target.classList.remove('dragging');
+ }
+
+ themeSelect.addEventListener('change', function () {
+ document.body.classList.toggle('light-theme', this.value === 'light');
+ });
+
+ document.body.classList.toggle('light-theme', themeSelect.value === 'light');
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..ca12ce9
--- /dev/null
+++ b/style.css
@@ -0,0 +1,133 @@
+:root {
+ --bg-color: #1a1a1a;
+ --text-color: #ffffff;
+ --accent-cyan: #00ffff;
+ --accent-purple: #8000ff;
+ --glass-bg: rgba(255, 255, 255, 0.1);
+ --glass-border: rgba(255, 255, 255, 0.2);
+ --blur: 10px;
+}
+
+body {
+ background-color: var(--bg-color);
+ color: var(--text-color);
+ font-family: 'Arial', sans-serif;
+ margin: 0;
+ padding: 0;
+ overflow-x: hidden;
+}
+
+.header {
+ background: var(--glass-bg);
+ backdrop-filter: blur(var(--blur));
+ padding: 1rem;
+ position: sticky;
+ top: 0;
+ z-index: 1000;
+}
+
+.navbar {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ color: var(--accent-cyan);
+}
+
+.nav-links {
+ list-style: none;
+ display: flex;
+ gap: 1rem;
+}
+
+.nav-links a {
+ color: var(--text-color);
+ text-decoration: none;
+ transition: color 0.3s ease;
+}
+
+.nav-links a:hover {
+ color: var(--accent-purple);
+}
+
+.menu-toggle {
+ display: none;
+ background: none;
+ border: none;
+ color: var(--text-color);
+ font-size: 1.5rem;
+ cursor: pointer;
+}
+
+.dashboard {
+ padding: 2rem;
+ display: grid;
+ gap: 2rem;
+}
+
+.glass-panel {
+ background: var(--glass-bg);
+ backdrop-filter: blur(var(--blur));
+ border: 1px solid var(--glass-border);
+ border-radius: 1rem;
+ padding: 1.5rem;
+ transition: transform 0.3s ease;
+}
+
+.glass-panel:hover {
+ transform: translateY(-5px);
+}
+
+.widgets {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 1.5rem;
+}
+
+.widget {
+ background: var(--glass-bg);
+ backdrop-filter: blur(var(--blur));
+ border: 1px solid var(--glass-border);
+ border-radius: 1rem;
+ padding: 1rem;
+ transition: transform 0.3s ease;
+}
+
+.widget:hover {
+ transform: scale(1.05);
+}
+
+.widget h3 {
+ color: var(--accent-cyan);
+}
+
+canvas {
+ width: 100%;
+ height: 200px;
+}
+
+.footer {
+ text-align: center;
+ padding: 1rem;
+ background: var(--glass-bg);
+ backdrop-filter: blur(var(--blur));
+ margin-top: 2rem;
+}
+
+@media (max-width: 768px) {
+ .nav-links {
+ display: none;
+ }
+
+ .menu-toggle {
+ display: block;
+ }
+
+ .dashboard {
+ grid-template-columns: 1fr;
+ }
+}
\ No newline at end of file