Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Nexus Geometric Suite</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> | |
| <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| display: ['Space Grotesk', 'sans-serif'], | |
| }, | |
| colors: { | |
| slate: { | |
| 850: '#1e293b', | |
| 900: '#0f172a', | |
| 950: '#020617', | |
| }, | |
| primary: { | |
| 400: '#818cf8', | |
| 500: '#6366f1', | |
| 600: '#4f46e5', | |
| } | |
| }, | |
| animation: { | |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'slide-in': 'slideIn 0.3s ease-out forwards', | |
| 'fade-in': 'fadeIn 0.5s ease-out forwards', | |
| 'float': 'float 20s infinite ease-in-out', | |
| 'rotate-slow': 'rotate 30s linear infinite', | |
| 'morph': 'morph 8s ease-in-out infinite', | |
| }, | |
| keyframes: { | |
| slideIn: { | |
| '0%': { transform: 'translateY(-10px)', opacity: '0' }, | |
| '100%': { transform: 'translateY(0)', opacity: '1' }, | |
| }, | |
| fadeIn: { | |
| '0%': { opacity: '0' }, | |
| '100%': { opacity: '1' }, | |
| }, | |
| float: { | |
| '0%, 100%': { transform: 'translate(0, 0) rotate(0deg)' }, | |
| '25%': { transform: 'translate(50px, -30px) rotate(5deg)' }, | |
| '50%': { transform: 'translate(-30px, 50px) rotate(-5deg)' }, | |
| '75%': { transform: 'translate(-50px, -20px) rotate(3deg)' }, | |
| }, | |
| rotate: { | |
| '0%': { transform: 'rotate(0deg)' }, | |
| '100%': { transform: 'rotate(360deg)' }, | |
| }, | |
| morph: { | |
| '0%, 100%': { borderRadius: '60% 40% 30% 70%/60% 30% 70% 40%' }, | |
| '50%': { borderRadius: '30% 60% 70% 40%/50% 60% 30% 60%' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .geo-bg { | |
| background-color: #020617; | |
| background-image: | |
| radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.15) 0%, transparent 50%), | |
| radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.1) 0%, transparent 50%), | |
| linear-gradient(45deg, rgba(15, 23, 42, 0.9) 0%, transparent 100%), | |
| repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0px, rgba(255, 255, 255, 0.03) 1px, transparent 1px, transparent 11px), | |
| repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.03) 0px, rgba(255, 255, 255, 0.03) 1px, transparent 1px, transparent 11px); | |
| } | |
| .geo-shape { | |
| position: absolute; | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| .geo-triangle { | |
| width: 0; | |
| height: 0; | |
| border-left: 50px solid transparent; | |
| border-right: 50px solid transparent; | |
| border-bottom: 100px solid rgba(99, 102, 241, 0.1); | |
| filter: drop-shadow(0 0 20px rgba(99, 102, 241, 0.3)); | |
| } | |
| .geo-circle { | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(236, 72, 153, 0.2)); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .geo-hexagon { | |
| width: 100px; | |
| height: 57.74px; | |
| background: rgba(255, 255, 255, 0.03); | |
| position: relative; | |
| margin: 28.87px 0; | |
| border-left: 2px solid rgba(99, 102, 241, 0.3); | |
| border-right: 2px solid rgba(99, 102, 241, 0.3); | |
| } | |
| .geo-hexagon:before, | |
| .geo-hexagon:after { | |
| content: ""; | |
| position: absolute; | |
| width: 0; | |
| border-left: 50px solid transparent; | |
| border-right: 50px solid transparent; | |
| } | |
| .geo-hexagon:before { | |
| bottom: 100%; | |
| border-bottom: 28.87px solid rgba(255, 255, 255, 0.03); | |
| } | |
| .geo-hexagon:after { | |
| top: 100%; | |
| border-top: 28.87px solid rgba(255, 255, 255, 0.03); | |
| } | |
| .glass-card { | |
| background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9)); | |
| backdrop-filter: blur(20px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .glass-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.5), transparent); | |
| } | |
| .glass-card::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| right: 0; | |
| width: 100px; | |
| height: 100px; | |
| background: linear-gradient(135deg, transparent 50%, rgba(99, 102, 241, 0.05) 50%); | |
| pointer-events: none; | |
| } | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #0f172a; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #334155; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #475569; | |
| } | |
| .toggle-checkbox:checked { | |
| right: 0; | |
| border-color: #6366f1; | |
| } | |
| .toggle-checkbox:checked + .toggle-label { | |
| background-color: #6366f1; | |
| } | |
| .chart-line { | |
| stroke-dasharray: 1000; | |
| stroke-dashoffset: 1000; | |
| animation: drawLine 2s ease-out forwards; | |
| } | |
| @keyframes drawLine { | |
| to { | |
| stroke-dashoffset: 0; | |
| } | |
| } | |
| .confetti { | |
| position: absolute; | |
| width: 10px; | |
| height: 10px; | |
| animation: fall linear forwards; | |
| clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); | |
| } | |
| @keyframes fall { | |
| to { | |
| transform: translateY(100vh) rotate(720deg); | |
| } | |
| } | |
| .geo-btn { | |
| position: relative; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .geo-btn::before { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 0; | |
| height: 0; | |
| background: rgba(255, 255, 255, 0.1); | |
| transform: translate(-50%, -50%) rotate(45deg); | |
| transition: width 0.6s, height 0.6s; | |
| } | |
| .geo-btn:hover::before { | |
| width: 300px; | |
| height: 300px; | |
| } | |
| .grid-pattern { | |
| background-image: | |
| linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); | |
| background-size: 50px 50px; | |
| } | |
| </style> | |
| </head> | |
| <body class="geo-bg text-slate-200 font-sans antialiased overflow-hidden h-screen selection:bg-primary-500 selection:text-white"> | |
| <!-- Floating Geometric Background Elements --> | |
| <div class="fixed inset-0 overflow-hidden pointer-events-none"> | |
| <div class="geo-shape geo-triangle top-20 left-10 animate-float" style="animation-delay: 0s; opacity: 0.3;"></div> | |
| <div class="geo-shape geo-circle w-32 h-32 top-40 right-20 animate-morph" style="animation-delay: 2s;"></div> | |
| <div class="geo-shape geo-hexagon bottom-40 left-20 animate-float" style="animation-delay: 4s; opacity: 0.2;"></div> | |
| <div class="geo-shape geo-circle w-48 h-48 bottom-20 right-40 animate-rotate-slow" style="border: 2px solid rgba(99, 102, 241, 0.1); background: transparent;"></div> | |
| <div class="geo-shape w-0 h-0 top-60 left-1/3 animate-float" style="border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 60px solid rgba(236, 72, 153, 0.1); animation-delay: 6s;"></div> | |
| </div> | |
| <!-- App Container --> | |
| <div class="flex h-full relative z-10"> | |
| <!-- Sidebar with Geometric Accent --> | |
| <aside class="w-20 lg:w-64 bg-slate-900/90 backdrop-blur-xl border-r border-slate-800 flex flex-col justify-between relative overflow-hidden"> | |
| <div class="absolute top-0 right-0 w-20 h-20 bg-gradient-to-bl from-primary-500/20 to-transparent"></div> | |
| <div class="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-primary-500 via-purple-500 to-transparent"></div> | |
| <div> | |
| <div class="h-20 flex items-center justify-center lg:justify-start lg:px-6 border-b border-slate-800 relative"> | |
| <div class="w-10 h-10 relative"> | |
| <div class="absolute inset-0 bg-primary-500 rotate-45 transform"></div> | |
| <div class="absolute inset-1 bg-slate-900 rotate-45 transform flex items-center justify-center"> | |
| <i class="fa-solid fa-layer-group text-primary-400 text-sm"></i> | |
| </div> | |
| </div> | |
| <span class="ml-4 font-display font-bold text-xl hidden lg:block tracking-tight">NEXUS<span class="text-primary-400">.OS</span></span> | |
| </div> | |
| <nav class="mt-8 px-2 lg:px-4 space-y-2"> | |
| <button onclick="switchTab('dashboard')" id="nav-dashboard" class="w-full flex items-center p-3 rounded-xl text-slate-400 hover:bg-slate-800 hover:text-white transition-all group relative overflow-hidden active-nav bg-slate-800 text-white"> | |
| <div class="absolute left-0 top-0 bottom-0 w-1 bg-primary-500 rounded-r"></div> | |
| <i class="fa-solid fa-chart-pie w-6 text-center group-hover:text-primary-400 transition-colors"></i> | |
| <span class="ml-3 hidden lg:block font-medium">Dashboard</span> | |
| </button> | |
| <button onclick="switchTab('tasks')" id="nav-tasks" class="w-full flex items-center p-3 rounded-xl text-slate-400 hover:bg-slate-800 hover:text-white transition-all group relative overflow-hidden"> | |
| <div class="absolute left-0 top-0 bottom-0 w-1 bg-transparent group-hover:bg-primary-500 rounded-r transition-all"></div> | |
| <i class="fa-solid fa-list-check w-6 text-center group-hover:text-primary-400 transition-colors"></i> | |
| <span class="ml-3 hidden lg:block font-medium">Tasks</span> | |
| <span id="task-badge" class="ml-auto hidden lg:flex bg-primary-500 text-xs font-bold px-2 py-0.5 rounded-full text-white opacity-0 transition-opacity">0</span> | |
| </button> | |
| <button onclick="switchTab('settings')" id="nav-settings" class="w-full flex items-center p-3 rounded-xl text-slate-400 hover:bg-slate-800 hover:text-white transition-all group relative overflow-hidden"> | |
| <div class="absolute left-0 top-0 bottom-0 w-1 bg-transparent group-hover:bg-primary-500 rounded-r transition-all"></div> | |
| <i class="fa-solid fa-sliders w-6 text-center group-hover:text-primary-400 transition-colors"></i> | |
| <span class="ml-3 hidden lg:block font-medium">Settings</span> | |
| </button> | |
| </nav> | |
| </div> | |
| <div class="p-4 border-t border-slate-800 relative"> | |
| <div class="flex items-center gap-3"> | |
| <div class="relative"> | |
| <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Felix" alt="User" class="w-10 h-10 rounded-lg bg-slate-700 border-2 border-slate-600 transform rotate-3 hover:rotate-0 transition-transform"> | |
| <div class="absolute -bottom-1 -right-1 w-3 h-3 bg-emerald-500 border-2 border-slate-900 rounded-full"></div> | |
| </div> | |
| <div class="hidden lg:block"> | |
| <p class="text-sm font-semibold text-white font-display">Admin User</p> | |
| <p class="text-xs text-slate-500">Pro Plan</p> | |
| </div> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Main Content --> | |
| <main class="flex-1 flex flex-col relative overflow-hidden"> | |
| <div class="absolute inset-0 grid-pattern opacity-50 pointer-events-none"></div> | |
| <!-- Top Header --> | |
| <header class="h-20 glass-card border-b border-slate-800 flex items-center justify-between px-6 z-10 relative"> | |
| <div class="flex items-center gap-4"> | |
| <h2 id="page-title" class="text-2xl font-display font-bold text-white tracking-tight">Dashboard Overview</h2> | |
| <div class="hidden md:flex items-center gap-2 px-3 py-1 rounded-full bg-slate-800/50 border border-slate-700 text-xs text-slate-400"> | |
| <div class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></div> | |
| System Online | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <button id="btn-notification" class="relative p-3 rounded-xl text-slate-400 hover:text-white hover:bg-slate-800 transition-all geo-btn"> | |
| <i class="fa-regular fa-bell text-lg"></i> | |
| <span class="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full animate-pulse"></span> | |
| </button> | |
| <button class="geo-btn bg-primary-600 hover:bg-primary-500 text-white px-6 py-3 rounded-xl text-sm font-medium transition-all shadow-lg shadow-primary-600/20 flex items-center gap-2 relative overflow-hidden" onclick="alert('Quick Action Triggered')"> | |
| <i class="fa-solid fa-plus"></i> | |
| <span class="relative z-10">New Project</span> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Scrollable Content Area --> | |
| <div class="flex-1 overflow-y-auto p-6 relative" id="main-scroll"> | |
| <!-- VIEW: DASHBOARD --> | |
| <div id="view-dashboard" class="space-y-6 animate-fade-in max-w-7xl mx-auto"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="glass-card p-6 rounded-2xl relative overflow-hidden group hover:border-primary-500/30 transition-all duration-500"> | |
| <div class="absolute top-0 right-0 w-24 h-24 bg-primary-500/10 rotate-45 transform translate-x-12 -translate-y-12 group-hover:rotate-90 transition-transform duration-700"></div> | |
| <div class="relative z-10"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="w-12 h-12 rounded-xl bg-primary-500/20 flex items-center justify-center border border-primary-500/30"> | |
| <i class="fa-solid fa-users text-primary-400 text-xl"></i> | |
| </div> | |
| <span class="text-emerald-400 text-sm font-medium flex items-center gap-1"> | |
| <i class="fa-solid fa-arrow-trend-up"></i> +12.5% | |
| </span> | |
| </div> | |
| <p class="text-slate-400 text-sm font-medium uppercase tracking-wider mb-1">Total Visitors</p> | |
| <h3 class="text-4xl font-display font-bold text-white counter" data-target="8452">0</h3> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-primary-500 to-purple-500"></div> | |
| </div> | |
| <div class="glass-card p-6 rounded-2xl relative overflow-hidden group hover:border-yellow-500/30 transition-all duration-500"> | |
| <div class="absolute top-0 right-0 w-24 h-24 bg-yellow-500/10 rotate-12 transform translate-x-8 -translate-y-8 group-hover:rotate-45 transition-transform duration-700"></div> | |
| <div class="relative z-10"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-yellow-500/20 flex items-center justify-center border border-yellow-500/30"> | |
| <i class="fa-solid fa-bolt text-yellow-400 text-xl"></i> | |
| </div> | |
| <span class="text-slate-400 text-sm font-medium">Live</span> | |
| </div> | |
| <p class="text-slate-400 text-sm font-medium uppercase tracking-wider mb-1">Server Load</p> | |
| <div class="flex items-end gap-3"> | |
| <h3 class="text-4xl font-display font-bold text-white"><span id="server-load">42</span>%</h3> | |
| <div class="flex-1 h-2 bg-slate-700 rounded-full mb-3 overflow-hidden"> | |
| <div id="load-bar" class="bg-yellow-500 h-full rounded-full transition-all duration-1000 relative" style="width: 42%"> | |
| <div class="absolute inset-0 bg-white/20 animate-pulse"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="glass-card p-6 rounded-2xl relative overflow-hidden group hover:border-emerald-500/30 transition-all duration-500"> | |
| <div class="absolute -bottom-4 -right-4 w-32 h-32 bg-emerald-500/10 rounded-full group-hover:scale-150 transition-transform duration-700"></div> | |
| <div class="relative z-10"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="w-12 h-12 rounded-lg bg-emerald-500/20 flex items-center justify-center border border-emerald-500/30 transform rotate-3"> | |
| <i class="fa-solid fa-wallet text-emerald-400 text-xl"></i> | |
| </div> | |
| <span class="text-emerald-400 text-sm font-medium flex items-center gap-1"> | |
| <i class="fa-solid fa-arrow-trend-up"></i> +4.2% | |
| </span> | |
| </div> | |
| <p class="text-slate-400 text-sm font-medium uppercase tracking-wider mb-1">Revenue</p> | |
| <h3 class="text-4xl font-display font-bold text-white">$<span class="counter" data-target="12450">0</span></h3> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="glass-card p-8 rounded-2xl relative overflow-hidden"> | |
| <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-primary-500 via-purple-500 to-emerald-500 opacity-50"></div> | |
| <div class="flex justify-between items-center mb-8"> | |
| <div> | |
| <h3 class="text-xl font-display font-bold text-white mb-1">Traffic Overview</h3> | |
| <p class="text-slate-400 text-sm">Real-time visitor analytics</p> | |
| </div> | |
| <div class="flex gap-2 bg-slate-800/50 p-1 rounded-xl border border-slate-700"> | |
| <button class="px-4 py-2 text-xs rounded-lg text-slate-400 hover:text-white transition-all">Day</button> | |
| <button class="px-4 py-2 text-xs rounded-lg bg-primary-600 text-white shadow-lg shadow-primary-500/30">Week</button> | |
| <button class="px-4 py-2 text-xs rounded-lg text-slate-400 hover:text-white transition-all">Month</button> | |
| </div> | |
| </div> | |
| <div class="relative h-80 w-full"> | |
| <svg id="traffic-chart" class="w-full h-full overflow-visible" preserveAspectRatio="none"> | |
| <defs> | |
| <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse"> | |
| <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1" /> | |
| </pattern> | |
| <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%"> | |
| <stop offset="0%" style="stop-color:#6366f1;stop-opacity:0.3" /> | |
| <stop offset="100%" style="stop-color:#6366f1;stop-opacity:0" /> | |
| </linearGradient> | |
| </defs> | |
| <rect width="100%" height="100%" fill="url(#grid)" /> | |
| <path id="chart-area" d="" fill="url(#gradient)" /> | |
| <path id="chart-line" d="" fill="none" stroke="#818cf8" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="chart-line" /> | |
| <g id="chart-points"></g> | |
| </svg> | |
| <div id="chart-tooltip" class="absolute pointer-events-none bg-slate-800 border border-slate-600 text-white text-xs rounded-lg px-3 py-2 opacity-0 transition-all shadow-2xl transform -translate-x-1/2 -translate-y-full mb-2 font-mono"> | |
| <span id="tooltip-value">0</span> Visits | |
| <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 rotate-45 w-2 h-2 bg-slate-800 border-r border-b border-slate-600"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <div class="glass-card p-8 rounded-2xl relative"> | |
| <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-bl from-blue-500/10 to-transparent rounded-bl-full"></div> | |
| <h3 class="text-lg font-display font-bold text-white mb-6 flex items-center gap-2"> | |
| <i class="fa-solid fa-microchip text-primary-400"></i> | |
| System Controls | |
| </h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-center justify-between p-4 rounded-xl bg-slate-800/30 border border-slate-700/50 hover:border-primary-500/30 transition-all group"> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-10 h-10 rounded-lg bg-blue-500/20 flex items-center justify-center text-blue-400 group-hover:scale-110 transition-transform"> | |
| <i class="fa-solid fa-shield-halved"></i> | |
| </div> | |
| <div> | |
| <p class="text-white font-medium">Firewall Protection</p> | |
| <p class="text-xs text-slate-400">Active monitoring</p> | |
| </div> | |
| </div> | |
| <div class="relative inline-block w-12 align-middle select-none"> | |
| <input type="checkbox" id="toggle-firewall" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer transition-all duration-300 left-0 top-0" checked/> | |
| <label for="toggle-firewall" class="toggle-label block overflow-hidden h-6 rounded-full bg-slate-700 cursor-pointer transition-colors duration-300"></label> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between p-4 rounded-xl bg-slate-800/30 border border-slate-700/50 hover:border-purple-500/30 transition-all group"> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-10 h-10 rounded-lg bg-purple-500/20 flex items-center justify-center text-purple-400 group-hover:scale-110 transition-transform"> | |
| <i class="fa-solid fa-database"></i> | |
| </div> | |
| <div> | |
| <p class="text-white font-medium">Database Backup</p> | |
| <p class="text-xs text-slate-400">Auto-sync disabled</p> | |
| </div> | |
| </div> | |
| <div class="relative inline-block w-12 align-middle select-none"> | |
| <input type="checkbox" id="toggle-db" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer transition-all duration-300 left-0 top-0"/> | |
| <label for="toggle-db" class="toggle-label block overflow-hidden h-6 rounded-full bg-slate-700 cursor-pointer transition-colors duration-300"></label> | |
| </div> | |
| </div> | |
| </div> | |
| <button id="btn-optimize" class="mt-6 w-full py-4 bg-slate-700 hover:bg-slate-600 text-white rounded-xl transition-all flex items-center justify-center gap-2 geo-btn font-medium group"> | |
| <i class="fa-solid fa-rocket group-hover:-translate-y-1 transition-transform"></i> | |
| <span>Run System Optimization</span> | |
| </button> | |
| </div> | |
| <div class="glass-card p-8 rounded-2xl relative overflow-hidden"> | |
| <div class="absolute top-0 right-0 w-40 h-40 bg-gradient-to-bl from-purple-500/10 to-transparent rounded-bl-full"></div> | |
| <h3 class="text-lg font-display font-bold text-white mb-2">Appearance</h3> | |
| <p class="text-sm text-slate-400 mb-8">Customize the accent color theme</p> | |
| <div class="grid grid-cols-5 gap-4 mb-8"> | |
| <button class="color-btn w-12 h-12 rounded-xl bg-indigo-500 ring-2 ring-offset-2 ring-offset-slate-900 ring-white transition-all hover:scale-110 shadow-lg shadow-indigo-500/30" data-color="indigo"></button> | |
| <button class="color-btn w-12 h-12 rounded-xl bg-emerald-500 hover:scale-110 transition-all shadow-lg shadow-emerald-500/30" data-color="emerald"></button> | |
| <button class="color-btn w-12 h-12 rounded-xl bg-rose-500 hover:scale-110 transition-all shadow-lg shadow-rose-500/30" data-color="rose"></button> | |
| <button class="color-btn w-12 h-12 rounded-xl bg-amber-500 hover:scale-110 transition-all shadow-lg shadow-amber-500/30" data-color="amber"></button> | |
| <button class="color-btn w-12 h-12 rounded-xl bg-cyan-500 hover:scale-110 transition-all shadow-lg shadow-cyan-500/30" data-color="cyan"></button> | |
| </div> | |
| <div class="p-6 bg-slate-800/50 rounded-xl border border-slate-700 relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent -translate-x-full hover:translate-x-full transition-transform duration-1000"></div> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-14 h-14 rounded-xl bg-slate-700 flex items-center justify-center text-2xl relative overflow-hidden" id="preview-icon-bg"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-transparent to-black/20"></div> | |
| <i class="fa-solid fa-paintbrush text-indigo-400" id="preview-icon"></i> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-medium font-display">Live Preview</h4> | |
| <p class="text-xs text-slate-400">Selected theme applies instantly</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- VIEW: TASKS --> | |
| <div id="view-tasks" class="hidden space-y-6 animate-slide-in max-w-4xl mx-auto"> | |
| <div class="glass-card p-8 rounded-2xl relative"> | |
| <div class="absolute top-0 left-0 w-2 h-full bg-gradient-to-b from-primary-500 to-purple-500"></div> | |
| <div class="flex items-center justify-between mb-8"> | |
| <div> | |
| <h3 class="text-2xl font-display font-bold text-white mb-1">Task Manager</h3> | |
| <p class="text-slate-400 text-sm">Organize your workflow efficiently</p> | |
| </div> | |
| <div class="w-12 h-12 rounded-xl bg-primary-500/20 flex items-center justify-center border border-primary-500/30"> | |
| <i class="fa-solid fa-list-check text-primary-400 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="flex gap-3 mb-8"> | |
| <div class="flex-1 relative"> | |
| <input type="text" id="task-input" placeholder="What needs to be done?" class="w-full bg-slate-800/50 border border-slate-700 text-white rounded-xl px-4 py-4 pl-12 focus:outline-none focus:border-primary-500 focus:ring-1 focus:ring-primary-500 transition-all placeholder-slate-500"> | |
| <i class="fa-solid fa-plus absolute left-4 top-1/2 -translate-y-1/2 text-slate-500"></i> | |
| </div> | |
| <button id="btn-add-task" class="geo-btn bg-primary-600 hover:bg-primary-500 text-white px-6 py-4 rounded-xl font-medium transition-all shadow-lg shadow-primary-600/20 flex items-center gap-2"> | |
| <span>Add Task</span> | |
| <i class="fa-solid fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| <div class="flex gap-6 border-b border-slate-700 mb-6"> | |
| <button class="task-filter pb-4 border-b-2 border-primary-500 text-white font-medium transition-all" data-filter="all">All Tasks</button> | |
| <button class="task-filter pb-4 border-b-2 border-transparent text-slate-400 hover:text-white transition-all" data-filter="active">Active</button> | |
| <button class="task-filter pb-4 border-b-2 border-transparent text-slate-400 hover:text-white transition-all" data-filter="completed">Completed</button> | |
| </div> | |
| <ul id="task-list" class="space-y-3"></ul> | |
| <div id="empty-state" class="hidden flex-col items-center justify-center py-16 text-center"> | |
| <div class="w-24 h-24 rounded-2xl bg-slate-800/50 flex items-center justify-center mb-6 rotate-3 hover:rotate-0 transition-transform duration-500 border border-slate-700"> | |
| <i class="fa-solid fa-clipboard-check text-4xl text-slate-600"></i> | |
| </div> | |
| <p class="text-slate-400 text-lg">No tasks found. Enjoy your free time!</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- VIEW: SETTINGS --> | |
| <div id="view-settings" class="hidden space-y-6 animate-slide-in max-w-3xl mx-auto"> | |
| <div class="glass-card p-8 rounded-2xl relative"> | |
| <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-bl from-slate-700/30 to-transparent rounded-bl-full"></div> | |
| <h3 class="text-2xl font-display font-bold text-white mb-8">System Settings</h3> | |
| <div class="flex items-center gap-6 pb-8 border-b border-slate-700 mb-8"> | |
| <div class="relative group cursor-pointer"> | |
| <div class="absolute inset-0 bg-gradient-to-r from-primary-500 to-purple-500 rounded-2xl rotate-3 group-hover:rotate-6 transition-transform"></div> | |
| <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Felix" class="relative w-24 h-24 rounded-2xl bg-slate-800 border-2 border-slate-700 group-hover:scale-105 transition-transform"> | |
| <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black/50 rounded-2xl"> | |
| <i class="fa-solid fa-camera text-white text-2xl"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="text-xl font-display font-bold text-white mb-1">Admin User</h4> | |
| <p class="text-slate-400 mb-4">admin@nexus.dev</p> | |
| <button class="geo-btn bg-slate-700 hover:bg-slate-600 text-white px-6 py-2 rounded-xl text-sm font-medium transition-all">Edit Profile</button> | |
| </div> | |
| </div> | |
| <div class="space-y-6 mb-8"> | |
| <h5 class="text-sm font-bold text-slate-500 uppercase tracking-wider mb-4">General</h5> | |
| <div class="flex items-center justify-between p-4 rounded-xl bg-slate-800/30 border border-slate-700/50"> | |
| <div> | |
| <p class="text-white font-medium">Email Notifications</p> | |
| <p class="text-sm text-slate-400">Receive daily summaries</p> | |
| </div> | |
| <div class="relative inline-block w-12 align-middle select-none"> | |
| <input type="checkbox" checked class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer transition-all duration-300 left-0 top-0"/> | |
| <label class="toggle-label block overflow-hidden h-6 rounded-full bg-primary-600 cursor-pointer transition-colors duration-300"></label> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between p-4 rounded-xl bg-slate-800/30 border border-slate-700/50"> | |
| <div> | |
| <p class="text-white font-medium">Two-Factor Authentication</p> | |
| <p class="text-sm text-slate-400">Secure your account</p> | |
| </div> | |
| <button class="text-primary-400 text-sm font-medium hover:text-primary-300 transition-colors">Enable</button> | |
| </div> | |
| </div> | |
| <div class="pt-8 border-t border-slate-700"> | |
| <h5 class="text-sm font-bold text-red-500 uppercase tracking-wider mb-4">Danger Zone</h5> | |
| <div class="flex items-center justify-between bg-red-500/10 border border-red-500/20 p-6 rounded-xl"> | |
| <div> | |
| <p class="text-red-400 font-medium font-display text-lg">Delete Account</p> | |
| <p class="text-sm text-red-400/70">This action cannot be undone.</p> | |
| </div> | |
| <button id="btn-delete-account" class="geo-btn bg-red-600 hover:bg-red-500 text-white px-6 py-3 rounded-xl text-sm font-medium transition-all shadow-lg shadow-red-600/20">Delete</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer Credit --> | |
| <div class="mt-12 text-center pb-6"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="inline-flex items-center gap-2 px-6 py-3 rounded-full bg-slate-800/50 border border-slate-700 text-slate-400 hover:text-white hover:border-primary-500/50 transition-all group"> | |
| <span class="w-2 h-2 rounded-full bg-primary-500 animate-pulse"></span> | |
| Built with anycoder | |
| <i class="fa-solid fa-arrow-up-right-from-square text-xs opacity-0 group-hover:opacity-100 transition-opacity"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- Toast Notification Container --> | |
| <div id="toast-container" class="fixed bottom-6 right-6 z-50 flex flex-col gap-3 pointer-events-none"></div> | |
| <!-- Modal Overlay --> | |
| <div id="modal-overlay" class="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 hidden flex items-center justify-center opacity-0 transition-opacity duration-300"> | |
| <div class="glass-card p-8 rounded-2xl max-w-md w-full mx-4 transform scale-95 transition-transform duration-300 border-red-500/30" id="modal-content"> | |
| <div class="text-center"> | |
| <div class="w-20 h-20 bg-red-500/20 rounded-2xl flex items-center justify-center mx-auto mb-6 rotate-3"> | |
| <i class="fa-solid fa-triangle-exclamation text-3xl text-red-500"></i> | |
| </div> | |
| <h3 class="text-2xl font-display font-bold text-white mb-2">Are you sure?</h3> | |
| <p class="text-slate-400 mb-8">This action will permanently delete your account and all associated data.</p> | |
| <div class="flex gap-3 justify-center"> | |
| <button id="btn-cancel-delete" class="geo-btn px-6 py-3 rounded-xl bg-slate-700 text-white hover:bg-slate-600 transition-all font-medium">Cancel</button> | |
| <button id="btn-confirm-delete" class="geo-btn px-6 py-3 rounded-xl bg-red-600 text-white hover:bg-red-500 transition-all font-medium shadow-lg shadow-red-600/20">Yes, Delete</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| const state = { | |
| tasks: [ | |
| { id: 1, text: "Review Q3 Analytics", completed: false }, | |
| { id: 2, text: "Update Server Config", completed: true }, | |
| { id: 3, text: "Team Meeting at 2 PM", completed: false } | |
| ], | |
| filter: 'all', | |
| theme: 'indigo' | |
| }; | |
| document.addEventListener('DOMContentLoaded', () => { | |
| initCounters(); | |
| initChart(); | |
| renderTasks(); | |
| setupEventListeners(); | |
| startServerSimulation(); | |
| }); | |
| function switchTab(tabName) { | |
| document.querySelectorAll('nav button').forEach(btn => { | |
| btn.classList.remove('bg-slate-800', 'text-white'); | |
| btn.classList.add('text-slate-400'); | |
| btn.querySelector('div.absolute')?.classList.remove('bg-primary-500'); | |
| btn.querySelector('div.absolute')?.classList.add('bg-transparent'); | |
| }); | |
| const activeBtn = document.getElementById(`nav-${tabName}`); | |
| activeBtn.classList.add('bg-slate-800', 'text-white'); | |
| activeBtn.classList.remove('text-slate-400'); | |
| activeBtn.querySelector('div.absolute').classList.add('bg-primary-500'); | |
| activeBtn.querySelector('div.absolute').classList.remove('bg-transparent'); | |
| document.querySelectorAll('[id^="view-"]').forEach(view => view.classList.add('hidden')); | |
| const activeView = document.getElementById(`view-${tabName}`); | |
| activeView.classList.remove('hidden'); | |
| activeView.classList.remove('animate-fade-in', 'animate-slide-in'); | |
| void activeView.offsetWidth; | |
| activeView.classList.add('animate-fade-in'); | |
| const titles = { | |
| 'dashboard': 'Dashboard Overview', | |
| 'tasks': 'Task Management', | |
| 'settings': 'System Settings' | |
| }; | |
| document.getElementById('page-title').textContent = titles[tabName]; | |
| } | |
| function initCounters() { | |
| const counters = document.querySelectorAll('.counter'); | |
| counters.forEach(counter => { | |
| const target = parseInt(counter.getAttribute('data-target')); | |
| const duration = 2000; | |
| const step = target / (duration / 16); | |
| let current = 0; | |
| const updateCounter = () => { | |
| current += step; | |
| if (current < target) { | |
| counter.textContent = Math.floor(current).toLocaleString(); | |
| requestAnimationFrame(updateCounter); | |
| } else { | |
| counter.textContent = target.toLocaleString(); | |
| } | |
| }; | |
| updateCounter(); | |
| }); | |
| } | |
| function initChart() { | |
| const svg = document.getElementById('traffic-chart'); | |
| const linePath = document.getElementById('chart-line'); | |
| const areaPath = document.getElementById('chart-area'); | |
| const pointsGroup = document.getElementById('chart-points'); | |
| const tooltip = document.getElementById('chart-tooltip'); | |
| const tooltipValue = document.getElementById('tooltip-value'); | |
| const data = [30, 45, 35, 55, 48, 62, 58, 75, 68, 85, 78, 92]; | |
| const width = svg.clientWidth || 800; | |
| const height = svg.clientHeight || 320; | |
| const padding = 40; | |
| const maxValue = Math.max(...data); | |
| const minValue = Math.min(...data); | |
| const range = maxValue - minValue; | |
| const xStep = (width - padding * 2) / (data.length - 1); | |
| const points = data.map((value, index) => { | |
| const x = padding + index * xStep; | |
| const y = height - padding - ((value - minValue) / range) * (height - padding * 2); | |
| return { x, y, value }; | |
| }); | |
| const lineD = points.reduce((acc, point, index) => { | |
| if (index === 0) return `M ${point.x} ${point.y}`; | |
| const prev = points[index - 1]; | |
| const cpX = (prev.x + point.x) / 2; | |
| return `${acc} C ${cpX} ${prev.y}, ${cpX} ${point.y}, ${point.x} ${point.y}`; | |
| }, ''); | |
| const areaD = `${lineD} L ${points[points.length - 1].x} ${height - padding} L ${points[0].x} ${height - padding} Z`; | |
| linePath.setAttribute('d', lineD); | |
| areaPath.setAttribute('d', areaD); | |
| points.forEach((point, index |