Hugging Face's logo

Spaces:
44xClub
/
form-guide
Running

App Files Community
44xClub commited on
Commit
7c9d601
·
verified ·
1 Parent(s): b14597f

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +273 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Form Guide
3
- emoji: 🌖
4
- colorFrom: pink
5
- colorTo: green
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: form-guide
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: pink
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,273 @@
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>CLUB44 - Form Guide Vault</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap" rel="stylesheet">
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ body {
12
+ font-family: 'Montserrat', sans-serif;
13
+ background-color: #0a0a0a;
14
+ color: #ffffff;
15
+ max-width: 428px;
16
+ margin: 0 auto;
17
+ position: relative;
18
+ height: 100vh;
19
+ overflow-x: hidden;
20
+ }
21
+ .exercise-card {
22
+ transition: all 0.3s ease;
23
+ }
24
+ .exercise-card:hover {
25
+ transform: translateY(-5px);
26
+ }
27
+ .filter-chip {
28
+ transition: all 0.2s ease;
29
+ }
30
+ .filter-chip.active {
31
+ background-color: #44ffaa;
32
+ color: #0a0a0a;
33
+ }
34
+ .video-container {
35
+ aspect-ratio: 16/9;
36
+ }
37
+ .nav-item.active {
38
+ color: #44ffaa;
39
+ }
40
+ ::-webkit-scrollbar {
41
+ width: 0;
42
+ background: transparent;
43
+ }
44
+ </style>
45
+ </head>
46
+ <body class="relative pb-20">
47
+ <!-- Header -->
48
+ <header class="sticky top-0 z-10 bg-black bg-opacity-90 backdrop-blur-sm px-6 py-4 border-b border-gray-800">
49
+ <div class="flex justify-between items-center">
50
+ <div class="flex items-center space-x-2">
51
+ <div class="w-8 h-8 rounded-full bg-gradient-to-br from-[#44ffaa] to-[#44aaff] flex items-center justify-center">
52
+ <span class="text-black font-bold text-xs">44</span>
53
+ </div>
54
+ <h1 class="text-xl font-bold">CLUB44</h1>
55
+ </div>
56
+ <div class="flex items-center space-x-4">
57
+ <button class="text-gray-400 hover:text-white">
58
+ <i class="fas fa-search"></i>
59
+ </button>
60
+ <button class="text-gray-400 hover:text-white">
61
+ <i class="fas fa-ellipsis-vertical"></i>
62
+ </button>
63
+ </div>
64
+ </div>
65
+ </header>
66
+
67
+ <!-- Main Content -->
68
+ <main class="px-6 py-4">
69
+ <!-- Page Title and Filter -->
70
+ <div class="mb-6">
71
+ <div class="flex justify-between items-center mb-4">
72
+ <h2 class="text-2xl font-bold">Form Guide Vault</h2>
73
+ <button class="text-[#44ffaa] text-sm font-bold">VIEW ALL</button>
74
+ </div>
75
+
76
+ <!-- Body Part Filter Chips -->
77
+ <div class="flex space-x-2 overflow-x-auto pb-2 scroll-smooth">
78
+ <button class="filter-chip active px-4 py-2 rounded-full bg-gray-800 text-sm font-bold whitespace-nowrap">All</button>
79
+ <button class="filter-chip px-4 py-2 rounded-full bg-gray-800 text-sm font-bold whitespace-nowrap">Upper Body</button>
80
+ <button class="filter-chip px-4 py-2 rounded-full bg-gray-800 text-sm font-bold whitespace-nowrap">Lower Body</button>
81
+ <button class="filter-chip px-4 py-2 rounded-full bg-gray-800 text-sm font-bold whitespace-nowrap">Core</button>
82
+ <button class="filter-chip px-4 py-2 rounded-full bg-gray-800 text-sm font-bold whitespace-nowrap">Push</button>
83
+ <button class="filter-chip px-4 py-2 rounded-full bg-gray-800 text-sm font-bold whitespace-nowrap">Pull</button>
84
+ <button class="filter-chip px-4 py-2 rounded-full bg-gray-800 text-sm font-bold whitespace-nowrap">Compound</button>
85
+ </div>
86
+ </div>
87
+
88
+ <!-- Exercise Grid -->
89
+ <div class="grid grid-cols-2 gap-4">
90
+ <!-- Exercise Card 1 -->
91
+ <div class="exercise-card bg-gray-900 rounded-xl overflow-hidden border border-gray-800 cursor-pointer">
92
+ <div class="video-container relative bg-gray-800">
93
+ <div class="absolute inset-0 flex items-center justify-center">
94
+ <i class="fas fa-play text-3xl text-[#44ffaa]"></i>
95
+ </div>
96
+ <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"
97
+ alt="Bench Press" class="w-full h-full object-cover opacity-70">
98
+ </div>
99
+ <div class="p-3">
100
+ <h3 class="font-bold text-sm mb-1">Bench Press</h3>
101
+ <div class="flex items-center text-xs text-gray-400">
102
+ <span class="mr-2">Chest</span>
103
+ <i class="fas fa-circle text-[6px] mr-2"></i>
104
+ <span>Push</span>
105
+ </div>
106
+ </div>
107
+ </div>
108
+
109
+ <!-- Exercise Card 2 -->
110
+ <div class="exercise-card bg-gray-900 rounded-xl overflow-hidden border border-gray-800 cursor-pointer">
111
+ <div class="video-container relative bg-gray-800">
112
+ <div class="absolute inset-0 flex items-center justify-center">
113
+ <i class="fas fa-play text-3xl text-[#44ffaa]"></i>
114
+ </div>
115
+ <img src="https://images.unsplash.com/photo-1532029837206-abbe2b7620e3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
116
+ alt="Deadlift" class="w-full h-full object-cover opacity-70">
117
+ </div>
118
+ <div class="p-3">
119
+ <h3 class="font-bold text-sm mb-1">Deadlift</h3>
120
+ <div class="flex items-center text-xs text-gray-400">
121
+ <span class="mr-2">Full Body</span>
122
+ <i class="fas fa-circle text-[6px] mr-2"></i>
123
+ <span>Pull</span>
124
+ </div>
125
+ </div>
126
+ </div>
127
+
128
+ <!-- Exercise Card 3 -->
129
+ <div class="exercise-card bg-gray-900 rounded-xl overflow-hidden border border-gray-800 cursor-pointer">
130
+ <div class="video-container relative bg-gray-800">
131
+ <div class="absolute inset-0 flex items-center justify-center">
132
+ <i class="fas fa-play text-3xl text-[#44ffaa]"></i>
133
+ </div>
134
+ <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"
135
+ alt="Squat" class="w-full h-full object-cover opacity-70">
136
+ </div>
137
+ <div class="p-3">
138
+ <h3 class="font-bold text-sm mb-1">Squat</h3>
139
+ <div class="flex items-center text-xs text-gray-400">
140
+ <span class="mr-2">Legs</span>
141
+ <i class="fas fa-circle text-[6px] mr-2"></i>
142
+ <span>Compound</span>
143
+ </div>
144
+ </div>
145
+ </div>
146
+
147
+ <!-- Exercise Card 4 -->
148
+ <div class="exercise-card bg-gray-900 rounded-xl overflow-hidden border border-gray-800 cursor-pointer">
149
+ <div class="video-container relative bg-gray-800">
150
+ <div class="absolute inset-0 flex items-center justify-center">
151
+ <i class="fas fa-play text-3xl text-[#44ffaa]"></i>
152
+ </div>
153
+ <img src="https://images.unsplash.com/photo-1532029837206-abbe2b7620e3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
154
+ alt="Pull-up" class="w-full h-full object-cover opacity-70">
155
+ </div>
156
+ <div class="p-3">
157
+ <h3 class="font-bold text-sm mb-1">Pull-up</h3>
158
+ <div class="flex items-center text-xs text-gray-400">
159
+ <span class="mr-2">Back</span>
160
+ <i class="fas fa-circle text-[6px] mr-2"></i>
161
+ <span>Pull</span>
162
+ </div>
163
+ </div>
164
+ </div>
165
+ </div>
166
+
167
+ <!-- Featured Exercise -->
168
+ <div class="mt-8">
169
+ <h3 class="text-lg font-bold mb-4">Featured Form Guide</h3>
170
+ <div class="bg-gray-900 rounded-xl overflow-hidden border border-gray-800">
171
+ <div class="video-container relative bg-gray-800">
172
+ <div class="absolute inset-0 flex items-center justify-center">
173
+ <i class="fas fa-play text-4xl text-[#44ffaa]"></i>
174
+ </div>
175
+ <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"
176
+ alt="Overhead Press" class="w-full h-full object-cover opacity-70">
177
+ </div>
178
+ <div class="p-4">
179
+ <div class="flex justify-between items-start mb-3">
180
+ <div>
181
+ <h3 class="font-bold text-lg mb-1">Overhead Press</h3>
182
+ <div class="flex items-center text-sm text-gray-400">
183
+ <span class="mr-2">Shoulders</span>
184
+ <i class="fas fa-circle text-[6px] mr-2"></i>
185
+ <span>Push</span>
186
+ </div>
187
+ </div>
188
+ <button class="text-[#44ffaa]">
189
+ <i class="fas fa-bookmark text-xl"></i>
190
+ </button>
191
+ </div>
192
+
193
+ <div class="mb-4">
194
+ <div class="flex items-center justify-between mb-2">
195
+ <span class="text-sm font-bold">Form Cues</span>
196
+ <span class="text-xs text-gray-400">3 steps</span>
197
+ </div>
198
+ <div class="space-y-2">
199
+ <div class="flex items-start">
200
+ <div class="w-6 h-6 rounded-full bg-[#44ffaa] flex items-center justify-center mr-2 mt-0.5 flex-shrink-0">
201
+ <span class="text-black font-bold text-xs">1</span>
202
+ </div>
203
+ <p class="text-sm">Grip the bar slightly wider than shoulder width</p>
204
+ </div>
205
+ <div class="flex items-start">
206
+ <div class="w-6 h-6 rounded-full bg-[#44ffaa] flex items-center justify-center mr-2 mt-0.5 flex-shrink-0">
207
+ <span class="text-black font-bold text-xs">2</span>
208
+ </div>
209
+ <p class="text-sm">Keep core tight and glutes squeezed</p>
210
+ </div>
211
+ <div class="flex items-start">
212
+ <div class="w-6 h-6 rounded-full bg-[#44ffaa] flex items-center justify-center mr-2 mt-0.5 flex-shrink-0">
213
+ <span class="text-black font-bold text-xs">3</span>
214
+ </div>
215
+ <p class="text-sm">Press straight up, don't lean back</p>
216
+ </div>
217
+ </div>
218
+ </div>
219
+
220
+ <button class="w-full py-3 bg-[#44ffaa] bg-opacity-10 border border-[#44ffaa] rounded-lg text-[#44ffaa] font-bold text-sm flex items-center justify-center">
221
+ <i class="fas fa-play mr-2"></i> Watch Tutorial
222
+ </button>
223
+ </div>
224
+ </div>
225
+ </div>
226
+ </main>
227
+
228
+ <!-- Bottom Navigation -->
229
+ <nav class="fixed bottom-0 left-0 right-0 bg-black bg-opacity-90 backdrop-blur-sm border-t border-gray-800 flex justify-around py-3 px-4">
230
+ <a href="#" class="nav-item flex flex-col items-center text-gray-400 active">
231
+ <i class="fas fa-home text-xl mb-1"></i>
232
+ <span class="text-xs">Dashboard</span>
233
+ </a>
234
+ <a href="#" class="nav-item flex flex-col items-center text-gray-400">
235
+ <i class="fas fa-chart-line text-xl mb-1"></i>
236
+ <span class="text-xs">Logs</span>
237
+ </a>
238
+ <a href="#" class="nav-item flex flex-col items-center text-[#44ffaa]">
239
+ <i class="fas fa-dumbbell text-xl mb-1"></i>
240
+ <span class="text-xs">Vault</span>
241
+ </a>
242
+ <a href="#" class="nav-item flex flex-col items-center text-gray-400">
243
+ <i class="fas fa-book text-xl mb-1"></i>
244
+ <span class="text-xs">Journal</span>
245
+ </a>
246
+ <a href="#" class="nav-item flex flex-col items-center text-gray-400">
247
+ <i class="fas fa-user text-xl mb-1"></i>
248
+ <span class="text-xs">Profile</span>
249
+ </a>
250
+ </nav>
251
+
252
+ <script>
253
+ // Filter chip interaction
254
+ const filterChips = document.querySelectorAll('.filter-chip');
255
+ filterChips.forEach(chip => {
256
+ chip.addEventListener('click', () => {
257
+ filterChips.forEach(c => c.classList.remove('active'));
258
+ chip.classList.add('active');
259
+ // Here you would filter the exercises based on the selected chip
260
+ });
261
+ });
262
+
263
+ // Exercise card interaction
264
+ const exerciseCards = document.querySelectorAll('.exercise-card');
265
+ exerciseCards.forEach(card => {
266
+ card.addEventListener('click', () => {
267
+ // Here you would navigate to the exercise detail page
268
+ console.log('Navigating to exercise detail');
269
+ });
270
+ });
271
+ </script>
272
+ <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=44xClub/form-guide" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
273
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Design a sleek, modern mobile app interface for a fitness and lifestyle brand called CLUB44, targeting 18–30-year-old men focused on self-discipline, growth, fitness, and routine. The app should use a dark color theme with Montserrat Bold font, and have a clean, minimal Apple-like design aesthetic. ⚙️ App Platform: iOS and Android 🎨 Theme: Dark mode, minimalist, sharp UI 📱 Screen Size: Standard mobile screens (iPhone 14 / Pixel 7) 🧭 Navigation: Bottom nav bar with icons for: Dashboard, Logs, Vault, Journal, Profile Design the following key screens with interactive elements and modern UX: Form Guide Vault Similar to Workout Vault but for exercises Embedded video + written form cues Filter by body part or type