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