Update index.html

index.html

@@ -5,14 +5,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Aria | Curated IPTV Channels</title>
     
-    <!-- Premium Google Font -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
     
     <style>
         :root {
-            /* Light Mode Palette */
             --bg-color: #f4f4f5;
             --text-color: #18181b;
             --muted-text-color: #71717a;
@@ -30,7 +28,6 @@
         }
         @media (prefers-color-scheme: dark) {
             :root {
-                /* Dark Mode Palette */
                 --bg-color: #09090b;
                 --text-color: #fafafa;
                 --muted-text-color: #a1a1aa;
@@ -65,7 +62,6 @@
             padding: 2rem 1.5rem;
         }
 
-        /* Hero Header */
         header {
             text-align: center;
             margin-bottom: 3rem;
@@ -99,8 +95,6 @@
             max-width: 600px;
             margin: 0 auto;
         }
-
-        /* Stats Bar */
         .stats-bar {
             display: flex;
             justify-content: center;
@@ -118,7 +112,6 @@
         .stat-number { font-size: 1.75rem; font-weight: 800; color: var(--accent-color); line-height: 1.2; }
         .stat-label { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-text-color); }
 
-        /* Info Section */
         .project-info {
             background: var(--header-bg);
             border: 1px solid var(--border-color);
@@ -158,8 +151,7 @@
         }
         .playlist-link strong { font-size: 1.1rem; color: var(--accent-color); margin-bottom: 0.25rem; display: flex; align-items: center; gap: 0.5rem; }
         .playlist-link small { color: var(--muted-text-color); }
-
-        /* Controls (Search & View Toggle) */
+        
         .controls-bar {
             display: flex;
             gap: 1rem;
@@ -237,8 +229,7 @@
             transition: all 0.2s ease;
         }
         .action-button:hover { background: var(--border-color); }
-
-        /* List View */
+        
         .category-folder {
             border: 1px solid var(--border-color);
             border-radius: 16px;
@@ -306,7 +297,6 @@
             text-transform: uppercase;
         }
 
-        /* Buttons & Badges inside tables/grids */
         .status-badge {
             display: inline-flex;
             align-items: center;
@@ -325,7 +315,6 @@
 
         .link-group { display: flex; gap: 0.5rem; align-items: center; }
         
-        /* Icon Buttons */
         .icon-btn {
             display: inline-flex;
             align-items: center;
@@ -375,8 +364,6 @@
             transition: all 0.2s;
         }
         .report-btn:hover { background: rgba(239, 68, 68, 0.1); border-color: var(--danger-color); color: var(--danger-color); }
-
-        /* Grid View */
         .grid-view { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; }
         .grid-category {
             border: 1px solid var(--border-color);
@@ -413,7 +400,6 @@
             background: var(--border-color); border-radius: 4px; font-size: 9px; font-weight: 700; color: var(--text-color);
         }
 
-        /* Utilities */
         .spinner { width: 40px; height: 40px; border: 4px solid var(--border-color); border-top: 4px solid var(--accent-color); border-radius: 50%; animation: spin 1s linear infinite; margin: 3rem auto; }
         @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
         .no-results { text-align: center; padding: 4rem; color: var(--muted-text-color); background: var(--header-bg); border-radius: 16px; border: 1px solid var(--border-color); }
@@ -445,7 +431,6 @@
     <script type="text/babel">
         const { useState, useEffect, useMemo } = React;
 
-        // Perfectly scaled SVG Icons Components
         const Icons = {
             Search: () => <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>,
             ChevronDown: ({ className }) => <svg className={className} viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>,