Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Stream GURU</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .floating-icon { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .floating-icon:nth-child(2) { | |
| animation-delay: 1s; | |
| } | |
| .floating-icon:nth-child(3) { | |
| animation-delay: 2s; | |
| } | |
| .floating-icon:nth-child(4) { | |
| animation-delay: 3s; | |
| } | |
| .terminal { | |
| background-color: #1e1e1e; | |
| color: #00ff00; | |
| font-family: 'Courier New', monospace; | |
| height: 200px; | |
| overflow-y: auto; | |
| padding: 1rem; | |
| border-radius: 0.5rem; | |
| } | |
| .tab-active { | |
| border-bottom: 3px solid #3b82f6; | |
| color: #3b82f6; | |
| font-weight: 600; | |
| } | |
| .video-preview { | |
| background: linear-gradient(45deg, #1e293b, #0f172a); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .toggle-checkbox:checked { | |
| right: 0; | |
| border-color: #3b82f6; | |
| } | |
| .toggle-checkbox:checked + .toggle-label { | |
| background-color: #3b82f6; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 dark:bg-gray-900 transition-colors duration-300"> | |
| <!-- Home Screen --> | |
| <div id="homeScreen" class="min-h-screen flex flex-col"> | |
| <div class="container mx-auto px-4 py-8 flex-1 flex flex-col"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h1 class="text-3xl font-bold text-gray-800 dark:text-white">Stream GURU</h1> | |
| <div class="relative inline-block w-12 mr-2 align-middle select-none"> | |
| <input type="checkbox" id="toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/> | |
| <label for="toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label> | |
| </div> | |
| </div> | |
| <div class="relative flex-1 flex flex-col items-center justify-center"> | |
| <!-- Floating Icons --> | |
| <i class="fab fa-youtube text-red-600 text-4xl floating-icon absolute top-10 left-10 opacity-20"></i> | |
| <i class="fab fa-facebook text-blue-600 text-4xl floating-icon absolute top-20 right-20 opacity-20"></i> | |
| <i class="fab fa-tiktok text-black dark:text-white text-4xl floating-icon absolute bottom-20 left-20 opacity-20"></i> | |
| <i class="fas fa-broadcast-tower text-purple-600 text-4xl floating-icon absolute bottom-10 right-10 opacity-20"></i> | |
| <div class="text-center max-w-2xl z-10"> | |
| <h2 class="text-4xl font-bold mb-6 text-gray-800 dark:text-white">Powerful Multi-Streaming Tool</h2> | |
| <p class="text-lg text-gray-600 dark:text-gray-300 mb-8"> | |
| Stream to multiple platforms simultaneously with proxy support and FFmpeg-powered backend. | |
| </p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12"> | |
| <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md"> | |
| <i class="fas fa-globe text-blue-500 text-2xl mb-2"></i> | |
| <h3 class="font-semibold text-gray-800 dark:text-white">Multi-Platform</h3> | |
| <p class="text-gray-600 dark:text-gray-300 text-sm">Stream to YouTube, Facebook, TikTok and more</p> | |
| </div> | |
| <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md"> | |
| <i class="fas fa-user-secret text-green-500 text-2xl mb-2"></i> | |
| <h3 class="font-semibold text-gray-800 dark:text-white">Proxy Support</h3> | |
| <p class="text-gray-600 dark:text-gray-300 text-sm">HTTPS & SOCKS5 proxy integration</p> | |
| </div> | |
| <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md"> | |
| <i class="fas fa-video text-purple-500 text-2xl mb-2"></i> | |
| <h3 class="font-semibold text-gray-800 dark:text-white">Flexible Sources</h3> | |
| <p class="text-gray-600 dark:text-gray-300 text-sm">Use pre-recorded videos or live camera</p> | |
| </div> | |
| <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md"> | |
| <i class="fas fa-tachometer-alt text-yellow-500 text-2xl mb-2"></i> | |
| <h3 class="font-semibold text-gray-800 dark:text-white">Optimized</h3> | |
| <p class="text-gray-600 dark:text-gray-300 text-sm">Low bandwidth mode for unstable networks</p> | |
| </div> | |
| </div> | |
| <button onclick="showStreamSetup()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full text-lg transition-all transform hover:scale-105"> | |
| Start Streaming | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-auto text-center py-6"> | |
| <p class="text-gray-500 dark:text-gray-400">Developed by | Trickey Guru</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Streaming Setup Screen --> | |
| <div id="streamSetupScreen" class="min-h-screen hidden bg-gray-100 dark:bg-gray-900"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <button onclick="showHomeScreen()" class="text-blue-600 dark:text-blue-400"> | |
| <i class="fas fa-arrow-left mr-2"></i> Back | |
| </button> | |
| <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Streaming Setup</h2> | |
| <div class="w-12"></div> <!-- Spacer for alignment --> | |
| </div> | |
| <!-- Tab Navigation --> | |
| <div class="flex border-b border-gray-200 dark:border-gray-700 mb-6"> | |
| <button id="tab1" onclick="switchTab(1)" class="px-4 py-2 tab-active">Stream 1</button> | |
| <button id="tab2" onclick="switchTab(2)" class="px-4 py-2">Stream 2</button> | |
| <button id="tab3" onclick="switchTab(3)" class="px-4 py-2">Stream 3</button> | |
| <button onclick="addTab()" class="px-4 py-2 text-blue-600 dark:text-blue-400"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Video Source --> | |
| <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4"> | |
| <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">Video Source</h3> | |
| <div class="video-preview rounded-lg mb-4 h-40"> | |
| <i class="fas fa-video text-gray-400 text-4xl"></i> | |
| </div> | |
| <div class="flex space-x-2 mb-4"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex-1"> | |
| <i class="fas fa-folder-open mr-2"></i> Select Video | |
| </button> | |
| <button class="bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-white px-4 py-2 rounded-lg"> | |
| <i class="fas fa-camera mr-2"></i> Camera | |
| </button> | |
| </div> | |
| <div class="flex justify-between mb-2"> | |
| <button class="bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-white px-4 py-2 rounded-lg"> | |
| <i class="fas fa-play mr-2"></i> Play | |
| </button> | |
| <button class="bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-white px-4 py-2 rounded-lg"> | |
| <i class="fas fa-pause mr-2"></i> Pause | |
| </button> | |
| <button class="bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-white px-4 py-2 rounded-lg"> | |
| <i class="fas fa-volume-up mr-2"></i> Mute | |
| </button> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="loopToggle" class="mr-2"> | |
| <label for="loopToggle" class="text-gray-700 dark:text-gray-300">Loop Video</label> | |
| </div> | |
| </div> | |
| <!-- Stream Settings --> | |
| <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4"> | |
| <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">Stream Settings</h3> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 dark:text-gray-300 mb-1">RTMP URL</label> | |
| <input type="text" placeholder="rtmp://example.com/live" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-800 dark:text-white"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 dark:text-gray-300 mb-1">Stream Key</label> | |
| <input type="text" placeholder="your-stream-key" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-800 dark:text-white"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 dark:text-gray-300 mb-1">Final URL</label> | |
| <div class="bg-gray-100 dark:bg-gray-700 p-2 rounded-lg text-sm text-gray-600 dark:text-gray-300 break-all"> | |
| rtmp://example.com/live/your-stream-key | |
| </div> | |
| </div> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg w-full"> | |
| <i class="fas fa-plus-circle mr-2"></i> Add New Stream | |
| </button> | |
| </div> | |
| <!-- Proxy & Quality --> | |
| <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4"> | |
| <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">Proxy & Quality</h3> | |
| <div class="mb-4"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <label class="text-gray-700 dark:text-gray-300">Enable Proxy</label> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" id="proxyToggle"> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div> | |
| </label> | |
| </div> | |
| <div id="proxyFields" class="hidden space-y-3 mt-3"> | |
| <div> | |
| <label class="block text-gray-700 dark:text-gray-300 mb-1">Proxy Type</label> | |
| <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-800 dark:text-white"> | |
| <option>HTTPS</option> | |
| <option>SOCKS5</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 dark:text-gray-300 mb-1">IP Address</label> | |
| <input type="text" placeholder="192.168.1.1" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-800 dark:text-white"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 dark:text-gray-300 mb-1">Port</label> | |
| <input type="number" placeholder="8080" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-800 dark:text-white"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 dark:text-gray-300 mb-1">Username (optional)</label> | |
| <input type="text" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-800 dark:text-white"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 dark:text-gray-300 mb-1">Password (optional)</label> | |
| <input type="password" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-800 dark:text-white"> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-white px-4 py-2 rounded-lg flex-1"> | |
| <i class="fas fa-plug mr-2"></i> Check Proxy | |
| </button> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex-1"> | |
| <i class="fas fa-save mr-2"></i> Save | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <label class="text-gray-700 dark:text-gray-300">Low Bandwidth Mode</label> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" id="bandwidthToggle"> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div> | |
| </label> | |
| </div> | |
| <p class="text-sm text-gray-500 dark:text-gray-400">Reduces bitrate and uses "ultrafast" preset for unstable networks</p> | |
| </div> | |
| <div class="mt-8"> | |
| <button onclick="startStreaming()" class="bg-green-600 hover:bg-green-700 text-white px-4 py-3 rounded-lg w-full font-bold"> | |
| <i class="fas fa-broadcast-tower mr-2"></i> Start Streaming | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Streaming Screen --> | |
| <div id="streamingScreen" class="min-h-screen hidden bg-gray-100 dark:bg-gray-900"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <button onclick="showStreamSetup()" class="text-blue-600 dark:text-blue-400"> | |
| <i class="fas fa-arrow-left mr-2"></i> Back | |
| </button> | |
| <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Live Streaming</h2> | |
| <div class="w-12"></div> <!-- Spacer for alignment --> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Left Column --> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <!-- Video Preview --> | |
| <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4"> | |
| <div class="video-preview rounded-lg mb-4 h-64"> | |
| <i class="fas fa-broadcast-tower text-red-500 text-5xl animate-pulse"></i> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-red-500 mr-2 animate-pulse"></div> | |
| <span class="font-semibold text-gray-800 dark:text-white">LIVE</span> | |
| <span id="streamTimer" class="ml-4 text-gray-600 dark:text-gray-300">00:00:00</span> | |
| </div> | |
| <button onclick="stopStreaming()" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg"> | |
| <i class="fas fa-stop mr-2"></i> Stop Streaming | |
| </button> | |
| </div> | |
| </div> | |
| <!-- FFmpeg Logs --> | |
| <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4"> | |
| <h3 class="text-lg font-semibold mb-2 text-gray-800 dark:text-white">FFmpeg Logs</h3> | |
| <div class="terminal rounded-lg"> | |
| <div>> Starting FFmpeg process...</div> | |
| <div>> Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'video.mp4':</div> | |
| <div>> Metadata:</div> | |
| <div>> major_brand : isom</div> | |
| <div>> minor_version : 512</div> | |
| <div>> compatible_brands: isomiso2avc1mp41</div> | |
| <div>> Duration: 00:05:30.00, start: 0.000000, bitrate: 1500 kb/s</div> | |
| <div>> Stream #0:0(und): Video: h264 (Main) (avc1 / 0x31637661), yuv420p, 1280x720, 1499 kb/s, 30 fps, 30 tbr, 15360 tbn, 60 tbc (default)</div> | |
| <div>> Stream mapping:</div> | |
| <div>> Stream #0:0 -> #0:0 (h264 (native) -> h264 (libx264))</div> | |
| <div>> Press [q] to stop, [?] for help</div> | |
| <div>> [libx264 @ 0x7f8b4c00b600] using cpu capabilities: MMX2 SSE2Fast SSSE3 SSE4.2 AVX FMA3 BMI2 AVX2</div> | |
| <div>> [libx264 @ 0x7f8b4c00b600] profile High, level 3.1, 4:2:0, 8-bit</div> | |
| <div>> Output #0, flv, to 'rtmp://example.com/live/your-stream-key':</div> | |
| <div>> Metadata:</div> | |
| <div>> encoder : Lavf58.76.100</div> | |
| <div>> Stream #0:0(und): Video: h264 (libx264) ([7][0][0][0] / 0x0007), yuv420p(progressive), 1280x720, q=-1--1, 3000 kb/s, 30 fps, 1k tbn (default)</div> | |
| <div>> Metadata:</div> | |
| <div>> encoder : Lavc58.134.100 libx264</div> | |
| <div>> Side data:</div> | |
| <div>> cpb: bitrate max/min/avg: 6000000/0/3000000 buffer size: 6000000 vbv_delay: -1</div> | |
| <div>> frame= 1 fps=0.0 q=0.0 size= 0kB time=00:00:00.00 bitrate=N/A speed= 0x</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column --> | |
| <div class="space-y-6"> | |
| <!-- Stream Status --> | |
| <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4"> | |
| <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">Stream Status</h3> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-700 dark:text-gray-300">Stream 1</span> | |
| <span class="text-green-500 font-semibold">Active</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-700 dark:text-gray-300">Stream 2</span> | |
| <span class="text-yellow-500 font-semibold">Connecting</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-700 dark:text-gray-300">Stream 3</span> | |
| <span class="text-gray-500 font-semibold">Inactive</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stream Info --> | |
| <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4"> | |
| <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">Stream Information</h3> | |
| <div class="space-y-2"> | |
| <div> | |
| <label class="block text-gray-700 dark:text-gray-300 text-sm">Video Source</label> | |
| <p class="text-gray-800 dark:text-white font-medium">video.mp4</p> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 dark:text-gray-300 text-sm">Resolution</label> | |
| <p class="text-gray-800 dark:text-white font-medium">1280x720</p> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 dark:text-gray-300 text-sm">Bitrate</label> | |
| <p class="text-gray-800 dark:text-white font-medium">3000 kbps</p> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 dark:text-gray-300 text-sm">FPS</label> | |
| <p class="text-gray-800 dark:text-white font-medium">30</p> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 dark:text-gray-300 text-sm">Proxy</label> | |
| <p class="text-gray-800 dark:text-white font-medium">Disabled</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Controls --> | |
| <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4"> | |
| <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">Quick Controls</h3> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <button class="bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-white px-4 py-2 rounded-lg"> | |
| <i class="fas fa-pause mr-2"></i> Pause | |
| </button> | |
| <button class="bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-white px-4 py-2 rounded-lg"> | |
| <i class="fas fa-volume-up mr-2"></i> Mute | |
| </button> | |
| <button class="bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-white px-4 py-2 rounded-lg"> | |
| <i class="fas fa-sync-alt mr-2"></i> Restart | |
| </button> | |
| <button class="bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-white px-4 py-2 rounded-lg"> | |
| <i class="fas fa-cog mr-2"></i> Settings | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Dark mode toggle | |
| const toggle = document.getElementById('toggle'); | |
| const html = document.querySelector('html'); | |
| toggle.addEventListener('change', function() { | |
| if (this.checked) { | |
| html.classList.add('dark'); | |
| } else { | |
| html.classList.remove('dark'); | |
| } | |
| }); | |
| // Screen navigation | |
| function showHomeScreen() { | |
| document.getElementById('homeScreen').classList.remove('hidden'); | |
| document.getElementById('streamSetupScreen').classList.add('hidden'); | |
| document.getElementById('streamingScreen').classList.add('hidden'); | |
| } | |
| function showStreamSetup() { | |
| document.getElementById('homeScreen').classList.add('hidden'); | |
| document.getElementById('streamSetupScreen').classList.remove('hidden'); | |
| document.getElementById('streamingScreen').classList.add('hidden'); | |
| } | |
| function startStreaming() { | |
| document.getElementById('homeScreen').classList.add('hidden'); | |
| document.getElementById('streamSetupScreen').classList.add('hidden'); | |
| document.getElementById('streamingScreen').classList.remove('hidden'); | |
| // Start timer | |
| let seconds = 0; | |
| const timer = setInterval(function() { | |
| seconds++; | |
| const hours = Math.floor(seconds / 3600); | |
| const minutes = Math.floor((seconds % 3600) / 60); | |
| const secs = seconds % 60; | |
| document.getElementById('streamTimer').textContent = | |
| `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`; | |
| }, 1000); | |
| // Store timer interval so we can clear it later | |
| document.getElementById('streamingScreen').setAttribute('data-timer', timer); | |
| } | |
| function stopStreaming() { | |
| // Clear timer | |
| const timer = document.getElementById('streamingScreen').getAttribute('data-timer'); | |
| clearInterval(parseInt(timer)); | |
| showStreamSetup(); | |
| } | |
| // Proxy toggle | |
| const proxyToggle = document.getElementById('proxyToggle'); | |
| const proxyFields = document.getElementById('proxyFields'); | |
| proxyToggle.addEventListener('change', function() { | |
| if (this.checked) { | |
| proxyFields.classList.remove('hidden'); | |
| } else { | |
| proxyFields.classList.add('hidden'); | |
| } | |
| }); | |
| // Tab functionality | |
| let currentTab = 1; | |
| const totalTabs = 3; | |
| function switchTab(tabNumber) { | |
| currentTab = tabNumber; | |
| // Update tab styling | |
| for (let i = 1; i <= totalTabs; i++) { | |
| const tab = document.getElementById(`tab${i}`); | |
| if (i === tabNumber) { | |
| tab.classList.add('tab-active'); | |
| } else { | |
| tab.classList.remove('tab-active'); | |
| } | |
| } | |
| // In a real app, you would load the settings for this tab | |
| } | |
| function addTab() { | |
| if (totalTabs < 5) { | |
| // In a real app, you would add a new tab | |
| alert('New tab would be added in the full app'); | |
| } else { | |
| alert('Maximum number of streams reached'); | |
| } | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Altafo/live-stream" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |