Initial commit: Video player with HLS support

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

public/favicon.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <defs>
+    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#00ffff;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#ff00ff;stop-opacity:1" />
+    </linearGradient>
+    <filter id="glow">
+      <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
+      <feMerge>
+        <feMergeNode in="coloredBlur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+  </defs>
+  <rect width="100" height="100" rx="20" fill="url(#grad1)" filter="url(#glow)"/>
+  <polygon points="35,25 35,75 75,50" fill="#ffffff" opacity="0.95"/>
+</svg>

public/og-image.svg

@@ -0,0 +1,45 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630">
+  <defs>
+    <linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#0a0a0f;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#1a1a2f;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient id="logoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#00ffff;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#ff00ff;stop-opacity:1" />
+    </linearGradient>
+    <filter id="glow">
+      <feGaussianBlur stdDeviation="10" result="coloredBlur"/>
+      <feMerge>
+        <feMergeNode in="coloredBlur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+  </defs>
+
+  <!-- Background -->
+  <rect width="1200" height="630" fill="url(#bgGrad)"/>
+
+  <!-- Grid pattern -->
+  <pattern id="grid" x="0" y="0" width="50" height="50" patternUnits="userSpaceOnUse">
+    <path d="M 50 0 L 0 0 0 50" fill="none" stroke="#00ffff" stroke-width="0.5" opacity="0.2"/>
+  </pattern>
+  <rect width="1200" height="630" fill="url(#grid)"/>
+
+  <!-- Glowing orbs -->
+  <circle cx="200" cy="150" r="150" fill="#00ffff" opacity="0.15" filter="url(#glow)"/>
+  <circle cx="1000" cy="450" r="200" fill="#ff00ff" opacity="0.15" filter="url(#glow)"/>
+  <circle cx="600" cy="500" r="100" fill="#00ff88" opacity="0.15" filter="url(#glow)"/>
+
+  <!-- Logo Icon -->
+  <rect x="450" y="150" width="120" height="120" rx="20" fill="url(#logoGrad)" filter="url(#glow)"/>
+  <polygon points="490,190 490,270 550,230" fill="#ffffff" opacity="0.95"/>
+
+  <!-- Text -->
+  <text x="600" y="260" font-family="Arial, sans-serif" font-size="72" font-weight="bold" fill="url(#logoGrad)" filter="url(#glow)">Quantum Player</text>
+  <text x="600" y="320" font-family="Arial, sans-serif" font-size="32" fill="#ffffff" opacity="0.8">Video Player Futurista</text>
+  <text x="600" y="370" font-family="Arial, sans-serif" font-size="24" fill="#00ffff" opacity="0.6">Diseño Cyberpunk • Controles Personalizados • Múltiples Calidades</text>
+
+  <!-- Bottom accent line -->
+  <line x1="300" y1="500" x2="900" y2="500" stroke="url(#logoGrad)" stroke-width="3" filter="url(#glow)"/>
+</svg>