Hugging Face's logo

Spaces:
Altafo
/
live-stream
Running

App Files Community
Altafo commited on
Commit
91559a8
·
verified ·
1 Parent(s): 734a662

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +507 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Live Stream
3
- emoji: 📚
4
- colorFrom: red
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: live-stream
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,507 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Stream GURU</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @keyframes float {
11
+ 0% { transform: translateY(0px); }
12
+ 50% { transform: translateY(-20px); }
13
+ 100% { transform: translateY(0px); }
14
+ }
15
+ .floating-icon {
16
+ animation: float 6s ease-in-out infinite;
17
+ }
18
+ .floating-icon:nth-child(2) {
19
+ animation-delay: 1s;
20
+ }
21
+ .floating-icon:nth-child(3) {
22
+ animation-delay: 2s;
23
+ }
24
+ .floating-icon:nth-child(4) {
25
+ animation-delay: 3s;
26
+ }
27
+ .terminal {
28
+ background-color: #1e1e1e;
29
+ color: #00ff00;
30
+ font-family: 'Courier New', monospace;
31
+ height: 200px;
32
+ overflow-y: auto;
33
+ padding: 1rem;
34
+ border-radius: 0.5rem;
35
+ }
36
+ .tab-active {
37
+ border-bottom: 3px solid #3b82f6;
38
+ color: #3b82f6;
39
+ font-weight: 600;
40
+ }
41
+ .video-preview {
42
+ background: linear-gradient(45deg, #1e293b, #0f172a);
43
+ display: flex;
44
+ align-items: center;
45
+ justify-content: center;
46
+ }
47
+ .toggle-checkbox:checked {
48
+ right: 0;
49
+ border-color: #3b82f6;
50
+ }
51
+ .toggle-checkbox:checked + .toggle-label {
52
+ background-color: #3b82f6;
53
+ }
54
+ </style>
55
+ </head>
56
+ <body class="bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
57
+ <!-- Home Screen -->
58
+ <div id="homeScreen" class="min-h-screen flex flex-col">
59
+ <div class="container mx-auto px-4 py-8 flex-1 flex flex-col">
60
+ <div class="flex justify-between items-center mb-8">
61
+ <h1 class="text-3xl font-bold text-gray-800 dark:text-white">Stream GURU</h1>
62
+ <div class="relative inline-block w-12 mr-2 align-middle select-none">
63
+ <input type="checkbox" id="toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
64
+ <label for="toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
65
+ </div>
66
+ </div>
67
+
68
+ <div class="relative flex-1 flex flex-col items-center justify-center">
69
+ <!-- Floating Icons -->
70
+ <i class="fab fa-youtube text-red-600 text-4xl floating-icon absolute top-10 left-10 opacity-20"></i>
71
+ <i class="fab fa-facebook text-blue-600 text-4xl floating-icon absolute top-20 right-20 opacity-20"></i>
72
+ <i class="fab fa-tiktok text-black dark:text-white text-4xl floating-icon absolute bottom-20 left-20 opacity-20"></i>
73
+ <i class="fas fa-broadcast-tower text-purple-600 text-4xl floating-icon absolute bottom-10 right-10 opacity-20"></i>
74
+
75
+ <div class="text-center max-w-2xl z-10">
76
+ <h2 class="text-4xl font-bold mb-6 text-gray-800 dark:text-white">Powerful Multi-Streaming Tool</h2>
77
+ <p class="text-lg text-gray-600 dark:text-gray-300 mb-8">
78
+ Stream to multiple platforms simultaneously with proxy support and FFmpeg-powered backend.
79
+ </p>
80
+
81
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
82
+ <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
83
+ <i class="fas fa-globe text-blue-500 text-2xl mb-2"></i>
84
+ <h3 class="font-semibold text-gray-800 dark:text-white">Multi-Platform</h3>
85
+ <p class="text-gray-600 dark:text-gray-300 text-sm">Stream to YouTube, Facebook, TikTok and more</p>
86
+ </div>
87
+ <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
88
+ <i class="fas fa-user-secret text-green-500 text-2xl mb-2"></i>
89
+ <h3 class="font-semibold text-gray-800 dark:text-white">Proxy Support</h3>
90
+ <p class="text-gray-600 dark:text-gray-300 text-sm">HTTPS & SOCKS5 proxy integration</p>
91
+ </div>
92
+ <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
93
+ <i class="fas fa-video text-purple-500 text-2xl mb-2"></i>
94
+ <h3 class="font-semibold text-gray-800 dark:text-white">Flexible Sources</h3>
95
+ <p class="text-gray-600 dark:text-gray-300 text-sm">Use pre-recorded videos or live camera</p>
96
+ </div>
97
+ <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
98
+ <i class="fas fa-tachometer-alt text-yellow-500 text-2xl mb-2"></i>
99
+ <h3 class="font-semibold text-gray-800 dark:text-white">Optimized</h3>
100
+ <p class="text-gray-600 dark:text-gray-300 text-sm">Low bandwidth mode for unstable networks</p>
101
+ </div>
102
+ </div>
103
+
104
+ <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">
105
+ Start Streaming
106
+ </button>
107
+ </div>
108
+ </div>
109
+
110
+ <div class="mt-auto text-center py-6">
111
+ <p class="text-gray-500 dark:text-gray-400">Developed by | Trickey Guru</p>
112
+ </div>
113
+ </div>
114
+ </div>
115
+
116
+ <!-- Streaming Setup Screen -->
117
+ <div id="streamSetupScreen" class="min-h-screen hidden bg-gray-100 dark:bg-gray-900">
118
+ <div class="container mx-auto px-4 py-6">
119
+ <div class="flex justify-between items-center mb-6">
120
+ <button onclick="showHomeScreen()" class="text-blue-600 dark:text-blue-400">
121
+ <i class="fas fa-arrow-left mr-2"></i> Back
122
+ </button>
123
+ <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Streaming Setup</h2>
124
+ <div class="w-12"></div> <!-- Spacer for alignment -->
125
+ </div>
126
+
127
+ <!-- Tab Navigation -->
128
+ <div class="flex border-b border-gray-200 dark:border-gray-700 mb-6">
129
+ <button id="tab1" onclick="switchTab(1)" class="px-4 py-2 tab-active">Stream 1</button>
130
+ <button id="tab2" onclick="switchTab(2)" class="px-4 py-2">Stream 2</button>
131
+ <button id="tab3" onclick="switchTab(3)" class="px-4 py-2">Stream 3</button>
132
+ <button onclick="addTab()" class="px-4 py-2 text-blue-600 dark:text-blue-400">
133
+ <i class="fas fa-plus"></i>
134
+ </button>
135
+ </div>
136
+
137
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
138
+ <!-- Video Source -->
139
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
140
+ <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">Video Source</h3>
141
+
142
+ <div class="video-preview rounded-lg mb-4 h-40">
143
+ <i class="fas fa-video text-gray-400 text-4xl"></i>
144
+ </div>
145
+
146
+ <div class="flex space-x-2 mb-4">
147
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex-1">
148
+ <i class="fas fa-folder-open mr-2"></i> Select Video
149
+ </button>
150
+ <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">
151
+ <i class="fas fa-camera mr-2"></i> Camera
152
+ </button>
153
+ </div>
154
+
155
+ <div class="flex justify-between mb-2">
156
+ <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">
157
+ <i class="fas fa-play mr-2"></i> Play
158
+ </button>
159
+ <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">
160
+ <i class="fas fa-pause mr-2"></i> Pause
161
+ </button>
162
+ <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">
163
+ <i class="fas fa-volume-up mr-2"></i> Mute
164
+ </button>
165
+ </div>
166
+
167
+ <div class="flex items-center">
168
+ <input type="checkbox" id="loopToggle" class="mr-2">
169
+ <label for="loopToggle" class="text-gray-700 dark:text-gray-300">Loop Video</label>
170
+ </div>
171
+ </div>
172
+
173
+ <!-- Stream Settings -->
174
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
175
+ <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">Stream Settings</h3>
176
+
177
+ <div class="mb-4">
178
+ <label class="block text-gray-700 dark:text-gray-300 mb-1">RTMP URL</label>
179
+ <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">
180
+ </div>
181
+
182
+ <div class="mb-4">
183
+ <label class="block text-gray-700 dark:text-gray-300 mb-1">Stream Key</label>
184
+ <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">
185
+ </div>
186
+
187
+ <div class="mb-4">
188
+ <label class="block text-gray-700 dark:text-gray-300 mb-1">Final URL</label>
189
+ <div class="bg-gray-100 dark:bg-gray-700 p-2 rounded-lg text-sm text-gray-600 dark:text-gray-300 break-all">
190
+ rtmp://example.com/live/your-stream-key
191
+ </div>
192
+ </div>
193
+
194
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg w-full">
195
+ <i class="fas fa-plus-circle mr-2"></i> Add New Stream
196
+ </button>
197
+ </div>
198
+
199
+ <!-- Proxy & Quality -->
200
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
201
+ <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">Proxy & Quality</h3>
202
+
203
+ <div class="mb-4">
204
+ <div class="flex items-center justify-between mb-2">
205
+ <label class="text-gray-700 dark:text-gray-300">Enable Proxy</label>
206
+ <label class="relative inline-flex items-center cursor-pointer">
207
+ <input type="checkbox" class="sr-only peer" id="proxyToggle">
208
+ <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>
209
+ </label>
210
+ </div>
211
+
212
+ <div id="proxyFields" class="hidden space-y-3 mt-3">
213
+ <div>
214
+ <label class="block text-gray-700 dark:text-gray-300 mb-1">Proxy Type</label>
215
+ <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">
216
+ <option>HTTPS</option>
217
+ <option>SOCKS5</option>
218
+ </select>
219
+ </div>
220
+
221
+ <div>
222
+ <label class="block text-gray-700 dark:text-gray-300 mb-1">IP Address</label>
223
+ <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">
224
+ </div>
225
+
226
+ <div>
227
+ <label class="block text-gray-700 dark:text-gray-300 mb-1">Port</label>
228
+ <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">
229
+ </div>
230
+
231
+ <div>
232
+ <label class="block text-gray-700 dark:text-gray-300 mb-1">Username (optional)</label>
233
+ <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">
234
+ </div>
235
+
236
+ <div>
237
+ <label class="block text-gray-700 dark:text-gray-300 mb-1">Password (optional)</label>
238
+ <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">
239
+ </div>
240
+
241
+ <div class="flex space-x-2">
242
+ <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">
243
+ <i class="fas fa-plug mr-2"></i> Check Proxy
244
+ </button>
245
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex-1">
246
+ <i class="fas fa-save mr-2"></i> Save
247
+ </button>
248
+ </div>
249
+ </div>
250
+ </div>
251
+
252
+ <div class="mt-6">
253
+ <div class="flex items-center justify-between mb-2">
254
+ <label class="text-gray-700 dark:text-gray-300">Low Bandwidth Mode</label>
255
+ <label class="relative inline-flex items-center cursor-pointer">
256
+ <input type="checkbox" class="sr-only peer" id="bandwidthToggle">
257
+ <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>
258
+ </label>
259
+ </div>
260
+ <p class="text-sm text-gray-500 dark:text-gray-400">Reduces bitrate and uses "ultrafast" preset for unstable networks</p>
261
+ </div>
262
+
263
+ <div class="mt-8">
264
+ <button onclick="startStreaming()" class="bg-green-600 hover:bg-green-700 text-white px-4 py-3 rounded-lg w-full font-bold">
265
+ <i class="fas fa-broadcast-tower mr-2"></i> Start Streaming
266
+ </button>
267
+ </div>
268
+ </div>
269
+ </div>
270
+ </div>
271
+ </div>
272
+
273
+ <!-- Streaming Screen -->
274
+ <div id="streamingScreen" class="min-h-screen hidden bg-gray-100 dark:bg-gray-900">
275
+ <div class="container mx-auto px-4 py-6">
276
+ <div class="flex justify-between items-center mb-6">
277
+ <button onclick="showStreamSetup()" class="text-blue-600 dark:text-blue-400">
278
+ <i class="fas fa-arrow-left mr-2"></i> Back
279
+ </button>
280
+ <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Live Streaming</h2>
281
+ <div class="w-12"></div> <!-- Spacer for alignment -->
282
+ </div>
283
+
284
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
285
+ <!-- Left Column -->
286
+ <div class="lg:col-span-2 space-y-6">
287
+ <!-- Video Preview -->
288
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
289
+ <div class="video-preview rounded-lg mb-4 h-64">
290
+ <i class="fas fa-broadcast-tower text-red-500 text-5xl animate-pulse"></i>
291
+ </div>
292
+
293
+ <div class="flex justify-between items-center">
294
+ <div class="flex items-center">
295
+ <div class="w-3 h-3 rounded-full bg-red-500 mr-2 animate-pulse"></div>
296
+ <span class="font-semibold text-gray-800 dark:text-white">LIVE</span>
297
+ <span id="streamTimer" class="ml-4 text-gray-600 dark:text-gray-300">00:00:00</span>
298
+ </div>
299
+
300
+ <button onclick="stopStreaming()" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg">
301
+ <i class="fas fa-stop mr-2"></i> Stop Streaming
302
+ </button>
303
+ </div>
304
+ </div>
305
+
306
+ <!-- FFmpeg Logs -->
307
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
308
+ <h3 class="text-lg font-semibold mb-2 text-gray-800 dark:text-white">FFmpeg Logs</h3>
309
+ <div class="terminal rounded-lg">
310
+ <div>> Starting FFmpeg process...</div>
311
+ <div>> Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'video.mp4':</div>
312
+ <div>> Metadata:</div>
313
+ <div>> major_brand : isom</div>
314
+ <div>> minor_version : 512</div>
315
+ <div>> compatible_brands: isomiso2avc1mp41</div>
316
+ <div>> Duration: 00:05:30.00, start: 0.000000, bitrate: 1500 kb/s</div>
317
+ <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>
318
+ <div>> Stream mapping:</div>
319
+ <div>> Stream #0:0 -> #0:0 (h264 (native) -> h264 (libx264))</div>
320
+ <div>> Press [q] to stop, [?] for help</div>
321
+ <div>> [libx264 @ 0x7f8b4c00b600] using cpu capabilities: MMX2 SSE2Fast SSSE3 SSE4.2 AVX FMA3 BMI2 AVX2</div>
322
+ <div>> [libx264 @ 0x7f8b4c00b600] profile High, level 3.1, 4:2:0, 8-bit</div>
323
+ <div>> Output #0, flv, to 'rtmp://example.com/live/your-stream-key':</div>
324
+ <div>> Metadata:</div>
325
+ <div>> encoder : Lavf58.76.100</div>
326
+ <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>
327
+ <div>> Metadata:</div>
328
+ <div>> encoder : Lavc58.134.100 libx264</div>
329
+ <div>> Side data:</div>
330
+ <div>> cpb: bitrate max/min/avg: 6000000/0/3000000 buffer size: 6000000 vbv_delay: -1</div>
331
+ <div>> frame= 1 fps=0.0 q=0.0 size= 0kB time=00:00:00.00 bitrate=N/A speed= 0x</div>
332
+ </div>
333
+ </div>
334
+ </div>
335
+
336
+ <!-- Right Column -->
337
+ <div class="space-y-6">
338
+ <!-- Stream Status -->
339
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
340
+ <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">Stream Status</h3>
341
+
342
+ <div class="space-y-3">
343
+ <div class="flex justify-between">
344
+ <span class="text-gray-700 dark:text-gray-300">Stream 1</span>
345
+ <span class="text-green-500 font-semibold">Active</span>
346
+ </div>
347
+ <div class="flex justify-between">
348
+ <span class="text-gray-700 dark:text-gray-300">Stream 2</span>
349
+ <span class="text-yellow-500 font-semibold">Connecting</span>
350
+ </div>
351
+ <div class="flex justify-between">
352
+ <span class="text-gray-700 dark:text-gray-300">Stream 3</span>
353
+ <span class="text-gray-500 font-semibold">Inactive</span>
354
+ </div>
355
+ </div>
356
+ </div>
357
+
358
+ <!-- Stream Info -->
359
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
360
+ <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">Stream Information</h3>
361
+
362
+ <div class="space-y-2">
363
+ <div>
364
+ <label class="block text-gray-700 dark:text-gray-300 text-sm">Video Source</label>
365
+ <p class="text-gray-800 dark:text-white font-medium">video.mp4</p>
366
+ </div>
367
+ <div>
368
+ <label class="block text-gray-700 dark:text-gray-300 text-sm">Resolution</label>
369
+ <p class="text-gray-800 dark:text-white font-medium">1280x720</p>
370
+ </div>
371
+ <div>
372
+ <label class="block text-gray-700 dark:text-gray-300 text-sm">Bitrate</label>
373
+ <p class="text-gray-800 dark:text-white font-medium">3000 kbps</p>
374
+ </div>
375
+ <div>
376
+ <label class="block text-gray-700 dark:text-gray-300 text-sm">FPS</label>
377
+ <p class="text-gray-800 dark:text-white font-medium">30</p>
378
+ </div>
379
+ <div>
380
+ <label class="block text-gray-700 dark:text-gray-300 text-sm">Proxy</label>
381
+ <p class="text-gray-800 dark:text-white font-medium">Disabled</p>
382
+ </div>
383
+ </div>
384
+ </div>
385
+
386
+ <!-- Quick Controls -->
387
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
388
+ <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">Quick Controls</h3>
389
+
390
+ <div class="grid grid-cols-2 gap-3">
391
+ <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">
392
+ <i class="fas fa-pause mr-2"></i> Pause
393
+ </button>
394
+ <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">
395
+ <i class="fas fa-volume-up mr-2"></i> Mute
396
+ </button>
397
+ <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">
398
+ <i class="fas fa-sync-alt mr-2"></i> Restart
399
+ </button>
400
+ <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">
401
+ <i class="fas fa-cog mr-2"></i> Settings
402
+ </button>
403
+ </div>
404
+ </div>
405
+ </div>
406
+ </div>
407
+ </div>
408
+ </div>
409
+
410
+ <script>
411
+ // Dark mode toggle
412
+ const toggle = document.getElementById('toggle');
413
+ const html = document.querySelector('html');
414
+
415
+ toggle.addEventListener('change', function() {
416
+ if (this.checked) {
417
+ html.classList.add('dark');
418
+ } else {
419
+ html.classList.remove('dark');
420
+ }
421
+ });
422
+
423
+ // Screen navigation
424
+ function showHomeScreen() {
425
+ document.getElementById('homeScreen').classList.remove('hidden');
426
+ document.getElementById('streamSetupScreen').classList.add('hidden');
427
+ document.getElementById('streamingScreen').classList.add('hidden');
428
+ }
429
+
430
+ function showStreamSetup() {
431
+ document.getElementById('homeScreen').classList.add('hidden');
432
+ document.getElementById('streamSetupScreen').classList.remove('hidden');
433
+ document.getElementById('streamingScreen').classList.add('hidden');
434
+ }
435
+
436
+ function startStreaming() {
437
+ document.getElementById('homeScreen').classList.add('hidden');
438
+ document.getElementById('streamSetupScreen').classList.add('hidden');
439
+ document.getElementById('streamingScreen').classList.remove('hidden');
440
+
441
+ // Start timer
442
+ let seconds = 0;
443
+ const timer = setInterval(function() {
444
+ seconds++;
445
+ const hours = Math.floor(seconds / 3600);
446
+ const minutes = Math.floor((seconds % 3600) / 60);
447
+ const secs = seconds % 60;
448
+
449
+ document.getElementById('streamTimer').textContent =
450
+ `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
451
+ }, 1000);
452
+
453
+ // Store timer interval so we can clear it later
454
+ document.getElementById('streamingScreen').setAttribute('data-timer', timer);
455
+ }
456
+
457
+ function stopStreaming() {
458
+ // Clear timer
459
+ const timer = document.getElementById('streamingScreen').getAttribute('data-timer');
460
+ clearInterval(parseInt(timer));
461
+
462
+ showStreamSetup();
463
+ }
464
+
465
+ // Proxy toggle
466
+ const proxyToggle = document.getElementById('proxyToggle');
467
+ const proxyFields = document.getElementById('proxyFields');
468
+
469
+ proxyToggle.addEventListener('change', function() {
470
+ if (this.checked) {
471
+ proxyFields.classList.remove('hidden');
472
+ } else {
473
+ proxyFields.classList.add('hidden');
474
+ }
475
+ });
476
+
477
+ // Tab functionality
478
+ let currentTab = 1;
479
+ const totalTabs = 3;
480
+
481
+ function switchTab(tabNumber) {
482
+ currentTab = tabNumber;
483
+
484
+ // Update tab styling
485
+ for (let i = 1; i <= totalTabs; i++) {
486
+ const tab = document.getElementById(`tab${i}`);
487
+ if (i === tabNumber) {
488
+ tab.classList.add('tab-active');
489
+ } else {
490
+ tab.classList.remove('tab-active');
491
+ }
492
+ }
493
+
494
+ // In a real app, you would load the settings for this tab
495
+ }
496
+
497
+ function addTab() {
498
+ if (totalTabs < 5) {
499
+ // In a real app, you would add a new tab
500
+ alert('New tab would be added in the full app');
501
+ } else {
502
+ alert('Maximum number of streams reached');
503
+ }
504
+ }
505
+ </script>
506
+ <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>
507
+ </html>