Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Neon Glow Dashboard</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Poppins:wght@300;400;600&display=swap'); | |
| :root { | |
| --neon-blue: #0ff0fc; | |
| --neon-pink: #ff2d75; | |
| --neon-purple: #9d00ff; | |
| --dark-bg: #0f0f1a; | |
| } | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: var(--dark-bg); | |
| color: white; | |
| overflow-x: hidden; | |
| } | |
| .neon-text-blue { | |
| text-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue); | |
| color: white; | |
| } | |
| .neon-text-pink { | |
| text-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink); | |
| color: white; | |
| } | |
| .neon-border-blue { | |
| box-shadow: 0 0 10px var(--neon-blue), inset 0 0 10px var(--neon-blue); | |
| border: 1px solid var(--neon-blue); | |
| } | |
| .neon-border-pink { | |
| box-shadow: 0 0 10px var(--neon-pink), inset 0 0 10px var(--neon-pink); | |
| border: 1px solid var(--neon-pink); | |
| } | |
| .neon-border-purple { | |
| box-shadow: 0 0 10px var(--neon-purple), inset 0 0 10px var(--neon-purple); | |
| border: 1px solid var(--neon-purple); | |
| } | |
| .glow-hover:hover { | |
| transform: scale(1.02); | |
| transition: all 0.3s ease; | |
| } | |
| .dashboard-card { | |
| backdrop-filter: blur(10px); | |
| background: rgba(15, 15, 26, 0.7); | |
| } | |
| .progress-bar { | |
| height: 6px; | |
| border-radius: 3px; | |
| background: linear-gradient(90deg, var(--neon-pink), var(--neon-purple)); | |
| transition: width 0.5s ease; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 0.6; } | |
| 50% { opacity: 1; } | |
| 100% { opacity: 0.6; } | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <div class="flex h-screen"> | |
| <!-- Sidebar --> | |
| <div class="w-64 neon-border-purple p-4 hidden md:block"> | |
| <div class="flex items-center justify-center mb-10"> | |
| <i class="fas fa-rocket text-3xl neon-text-pink mr-3"></i> | |
| <h1 class="text-2xl font-bold neon-text-blue font-['Orbitron']">NOVA DASH</h1> | |
| </div> | |
| <nav> | |
| <ul class="space-y-4"> | |
| <li> | |
| <a href="#" class="flex items-center p-3 rounded-lg neon-border-blue glow-hover"> | |
| <i class="fas fa-home mr-3 neon-text-blue"></i> | |
| <span>Dashboard</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-3 rounded-lg hover:neon-border-pink glow-hover"> | |
| <i class="fas fa-chart-line mr-3"></i> | |
| <span>Analytics</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-3 rounded-lg hover:neon-border-pink glow-hover"> | |
| <i class="fas fa-users mr-3"></i> | |
| <span>Users</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-3 rounded-lg hover:neon-border-pink glow-hover"> | |
| <i class="fas fa-cog mr-3"></i> | |
| <span>Settings</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-3 rounded-lg hover:neon-border-pink glow-hover"> | |
| <i class="fas fa-envelope mr-3"></i> | |
| <span>Messages</span> | |
| <span class="ml-auto bg-red-500 text-white text-xs px-2 py-1 rounded-full">3</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| <div class="mt-20 p-4 neon-border-blue rounded-lg"> | |
| <h3 class="text-sm uppercase mb-2 neon-text-blue">System Status</h3> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-3 h-3 rounded-full bg-green-500 mr-2 pulse"></div> | |
| <span class="text-sm">All systems operational</span> | |
| </div> | |
| <div class="text-xs opacity-70">Last updated: <span id="update-time">Just now</span></div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 overflow-y-auto p-6"> | |
| <!-- Header --> | |
| <header class="flex justify-between items-center mb-8"> | |
| <div class="md:hidden"> | |
| <button id="menu-toggle" class="text-2xl"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| <h1 class="text-3xl font-bold neon-text-pink font-['Orbitron']">Dashboard</h1> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2"></i> | |
| <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 bg-gray-900 rounded-lg focus:outline-none focus:neon-border-blue"> | |
| </div> | |
| <div class="relative"> | |
| <i class="fas fa-bell text-xl cursor-pointer hover:text-pink-400"></i> | |
| <span class="absolute -top-2 -right-2 bg-red-500 text-white text-xs px-1.5 py-0.5 rounded-full">2</span> | |
| </div> | |
| <div class="flex items-center space-x-2 cursor-pointer"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-8 h-8 rounded-full border-2 border-blue-400"> | |
| <span>Jane Doe</span> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <div class="dashboard-card p-6 rounded-xl neon-border-blue glow-hover"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-sm opacity-70">Total Revenue</p> | |
| <h3 class="text-2xl font-bold mt-2">$24,780</h3> | |
| <p class="text-green-400 text-sm mt-1">+12.5% from last month</p> | |
| </div> | |
| <i class="fas fa-dollar-sign text-3xl opacity-30"></i> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="progress-bar" style="width: 75%"></div> | |
| </div> | |
| </div> | |
| <div class="dashboard-card p-6 rounded-xl neon-border-pink glow-hover"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-sm opacity-70">Active Users</p> | |
| <h3 class="text-2xl font-bold mt-2">1,429</h3> | |
| <p class="text-green-400 text-sm mt-1">+8.2% from last week</p> | |
| </div> | |
| <i class="fas fa-users text-3xl opacity-30"></i> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="progress-bar" style="width: 60%"></div> | |
| </div> | |
| </div> | |
| <div class="dashboard-card p-6 rounded-xl neon-border-purple glow-hover"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-sm opacity-70">New Orders</p> | |
| <h3 class="text-2xl font-bold mt-2">356</h3> | |
| <p class="text-red-400 text-sm mt-1">-3.1% from yesterday</p> | |
| </div> | |
| <i class="fas fa-shopping-cart text-3xl opacity-30"></i> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="progress-bar" style="width: 45%"></div> | |
| </div> | |
| </div> | |
| <div class="dashboard-card p-6 rounded-xl neon-border-blue glow-hover"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-sm opacity-70">Server Load</p> | |
| <h3 class="text-2xl font-bold mt-2">68%</h3> | |
| <p class="text-yellow-400 text-sm mt-1">Stable</p> | |
| </div> | |
| <i class="fas fa-server text-3xl opacity-30"></i> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="progress-bar" style="width: 68%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Charts Section --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8"> | |
| <div class="dashboard-card p-6 rounded-xl neon-border-pink"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold">Revenue Overview</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 text-xs bg-gray-800 rounded-lg">Week</button> | |
| <button class="px-3 py-1 text-xs bg-blue-500 rounded-lg">Month</button> | |
| <button class="px-3 py-1 text-xs bg-gray-800 rounded-lg">Year</button> | |
| </div> | |
| </div> | |
| <div class="h-64" id="revenue-chart"></div> | |
| </div> | |
| <div class="dashboard-card p-6 rounded-xl neon-border-purple"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold">User Activity</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 text-xs bg-gray-800 rounded-lg">Daily</button> | |
| <button class="px-3 py-1 text-xs bg-purple-500 rounded-lg">Weekly</button> | |
| </div> | |
| </div> | |
| <div class="h-64" id="activity-chart"></div> | |
| </div> | |
| </div> | |
| <!-- Recent Activity --> | |
| <div class="dashboard-card p-6 rounded-xl neon-border-blue mb-8"> | |
| <h2 class="text-xl font-bold mb-6">Recent Activity</h2> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full"> | |
| <thead> | |
| <tr class="text-left border-b border-gray-700"> | |
| <th class="pb-3">User</th> | |
| <th class="pb-3">Action</th> | |
| <th class="pb-3">Time</th> | |
| <th class="pb-3">Status</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="border-b border-gray-700 hover:bg-gray-800/50"> | |
| <td class="py-4 flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-8 h-8 rounded-full mr-3"> | |
| <span>John Smith</span> | |
| </td> | |
| <td>Updated profile settings</td> | |
| <td>2 minutes ago</td> | |
| <td><span class="px-2 py-1 bg-green-500/20 text-green-400 rounded-full text-xs">Completed</span></td> | |
| </tr> | |
| <tr class="border-b border-gray-700 hover:bg-gray-800/50"> | |
| <td class="py-4 flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User" class="w-8 h-8 rounded-full mr-3"> | |
| <span>Sarah Johnson</span> | |
| </td> | |
| <td>Processed order #4582</td> | |
| <td>15 minutes ago</td> | |
| <td><span class="px-2 py-1 bg-blue-500/20 text-blue-400 rounded-full text-xs">Pending</span></td> | |
| </tr> | |
| <tr class="border-b border-gray-700 hover:bg-gray-800/50"> | |
| <td class="py-4 flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User" class="w-8 h-8 rounded-full mr-3"> | |
| <span>Michael Chen</span> | |
| </td> | |
| <td>Submitted support ticket</td> | |
| <td>1 hour ago</td> | |
| <td><span class="px-2 py-1 bg-yellow-500/20 text-yellow-400 rounded-full text-xs">In Progress</span></td> | |
| </tr> | |
| <tr class="hover:bg-gray-800/50"> | |
| <td class="py-4 flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-8 h-8 rounded-full mr-3"> | |
| <span>Jane Doe</span> | |
| </td> | |
| <td>Created new dashboard</td> | |
| <td>3 hours ago</td> | |
| <td><span class="px-2 py-1 bg-green-500/20 text-green-400 rounded-full text-xs">Completed</span></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="mt-4 text-center"> | |
| <button class="px-4 py-2 bg-blue-500/20 text-blue-400 rounded-lg hover:bg-blue-500/30">View All Activity</button> | |
| </div> | |
| </div> | |
| <!-- Quick Actions --> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8"> | |
| <button class="dashboard-card p-4 rounded-lg neon-border-blue flex flex-col items-center justify-center glow-hover h-32"> | |
| <i class="fas fa-plus text-2xl mb-2 neon-text-blue"></i> | |
| <span>New Project</span> | |
| </button> | |
| <button class="dashboard-card p-4 rounded-lg neon-border-pink flex flex-col items-center justify-center glow-hover h-32"> | |
| <i class="fas fa-upload text-2xl mb-2 neon-text-pink"></i> | |
| <span>Upload Files</span> | |
| </button> | |
| <button class="dashboard-card p-4 rounded-lg neon-border-purple flex flex-col items-center justify-center glow-hover h-32"> | |
| <i class="fas fa-chart-pie text-2xl mb-2 neon-text-purple"></i> | |
| <span>Generate Report</span> | |
| </button> | |
| <button class="dashboard-card p-4 rounded-lg neon-border-blue flex flex-col items-center justify-center glow-hover h-32"> | |
| <i class="fas fa-cog text-2xl mb-2 neon-text-blue"></i> | |
| <span>Settings</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('menu-toggle').addEventListener('click', function() { | |
| document.querySelector('.w-64').classList.toggle('hidden'); | |
| }); | |
| // Simulate chart data | |
| function generateChartData(count, min, max) { | |
| return Array.from({length: count}, () => Math.floor(Math.random() * (max - min + 1)) + min); | |
| } | |
| // Simple chart rendering (simplified for this example) | |
| function renderChart(containerId, data, color) { | |
| const container = document.getElementById(containerId); | |
| const height = 200; | |
| const width = container.clientWidth; | |
| const barWidth = width / data.length; | |
| let svg = `<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">`; | |
| data.forEach((value, index) => { | |
| const barHeight = (value / 100) * height; | |
| const x = index * barWidth; | |
| const y = height - barHeight; | |
| svg += `<rect x="${x}" y="${y}" width="${barWidth - 2}" height="${barHeight}" fill="${color}" rx="2" ry="2" />`; | |
| }); | |
| svg += `</svg>`; | |
| container.innerHTML = svg; | |
| } | |
| // Initialize charts | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Revenue chart | |
| const revenueData = generateChartData(12, 20, 90); | |
| renderChart('revenue-chart', revenueData, '#0ff0fc'); | |
| // Activity chart | |
| const activityData = generateChartData(7, 30, 100); | |
| renderChart('activity-chart', activityData, '#9d00ff'); | |
| // Update time | |
| setInterval(() => { | |
| const now = new Date(); | |
| document.getElementById('update-time').textContent = now.toLocaleTimeString(); | |
| }, 1000); | |
| }); | |
| // Add glow effect on hover for all cards | |
| document.querySelectorAll('.glow-hover').forEach(card => { | |
| card.addEventListener('mouseenter', function() { | |
| if (this.classList.contains('neon-border-blue')) { | |
| this.style.boxShadow = '0 0 20px #0ff0fc, inset 0 0 20px #0ff0fc'; | |
| } else if (this.classList.contains('neon-border-pink')) { | |
| this.style.boxShadow = '0 0 20px #ff2d75, inset 0 0 20px #ff2d75'; | |
| } else if (this.classList.contains('neon-border-purple')) { | |
| this.style.boxShadow = '0 0 20px #9d00ff, inset 0 0 20px #9d00ff'; | |
| } | |
| }); | |
| card.addEventListener('mouseleave', function() { | |
| if (this.classList.contains('neon-border-blue')) { | |
| this.style.boxShadow = '0 0 10px #0ff0fc, inset 0 0 10px #0ff0fc'; | |
| } else if (this.classList.contains('neon-border-pink')) { | |
| this.style.boxShadow = '0 0 10px #ff2d75, inset 0 0 10px #ff2d75'; | |
| } else if (this.classList.contains('neon-border-purple')) { | |
| this.style.boxShadow = '0 0 10px #9d00ff, inset 0 0 10px #9d00ff'; | |
| } | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=wesagar/my-own-world" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |