Spaces:

Altafo
/

stream-guru

Running

App Files Files Community

Altafo commited on Apr 6, 2025

Commit

ca25268

verified ·

1 Parent(s): ee24e9c

Add 2 files

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +901 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Stream Guru
-emoji: 🌍
 colorFrom: red
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: stream-guru
+emoji: 🐳
 colorFrom: red
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,901 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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) rotate(0deg); }
+            50% { transform: translateY(-20px) rotate(5deg); }
+            100% { transform: translateY(0px) rotate(0deg); }
+        }
+        @keyframes pulse {
+            0% { transform: scale(1); opacity: 0.7; }
+            50% { transform: scale(1.1); opacity: 1; }
+            100% { transform: scale(1); opacity: 0.7; }
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .floating-icon {
+            animation: float 6s ease-in-out infinite;
+        }
+        .pulse-icon {
+            animation: pulse 2s ease-in-out infinite;
+        }
+        .spin-icon {
+            animation: spin 4s linear infinite;
+        }
+        .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;
+        }
+        .stream-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+        .permission-modal {
+            background-color: rgba(0,0,0,0.8);
+            z-index: 100;
+        }
+        #videoElement {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        .connection-status {
+            position: relative;
+            padding-left: 1.5rem;
+        }
+        .connection-status::before {
+            content: "";
+            position: absolute;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 0.75rem;
+            height: 0.75rem;
+            border-radius: 50%;
+            background-color: #6b7280;
+        }
+        .connection-status.connected::before {
+            background-color: #10b981;
+            animation: pulse 1.5s infinite;
+        }
+        .connection-status.connecting::before {
+            background-color: #f59e0b;
+            animation: pulse 1s infinite;
+        }
+        .connection-status.error::before {
+            background-color: #ef4444;
+        }
+    </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 flex items-center">
+                    <i class="fas fa-satellite-dish text-blue-500 mr-3"></i> Stream GURU
+                </h1>
+                <div class="flex items-center">
+                    <span class="mr-2 text-gray-600 dark:text-gray-300 text-sm">Dark Mode</span>
+                    <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>
+            <div class="relative flex-1 flex flex-col items-center justify-center overflow-hidden">
+                <!-- 20 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>
+                <i class="fab fa-twitch text-purple-500 text-3xl floating-icon absolute top-1/4 left-1/4 opacity-15 spin-icon"></i>
+                <i class="fab fa-instagram text-pink-500 text-3xl floating-icon absolute top-1/3 right-1/4 opacity-15"></i>
+                <i class="fab fa-twitter text-blue-400 text-3xl floating-icon absolute bottom-1/4 left-1/3 opacity-15 pulse-icon"></i>
+                <i class="fas fa-video text-green-500 text-3xl floating-icon absolute top-1/2 right-1/3 opacity-15"></i>
+                <i class="fas fa-film text-yellow-500 text-3xl floating-icon absolute bottom-1/3 left-1/2 opacity-15"></i>
+                <i class="fas fa-satellite text-indigo-500 text-3xl floating-icon absolute top-1/4 right-1/2 opacity-15 spin-icon"></i>
+                <i class="fas fa-wifi text-blue-300 text-3xl floating-icon absolute bottom-1/2 left-1/4 opacity-15"></i>
+                <i class="fas fa-cloud text-gray-400 text-3xl floating-icon absolute top-3/4 right-1/5 opacity-15"></i>
+                <i class="fas fa-microphone text-red-400 text-3xl floating-icon absolute bottom-1/5 left-3/4 opacity-15 pulse-icon"></i>
+                <i class="fas fa-headphones text-purple-300 text-3xl floating-icon absolute top-1/5 right-3/4 opacity-15"></i>
+                <i class="fas fa-music text-pink-300 text-3xl floating-icon absolute bottom-3/4 left-1/5 opacity-15"></i>
+                <i class="fas fa-compact-disc text-indigo-300 text-3xl floating-icon absolute top-2/3 right-2/3 opacity-15 spin-icon"></i>
+                <i class="fas fa-play-circle text-red-300 text-3xl floating-icon absolute bottom-2/3 left-2/3 opacity-15 pulse-icon"></i>
+                <i class="fas fa-stop-circle text-yellow-300 text-3xl floating-icon absolute top-3/4 left-3/4 opacity-15"></i>
+                <i class="fas fa-podcast text-green-300 text-3xl floating-icon absolute bottom-3/4 right-3/4 opacity-15"></i>
+                <i class="fas fa-rss text-orange-300 text-3xl floating-icon absolute top-1/2 left-1/2 opacity-15 spin-icon"></i>
+                <div class="text-center max-w-2xl z-10">
+                    <h2 class="text-4xl font-bold mb-6 text-gray-800 dark:text-white">Ultimate Multi-Streaming Platform</h2>
+                    <p class="text-lg text-gray-600 dark:text-gray-300 mb-8">
+                        Broadcast to multiple platforms simultaneously with advanced proxy support and real-time monitoring.
+                    </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 hover:shadow-lg transition-shadow">
+                            <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 10+ platforms including YouTube, Twitch, Facebook</p>
+                        </div>
+                        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow">
+                            <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 with automatic rotation</p>
+                        </div>
+                        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow">
+                            <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">Camera, screen capture, or pre-recorded videos</p>
+                        </div>
+                        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow">
+                            <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">Adaptive bitrate for perfect streaming quality</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 shadow-lg">
+                        <i class="fas fa-rocket mr-2"></i> 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 | v2.0</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 flex items-center">
+                    <i class="fas fa-arrow-left mr-2"></i> Back
+                </button>
+                <h2 class="text-2xl font-bold text-gray-800 dark:text-white flex items-center">
+                    <i class="fas fa-sliders-h mr-2 text-blue-500"></i> Streaming Setup
+                </h2>
+                <div class="w-12"></div>
+            </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">
+                        <i class="fas fa-video mr-2 text-blue-500"></i> Video Source
+                    </h3>
+                    <div class="video-preview rounded-lg mb-4 h-40 relative" id="videoPreviewContainer">
+                        <i class="fas fa-video text-gray-400 text-4xl" id="videoPlaceholderIcon"></i>
+                        <video id="videoElement" class="hidden" autoplay playsinline></video>
+                    </div>
+                    <div class="flex space-x-2 mb-4">
+                        <button onclick="requestCameraPermission()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex-1">
+                            <i class="fas fa-camera mr-2"></i> Use Camera
+                        </button>
+                        <button onclick="requestGalleryPermission()" 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-folder-open mr-2"></i> Select Video
+                        </button>
+                    </div>
+                    <div class="flex justify-between mb-2">
+                        <button id="playBtn" 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" disabled>
+                            <i class="fas fa-play mr-2"></i> Play
+                        </button>
+                        <button id="pauseBtn" 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" disabled>
+                            <i class="fas fa-pause mr-2"></i> Pause
+                        </button>
+                        <button id="muteBtn" 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" disabled>
+                            <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">
+                        <i class="fas fa-stream mr-2 text-blue-500"></i> Stream Settings
+                    </h3>
+                    <div class="mb-4">
+                        <label class="block text-gray-700 dark:text-gray-300 mb-1">Platform</label>
+                        <select id="platformSelect" 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 value="">Select Platform</option>
+                            <option value="youtube">YouTube</option>
+                            <option value="facebook">Facebook</option>
+                            <option value="twitch">Twitch</option>
+                            <option value="tiktok">TikTok</option>
+                            <option value="custom">Custom RTMP</option>
+                        </select>
+                    </div>
+                    <div id="youtubeFields" class="hidden space-y-3">
+                        <div>
+                            <label class="block text-gray-700 dark:text-gray-300 mb-1">YouTube Server</label>
+                            <select id="youtubeServer" 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 value="primary">Primary (rtmp://a.rtmp.youtube.com/live2)</option>
+                                <option value="backup">Backup (rtmp://b.rtmp.youtube.com/live2)</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label class="block text-gray-700 dark:text-gray-300 mb-1">Stream Key</label>
+                            <input type="text" id="youtubeKey" placeholder="Enter YouTube 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>
+                        <button onclick="testYouTubeConnection()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg w-full">
+                            <i class="fas fa-plug mr-2"></i> Test Connection
+                        </button>
+                        <div id="youtubeStatus" class="connection-status text-sm">
+                            Not connected
+                        </div>
+                    </div>
+                    <div id="customFields" class="hidden space-y-3">
+                        <div>
+                            <label class="block text-gray-700 dark:text-gray-300 mb-1">RTMP URL</label>
+                            <input type="text" id="customUrl" 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>
+                            <label class="block text-gray-700 dark:text-gray-300 mb-1">Stream Key</label>
+                            <input type="text" id="customKey" 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>
+                    <div class="mb-4 mt-4">
+                        <label class="block text-gray-700 dark:text-gray-300 mb-1">Final URL</label>
+                        <div id="finalUrl" class="bg-gray-100 dark:bg-gray-700 p-2 rounded-lg text-sm text-gray-600 dark:text-gray-300 break-all">
+                            No stream URL configured
+                        </div>
+                    </div>
+                    <button id="addStreamBtn" 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">
+                        <i class="fas fa-user-shield mr-2 text-blue-500"></i> 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 id="startStreamBtn" onclick="startStreaming()" class="bg-green-600 hover:bg-green-700 text-white px-4 py-3 rounded-lg w-full font-bold stream-btn" disabled>
+                            <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 flex items-center">
+                    <i class="fas fa-arrow-left mr-2"></i> Back
+                </button>
+                <h2 class="text-2xl font-bold text-gray-800 dark:text-white flex items-center">
+                    <i class="fas fa-broadcast-tower text-red-500 mr-2 animate-pulse"></i> Live Streaming
+                </h2>
+                <div class="w-12"></div>
+            </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 relative">
+                            <video id="liveVideoElement" autoplay playsinline class="w-full h-full"></video>
+                            <div class="absolute bottom-4 left-4 bg-red-600 text-white px-2 py-1 rounded-md flex items-center">
+                                <div class="w-2 h-2 rounded-full bg-white mr-2 animate-pulse"></div>
+                                <span>LIVE</span>
+                                <span id="streamTimer" class="ml-4">00:00:00</span>
+                            </div>
+                        </div>
+                        <div class="flex justify-between items-center">
+                            <div class="flex items-center">
+                                <div class="w-3 h-3 rounded-full bg-green-500 mr-2 animate-pulse"></div>
+                                <span class="font-semibold text-gray-800 dark:text-white">Streaming Active</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">
+                            <i class="fas fa-terminal mr-2 text-blue-500"></i> FFmpeg Logs
+                        </h3>
+                        <div class="terminal rounded-lg">
+                            <div>> Starting FFmpeg process...</div>
+                            <div>> Connecting to YouTube servers...</div>
+                            <div id="youtubeLogLine">>> YouTube: Establishing connection to rtmp://a.rtmp.youtube.com/live2...</div>
+                            <div id="youtubeStatusLine">>> YouTube: Connection established! Streaming active.</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://a.rtmp.youtube.com/live2/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">
+                            <i class="fas fa-chart-bar mr-2 text-blue-500"></i> Stream Status
+                        </h3>
+                        <div class="space-y-3">
+                            <div class="flex justify-between">
+                                <span class="text-gray-700 dark:text-gray-300">YouTube</span>
+                                <span class="text-green-500 font-semibold connection-status connected">Active</span>
+                            </div>
+                            <div class="flex justify-between">
+                                <span class="text-gray-700 dark:text-gray-300">Facebook</span>
+                                <span class="text-yellow-500 font-semibold connection-status connecting">Connecting</span>
+                            </div>
+                            <div class="flex justify-between">
+                                <span class="text-gray-700 dark:text-gray-300">Twitch</span>
+                                <span class="text-gray-500 font-semibold connection-status">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">
+                            <i class="fas fa-info-circle mr-2 text-blue-500"></i> 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">Live Camera</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">
+                            <i class="fas fa-sliders-h mr-2 text-blue-500"></i> 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>
+    <!-- Permission Modal -->
+    <div id="permissionModal" class="fixed inset-0 flex items-center justify-center hidden permission-modal">
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 max-w-md w-full mx-4">
+            <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Permission Required</h3>
+            <p class="text-gray-600 dark:text-gray-300 mb-6">Stream GURU needs access to your camera to start live streaming. Please allow camera access when prompted.</p>
+            <div class="flex justify-end space-x-3">
+                <button onclick="hidePermissionModal()" class="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 text-gray-800 dark:text-white">Cancel</button>
+                <button onclick="requestCameraAccess()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg">Allow Access</button>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Dark mode toggle
+        const toggle = document.getElementById('toggle');
+        const html = document.querySelector('html');
+        // Check for saved user preference or use system preference
+        if (localStorage.getItem('darkMode') === 'true' ||
+            (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            html.classList.add('dark');
+            toggle.checked = true;
+        }
+        toggle.addEventListener('change', function() {
+            if (this.checked) {
+                html.classList.add('dark');
+                localStorage.setItem('darkMode', 'true');
+            } else {
+                html.classList.remove('dark');
+                localStorage.setItem('darkMode', 'false');
+            }
+        });
+        // Screen navigation
+        function showHomeScreen() {
+            document.getElementById('homeScreen').classList.remove('hidden');
+            document.getElementById('streamSetupScreen').classList.add('hidden');
+            document.getElementById('streamingScreen').classList.add('hidden');
+            stopAllStreams();
+        }
+        function showStreamSetup() {
+            document.getElementById('homeScreen').classList.add('hidden');
+            document.getElementById('streamSetupScreen').classList.remove('hidden');
+            document.getElementById('streamingScreen').classList.add('hidden');
+            stopAllStreams();
+        }
+        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);
+            // Start the live video feed
+            const videoElement = document.getElementById('liveVideoElement');
+            if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+                navigator.mediaDevices.getUserMedia({ video: true, audio: true })
+                    .then(function(stream) {
+                        videoElement.srcObject = stream;
+                    })
+                    .catch(function(error) {
+                        console.error("Error accessing media devices:", error);
+                    });
+            }
+        }
+        function stopStreaming() {
+            // Clear timer
+            const timer = document.getElementById('streamingScreen').getAttribute('data-timer');
+            clearInterval(parseInt(timer));
+            // Stop all media streams
+            stopAllStreams();
+            showStreamSetup();
+        }
+        function stopAllStreams() {
+            // Stop camera streams
+            const videoElements = document.querySelectorAll('video');
+            videoElements.forEach(video => {
+                if (video.srcObject) {
+                    video.srcObject.getTracks().forEach(track => track.stop());
+                    video.srcObject = null;
+                }
+            });
+            // Hide live video and show placeholder
+            const videoPreview = document.getElementById('videoPreviewContainer');
+            const videoElement = document.getElementById('videoElement');
+            const placeholderIcon = document.getElementById('videoPlaceholderIcon');
+            if (videoElement && placeholderIcon) {
+                videoElement.classList.add('hidden');
+                placeholderIcon.classList.remove('hidden');
+            }
+            // Reset YouTube connection status
+            const youtubeStatus = document.getElementById('youtubeStatus');
+            if (youtubeStatus) {
+                youtubeStatus.textContent = "Not connected";
+                youtubeStatus.className = "connection-status text-sm";
+            }
+        }
+        // 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');
+            }
+        }
+        // Platform selection
+        const platformSelect = document.getElementById('platformSelect');
+        const youtubeFields = document.getElementById('youtubeFields');
+        const customFields = document.getElementById('customFields');
+        const startStreamBtn = document.getElementById('startStreamBtn');
+        platformSelect.addEventListener('change', function() {
+            youtubeFields.classList.add('hidden');
+            customFields.classList.add('hidden');
+            if (this.value === 'youtube') {
+                youtubeFields.classList.remove('hidden');
+            } else if (this.value === 'custom') {
+                customFields.classList.remove('hidden');
+            }
+            updateFinalUrl();
+            validateStreamSettings();
+        });
+        // Update final URL when inputs change
+        document.getElementById('youtubeKey').addEventListener('input', function() {
+            updateFinalUrl();
+            validateStreamSettings();
+        });
+        document.getElementById('customUrl').addEventListener('input', function() {
+            updateFinalUrl();
+            validateStreamSettings();
+        });
+        document.getElementById('customKey').addEventListener('input', function() {
+            updateFinalUrl();
+            validateStreamSettings();
+        });
+        function updateFinalUrl() {
+            const finalUrl = document.getElementById('finalUrl');
+            const platform = platformSelect.value;
+            if (platform === 'youtube') {
+                const server = document.getElementById('youtubeServer').value;
+                const key = document.getElementById('youtubeKey').value;
+                const serverUrl = server === 'primary' ? 'rtmp://a.rtmp.youtube.com/live2' : 'rtmp://b.rtmp.youtube.com/live2';
+                if (key) {
+                    finalUrl.textContent = `${serverUrl}/${key}`;
+                } else {
+                    finalUrl.textContent = `${serverUrl}/[your-stream-key]`;
+                }
+            } else if (platform === 'custom') {
+                const url = document.getElementById('customUrl').value;
+                const key = document.getElementById('customKey').value;
+                if (url && key) {
+                    finalUrl.textContent = `${url}/${key}`;
+                } else if (url) {
+                    finalUrl.textContent = `${url}/[your-stream-key]`;
+                } else {
+                    finalUrl.textContent = "No stream URL configured";
+                }
+            } else {
+                finalUrl.textContent = "Select a platform to configure";
+            }
+        }
+        function validateStreamSettings() {
+            const platform = platformSelect.value;
+            let isValid = false;
+            if (platform === 'youtube') {
+                isValid = document.getElementById('youtubeKey').value.trim() !== '';
+            } else if (platform === 'custom') {
+                isValid = document.getElementById('customUrl').value.trim() !== '' &&
+                          document.getElementById('customKey').value.trim() !== '';
+            }
+            // Also check if we have video source
+            const videoElement = document.getElementById('videoElement');
+            const hasVideoSource = videoElement.src || (videoElement.srcObject && videoElement.srcObject.active);
+            startStreamBtn.disabled = !(isValid && hasVideoSource);
+        }
+        // Test YouTube connection
+        function testYouTubeConnection() {
+            const youtubeStatus = document.getElementById('youtubeStatus');
+            const youtubeKey = document.getElementById('youtubeKey').value.trim();
+            if (!youtubeKey) {
+                youtubeStatus.textContent = "Please enter a stream key";
+                youtubeStatus.className = "connection-status error text-sm";
+                return;
+            }
+            youtubeStatus.textContent = "Connecting to YouTube...";
+            youtubeStatus.className = "connection-status connecting text-sm";
+            // Simulate connection test (in a real app, this would be an actual connection test)
+            setTimeout(() => {
+                // Randomly decide if connection succeeds (80% chance) for demo purposes
+                if (Math.random() > 0.2) {
+                    youtubeStatus.textContent = "Connected to YouTube successfully!";
+                    youtubeStatus.className = "connection-status connected text-sm";
+                } else {
+                    youtubeStatus.textContent = "Connection failed. Check your stream key.";
+                    youtubeStatus.className = "connection-status error text-sm";
+                }
+            }, 2000);
+        }
+        // Camera and gallery permissions
+        function requestCameraPermission() {
+            showPermissionModal();
+        }
+        function requestGalleryPermission() {
+            alert("In a real app, this would request access to your gallery/files");
+            // For demo purposes, we'll just simulate selecting a video
+            const videoElement = document.getElementById('videoElement');
+            const placeholderIcon = document.getElementById('videoPlaceholderIcon');
+            // Create a fake video source for demo
+            videoElement.src = "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4";
+            videoElement.classList.remove('hidden');
+            placeholderIcon.classList.add('hidden');
+            // Enable video controls
+            document.getElementById('playBtn').disabled = false;
+            document.getElementById('pauseBtn').disabled = false;
+            document.getElementById('muteBtn').disabled = false;
+            validateStreamSettings();
+        }
+        function showPermissionModal() {
+            document.getElementById('permissionModal').classList.remove('hidden');
+        }
+        function hidePermissionModal() {
+            document.getElementById('permissionModal').classList.add('hidden');
+        }
+        function requestCameraAccess() {
+            hidePermissionModal();
+            const videoElement = document.getElementById('videoElement');
+            const placeholderIcon = document.getElementById('videoPlaceholderIcon');
+            if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+                navigator.mediaDevices.getUserMedia({ video: true, audio: true })
+                    .then(function(stream) {
+                        videoElement.srcObject = stream;
+                        videoElement.classList.remove('hidden');
+                        placeholderIcon.classList.add('hidden');
+                        // Enable video controls
+                        document.getElementById('playBtn').disabled = false;
+                        document.getElementById('pauseBtn').disabled = false;
+                        document.getElementById('muteBtn').disabled = false;
+                        validateStreamSettings();
+                    })
+                    .catch(function(error) {
+                        console.error("Error accessing media devices:", error);
+                        alert("Could not access camera. Please check permissions.");
+                    });
+            } else {
+                alert("Camera access is not supported in your browser.");
+            }
+        }
+        // Video controls
+        document.getElementById('playBtn').addEventListener('click', function() {
+            const videoElement = document.getElementById('videoElement');
+            if (videoElement.src || videoElement.srcObject) {
+                videoElement.play();
+            }
+        });
+        document.getElementById('pauseBtn').addEventListener('click', function() {
+            const videoElement = document.getElementById('videoElement');
+            if (videoElement.src || videoElement.srcObject) {
+                videoElement.pause();
+            }
+        });
+        document.getElementById('muteBtn').addEventListener('click', function() {
+            const videoElement = document.getElementById('videoElement');
+            const muteBtn = document.getElementById('muteBtn');
+            if (videoElement.src || videoElement.srcObject) {
+                videoElement.muted = !videoElement.muted;
+                muteBtn.innerHTML = videoElement.muted ?
+                    '<i class="fas fa-volume-mute mr-2"></i> Unmute' :
+                    '<i class="fas fa-volume-up mr-2"></i> Mute';
+            }
+        });
+        // Initialize
+        updateFinalUrl();
+    </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/stream-guru" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>