Hugging Face's logo

Spaces:
frucht
/
myworkout
Running

App Files Community
frucht commited on
Commit
78e8942
·
verified ·
1 Parent(s): 06dd68d

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +931 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Myworkout
3
- emoji: 👀
4
- colorFrom: indigo
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: myworkout
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,931 @@
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" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Workout Video Archiver</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-upload-area {
11
+ border: 2px dashed #ccc;
12
+ transition: all 0.3s;
13
+ }
14
+ .video-upload-area:hover {
15
+ border-color: #4f46e5;
16
+ background-color: rgba(79, 70, 229, 0.05);
17
+ }
18
+ .video-upload-area.dragover {
19
+ border-color: #4f46e5;
20
+ background-color: rgba(79, 70, 229, 0.1);
21
+ }
22
+ .video-thumbnail {
23
+ aspect-ratio: 16/9;
24
+ background-color: #f3f4f6;
25
+ transition: transform 0.2s;
26
+ }
27
+ .video-thumbnail:hover {
28
+ transform: scale(1.02);
29
+ }
30
+ .tag {
31
+ transition: all 0.2s;
32
+ }
33
+ .tag:hover {
34
+ transform: translateY(-1px);
35
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
36
+ }
37
+ .dark .video-thumbnail {
38
+ background-color: #1f2937;
39
+ }
40
+ .dark .tag {
41
+ background-color: #374151;
42
+ }
43
+ .dark .video-upload-area {
44
+ border-color: #4b5563;
45
+ }
46
+ .dark .video-upload-area:hover {
47
+ border-color: #818cf8;
48
+ background-color: rgba(129, 140, 248, 0.05);
49
+ }
50
+ .dark .video-upload-area.dragover {
51
+ border-color: #818cf8;
52
+ background-color: rgba(129, 140, 248, 0.1);
53
+ }
54
+ /* Custom scrollbar */
55
+ ::-webkit-scrollbar {
56
+ width: 8px;
57
+ height: 8px;
58
+ }
59
+ ::-webkit-scrollbar-track {
60
+ background: #f1f1f1;
61
+ }
62
+ ::-webkit-scrollbar-thumb {
63
+ background: #888;
64
+ border-radius: 4px;
65
+ }
66
+ ::-webkit-scrollbar-thumb:hover {
67
+ background: #555;
68
+ }
69
+ .dark ::-webkit-scrollbar-track {
70
+ background: #1f2937;
71
+ }
72
+ .dark ::-webkit-scrollbar-thumb {
73
+ background: #4b5563;
74
+ }
75
+ .dark ::-webkit-scrollbar-thumb:hover {
76
+ background: #6b7280;
77
+ }
78
+ </style>
79
+ </head>
80
+ <body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 transition-colors duration-200 min-h-screen">
81
+ <div class="container mx-auto px-4 py-6">
82
+ <!-- Header -->
83
+ <header class="flex justify-between items-center mb-8">
84
+ <div>
85
+ <h1 class="text-3xl font-bold text-indigo-600 dark:text-indigo-400">Workout Video Archiver</h1>
86
+ <p class="text-gray-600 dark:text-gray-400">Organize and share your training videos</p>
87
+ </div>
88
+ <div class="flex items-center space-x-4">
89
+ <button id="theme-toggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600">
90
+ <i class="fas fa-moon dark:hidden"></i>
91
+ <i class="fas fa-sun hidden dark:inline"></i>
92
+ </button>
93
+ <div class="relative">
94
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-10 h-10 rounded-full cursor-pointer">
95
+ <div class="absolute right-0 bottom-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white dark:border-gray-900"></div>
96
+ </div>
97
+ </div>
98
+ </header>
99
+
100
+ <!-- Main Content -->
101
+ <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
102
+ <!-- Sidebar -->
103
+ <aside class="lg:col-span-1 space-y-6">
104
+ <!-- Navigation -->
105
+ <nav class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
106
+ <ul class="space-y-2">
107
+ <li>
108
+ <a href="#" class="flex items-center space-x-3 p-2 rounded-lg bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300">
109
+ <i class="fas fa-home w-5"></i>
110
+ <span>Dashboard</span>
111
+ </a>
112
+ </li>
113
+ <li>
114
+ <a href="#" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
115
+ <i class="fas fa-video w-5"></i>
116
+ <span>My Videos</span>
117
+ </a>
118
+ </li>
119
+ <li>
120
+ <a href="#" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
121
+ <i class="fas fa-tags w-5"></i>
122
+ <span>Tags</span>
123
+ </a>
124
+ </li>
125
+ <li>
126
+ <a href="#" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
127
+ <i class="fas fa-chart-line w-5"></i>
128
+ <span>Analytics</span>
129
+ </a>
130
+ </li>
131
+ <li>
132
+ <a href="#" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
133
+ <i class="fas fa-cog w-5"></i>
134
+ <span>Settings</span>
135
+ </a>
136
+ </li>
137
+ </ul>
138
+ </nav>
139
+
140
+ <!-- Quick Stats -->
141
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
142
+ <h3 class="font-medium mb-3">Quick Stats</h3>
143
+ <div class="space-y-3">
144
+ <div>
145
+ <p class="text-sm text-gray-500 dark:text-gray-400">Total Videos</p>
146
+ <p class="text-xl font-semibold">124</p>
147
+ </div>
148
+ <div>
149
+ <p class="text-sm text-gray-500 dark:text-gray-400">Workouts</p>
150
+ <p class="text-xl font-semibold">18</p>
151
+ </div>
152
+ <div>
153
+ <p class="text-sm text-gray-500 dark:text-gray-400">Tags</p>
154
+ <p class="text-xl font-semibold">32</p>
155
+ </div>
156
+ </div>
157
+ </div>
158
+
159
+ <!-- Recent Tags -->
160
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
161
+ <h3 class="font-medium mb-3">Recent Tags</h3>
162
+ <div class="flex flex-wrap gap-2">
163
+ <span class="tag px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-sm">strength</span>
164
+ <span class="tag px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-sm">hiit</span>
165
+ <span class="tag px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-sm">beginner</span>
166
+ <span class="tag px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-sm">core</span>
167
+ <span class="tag px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-sm">upper body</span>
168
+ <span class="tag px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-sm">yoga</span>
169
+ </div>
170
+ </div>
171
+ </aside>
172
+
173
+ <!-- Main Area -->
174
+ <main class="lg:col-span-3 space-y-6">
175
+ <!-- Upload Section -->
176
+ <section class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
177
+ <div class="flex justify-between items-center mb-4">
178
+ <h2 class="text-xl font-semibold">Upload New Video</h2>
179
+ <div class="flex space-x-2">
180
+ <button id="record-btn" class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg flex items-center space-x-2">
181
+ <i class="fas fa-video"></i>
182
+ <span>Record</span>
183
+ </button>
184
+ <button id="upload-btn" class="px-4 py-2 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-lg flex items-center space-x-2">
185
+ <i class="fas fa-upload"></i>
186
+ <span>Upload</span>
187
+ </button>
188
+ </div>
189
+ </div>
190
+
191
+ <div id="upload-area" class="video-upload-area rounded-lg p-8 text-center cursor-pointer">
192
+ <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-3"></i>
193
+ <p class="font-medium">Drag & drop your video here</p>
194
+ <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">or click to browse files</p>
195
+ <input type="file" id="file-input" accept="video/*" class="hidden">
196
+ </div>
197
+ </section>
198
+
199
+ <!-- Filters -->
200
+ <section class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
201
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-4">
202
+ <h2 class="text-xl font-semibold">My Videos</h2>
203
+ <div class="flex flex-col sm:flex-row gap-3">
204
+ <div class="relative">
205
+ <select class="appearance-none bg-gray-100 dark:bg-gray-700 border-0 rounded-lg pl-4 pr-8 py-2 focus:ring-2 focus:ring-indigo-500 focus:outline-none">
206
+ <option>Sort by Date</option>
207
+ <option>Sort by Name</option>
208
+ <option>Sort by Workout</option>
209
+ </select>
210
+ <i class="fas fa-chevron-down absolute right-3 top-3 text-gray-500 pointer-events-none"></i>
211
+ </div>
212
+ <div class="relative">
213
+ <select class="appearance-none bg-gray-100 dark:bg-gray-700 border-0 rounded-lg pl-4 pr-8 py-2 focus:ring-2 focus:ring-indigo-500 focus:outline-none">
214
+ <option>All Workouts</option>
215
+ <option>Strength Training</option>
216
+ <option>HIIT</option>
217
+ <option>Yoga</option>
218
+ <option>Cardio</option>
219
+ </select>
220
+ <i class="fas fa-chevron-down absolute right-3 top-3 text-gray-500 pointer-events-none"></i>
221
+ </div>
222
+ <div class="relative">
223
+ <input type="text" placeholder="Search videos..." class="bg-gray-100 dark:bg-gray-700 border-0 rounded-lg pl-4 pr-10 py-2 focus:ring-2 focus:ring-indigo-500 focus:outline-none">
224
+ <i class="fas fa-search absolute right-3 top-3 text-gray-500 pointer-events-none"></i>
225
+ </div>
226
+ </div>
227
+ </div>
228
+
229
+ <div class="flex flex-wrap gap-3 mb-4">
230
+ <span class="tag px-3 py-1 bg-indigo-100 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300 rounded-full text-sm flex items-center">
231
+ <span>This Month</span>
232
+ <button class="ml-2 text-indigo-500 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-300">
233
+ <i class="fas fa-times"></i>
234
+ </button>
235
+ </span>
236
+ <span class="tag px-3 py-1 bg-indigo-100 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300 rounded-full text-sm flex items-center">
237
+ <span>Strength</span>
238
+ <button class="ml-2 text-indigo-500 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-300">
239
+ <i class="fas fa-times"></i>
240
+ </button>
241
+ </span>
242
+ <button class="text-sm text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 flex items-center">
243
+ <i class="fas fa-plus mr-1"></i>
244
+ <span>Add Filter</span>
245
+ </button>
246
+ </div>
247
+ </section>
248
+
249
+ <!-- Video Grid -->
250
+ <section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
251
+ <!-- Video Card 1 -->
252
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden hover:shadow-lg transition-shadow">
253
+ <div class="video-thumbnail relative">
254
+ <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Workout Video" class="w-full h-full object-cover">
255
+ <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
256
+ <button class="w-12 h-12 bg-white bg-opacity-80 rounded-full flex items-center justify-center text-indigo-600 hover:bg-opacity-100">
257
+ <i class="fas fa-play"></i>
258
+ </button>
259
+ </div>
260
+ <div class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">
261
+ 4:32
262
+ </div>
263
+ </div>
264
+ <div class="p-4">
265
+ <div class="flex justify-between items-start mb-2">
266
+ <h3 class="font-semibold line-clamp-1">Full Body Strength Workout - Week 1</h3>
267
+ <div class="dropdown relative">
268
+ <button class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">
269
+ <i class="fas fa-ellipsis-v"></i>
270
+ </button>
271
+ <div class="dropdown-menu absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg z-10 hidden">
272
+ <div class="py-1">
273
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Edit</a>
274
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Share</a>
275
+ <a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100 dark:hover:bg-gray-700">Delete</a>
276
+ </div>
277
+ </div>
278
+ </div>
279
+ </div>
280
+ <p class="text-sm text-gray-600 dark:text-gray-400 mb-3 line-clamp-2">Complete full body strength workout focusing on compound movements. Perfect for beginners starting their strength journey.</p>
281
+ <div class="flex flex-wrap gap-2 mb-3">
282
+ <span class="tag px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-xs">strength</span>
283
+ <span class="tag px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-xs">beginner</span>
284
+ <span class="tag px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-xs">full body</span>
285
+ </div>
286
+ <div class="flex justify-between items-center text-xs text-gray-500 dark:text-gray-400">
287
+ <span>2 days ago</span>
288
+ <div class="flex space-x-2">
289
+ <button class="hover:text-indigo-600 dark:hover:text-indigo-400">
290
+ <i class="fas fa-share-alt"></i>
291
+ </button>
292
+ <button class="hover:text-indigo-600 dark:hover:text-indigo-400">
293
+ <i class="fas fa-download"></i>
294
+ </button>
295
+ </div>
296
+ </div>
297
+ </div>
298
+ </div>
299
+
300
+ <!-- Video Card 2 -->
301
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden hover:shadow-lg transition-shadow">
302
+ <div class="video-thumbnail relative">
303
+ <img src="https://images.unsplash.com/photo-1571019614242-c5c5a73d6587?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Workout Video" class="w-full h-full object-cover">
304
+ <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
305
+ <button class="w-12 h-12 bg-white bg-opacity-80 rounded-full flex items-center justify-center text-indigo-600 hover:bg-opacity-100">
306
+ <i class="fas fa-play"></i>
307
+ </button>
308
+ </div>
309
+ <div class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">
310
+ 12:15
311
+ </div>
312
+ </div>
313
+ <div class="p-4">
314
+ <div class="flex justify-between items-start mb-2">
315
+ <h3 class="font-semibold line-clamp-1">Advanced HIIT Circuit - Fat Burning</h3>
316
+ <div class="dropdown relative">
317
+ <button class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">
318
+ <i class="fas fa-ellipsis-v"></i>
319
+ </button>
320
+ <div class="dropdown-menu absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg z-10 hidden">
321
+ <div class="py-1">
322
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Edit</a>
323
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Share</a>
324
+ <a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100 dark:hover:bg-gray-700">Delete</a>
325
+ </div>
326
+ </div>
327
+ </div>
328
+ </div>
329
+ <p class="text-sm text-gray-600 dark:text-gray-400 mb-3 line-clamp-2">High intensity interval training circuit designed to maximize fat burning and improve cardiovascular endurance.</p>
330
+ <div class="flex flex-wrap gap-2 mb-3">
331
+ <span class="tag px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-xs">hiit</span>
332
+ <span class="tag px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-xs">advanced</span>
333
+ <span class="tag px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-xs">cardio</span>
334
+ <span class="tag px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-xs">fat loss</span>
335
+ </div>
336
+ <div class="flex justify-between items-center text-xs text-gray-500 dark:text-gray-400">
337
+ <span>1 week ago</span>
338
+ <div class="flex space-x-2">
339
+ <button class="hover:text-indigo-600 dark:hover:text-indigo-400">
340
+ <i class="fas fa-share-alt"></i>
341
+ </button>
342
+ <button class="hover:text-indigo-600 dark:hover:text-indigo-400">
343
+ <i class="fas fa-download"></i>
344
+ </button>
345
+ </div>
346
+ </div>
347
+ </div>
348
+ </div>
349
+
350
+ <!-- Video Card 3 -->
351
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden hover:shadow-lg transition-shadow">
352
+ <div class="video-thumbnail relative">
353
+ <img src="https://images.unsplash.com/photo-1545205597-3d9d02c29597?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Workout Video" class="w-full h-full object-cover">
354
+ <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
355
+ <button class="w-12 h-12 bg-white bg-opacity-80 rounded-full flex items-center justify-center text-indigo-600 hover:bg-opacity-100">
356
+ <i class="fas fa-play"></i>
357
+ </button>
358
+ </div>
359
+ <div class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">
360
+ 8:45
361
+ </div>
362
+ </div>
363
+ <div class="p-4">
364
+ <div class="flex justify-between items-start mb-2">
365
+ <h3 class="font-semibold line-clamp-1">Morning Yoga Flow - Flexibility Routine</h3>
366
+ <div class="dropdown relative">
367
+ <button class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">
368
+ <i class="fas fa-ellipsis-v"></i>
369
+ </button>
370
+ <div class="dropdown-menu absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg z-10 hidden">
371
+ <div class="py-1">
372
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Edit</a>
373
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Share</a>
374
+ <a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100 dark:hover:bg-gray-700">Delete</a>
375
+ </div>
376
+ </div>
377
+ </div>
378
+ </div>
379
+ <p class="text-sm text-gray-600 dark:text-gray-400 mb-3 line-clamp-2">Gentle yoga flow perfect for mornings to improve flexibility, mobility and start your day with energy.</p>
380
+ <div class="flex flex-wrap gap-2 mb-3">
381
+ <span class="tag px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-xs">yoga</span>
382
+ <span class="tag px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-xs">flexibility</span>
383
+ <span class="tag px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-xs">morning</span>
384
+ </div>
385
+ <div class="flex justify-between items-center text-xs text-gray-500 dark:text-gray-400">
386
+ <span>2 weeks ago</span>
387
+ <div class="flex space-x-2">
388
+ <button class="hover:text-indigo-600 dark:hover:text-indigo-400">
389
+ <i class="fas fa-share-alt"></i>
390
+ </button>
391
+ <button class="hover:text-indigo-600 dark:hover:text-indigo-400">
392
+ <i class="fas fa-download"></i>
393
+ </button>
394
+ </div>
395
+ </div>
396
+ </div>
397
+ </div>
398
+
399
+ <!-- Video Card 4 -->
400
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden hover:shadow-lg transition-shadow">
401
+ <div class="video-thumbnail relative">
402
+ <img src="https://images.unsplash.com/photo-1538805060514-97d9cc17730c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Workout Video" class="w-full h-full object-cover">
403
+ <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
404
+ <button class="w-12 h-12 bg-white bg-opacity-80 rounded-full flex items-center justify-center text-indigo-600 hover:bg-opacity-100">
405
+ <i class="fas fa-play"></i>
406
+ </button>
407
+ </div>
408
+ <div class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">
409
+ 6:22
410
+ </div>
411
+ </div>
412
+ <div class="p-4">
413
+ <div class="flex justify-between items-start mb-2">
414
+ <h3 class="font-semibold line-clamp-1">Core Strengthening - Abdominal Workout</h3>
415
+ <div class="dropdown relative">
416
+ <button class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">
417
+ <i class="fas fa-ellipsis-v"></i>
418
+ </button>
419
+ <div class="dropdown-menu absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg z-10 hidden">
420
+ <div class="py-1">
421
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Edit</a>
422
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Share</a>
423
+ <a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100 dark:hover:bg-gray-700">Delete</a>
424
+ </div>
425
+ </div>
426
+ </div>
427
+ </div>
428
+ <p class="text-sm text-gray-600 dark:text-gray-400 mb-3 line-clamp-2">Targeted core workout to strengthen your abdominal muscles and improve posture.</p>
429
+ <div class="flex flex-wrap gap-2 mb-3">
430
+ <span class="tag px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-xs">core</span>
431
+ <span class="tag px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-xs">abs</span>
432
+ <span class="tag px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-xs">intermediate</span>
433
+ </div>
434
+ <div class="flex justify-between items-center text-xs text-gray-500 dark:text-gray-400">
435
+ <span>3 weeks ago</span>
436
+ <div class="flex space-x-2">
437
+ <button class="hover:text-indigo-600 dark:hover:text-indigo-400">
438
+ <i class="fas fa-share-alt"></i>
439
+ </button>
440
+ <button class="hover:text-indigo-600 dark:hover:text-indigo-400">
441
+ <i class="fas fa-download"></i>
442
+ </button>
443
+ </div>
444
+ </div>
445
+ </div>
446
+ </div>
447
+
448
+ <!-- Video Card 5 -->
449
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden hover:shadow-lg transition-shadow">
450
+ <div class="video-thumbnail relative">
451
+ <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Workout Video" class="w-full h-full object-cover">
452
+ <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
453
+ <button class="w-12 h-12 bg-white bg-opacity-80 rounded-full flex items-center justify-center text-indigo-600 hover:bg-opacity-100">
454
+ <i class="fas fa-play"></i>
455
+ </button>
456
+ </div>
457
+ <div class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">
458
+ 15:10
459
+ </div>
460
+ </div>
461
+ <div class="p-4">
462
+ <div class="flex justify-between items-start mb-2">
463
+ <h3 class="font-semibold line-clamp-1">Upper Body Sculpt - Arms & Shoulders</h3>
464
+ <div class="dropdown relative">
465
+ <button class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">
466
+ <i class="fas fa-ellipsis-v"></i>
467
+ </button>
468
+ <div class="dropdown-menu absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg z-10 hidden">
469
+ <div class="py-1">
470
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Edit</a>
471
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Share</a>
472
+ <a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100 dark:hover:bg-gray-700">Delete</a>
473
+ </div>
474
+ </div>
475
+ </div>
476
+ </div>
477
+ <p class="text-sm text-gray-600 dark:text-gray-400 mb-3 line-clamp-2">Focused upper body workout to sculpt and strengthen your arms, shoulders and back muscles.</p>
478
+ <div class="flex flex-wrap gap-2 mb-3">
479
+ <span class="tag px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-xs">upper body</span>
480
+ <span class="tag px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-xs">arms</span>
481
+ <span class="tag px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-xs">shoulders</span>
482
+ <span class="tag px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-xs">sculpt</span>
483
+ </div>
484
+ <div class="flex justify-between items-center text-xs text-gray-500 dark:text-gray-400">
485
+ <span>1 month ago</span>
486
+ <div class="flex space-x-2">
487
+ <button class="hover:text-indigo-600 dark:hover:text-indigo-400">
488
+ <i class="fas fa-share-alt"></i>
489
+ </button>
490
+ <button class="hover:text-indigo-600 dark:hover:text-indigo-400">
491
+ <i class="fas fa-download"></i>
492
+ </button>
493
+ </div>
494
+ </div>
495
+ </div>
496
+ </div>
497
+
498
+ <!-- Add New Video Card -->
499
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden hover:shadow-lg transition-shadow flex items-center justify-center">
500
+ <button class="w-full h-full p-8 flex flex-col items-center justify-center text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300">
501
+ <i class="fas fa-plus-circle text-4xl mb-3"></i>
502
+ <span class="font-medium">Add New Video</span>
503
+ </button>
504
+ </div>
505
+ </section>
506
+ </main>
507
+ </div>
508
+ </div>
509
+
510
+ <!-- Video Modal -->
511
+ <div id="video-modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
512
+ <div class="bg-white dark:bg-gray-800 rounded-lg w-full max-w-4xl mx-4 relative">
513
+ <button id="close-modal" class="absolute -top-10 right-0 text-white hover:text-gray-300">
514
+ <i class="fas fa-times text-2xl"></i>
515
+ </button>
516
+ <div class="p-4">
517
+ <video id="modal-video" controls class="w-full rounded-lg">
518
+ <source src="" type="video/mp4">
519
+ Your browser does not support the video tag.
520
+ </video>
521
+ </div>
522
+ <div class="p-6">
523
+ <h3 id="modal-title" class="text-xl font-semibold mb-2"></h3>
524
+ <p id="modal-description" class="text-gray-600 dark:text-gray-400 mb-4"></p>
525
+ <div class="flex flex-wrap gap-2 mb-4" id="modal-tags"></div>
526
+ <div class="flex justify-between items-center">
527
+ <div class="text-sm text-gray-500 dark:text-gray-400">
528
+ <span id="modal-date"></span> • <span id="modal-duration"></span>
529
+ </div>
530
+ <div class="flex space-x-3">
531
+ <button class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg flex items-center space-x-2">
532
+ <i class="fab fa-whatsapp"></i>
533
+ <span>WhatsApp</span>
534
+ </button>
535
+ <button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-lg flex items-center space-x-2">
536
+ <i class="fas fa-envelope"></i>
537
+ <span>Email</span>
538
+ </button>
539
+ <button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-lg flex items-center space-x-2">
540
+ <i class="fas fa-link"></i>
541
+ <span>Copy Link</span>
542
+ </button>
543
+ </div>
544
+ </div>
545
+ </div>
546
+ </div>
547
+ </div>
548
+
549
+ <!-- Upload Modal -->
550
+ <div id="upload-modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
551
+ <div class="bg-white dark:bg-gray-800 rounded-lg w-full max-w-2xl mx-4 relative">
552
+ <button id="close-upload-modal" class="absolute -top-10 right-0 text-white hover:text-gray-300">
553
+ <i class="fas fa-times text-2xl"></i>
554
+ </button>
555
+ <div class="p-6">
556
+ <h3 class="text-xl font-semibold mb-4">Upload New Workout Video</h3>
557
+
558
+ <div class="mb-6">
559
+ <label class="block text-sm font-medium mb-2">Video File</label>
560
+ <div class="video-upload-area rounded-lg p-8 text-center cursor-pointer mb-2">
561
+ <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-3"></i>
562
+ <p class="font-medium">Drag & drop your video here</p>
563
+ <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">or click to browse files</p>
564
+ <input type="file" id="modal-file-input" accept="video/*" class="hidden">
565
+ </div>
566
+ <p class="text-xs text-gray-500 dark:text-gray-400">MP4, MOV or AVI. Max 500MB.</p>
567
+ </div>
568
+
569
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
570
+ <div>
571
+ <label for="video-title" class="block text-sm font-medium mb-2">Video Title</label>
572
+ <input type="text" id="video-title" class="w-full bg-gray-100 dark:bg-gray-700 border-0 rounded-lg px-4 py-2 focus:ring-2 focus:ring-indigo-500 focus:outline-none">
573
+ </div>
574
+ <div>
575
+ <label for="workout-name" class="block text-sm font-medium mb-2">Workout Name</label>
576
+ <input type="text" id="workout-name" class="w-full bg-gray-100 dark:bg-gray-700 border-0 rounded-lg px-4 py-2 focus:ring-2 focus:ring-indigo-500 focus:outline-none">
577
+ </div>
578
+ <div>
579
+ <label for="training-name" class="block text-sm font-medium mb-2">Training Program</label>
580
+ <input type="text" id="training-name" class="w-full bg-gray-100 dark:bg-gray-700 border-0 rounded-lg px-4 py-2 focus:ring-2 focus:ring-indigo-500 focus:outline-none">
581
+ </div>
582
+ <div>
583
+ <label for="video-date" class="block text-sm font-medium mb-2">Date</label>
584
+ <input type="date" id="video-date" class="w-full bg-gray-100 dark:bg-gray-700 border-0 rounded-lg px-4 py-2 focus:ring-2 focus:ring-indigo-500 focus:outline-none">
585
+ </div>
586
+ </div>
587
+
588
+ <div class="mb-6">
589
+ <label for="video-description" class="block text-sm font-medium mb-2">Description</label>
590
+ <textarea id="video-description" rows="3" class="w-full bg-gray-100 dark:bg-gray-700 border-0 rounded-lg px-4 py-2 focus:ring-2 focus:ring-indigo-500 focus:outline-none"></textarea>
591
+ </div>
592
+
593
+ <div class="mb-6">
594
+ <label class="block text-sm font-medium mb-2">Tags</label>
595
+ <div class="flex flex-wrap gap-2 mb-2" id="selected-tags">
596
+ <!-- Tags will be added here -->
597
+ </div>
598
+ <div class="flex">
599
+ <input type="text" id="tag-input" placeholder="Add a tag" class="flex-1 bg-gray-100 dark:bg-gray-700 border-0 rounded-l-lg px-4 py-2 focus:ring-2 focus:ring-indigo-500 focus:outline-none">
600
+ <button id="add-tag-btn" class="px-4 bg-indigo-600 text-white rounded-r-lg hover:bg-indigo-700">Add</button>
601
+ </div>
602
+ <div class="flex flex-wrap gap-2 mt-2">
603
+ <span class="tag px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-xs cursor-pointer">strength</span>
604
+ <span class="tag px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-xs cursor-pointer">hiit</span>
605
+ <span class="tag px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-xs cursor-pointer">beginner</span>
606
+ <span class="tag px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-xs cursor-pointer">advanced</span>
607
+ <span class="tag px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-xs cursor-pointer">core</span>
608
+ <span class="tag px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-xs cursor-pointer">upper body</span>
609
+ </div>
610
+ </div>
611
+
612
+ <div class="flex justify-end space-x-3">
613
+ <button id="cancel-upload" class="px-4 py-2 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-lg">
614
+ Cancel
615
+ </button>
616
+ <button id="save-video" class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg flex items-center space-x-2">
617
+ <i class="fas fa-save"></i>
618
+ <span>Save Video</span>
619
+ </button>
620
+ </div>
621
+ </div>
622
+ </div>
623
+ </div>
624
+
625
+ <script>
626
+ // Theme toggle
627
+ const themeToggle = document.getElementById('theme-toggle');
628
+ themeToggle.addEventListener('click', () => {
629
+ document.documentElement.classList.toggle('dark');
630
+ localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
631
+ });
632
+
633
+ // Check for saved theme preference
634
+ if (localStorage.getItem('darkMode') === 'true') {
635
+ document.documentElement.classList.add('dark');
636
+ } else if (localStorage.getItem('darkMode') === 'false') {
637
+ document.documentElement.classList.remove('dark');
638
+ } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
639
+ document.documentElement.classList.add('dark');
640
+ }
641
+
642
+ // Video modal functionality
643
+ const videoModal = document.getElementById('video-modal');
644
+ const closeModal = document.getElementById('close-modal');
645
+ const modalVideo = document.getElementById('modal-video');
646
+ const modalTitle = document.getElementById('modal-title');
647
+ const modalDescription = document.getElementById('modal-description');
648
+ const modalTags = document.getElementById('modal-tags');
649
+ const modalDate = document.getElementById('modal-date');
650
+ const modalDuration = document.getElementById('modal-duration');
651
+
652
+ // Sample data for demonstration
653
+ const videoData = [
654
+ {
655
+ title: "Full Body Strength Workout - Week 1",
656
+ description: "Complete full body strength workout focusing on compound movements. Perfect for beginners starting their strength journey.",
657
+ tags: ["strength", "beginner", "full body"],
658
+ date: "2 days ago",
659
+ duration: "4:32",
660
+ thumbnail: "https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
661
+ videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
662
+ },
663
+ {
664
+ title: "Advanced HIIT Circuit - Fat Burning",
665
+ description: "High intensity interval training circuit designed to maximize fat burning and improve cardiovascular endurance.",
666
+ tags: ["hiit", "advanced", "cardio", "fat loss"],
667
+ date: "1 week ago",
668
+ duration: "12:15",
669
+ thumbnail: "https://images.unsplash.com/photo-1571019614242-c5c5a73d6587?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
670
+ videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
671
+ },
672
+ {
673
+ title: "Morning Yoga Flow - Flexibility Routine",
674
+ description: "Gentle yoga flow perfect for mornings to improve flexibility, mobility and start your day with energy.",
675
+ tags: ["yoga", "flexibility", "morning"],
676
+ date: "2 weeks ago",
677
+ duration: "8:45",
678
+ thumbnail: "https://images.unsplash.com/photo-1545205597-3d9d02c29597?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
679
+ videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
680
+ },
681
+ {
682
+ title: "Core Strengthening - Abdominal Workout",
683
+ description: "Targeted core workout to strengthen your abdominal muscles and improve posture.",
684
+ tags: ["core", "abs", "intermediate"],
685
+ date: "3 weeks ago",
686
+ duration: "6:22",
687
+ thumbnail: "https://images.unsplash.com/photo-1538805060514-97d9cc17730c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
688
+ videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
689
+ },
690
+ {
691
+ title: "Upper Body Sculpt - Arms & Shoulders",
692
+ description: "Focused upper body workout to sculpt and strengthen your arms, shoulders and back muscles.",
693
+ tags: ["upper body", "arms", "shoulders", "sculpt"],
694
+ date: "1 month ago",
695
+ duration: "15:10",
696
+ thumbnail: "https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
697
+ videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
698
+ }
699
+ ];
700
+
701
+ // Open video modal when play button is clicked
702
+ document.querySelectorAll('.video-thumbnail button').forEach((button, index) => {
703
+ button.addEventListener('click', () => {
704
+ const video = videoData[index];
705
+ modalVideo.src = video.videoUrl;
706
+ modalTitle.textContent = video.title;
707
+ modalDescription.textContent = video.description;
708
+ modalDate.textContent = video.date;
709
+ modalDuration.textContent = video.duration;
710
+
711
+ // Clear previous tags
712
+ modalTags.innerHTML = '';
713
+
714
+ // Add new tags
715
+ video.tags.forEach(tag => {
716
+ const tagElement = document.createElement('span');
717
+ tagElement.className = 'tag px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-xs';
718
+ tagElement.textContent = tag;
719
+ modalTags.appendChild(tagElement);
720
+ });
721
+
722
+ videoModal.classList.remove('hidden');
723
+ document.body.style.overflow = 'hidden';
724
+ });
725
+ });
726
+
727
+ // Close video modal
728
+ closeModal.addEventListener('click', () => {
729
+ videoModal.classList.add('hidden');
730
+ modalVideo.pause();
731
+ document.body.style.overflow = 'auto';
732
+ });
733
+
734
+ // Close modal when clicking outside
735
+ videoModal.addEventListener('click', (e) => {
736
+ if (e.target === videoModal) {
737
+ videoModal.classList.add('hidden');
738
+ modalVideo.pause();
739
+ document.body.style.overflow = 'auto';
740
+ }
741
+ });
742
+
743
+ // Upload modal functionality
744
+ const uploadModal = document.getElementById('upload-modal');
745
+ const closeUploadModal = document.getElementById('close-upload-modal');
746
+ const cancelUpload = document.getElementById('cancel-upload');
747
+ const uploadBtn = document.getElementById('upload-btn');
748
+ const recordBtn = document.getElementById('record-btn');
749
+ const uploadArea = document.getElementById('upload-area');
750
+ const fileInput = document.getElementById('file-input');
751
+ const modalFileInput = document.getElementById('modal-file-input');
752
+ const selectedTags = document.getElementById('selected-tags');
753
+ const tagInput = document.getElementById('tag-input');
754
+ const addTagBtn = document.getElementById('add-tag-btn');
755
+ const saveVideoBtn = document.getElementById('save-video');
756
+
757
+ // Open upload modal
758
+ uploadBtn.addEventListener('click', () => {
759
+ uploadModal.classList.remove('hidden');
760
+ document.body.style.overflow = 'hidden';
761
+ });
762
+
763
+ // Open upload modal from record button
764
+ recordBtn.addEventListener('click', () => {
765
+ // In a real app, this would open camera recording
766
+ uploadModal.classList.remove('hidden');
767
+ document.body.style.overflow = 'hidden';
768
+ });
769
+
770
+ // Close upload modal
771
+ closeUploadModal.addEventListener('click', () => {
772
+ uploadModal.classList.add('hidden');
773
+ document.body.style.overflow = 'auto';
774
+ });
775
+
776
+ cancelUpload.addEventListener('click', () => {
777
+ uploadModal.classList.add('hidden');
778
+ document.body.style.overflow = 'auto';
779
+ });
780
+
781
+ // Close modal when clicking outside
782
+ uploadModal.addEventListener('click', (e) => {
783
+ if (e.target === uploadModal) {
784
+ uploadModal.classList.add('hidden');
785
+ document.body.style.overflow = 'auto';
786
+ }
787
+ });
788
+
789
+ // File upload handling
790
+ uploadArea.addEventListener('click', () => {
791
+ fileInput.click();
792
+ });
793
+
794
+ modalFileInput.addEventListener('change', (e) => {
795
+ if (e.target.files.length > 0) {
796
+ const fileName = e.target.files[0].name;
797
+ uploadArea.innerHTML = `
798
+ <i class="fas fa-check-circle text-4xl text-green-500 mb-3"></i>
799
+ <p class="font-medium">${fileName}</p>
800
+ <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Click to change file</p>
801
+ `;
802
+ }
803
+ });
804
+
805
+ // Drag and drop functionality
806
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
807
+ uploadArea.addEventListener(eventName, preventDefaults, false);
808
+ });
809
+
810
+ function preventDefaults(e) {
811
+ e.preventDefault();
812
+ e.stopPropagation();
813
+ }
814
+
815
+ ['dragenter', 'dragover'].forEach(eventName => {
816
+ uploadArea.addEventListener(eventName, highlight, false);
817
+ });
818
+
819
+ ['dragleave', 'drop'].forEach(eventName => {
820
+ uploadArea.addEventListener(eventName, unhighlight, false);
821
+ });
822
+
823
+ function highlight() {
824
+ uploadArea.classList.add('dragover');
825
+ }
826
+
827
+ function unhighlight() {
828
+ uploadArea.classList.remove('dragover');
829
+ }
830
+
831
+ uploadArea.addEventListener('drop', handleDrop, false);
832
+
833
+ function handleDrop(e) {
834
+ const dt = e.dataTransfer;
835
+ const files = dt.files;
836
+ fileInput.files = files;
837
+
838
+ if (files.length > 0) {
839
+ const fileName = files[0].name;
840
+ uploadArea.innerHTML = `
841
+ <i class="fas fa-check-circle text-4xl text-green-500 mb-3"></i>
842
+ <p class="font-medium">${fileName}</p>
843
+ <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Click to change file</p>
844
+ `;
845
+ }
846
+ }
847
+
848
+ // Tag functionality
849
+ addTagBtn.addEventListener('click', () => {
850
+ const tagText = tagInput.value.trim();
851
+ if (tagText) {
852
+ addTag(tagText);
853
+ tagInput.value = '';
854
+ }
855
+ });
856
+
857
+ tagInput.addEventListener('keypress', (e) => {
858
+ if (e.key === 'Enter') {
859
+ const tagText = tagInput.value.trim();
860
+ if (tagText) {
861
+ addTag(tagText);
862
+ tagInput.value = '';
863
+ }
864
+ }
865
+ });
866
+
867
+ function addTag(tagText) {
868
+ const tagElement = document.createElement('span');
869
+ tagElement.className = 'tag px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-xs flex items-center';
870
+ tagElement.innerHTML = `
871
+ <span>${tagText}</span>
872
+ <button class="ml-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">
873
+ <i class="fas fa-times text-xs"></i>
874
+ </button>
875
+ `;
876
+
877
+ const removeBtn = tagElement.querySelector('button');
878
+ removeBtn.addEventListener('click', () => {
879
+ tagElement.remove();
880
+ });
881
+
882
+ selectedTags.appendChild(tagElement);
883
+ }
884
+
885
+ // Add click handler for suggested tags
886
+ document.querySelectorAll('#upload-modal .tag').forEach(tag => {
887
+ tag.addEventListener('click', () => {
888
+ const tagText = tag.textContent;
889
+ addTag(tagText);
890
+ });
891
+ });
892
+
893
+ // Save video
894
+ saveVideoBtn.addEventListener('click', () => {
895
+ // In a real app, this would save the video and metadata
896
+ alert('Video saved successfully!');
897
+ uploadModal.classList.add('hidden');
898
+ document.body.style.overflow = 'auto';
899
+
900
+ // Reset form
901
+ document.getElementById('video-title').value = '';
902
+ document.getElementById('workout-name').value = '';
903
+ document.getElementById('training-name').value = '';
904
+ document.getElementById('video-date').value = '';
905
+ document.getElementById('video-description').value = '';
906
+ selectedTags.innerHTML = '';
907
+ uploadArea.innerHTML = `
908
+ <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-3"></i>
909
+ <p class="font-medium">Drag & drop your video here</p>
910
+ <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">or click to browse files</p>
911
+ `;
912
+ });
913
+
914
+ // Dropdown menus
915
+ document.querySelectorAll('.dropdown button').forEach(button => {
916
+ button.addEventListener('click', (e) => {
917
+ e.stopPropagation();
918
+ const menu = button.nextElementSibling;
919
+ menu.classList.toggle('hidden');
920
+ });
921
+ });
922
+
923
+ // Close dropdown when clicking outside
924
+ document.addEventListener('click', () => {
925
+ document.querySelectorAll('.dropdown-menu').forEach(menu => {
926
+ menu.classList.add('hidden');
927
+ });
928
+ });
929
+ </script>
930
+ <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=frucht/myworkout" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
931
+ </html>
prompts.txt ADDED
File without changes