Build all the components in an 8bit style, using 8bitcn/ui components or a similar component library for the styling: https://www.8bitcn.com/docs/components/badge

index.html

@@ -10,49 +10,52 @@
     <script src="https://unpkg.com/feather-icons"></script>
     <script src="https://d3js.org/d3.v7.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@tsparticles/confetti@3.0.3/tsparticles.confetti.bundle.min.js"></script>
-    <script src="https://unpkg.com/@serenity-ui/core@latest/dist/serenity-ui.js"></script>
-    <link rel="stylesheet" href="https://unpkg.com/@serenity-ui/core@latest/dist/serenity-ui.css">
-    <script src="https://unpkg.com/aceternity-ui@latest/dist/aceternity-ui.js"></script>
+    <link href="https://cdn.jsdelivr.net/npm/8bitcn-ui@latest/dist/8bitcn-ui.css" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/8bitcn-ui@latest/dist/8bitcn-ui.js"></script>
     <style>
         .world-map {
             width: 100%;
             height: 600px;
-            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+            background: #000;
+            border: 4px solid #00ff00;
+            image-rendering: pixelated;
         }
         
         .country:hover {
-            stroke: #ffffff;
+            stroke: #ffff00;
             stroke-width: 2px;
-            filter: brightness(1.2);
+            filter: brightness(1.5);
         }
         
         .heat-gradient {
-            stop-color: #3b82f6;
-            stop-opacity: 0.3;
+            stop-color: #00ff00;
+            stop-opacity: 0.6;
         }
         
         .heat-gradient-stop-2 {
-            stop-color: #8b5cf6;
-            stop-opacity: 0.6;
+            stop-color: #ffff00;
+            stop-opacity: 0.8;
         }
         
         .heat-gradient-stop-3 {
-            stop-color: #ec4899;
-            stop-opacity: 0.9;
+            stop-color: #ff0000;
+            stop-opacity: 1;
         }
         
         .pulse-ring {
-            animation: pulse 2s infinite;
+            animation: pulse 1s infinite;
+            image-rendering: pixelated;
         }
         
         @keyframes pulse {
             0% { transform: scale(0.8); opacity: 1; }
-            70% { transform: scale(1.2); opacity: 0.7; }
+            50% { transform: scale(1.2); opacity: 0.7; }
             100% { transform: scale(0.8); opacity: 1; }
         }
         
         .ticker-item {
-            animation: ticker-scroll 30s linear infinite;
+            animation: ticker-scroll 20s linear infinite;
+            font-family: 'Courier New', monospace;
         }
         
         @keyframes ticker-scroll {
@@ -60,106 +63,179 @@
             100% { transform: translateX(-100%); }
         }
         
-        .glass-effect {
-            background: rgba(255, 255, 255, 0.1);
-            backdrop-filter: blur(10px);
-            border: 1px solid rgba(255, 255, 255, 0.2);
+        .pixel-border {
+            border: 4px solid #00ff00;
+            border-image: repeating-linear-gradient(45deg, #00ff00, #00ff00 4px, #000 4px, #000 8px) 4;
+            image-rendering: pixelated;
+        }
+        
+        .pixel-bg {
+            background: #000;
+            border: 2px solid #00ff00;
+            image-rendering: pixelated;
+        }
+        
+        .pixel-text {
+            font-family: 'Courier New', monospace;
+            text-shadow: 2px 2px 0 #000;
+            letter-spacing: 1px;
+        }
+        
+        .pixel-button {
+            background: #000;
+            border: 3px solid #00ff00;
+            font-family: 'Courier New', monospace;
+            text-shadow: 1px 1px 0 #000;
+            image-rendering: pixelated;
+            transition: all 0.1s;
+        }
+        
+        .pixel-button:hover {
+            background: #00ff00;
+            color: #000;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 0 #008800;
+        }
+        
+        .pixel-button:active {
+            transform: translateY(0);
+            box-shadow: 0 2px 0 #008800;
+        }
+        
+        .pixel-card {
+            background: #000;
+            border: 4px solid #00ff00;
+            box-shadow: 8px 8px 0 #008800;
+            image-rendering: pixelated;
         }
         
-        .dark .glass-effect {
-            background: rgba(15, 23, 42, 0.7);
-            border: 1px solid rgba(255, 255, 255, 0.1);
+        .pixel-nav {
+            background: #000;
+            border-right: 4px solid #00ff00;
+            border-bottom: 4px solid #00ff00;
+            image-rendering: pixelated;
+        }
+        
+        .pixel-checkbox {
+            appearance: none;
+            width: 20px;
+            height: 20px;
+            border: 2px solid #00ff00;
+            background: #000;
+            image-rendering: pixelated;
+        }
+        
+        .pixel-checkbox:checked {
+            background: #00ff00;
+            box-shadow: inset 0 0 0 2px #000;
+        }
+        
+        .pixel-badge {
+            font-family: 'Courier New', monospace;
+            border: 2px solid;
+            padding: 2px 8px;
+            font-size: 12px;
+            image-rendering: pixelated;
+        }
+        
+        body {
+            font-family: 'Courier New', monospace;
+            background: #000 !important;
+            color: #00ff00 !important;
+            image-rendering: pixelated;
+        }
+        
+        .dark body {
+            background: #000 !important;
+            color: #00ff00 !important;
         }
     </style>
 </head>
-<body class="bg-gray-50 dark:bg-slate-900 text-slate-900 dark:text-slate-100 transition-colors duration-300">
+<body class="bg-black text-green-400 transition-colors duration-300 pixel-text">
     <!-- Theme Toggler -->
     <div class="fixed top-4 right-4 z-50">
-        <button id="themeToggle" class="p-3 rounded-full glass-effect shadow-lg hover:scale-110 transition-transform">
+        <button id="themeToggle" class="p-3 pixel-button">
             <i data-feather="moon" class="hidden dark:block"></i>
             <i data-feather="sun" class="dark:hidden"></i>
         </button>
     </div>
-
-    <!-- Main Layout -->
+<!-- Main Layout -->
     <div class="min-h-screen flex">
         <!-- Sidebar -->
-        <aside class="w-64 glass-effect rounded-r-2xl shadow-xl p-6 fixed h-screen z-40">
+        <aside class="w-64 pixel-nav p-6 fixed h-screen z-40">
             <div class="flex items-center space-x-3 mb-8">
-                <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
-                    <i data-feather="activity" class="text-white"></i>
+                <div class="w-10 h-10 bg-green-500 pixel-border flex items-center justify-center">
+                    <i data-feather="activity" class="text-black"></i>
                 </div>
-                <h1 class="text-xl font-bold">EventScrape</h1>
+                <h1 class="text-xl font-bold pixel-text">EVENT_SCRAPE</h1>
             </div>
             
             <nav class="space-y-2">
-                <a href="#" class="flex items-center space-x-3 p-3 rounded-lg bg-blue-500/20 text-blue-600 dark:text-blue-400">
+                <a href="#" class="flex items-center space-x-3 p-3 pixel-bg bg-green-500 text-black">
                     <i data-feather="home"></i>
-                    <span>Dashboard</span>
+                    <span>DASHBOARD</span>
                 </a>
-                <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-slate-200/50 dark:hover:bg-slate-700/50">
+                <a href="#" class="flex items-center space-x-3 p-3 pixel-bg hover:bg-green-500 hover:text-black">
                     <i data-feather="compass"></i>
-                    <span>Scrape Runs</span>
+                    <span>SCRAPE_RUNS</span>
                 </a>
-                <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-slate-200/50 dark:hover:bg-slate-700/50">
+                <a href="#" class="flex items-center space-x-3 p-3 pixel-bg hover:bg-green-500 hover:text-black">
                     <i data-feather="database"></i>
-                    <span>Data Management</span>
+                    <span>DATA_MGMT</span>
                 </a>
-                <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-slate-200/50 dark:hover:bg-slate-700/50">
+                <a href="#" class="flex items-center space-x-3 p-3 pixel-bg hover:bg-green-500 hover:text-black">
                     <i data-feather="bar-chart-2"></i>
-                    <span>Analytics</span>
+                    <span>ANALYTICS</span>
                 </a>
-                <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-slate-200/50 dark:hover:bg-slate-700/50">
+                <a href="#" class="flex items-center space-x-3 p-3 pixel-bg hover:bg-green-500 hover:text-black">
                     <i data-feather="settings"></i>
-                    <span>Settings</span>
+                    <span>SETTINGS</span>
                 </a>
             </nav>
             
             <!-- Map Filters -->
             <div class="mt-8">
-                <h3 class="font-semibold mb-4">Map Layers</h3>
+                <h3 class="font-semibold mb-4 pixel-text">MAP_LAYERS</h3>
                 <div class="space-y-2">
                     <label class="flex items-center space-x-3">
-                        <input type="checkbox" checked class="rounded border-slate-300" data-layer="events">
-                        <span>Event Count</span>
+                        <input type="checkbox" checked class="pixel-checkbox" data-layer="events">
+                        <span class="pixel-text">EVENT_COUNT</span>
                     </label>
                     <label class="flex items-center space-x-3">
-                        <input type="checkbox" class="rounded border-slate-300" data-layer="music">
-                        <span>Music Styles</span>
+                        <input type="checkbox" class="pixel-checkbox" data-layer="music">
+                        <span class="pixel-text">MUSIC_STYLES</span>
                     </label>
                     <label class="flex items-center space-x-3">
-                        <input type="checkbox" class="rounded border-slate-300" data-layer="capacity">
-                        <span>Venue Capacity</span>
+                        <input type="checkbox" class="pixel-checkbox" data-layer="capacity">
+                        <span class="pixel-text">VENUE_CAPACITY</span>
                     </label>
                 </div>
             </div>
         </aside>
-
-        <!-- Main Content -->
+<!-- Main Content -->
         <main class="flex-1 ml-64 p-6">
             <!-- Header with Alerts Ticker -->
             <header class="mb-8">
-                <div class="glass-effect rounded-xl p-4 mb-4 overflow-hidden">
+                <div class="pixel-card p-4 mb-4 overflow-hidden">
                     <div class="flex items-center space-x-4">
-                        <i data-feather="alert-circle" class="text-red-500"></i>
+                        <i data-feather="alert-circle" class="text-red-400"></i>
                         <div class="flex-1 overflow-hidden">
                             <div class="ticker-container whitespace-nowrap">
                                 <div class="ticker-item inline-block px-4">
-                                    🚨 High latency detected in North American scrapers • 
+                                    [ALERT] HIGH_LATENCY_NORTH_AMERICA • 
                                 </div>
                                 <div class="ticker-item inline-block px-4">
-                                    ✅ Plugin v2.3.1 successfully deployed • 
+                                    [OK] PLUGIN_v2.3.1_DEPLOYED • 
                                 </div>
                                 <div class="ticker-item inline-block px-4">
-                                    ⚡ Real-time sync active across all regions • 
+                                    [SYNC] REAL_TIME_ACTIVE_ALL_REGIONS • 
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </header>
-
-            <!-- KPI Cards Grid -->
+<!-- KPI Cards Grid -->
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                 <!-- Events Scraped -->
                 <div class="glass-effect rounded-xl p-6 relative overflow-hidden">