Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Nexus Dashboard | Modern UI Showcase</title> | |
| <!-- Importing FontAwesome for Icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <!-- Importing Google Fonts --> | |
| <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet"> | |
| <style> | |
| /* --- CSS VARIABLES & THEME SETUP --- */ | |
| :root { | |
| /* Default: Cyberpunk Theme */ | |
| --bg-body: #050505; | |
| --bg-panel: rgba(20, 20, 25, 0.6); | |
| --bg-card: rgba(255, 255, 255, 0.03); | |
| --primary: #00f2ff; | |
| --secondary: #7000ff; | |
| --accent: #ff0055; | |
| --text-main: #ffffff; | |
| --text-muted: #8888aa; | |
| --border: 1px solid rgba(255, 255, 255, 0.1); | |
| --shadow-glow: 0 0 20px rgba(0, 242, 255, 0.15); | |
| --font-main: 'Outfit', sans-serif; | |
| --font-mono: 'Space Mono', monospace; | |
| --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| --radius: 16px; | |
| } | |
| /* Light / Minimalist Theme */ | |
| [data-theme="light"] { | |
| --bg-body: #f0f2f5; | |
| --bg-panel: rgba(255, 255, 255, 0.8); | |
| --bg-card: #ffffff; | |
| --primary: #2563eb; | |
| --secondary: #7c3aed; | |
| --accent: #db2777; | |
| --text-main: #1e293b; | |
| --text-muted: #64748b; | |
| --border: 1px solid rgba(0, 0, 0, 0.05); | |
| --shadow-glow: 0 10px 30px rgba(0, 0, 0, 0.05); | |
| } | |
| /* --- GLOBAL RESET --- */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: var(--font-main); | |
| background-color: var(--bg-body); | |
| color: var(--text-main); | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| transition: background-color 0.5s ease; | |
| background-image: | |
| radial-gradient(circle at 10% 20%, rgba(112, 0, 255, 0.1) 0%, transparent 40%), | |
| radial-gradient(circle at 90% 80%, rgba(0, 242, 255, 0.1) 0%, transparent 40%); | |
| background-attachment: fixed; | |
| } | |
| /* --- SCROLLBAR --- */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--bg-body); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--primary); | |
| border-radius: 4px; | |
| } | |
| /* --- LAYOUT UTILITIES --- */ | |
| .container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 2rem; | |
| } | |
| /* --- HEADER --- */ | |
| header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1.5rem 2rem; | |
| margin-bottom: 2rem; | |
| background: var(--bg-panel); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: var(--border); | |
| border-radius: var(--radius); | |
| position: sticky; | |
| top: 20px; | |
| z-index: 100; | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .brand i { | |
| font-size: 1.8rem; | |
| color: var(--primary); | |
| animation: pulse 3s infinite; | |
| } | |
| .brand h1 { | |
| font-size: 1.5rem; | |
| font-weight: 800; | |
| letter-spacing: -0.5px; | |
| background: linear-gradient(to right, var(--primary), var(--secondary)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .header-controls { | |
| display: flex; | |
| align-items: center; | |
| gap: 1.5rem; | |
| } | |
| .anycoder-link { | |
| font-family: var(--font-mono); | |
| font-size: 0.85rem; | |
| color: var(--text-muted); | |
| text-decoration: none; | |
| border: 1px dashed var(--text-muted); | |
| padding: 0.4rem 0.8rem; | |
| border-radius: 4px; | |
| transition: var(--transition); | |
| } | |
| .anycoder-link:hover { | |
| color: var(--primary); | |
| border-color: var(--primary); | |
| box-shadow: 0 0 10px rgba(0, 242, 255, 0.2); | |
| } | |
| .theme-toggle { | |
| background: none; | |
| border: none; | |
| color: var(--text-main); | |
| font-size: 1.2rem; | |
| cursor: pointer; | |
| transition: transform 0.3s ease; | |
| } | |
| .theme-toggle:hover { | |
| transform: rotate(15deg) scale(1.1); | |
| color: var(--primary); | |
| } | |
| /* --- DASHBOARD GRID --- */ | |
| .dashboard-grid { | |
| display: grid; | |
| grid-template-columns: repeat(12, 1fr); | |
| grid-template-rows: auto auto; | |
| gap: 1.5rem; | |
| } | |
| /* --- CARD STYLES --- */ | |
| .card { | |
| background: var(--bg-card); | |
| border: var(--border); | |
| border-radius: var(--radius); | |
| padding: 1.5rem; | |
| position: relative; | |
| overflow: hidden; | |
| transition: var(--transition); | |
| backdrop-filter: blur(5px); | |
| } | |
| .card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 2px; | |
| background: linear-gradient(90deg, var(--primary), var(--secondary)); | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: var(--shadow-glow); | |
| border-color: rgba(255, 255, 255, 0.2); | |
| } | |
| .card:hover::before { | |
| opacity: 1; | |
| } | |
| .card-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1.5rem; | |
| } | |
| .card-title { | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| color: var(--text-main); | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .card-title i { | |
| color: var(--secondary); | |
| } | |
| /* --- SECTION: HERO STATS (Top Row) --- */ | |
| .stat-card { | |
| grid-column: span 3; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| min-height: 140px; | |
| } | |
| .stat-value { | |
| font-size: 2.5rem; | |
| font-weight: 800; | |
| font-family: var(--font-mono); | |
| color: var(--text-main); | |
| } | |
| .stat-trend { | |
| font-size: 0.9rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .trend-up { color: var(--primary); } | |
| .trend-down { color: var(--accent); } | |
| /* --- SECTION: 3D VISUALIZER --- */ | |
| .visualizer-section { | |
| grid-column: span 8; | |
| min-height: 400px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| position: relative; | |
| } | |
| canvas#particleCanvas { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 1; | |
| } | |
| .visualizer-overlay { | |
| z-index: 2; | |
| text-align: center; | |
| pointer-events: none; /* Let clicks pass to canvas */ | |
| } | |
| .visualizer-overlay h2 { | |
| font-size: 2rem; | |
| text-shadow: 0 0 20px rgba(0,0,0,0.5); | |
| } | |
| /* --- SECTION: INTERACTIVE TILT CARDS --- */ | |
| .tilt-section { | |
| grid-column: span 4; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .tilt-card { | |
| flex: 1; | |
| background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)); | |
| border: 1px solid rgba(255,255,255,0.05); | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| padding: 1.5rem; | |
| cursor: pointer; | |
| transform-style: preserve-3d; | |
| transform: perspective(1000px); | |
| transition: transform 0.1s; /* Fast for smooth mouse follow */ | |
| } | |
| .tilt-icon { | |
| width: 50px; | |
| height: 50px; | |
| background: rgba(0, 242, 255, 0.1); | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| color: var(--primary); | |
| margin-right: 1rem; | |
| box-shadow: 0 0 15px rgba(0, 242, 255, 0.1); | |
| } | |
| .tilt-content h3 { | |
| font-size: 1rem; | |
| margin-bottom: 0.2rem; | |
| } | |
| .tilt-content p { | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| } | |
| /* --- SECTION: DATA TABLE --- */ | |
| .table-section { | |
| grid-column: span 12; | |
| overflow-x: auto; | |
| } | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 0.95rem; | |
| } | |
| th { | |
| text-align: left; | |
| padding: 1rem; | |
| color: var(--text-muted); | |
| font-weight: 600; | |
| border-bottom: 1px solid rgba(255,255,255,0.1); | |
| } | |
| td { | |
| padding: 1rem; | |
| border-bottom: 1px solid rgba(255,255,255,0.05); | |
| color: var(--text-main); | |
| } | |
| tr:hover td { | |
| background: rgba(255,255,255,0.02); | |
| color: var(--primary); | |
| } | |
| .status-badge { | |
| padding: 0.3rem 0.8rem; | |
| border-radius: 20px; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| } | |
| .status-active { background: rgba(0, 242, 255, 0.15); color: var(--primary); } | |
| .status-pending { background: rgba(255, 165, 0, 0.15); color: orange; } | |
| .status-error { background: rgba(255, 0, 85, 0.15); color: var(--accent); } | |
| /* --- ANIMATIONS --- */ | |
| @keyframes pulse { | |
| 0% { opacity: 0.8; transform: scale(1); text-shadow: 0 0 10px var(--primary); } | |
| 50% { opacity: 1; transform: scale(1.1); text-shadow: 0 0 20px var(--primary); } | |
| 100% { opacity: 0.8; transform: scale(1); text-shadow: 0 0 10px var(--primary); } | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| /* --- RESPONSIVE DESIGN --- */ | |
| @media (max-width: 1024px) { | |
| .stat-card { grid-column: span 6; } | |
| .visualizer-section { grid-column: span 12; min-height: 300px; } | |
| .tilt-section { grid-column: span 12; flex-direction: row; } | |
| .tilt-card { min-width: 250px; } | |
| } | |
| @media (max-width: 768px) { | |
| .container { padding: 1rem; } | |
| header { flex-direction: column; gap: 1rem; } | |
| .stat-card { grid-column: span 12; } | |
| .tilt-section { flex-direction: column; } | |
| .brand h1 { font-size: 1.2rem; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <!-- HEADER --> | |
| <header> | |
| <div class="brand"> | |
| <i class="fa-solid fa-cube"></i> | |
| <h1>NEXUS<span style="font-weight:300; opacity:0.7">DASH</span></h1> | |
| </div> | |
| <div class="header-controls"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link"> | |
| Built with anycoder | |
| </a> | |
| <button class="theme-toggle" id="themeToggle" aria-label="Toggle Theme"> | |
| <i class="fa-solid fa-moon"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- MAIN DASHBOARD GRID --> | |
| <main class="dashboard-grid"> | |
| <!-- STATS ROW --> | |
| <div class="card stat-card"> | |
| <div class="card-header"> | |
| <span class="card-title"><i class="fa-solid fa-users"></i> Active Users</span> | |
| </div> | |
| <div> | |
| <div class="stat-value" id="userCount">12,450</div> | |
| <div class="stat-trend trend-up"><i class="fa-solid fa-arrow-trend-up"></i> +14% this week</div> | |
| </div> | |
| </div> | |
| <div class="card stat-card"> | |
| <div class="card-header"> | |
| <span class="card-title"><i class="fa-solid fa-server"></i> Server Load</span> | |
| </div> | |
| <div> | |
| <div class="stat-value" style="color: var(--accent)">42%</div> | |
| <div class="stat-trend trend-down"><i class="fa-solid fa-check"></i> Stable</div> | |
| </div> | |
| </div> | |
| <div class="card stat-card"> | |
| <div class="card-header"> | |
| <span class="card-title"><i class="fa-solid fa-wallet"></i> Revenue</span> | |
| </div> | |
| <div> | |
| <div class="stat-value">$84.2k</div> | |
| <div class="stat-trend trend-up"><i class="fa-solid fa-arrow-trend-up"></i> +5.2% vs yesterday</div> | |
| </div> | |
| </div> | |
| <div class="card stat-card"> | |
| <div class="card-header"> | |
| <span class="card-title"><i class="fa-solid fa-bolt"></i> Efficiency</span> | |
| </div> | |
| <div> | |
| <div class="stat-value" style="color: var(--primary)">98.9%</div> | |
| <div class="stat-trend trend-up"><i class="fa-solid fa-caret-up"></i> Optimal</div> | |
| </div> | |
| </div> | |
| <!-- VISUALIZER SECTION --> | |
| <section class="card visualizer-section"> | |
| <canvas id="particleCanvas"></canvas> | |
| <div class="visualizer-overlay"> | |
| <h2>Network Topology</h2> | |
| <p style="color: var(--text-muted); margin-top: 0.5rem;">Real-time Node Visualization</p> | |
| </div> | |
| </section> | |
| <!-- TILT CARDS SECTION --> | |
| <section class="tilt-section"> | |
| <div class="tilt-card js-tilt"> | |
| <div class="tilt-icon"><i class="fa-solid fa-shield-halved"></i></div> | |
| <div class="tilt-content"> | |
| <h3>Security</h3> | |
| <p>Firewall Active</p> | |
| </div> | |
| </div> | |
| <div class="tilt-card js-tilt"> | |
| <div class="tilt-icon"><i class="fa-solid fa-cloud-arrow-up"></i></div> | |
| <div class="tilt-content"> | |
| <h3>Deployment</h3> | |
| <p>Syncing...</p> | |
| </div> | |
| </div> | |
| <div class="tilt-card js-tilt"> | |
| <div class="tilt-icon"><i class="fa-solid fa-code-branch"></i></div> | |
| <div class="tilt-content"> | |
| <h3>Version</h3> | |
| <p>v2.4.0-stable</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- DATA TABLE SECTION --> | |
| <section class="card table-section"> | |
| <div class="card-header"> | |
| <span class="card-title"><i class="fa-solid fa-list"></i> Recent Transactions</span> | |
| <button style="background:none; border:none; color:var(--primary); cursor:pointer;">View All</button> | |
| </div> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>ID</th> | |
| <th>User</th> | |
| <th>Date</th> | |
| <th>Amount</th> | |
| <th>Status</th> | |
| <th>Action</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>#TRX-9821</td> | |
| <td>Alex Morgan</td> | |
| <td>Oct 24, 2023</td> | |
| <td>$120.50</td> | |
| <td><span class="status-badge status-active">Completed</span></td> | |
| <td><i class="fa-solid fa-ellipsis-vertical" style="color:var(--text-muted); cursor:pointer;"></i></td> | |
| </tr> | |
| <tr> | |
| <td>#TRX-9822</td> | |
| <td>Sarah Connor</td> | |
| <td>Oct 24, 2023</td> | |
| <td>$450.00</td> | |
| <td><span class="status-badge status-pending">Processing</span></td> | |
| <td><i class="fa-solid fa-ellipsis-vertical" style="color:var(--text-muted); cursor:pointer;"></i></td> | |
| </tr> | |
| <tr> | |
| <td>#TRX-9823</td> | |
| <td>John Doe</td> | |
| <td>Oct 23, 2023</td> | |
| <td>$32.00</td> | |
| <td><span class="status-badge status-error">Failed</span></td> | |
| <td><i class="fa-solid fa-ellipsis-vertical" style="color:var(--text-muted); cursor:pointer;"></i></td> | |
| </tr> | |
| <tr> | |
| <td>#TRX-9824</td> | |
| <td>Emily Blunt</td> | |
| <td>Oct 23, 2023</td> | |
| <td>$1,200.00</td> | |
| <td><span class="status-badge status-active">Completed</span></td> | |
| <td><i class="fa-solid fa-ellipsis-vertical" style="color:var(--text-muted); cursor:pointer;"></i></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </section> | |
| </main> | |
| </div> | |
| <script> | |
| /** | |
| * 1. THEME TOGGLE LOGIC | |
| * Switches CSS variables between Dark (Default) and Light mode. | |
| */ | |
| const themeToggleBtn = document.getElementById('themeToggle'); | |
| const themeIcon = themeToggleBtn.querySelector('i'); | |
| let isDarkMode = true; | |
| themeToggleBtn.addEventListener('click', () => { | |
| isDarkMode = !isDarkMode; | |
| if (isDarkMode) { | |
| document.documentElement.removeAttribute('data-theme'); | |
| themeIcon.classList.remove('fa-sun'); | |
| themeIcon.classList.add('fa-moon'); | |
| } else { | |
| document.documentElement.setAttribute('data-theme', 'light'); | |
| themeIcon.classList.remove('fa-moon'); | |
| themeIcon.classList.add('fa-sun'); | |
| } | |
| }); | |
| /** | |
| * 2. 3D TILT EFFECT | |
| * Calculates mouse position relative to the card center and applies a rotation transform. | |
| */ | |
| const tiltCards = document.querySelectorAll('.js-tilt'); | |
| tiltCards.forEach(card => { | |
| card.addEventListener('mousemove', (e) => { | |
| const rect = card.getBoundingClientRect(); | |
| const x = e.clientX - rect.left; | |
| const y = e.clientY - rect.top; | |
| // Calculate rotation (center is 0,0) | |
| const xPct = (x / rect.width) - 0.5; | |
| const yPct = (y / rect.height) - 0.5; | |
| // Max rotation degrees | |
| const xRot = yPct * -20; // Rotate X axis based on Y position | |
| const yRot = xPct * 20; // Rotate Y axis based on X position | |
| card.style.transform = `perspective(1000px) rotateX(${xRot}deg) rotateY(${yRot}deg) scale(1.02)`; | |
| }); | |
| // Reset on mouse leave | |
| card.addEventListener('mouseleave', () => { | |
| card.style.transform = `perspective(1000px) rotateX(0) rotateY(0) scale(1)`; | |
| }); | |
| }); | |
| /** | |
| * 3. PARTICLE NETWORK VISUALIZATION | |
| * Draws nodes and connections on an HTML5 Canvas. | |
| */ | |
| const canvas = document.getElementById('particleCanvas'); | |
| const ctx = canvas.getContext('2d'); | |
| let width, height; | |
| let particles = []; | |
| const particleCount = 60; | |
| const connectionDistance = 120; | |
| // Resize handling | |
| function resize() { | |
| width = canvas.parentElement.offsetWidth; | |
| height = canvas.parentElement.offsetHeight; | |
| canvas.width = width; | |
| canvas.height = height; | |
| } | |
| window.addEventListener('resize', resize); | |
| resize(); | |
| // Particle Class | |
| class Particle { | |
| constructor() { | |
| this.x = Math.random() * width; | |
| this.y = Math.random() * height; | |
| this.vx = (Math.random() - 0.5) * 1.5; | |
| this.vy = (Math.random() - 0.5) * 1.5; | |
| this.size = Math.random() * 2 + 1; | |
| } | |
| update() { | |
| this.x += this.vx; | |
| this.y += this.vy; | |
| // Bounce off edges | |
| if (this.x < 0 || this.x > width) this.vx *= -1; | |
| if (this.y < 0 || this.y > height) this.vy *= -1; | |
| } | |
| draw() { | |
| ctx.beginPath(); | |
| ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); | |
| // Use CSS variable color logic by checking computed style or fallback | |
| ctx.fillStyle = isDarkMode ? '#00f2ff' : '#2563eb'; | |
| ctx.fill(); | |
| } | |
| } | |
| // Initialize Particles | |
| for (let i = 0; i < particleCount; i++) { | |
| particles.push(new Particle()); | |
| } | |
| // Animation Loop | |
| function animate() { | |
| ctx.clearRect(0, 0, width, height); | |
| // Update and draw particles | |
| particles.forEach(p => { | |
| p.update(); | |
| p.draw(); | |
| }); | |
| // Draw connections | |
| for (let i = 0; i < particles.length; i++) { | |
| for (let j = i + 1; j < particles.length; j++) { | |
| const dx = particles[i].x - particles[j].x; | |
| const dy = particles[i].y - particles[j].y; | |
| const distance = Math.sqrt(dx * dx + dy * dy); | |
| if (distance < connectionDistance) { | |
| ctx.beginPath(); | |
| const opacity = 1 - (distance / connectionDistance); | |
| ctx.strokeStyle = isDarkMode | |
| ? `rgba(0, 242, 255, ${opacity * 0.4})` | |
| : `rgba(37, 99, 235, ${opacity * 0.2})`; | |
| ctx.lineWidth = 1; | |
| ctx.moveTo(particles[i].x, particles[i].y); | |
| ctx.lineTo(particles[j].x, particles[j].y); | |
| ctx.stroke(); | |
| } | |
| } | |
| } | |
| requestAnimationFrame(animate); | |
| } | |
| animate(); | |
| /** | |
| * 4. LIVE NUMBER SIMULATION | |
| * Randomly increments the user count slightly to make the UI feel alive. | |
| */ | |
| const userCountEl = document.getElementById('userCount'); | |
| let currentCount = 12450; | |
| setInterval(() => { | |
| const increment = Math.floor(Math.random() * 5); | |
| currentCount += increment; | |
| userCountEl.innerText = currentCount.toLocaleString(); | |
| // Visual flash effect | |
| userCountEl.style.textShadow = "0 0 10px var(--primary)"; | |
| setTimeout(() => { | |
| userCountEl.style.textShadow = "none"; | |
| }, 300); | |
| }, 3000); | |
| </script> | |
| </body> | |
| </html> |