Hugging Face's logo

Spaces:
Aus-ten
/
fitmaster-pro
Running

App Files Community
Aus-ten commited on
Commit
e5ee185
·
verified ·
1 Parent(s): a5b7d6e

create a fitness app that has all the following, teaches how to master calisthenic skills, tracks calories, provides all types of workouts for both home and gym for alll types of muscles even the small muscles nobody trains, has isometrics and plyometrics, can be used to track jogging, helps people meet they physique goals, an app that has all types of fitness - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +725 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Fitmaster Pro
3
- emoji: ⚡
4
- colorFrom: indigo
5
- colorTo: indigo
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: fitmaster-pro
3
+ emoji: 🐳
4
+ colorFrom: gray
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,725 @@
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>FitMaster Pro - Ultimate Fitness Companion</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 CSS for animations and special effects */
11
+ @keyframes fadeIn {
12
+ from { opacity: 0; transform: translateY(20px); }
13
+ to { opacity: 1; transform: translateY(0); }
14
+ }
15
+
16
+ .fade-in {
17
+ animation: fadeIn 0.8s ease-out forwards;
18
+ }
19
+
20
+ .progress-ring__circle {
21
+ transition: stroke-dashoffset 0.5s;
22
+ transform: rotate(-90deg);
23
+ transform-origin: 50% 50%;
24
+ }
25
+
26
+ .exercise-card:hover {
27
+ transform: translateY(-5px);
28
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
29
+ }
30
+
31
+ .parallax {
32
+ background-attachment: fixed;
33
+ background-position: center;
34
+ background-repeat: no-repeat;
35
+ background-size: cover;
36
+ }
37
+
38
+ .gradient-text {
39
+ background: linear-gradient(90deg, #3b82f6, #10b981, #ef4444);
40
+ -webkit-background-clip: text;
41
+ background-clip: text;
42
+ color: transparent;
43
+ }
44
+ </style>
45
+ </head>
46
+ <body class="bg-gray-50 font-sans">
47
+ <!-- Navigation -->
48
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
49
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
50
+ <div class="flex justify-between h-16">
51
+ <div class="flex items-center">
52
+ <div class="flex-shrink-0 flex items-center">
53
+ <i class="fas fa-dumbbell text-blue-500 text-2xl mr-2"></i>
54
+ <span class="text-xl font-bold text-gray-900">FitMaster <span class="text-blue-500">Pro</span></span>
55
+ </div>
56
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
57
+ <a href="#home" class="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
58
+ <a href="#features" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Features</a>
59
+ <a href="#workouts" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Workouts</a>
60
+ <a href="#tracking" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Tracking</a>
61
+ <a href="#community" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Community</a>
62
+ </div>
63
+ </div>
64
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
65
+ <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">Sign In</button>
66
+ </div>
67
+ <div class="-mr-2 flex items-center sm:hidden">
68
+ <button id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
69
+ <span class="sr-only">Open main menu</span>
70
+ <i class="fas fa-bars"></i>
71
+ </button>
72
+ </div>
73
+ </div>
74
+ </div>
75
+
76
+ <!-- Mobile menu -->
77
+ <div id="mobile-menu" class="hidden sm:hidden">
78
+ <div class="pt-2 pb-3 space-y-1">
79
+ <a href="#home" class="bg-blue-50 border-blue-500 text-blue-500 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a>
80
+ <a href="#features" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Features</a>
81
+ <a href="#workouts" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Workouts</a>
82
+ <a href="#tracking" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Tracking</a>
83
+ <a href="#community" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Community</a>
84
+ <div class="mt-4 px-4">
85
+ <button class="w-full bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-base font-medium transition duration-300">Sign In</button>
86
+ </div>
87
+ </div>
88
+ </div>
89
+ </nav>
90
+
91
+ <!-- Hero Section -->
92
+ <section id="home" class="parallax bg-gradient-to-r from-blue-900 to-purple-900 text-white py-20">
93
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
94
+ <div class="md:flex md:items-center md:justify-between">
95
+ <div class="md:w-1/2 fade-in">
96
+ <h1 class="text-4xl md:text-5xl font-extrabold mb-6">
97
+ <span class="gradient-text">Transform Your Body</span> <br>
98
+ Master Your Fitness
99
+ </h1>
100
+ <p class="text-lg text-gray-300 mb-8">
101
+ The all-in-one fitness app that helps you achieve any physique goal, master calisthenics, track nutrition, and connect with a supportive community.
102
+ </p>
103
+ <div class="flex flex-col sm:flex-row gap-4">
104
+ <button class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg text-lg font-semibold transition duration-300 transform hover:scale-105">
105
+ Start Free Trial
106
+ </button>
107
+ <button class="bg-transparent border-2 border-white hover:bg-white hover:text-gray-900 text-white px-6 py-3 rounded-lg text-lg font-semibold transition duration-300 transform hover:scale-105">
108
+ Explore Features
109
+ </button>
110
+ </div>
111
+ </div>
112
+ <div class="md:w-1/2 mt-10 md:mt-0 flex justify-center fade-in" style="animation-delay: 0.3s;">
113
+ <div class="relative w-full max-w-md">
114
+ <div class="absolute -inset-4 bg-blue-500 rounded-xl opacity-20 blur"></div>
115
+ <div class="relative bg-white/10 backdrop-blur-md rounded-xl p-2 overflow-hidden">
116
+ <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
117
+ alt="Fitness App Dashboard"
118
+ class="rounded-lg shadow-2xl border border-white/20">
119
+ </div>
120
+ </div>
121
+ </div>
122
+ </div>
123
+ </div>
124
+ </section>
125
+
126
+ <!-- Features Section -->
127
+ <section id="features" class="py-20 bg-white">
128
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
129
+ <div class="text-center mb-16 fade-in">
130
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
131
+ <span class="gradient-text">Comprehensive</span> Fitness Features
132
+ </h2>
133
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
134
+ Everything you need to transform your body and master your fitness journey
135
+ </p>
136
+ </div>
137
+
138
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
139
+ <!-- Feature 1 -->
140
+ <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-xl transition duration-300 fade-in" style="animation-delay: 0.1s;">
141
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white mb-4">
142
+ <i class="fas fa-fire-alt text-xl"></i>
143
+ </div>
144
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Calisthenics Mastery</h3>
145
+ <p class="text-gray-500">
146
+ Step-by-step progressions to master skills like handstands, muscle-ups, planches, and more. Track your progress with our skill tree system.
147
+ </p>
148
+ </div>
149
+
150
+ <!-- Feature 2 -->
151
+ <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-xl transition duration-300 fade-in" style="animation-delay: 0.2s;">
152
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white mb-4">
153
+ <i class="fas fa-utensils text-xl"></i>
154
+ </div>
155
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Nutrition Tracking</h3>
156
+ <p class="text-gray-500">
157
+ Comprehensive calorie and macro tracking with a database of over 2 million foods. Set goals and get personalized recommendations.
158
+ </p>
159
+ </div>
160
+
161
+ <!-- Feature 3 -->
162
+ <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-xl transition duration-300 fade-in" style="animation-delay: 0.3s;">
163
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white mb-4">
164
+ <i class="fas fa-dumbbell text-xl"></i>
165
+ </div>
166
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Workout Library</h3>
167
+ <p class="text-gray-500">
168
+ Thousands of workouts for all muscle groups, including specialized routines for often-neglected muscles. Home and gym options available.
169
+ </p>
170
+ </div>
171
+
172
+ <!-- Feature 4 -->
173
+ <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-xl transition duration-300 fade-in" style="animation-delay: 0.4s;">
174
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-red-500 text-white mb-4">
175
+ <i class="fas fa-running text-xl"></i>
176
+ </div>
177
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Running & Cardio</h3>
178
+ <p class="text-gray-500">
179
+ GPS tracking for runs, interval training programs, and cardio workouts tailored to your fitness level and goals.
180
+ </p>
181
+ </div>
182
+
183
+ <!-- Feature 5 -->
184
+ <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-xl transition duration-300 fade-in" style="animation-delay: 0.5s;">
185
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-yellow-500 text-white mb-4">
186
+ <i class="fas fa-chart-line text-xl"></i>
187
+ </div>
188
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Progress Tracking</h3>
189
+ <p class="text-gray-500">
190
+ Detailed analytics on your strength, endurance, and physique changes. Visualize your transformation with before/after comparisons.
191
+ </p>
192
+ </div>
193
+
194
+ <!-- Feature 6 -->
195
+ <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-xl transition duration-300 fade-in" style="animation-delay: 0.6s;">
196
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
197
+ <i class="fas fa-users text-xl"></i>
198
+ </div>
199
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Community Support</h3>
200
+ <p class="text-gray-500">
201
+ Connect with like-minded fitness enthusiasts, share progress, get feedback, and participate in challenges.
202
+ </p>
203
+ </div>
204
+ </div>
205
+ </div>
206
+ </section>
207
+
208
+ <!-- Workouts Section -->
209
+ <section id="workouts" class="py-20 bg-gray-50">
210
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
211
+ <div class="text-center mb-16 fade-in">
212
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
213
+ <span class="gradient-text">Specialized</span> Workout Programs
214
+ </h2>
215
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
216
+ From beginner to advanced, we have programs for every fitness level and goal
217
+ </p>
218
+ </div>
219
+
220
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
221
+ <!-- Workout Filter -->
222
+ <div class="md:col-span-2 lg:col-span-3">
223
+ <div class="flex flex-wrap justify-center gap-4 mb-8">
224
+ <button class="workout-filter-btn active px-4 py-2 rounded-full bg-blue-500 text-white" data-filter="all">All</button>
225
+ <button class="workout-filter-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300" data-filter="calisthenics">Calisthenics</button>
226
+ <button class="workout-filter-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300" data-filter="gym">Gym</button>
227
+ <button class="workout-filter-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300" data-filter="home">Home</button>
228
+ <button class="workout-filter-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300" data-filter="isometric">Isometric</button>
229
+ <button class="workout-filter-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300" data-filter="plyometric">Plyometric</button>
230
+ <button class="workout-filter-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300" data-filter="specialized">Specialized</button>
231
+ </div>
232
+ </div>
233
+
234
+ <!-- Workout Cards -->
235
+ <div class="workout-card calisthenics home fade-in exercise-card bg-white p-6 rounded-xl shadow-md transition duration-300">
236
+ <div class="flex items-center justify-between mb-4">
237
+ <span class="px-3 py-1 rounded-full text-xs font-semibold bg-blue-100 text-blue-800">Calisthenics</span>
238
+ <span class="px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-800">Home</span>
239
+ </div>
240
+ <h3 class="text-xl font-bold text-gray-900 mb-2">Handstand Progression</h3>
241
+ <p class="text-gray-600 mb-4">Master the handstand with our 8-level progression system, from wall holds to freestanding.</p>
242
+ <div class="flex items-center justify-between">
243
+ <span class="text-sm text-gray-500"><i class="fas fa-clock mr-1"></i> 4 weeks</span>
244
+ <button class="text-blue-500 hover:text-blue-700 font-medium">View Program <i class="fas fa-arrow-right ml-1"></i></button>
245
+ </div>
246
+ </div>
247
+
248
+ <div class="workout-card gym fade-in exercise-card bg-white p-6 rounded-xl shadow-md transition duration-300">
249
+ <div class="flex items-center justify-between mb-4">
250
+ <span class="px-3 py-1 rounded-full text-xs font-semibold bg-purple-100 text-purple-800">Gym</span>
251
+ <span class="px-3 py-1 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-800">Strength</span>
252
+ </div>
253
+ <h3 class="text-xl font-bold text-gray-900 mb-2">Complete Muscle Hypertrophy</h3>
254
+ <p class="text-gray-600 mb-4">Target all muscle groups including often-neglected muscles for balanced development.</p>
255
+ <div class="flex items-center justify-between">
256
+ <span class="text-sm text-gray-500"><i class="fas fa-clock mr-1"></i> 12 weeks</span>
257
+ <button class="text-blue-500 hover:text-blue-700 font-medium">View Program <i class="fas fa-arrow-right ml-1"></i></button>
258
+ </div>
259
+ </div>
260
+
261
+ <div class="workout-card isometric home fade-in exercise-card bg-white p-6 rounded-xl shadow-md transition duration-300">
262
+ <div class="flex items-center justify-between mb-4">
263
+ <span class="px-3 py-1 rounded-full text-xs font-semibold bg-red-100 text-red-800">Isometric</span>
264
+ <span class="px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-800">Home</span>
265
+ </div>
266
+ <h3 class="text-xl font-bold text-gray-900 mb-2">Static Strength Builder</h3>
267
+ <p class="text-gray-600 mb-4">Develop incredible strength through static holds and position training.</p>
268
+ <div class="flex items-center justify-between">
269
+ <span class="text-sm text-gray-500"><i class="fas fa-clock mr-1"></i> 6 weeks</span>
270
+ <button class="text-blue-500 hover:text-blue-700 font-medium">View Program <i class="fas fa-arrow-right ml-1"></i></button>
271
+ </div>
272
+ </div>
273
+
274
+ <div class="workout-card plyometric fade-in exercise-card bg-white p-6 rounded-xl shadow-md transition duration-300">
275
+ <div class="flex items-center justify-between mb-4">
276
+ <span class="px-3 py-1 rounded-full text-xs font-semibold bg-orange-100 text-orange-800">Plyometric</span>
277
+ <span class="px-3 py-1 rounded-full text-xs font-semibold bg-indigo-100 text-indigo-800">Explosiveness</span>
278
+ </div>
279
+ <h3 class="text-xl font-bold text-gray-900 mb-2">Jump Training System</h3>
280
+ <p class="text-gray-600 mb-4">Increase your vertical jump and explosive power with science-backed plyometrics.</p>
281
+ <div class="flex items-center justify-between">
282
+ <span class="text-sm text-gray-500"><i class="fas fa-clock mr-1"></i> 8 weeks</span>
283
+ <button class="text-blue-500 hover:text-blue-700 font-medium">View Program <i class="fas fa-arrow-right ml-1"></i></button>
284
+ </div>
285
+ </div>
286
+
287
+ <div class="workout-card specialized fade-in exercise-card bg-white p-6 rounded-xl shadow-md transition duration-300">
288
+ <div class="flex items-center justify-between mb-4">
289
+ <span class="px-3 py-1 rounded-full text-xs font-semibold bg-pink-100 text-pink-800">Specialized</span>
290
+ <span class="px-3 py-1 rounded-full text-xs font-semibold bg-teal-100 text-teal-800">Rehab</span>
291
+ </div>
292
+ <h3 class="text-xl font-bold text-gray-900 mb-2">Rotator Cuff Strengthening</h3>
293
+ <p class="text-gray-600 mb-4">Target often-neglected shoulder stabilizers for injury prevention and better performance.</p>
294
+ <div class="flex items-center justify-between">
295
+ <span class="text-sm text-gray-500"><i class="fas fa-clock mr-1"></i> 4 weeks</span>
296
+ <button class="text-blue-500 hover:text-blue-700 font-medium">View Program <i class="fas fa-arrow-right ml-1"></i></button>
297
+ </div>
298
+ </div>
299
+
300
+ <div class="workout-card calisthenics home fade-in exercise-card bg-white p-6 rounded-xl shadow-md transition duration-300">
301
+ <div class="flex items-center justify-between mb-4">
302
+ <span class="px-3 py-1 rounded-full text-xs font-semibold bg-blue-100 text-blue-800">Calisthenics</span>
303
+ <span class="px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-800">Home</span>
304
+ </div>
305
+ <h3 class="text-xl font-bold text-gray-900 mb-2">Planche Progression</h3>
306
+ <p class="text-gray-600 mb-4">From tuck planche to full planche with our systematic approach.</p>
307
+ <div class="flex items-center justify-between">
308
+ <span class="text-sm text-gray-500"><i class="fas fa-clock mr-1"></i> 12-24 weeks</span>
309
+ <button class="text-blue-500 hover:text-blue-700 font-medium">View Program <i class="fas fa-arrow-right ml-1"></i></button>
310
+ </div>
311
+ </div>
312
+ </div>
313
+
314
+ <div class="text-center mt-12 fade-in">
315
+ <button class="bg-blue-500 hover:bg-blue-600 text-white px-8 py-3 rounded-lg text-lg font-semibold transition duration-300 transform hover:scale-105">
316
+ Browse All Workouts
317
+ </button>
318
+ </div>
319
+ </div>
320
+ </section>
321
+
322
+ <!-- Tracking Section -->
323
+ <section id="tracking" class="py-20 bg-white">
324
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
325
+ <div class="text-center mb-16 fade-in">
326
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
327
+ <span class="gradient-text">Comprehensive</span> Tracking
328
+ </h2>
329
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
330
+ Monitor every aspect of your fitness journey with our advanced tracking tools
331
+ </p>
332
+ </div>
333
+
334
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
335
+ <div class="fade-in">
336
+ <h3 class="text-2xl font-bold text-gray-900 mb-4">Nutrition Tracking</h3>
337
+ <p class="text-gray-600 mb-6">
338
+ Log your meals with our extensive food database, set macro goals, and get personalized recommendations based on your physique goals.
339
+ </p>
340
+
341
+ <div class="bg-gray-50 p-6 rounded-xl shadow-inner">
342
+ <div class="flex justify-between items-center mb-6">
343
+ <div>
344
+ <h4 class="font-semibold text-gray-900">Daily Nutrition</h4>
345
+ <p class="text-sm text-gray-500">Today's intake</p>
346
+ </div>
347
+ <span class="text-sm font-medium text-blue-500">2,450 / 2,800 kcal</span>
348
+ </div>
349
+
350
+ <div class="space-y-4">
351
+ <div>
352
+ <div class="flex justify-between mb-1">
353
+ <span class="text-sm font-medium text-gray-700">Protein</span>
354
+ <span class="text-sm font-medium text-gray-700">145g / 180g</span>
355
+ </div>
356
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
357
+ <div class="bg-blue-500 h-2.5 rounded-full" style="width: 80%"></div>
358
+ </div>
359
+ </div>
360
+
361
+ <div>
362
+ <div class="flex justify-between mb-1">
363
+ <span class="text-sm font-medium text-gray-700">Carbs</span>
364
+ <span class="text-sm font-medium text-gray-700">275g / 325g</span>
365
+ </div>
366
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
367
+ <div class="bg-green-500 h-2.5 rounded-full" style="width: 85%"></div>
368
+ </div>
369
+ </div>
370
+
371
+ <div>
372
+ <div class="flex justify-between mb-1">
373
+ <span class="text-sm font-medium text-gray-700">Fats</span>
374
+ <span class="text-sm font-medium text-gray-700">65g / 80g</span>
375
+ </div>
376
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
377
+ <div class="bg-yellow-500 h-2.5 rounded-full" style="width: 81%"></div>
378
+ </div>
379
+ </div>
380
+ </div>
381
+
382
+ <button class="mt-6 w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-lg font-medium transition duration-300">
383
+ Log Meal
384
+ </button>
385
+ </div>
386
+ </div>
387
+
388
+ <div class="fade-in" style="animation-delay: 0.2s;">
389
+ <h3 class="text-2xl font-bold text-gray-900 mb-4">Workout & Activity Tracking</h3>
390
+ <p class="text-gray-600 mb-6">
391
+ Track your workouts, runs, and daily activity. Monitor progress with detailed analytics and visualizations.
392
+ </p>
393
+
394
+ <div class="bg-gray-50 p-6 rounded-xl shadow-inner">
395
+ <div class="grid grid-cols-3 gap-4 mb-6">
396
+ <div class="bg-white p-4 rounded-lg shadow text-center">
397
+ <div class="text-2xl font-bold text-blue-500">5.2</div>
398
+ <div class="text-xs text-gray-500">KM RUN</div>
399
+ </div>
400
+ <div class="bg-white p-4 rounded-lg shadow text-center">
401
+ <div class="text-2xl font-bold text-green-500">1,248</div>
402
+ <div class="text-xs text-gray-500">CALORIES</div>
403
+ </div>
404
+ <div class="bg-white p-4 rounded-lg shadow text-center">
405
+ <div class="text-2xl font-bold text-purple-500">42:18</div>
406
+ <div class="text-xs text-gray-500">MINUTES</div>
407
+ </div>
408
+ </div>
409
+
410
+ <div class="mb-6">
411
+ <h4 class="font-semibold text-gray-900 mb-2">Weekly Activity</h4>
412
+ <div class="flex items-end h-40 space-x-1">
413
+ <div class="flex-1 bg-blue-200 rounded-t hover:bg-blue-300 transition duration-200" style="height: 20%"></div>
414
+ <div class="flex-1 bg-blue-300 rounded-t hover:bg-blue-400 transition duration-200" style="height: 45%"></div>
415
+ <div class="flex-1 bg-blue-400 rounded-t hover:bg-blue-500 transition duration-200" style="height: 70%"></div>
416
+ <div class="flex-1 bg-blue-500 rounded-t hover:bg-blue-600 transition duration-200" style="height: 90%"></div>
417
+ <div class="flex-1 bg-blue-600 rounded-t hover:bg-blue-700 transition duration-200" style="height: 60%"></div>
418
+ <div class="flex-1 bg-blue-700 rounded-t hover:bg-blue-800 transition duration-200" style="height: 30%"></div>
419
+ <div class="flex-1 bg-blue-800 rounded-t hover:bg-blue-900 transition duration-200" style="height: 10%"></div>
420
+ </div>
421
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
422
+ <span>Mon</span>
423
+ <span>Tue</span>
424
+ <span>Wed</span>
425
+ <span>Thu</span>
426
+ <span>Fri</span>
427
+ <span>Sat</span>
428
+ <span>Sun</span>
429
+ </div>
430
+ </div>
431
+
432
+ <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-lg font-medium transition duration-300">
433
+ Start Workout
434
+ </button>
435
+ </div>
436
+ </div>
437
+ </div>
438
+
439
+ <div class="mt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
440
+ <div class="bg-gray-50 p-6 rounded-xl shadow-md fade-in" style="animation-delay: 0.1s;">
441
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white mb-4">
442
+ <i class="fas fa-weight text-xl"></i>
443
+ </div>
444
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Weight Tracking</h3>
445
+ <p class="text-gray-500">
446
+ Log and visualize your weight changes over time with trend analysis and projections.
447
+ </p>
448
+ </div>
449
+
450
+ <div class="bg-gray-50 p-6 rounded-xl shadow-md fade-in" style="animation-delay: 0.2s;">
451
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white mb-4">
452
+ <i class="fas fa-ruler-combined text-xl"></i>
453
+ </div>
454
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Body Measurements</h3>
455
+ <p class="text-gray-500">
456
+ Track all body measurements including circumferences, body fat percentage, and more.
457
+ </p>
458
+ </div>
459
+
460
+ <div class="bg-gray-50 p-6 rounded-xl shadow-md fade-in" style="animation-delay: 0.3s;">
461
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white mb-4">
462
+ <i class="fas fa-trophy text-xl"></i>
463
+ </div>
464
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Strength Progress</h3>
465
+ <p class="text-gray-500">
466
+ Track your lifts and calisthenics skills progression with detailed charts and analytics.
467
+ </p>
468
+ </div>
469
+
470
+ <div class="bg-gray-50 p-6 rounded-xl shadow-md fade-in" style="animation-delay: 0.4s;">
471
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-red-500 text-white mb-4">
472
+ <i class="fas fa-heartbeat text-xl"></i>
473
+ </div>
474
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Health Metrics</h3>
475
+ <p class="text-gray-500">
476
+ Monitor resting heart rate, sleep quality, and other health indicators.
477
+ </p>
478
+ </div>
479
+ </div>
480
+ </div>
481
+ </section>
482
+
483
+ <!-- Community Section -->
484
+ <section id="community" class="py-20 bg-gray-50">
485
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
486
+ <div class="text-center mb-16 fade-in">
487
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
488
+ <span class="gradient-text">Join Our</span> Fitness Community
489
+ </h2>
490
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
491
+ Connect with like-minded individuals, share progress, and get motivated
492
+ </p>
493
+ </div>
494
+
495
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
496
+ <div class="fade-in">
497
+ <div class="bg-white p-6 rounded-xl shadow-lg">
498
+ <div class="flex items-center mb-4">
499
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="User avatar">
500
+ <div class="ml-3">
501
+ <h4 class="text-sm font-medium text-gray-900">Sarah Johnson</h4>
502
+ <p class="text-xs text-gray-500">3 days ago</p>
503
+ </div>
504
+ </div>
505
+ <p class="text-gray-700 mb-4">
506
+ "After 6 months with FitMaster Pro, I finally achieved my first muscle-up! The progressions were perfectly structured and the community support kept me motivated."
507
+ </p>
508
+ <div class="flex items-center text-sm text-gray-500">
509
+ <button class="flex items-center mr-4 hover:text-blue-500">
510
+ <i class="far fa-thumbs-up mr-1"></i> 24
511
+ </button>
512
+ <button class="flex items-center hover:text-blue-500">
513
+ <i class="far fa-comment mr-1"></i> 5
514
+ </button>
515
+ </div>
516
+ </div>
517
+ </div>
518
+
519
+ <div class="fade-in" style="animation-delay: 0.2s;">
520
+ <div class="bg-white p-6 rounded-xl shadow-lg">
521
+ <div class="flex items-center mb-4">
522
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/44.jpg" alt="User avatar">
523
+ <div class="ml-3">
524
+ <h4 class="text-sm font-medium text-gray-900">Michael Chen</h4>
525
+ <p class="text-xs text-gray-500">1 week ago</p>
526
+ </div>
527
+ </div>
528
+ <p class="text-gray-700 mb-4">
529
+ "The specialized rotator cuff program fixed my shoulder pain in just 4 weeks. I can finally bench press without discomfort. Highly recommend!"
530
+ </p>
531
+ <div class="flex items-center text-sm text-gray-500">
532
+ <button class="flex items-center mr-4 hover:text-blue-500">
533
+ <i class="far fa-thumbs-up mr-1"></i> 18
534
+ </button>
535
+ <button class="flex items-center hover:text-blue-500">
536
+ <i class="far fa-comment mr-1"></i> 3
537
+ </button>
538
+ </div>
539
+ </div>
540
+ </div>
541
+ </div>
542
+
543
+ <div class="text-center fade-in">
544
+ <h3 class="text-2xl font-bold text-gray-900 mb-6">Ready to Transform Your Fitness Journey?</h3>
545
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
546
+ <button class="bg-blue-500 hover:bg-blue-600 text-white px-8 py-3 rounded-lg text-lg font-semibold transition duration-300 transform hover:scale-105">
547
+ Start Free Trial
548
+ </button>
549
+ <button class="bg-white border-2 border-blue-500 text-blue-500 hover:bg-blue-50 px-8 py-3 rounded-lg text-lg font-semibold transition duration-300 transform hover:scale-105">
550
+ Learn More
551
+ </button>
552
+ </div>
553
+ </div>
554
+ </div>
555
+ </section>
556
+
557
+ <!-- Footer -->
558
+ <footer class="bg-gray-900 text-white py-12">
559
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
560
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
561
+ <div>
562
+ <h3 class="text-lg font-semibold mb-4">FitMaster Pro</h3>
563
+ <p class="text-gray-400 text-sm">
564
+ The ultimate all-in-one fitness app to help you achieve any physique goal and master your fitness journey.
565
+ </p>
566
+ </div>
567
+
568
+ <div>
569
+ <h3 class="text-lg font-semibold mb-4">Features</h3>
570
+ <ul class="space-y-2 text-sm text-gray-400">
571
+ <li><a href="#" class="hover:text-white transition">Workouts</a></li>
572
+ <li><a href="#" class="hover:text-white transition">Nutrition</a></li>
573
+ <li><a href="#" class="hover:text-white transition">Tracking</a></li>
574
+ <li><a href="#" class="hover:text-white transition">Community</a></li>
575
+ </ul>
576
+ </div>
577
+
578
+ <div>
579
+ <h3 class="text-lg font-semibold mb-4">Company</h3>
580
+ <ul class="space-y-2 text-sm text-gray-400">
581
+ <li><a href="#" class="hover:text-white transition">About</a></li>
582
+ <li><a href="#" class="hover:text-white transition">Careers</a></li>
583
+ <li><a href="#" class="hover:text-white transition">Blog</a></li>
584
+ <li><a href="#" class="hover:text-white transition">Contact</a></li>
585
+ </ul>
586
+ </div>
587
+
588
+ <div>
589
+ <h3 class="text-lg font-semibold mb-4">Connect</h3>
590
+ <div class="flex space-x-4">
591
+ <a href="#" class="text-gray-400 hover:text-white">
592
+ <i class="fab fa-facebook-f"></i>
593
+ </a>
594
+ <a href="#" class="text-gray-400 hover:text-white">
595
+ <i class="fab fa-twitter"></i>
596
+ </a>
597
+ <a href="#" class="text-gray-400 hover:text-white">
598
+ <i class="fab fa-instagram"></i>
599
+ </a>
600
+ <a href="#" class="text-gray-400 hover:text-white">
601
+ <i class="fab fa-youtube"></i>
602
+ </a>
603
+ </div>
604
+ <div class="mt-4">
605
+ <p class="text-sm text-gray-400">Subscribe to our newsletter</p>
606
+ <div class="mt-2 flex">
607
+ <input type="email" placeholder="Your email" class="px-3 py-2 bg-gray-800 text-white rounded-l focus:outline-none focus:ring-1 focus:ring-blue-500 w-full">
608
+ <button class="bg-blue-500 hover:bg-blue-600 px-4 py-2 rounded-r text-white">
609
+ <i class="fas fa-paper-plane"></i>
610
+ </button>
611
+ </div>
612
+ </div>
613
+ </div>
614
+ </div>
615
+
616
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
617
+ <p class="text-sm text-gray-400">© 2023 FitMaster Pro. All rights reserved.</p>
618
+ <div class="flex space-x-6 mt-4 md:mt-0">
619
+ <a href="#" class="text-sm text-gray-400 hover:text-white">Privacy Policy</a>
620
+ <a href="#" class="text-sm text-gray-400 hover:text-white">Terms of Service</a>
621
+ <a href="#" class="text-sm text-gray-400 hover:text-white">Cookies</a>
622
+ </div>
623
+ </div>
624
+ </div>
625
+ </footer>
626
+
627
+ <script>
628
+ // Mobile menu toggle
629
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
630
+ const menu = document.getElementById('mobile-menu');
631
+ menu.classList.toggle('hidden');
632
+ });
633
+
634
+ // Workout filter functionality
635
+ document.querySelectorAll('.workout-filter-btn').forEach(button => {
636
+ button.addEventListener('click', function() {
637
+ // Remove active class from all buttons
638
+ document.querySelectorAll('.workout-filter-btn').forEach(btn => {
639
+ btn.classList.remove('active', 'bg-blue-500', 'text-white');
640
+ btn.classList.add('bg-gray-200', 'hover:bg-gray-300');
641
+ });
642
+
643
+ // Add active class to clicked button
644
+ this.classList.add('active', 'bg-blue-500', 'text-white');
645
+ this.classList.remove('bg-gray-200', 'hover:bg-gray-300');
646
+
647
+ const filter = this.getAttribute('data-filter');
648
+ const workoutCards = document.querySelectorAll('.workout-card');
649
+
650
+ workoutCards.forEach(card => {
651
+ if (filter === 'all' || card.classList.contains(filter)) {
652
+ card.style.display = 'block';
653
+ } else {
654
+ card.style.display = 'none';
655
+ }
656
+ });
657
+ });
658
+ });
659
+
660
+ // Smooth scrolling for navigation links
661
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
662
+ anchor.addEventListener('click', function(e) {
663
+ e.preventDefault();
664
+
665
+ const targetId = this.getAttribute('href');
666
+ const targetElement = document.querySelector(targetId);
667
+
668
+ if (targetElement) {
669
+ window.scrollTo({
670
+ top: targetElement.offsetTop - 80,
671
+ behavior: 'smooth'
672
+ });
673
+
674
+ // Close mobile menu if open
675
+ const mobileMenu = document.getElementById('mobile-menu');
676
+ if (!mobileMenu.classList.contains('hidden')) {
677
+ mobileMenu.classList.add('hidden');
678
+ }
679
+ }
680
+ });
681
+ });
682
+
683
+ // Animation on scroll
684
+ function animateOnScroll() {
685
+ const elements = document.querySelectorAll('.fade-in');
686
+
687
+ elements.forEach(element => {
688
+ const elementPosition = element.getBoundingClientRect().top;
689
+ const windowHeight = window.innerHeight;
690
+
691
+ if (elementPosition < windowHeight - 100) {
692
+ element.style.opacity = '1';
693
+ element.style.transform = 'translateY(0)';
694
+ }
695
+ });
696
+ }
697
+
698
+ // Run once on page load
699
+ animateOnScroll();
700
+
701
+ // Run on scroll
702
+ window.addEventListener('scroll', animateOnScroll);
703
+
704
+ // Calorie calculator demo
705
+ function updateCalorieProgress() {
706
+ const protein = Math.floor(Math.random() * 50) + 100;
707
+ const carbs = Math.floor(Math.random() * 100) + 200;
708
+ const fats = Math.floor(Math.random() * 30) + 50;
709
+ const calories = protein * 4 + carbs * 4 + fats * 9;
710
+
711
+ document.querySelector('.nutrition-tracking .protein .progress').style.width = `${Math.min(100, protein / 180 * 100)}%`;
712
+ document.querySelector('.nutrition-tracking .carbs .progress').style.width = `${Math.min(100, carbs / 325 * 100)}%`;
713
+ document.querySelector('.nutrition-tracking .fats .progress').style.width = `${Math.min(100, fats / 80 * 100)}%`;
714
+ document.querySelector('.nutrition-tracking .calories span').textContent = `${calories} / 2800 kcal`;
715
+
716
+ setTimeout(updateCalorieProgress, 5000);
717
+ }
718
+
719
+ // Initialize
720
+ document.addEventListener('DOMContentLoaded', function() {
721
+ updateCalorieProgress();
722
+ });
723
+ </script>
724
+ <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=Aus-ten/fitmaster-pro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
725
+ </html>