commit 6f248c1a4addf6afd90d5089565d1955f67abb78
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 14:12:19 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..fa9b181
--- /dev/null
+++ b/body.html
@@ -0,0 +1,54 @@
+<header class="header">
+ <nav class="navbar">
+ <div class="logo">DashNexus</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>Active Users</h3>
+ <p>1,234</p>
+ </div>
+ <div class="widget" draggable="true">
+ <h3>Revenue</h3>
+ <p>$12,345</p>
+ </div>
+ <div class="widget" draggable="true">
+ <h3>Engagement</h3>
+ <p>78%</p>
+ </div>
+ </div>
+ </section>
+
+ <section id="analytics" class="glass-panel">
+ <h2>Analytics</h2>
+ <div class="chart-container">
+ <canvas id="lineChart"></canvas>
+ </div>
+ </section>
+
+ <section id="settings" class="glass-panel">
+ <h2>Settings</h2>
+ <form class="settings-form">
+ <label for="theme">Theme:</label>
+ <select id="theme" name="theme">
+ <option value="dark">Dark</option>
+ <option value="light">Light</option>
+ </select>
+ <button type="submit">Save</button>
+ </form>
+ </section>
+</main>
+
+<footer class="footer">
+ <p>DashNexus - Futuristic Dashboard</p>
+</footer>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..ab95051
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://dashnexus.scroll.pub
+metaTags
+editButton /edit.html
+title DashNexus - 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..9aa006f
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,25 @@
+{
+ "id": "f9fd8a91-b6b8-4dfd-bb09-24abd460d4ab",
+ "object": "chat.completion",
+ "created": 1735395114,
+ "model": "deepseek-chat",
+ "choices": [
+ {
+ "index": 0,
+ "message": {
+ "role": "assistant",
+ "content": "---domain---\ndashnexus.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://dashnexus.scroll.pub\nmetaTags\neditButton /edit.html\ntitle DashNexus - Futuristic Dashboard\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header class=\"header\">\n <nav class=\"navbar\">\n <div class=\"logo\">DashNexus</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>Active Users</h3>\n <p>1,234</p>\n </div>\n <div class=\"widget\" draggable=\"true\">\n <h3>Revenue</h3>\n <p>$12,345</p>\n </div>\n <div class=\"widget\" draggable=\"true\">\n <h3>Engagement</h3>\n <p>78%</p>\n </div>\n </div>\n </section>\n\n <section id=\"analytics\" class=\"glass-panel\">\n <h2>Analytics</h2>\n <div class=\"chart-container\">\n <canvas id=\"lineChart\"></canvas>\n </div>\n </section>\n\n <section id=\"settings\" class=\"glass-panel\">\n <h2>Settings</h2>\n <form class=\"settings-form\">\n <label for=\"theme\">Theme:</label>\n <select id=\"theme\" name=\"theme\">\n <option value=\"dark\">Dark</option>\n <option value=\"light\">Light</option>\n </select>\n <button type=\"submit\">Save</button>\n </form>\n </section>\n</main>\n\n<footer class=\"footer\">\n <p>DashNexus - Futuristic Dashboard</p>\n</footer>\n---style.css---\n:root {\n --primary-color: #00ffff;\n --secondary-color: #ff00ff;\n --background-color: #1a1a1a;\n --glass-color: rgba(255, 255, 255, 0.1);\n --blur: 10px;\n}\n\nbody {\n background-color: var(--background-color);\n color: white;\n font-family: 'Arial', sans-serif;\n margin: 0;\n padding: 0;\n overflow-x: hidden;\n}\n\n.header {\n background: var(--glass-color);\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(--primary-color);\n}\n\n.nav-links {\n list-style: none;\n display: flex;\n gap: 1rem;\n}\n\n.nav-links a {\n color: white;\n text-decoration: none;\n transition: color 0.3s;\n}\n\n.nav-links a:hover {\n color: var(--primary-color);\n}\n\n.menu-toggle {\n display: none;\n background: none;\n border: none;\n color: white;\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-color);\n backdrop-filter: blur(var(--blur));\n border-radius: 1rem;\n padding: 1.5rem;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\n.widgets {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1rem;\n}\n\n.widget {\n background: var(--glass-color);\n backdrop-filter: blur(var(--blur));\n border-radius: 0.5rem;\n padding: 1rem;\n text-align: center;\n cursor: grab;\n transition: transform 0.3s, box-shadow 0.3s;\n}\n\n.widget:hover {\n transform: translateY(-5px);\n box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);\n}\n\n.chart-container {\n width: 100%;\n height: 300px;\n}\n\n.settings-form {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.settings-form label {\n font-weight: bold;\n}\n\n.settings-form select, .settings-form button {\n padding: 0.5rem;\n border-radius: 0.5rem;\n border: none;\n background: var(--glass-color);\n color: white;\n}\n\n.settings-form button {\n background: var(--primary-color);\n cursor: pointer;\n}\n\n.footer {\n text-align: center;\n padding: 1rem;\n background: var(--glass-color);\n backdrop-filter: blur(var(--blur));\n margin-top: 2rem;\n}\n\n@media (max-width: 768px) {\n .nav-links {\n display: none;\n flex-direction: column;\n gap: 0.5rem;\n }\n\n .menu-toggle {\n display: block;\n }\n\n .dashboard {\n padding: 1rem;\n }\n\n .widgets {\n grid-template-columns: 1fr;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n const menuToggle = document.querySelector('.menu-toggle');\n const navLinks = document.querySelector('.nav-links');\n\n menuToggle.addEventListener('click', function() {\n navLinks.classList.toggle('active');\n });\n\n const widgets = document.querySelectorAll('.widget');\n widgets.forEach(widget => {\n widget.addEventListener('dragstart', function(e) {\n e.dataTransfer.setData('text/plain', e.target.id);\n setTimeout(() => {\n e.target.classList.add('dragging');\n }, 0);\n });\n\n widget.addEventListener('dragend', function(e) {\n e.target.classList.remove('dragging');\n });\n });\n\n const dropZones = document.querySelectorAll('.glass-panel');\n dropZones.forEach(zone => {\n zone.addEventListener('dragover', function(e) {\n e.preventDefault();\n zone.classList.add('dragover');\n });\n\n zone.addEventListener('dragleave', function() {\n zone.classList.remove('dragover');\n });\n\n zone.addEventListener('drop', function(e) {\n e.preventDefault();\n const id = e.dataTransfer.getData('text/plain');\n const draggable = document.getElementById(id);\n zone.appendChild(draggable);\n zone.classList.remove('dragover');\n });\n });\n\n const themeSelect = document.getElementById('theme');\n themeSelect.addEventListener('change', function() {\n document.body.classList.toggle('light-theme', themeSelect.value === 'light');\n });\n\n const ctx = document.getElementById('lineChart').getContext('2d');\n new Chart(ctx, {\n type: 'line',\n data: {\n labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],\n datasets: [{\n label: 'Active Users',\n data: [1000, 1200, 1300, 1400, 1500, 1600],\n borderColor: var(--primary-color),\n borderWidth: 2,\n fill: false\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n y: {\n beginAtZero: true\n }\n }\n }\n });\n});\n---end---"
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 442,
+ "completion_tokens": 1790,
+ "total_tokens": 2232,
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 442
+ },
+ "system_fingerprint": "fp_f1afce2943"
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..44f4ebc
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# dashnexus.scroll.pub
+Website generated by DeepSeek from prompt: A fully functioning 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..256dbb0
--- /dev/null
+++ b/script.js
@@ -0,0 +1,71 @@
+document.addEventListener('DOMContentLoaded', function() {
+ const menuToggle = document.querySelector('.menu-toggle');
+ const navLinks = document.querySelector('.nav-links');
+
+ menuToggle.addEventListener('click', function() {
+ navLinks.classList.toggle('active');
+ });
+
+ const widgets = document.querySelectorAll('.widget');
+ widgets.forEach(widget => {
+ widget.addEventListener('dragstart', function(e) {
+ e.dataTransfer.setData('text/plain', e.target.id);
+ setTimeout(() => {
+ e.target.classList.add('dragging');
+ }, 0);
+ });
+
+ widget.addEventListener('dragend', function(e) {
+ e.target.classList.remove('dragging');
+ });
+ });
+
+ const dropZones = document.querySelectorAll('.glass-panel');
+ dropZones.forEach(zone => {
+ zone.addEventListener('dragover', function(e) {
+ e.preventDefault();
+ zone.classList.add('dragover');
+ });
+
+ zone.addEventListener('dragleave', function() {
+ zone.classList.remove('dragover');
+ });
+
+ zone.addEventListener('drop', function(e) {
+ e.preventDefault();
+ const id = e.dataTransfer.getData('text/plain');
+ const draggable = document.getElementById(id);
+ zone.appendChild(draggable);
+ zone.classList.remove('dragover');
+ });
+ });
+
+ const themeSelect = document.getElementById('theme');
+ themeSelect.addEventListener('change', function() {
+ document.body.classList.toggle('light-theme', themeSelect.value === 'light');
+ });
+
+ const ctx = document.getElementById('lineChart').getContext('2d');
+ new Chart(ctx, {
+ type: 'line',
+ data: {
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+ datasets: [{
+ label: 'Active Users',
+ data: [1000, 1200, 1300, 1400, 1500, 1600],
+ borderColor: var(--primary-color),
+ borderWidth: 2,
+ fill: false
+ }]
+ },
+ options: {
+ responsive: true,
+ maintainAspectRatio: false,
+ scales: {
+ y: {
+ beginAtZero: true
+ }
+ }
+ }
+ });
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..21615bc
--- /dev/null
+++ b/style.css
@@ -0,0 +1,153 @@
+:root {
+ --primary-color: #00ffff;
+ --secondary-color: #ff00ff;
+ --background-color: #1a1a1a;
+ --glass-color: rgba(255, 255, 255, 0.1);
+ --blur: 10px;
+}
+
+body {
+ background-color: var(--background-color);
+ color: white;
+ font-family: 'Arial', sans-serif;
+ margin: 0;
+ padding: 0;
+ overflow-x: hidden;
+}
+
+.header {
+ background: var(--glass-color);
+ 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(--primary-color);
+}
+
+.nav-links {
+ list-style: none;
+ display: flex;
+ gap: 1rem;
+}
+
+.nav-links a {
+ color: white;
+ text-decoration: none;
+ transition: color 0.3s;
+}
+
+.nav-links a:hover {
+ color: var(--primary-color);
+}
+
+.menu-toggle {
+ display: none;
+ background: none;
+ border: none;
+ color: white;
+ font-size: 1.5rem;
+ cursor: pointer;
+}
+
+.dashboard {
+ padding: 2rem;
+ display: grid;
+ gap: 2rem;
+}
+
+.glass-panel {
+ background: var(--glass-color);
+ backdrop-filter: blur(var(--blur));
+ border-radius: 1rem;
+ padding: 1.5rem;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.widgets {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 1rem;
+}
+
+.widget {
+ background: var(--glass-color);
+ backdrop-filter: blur(var(--blur));
+ border-radius: 0.5rem;
+ padding: 1rem;
+ text-align: center;
+ cursor: grab;
+ transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.widget:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+}
+
+.chart-container {
+ width: 100%;
+ height: 300px;
+}
+
+.settings-form {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+.settings-form label {
+ font-weight: bold;
+}
+
+.settings-form select, .settings-form button {
+ padding: 0.5rem;
+ border-radius: 0.5rem;
+ border: none;
+ background: var(--glass-color);
+ color: white;
+}
+
+.settings-form button {
+ background: var(--primary-color);
+ cursor: pointer;
+}
+
+.footer {
+ text-align: center;
+ padding: 1rem;
+ background: var(--glass-color);
+ backdrop-filter: blur(var(--blur));
+ margin-top: 2rem;
+}
+
+@media (max-width: 768px) {
+ .nav-links {
+ display: none;
+ flex-direction: column;
+ gap: 0.5rem;
+ }
+
+ .menu-toggle {
+ display: block;
+ }
+
+ .dashboard {
+ padding: 1rem;
+ }
+
+ .widgets {
+ grid-template-columns: 1fr;
+ }
+}
\ No newline at end of file