Curlzz commited on
Commit
abf0df5
·
verified ·
1 Parent(s): eae4638

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +498 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: L
3
- emoji: 📊
4
  colorFrom: blue
5
- colorTo: gray
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: l
3
+ emoji: 🐳
4
  colorFrom: blue
5
+ colorTo: green
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,498 @@
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>TogetherTube - Watch YouTube with Your Love</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
+ .video-container {
11
+ position: relative;
12
+ padding-bottom: 56.25%; /* 16:9 aspect ratio */
13
+ height: 0;
14
+ overflow: hidden;
15
+ }
16
+ .video-container iframe {
17
+ position: absolute;
18
+ top: 0;
19
+ left: 0;
20
+ width: 100%;
21
+ height: 100%;
22
+ }
23
+ .chat-message.sent {
24
+ background-color: #3b82f6;
25
+ color: white;
26
+ border-radius: 18px 18px 0 18px;
27
+ align-self: flex-end;
28
+ }
29
+ .chat-message.received {
30
+ background-color: #e5e7eb;
31
+ color: black;
32
+ border-radius: 18px 18px 18px 0;
33
+ align-self: flex-start;
34
+ }
35
+ .webcam-container {
36
+ position: relative;
37
+ width: 100%;
38
+ padding-bottom: 56.25%;
39
+ background-color: #1f2937;
40
+ border-radius: 8px;
41
+ overflow: hidden;
42
+ }
43
+ .webcam-container video {
44
+ position: absolute;
45
+ top: 0;
46
+ left: 0;
47
+ width: 100%;
48
+ height: 100%;
49
+ object-fit: cover;
50
+ }
51
+ .heart-pulse {
52
+ animation: pulse 1.5s infinite;
53
+ }
54
+ @keyframes pulse {
55
+ 0% { transform: scale(1); }
56
+ 50% { transform: scale(1.3); }
57
+ 100% { transform: scale(1); }
58
+ }
59
+ </style>
60
+ </head>
61
+ <body class="bg-gray-100 font-sans">
62
+ <div class="min-h-screen flex flex-col">
63
+ <!-- Header -->
64
+ <header class="bg-red-600 text-white p-4 shadow-md">
65
+ <div class="container mx-auto flex justify-between items-center">
66
+ <div class="flex items-center space-x-2">
67
+ <i class="fab fa-youtube text-2xl"></i>
68
+ <h1 class="text-xl font-bold">Together<span class="text-pink-300">Tube</span></h1>
69
+ </div>
70
+ <div class="flex items-center space-x-4">
71
+ <button id="heartBtn" class="text-pink-300 text-2xl">
72
+ <i class="fas fa-heart"></i>
73
+ </button>
74
+ <div class="flex items-center space-x-2">
75
+ <div class="w-8 h-8 rounded-full bg-pink-300 flex items-center justify-center">
76
+ <i class="fas fa-user text-white"></i>
77
+ </div>
78
+ <span>You & Your Love</span>
79
+ </div>
80
+ </div>
81
+ </div>
82
+ </header>
83
+
84
+ <!-- Main Content -->
85
+ <main class="flex-1 container mx-auto p-4 flex flex-col lg:flex-row gap-4">
86
+ <!-- Video Section -->
87
+ <div class="lg:w-2/3 flex flex-col gap-4">
88
+ <!-- Video Player -->
89
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
90
+ <div class="video-container">
91
+ <iframe id="youtubePlayer" src="https://www.youtube.com/embed/dQw4w9WgXcQ?enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
92
+ </div>
93
+ <div class="p-4">
94
+ <h2 id="videoTitle" class="text-xl font-bold">Rick Astley - Never Gonna Give You Up (Official Music Video)</h2>
95
+ <div class="flex justify-between items-center mt-2">
96
+ <div class="flex items-center space-x-2 text-gray-500">
97
+ <span>4.5M views</span>
98
+ <span>•</span>
99
+ <span>3 years ago</span>
100
+ </div>
101
+ <div class="flex space-x-2">
102
+ <button class="p-2 rounded-full hover:bg-gray-100">
103
+ <i class="fas fa-thumbs-up"></i>
104
+ </button>
105
+ <button class="p-2 rounded-full hover:bg-gray-100">
106
+ <i class="fas fa-thumbs-down"></i>
107
+ </button>
108
+ <button class="p-2 rounded-full hover:bg-gray-100">
109
+ <i class="fas fa-share"></i>
110
+ </button>
111
+ </div>
112
+ </div>
113
+ </div>
114
+ </div>
115
+
116
+ <!-- Video Controls -->
117
+ <div class="bg-white rounded-lg shadow-md p-4">
118
+ <div class="flex flex-col space-y-4">
119
+ <div class="flex items-center justify-between">
120
+ <div class="flex items-center space-x-2">
121
+ <button id="playPauseBtn" class="bg-red-600 text-white p-2 rounded-full">
122
+ <i class="fas fa-play"></i>
123
+ </button>
124
+ <span id="currentTime" class="text-gray-700">0:00</span>
125
+ <span>/</span>
126
+ <span id="duration" class="text-gray-700">3:33</span>
127
+ </div>
128
+ <button id="syncBtn" class="bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center space-x-2">
129
+ <i class="fas fa-sync-alt"></i>
130
+ <span>Sync Video</span>
131
+ </button>
132
+ </div>
133
+ <input id="seekBar" type="range" min="0" max="100" value="0" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
134
+ </div>
135
+ </div>
136
+
137
+ <!-- Webcam Section -->
138
+ <div class="bg-white rounded-lg shadow-md p-4">
139
+ <h3 class="font-bold text-lg mb-4">Your Reactions <span class="text-sm font-normal text-gray-500">(optional)</span></h3>
140
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
141
+ <div>
142
+ <div class="webcam-container">
143
+ <video id="localVideo" autoplay muted></video>
144
+ </div>
145
+ <div class="mt-2 flex justify-center">
146
+ <button id="toggleWebcamBtn" class="bg-gray-200 hover:bg-gray-300 px-4 py-2 rounded-lg">
147
+ <i class="fas fa-video mr-2"></i>Enable Webcam
148
+ </button>
149
+ </div>
150
+ </div>
151
+ <div>
152
+ <div class="webcam-container">
153
+ <video id="remoteVideo" autoplay></video>
154
+ </div>
155
+ <div class="mt-2 text-center text-gray-500">
156
+ Waiting for your partner to enable webcam...
157
+ </div>
158
+ </div>
159
+ </div>
160
+ </div>
161
+ </div>
162
+
163
+ <!-- Sidebar -->
164
+ <div class="lg:w-1/3 flex flex-col gap-4">
165
+ <!-- Search and Add Video -->
166
+ <div class="bg-white rounded-lg shadow-md p-4">
167
+ <h3 class="font-bold text-lg mb-4">Add Video to Watch Together</h3>
168
+ <div class="flex">
169
+ <input id="videoUrlInput" type="text" placeholder="Paste YouTube URL here..." class="flex-1 border border-gray-300 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-red-500">
170
+ <button id="addVideoBtn" class="bg-red-600 text-white px-4 py-2 rounded-r-lg hover:bg-red-700">
171
+ <i class="fas fa-plus"></i>
172
+ </button>
173
+ </div>
174
+ </div>
175
+
176
+ <!-- Playlist -->
177
+ <div class="bg-white rounded-lg shadow-md p-4 flex-1">
178
+ <div class="flex justify-between items-center mb-4">
179
+ <h3 class="font-bold text-lg">Your Playlist</h3>
180
+ <button class="text-red-600 hover:text-red-700">
181
+ <i class="fas fa-random"></i>
182
+ </button>
183
+ </div>
184
+ <div id="playlist" class="space-y-2 max-h-96 overflow-y-auto">
185
+ <div class="flex items-center p-2 hover:bg-gray-100 rounded-lg cursor-pointer border-b border-gray-100">
186
+ <div class="w-16 h-12 bg-gray-200 rounded overflow-hidden">
187
+ <img src="https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg" alt="Thumbnail" class="w-full h-full object-cover">
188
+ </div>
189
+ <div class="ml-3 flex-1">
190
+ <p class="text-sm font-medium line-clamp-1">Rick Astley - Never Gonna Give You Up (Official Music Video)</p>
191
+ <p class="text-xs text-gray-500">3:33</p>
192
+ </div>
193
+ <button class="text-gray-400 hover:text-red-600 p-2">
194
+ <i class="fas fa-trash"></i>
195
+ </button>
196
+ </div>
197
+ <div class="flex items-center p-2 hover:bg-gray-100 rounded-lg cursor-pointer border-b border-gray-100">
198
+ <div class="w-16 h-12 bg-gray-200 rounded overflow-hidden">
199
+ <img src="https://i.ytimg.com/vi/JGwWNGJdvx8/hqdefault.jpg" alt="Thumbnail" class="w-full h-full object-cover">
200
+ </div>
201
+ <div class="ml-3 flex-1">
202
+ <p class="text-sm font-medium line-clamp-1">Ed Sheeran - Shape of You [Official Video]</p>
203
+ <p class="text-xs text-gray-500">4:23</p>
204
+ </div>
205
+ <button class="text-gray-400 hover:text-red-600 p-2">
206
+ <i class="fas fa-trash"></i>
207
+ </button>
208
+ </div>
209
+ <div class="flex items-center p-2 hover:bg-gray-100 rounded-lg cursor-pointer border-b border-gray-100">
210
+ <div class="w-16 h-12 bg-gray-200 rounded overflow-hidden">
211
+ <img src="https://i.ytimg.com/vi/kJQP7kiw5Fk/hqdefault.jpg" alt="Thumbnail" class="w-full h-full object-cover">
212
+ </div>
213
+ <div class="ml-3 flex-1">
214
+ <p class="text-sm font-medium line-clamp-1">Luis Fonsi - Despacito ft. Daddy Yankee</p>
215
+ <p class="text-xs text-gray-500">4:41</p>
216
+ </div>
217
+ <button class="text-gray-400 hover:text-red-600 p-2">
218
+ <i class="fas fa-trash"></i>
219
+ </button>
220
+ </div>
221
+ </div>
222
+ </div>
223
+
224
+ <!-- Chat -->
225
+ <div class="bg-white rounded-lg shadow-md p-4 flex-1 flex flex-col">
226
+ <h3 class="font-bold text-lg mb-4">Chat with Your Love</h3>
227
+ <div id="chatMessages" class="flex-1 space-y-2 overflow-y-auto mb-4">
228
+ <div class="chat-message received p-3 max-w-xs">
229
+ <p>Hey love! What should we watch next?</p>
230
+ <p class="text-xs text-gray-500 mt-1">2:45 PM</p>
231
+ </div>
232
+ <div class="chat-message sent p-3 max-w-xs">
233
+ <p>How about some romantic music videos? ❤️</p>
234
+ <p class="text-xs text-gray-100 mt-1">2:46 PM</p>
235
+ </div>
236
+ </div>
237
+ <div class="flex">
238
+ <input id="chatInput" type="text" placeholder="Type a message..." class="flex-1 border border-gray-300 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-red-500">
239
+ <button id="sendMessageBtn" class="bg-red-600 text-white px-4 py-2 rounded-r-lg hover:bg-red-700">
240
+ <i class="fas fa-paper-plane"></i>
241
+ </button>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ </main>
246
+
247
+ <!-- Footer -->
248
+ <footer class="bg-gray-800 text-white p-4 text-center">
249
+ <p>Made with <i class="fas fa-heart text-red-500"></i> for you and your love</p>
250
+ <p class="text-sm text-gray-400 mt-1">© 2023 TogetherTube - Watch YouTube videos together</p>
251
+ </footer>
252
+ </div>
253
+
254
+ <script>
255
+ // YouTube Player API
256
+ let player;
257
+ let isPlaying = false;
258
+ let currentVideoId = 'dQw4w9WgXcQ';
259
+
260
+ // DOM Elements
261
+ const youtubePlayer = document.getElementById('youtubePlayer');
262
+ const playPauseBtn = document.getElementById('playPauseBtn');
263
+ const seekBar = document.getElementById('seekBar');
264
+ const currentTime = document.getElementById('currentTime');
265
+ const duration = document.getElementById('duration');
266
+ const syncBtn = document.getElementById('syncBtn');
267
+ const videoUrlInput = document.getElementById('videoUrlInput');
268
+ const addVideoBtn = document.getElementById('addVideoBtn');
269
+ const playlist = document.getElementById('playlist');
270
+ const chatMessages = document.getElementById('chatMessages');
271
+ const chatInput = document.getElementById('chatInput');
272
+ const sendMessageBtn = document.getElementById('sendMessageBtn');
273
+ const heartBtn = document.getElementById('heartBtn');
274
+ const toggleWebcamBtn = document.getElementById('toggleWebcamBtn');
275
+ const localVideo = document.getElementById('localVideo');
276
+ const remoteVideo = document.getElementById('remoteVideo');
277
+
278
+ // Webcam state
279
+ let webcamEnabled = false;
280
+ let localStream;
281
+
282
+ // Heart button animation
283
+ heartBtn.addEventListener('click', () => {
284
+ const heartIcon = heartBtn.querySelector('i');
285
+ heartIcon.classList.toggle('heart-pulse');
286
+ heartIcon.classList.toggle('text-pink-300');
287
+
288
+ // Send love message to chat
289
+ const loveMessages = [
290
+ "I love you! ❤️",
291
+ "You're the best! 💕",
292
+ "Thinking of you 😘",
293
+ "You make me so happy! 🥰",
294
+ "Sending you kisses! 💋"
295
+ ];
296
+ const randomMessage = loveMessages[Math.floor(Math.random() * loveMessages.length)];
297
+ addMessageToChat(randomMessage, 'sent');
298
+ });
299
+
300
+ // Toggle webcam
301
+ toggleWebcamBtn.addEventListener('click', async () => {
302
+ if (!webcamEnabled) {
303
+ try {
304
+ localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
305
+ localVideo.srcObject = localStream;
306
+ toggleWebcamBtn.innerHTML = '<i class="fas fa-video-slash mr-2"></i>Disable Webcam';
307
+ toggleWebcamBtn.classList.remove('bg-gray-200', 'hover:bg-gray-300');
308
+ toggleWebcamBtn.classList.add('bg-red-600', 'hover:bg-red-700', 'text-white');
309
+ webcamEnabled = true;
310
+
311
+ // Simulate partner enabling webcam after 2 seconds
312
+ setTimeout(() => {
313
+ // In a real app, this would be from a WebRTC connection
314
+ remoteVideo.srcObject = localStream.clone();
315
+ document.querySelector('.webcam-container + .mt-2').textContent = 'Your partner is watching with you';
316
+ }, 2000);
317
+ } catch (err) {
318
+ console.error("Error accessing webcam:", err);
319
+ alert("Could not access webcam. Please check permissions.");
320
+ }
321
+ } else {
322
+ localStream.getTracks().forEach(track => track.stop());
323
+ localVideo.srcObject = null;
324
+ toggleWebcamBtn.innerHTML = '<i class="fas fa-video mr-2"></i>Enable Webcam';
325
+ toggleWebcamBtn.classList.remove('bg-red-600', 'hover:bg-red-700', 'text-white');
326
+ toggleWebcamBtn.classList.add('bg-gray-200', 'hover:bg-gray-300');
327
+ webcamEnabled = false;
328
+
329
+ // Simulate partner disabling webcam
330
+ remoteVideo.srcObject = null;
331
+ document.querySelector('.webcam-container + .mt-2').textContent = 'Waiting for your partner to enable webcam...';
332
+ }
333
+ });
334
+
335
+ // Chat functionality
336
+ sendMessageBtn.addEventListener('click', sendMessage);
337
+ chatInput.addEventListener('keypress', (e) => {
338
+ if (e.key === 'Enter') sendMessage();
339
+ });
340
+
341
+ function sendMessage() {
342
+ const message = chatInput.value.trim();
343
+ if (message) {
344
+ addMessageToChat(message, 'sent');
345
+ chatInput.value = '';
346
+
347
+ // Simulate partner reply after 1-3 seconds
348
+ setTimeout(() => {
349
+ const replies = [
350
+ "That's a great idea!",
351
+ "I love that!",
352
+ "Let's watch that next!",
353
+ "You're so cute when you say that 😊",
354
+ "I was thinking the same thing!",
355
+ "Sounds perfect! ❤️"
356
+ ];
357
+ const randomReply = replies[Math.floor(Math.random() * replies.length)];
358
+ addMessageToChat(randomReply, 'received');
359
+ }, 1000 + Math.random() * 2000);
360
+ }
361
+ }
362
+
363
+ function addMessageToChat(message, type) {
364
+ const now = new Date();
365
+ const timeString = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
366
+
367
+ const messageDiv = document.createElement('div');
368
+ messageDiv.className = `chat-message ${type} p-3 max-w-xs`;
369
+ messageDiv.innerHTML = `
370
+ <p>${message}</p>
371
+ <p class="text-xs ${type === 'sent' ? 'text-gray-100' : 'text-gray-500'} mt-1">${timeString}</p>
372
+ `;
373
+
374
+ chatMessages.appendChild(messageDiv);
375
+ chatMessages.scrollTop = chatMessages.scrollHeight;
376
+ }
377
+
378
+ // Video controls
379
+ playPauseBtn.addEventListener('click', () => {
380
+ if (isPlaying) {
381
+ // Pause video
382
+ playPauseBtn.innerHTML = '<i class="fas fa-play"></i>';
383
+ isPlaying = false;
384
+ } else {
385
+ // Play video
386
+ playPauseBtn.innerHTML = '<i class="fas fa-pause"></i>';
387
+ isPlaying = true;
388
+ }
389
+ });
390
+
391
+ seekBar.addEventListener('input', () => {
392
+ // Update video time based on seek bar
393
+ const seekTime = (seekBar.value / 100) * 213; // 3:33 in seconds
394
+ const minutes = Math.floor(seekTime / 60);
395
+ const seconds = Math.floor(seekTime % 60);
396
+ currentTime.textContent = `${minutes}:${seconds < 10 ? '0' + seconds : seconds}`;
397
+ });
398
+
399
+ syncBtn.addEventListener('click', () => {
400
+ // Simulate syncing video with partner
401
+ const notification = document.createElement('div');
402
+ notification.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg';
403
+ notification.textContent = 'Video synced with your partner!';
404
+ document.body.appendChild(notification);
405
+
406
+ setTimeout(() => {
407
+ notification.remove();
408
+ }, 3000);
409
+ });
410
+
411
+ // Add video to playlist
412
+ addVideoBtn.addEventListener('click', () => {
413
+ const url = videoUrlInput.value.trim();
414
+ if (url) {
415
+ // Extract video ID from URL (simplified for demo)
416
+ let videoId = '';
417
+ if (url.includes('youtube.com/watch?v=')) {
418
+ videoId = url.split('v=')[1].split('&')[0];
419
+ } else if (url.includes('youtu.be/')) {
420
+ videoId = url.split('youtu.be/')[1].split('?')[0];
421
+ }
422
+
423
+ if (videoId) {
424
+ // In a real app, you would fetch video details from YouTube API
425
+ const videoItem = document.createElement('div');
426
+ videoItem.className = 'flex items-center p-2 hover:bg-gray-100 rounded-lg cursor-pointer border-b border-gray-100';
427
+ videoItem.innerHTML = `
428
+ <div class="w-16 h-12 bg-gray-200 rounded overflow-hidden">
429
+ <img src="https://i.ytimg.com/vi/${videoId}/hqdefault.jpg" alt="Thumbnail" class="w-full h-full object-cover">
430
+ </div>
431
+ <div class="ml-3 flex-1">
432
+ <p class="text-sm font-medium line-clamp-1">New Video Added</p>
433
+ <p class="text-xs text-gray-500">0:00</p>
434
+ </div>
435
+ <button class="text-gray-400 hover:text-red-600 p-2">
436
+ <i class="fas fa-trash"></i>
437
+ </button>
438
+ `;
439
+
440
+ playlist.insertBefore(videoItem, playlist.firstChild);
441
+ videoUrlInput.value = '';
442
+
443
+ // Simulate partner adding a video after 2 seconds
444
+ setTimeout(() => {
445
+ const partnerVideos = [
446
+ { id: '9bZkp7q19f0', title: 'PSY - GANGNAM STYLE(강남스타일)' },
447
+ { id: 'kJQP7kiw5Fk', title: 'Luis Fonsi - Despacito ft. Daddy Yankee' },
448
+ { id: 'JGwWNGJdvx8', title: 'Ed Sheeran - Shape of You [Official Video]' }
449
+ ];
450
+ const randomVideo = partnerVideos[Math.floor(Math.random() * partnerVideos.length)];
451
+
452
+ const partnerVideoItem = document.createElement('div');
453
+ partnerVideoItem.className = 'flex items-center p-2 hover:bg-gray-100 rounded-lg cursor-pointer border-b border-gray-100';
454
+ partnerVideoItem.innerHTML = `
455
+ <div class="w-16 h-12 bg-gray-200 rounded overflow-hidden">
456
+ <img src="https://i.ytimg.com/vi/${randomVideo.id}/hqdefault.jpg" alt="Thumbnail" class="w-full h-full object-cover'>
457
+ </div>
458
+ <div class="ml-3 flex-1">
459
+ <p class="text-sm font-medium line-clamp-1">${randomVideo.title}</p>
460
+ <p class="text-xs text-gray-500">0:00</p>
461
+ </div>
462
+ <button class="text-gray-400 hover:text-red-600 p-2">
463
+ <i class="fas fa-trash"></i>
464
+ </button>
465
+ `;
466
+
467
+ playlist.insertBefore(partnerVideoItem, playlist.firstChild);
468
+
469
+ // Add chat message
470
+ addMessageToChat(`I added "${randomVideo.title}" to our playlist!`, 'received');
471
+ }, 2000);
472
+ } else {
473
+ alert('Please enter a valid YouTube URL');
474
+ }
475
+ }
476
+ });
477
+
478
+ // Simulate video time updates
479
+ setInterval(() => {
480
+ if (isPlaying) {
481
+ let currentValue = parseInt(seekBar.value);
482
+ if (currentValue < 100) {
483
+ seekBar.value = currentValue + 1;
484
+
485
+ // Update time display
486
+ const seekTime = (seekBar.value / 100) * 213; // 3:33 in seconds
487
+ const minutes = Math.floor(seekTime / 60);
488
+ const seconds = Math.floor(seekTime % 60);
489
+ currentTime.textContent = `${minutes}:${seconds < 10 ? '0' + seconds : seconds}`;
490
+ } else {
491
+ isPlaying = false;
492
+ playPauseBtn.innerHTML = '<i class="fas fa-play"></i>';
493
+ }
494
+ }
495
+ }, 1000);
496
+ </script>
497
+ <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=Curlzz/l" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
498
+ </html>
prompts.txt ADDED
File without changes