Overview
\n \nAnalytics
\n\n \n
\n 
body.html
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://dashnexus.scroll.pub
+ metaTags
+ editButton /edit.html
+ title DashNexus - Futuristic Dashboard
+ style.css
+ body.html
+ script.js
prompt.json
Changed around line 1
+ {
+ "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\n \n \n\n\n \n \n\n \n \n\n \n \n \n\n\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"
+ }
readme.scroll
Changed around line 1
+ # 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.
script.js
Changed around line 1
+ 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
+ }
+ }
+ }
+ });
+ });
style.css
Changed around line 1
+ :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;
+ }
+ }