Hugging Face's logo

Spaces:
Spooke
/
spooqube
Running

App Files Community
Spooke commited on
Commit
89043d7
·
verified ·
1 Parent(s): 5db3432

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +463 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Spooqube
3
- emoji: 🐨
4
  colorFrom: yellow
5
- colorTo: yellow
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: spooqube
3
+ emoji: 🐳
4
  colorFrom: yellow
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,463 @@
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>SpooQube - Video Sharing Platform</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
+ /* Custom scrollbar */
11
+ ::-webkit-scrollbar {
12
+ width: 8px;
13
+ }
14
+ ::-webkit-scrollbar-track {
15
+ background: #f1f1f1;
16
+ }
17
+ ::-webkit-scrollbar-thumb {
18
+ background: #888;
19
+ border-radius: 4px;
20
+ }
21
+ ::-webkit-scrollbar-thumb:hover {
22
+ background: #555;
23
+ }
24
+
25
+ /* Video card hover effect */
26
+ .video-card:hover .thumbnail-overlay {
27
+ opacity: 1;
28
+ }
29
+
30
+ /* Dark mode toggle transition */
31
+ .dark-mode-toggle {
32
+ transition: all 0.3s ease;
33
+ }
34
+
35
+ /* Custom animations */
36
+ @keyframes pulse {
37
+ 0%, 100% {
38
+ opacity: 1;
39
+ }
40
+ 50% {
41
+ opacity: 0.5;
42
+ }
43
+ }
44
+ .animate-pulse {
45
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
46
+ }
47
+ </style>
48
+ </head>
49
+ <body class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-300">
50
+ <!-- Header -->
51
+ <header class="sticky top-0 z-50 bg-white dark:bg-gray-800 shadow-sm">
52
+ <div class="container mx-auto px-4 py-3 flex items-center justify-between">
53
+ <!-- Logo and Menu -->
54
+ <div class="flex items-center space-x-4">
55
+ <button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
56
+ <i class="fas fa-bars text-xl"></i>
57
+ </button>
58
+ <div class="flex items-center">
59
+ <i class="fab fa-youtube text-red-600 text-3xl mr-1"></i>
60
+ <span class="text-xl font-bold">SpooQube</span>
61
+ </div>
62
+ </div>
63
+
64
+ <!-- Search Bar -->
65
+ <div class="hidden md:flex flex-1 max-w-2xl mx-4">
66
+ <div class="relative w-full">
67
+ <input type="text" placeholder="Search" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-l-full focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700">
68
+ <button class="absolute right-0 top-0 h-full px-5 bg-gray-200 dark:bg-gray-600 rounded-r-full border-l border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-500">
69
+ <i class="fas fa-search"></i>
70
+ </button>
71
+ </div>
72
+ <button class="ml-2 p-2 bg-gray-200 dark:bg-gray-700 rounded-full hover:bg-gray-300 dark:hover:bg-gray-600">
73
+ <i class="fas fa-microphone"></i>
74
+ </button>
75
+ </div>
76
+
77
+ <!-- User Controls -->
78
+ <div class="flex items-center space-x-3">
79
+ <button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 md:hidden">
80
+ <i class="fas fa-search text-xl"></i>
81
+ </button>
82
+ <button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
83
+ <i class="fas fa-video text-xl"></i>
84
+ </button>
85
+ <button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
86
+ <i class="fas fa-bell text-xl"></i>
87
+ </button>
88
+ <button id="darkModeToggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 dark-mode-toggle">
89
+ <i class="fas fa-moon text-xl dark:hidden"></i>
90
+ <i class="fas fa-sun text-xl hidden dark:block"></i>
91
+ </button>
92
+ <div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center text-white font-medium cursor-pointer">
93
+ S
94
+ </div>
95
+ </div>
96
+ </div>
97
+
98
+ <!-- Mobile Search (hidden on larger screens) -->
99
+ <div class="md:hidden px-4 pb-3">
100
+ <div class="relative w-full">
101
+ <input type="text" placeholder="Search" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700">
102
+ <button class="absolute right-3 top-1/2 transform -translate-y-1/2">
103
+ <i class="fas fa-search"></i>
104
+ </button>
105
+ </div>
106
+ </div>
107
+ </header>
108
+
109
+ <!-- Main Content -->
110
+ <div class="container mx-auto px-4 py-6 flex flex-col md:flex-row">
111
+ <!-- Sidebar -->
112
+ <aside class="hidden md:block w-64 pr-4">
113
+ <div class="space-y-1 sticky top-20">
114
+ <div class="p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center space-x-4 cursor-pointer bg-gray-200 dark:bg-gray-700">
115
+ <i class="fas fa-home text-xl"></i>
116
+ <span>Home</span>
117
+ </div>
118
+ <div class="p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center space-x-4 cursor-pointer">
119
+ <i class="fas fa-compass text-xl"></i>
120
+ <span>Explore</span>
121
+ </div>
122
+ <div class="p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center space-x-4 cursor-pointer">
123
+ <i class="fas fa-subscript text-xl"></i>
124
+ <span>Subscriptions</span>
125
+ </div>
126
+ <hr class="border-gray-300 dark:border-gray-700 my-2">
127
+ <div class="p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center space-x-4 cursor-pointer">
128
+ <i class="fas fa-photo-video text-xl"></i>
129
+ <span>Library</span>
130
+ </div>
131
+ <div class="p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center space-x-4 cursor-pointer">
132
+ <i class="fas fa-history text-xl"></i>
133
+ <span>History</span>
134
+ </div>
135
+ <div class="p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center space-x-4 cursor-pointer">
136
+ <i class="fas fa-clock text-xl"></i>
137
+ <span>Watch Later</span>
138
+ </div>
139
+ <div class="p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center space-x-4 cursor-pointer">
140
+ <i class="fas fa-thumbs-up text-xl"></i>
141
+ <span>Liked Videos</span>
142
+ </div>
143
+ <hr class="border-gray-300 dark:border-gray-700 my-2">
144
+ <h3 class="px-3 py-2 font-medium">SUBSCRIPTIONS</h3>
145
+ <div class="p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center space-x-4 cursor-pointer">
146
+ <div class="w-6 h-6 rounded-full bg-red-500"></div>
147
+ <span>Tech Channel</span>
148
+ </div>
149
+ <div class="p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center space-x-4 cursor-pointer">
150
+ <div class="w-6 h-6 rounded-full bg-blue-500"></div>
151
+ <span>Coding Tutorials</span>
152
+ </div>
153
+ <div class="p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center space-x-4 cursor-pointer">
154
+ <div class="w-6 h-6 rounded-full bg-green-500"></div>
155
+ <span>Gaming Hub</span>
156
+ </div>
157
+ <div class="p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center space-x-4 cursor-pointer">
158
+ <div class="w-6 h-6 rounded-full bg-yellow-500"></div>
159
+ <span>Music Vibes</span>
160
+ </div>
161
+ <hr class="border-gray-300 dark:border-gray-700 my-2">
162
+ <div class="p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center space-x-4 cursor-pointer">
163
+ <i class="fas fa-cog text-xl"></i>
164
+ <span>Settings</span>
165
+ </div>
166
+ </div>
167
+ </aside>
168
+
169
+ <!-- Main Video Content -->
170
+ <main class="flex-1">
171
+ <!-- Categories -->
172
+ <div class="flex space-x-2 overflow-x-auto pb-4 hide-scrollbar mb-4">
173
+ <button class="px-3 py-1 bg-gray-800 dark:bg-gray-700 text-white rounded-full whitespace-nowrap">All</button>
174
+ <button class="px-3 py-1 bg-gray-200 dark:bg-gray-700 rounded-full whitespace-nowrap">Gaming</button>
175
+ <button class="px-3 py-1 bg-gray-200 dark:bg-gray-700 rounded-full whitespace-nowrap">Music</button>
176
+ <button class="px-3 py-1 bg-gray-200 dark:bg-gray-700 rounded-full whitespace-nowrap">Live</button>
177
+ <button class="px-3 py-1 bg-gray-200 dark:bg-gray-700 rounded-full whitespace-nowrap">Programming</button>
178
+ <button class="px-3 py-1 bg-gray-200 dark:bg-gray-700 rounded-full whitespace-nowrap">Recently uploaded</button>
179
+ <button class="px-3 py-1 bg-gray-200 dark:bg-gray-700 rounded-full whitespace-nowrap">Watched</button>
180
+ <button class="px-3 py-1 bg-gray-200 dark:bg-gray-700 rounded-full whitespace-nowrap">New to you</button>
181
+ </div>
182
+
183
+ <!-- Featured Video -->
184
+ <div class="mb-8">
185
+ <div class="relative w-full aspect-video bg-black rounded-xl overflow-hidden">
186
+ <img src="https://source.unsplash.com/random/1280x720/?technology" alt="Featured Video" class="w-full h-full object-cover">
187
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-4">
188
+ <div>
189
+ <h2 class="text-xl font-bold text-white">The Future of AI Technology in 2023</h2>
190
+ <p class="text-gray-300">1.2M views • 3 days ago</p>
191
+ </div>
192
+ </div>
193
+ <div class="absolute top-4 right-4 bg-black/70 text-white p-2 rounded-full">
194
+ <i class="fas fa-volume-up"></i>
195
+ </div>
196
+ </div>
197
+ </div>
198
+
199
+ <!-- Video Grid -->
200
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
201
+ <!-- Video Card 1 -->
202
+ <div class="video-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300">
203
+ <div class="relative">
204
+ <img src="https://source.unsplash.com/random/300x169/?gaming" alt="Video Thumbnail" class="w-full aspect-video object-cover">
205
+ <div class="thumbnail-overlay absolute inset-0 bg-black/30 opacity-0 transition-opacity duration-300 flex items-center justify-center">
206
+ <button class="bg-white/80 text-black p-3 rounded-full hover:bg-white">
207
+ <i class="fas fa-play text-lg"></i>
208
+ </button>
209
+ </div>
210
+ <span class="absolute bottom-2 right-2 bg-black/80 text-white text-xs px-1.5 py-0.5 rounded">10:15</span>
211
+ </div>
212
+ <div class="p-3">
213
+ <div class="flex space-x-2">
214
+ <div class="w-9 h-9 rounded-full bg-blue-500 flex-shrink-0"></div>
215
+ <div>
216
+ <h3 class="font-medium line-clamp-2">How to Build a Gaming PC in 2023 - Ultimate Guide</h3>
217
+ <p class="text-sm text-gray-600 dark:text-gray-400">Tech Reviews</p>
218
+ <p class="text-xs text-gray-500 dark:text-gray-500">245K views • 2 weeks ago</p>
219
+ </div>
220
+ </div>
221
+ </div>
222
+ </div>
223
+
224
+ <!-- Video Card 2 -->
225
+ <div class="video-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300">
226
+ <div class="relative">
227
+ <img src="https://source.unsplash.com/random/300x169/?music" alt="Video Thumbnail" class="w-full aspect-video object-cover">
228
+ <div class="thumbnail-overlay absolute inset-0 bg-black/30 opacity-0 transition-opacity duration-300 flex items-center justify-center">
229
+ <button class="bg-white/80 text-black p-3 rounded-full hover:bg-white">
230
+ <i class="fas fa-play text-lg"></i>
231
+ </button>
232
+ </div>
233
+ <span class="absolute bottom-2 right-2 bg-black/80 text-white text-xs px-1.5 py-0.5 rounded">5:42</span>
234
+ </div>
235
+ <div class="p-3">
236
+ <div class="flex space-x-2">
237
+ <div class="w-9 h-9 rounded-full bg-red-500 flex-shrink-0"></div>
238
+ <div>
239
+ <h3 class="font-medium line-clamp-2">Top 10 Songs of the Week - Music Chart Update</h3>
240
+ <p class="text-sm text-gray-600 dark:text-gray-400">Music Vibes</p>
241
+ <p class="text-xs text-gray-500 dark:text-gray-500">1.1M views • 1 day ago</p>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ </div>
246
+
247
+ <!-- Video Card 3 -->
248
+ <div class="video-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300">
249
+ <div class="relative">
250
+ <img src="https://source.unsplash.com/random/300x169/?programming" alt="Video Thumbnail" class="w-full aspect-video object-cover">
251
+ <div class="thumbnail-overlay absolute inset-0 bg-black/30 opacity-0 transition-opacity duration-300 flex items-center justify-center">
252
+ <button class="bg-white/80 text-black p-3 rounded-full hover:bg-white">
253
+ <i class="fas fa-play text-lg"></i>
254
+ </button>
255
+ </div>
256
+ <span class="absolute bottom-2 right-2 bg-black/80 text-white text-xs px-1.5 py-0.5 rounded">15:30</span>
257
+ </div>
258
+ <div class="p-3">
259
+ <div class="flex space-x-2">
260
+ <div class="w-9 h-9 rounded-full bg-green-500 flex-shrink-0"></div>
261
+ <div>
262
+ <h3 class="font-medium line-clamp-2">Learn JavaScript in 15 Minutes - Quick Tutorial</h3>
263
+ <p class="text-sm text-gray-600 dark:text-gray-400">Code Masters</p>
264
+ <p class="text-xs text-gray-500 dark:text-gray-500">356K views • 3 weeks ago</p>
265
+ </div>
266
+ </div>
267
+ </div>
268
+ </div>
269
+
270
+ <!-- Video Card 4 -->
271
+ <div class="video-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300">
272
+ <div class="relative">
273
+ <img src="https://source.unsplash.com/random/300x169/?travel" alt="Video Thumbnail" class="w-full aspect-video object-cover">
274
+ <div class="thumbnail-overlay absolute inset-0 bg-black/30 opacity-0 transition-opacity duration-300 flex items-center justify-center">
275
+ <button class="bg-white/80 text-black p-3 rounded-full hover:bg-white">
276
+ <i class="fas fa-play text-lg"></i>
277
+ </button>
278
+ </div>
279
+ <span class="absolute bottom-2 right-2 bg-black/80 text-white text-xs px-1.5 py-0.5 rounded">22:08</span>
280
+ </div>
281
+ <div class="p-3">
282
+ <div class="flex space-x-2">
283
+ <div class="w-9 h-9 rounded-full bg-purple-500 flex-shrink-0"></div>
284
+ <div>
285
+ <h3 class="font-medium line-clamp-2">Bali Travel Guide - Best Places to Visit in 2023</h3>
286
+ <p class="text-sm text-gray-600 dark:text-gray-400">Travel Adventures</p>
287
+ <p class="text-xs text-gray-500 dark:text-gray-500">789K views • 1 month ago</p>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ </div>
292
+
293
+ <!-- Video Card 5 -->
294
+ <div class="video-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300">
295
+ <div class="relative">
296
+ <img src="https://source.unsplash.com/random/300x169/?cooking" alt="Video Thumbnail" class="w-full aspect-video object-cover">
297
+ <div class="thumbnail-overlay absolute inset-0 bg-black/30 opacity-0 transition-opacity duration-300 flex items-center justify-center">
298
+ <button class="bg-white/80 text-black p-3 rounded-full hover:bg-white">
299
+ <i class="fas fa-play text-lg"></i>
300
+ </button>
301
+ </div>
302
+ <span class="absolute bottom-2 right-2 bg-black/80 text-white text-xs px-1.5 py-0.5 rounded">8:45</span>
303
+ </div>
304
+ <div class="p-3">
305
+ <div class="flex space-x-2">
306
+ <div class="w-9 h-9 rounded-full bg-yellow-500 flex-shrink-0"></div>
307
+ <div>
308
+ <h3 class="font-medium line-clamp-2">5 Easy Dinner Recipes for Busy Weeknights</h3>
309
+ <p class="text-sm text-gray-600 dark:text-gray-400">Foodie Channel</p>
310
+ <p class="text-xs text-gray-500 dark:text-gray-500">432K views • 5 days ago</p>
311
+ </div>
312
+ </div>
313
+ </div>
314
+ </div>
315
+
316
+ <!-- Video Card 6 -->
317
+ <div class="video-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300">
318
+ <div class="relative">
319
+ <img src="https://source.unsplash.com/random/300x169/?fitness" alt="Video Thumbnail" class="w-full aspect-video object-cover">
320
+ <div class="thumbnail-overlay absolute inset-0 bg-black/30 opacity-0 transition-opacity duration-300 flex items-center justify-center">
321
+ <button class="bg-white/80 text-black p-3 rounded-full hover:bg-white">
322
+ <i class="fas fa-play text-lg"></i>
323
+ </button>
324
+ </div>
325
+ <span class="absolute bottom-2 right-2 bg-black/80 text-white text-xs px-1.5 py-0.5 rounded">12:20</span>
326
+ </div>
327
+ <div class="p-3">
328
+ <div class="flex space-x-2">
329
+ <div class="w-9 h-9 rounded-full bg-pink-500 flex-shrink-0"></div>
330
+ <div>
331
+ <h3 class="font-medium line-clamp-2">30-Minute Full Body Workout at Home - No Equipment</h3>
332
+ <p class="text-sm text-gray-600 dark:text-gray-400">FitLife</p>
333
+ <p class="text-xs text-gray-500 dark:text-gray-500">1.5M views • 2 months ago</p>
334
+ </div>
335
+ </div>
336
+ </div>
337
+ </div>
338
+
339
+ <!-- Video Card 7 -->
340
+ <div class="video-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300">
341
+ <div class="relative">
342
+ <img src="https://source.unsplash.com/random/300x169/?technology" alt="Video Thumbnail" class="w-full aspect-video object-cover">
343
+ <div class="thumbnail-overlay absolute inset-0 bg-black/30 opacity-0 transition-opacity duration-300 flex items-center justify-center">
344
+ <button class="bg-white/80 text-black p-3 rounded-full hover:bg-white">
345
+ <i class="fas fa-play text-lg"></i>
346
+ </button>
347
+ </div>
348
+ <span class="absolute bottom-2 right-2 bg-black/80 text-white text-xs px-1.5 py-0.5 rounded">18:32</span>
349
+ </div>
350
+ <div class="p-3">
351
+ <div class="flex space-x-2">
352
+ <div class="w-9 h-9 rounded-full bg-blue-500 flex-shrink-0"></div>
353
+ <div>
354
+ <h3 class="font-medium line-clamp-2">iPhone 15 Pro Max Review - Is It Worth It?</h3>
355
+ <p class="text-sm text-gray-600 dark:text-gray-400">Tech Today</p>
356
+ <p class="text-xs text-gray-500 dark:text-gray-500">2.3M views • 1 week ago</p>
357
+ </div>
358
+ </div>
359
+ </div>
360
+ </div>
361
+
362
+ <!-- Video Card 8 -->
363
+ <div class="video-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300">
364
+ <div class="relative">
365
+ <img src="https://source.unsplash.com/random/300x169/?science" alt="Video Thumbnail" class="w-full aspect-video object-cover">
366
+ <div class="thumbnail-overlay absolute inset-0 bg-black/30 opacity-0 transition-opacity duration-300 flex items-center justify-center">
367
+ <button class="bg-white/80 text-black p-3 rounded-full hover:bg-white">
368
+ <i class="fas fa-play text-lg"></i>
369
+ </button>
370
+ </div>
371
+ <span class="absolute bottom-2 right-2 bg-black/80 text-white text-xs px-1.5 py-0.5 rounded">25:15</span>
372
+ </div>
373
+ <div class="p-3">
374
+ <div class="flex space-x-2">
375
+ <div class="w-9 h-9 rounded-full bg-indigo-500 flex-shrink-0"></div>
376
+ <div>
377
+ <h3 class="font-medium line-clamp-2">The Science Behind Black Holes - Explained Simply</h3>
378
+ <p class="text-sm text-gray-600 dark:text-gray-400">Science Channel</p>
379
+ <p class="text-xs text-gray-500 dark:text-gray-500">876K views • 3 weeks ago</p>
380
+ </div>
381
+ </div>
382
+ </div>
383
+ </div>
384
+ </div>
385
+
386
+ <!-- Load More Button -->
387
+ <div class="mt-8 flex justify-center">
388
+ <button class="px-6 py-2 bg-gray-200 dark:bg-gray-700 rounded-full hover:bg-gray-300 dark:hover:bg-gray-600 flex items-center space-x-2">
389
+ <i class="fas fa-redo"></i>
390
+ <span>Load More</span>
391
+ </button>
392
+ </div>
393
+ </main>
394
+ </div>
395
+
396
+ <!-- Mobile Bottom Navigation -->
397
+ <div class="md:hidden fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 flex justify-around py-3 z-50">
398
+ <button class="flex flex-col items-center text-blue-600 dark:text-blue-400">
399
+ <i class="fas fa-home text-xl"></i>
400
+ <span class="text-xs mt-1">Home</span>
401
+ </button>
402
+ <button class="flex flex-col items-center text-gray-600 dark:text-gray-400">
403
+ <i class="fas fa-compass text-xl"></i>
404
+ <span class="text-xs mt-1">Explore</span>
405
+ </button>
406
+ <button class="flex flex-col items-center text-gray-600 dark:text-gray-400">
407
+ <i class="fas fa-plus-circle text-xl"></i>
408
+ <span class="text-xs mt-1">Create</span>
409
+ </button>
410
+ <button class="flex flex-col items-center text-gray-600 dark:text-gray-400">
411
+ <i class="fas fa-subscript text-xl"></i>
412
+ <span class="text-xs mt-1">Subscriptions</span>
413
+ </button>
414
+ <button class="flex flex-col items-center text-gray-600 dark:text-gray-400">
415
+ <i class="fas fa-photo-video text-xl"></i>
416
+ <span class="text-xs mt-1">Library</span>
417
+ </button>
418
+ </div>
419
+
420
+ <script>
421
+ // Dark mode toggle functionality
422
+ const darkModeToggle = document.getElementById('darkModeToggle');
423
+ const html = document.documentElement;
424
+
425
+ // Check for saved user preference or use system preference
426
+ const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
427
+ const savedMode = localStorage.getItem('darkMode');
428
+
429
+ if (savedMode === 'dark' || (!savedMode && userPrefersDark)) {
430
+ html.classList.add('dark');
431
+ }
432
+
433
+ darkModeToggle.addEventListener('click', () => {
434
+ html.classList.toggle('dark');
435
+ const isDark = html.classList.contains('dark');
436
+ localStorage.setItem('darkMode', isDark ? 'dark' : 'light');
437
+ });
438
+
439
+ // Simulate loading more videos
440
+ const loadMoreBtn = document.querySelector('button:contains("Load More")');
441
+ if (loadMoreBtn) {
442
+ loadMoreBtn.addEventListener('click', () => {
443
+ loadMoreBtn.innerHTML = '<i class="fas fa-spinner animate-spin"></i><span>Loading...</span>';
444
+ setTimeout(() => {
445
+ // In a real app, you would fetch more videos here
446
+ loadMoreBtn.innerHTML = '<i class="fas fa-redo"></i><span>Load More</span>';
447
+ alert('More videos would load here in a real application!');
448
+ }, 1500);
449
+ });
450
+ }
451
+
452
+ // Video card hover effect
453
+ document.querySelectorAll('.video-card').forEach(card => {
454
+ card.addEventListener('mouseenter', () => {
455
+ card.querySelector('.thumbnail-overlay').style.opacity = '1';
456
+ });
457
+ card.addEventListener('mouseleave', () => {
458
+ card.querySelector('.thumbnail-overlay').style.opacity = '0';
459
+ });
460
+ });
461
+ </script>
462
+ <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=Spooke/spooqube" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
463
+ </html>