feat: Add playlist selection screen and basic web IPTV player.

web/index.html

@@ -27,7 +27,7 @@
     }
 
     body {
-      background: linear-gradient(135deg, #0A0E1A 0%, #121829 100%);
+      background: linear-gradient(135deg, #0F1014 0%, #181920 100%);
       display: flex;
       justify-content: center;
       align-items: center;
@@ -55,7 +55,7 @@
     .logo {
       font-size: 48px;
       font-weight: 700;
-      background: linear-gradient(135deg, #00BCD4 0%, #26C6DA 50%, #00ACC1 100%);
+      background: linear-gradient(135deg, #007AFF 0%, #00C6FF 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
@@ -67,16 +67,17 @@
       width: 40px;
       height: 40px;
       margin: 0 auto 16px;
-      border: 3px solid rgba(0, 188, 212, 0.2);
-      border-top-color: #00BCD4;
+      border: 3px solid rgba(0, 122, 255, 0.2);
+      border-top-color: #007AFF;
       border-radius: 50%;
       animation: spin 1s linear infinite;
     }
 
     .loading-text {
-      color: #94A3B8;
+      color: rgba(255, 255, 255, 0.7);
       font-size: 14px;
       font-weight: 500;
+      font-family: 'Outfit', sans-serif;
     }
 
     @keyframes spin {

web/player_lite.html

@@ -157,12 +157,22 @@
         // Report on pause and end
         video.addEventListener('pause', () => {
             window.parent.postMessage({
-                type: 'playback_position',
-                currentTime: video.currentTime,
-                duration: isFinite(video.duration) ? video.duration : 0
+                type: 'playback_status',
+                status: 'paused'
             }, '*');
         });
 
+        video.addEventListener('playing', () => {
+            window.parent.postMessage({
+                type: 'playback_status',
+                status: 'playing'
+            }, '*');
+
+            // Also reset reconnect attempts on successful playing
+            reconnectAttempts = 0;
+            hideLoading();
+        });
+
         video.addEventListener('ended', () => {
             window.parent.postMessage({
                 type: 'playback_ended',