@howssatoshi/quantumcss 1.10.1 → 1.11.0

package/examples/video-streaming.html

@@ -6,26 +6,94 @@
     <title>Starlight Video - Watch</title>
     <link rel="stylesheet" href="../dist/quantum.min.css">
     <link rel="stylesheet" href="../src/styles/quantum-components.css">
+    <link rel="stylesheet" href="../src/styles/quantum-icons.css">
     <script src="../src/starlight.js"></script>
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
         body {
-            background: var(--bg-primary, #0a0a0a);
+            background: var(--bg-primary, #050510);
+            background-image: 
+                radial-gradient(ellipse at 20% 30%, rgba(0, 212, 255, 0.08) 0%, transparent 50%),
+                radial-gradient(ellipse at 80% 70%, rgba(139, 92, 246, 0.06) 0%, transparent 50%),
+                radial-gradient(circle at 50% 50%, rgba(15, 23, 42, 1) 0%, #050510 100%);
             color: var(--text-primary, #f1f5f9);
             font-family: 'Inter', system-ui, sans-serif;
+            min-height: 100vh;
         }
         
-        /* Layout */
-        .video-app { display: grid; grid-template-rows: auto 1fr; height: 100vh; overflow: hidden; }
+        .stars {
+            position: fixed;
+            inset: 0;
+            pointer-events: none;
+            overflow: hidden;
+            z-index: 0;
+        }
+        .stars::before,
+        .stars::after {
+            content: '';
+            position: absolute;
+            width: 2px;
+            height: 2px;
+            background: white;
+            border-radius: 50%;
+            box-shadow: 
+                100px 50px 0 rgba(255,255,255,0.3),
+                200px 150px 0 rgba(255,255,255,0.2),
+                400px 80px 0 rgba(255,255,255,0.25),
+                600px 200px 0 rgba(255,255,255,0.2),
+                800px 100px 0 rgba(255,255,255,0.3),
+                150px 300px 0 rgba(255,255,255,0.2),
+                350px 350px 0 rgba(255,255,255,0.15),
+                550px 400px 0 rgba(255,255,255,0.25),
+                750px 450px 0 rgba(255,255,255,0.2),
+                50px 500px 0 rgba(255,255,255,0.3),
+                250px 550px 0 rgba(255,255,255,0.15),
+                450px 600px 0 rgba(255,255,255,0.25),
+                650px 650px 0 rgba(255,255,255,0.2),
+                850px 700px 0 rgba(255,255,255,0.3),
+                900px 250px 0 rgba(255,255,255,0.2),
+                700px 300px 0 rgba(255,255,255,0.15);
+            animation: twinkle 4s ease-in-out infinite;
+        }
+        .stars::after {
+            left: 50px;
+            animation-delay: 2s;
+            box-shadow: 
+                80px 100px 0 rgba(255,255,255,0.2),
+                180px 200px 0 rgba(255,255,255,0.3),
+                320px 120px 0 rgba(255,255,255,0.2),
+                520px 280px 0 rgba(255,255,255,0.25),
+                720px 180px 0 rgba(255,255,255,0.2),
+                920px 380px 0 rgba(255,255,255,0.3),
+                120px 420px 0 rgba(255,255,255,0.2),
+                380px 480px 0 rgba(255,255,255,0.25),
+                580px 520px 0 rgba(255,255,255,0.15),
+                780px 580px 0 rgba(255,255,255,0.2),
+                980px 620px 0 rgba(255,255,255,0.3);
+        }
+        @keyframes twinkle {
+            0%, 100% { opacity: 0.5; }
+            50% { opacity: 1; }
+        }
+        
+        .video-app { 
+            display: grid; 
+            grid-template-rows: auto 1fr; 
+            height: 100vh; 
+            overflow: hidden;
+            position: relative;
+            z-index: 1;
+        }
         
-        /* Header */
         header {
             display: flex;
             align-items: center;
             justify-content: space-between;
             padding: 0.75rem 1.5rem;
-            background: rgba(10, 10, 10, 0.95);
-            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+            background: rgba(15, 23, 42, 0.8);
+            backdrop-filter: blur(16px);
+            -webkit-backdrop-filter: blur(16px);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
         }
         .logo {
             display: flex;
@@ -33,12 +101,21 @@
             gap: 0.75rem;
             font-size: 1.5rem;
             font-weight: 700;
+            background: linear-gradient(135deg, #00d4ff, #8b5cf6);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
         }
         .logo-icon {
             width: 40px; height: 40px;
-            background: linear-gradient(135deg, #ef4444, #dc2626);
+            background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(139, 92, 246, 0.2));
+            border: 1px solid rgba(0, 212, 255, 0.3);
             border-radius: 10px;
             display: flex; align-items: center; justify-content: center;
+            backdrop-filter: blur(10px);
+        }
+        .logo-icon .q-icon {
+            color: #00d4ff;
         }
         .search-bar {
             flex: 1;
@@ -56,20 +133,29 @@
             font-size: 0.9375rem;
             outline: none;
             transition: all 0.2s;
+            backdrop-filter: blur(10px);
         }
         .video-search-input:focus {
             border-color: var(--color-starlight, #00d4ff);
-            background: rgba(255, 255, 255, 0.08);
-            box-shadow: 0 0 0 2px var(--q-color-starlight-deep), 0 0 0 4px var(--q-color-starlight-blue);
+            background: rgba(0, 212, 255, 0.08);
+            box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.2), 0 0 20px rgba(0, 212, 255, 0.1);
+        }
+        .video-search-input::placeholder {
+            color: rgba(255, 255, 255, 0.4);
         }
         .search-btn {
             padding: 0 1.25rem;
-            background: rgba(255, 255, 255, 0.1);
-            border: 1px solid rgba(255, 255, 255, 0.1);
+            background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(139, 92, 246, 0.15));
+            border: 1px solid rgba(0, 212, 255, 0.2);
             border-left: none;
             border-radius: 0 0.5rem 0.5rem 0;
-            color: var(--text-primary, #f1f5f9);
+            color: #00d4ff;
             cursor: pointer;
+            transition: all 0.2s;
+        }
+        .search-btn:hover {
+            background: linear-gradient(135deg, rgba(0, 212, 255, 0.25), rgba(139, 92, 246, 0.25));
+            box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
         }
         .header-actions {
             display: flex;
@@ -78,23 +164,34 @@
         }
         .icon-btn {
             width: 40px; height: 40px;
-            border-radius: 50%;
-            background: transparent;
-            border: none;
+            border-radius: 12px;
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(255, 255, 255, 0.1);
             color: var(--text-primary, #f1f5f9);
             cursor: pointer;
             display: flex; align-items: center; justify-content: center;
+            transition: all 0.2s;
+            backdrop-filter: blur(10px);
+        }
+        .icon-btn:hover { 
+            background: rgba(0, 212, 255, 0.1);
+            border-color: rgba(0, 212, 255, 0.3);
+            box-shadow: 0 0 20px rgba(0, 212, 255, 0.15);
+        }
+        .icon-btn .q-icon {
+            width: 18px;
+            height: 18px;
         }
-        .icon-btn:hover { background: rgba(255, 255, 255, 0.1); }
         .user-avatar {
             width: 36px; height: 36px;
             border-radius: 50%;
             background: linear-gradient(135deg, #3b82f6, #00d4ff);
             display: flex; align-items: center; justify-content: center;
             font-weight: 600; font-size: 0.875rem;
+            border: 2px solid rgba(0, 212, 255, 0.3);
+            box-shadow: 0 0 15px rgba(0, 212, 255, 0.2);
         }
         
-        /* Main Content */
         .main-content {
             display: grid;
             grid-template-columns: 240px 1fr;
@@ -124,42 +221,60 @@
             }
         }
         
-        /* Sidebar */
         .sidebar {
-            padding: 0.75rem 0;
+            padding: 0.75rem;
             overflow-y: auto;
+            background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(8, 8, 26, 0.98) 100%);
+            border-right: 1px solid rgba(255, 255, 255, 0.06);
         }
         .nav-item {
             display: flex;
             align-items: center;
             gap: 1.25rem;
-            padding: 0.75rem 1.5rem;
+            padding: 0.75rem 1rem;
             color: var(--text-secondary, #94a3b8);
             text-decoration: none;
             font-size: 0.9375rem;
             transition: all 0.2s;
+            border-radius: 12px;
+            border: 1px solid transparent;
+            margin-bottom: 0.25rem;
+        }
+        .nav-item .q-icon {
+            width: 20px;
+            height: 20px;
+            flex-shrink: 0;
         }
         .video-app .nav-item:hover, .video-app .nav-item.active {
-            background: rgba(255, 255, 255, 0.05);
+            background: rgba(0, 212, 255, 0.08);
+            border-color: rgba(0, 212, 255, 0.15);
             color: var(--text-primary, #f1f5f9);
         }
-        .nav-item.active { font-weight: 600; }
+        .nav-item.active { 
+            font-weight: 600;
+            color: #00d4ff;
+        }
+        .nav-item.active .q-icon {
+            color: #00d4ff;
+        }
         .nav-section {
             padding: 0.75rem 0;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+            margin-bottom: 0.5rem;
         }
         .nav-title {
-            padding: 0.5rem 1.5rem;
-            font-size: 0.875rem;
-            font-weight: 600;
-            color: var(--text-muted, #64748b);
+            padding: 0.5rem 1rem;
+            font-size: 0.75rem;
+            font-weight: 700;
             text-transform: uppercase;
+            letter-spacing: 0.1em;
+            color: var(--text-muted, #64748b);
         }
         
-        /* Video Feed */
         .video-feed {
             padding: 1.5rem;
             overflow-y: auto;
+            background: rgba(5, 5, 16, 0.3);
         }
         .category-tabs {
             display: flex;
@@ -172,19 +287,26 @@
             padding: 0.5rem 1rem;
             background: rgba(255, 255, 255, 0.05);
             border: 1px solid rgba(255, 255, 255, 0.1);
-            border-radius: 0.5rem;
+            border-radius: 9999px;
             color: var(--text-primary, #f1f5f9);
             font-size: 0.875rem;
             cursor: pointer;
             white-space: nowrap;
             transition: all 0.2s;
+            backdrop-filter: blur(10px);
+        }
+        .category-tab:hover { 
+            background: rgba(0, 212, 255, 0.1);
+            border-color: rgba(0, 212, 255, 0.3);
+            color: #00d4ff;
         }
-        .category-tab:hover, .category-tab.active {
-            background: var(--text-primary, #f1f5f9);
-            color: var(--bg-primary, #0a0a0a);
+        .category-tab.active {
+            background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(139, 92, 246, 0.2));
+            border-color: rgba(0, 212, 255, 0.4);
+            color: #00d4ff;
+            box-shadow: 0 0 20px rgba(0, 212, 255, 0.15);
         }
         
-        /* Video Grid */
         .video-grid {
             display: grid;
             grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
@@ -192,16 +314,26 @@
         }
         .video-card {
             cursor: pointer;
-            transition: transform 0.2s;
+            transition: transform 0.3s, box-shadow 0.3s;
+            border-radius: 16px;
+            background: rgba(255, 255, 255, 0.03);
+            border: 1px solid rgba(255, 255, 255, 0.08);
+            padding: 0.75rem;
+            backdrop-filter: blur(10px);
+        }
+        .video-card:hover { 
+            transform: translateY(-4px);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 212, 255, 0.1);
+            border-color: rgba(0, 212, 255, 0.2);
         }
-        .video-card:hover { transform: scale(1.02); }
         .video-thumbnail {
             position: relative;
             aspect-ratio: 16/9;
-            background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
-            border-radius: 0.75rem;
+            background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(139, 92, 246, 0.1));
+            border-radius: 12px;
             overflow: hidden;
             margin-bottom: 0.75rem;
+            border: 1px solid rgba(255, 255, 255, 0.08);
         }
         .video-thumbnail img {
             width: 100%; height: 100%;
@@ -213,9 +345,11 @@
             right: 0.5rem;
             padding: 0.25rem 0.5rem;
             background: rgba(0, 0, 0, 0.8);
-            border-radius: 0.25rem;
+            backdrop-filter: blur(10px);
+            border-radius: 6px;
             font-size: 0.75rem;
             font-weight: 600;
+            border: 1px solid rgba(255, 255, 255, 0.1);
         }
         .video-info {
             display: flex;
@@ -228,6 +362,8 @@
             display: flex; align-items: center; justify-content: center;
             font-weight: 600; font-size: 0.875rem;
             flex-shrink: 0;
+            border: 2px solid rgba(139, 92, 246, 0.3);
+            box-shadow: 0 0 10px rgba(139, 92, 246, 0.2);
         }
         .video-meta { flex: 1; }
         .video-title {
@@ -250,7 +386,6 @@
             color: var(--text-muted, #64748b);
         }
         
-        /* Featured Section */
         .featured-section {
             margin-bottom: 2rem;
         }
@@ -266,15 +401,29 @@
             display: flex;
             align-items: center;
             gap: 0.5rem;
+            background: linear-gradient(135deg, #f1f5f9, #94a3b8);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        .featured-header h2 .q-icon {
+            width: 22px;
+            height: 22px;
+            background: linear-gradient(135deg, #00d4ff, #f59e0b);
+            -webkit-mask: none;
+            mask: none;
         }
         .see-all {
             color: var(--color-starlight, #00d4ff);
             text-decoration: none;
             font-size: 0.875rem;
             font-weight: 500;
+            transition: all 0.2s;
+        }
+        .see-all:hover {
+            text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
         }
         
-        /* Shorts */
         .shorts-grid {
             display: grid;
             grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
@@ -282,16 +431,26 @@
         }
         .short-card {
             cursor: pointer;
-            transition: transform 0.2s;
+            transition: transform 0.3s, box-shadow 0.3s;
+            border-radius: 16px;
+            background: rgba(255, 255, 255, 0.03);
+            border: 1px solid rgba(255, 255, 255, 0.08);
+            padding: 0.5rem;
+            backdrop-filter: blur(10px);
+        }
+        .short-card:hover { 
+            transform: scale(1.02);
+            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(139, 92, 246, 0.1);
+            border-color: rgba(139, 92, 246, 0.3);
         }
-        .short-card:hover { transform: scale(1.02); }
         .short-thumbnail {
             aspect-ratio: 9/16;
-            background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
-            border-radius: 0.75rem;
+            background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(236, 72, 153, 0.15));
+            border-radius: 12px;
             overflow: hidden;
             margin-bottom: 0.5rem;
             position: relative;
+            border: 1px solid rgba(255, 255, 255, 0.08);
         }
         .short-thumbnail img {
             width: 100%; height: 100%;
@@ -303,9 +462,11 @@
             left: 0.5rem;
             font-size: 0.75rem;
             font-weight: 600;
-            background: rgba(0, 0, 0, 0.7);
+            background: rgba(0, 0, 0, 0.8);
+            backdrop-filter: blur(10px);
             padding: 0.25rem 0.5rem;
-            border-radius: 0.25rem;
+            border-radius: 6px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
         }
         .short-title {
             font-size: 0.875rem;
@@ -315,20 +476,55 @@
             -webkit-line-clamp: 2;
             -webkit-box-orient: vertical;
             overflow: hidden;
+            padding: 0 0.25rem;
         }
         
-        /* Light Mode */
         html[data-theme="light"] {
-            --bg-primary: #ffffff;
-            --text-primary: #0f0f0f;
-            --text-secondary: #606060;
-            --text-muted: #909090;
-        }
-        html[data-theme="light"] header { background: #ffffff; border-bottom-color: #e5e5e5; }
-        html[data-theme="light"] .nav-item:hover, html[data-theme="light"] .nav-item.active { background: #f2f2f2; }
-        html[data-theme="light"] .category-tab { background: #f2f2f2; border-color: #e5e5e5; color: #0f0f0f; }
-        html[data-theme="light"] .category-tab.active { background: #0f0f0f; color: #ffffff; }
-        html[data-theme="light"] .video-thumbnail, html[data-theme="light"] .short-thumbnail { background: #f2f2f2; }
+            --bg-primary: #f8fafc;
+            --text-primary: #0f172a;
+            --text-secondary: #475569;
+            --text-muted: #94a3b8;
+            color-scheme: light;
+        }
+        html[data-theme="light"] body {
+            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f1f5f9 100%);
+        }
+        html[data-theme="light"] header { 
+            background: rgba(255, 255, 255, 0.8);
+            border-bottom-color: rgba(0, 0, 0, 0.08);
+        }
+        html[data-theme="light"] .sidebar {
+            background: rgba(255, 255, 255, 0.6);
+            border-right-color: rgba(0, 0, 0, 0.06);
+        }
+        html[data-theme="light"] .video-feed {
+            background: rgba(255, 255, 255, 0.3);
+        }
+        html[data-theme="light"] .nav-item:hover, html[data-theme="light"] .nav-item.active { 
+            background: rgba(0, 212, 255, 0.1);
+        }
+        html[data-theme="light"] .category-tab { 
+            background: rgba(255, 255, 255, 0.8);
+            border-color: rgba(0, 0, 0, 0.1);
+        }
+        html[data-theme="light"] .category-tab.active { 
+            background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(139, 92, 246, 0.15));
+            border-color: rgba(0, 212, 255, 0.3);
+            color: #2563eb;
+        }
+        html[data-theme="light"] .video-card,
+        html[data-theme="light"] .short-card {
+            background: rgba(255, 255, 255, 0.8);
+            border-color: rgba(0, 0, 0, 0.08);
+        }
+        html[data-theme="light"] .video-thumbnail, 
+        html[data-theme="light"] .short-thumbnail { 
+            background: linear-gradient(135deg, rgba(0, 212, 255, 0.05), rgba(139, 92, 246, 0.05));
+        }
+        html[data-theme="light"] .video-search-input {
+            background: rgba(255, 255, 255, 0.9);
+            border-color: rgba(0, 0, 0, 0.1);
+        }
         
         @media (max-width: 1024px) {
             .video-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
@@ -338,54 +534,70 @@
             .video-grid { grid-template-columns: 1fr; }
             .shorts-grid { grid-template-columns: repeat(2, 1fr); }
         }
-        ::-webkit-scrollbar { width: 8px; height: 8px; }
-        ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; }
-        html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #ccc; }
+        ::-webkit-scrollbar { width: 8px; }
+        ::-webkit-scrollbar-track { background: transparent; }
+        ::-webkit-scrollbar-thumb { 
+            background: linear-gradient(135deg, var(--q-color-starlight-peach, #f97316) 0%, var(--q-color-starlight-blue, #00d4ff) 100%); 
+            border-radius: 10px;
+            border: 2px solid var(--q-bg-primary, #050510);
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: linear-gradient(135deg, var(--q-color-starlight-peach, #f97316) 0%, var(--q-color-starlight-blue, #00d4ff) 100%); 
+        }
+        html[data-theme="light"] ::-webkit-scrollbar-thumb { 
+            background: linear-gradient(135deg, var(--q-color-starlight-peach, #f97316) 40%, var(--q-color-starlight-blue, #00d4ff) 100%);
+            border-color: var(--q-light-bg, #f1f5f9); 
+        }
+        
+        .hidden { display: none !important; }
     </style>
 </head>
 <body>
+    <div class="stars"></div>
     <div class="video-app">
         <header>
             <div class="logo">
-                <div class="logo-icon">▶️</div>
+                <div class="logo-icon">
+                    <span class="q-icon q-icon-play-fill"></span>
+                </div>
                 <span>Starlight</span>
             </div>
             <div class="search-bar">
-                <input type="text" class="video-search-input" placeholder="Search">
-                <button class="search-btn">🔍</button>
+                <input type="text" class="video-search-input" placeholder="Search videos...">
+                <button class="search-btn"><span class="q-icon q-icon-search"></span></button>
             </div>
             <div class="header-actions">
-                <button class="icon-btn icon-btn-circle">📹</button>
-                <button class="icon-btn icon-btn-circle" style="position: relative;">
-                    🔔
+                <button class="icon-btn"><span class="q-icon q-icon-video"></span></button>
+                <button class="icon-btn" style="position: relative;">
+                    <span class="q-icon q-icon-notification"></span>
                     <span class="notification-dot"></span>
                 </button>
-                <button class="icon-btn icon-btn-circle" onclick="toggleTheme()">🌓</button>
-                <div class="avatar avatar-sm">U</div>
+                <button class="icon-btn theme-toggle"><span class="q-icon q-icon-sun sun-icon hidden"></span><span class="q-icon q-icon-moon moon-icon hidden"></span><span class="q-icon q-icon-display auto-icon"></span></button>
+                <div class="user-avatar">U</div>
             </div>
         </header>
         
         <div class="main-content">
             <aside class="sidebar">
                 <div class="nav-section">
-                    <a href="#" class="nav-item active"><span>🏠</span> <span>Home</span></a>
-                    <a href="#" class="nav-item"><span>🔥</span> <span>Shorts</span></a>
-                    <a href="#" class="nav-item"><span>📺</span> <span>Subscriptions</span></a>
+                    <a href="#" class="nav-item active"><span class="q-icon q-icon-home-fill"></span> <span>Home</span></a>
+                    <a href="#" class="nav-item"><span class="q-icon q-icon-grid"></span> <span>Shorts</span></a>
+                    <a href="#" class="nav-item"><span class="q-icon q-icon-users"></span> <span>Subscriptions</span></a>
                 </div>
                 <div class="nav-section">
-                    <div class="nav-section-title">You</div>
-                    <a href="#" class="nav-item"><span>📃</span> <span>History</span></a>
-                    <a href="#" class="nav-item"><span>📁</span> <span>Playlists</span></a>
-                    <a href="#" class="nav-item"><span>👁️</span> <span>Your videos</span></a>
-                    <a href="#" class="nav-item"><span>⏰</span> <span>Watch later</span></a>
-                    <a href="#" class="nav-item"><span>👍</span> <span>Liked videos</span></a>
+                    <div class="nav-title">You</div>
+                    <a href="#" class="nav-item"><span class="q-icon q-icon-clock-fill"></span> <span>History</span></a>
+                    <a href="#" class="nav-item"><span class="q-icon q-icon-content"></span> <span>Playlists</span></a>
+                    <a href="#" class="nav-item"><span class="q-icon q-icon-eye-fill"></span> <span>Your videos</span></a>
+                    <a href="#" class="nav-item"><span class="q-icon q-icon-clock-fill"></span> <span>Watch later</span></a>
+                    <a href="#" class="nav-item"><span class="q-icon q-icon-heart-fill"></span> <span>Liked videos</span></a>
                 </div>
                 <div class="nav-section">
-                    <div class="nav-section-title">Subscriptions</div>
-                    <a href="#" class="nav-item"><span>🎮</span> <span>Gaming Channel</span></a>
-                    <a href="#" class="nav-item"><span>💻</span> <span>Tech Review</span></a>
-                    <a href="#" class="nav-item"><span>🎵</span> <span>Music Studio</span></a>
-                    <a href="#" class="nav-item"><span>🎬</span> <span>Film Makers</span></a>
+                    <div class="nav-title">Subscriptions</div>
+                    <a href="#" class="nav-item"><span class="q-icon q-icon-grid"></span> <span>Gaming Channel</span></a>
+                    <a href="#" class="nav-item"><span class="q-icon q-icon-display"></span> <span>Tech Review</span></a>
+                    <a href="#" class="nav-item"><span class="q-icon q-icon-music"></span> <span>Music Studio</span></a>
+                    <a href="#" class="nav-item"><span class="q-icon q-icon-play-fill"></span> <span>Film Makers</span></a>
                 </div>
             </aside>
             
@@ -405,7 +617,7 @@
                 
                 <section class="featured-section">
                     <div class="featured-header">
-                        <h2>🔥 Trending Now</h2>
+                        <h2><span class="q-icon q-icon-trend-up"></span> Trending Now</h2>
                         <a href="#" class="see-all">See all</a>
                     </div>
                     <div class="video-grid">
@@ -470,7 +682,7 @@
                 
                 <section class="featured-section">
                     <div class="featured-header">
-                        <h2>⚡ Shorts</h2>
+                        <h2><span class="q-icon q-icon-grid"></span> Shorts</h2>
                         <a href="#" class="see-all">See all</a>
                     </div>
                     <div class="shorts-grid">
@@ -479,49 +691,49 @@
                                 <img src="https://images.unsplash.com/photo-1611162617474-5b21e879e113?w=400&h=711&fit=crop" alt="Short">
                                 <span class="short-views">1.2M views</span>
                             </div>
-                            <h3 class="short-title">This trick will change your life! 😱</h3>
+                            <h3 class="short-title">This trick will change your life!</h3>
                         </div>
                         <div class="short-card">
                             <div class="short-thumbnail">
                                 <img src="https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=400&h=711&fit=crop" alt="Short">
                                 <span class="short-views">890K views</span>
                             </div>
-                            <h3 class="short-title">Gaming setup tour 2024 🎮</h3>
+                            <h3 class="short-title">Gaming setup tour 2024</h3>
                         </div>
                         <div class="short-card">
                             <div class="short-thumbnail">
                                 <img src="https://images.unsplash.com/photo-1496181133206-80ce9b88a853?w=400&h=711&fit=crop" alt="Short">
                                 <span class="short-views">2.5M views</span>
                             </div>
-                            <h3 class="short-title">Mac vs PC - The Truth 💻</h3>
+                            <h3 class="short-title">Mac vs PC - The Truth</h3>
                         </div>
                         <div class="short-card">
                             <div class="short-thumbnail">
                                 <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=400&h=711&fit=crop" alt="Short">
                                 <span class="short-views">650K views</span>
                             </div>
-                            <h3 class="short-title">Music production tips 🎵</h3>
+                            <h3 class="short-title">Music production tips</h3>
                         </div>
                         <div class="short-card">
                             <div class="short-thumbnail">
                                 <img src="https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=400&h=711&fit=crop" alt="Short">
                                 <span class="short-views">3.2M views</span>
                             </div>
-                            <h3 class="short-title">AI Robot Does Backflip! 🤖</h3>
+                            <h3 class="short-title">AI Robot Does Backflip!</h3>
                         </div>
                         <div class="short-card">
                             <div class="short-thumbnail">
                                 <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=711&fit=crop" alt="Short">
                                 <span class="short-views">1.8M views</span>
                             </div>
-                            <h3 class="short-title">Epic drone footage 🏔️</h3>
+                            <h3 class="short-title">Epic drone footage</h3>
                         </div>
                     </div>
                 </section>
                 
                 <section>
                     <div class="featured-header">
-                        <h2>📺 Recommended</h2>
+                        <h2><span class="q-icon q-icon-star"></span> Recommended</h2>
                     </div>
                     <div class="video-grid">
                         <div class="video-card">
@@ -573,7 +785,6 @@
     </div>
     
     <script>
-        
         document.querySelectorAll('.category-tab').forEach(tab => {
             tab.addEventListener('click', function() {
                 document.querySelectorAll('.category-tab').forEach(t => t.classList.remove('active'));