Spaces:

matthewspring
/

anycoder-b0ac2538

Running

App Files Files Community

matthewspring commited on Feb 5

Commit

6a04f8b

verified ·

1 Parent(s): a1ca9fc

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +709 -684

index.html CHANGED Viewed

@@ -1,722 +1,747 @@
 <!DOCTYPE html>
 <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>
-        /* Geometric Background Patterns */
-        .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);
-        }
-        /* Geometric Shapes */
-        .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);
-            border-bottom-color: rgba(255, 255, 255, 0.03);
-        }
-        .geo-hexagon:after {
-            top: 100%;
-            border-top: 28.87px solid rgba(255, 255, 255, 0.03);
-        }
-        /* Glass Cards with Geometric Borders */
-        .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;
-        }
-        /* Custom Scrollbar */
-        ::-webkit-scrollbar {
-            width: 8px;
-        }
-        ::-webkit-scrollbar-track {
-            background: #0f172a;
-        }
-        ::-webkit-scrollbar-thumb {
-            background: #334155;
-            border-radius: 4px;
-        }
-        ::-webkit-scrollbar-thumb:hover {
-            background: #475569;
-        }
-        /* Toggle Switch */
-        .toggle-checkbox:checked {
-            right: 0;
-            border-color: #6366f1;
-        }
-        .toggle-checkbox:checked + .toggle-label {
-            background-color: #6366f1;
-        }
-        /* Chart Animation */
-        .chart-line {
-            stroke-dasharray: 1000;
-            stroke-dashoffset: 1000;
-            animation: drawLine 2s ease-out forwards;
-        }
-        @keyframes drawLine {
-            to { stroke-dashoffset: 0; }
-        }
-        /* Confetti */
-        .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); }
-        }
-        /* Geometric Button Hover */
-        .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 Overlay */
-        .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">
-            <!-- Geometric Corner Accent -->
-            <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">
-            <!-- Grid Pattern Overlay -->
-            <div class="absolute inset-0 grid-pattern opacity-50 pointer-events-none"></div>
-            <!-- Top Header -->
-            <header class="h-20 glass 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">
-                    <!-- Stats Grid with Geometric Cards -->
-                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-                        <!-- Stat Card 1 -->
-                        <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>
-                        <!-- Stat Card 2 -->
-                        <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>
-                        <!-- Stat Card 3 -->
-                        <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>
-                    <!-- Interactive Chart Section -->
-                    <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>
-                        <!-- SVG Chart with Artistic Grid -->
-                        <div class="relative h-80 w-full">
-                            <svg id="traffic-chart" class="w-full h-full overflow-visible" preserveAspectRatio="none">
-                                <!-- Grid Lines -->
-                                <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)" />
-                                <!-- Chart Line -->
-                                <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" />
-                                <!-- Data Points -->
-                                <g id="chart-points"></g>
-                            </svg>
-                            <!-- Tooltip -->
-                            <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>
-                    <!-- Interactive Elements Row -->
-                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-                        <!-- System Controls -->
-                        <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>
-                        <!-- Appearance Settings -->
-                        <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>
-                        <!-- Input Area -->
-                        <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>
-                        <!-- Filters -->
-                        <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>
-                        <!-- Task List -->
-                        <ul id="task-list" class="space-y-3">
-                            <!-- Tasks injected via JS -->
-                        </ul>
-                        <!-- Empty State -->
-                        <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>
-                        <!-- Profile Section -->
-                        <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>
-                        <!-- General Settings -->
-                        <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>
-                        <!-- Danger Zone -->
-                        <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>
-        // --- State Management ---
-        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'
         };
-        // --- Initialization ---
-        document.addEventListener('DOMContentLoaded', () => {
-            initCounters();
-            initChart();
-            renderTasks();
-            setupEventListeners();
-            startServerSimulation();
-        });
-        // --- Navigation ---
-        function switchTab(tabName) {
-            // Update Nav UI
-            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');
-            // Update View
-            document.querySelectorAll('[id^="view-"]').forEach(view => view.classList.add('hidden'));
-            const activeView = document.getElementById(`view-${tabName}`);
-            activeView.classList.remove('hidden');
-            // Trigger animation reset
-            activeView.classList.remove('animate-fade-in', 'animate-slide-in');
-            void activeView.offsetWidth;
-            activeView.classList.add('animate-fade-in');
-            // Update Title
-            const titles = {
-                'dashboard': 'Dashboard Overview',
-                'tasks': 'Task Management',
-                'settings': 'System Settings'
-            };
-            document.getElementById('page-title

 <!DOCTYPE html>
 <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