Hugging Face's logo

Spaces:
flen-crypto
/
fightingfit
Running

App Files Community
flen-crypto commited on
Commit
ba9b24b
·
verified ·
1 Parent(s): b59e186

📍Next Steps in Build 🔐 Authentication & Subscription Flow: Add social login options (Google, Apple) or just email/password? Membership tier ideas? (e.g. “Gloves Off” = classes only, “Fighter Mode” = full access) 📱 Mobile App Sync: App will sync user plans/progress from web to device and work offline Push notifications will include: “Time to hit the bag” (workout reminder) “Meal prep alert” (based on diet plan) “New video from Tony” 📈 Admin CRM for Tony: Dashboard access via admin.tsx Tony can: See which members are active Upload new content (video tips, classes) Approve or cancel bookings Get alerts on class capacity - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1468 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Fightingfit
3
- emoji: 🦀
4
- colorFrom: indigo
5
- colorTo: blue
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: fightingfit
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: gray
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,1468 @@
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>Fighting Fit Essex - Boxing & Fitness Training</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
+ .hero-video {
11
+ position: relative;
12
+ height: 80vh;
13
+ overflow: hidden;
14
+ }
15
+ .hero-video video {
16
+ position: absolute;
17
+ top: 50%;
18
+ left: 50%;
19
+ transform: translate(-50%, -50%);
20
+ min-width: 100%;
21
+ min-height: 100%;
22
+ width: auto;
23
+ height: auto;
24
+ z-index: -1;
25
+ }
26
+ .progress-ring {
27
+ transform: rotate(-90deg);
28
+ }
29
+ .progress-ring__circle {
30
+ transition: stroke-dashoffset 0.5s;
31
+ }
32
+ .form-step {
33
+ display: none;
34
+ }
35
+ .form-step.active {
36
+ display: block;
37
+ animation: fadeIn 0.5s ease-in-out;
38
+ }
39
+ @keyframes fadeIn {
40
+ from { opacity: 0; transform: translateY(20px); }
41
+ to { opacity: 1; transform: translateY(0); }
42
+ }
43
+ .workout-card:hover {
44
+ transform: translateY(-5px);
45
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
46
+ }
47
+ </style>
48
+ </head>
49
+ <body class="font-sans bg-gray-50">
50
+ <!-- WhatsApp Floating Button -->
51
+ <div class="fixed bottom-6 right-6 z-50">
52
+ <a href="https://wa.me/447700900123" class="bg-green-500 text-white p-4 rounded-full shadow-lg hover:bg-green-600 transition-all flex items-center justify-center">
53
+ <i class="fab fa-whatsapp text-2xl"></i>
54
+ </a>
55
+ </div>
56
+
57
+ <!-- Navigation -->
58
+ <nav class="bg-red-700 text-white shadow-lg sticky top-0 z-40">
59
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
60
+ <div class="flex items-center space-x-2">
61
+ <i class="fas fa-boxing-glove text-2xl"></i>
62
+ <span class="font-bold text-xl">Fighting Fit Essex</span>
63
+ </div>
64
+ <div class="hidden md:flex items-center space-x-6">
65
+ <a href="#" class="hover:text-yellow-300 transition">Home</a>
66
+ <a href="#about" class="hover:text-yellow-300 transition">About</a>
67
+ <a href="#plan" class="hover:text-yellow-300 transition">Get Your Plan</a>
68
+ <a href="#classes" class="hover:text-yellow-300 transition">Classes</a>
69
+ <a href="#contact" class="hover:text-yellow-300 transition">Contact</a>
70
+ <button id="login-btn" class="bg-white text-red-700 px-4 py-1 rounded-full font-medium hover:bg-gray-100 transition">
71
+ Sign In
72
+ </button>
73
+ </div>
74
+ <button class="md:hidden text-2xl" id="menu-toggle">
75
+ <i class="fas fa-bars"></i>
76
+ </button>
77
+ <a href="/admin" class="hidden md:flex items-center bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-medium px-4 py-1 rounded-full ml-4 transition">
78
+ <i class="fas fa-lock mr-2"></i> Admin
79
+ </a>
80
+ </div>
81
+ <!-- Mobile Menu -->
82
+ <div class="md:hidden hidden bg-red-800 px-4 py-2" id="mobile-menu">
83
+ <a href="#" class="block py-2 hover:text-yellow-300 transition">Home</a>
84
+ <a href="#about" class="block py-2 hover:text-yellow-300 transition">About</a>
85
+ <a href="#plan" class="block py-2 hover:text-yellow-300 transition">Get Your Plan</a>
86
+ <a href="#classes" class="block py-2 hover:text-yellow-300 transition">Classes</a>
87
+ <a href="#contact" class="block py-2 hover:text-yellow-300 transition">Contact</a>
88
+ </div>
89
+ </nav>
90
+
91
+ <!-- Hero Section -->
92
+ <section class="hero-video relative">
93
+ <video autoplay muted loop class="w-full h-full object-cover">
94
+ <source src="https://assets.mixkit.co/videos/preview/mixkit-boxer-training-with-punching-bag-1230-large.mp4" type="video/mp4">
95
+ </video>
96
+ <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
97
+ <div class="text-center px-4">
98
+ <h1 class="text-4xl md:text-6xl font-bold text-white mb-4">Train Like A Fighter</h1>
99
+ <p class="text-xl md:text-2xl text-white mb-8">Personalized boxing & fitness training in Braintree, Essex</p>
100
+ <div class="flex flex-col md:flex-row justify-center gap-4">
101
+ <a href="#plan" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-full transition duration-300 transform hover:scale-105">
102
+ Get Your Plan
103
+ </a>
104
+ <a href="#classes" class="bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-bold py-3 px-6 rounded-full transition duration-300 transform hover:scale-105">
105
+ Book a Class
106
+ </a>
107
+ </div>
108
+ </div>
109
+ </div>
110
+ </section>
111
+
112
+ <!-- About Section -->
113
+ <section id="about" class="py-16 bg-white">
114
+ <div class="container mx-auto px-4">
115
+ <h2 class="text-3xl font-bold text-center mb-12">Meet Tony - Your Coach</h2>
116
+ <div class="flex flex-col md:flex-row items-center gap-8">
117
+ <div class="md:w-1/2">
118
+ <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"
119
+ alt="Coach Tony"
120
+ class="rounded-lg shadow-xl w-full h-auto">
121
+ </div>
122
+ <div class="md:w-1/2">
123
+ <h3 class="text-2xl font-semibold mb-4">20+ Years of Boxing Experience</h3>
124
+ <p class="text-gray-700 mb-4">
125
+ Tony has trained hundreds of fighters and fitness enthusiasts at Fighting Fit Essex. His philosophy combines traditional boxing techniques with modern fitness science to deliver results.
126
+ </p>
127
+ <p class="text-gray-700 mb-6">
128
+ Whether you're looking to compete, get in shape, or just learn self-defense, Tony will create a personalized program that fits your goals and schedule.
129
+ </p>
130
+ <div class="grid grid-cols-2 gap-4">
131
+ <div class="bg-gray-100 p-4 rounded-lg">
132
+ <i class="fas fa-trophy text-red-600 text-2xl mb-2"></i>
133
+ <h4 class="font-bold">Proven Results</h4>
134
+ <p class="text-sm">100+ success stories</p>
135
+ </div>
136
+ <div class="bg-gray-100 p-4 rounded-lg">
137
+ <i class="fas fa-heartbeat text-red-600 text-2xl mb-2"></i>
138
+ <h4 class="font-bold">Holistic Approach</h4>
139
+ <p class="text-sm">Fitness + nutrition</p>
140
+ </div>
141
+ <div class="bg-gray-100 p-4 rounded-lg">
142
+ <i class="fas fa-users text-red-600 text-2xl mb-2"></i>
143
+ <h4 class="font-bold">Community</h4>
144
+ <p class="text-sm">Supportive environment</p>
145
+ </div>
146
+ <div class="bg-gray-100 p-4 rounded-lg">
147
+ <i class="fas fa-calendar-check text-red-600 text-2xl mb-2"></i>
148
+ <h4 class="font-bold">Flexible</h4>
149
+ <p class="text-sm">Various class times</p>
150
+ </div>
151
+ </div>
152
+ </div>
153
+ </div>
154
+ </div>
155
+ </section>
156
+
157
+ <!-- Plan Generator Section -->
158
+ <section id="plan" class="py-16 bg-gray-100">
159
+ <div class="container mx-auto px-4">
160
+ <h2 class="text-3xl font-bold text-center mb-4">Get Your Personalized Plan</h2>
161
+ <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">
162
+ Answer a few questions and we'll create a customized workout and nutrition plan based on your goals.
163
+ </p>
164
+
165
+ <div class="bg-white rounded-xl shadow-lg p-6 max-w-3xl mx-auto">
166
+ <div class="mb-6">
167
+ <div class="flex justify-between mb-2">
168
+ <span class="text-sm font-medium">Progress</span>
169
+ <span class="text-sm font-medium" id="step-counter">Step 1 of 6</span>
170
+ </div>
171
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
172
+ <div class="bg-red-600 h-2.5 rounded-full" id="progress-bar" style="width: 16.66%"></div>
173
+ </div>
174
+ </div>
175
+
176
+ <form id="plan-form">
177
+ <!-- Step 1: Basic Info -->
178
+ <div class="form-step active" id="step-1">
179
+ <h3 class="text-xl font-semibold mb-4">Tell us about yourself</h3>
180
+ <div class="grid md:grid-cols-2 gap-4 mb-6">
181
+ <div>
182
+ <label class="block text-gray-700 mb-2">Gender</label>
183
+ <select class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500" name="gender" required>
184
+ <option value="">Select</option>
185
+ <option value="male">Male</option>
186
+ <option value="female">Female</option>
187
+ <option value="other">Other</option>
188
+ </select>
189
+ </div>
190
+ <div>
191
+ <label class="block text-gray-700 mb-2">Age</label>
192
+ <input type="number" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500" name="age" min="16" max="99" required>
193
+ </div>
194
+ </div>
195
+ <div class="grid md:grid-cols-2 gap-4 mb-6">
196
+ <div>
197
+ <label class="block text-gray-700 mb-2">Weight (kg)</label>
198
+ <input type="number" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500" name="weight" min="40" max="200" required>
199
+ </div>
200
+ <div>
201
+ <label class="block text-gray-700 mb-2">Height (cm)</label>
202
+ <input type="number" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500" name="height" min="140" max="220" required>
203
+ </div>
204
+ </div>
205
+ <div class="flex justify-end">
206
+ <button type="button" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-6 rounded-lg transition next-step" data-next="2">
207
+ Next <i class="fas fa-arrow-right ml-2"></i>
208
+ </button>
209
+ </div>
210
+ </div>
211
+
212
+ <!-- Step 2: Goals -->
213
+ <div class="form-step" id="step-2">
214
+ <h3 class="text-xl font-semibold mb-4">What are your goals?</h3>
215
+ <div class="mb-6">
216
+ <label class="block text-gray-700 mb-2">Primary Goal</label>
217
+ <div class="grid md:grid-cols-3 gap-3">
218
+ <label class="border rounded-lg p-4 cursor-pointer hover:bg-red-50 transition has-radio">
219
+ <input type="radio" name="goal" value="fat_loss" class="hidden" required>
220
+ <div class="flex items-center">
221
+ <div class="w-6 h-6 rounded-full border border-gray-400 flex items-center justify-center mr-3 radio-indicator">
222
+ <div class="w-3 h-3 rounded-full bg-red-600 hidden"></div>
223
+ </div>
224
+ <div>
225
+ <h4 class="font-medium">Fat Loss</h4>
226
+ <p class="text-sm text-gray-600">Burn fat and tone up</p>
227
+ </div>
228
+ </div>
229
+ </label>
230
+ <label class="border rounded-lg p-4 cursor-pointer hover:bg-red-50 transition has-radio">
231
+ <input type="radio" name="goal" value="muscle_gain" class="hidden">
232
+ <div class="flex items-center">
233
+ <div class="w-6 h-6 rounded-full border border-gray-400 flex items-center justify-center mr-3 radio-indicator">
234
+ <div class="w-3 h-3 rounded-full bg-red-600 hidden"></div>
235
+ </div>
236
+ <div>
237
+ <h4 class="font-medium">Muscle Gain</h4>
238
+ <p class="text-sm text-gray-600">Build strength and size</p>
239
+ </div>
240
+ </div>
241
+ </label>
242
+ <label class="border rounded-lg p-4 cursor-pointer hover:bg-red-50 transition has-radio">
243
+ <input type="radio" name="goal" value="endurance" class="hidden">
244
+ <div class="flex items-center">
245
+ <div class="w-6 h-6 rounded-full border border-gray-400 flex items-center justify-center mr-3 radio-indicator">
246
+ <div class="w-3 h-3 rounded-full bg-red-600 hidden"></div>
247
+ </div>
248
+ <div>
249
+ <h4 class="font-medium">Endurance</h4>
250
+ <p class="text-sm text-gray-600">Improve stamina</p>
251
+ </div>
252
+ </div>
253
+ </label>
254
+ </div>
255
+ </div>
256
+ <div class="mb-6">
257
+ <label class="block text-gray-700 mb-2">Timeframe</label>
258
+ <select class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500" name="timeframe" required>
259
+ <option value="">Select your goal timeframe</option>
260
+ <option value="4_weeks">4 weeks</option>
261
+ <option value="8_weeks">8 weeks</option>
262
+ <option value="12_weeks">12 weeks</option>
263
+ <option value="ongoing">Ongoing</option>
264
+ </select>
265
+ </div>
266
+ <div class="flex justify-between">
267
+ <button type="button" class="text-gray-600 font-bold py-2 px-6 rounded-lg transition prev-step" data-prev="1">
268
+ <i class="fas fa-arrow-left mr-2"></i> Back
269
+ </button>
270
+ <button type="button" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-6 rounded-lg transition next-step" data-next="3">
271
+ Next <i class="fas fa-arrow-right ml-2"></i>
272
+ </button>
273
+ </div>
274
+ </div>
275
+
276
+ <!-- Step 3: Diet -->
277
+ <div class="form-step" id="step-3">
278
+ <h3 class="text-xl font-semibold mb-4">Diet & Nutrition</h3>
279
+ <div class="mb-6">
280
+ <label class="block text-gray-700 mb-2">Diet Type</label>
281
+ <div class="grid md:grid-cols-3 gap-3">
282
+ <label class="border rounded-lg p-4 cursor-pointer hover:bg-red-50 transition has-radio">
283
+ <input type="radio" name="diet" value="standard" class="hidden" required>
284
+ <div class="flex items-center">
285
+ <div class="w-6 h-6 rounded-full border border-gray-400 flex items-center justify-center mr-3 radio-indicator">
286
+ <div class="w-3 h-3 rounded-full bg-red-600 hidden"></div>
287
+ </div>
288
+ <div>
289
+ <h4 class="font-medium">Standard</h4>
290
+ <p class="text-sm text-gray-600">No restrictions</p>
291
+ </div>
292
+ </div>
293
+ </label>
294
+ <label class="border rounded-lg p-4 cursor-pointer hover:bg-red-50 transition has-radio">
295
+ <input type="radio" name="diet" value="vegetarian" class="hidden">
296
+ <div class="flex items-center">
297
+ <div class="w-6 h-6 rounded-full border border-gray-400 flex items-center justify-center mr-3 radio-indicator">
298
+ <div class="w-3 h-3 rounded-full bg-red-600 hidden"></div>
299
+ </div>
300
+ <div>
301
+ <h4 class="font-medium">Vegetarian</h4>
302
+ <p class="text-sm text-gray-600">No meat</p>
303
+ </div>
304
+ </div>
305
+ </label>
306
+ <label class="border rounded-lg p-4 cursor-pointer hover:bg-red-50 transition has-radio">
307
+ <input type="radio" name="diet" value="vegan" class="hidden">
308
+ <div class="flex items-center">
309
+ <div class="w-6 h-6 rounded-full border border-gray-400 flex items-center justify-center mr-3 radio-indicator">
310
+ <div class="w-3 h-3 rounded-full bg-red-600 hidden"></div>
311
+ </div>
312
+ <div>
313
+ <h4 class="font-medium">Vegan</h4>
314
+ <p class="text-sm text-gray-600">No animal products</p>
315
+ </div>
316
+ </div>
317
+ </label>
318
+ </div>
319
+ </div>
320
+ <div class="mb-6">
321
+ <label class="block text-gray-700 mb-2">Food Allergies/Intolerances</label>
322
+ <textarea class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500" name="allergies" rows="3" placeholder="List any food allergies or intolerances you have"></textarea>
323
+ </div>
324
+ <div class="flex justify-between">
325
+ <button type="button" class="text-gray-600 font-bold py-2 px-6 rounded-lg transition prev-step" data-prev="2">
326
+ <i class="fas fa-arrow-left mr-2"></i> Back
327
+ </button>
328
+ <button type="button" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-6 rounded-lg transition next-step" data-next="4">
329
+ Next <i class="fas fa-arrow-right ml-2"></i>
330
+ </button>
331
+ </div>
332
+ </div>
333
+
334
+ <!-- Step 4: Activity Level -->
335
+ <div class="form-step" id="step-4">
336
+ <h3 class="text-xl font-semibold mb-4">Current Activity Level</h3>
337
+ <div class="mb-6">
338
+ <label class="block text-gray-700 mb-2">How active are you currently?</label>
339
+ <div class="space-y-3">
340
+ <label class="border rounded-lg p-4 cursor-pointer hover:bg-red-50 transition has-radio block">
341
+ <input type="radio" name="activity" value="sedentary" class="hidden" required>
342
+ <div class="flex items-center">
343
+ <div class="w-6 h-6 rounded-full border border-gray-400 flex items-center justify-center mr-3 radio-indicator">
344
+ <div class="w-3 h-3 rounded-full bg-red-600 hidden"></div>
345
+ </div>
346
+ <div>
347
+ <h4 class="font-medium">Sedentary</h4>
348
+ <p class="text-sm text-gray-600">Little to no exercise</p>
349
+ </div>
350
+ </div>
351
+ </label>
352
+ <label class="border rounded-lg p-4 cursor-pointer hover:bg-red-50 transition has-radio block">
353
+ <input type="radio" name="activity" value="lightly_active" class="hidden">
354
+ <div class="flex items-center">
355
+ <div class="w-6 h-6 rounded-full border border-gray-400 flex items-center justify-center mr-3 radio-indicator">
356
+ <div class="w-3 h-3 rounded-full bg-red-600 hidden"></div>
357
+ </div>
358
+ <div>
359
+ <h4 class="font-medium">Lightly Active</h4>
360
+ <p class="text-sm text-gray-600">Exercise 1-3 days/week</p>
361
+ </div>
362
+ </div>
363
+ </label>
364
+ <label class="border rounded-lg p-4 cursor-pointer hover:bg-red-50 transition has-radio block">
365
+ <input type="radio" name="activity" value="moderately_active" class="hidden">
366
+ <div class="flex items-center">
367
+ <div class="w-6 h-6 rounded-full border border-gray-400 flex items-center justify-center mr-3 radio-indicator">
368
+ <div class="w-3 h-3 rounded-full bg-red-600 hidden"></div>
369
+ </div>
370
+ <div>
371
+ <h4 class="font-medium">Moderately Active</h4>
372
+ <p class="text-sm text-gray-600">Exercise 3-5 days/week</p>
373
+ </div>
374
+ </div>
375
+ </label>
376
+ <label class="border rounded-lg p-4 cursor-pointer hover:bg-red-50 transition has-radio block">
377
+ <input type="radio" name="activity" value="very_active" class="hidden">
378
+ <div class="flex items-center">
379
+ <div class="w-6 h-6 rounded-full border border-gray-400 flex items-center justify-center mr-3 radio-indicator">
380
+ <div class="w-3 h-3 rounded-full bg-red-600 hidden"></div>
381
+ </div>
382
+ <div>
383
+ <h4 class="font-medium">Very Active</h4>
384
+ <p class="text-sm text-gray-600">Exercise 6-7 days/week</p>
385
+ </div>
386
+ </div>
387
+ </label>
388
+ </div>
389
+ </div>
390
+ <div class="flex justify-between">
391
+ <button type="button" class="text-gray-600 font-bold py-2 px-6 rounded-lg transition prev-step" data-prev="3">
392
+ <i class="fas fa-arrow-left mr-2"></i> Back
393
+ </button>
394
+ <button type="button" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-6 rounded-lg transition next-step" data-next="5">
395
+ Next <i class="fas fa-arrow-right ml-2"></i>
396
+ </button>
397
+ </div>
398
+ </div>
399
+
400
+ <!-- Step 5: Availability -->
401
+ <div class="form-step" id="step-5">
402
+ <h3 class="text-xl font-semibold mb-4">Your Availability</h3>
403
+ <div class="mb-6">
404
+ <label class="block text-gray-700 mb-2">How many days per week can you commit to training?</label>
405
+ <select class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500" name="days_per_week" required>
406
+ <option value="">Select</option>
407
+ <option value="2">2 days</option>
408
+ <option value="3">3 days</option>
409
+ <option value="4">4 days</option>
410
+ <option value="5">5 days</option>
411
+ <option value="6">6 days</option>
412
+ <option value="7">7 days</option>
413
+ </select>
414
+ </div>
415
+ <div class="mb-6">
416
+ <label class="block text-gray-700 mb-2">Preferred training times</label>
417
+ <div class="grid md:grid-cols-3 gap-3">
418
+ <label class="border rounded-lg p-4 cursor-pointer hover:bg-red-50 transition has-checkbox">
419
+ <input type="checkbox" name="morning" value="true" class="hidden">
420
+ <div class="flex items-center">
421
+ <div class="w-6 h-6 rounded border border-gray-400 flex items-center justify-center mr-3 checkbox-indicator">
422
+ <i class="fas fa-check text-white hidden"></i>
423
+ </div>
424
+ <div>
425
+ <h4 class="font-medium">Morning</h4>
426
+ <p class="text-sm text-gray-600">Before 12pm</p>
427
+ </div>
428
+ </div>
429
+ </label>
430
+ <label class="border rounded-lg p-4 cursor-pointer hover:bg-red-50 transition has-checkbox">
431
+ <input type="checkbox" name="afternoon" value="true" class="hidden">
432
+ <div class="flex items-center">
433
+ <div class="w-6 h-6 rounded border border-gray-400 flex items-center justify-center mr-3 checkbox-indicator">
434
+ <i class="fas fa-check text-white hidden"></i>
435
+ </div>
436
+ <div>
437
+ <h4 class="font-medium">Afternoon</h4>
438
+ <p class="text-sm text-gray-600">12pm-5pm</p>
439
+ </div>
440
+ </div>
441
+ </label>
442
+ <label class="border rounded-lg p-4 cursor-pointer hover:bg-red-50 transition has-checkbox">
443
+ <input type="checkbox" name="evening" value="true" class="hidden">
444
+ <div class="flex items-center">
445
+ <div class="w-6 h-6 rounded border border-gray-400 flex items-center justify-center mr-3 checkbox-indicator">
446
+ <i class="fas fa-check text-white hidden"></i>
447
+ </div>
448
+ <div>
449
+ <h4 class="font-medium">Evening</h4>
450
+ <p class="text-sm text-gray-600">After 5pm</p>
451
+ </div>
452
+ </div>
453
+ </label>
454
+ </div>
455
+ </div>
456
+ <div class="flex justify-between">
457
+ <button type="button" class="text-gray-600 font-bold py-2 px-6 rounded-lg transition prev-step" data-prev="4">
458
+ <i class="fas fa-arrow-left mr-2"></i> Back
459
+ </button>
460
+ <button type="button" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-6 rounded-lg transition next-step" data-next="6">
461
+ Next <i class="fas fa-arrow-right ml-2"></i>
462
+ </button>
463
+ </div>
464
+ </div>
465
+
466
+ <!-- Step 6: Contact Info -->
467
+ <div class="form-step" id="step-6">
468
+ <h3 class="text-xl font-semibold mb-4">Almost Done!</h3>
469
+ <div class="mb-6">
470
+ <label class="block text-gray-700 mb-2">Email Address</label>
471
+ <input type="email" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500" name="email" required>
472
+ </div>
473
+ <div class="mb-6">
474
+ <label class="block text-gray-700 mb-2">Phone Number</label>
475
+ <input type="tel" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500" name="phone">
476
+ </div>
477
+ <div class="mb-6">
478
+ <label class="flex items-center">
479
+ <input type="checkbox" class="rounded border-gray-300 text-red-600 focus:ring-red-500 mr-2" name="consent" required>
480
+ <span class="text-gray-700">I agree to receive emails with my plan and occasional fitness tips</span>
481
+ </label>
482
+ </div>
483
+ <div class="flex justify-between">
484
+ <button type="button" class="text-gray-600 font-bold py-2 px-6 rounded-lg transition prev-step" data-prev="5">
485
+ <i class="fas fa-arrow-left mr-2"></i> Back
486
+ </button>
487
+ <button type="submit" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-6 rounded-lg transition">
488
+ Generate My Plan <i class="fas fa-magic ml-2"></i>
489
+ </button>
490
+ </div>
491
+ </div>
492
+ </form>
493
+ </div>
494
+ </div>
495
+ </section>
496
+
497
+ <!-- Plan Results (Hidden Initially) -->
498
+ <section id="plan-results" class="py-16 bg-white hidden">
499
+ <div class="container mx-auto px-4">
500
+ <h2 class="text-3xl font-bold text-center mb-12">Your Personalized Plan</h2>
501
+
502
+ <div class="bg-gray-100 rounded-xl p-6 mb-8">
503
+ <div class="flex flex-col md:flex-row justify-between items-center mb-6">
504
+ <div>
505
+ <h3 class="text-xl font-semibold">Nutrition Overview</h3>
506
+ <p class="text-gray-600">Based on your goals and preferences</p>
507
+ </div>
508
+ <div class="mt-4 md:mt-0">
509
+ <span class="bg-red-600 text-white px-4 py-1 rounded-full text-sm font-medium">Recommended</span>
510
+ </div>
511
+ </div>
512
+
513
+ <div class="grid md:grid-cols-3 gap-6">
514
+ <div class="bg-white p-4 rounded-lg shadow">
515
+ <div class="flex items-center mb-3">
516
+ <div class="bg-red-100 p-2 rounded-full mr-3">
517
+ <i class="fas fa-fire text-red-600"></i>
518
+ </div>
519
+ <h4 class="font-semibold">Calories</h4>
520
+ </div>
521
+ <p class="text-2xl font-bold" id="calories">2,400</p>
522
+ <p class="text-gray-600 text-sm">kcal per day</p>
523
+ </div>
524
+ <div class="bg-white p-4 rounded-lg shadow">
525
+ <div class="flex items-center mb-3">
526
+ <div class="bg-red-100 p-2 rounded-full mr-3">
527
+ <i class="fas fa-dumbbell text-red-600"></i>
528
+ </div>
529
+ <h4 class="font-semibold">Protein</h4>
530
+ </div>
531
+ <p class="text-2xl font-bold" id="protein">180</p>
532
+ <p class="text-gray-600 text-sm">grams per day</p>
533
+ </div>
534
+ <div class="bg-white p-4 rounded-lg shadow">
535
+ <div class="flex items-center mb-3">
536
+ <div class="bg-red-100 p-2 rounded-full mr-3">
537
+ <i class="fas fa-utensils text-red-600"></i>
538
+ </div>
539
+ <h4 class="font-semibold">Meal Plan</h4>
540
+ </div>
541
+ <p class="text-lg font-semibold" id="meal-plan">Standard</p>
542
+ <p class="text-gray-600 text-sm">3 meals + 2 snacks</p>
543
+ </div>
544
+ </div>
545
+
546
+ <div class="mt-8">
547
+ <h4 class="font-semibold mb-3">Sample Meal Ideas</h4>
548
+ <div class="grid md:grid-cols-3 gap-4" id="meal-ideas">
549
+ <!-- Filled by JavaScript -->
550
+ </div>
551
+ </div>
552
+ </div>
553
+
554
+ <div class="mb-12">
555
+ <h3 class="text-2xl font-semibold mb-6">Your Weekly Workout Schedule</h3>
556
+ <div class="space-y-4" id="workout-schedule">
557
+ <!-- Filled by JavaScript -->
558
+ </div>
559
+ </div>
560
+
561
+ <div class="text-center">
562
+ <button class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full transition mr-4">
563
+ <i class="fas fa-download mr-2"></i> Download PDF
564
+ </button>
565
+ <button class="bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-bold py-3 px-8 rounded-full transition">
566
+ <i class="fas fa-calendar-check mr-2"></i> Book a Session
567
+ </button>
568
+ </div>
569
+ </div>
570
+ </section>
571
+
572
+ <!-- Classes Section -->
573
+ <section id="classes" class="py-16 bg-gray-100">
574
+ <div class="container mx-auto px-4">
575
+ <h2 class="text-3xl font-bold text-center mb-4">Our Classes</h2>
576
+ <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">
577
+ Choose from our variety of boxing and fitness classes designed for all levels.
578
+ </p>
579
+
580
+ <div class="grid md:grid-cols-3 gap-8 mb-12">
581
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden transition-all hover:shadow-xl">
582
+ <div class="h-48 bg-red-700 flex items-center justify-center">
583
+ <i class="fas fa-boxing-glove text-white text-6xl"></i>
584
+ </div>
585
+ <div class="p-6">
586
+ <h3 class="text-xl font-bold mb-2">Boxing Fundamentals</h3>
587
+ <p class="text-gray-600 mb-4">Learn proper technique for punches, footwork, and defense in this beginner-friendly class.</p>
588
+ <div class="flex justify-between items-center">
589
+ <span class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded">Beginner</span>
590
+ <span class="font-medium">£12/session</span>
591
+ </div>
592
+ </div>
593
+ </div>
594
+
595
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden transition-all hover:shadow-xl">
596
+ <div class="h-48 bg-red-700 flex items-center justify-center">
597
+ <i class="fas fa-fire text-white text-6xl"></i>
598
+ </div>
599
+ <div class="p-6">
600
+ <h3 class="text-xl font-bold mb-2">Boxing HIIT</h3>
601
+ <p class="text-gray-600 mb-4">High-intensity interval training combining boxing drills with cardio exercises.</p>
602
+ <div class="flex justify-between items-center">
603
+ <span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded">Intermediate</span>
604
+ <span class="font-medium">£15/session</span>
605
+ </div>
606
+ </div>
607
+ </div>
608
+
609
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden transition-all hover:shadow-xl">
610
+ <div class="h-48 bg-red-700 flex items-center justify-center">
611
+ <i class="fas fa-trophy text-white text-6xl"></i>
612
+ </div>
613
+ <div class="p-6">
614
+ <h3 class="text-xl font-bold mb-2">Advanced Sparring</h3>
615
+ <p class="text-gray-600 mb-4">For experienced boxers looking to test their skills in controlled sparring sessions.</p>
616
+ <div class="flex justify-between items-center">
617
+ <span class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded">Advanced</span>
618
+ <span class="font-medium">£18/session</span>
619
+ </div>
620
+ </div>
621
+ </div>
622
+ </div>
623
+
624
+ <div class="bg-white rounded-xl shadow-lg p-6 max-w-4xl mx-auto">
625
+ <h3 class="text-xl font-semibold mb-6 text-center">Class Timetable</h3>
626
+ <div class="overflow-x-auto">
627
+ <table class="w-full">
628
+ <thead class="bg-gray-100">
629
+ <tr>
630
+ <th class="px-4 py-2 text-left">Time</th>
631
+ <th class="px-4 py-2 text-left">Monday</th>
632
+ <th class="px-4 py-2 text-left">Tuesday</th>
633
+ <th class="px-4 py-2 text-left">Wednesday</th>
634
+ <th class="px-4 py-2 text-left">Thursday</th>
635
+ <th class="px-4 py-2 text-left">Friday</th>
636
+ <th class="px-4 py-2 text-left">Saturday</th>
637
+ </tr>
638
+ </thead>
639
+ <tbody>
640
+ <tr class="border-b">
641
+ <td class="px-4 py-3 font-medium">6:00 - 7:00 AM</td>
642
+ <td class="px-4 py-3">Boxing HIIT</td>
643
+ <td class="px-4 py-3">Boxing HIIT</td>
644
+ <td class="px-4 py-3">-</td>
645
+ <td class="px-4 py-3">Boxing HIIT</td>
646
+ <td class="px-4 py-3">Boxing HIIT</td>
647
+ <td class="px-4 py-3">-</td>
648
+ </tr>
649
+ <tr class="border-b">
650
+ <td class="px-4 py-3 font-medium">9:00 - 10:00 AM</td>
651
+ <td class="px-4 py-3">Fundamentals</td>
652
+ <td class="px-4 py-3">-</td>
653
+ <td class="px-4 py-3">Fundamentals</td>
654
+ <td class="px-4 py-3">-</td>
655
+ <td class="px-4 py-3">Fundamentals</td>
656
+ <td class="px-4 py-3">Fundamentals</td>
657
+ </tr>
658
+ <tr class="border-b">
659
+ <td class="px-4 py-3 font-medium">6:00 - 7:00 PM</td>
660
+ <td class="px-4 py-3">Sparring</td>
661
+ <td class="px-4 py-3">Fundamentals</td>
662
+ <td class="px-4 py-3">Sparring</td>
663
+ <td class="px-4 py-3">Fundamentals</td>
664
+ <td class="px-4 py-3">Sparring</td>
665
+ <td class="px-4 py-3">-</td>
666
+ </tr>
667
+ <tr>
668
+ <td class="px-4 py-3 font-medium">7:30 - 8:30 PM</td>
669
+ <td class="px-4 py-3">Boxing HIIT</td>
670
+ <td class="px-4 py-3">-</td>
671
+ <td class="px-4 py-3">Boxing HIIT</td>
672
+ <td class="px-4 py-3">-</td>
673
+ <td class="px-4 py-3">Boxing HIIT</td>
674
+ <td class="px-4 py-3">-</td>
675
+ </tr>
676
+ </tbody>
677
+ </table>
678
+ </div>
679
+
680
+ <div class="mt-8 text-center">
681
+ <button class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full transition">
682
+ <i class="fas fa-calendar-alt mr-2"></i> Book Your Class
683
+ </button>
684
+ </div>
685
+ </div>
686
+ </div>
687
+ </section>
688
+
689
+ <!-- Progress Tracker Section -->
690
+ <section class="py-16 bg-white">
691
+ <div class="container mx-auto px-4">
692
+ <h2 class="text-3xl font-bold text-center mb-4">Track Your Progress</h2>
693
+ <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">
694
+ Log your workouts and see your improvement over time with our gamified tracking system.
695
+ </p>
696
+
697
+ <div class="grid md:grid-cols-2 gap-8 mb-12">
698
+ <div class="bg-gray-100 rounded-xl p-6">
699
+ <h3 class="text-xl font-semibold mb-6">This Week's Stats</h3>
700
+
701
+ <div class="grid grid-cols-3 gap-4 mb-8">
702
+ <div class="bg-white p-4 rounded-lg shadow text-center">
703
+ <div class="text-2xl font-bold mb-1">3</div>
704
+ <div class="text-sm text-gray-600">Workouts</div>
705
+ </div>
706
+ <div class="bg-white p-4 rounded-lg shadow text-center">
707
+ <div class="text-2xl font-bold mb-1">5.2</div>
708
+ <div class="text-sm text-gray-600">Hours</div>
709
+ </div>
710
+ <div class="bg-white p-4 rounded-lg shadow text-center">
711
+ <div class="text-2xl font-bold mb-1">1,250</div>
712
+ <div class="text-sm text-gray-600">Punches</div>
713
+ </div>
714
+ </div>
715
+
716
+ <div class="mb-6">
717
+ <div class="flex justify-between mb-2">
718
+ <span class="font-medium">Weekly Goal</span>
719
+ <span class="font-medium">60%</span>
720
+ </div>
721
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
722
+ <div class="bg-red-600 h-2.5 rounded-full" style="width: 60%"></div>
723
+ </div>
724
+ </div>
725
+
726
+ <button class="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg transition">
727
+ Log Today's Workout
728
+ </button>
729
+ </div>
730
+
731
+ <div class="bg-gray-100 rounded-xl p-6">
732
+ <h3 class="text-xl font-semibold mb-6">Your Achievements</h3>
733
+
734
+ <div class="flex flex-wrap gap-4">
735
+ <div class="bg-white p-4 rounded-full shadow w-20 h-20 flex flex-col items-center justify-center text-center">
736
+ <i class="fas fa-medal text-yellow-500 text-2xl mb-1"></i>
737
+ <div class="text-xs font-medium">First Class</div>
738
+ </div>
739
+ <div class="bg-white p-4 rounded-full shadow w-20 h-20 flex flex-col items-center justify-center text-center">
740
+ <i class="fas fa-fire text-red-500 text-2xl mb-1"></i>
741
+ <div class="text-xs font-medium">5 Workouts</div>
742
+ </div>
743
+ <div class="bg-white p-4 rounded-full shadow w-20 h-20 flex flex-col items-center justify-center text-center">
744
+ <i class="fas fa-dumbbell text-blue-500 text-2xl mb-1"></i>
745
+ <div class="text-xs font-medium">Strength</div>
746
+ </div>
747
+ <div class="bg-white p-4 rounded-full shadow w-20 h-20 flex flex-col items-center justify-center text-center">
748
+ <i class="fas fa-bolt text-purple-500 text-2xl mb-1"></i>
749
+ <div class="text-xs font-medium">Fast Hands</div>
750
+ </div>
751
+ <div class="bg-white p-4 rounded-full shadow w-20 h-20 flex flex-col items-center justify-center text-center opacity-30">
752
+ <i class="fas fa-trophy text-gray-400 text-2xl mb-1"></i>
753
+ <div class="text-xs font-medium">10 Classes</div>
754
+ </div>
755
+ <div class="bg-white p-4 rounded-full shadow w-20 h-20 flex flex-col items-center justify-center text-center opacity-30">
756
+ <i class="fas fa-star text-gray-400 text-2xl mb-1"></i>
757
+ <div class="text-xs font-medium">Pro Boxer</div>
758
+ </div>
759
+ </div>
760
+ </div>
761
+ </div>
762
+
763
+ <div class="bg-gray-100 rounded-xl p-6">
764
+ <h3 class="text-xl font-semibold mb-6">Progress Over Time</h3>
765
+ <div class="bg-white p-4 rounded-lg shadow h-64 flex items-center justify-center">
766
+ <p class="text-gray-500">Progress chart will appear here</p>
767
+ </div>
768
+ </div>
769
+ </div>
770
+ </section>
771
+
772
+ <!-- Tony's Tips Section -->
773
+ <section class="py-16 bg-gray-100">
774
+ <div class="container mx-auto px-4">
775
+ <h2 class="text-3xl font-bold text-center mb-4">Tony's Weekly Tip</h2>
776
+ <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">
777
+ Get expert boxing and fitness advice from Tony every week.
778
+ </p>
779
+
780
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden max-w-4xl mx-auto">
781
+ <div class="md:flex">
782
+ <div class="md:w-1/2 bg-red-700 flex items-center justify-center p-8">
783
+ <div class="relative w-full" style="padding-bottom: 56.25%">
784
+ <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
785
+ </div>
786
+ </div>
787
+ <div class="md:w-1/2 p-8">
788
+ <div class="flex items-center mb-4">
789
+ <span class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded mr-2">New</span>
790
+ <span class="text-sm text-gray-600">Posted 2 days ago</span>
791
+ </div>
792
+ <h3 class="text-xl font-bold mb-4">Perfecting Your Jab</h3>
793
+ <p class="text-gray-700 mb-6">
794
+ The jab is the most important punch in boxing. In this video, I break down common mistakes and show you drills to improve your speed, power, and accuracy.
795
+ </p>
796
+ <div class="mb-6">
797
+ <h4 class="font-semibold mb-2">Key Takeaways:</h4>
798
+ <ul class="list-disc list-inside text-gray-700 space-y-1">
799
+ <li>Proper fist alignment to prevent injury</li>
800
+ <li>Using your legs for power, not just arms</li>
801
+ <li>Drills to improve speed and endurance</li>
802
+ <li>How to set up combinations with your jab</li>
803
+ </ul>
804
+ </div>
805
+ <button class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-6 rounded-lg transition">
806
+ <i class="fas fa-video mr-2"></i> Watch More Tips
807
+ </button>
808
+ </div>
809
+ </div>
810
+ </div>
811
+ </div>
812
+ </section>
813
+
814
+ <!-- Testimonials Section -->
815
+ <section class="py-16 bg-white">
816
+ <div class="container mx-auto px-4">
817
+ <h2 class="text-3xl font-bold text-center mb-12">What Our Members Say</h2>
818
+
819
+ <div class="grid md:grid-cols-3 gap-8 mb-12">
820
+ <div class="bg-gray-100 p-6 rounded-xl">
821
+ <div class="flex items-center mb-4">
822
+ <div class="flex items-center space-x-1 text-yellow-400 mr-2">
823
+ <i class="fas fa-star"></i>
824
+ <i class="fas fa-star"></i>
825
+ <i class="fas fa-star"></i>
826
+ <i class="fas fa-star"></i>
827
+ <i class="fas fa-star"></i>
828
+ </div>
829
+ <span class="text-sm text-gray-600">3 months ago</span>
830
+ </div>
831
+ <p class="text-gray-700 mb-4">
832
+ "Tony's boxing classes have completely transformed my fitness. I've lost 12kg in 3 months and feel stronger than ever!"
833
+ </p>
834
+ <div class="flex items-center">
835
+ <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sarah J." class="w-10 h-10 rounded-full mr-3">
836
+ <div>
837
+ <h4 class="font-medium">Sarah J.</h4>
838
+ <p class="text-sm text-gray-600">Member since 2022</p>
839
+ </div>
840
+ </div>
841
+ </div>
842
+
843
+ <div class="bg-gray-100 p-6 rounded-xl">
844
+ <div class="flex items-center mb-4">
845
+ <div class="flex items-center space-x-1 text-yellow-400 mr-2">
846
+ <i class="fas fa-star"></i>
847
+ <i class="fas fa-star"></i>
848
+ <i class="fas fa-star"></i>
849
+ <i class="fas fa-star"></i>
850
+ <i class="fas fa-star"></i>
851
+ </div>
852
+ <span class="text-sm text-gray-600">1 month ago</span>
853
+ </div>
854
+ <p class="text-gray-700 mb-4">
855
+ "The personalized plan Tony created for me helped break through my plateau. I finally see abs for the first time in my life!"
856
+ </p>
857
+ <div class="flex items-center">
858
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Mark T." class="w-10 h-10 rounded-full mr-3">
859
+ <div>
860
+ <h4 class="font-medium">Mark T.</h4>
861
+ <p class="text-sm text-gray-600">Member since 2023</p>
862
+ </div>
863
+ </div>
864
+ </div>
865
+
866
+ <div class="bg-gray-100 p-6 rounded-xl">
867
+ <div class="flex items-center mb-4">
868
+ <div class="flex items-center space-x-1 text-yellow-400 mr-2">
869
+ <i class="fas fa-star"></i>
870
+ <i class="fas fa-star"></i>
871
+ <i class="fas fa-star"></i>
872
+ <i class="fas fa-star"></i>
873
+ <i class="fas fa-star-half-alt"></i>
874
+ </div>
875
+ <span class="text-sm text-gray-600">2 weeks ago</span>
876
+ </div>
877
+ <p class="text-gray-700 mb-4">
878
+ "As a complete beginner, I was nervous to start boxing. The fundamentals class made me feel welcome and I'm hooked now!"
879
+ </p>
880
+ <div class="flex items-center">
881
+ <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Priya K." class="w-10 h-10 rounded-full mr-3">
882
+ <div>
883
+ <h4 class="font-medium">Priya K.</h4>
884
+ <p class="text-sm text-gray-600">New member</p>
885
+ </div>
886
+ </div>
887
+ </div>
888
+ </div>
889
+
890
+ <div class="text-center">
891
+ <button class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full transition">
892
+ <i class="fas fa-comment-alt mr-2"></i> Leave a Review
893
+ </button>
894
+ </div>
895
+ </div>
896
+ </section>
897
+
898
+ <!-- Contact Section -->
899
+ <section id="contact" class="py-16 bg-gray-100">
900
+ <div class="container mx-auto px-4">
901
+ <h2 class="text-3xl font-bold text-center mb-4">Get In Touch</h2>
902
+ <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">
903
+ Have questions? Want to schedule a trial session? Contact us today!
904
+ </p>
905
+
906
+ <div class="grid md:grid-cols-2 gap-12 max-w-6xl mx-auto">
907
+ <div>
908
+ <div class="bg-white rounded-xl shadow-lg p-6 h-full">
909
+ <h3 class="text-xl font-semibold mb-6">Contact Information</h3>
910
+
911
+ <div class="space-y-6">
912
+ <div class="flex items-start">
913
+ <div class="bg-red-100 p-3 rounded-full mr-4">
914
+ <i class="fas fa-map-marker-alt text-red-600"></i>
915
+ </div>
916
+ <div>
917
+ <h4 class="font-medium">Address</h4>
918
+ <p class="text-gray-600">123 Boxing Lane, Braintree, Essex CM7 1AB</p>
919
+ </div>
920
+ </div>
921
+
922
+ <div class="flex items-start">
923
+ <div class="bg-red-100 p-3 rounded-full mr-4">
924
+ <i class="fas fa-phone-alt text-red-600"></i>
925
+ </div>
926
+ <div>
927
+ <h4 class="font-medium">Phone</h4>
928
+ <p class="text-gray-600">01234 567890</p>
929
+ </div>
930
+ </div>
931
+
932
+ <div class="flex items-start">
933
+ <div class="bg-red-100 p-3 rounded-full mr-4">
934
+ <i class="fas fa-envelope text-red-600"></i>
935
+ </div>
936
+ <div>
937
+ <h4 class="font-medium">Email</h4>
938
+ <p class="text-gray-600">info@fightingfitnessex.co.uk</p>
939
+ </div>
940
+ </div>
941
+
942
+ <div class="flex items-start">
943
+ <div class="bg-red-100 p-3 rounded-full mr-4">
944
+ <i class="fas fa-clock text-red-600"></i>
945
+ </div>
946
+ <div>
947
+ <h4 class="font-medium">Opening Hours</h4>
948
+ <p class="text-gray-600">Mon-Fri: 6:00 AM - 9:00 PM</p>
949
+ <p class="text-gray-600">Sat: 8:00 AM - 6:00 PM</p>
950
+ <p class="text-gray-600">Sun: Closed</p>
951
+ </div>
952
+ </div>
953
+ </div>
954
+
955
+ <div class="mt-8">
956
+ <h4 class="font-medium mb-3">Follow Us</h4>
957
+ <div class="flex space-x-4">
958
+ <a href="#" class="bg-gray-200 hover:bg-red-600 hover:text-white p-3 rounded-full transition">
959
+ <i class="fab fa-facebook-f"></i>
960
+ </a>
961
+ <a href="#" class="bg-gray-200 hover:bg-red-600 hover:text-white p-3 rounded-full transition">
962
+ <i class="fab fa-instagram"></i>
963
+ </a>
964
+ <a href="#" class="bg-gray-200 hover:bg-red-600 hover:text-white p-3 rounded-full transition">
965
+ <i class="fab fa-youtube"></i>
966
+ </a>
967
+ <a href="#" class="bg-gray-200 hover:bg-red-600 hover:text-white p-3 rounded-full transition">
968
+ <i class="fab fa-tiktok"></i>
969
+ </a>
970
+ </div>
971
+ </div>
972
+ </div>
973
+ </div>
974
+
975
+ <div>
976
+ <div class="bg-white rounded-xl shadow-lg p-6 h-full">
977
+ <h3 class="text-xl font-semibold mb-6">Send Us a Message</h3>
978
+
979
+ <form>
980
+ <div class="grid md:grid-cols-2 gap-4 mb-4">
981
+ <div>
982
+ <label class="block text-gray-700 mb-2">First Name</label>
983
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500" required>
984
+ </div>
985
+ <div>
986
+ <label class="block text-gray-700 mb-2">Last Name</label>
987
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500" required>
988
+ </div>
989
+ </div>
990
+
991
+ <div class="mb-4">
992
+ <label class="block text-gray-700 mb-2">Email</label>
993
+ <input type="email" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500" required>
994
+ </div>
995
+
996
+ <div class="mb-4">
997
+ <label class="block text-gray-700 mb-2">Phone</label>
998
+ <input type="tel" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500">
999
+ </div>
1000
+
1001
+ <div class="mb-4">
1002
+ <label class="block text-gray-700 mb-2">Subject</label>
1003
+ <select class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500">
1004
+ <option>General Inquiry</option>
1005
+ <option>Class Schedule</option>
1006
+ <option>Personal Training</option>
1007
+ <option>Membership</option>
1008
+ <option>Other</option>
1009
+ </select>
1010
+ </div>
1011
+
1012
+ <div class="mb-4">
1013
+ <label class="block text-gray-700 mb-2">Message</label>
1014
+ <textarea class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500" rows="4"></textarea>
1015
+ </div>
1016
+
1017
+ <button type="submit" class="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg transition">
1018
+ Send Message
1019
+ </button>
1020
+ </form>
1021
+ </div>
1022
+ </div>
1023
+ </div>
1024
+ </div>
1025
+ </section>
1026
+
1027
+ <!-- Footer -->
1028
+ <footer class="bg-gray-900 text-white py-12">
1029
+ <div class="container mx-auto px-4">
1030
+ <div class="grid md:grid-cols-4 gap-8 mb-8">
1031
+ <div>
1032
+ <div class="flex items-center space-x-2 mb-4">
1033
+ <i class="fas fa-boxing-glove text-2xl text-red-500"></i>
1034
+ <span class="font-bold text-xl">Fighting Fit Essex</span>
1035
+ </div>
1036
+ <p class="text-gray-400">
1037
+ Professional boxing and fitness training in Braintree, Essex. Transform your body and mind with our expert coaching.
1038
+ </p>
1039
+ </div>
1040
+
1041
+ <div>
1042
+ <h3 class="font-semibold text-lg mb-4">Quick Links</h3>
1043
+ <ul class="space-y-2">
1044
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li>
1045
+ <li><a href="#about" class="text-gray-400 hover:text-white transition">About</a></li>
1046
+ <li><a href="#plan" class="text-gray-400 hover:text-white transition">Get Your Plan</a></li>
1047
+ <li><a href="#classes" class="text-gray-400 hover:text-white transition">Classes</a></li>
1048
+ <li><a href="#contact" class="text-gray-400 hover:text-white transition">Contact</a></li>
1049
+ </ul>
1050
+ </div>
1051
+
1052
+ <div>
1053
+ <h3 class="font-semibold text-lg mb-4">Classes</h3>
1054
+ <ul class="space-y-2">
1055
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Boxing Fundamentals</a></li>
1056
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Boxing HIIT</a></li>
1057
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Advanced Sparring</a></li>
1058
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Personal Training</a></li>
1059
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Nutrition Coaching</a></li>
1060
+ </ul>
1061
+ </div>
1062
+
1063
+ <div>
1064
+ <h3 class="font-semibold text-lg mb-4">Newsletter</h3>
1065
+ <p class="text-gray-400 mb-4">
1066
+ Subscribe to get weekly boxing tips and special offers.
1067
+ </p>
1068
+ <form class="flex">
1069
+ <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-900 w-full">
1070
+ <button type="submit" class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-r-lg">
1071
+ <i class="fas fa-paper-plane"></i>
1072
+ </button>
1073
+ </form>
1074
+ </div>
1075
+ </div>
1076
+
1077
+ <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
1078
+ <p class="text-gray-400 mb-4 md:mb-0">
1079
+ &copy; 2023 Fighting Fit Essex. All rights reserved.
1080
+ </p>
1081
+ <div class="flex space-x-6">
1082
+ <a href="#" class="text-gray-400 hover:text-white transition">
1083
+ <i class="fab fa-facebook-f"></i>
1084
+ </a>
1085
+ <a href="#" class="text-gray-400 hover:text-white transition">
1086
+ <i class="fab fa-instagram"></i>
1087
+ </a>
1088
+ <a href="#" class="text-gray-400 hover:text-white transition">
1089
+ <i class="fab fa-youtube"></i>
1090
+ </a>
1091
+ <a href="#" class="text-gray-400 hover:text-white transition">
1092
+ <i class="fab fa-tiktok"></i>
1093
+ </a>
1094
+ </div>
1095
+ </div>
1096
+ </div>
1097
+ </footer>
1098
+
1099
+ <script>
1100
+ // Mobile menu toggle
1101
+ document.getElementById('menu-toggle').addEventListener('click', function() {
1102
+ const menu = document.getElementById('mobile-menu');
1103
+ menu.classList.toggle('hidden');
1104
+ });
1105
+
1106
+ // Form steps navigation
1107
+ const formSteps = document.querySelectorAll('.form-step');
1108
+ const nextButtons = document.querySelectorAll('.next-step');
1109
+ const prevButtons = document.querySelectorAll('.prev-step');
1110
+ const stepCounter = document.getElementById('step-counter');
1111
+ const progressBar = document.getElementById('progress-bar');
1112
+ const totalSteps = 6;
1113
+ let currentStep = 1;
1114
+
1115
+ function updateStepDisplay() {
1116
+ formSteps.forEach(step => step.classList.remove('active'));
1117
+ document.getElementById(`step-${currentStep}`).classList.add('active');
1118
+ stepCounter.textContent = `Step ${currentStep} of ${totalSteps}`;
1119
+ progressBar.style.width = `${(currentStep / totalSteps) * 100}%`;
1120
+ }
1121
+
1122
+ nextButtons.forEach(button => {
1123
+ button.addEventListener('click', function() {
1124
+ const nextStep = parseInt(this.getAttribute('data-next'));
1125
+ // Validate current step before proceeding
1126
+ let isValid = true;
1127
+ const currentStepEl = document.getElementById(`step-${currentStep}`);
1128
+ const requiredInputs = currentStepEl.querySelectorAll('[required]');
1129
+
1130
+ requiredInputs.forEach(input => {
1131
+ if (!input.value) {
1132
+ isValid = false;
1133
+ input.classList.add('border-red-500');
1134
+ setTimeout(() => {
1135
+ input.classList.remove('border-red-500');
1136
+ }, 2000);
1137
+ }
1138
+ });
1139
+
1140
+ if (isValid) {
1141
+ currentStep = nextStep;
1142
+ updateStepDisplay();
1143
+ window.scrollTo({
1144
+ top: document.getElementById('plan').offsetTop + 100,
1145
+ behavior: 'smooth'
1146
+ });
1147
+ }
1148
+ });
1149
+ });
1150
+
1151
+ prevButtons.forEach(button => {
1152
+ button.addEventListener('click', function() {
1153
+ const prevStep = parseInt(this.getAttribute('data-prev'));
1154
+ currentStep = prevStep;
1155
+ updateStepDisplay();
1156
+ window.scrollTo({
1157
+ top: document.getElementById('plan').offsetTop + 100,
1158
+ behavior: 'smooth'
1159
+ });
1160
+ });
1161
+ });
1162
+
1163
+ // Radio button and checkbox styling
1164
+ document.querySelectorAll('.has-radio').forEach(item => {
1165
+ const radio = item.querySelector('input[type="radio"]');
1166
+ const indicator = item.querySelector('.radio-indicator div');
1167
+
1168
+ item.addEventListener('click', function() {
1169
+ // Uncheck all radios in the group
1170
+ const name = radio.getAttribute('name');
1171
+ document.querySelectorAll(`input[name="${name}"]`).forEach(r => {
1172
+ r.checked = false;
1173
+ r.parentElement.querySelector('.radio-indicator div').classList.add('hidden');
1174
+ });
1175
+
1176
+ // Check this one
1177
+ radio.checked = true;
1178
+ indicator.classList.remove('hidden');
1179
+ });
1180
+ });
1181
+
1182
+ document.querySelectorAll('.has-checkbox').forEach(item => {
1183
+ const checkbox = item.querySelector('input[type="checkbox"]');
1184
+ const indicator = item.querySelector('.checkbox-indicator i');
1185
+
1186
+ item.addEventListener('click', function() {
1187
+ checkbox.checked = !checkbox.checked;
1188
+ if (checkbox.checked) {
1189
+ item.querySelector('.checkbox-indicator').classList.add('bg-red-600');
1190
+ indicator.classList.remove('hidden');
1191
+ } else {
1192
+ item.querySelector('.checkbox-indicator').classList.remove('bg-red-600');
1193
+ indicator.classList.add('hidden');
1194
+ }
1195
+ });
1196
+ });
1197
+
1198
+ // Form submission
1199
+ document.getElementById('plan-form').addEventListener('submit', function(e) {
1200
+ e.preventDefault();
1201
+
1202
+ // Get form data
1203
+ const formData = new FormData(this);
1204
+ const data = {};
1205
+ formData.forEach((value, key) => {
1206
+ data[key] = value;
1207
+ });
1208
+
1209
+ // Generate plan (simplified version)
1210
+ const bmr = data.gender === 'male'
1211
+ ? 10 * data.weight + 6.25 * data.height - 5 * data.age + 5
1212
+ : 10 * data.weight + 6.25 * data.height - 5 * data.age - 161;
1213
+
1214
+ const calories = data.goal === 'fat_loss' ? bmr * 0.8 : bmr * 1.1;
1215
+ const protein = Math.round(data.weight * 2.2);
1216
+
1217
+ // Set nutrition values
1218
+ document.getElementById('calories').textContent = Math.round(calories);
1219
+ document.getElementById('protein').textContent = protein;
1220
+ document.getElementById('meal-plan').textContent = data.diet.charAt(0).toUpperCase() + data.diet.slice(1);
1221
+
1222
+ // Generate meal ideas based on diet
1223
+ const mealIdeasContainer = document.getElementById('meal-ideas');
1224
+ mealIdeasContainer.innerHTML = '';
1225
+
1226
+ let mealIdeas = [];
1227
+ if (data.diet === 'vegan') {
1228
+ mealIdeas = [
1229
+ { name: 'Tofu Scramble', desc: 'With spinach and turmeric' },
1230
+ { name: 'Chickpea Curry', desc: 'With brown rice' },
1231
+ { name: 'Lentil Soup', desc: 'With whole grain bread' }
1232
+ ];
1233
+ } else if (data.diet === 'vegetarian') {
1234
+ mealIdeas = [
1235
+ { name: 'Greek Yogurt', desc: 'With berries and nuts' },
1236
+ { name: 'Vegetable Omelet', desc: 'With whole wheat toast' },
1237
+ { name: 'Quinoa Salad', desc: 'With feta and veggies' }
1238
+ ];
1239
+ } else {
1240
+ mealIdeas = [
1241
+ { name: 'Grilled Chicken', desc: 'With sweet potatoes' },
1242
+ { name: 'Salmon', desc: 'With quinoa and asparagus' },
1243
+ { name: 'Lean Beef', desc: 'With roasted vegetables' }
1244
+ ];
1245
+ }
1246
+
1247
+ mealIdeas.forEach(meal => {
1248
+ const mealEl = document.createElement('div');
1249
+ mealEl.className = 'bg-white p-4 rounded-lg shadow';
1250
+ mealEl.innerHTML = `
1251
+ <h4 class="font-semibold">${meal.name}</h4>
1252
+ <p class="text-sm text-gray-600">${meal.desc}</p>
1253
+ `;
1254
+ mealIdeasContainer.appendChild(mealEl);
1255
+ });
1256
+
1257
+ // Generate workout schedule
1258
+ const workoutSchedule = document.getElementById('workout-schedule');
1259
+ workoutSchedule.innerHTML = '';
1260
+
1261
+ const days = parseInt(data.days_per_week) || 4;
1262
+ const workouts = [
1263
+ { day: 'Monday', focus: 'Boxing Drills + Core', time: '45 min' },
1264
+ { day: 'Tuesday', focus: 'HIIT Conditioning', time: '40 min' },
1265
+ { day: 'Wednesday', focus: 'Active Recovery or Yoga' },
1266
+ { day: 'Thursday', focus: 'Pad Work & Footwork', time: '50 min' },
1267
+ { day: 'Friday', focus: 'Strength Training + Plyo' },
1268
+ { day: 'Saturday', focus: 'Endurance Bag Work' },
1269
+ { day: 'Sunday', focus: 'Rest or Walk' }
1270
+ ];
1271
+
1272
+ // Only show the number of days they selected
1273
+ for (let i = 0; i < days; i++) {
1274
+ const workout = workouts[i];
1275
+ const workoutEl = document.createElement('div');
1276
+ workoutEl.className = 'bg-gray-100 p-4 rounded-lg workout-card transition-all';
1277
+ workoutEl.innerHTML = `
1278
+ <div class="flex justify-between items-center">
1279
+ <h4 class="font-bold text-lg">${workout.day}</h4>
1280
+ ${workout.time ? `<span class="bg-red-600 text-white px-3 py-1 rounded-full text-xs">${workout.time}</span>` : ''}
1281
+ </div>
1282
+ <p class="text-gray-700 mt-2">${workout.focus}</p>
1283
+ `;
1284
+ workoutSchedule.appendChild(workoutEl);
1285
+ }
1286
+
1287
+ // Show results
1288
+ document.getElementById('plan-results').classList.remove('hidden');
1289
+ window.scrollTo({
1290
+ top: document.getElementById('plan-results').offsetTop - 20,
1291
+ behavior: 'smooth'
1292
+ });
1293
+
1294
+ // In a real app, you would send this data to your backend
1295
+ console.log('Form submitted:', data);
1296
+ });
1297
+
1298
+ // Smooth scrolling for anchor links
1299
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
1300
+ anchor.addEventListener('click', function(e) {
1301
+ e.preventDefault();
1302
+
1303
+ const targetId = this.getAttribute('href');
1304
+ if (targetId === '#') return;
1305
+
1306
+ const targetElement = document.querySelector(targetId);
1307
+ if (targetElement) {
1308
+ window.scrollTo({
1309
+ top: targetElement.offsetTop - 80,
1310
+ behavior: 'smooth'
1311
+ });
1312
+
1313
+ // Close mobile menu if open
1314
+ document.getElementById('mobile-menu').classList.add('hidden');
1315
+ }
1316
+ });
1317
+ });
1318
+ <!-- Login Modal -->
1319
+ <div id="login-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
1320
+ <div class="bg-white rounded-xl max-w-md w-full p-6">
1321
+ <div class="flex justify-between items-center mb-6">
1322
+ <h3 class="text-2xl font-bold">Sign In</h3>
1323
+ <button id="close-login" class="text-gray-500 hover:text-gray-700">
1324
+ <i class="fas fa-times"></i>
1325
+ </button>
1326
+ </div>
1327
+
1328
+ <div class="space-y-4">
1329
+ <button class="w-full bg-red-600 hover:bg-red-700 text-white py-2 px-4 rounded-lg flex items-center justify-center">
1330
+ <i class="fab fa-google mr-2"></i> Continue with Google
1331
+ </button>
1332
+ <button class="w-full bg-black hover:bg-gray-800 text-white py-2 px-4 rounded-lg flex items-center justify-center">
1333
+ <i class="fab fa-apple mr-2"></i> Continue with Apple
1334
+ </button>
1335
+
1336
+ <div class="flex items-center my-4">
1337
+ <div class="flex-grow border-t border-gray-300"></div>
1338
+ <span class="mx-4 text-gray-500">or</span>
1339
+ <div class="flex-grow border-t border-gray-300"></div>
1340
+ </div>
1341
+
1342
+ <form id="email-login">
1343
+ <div class="mb-4">
1344
+ <label class="block text-gray-700 mb-2">Email</label>
1345
+ <input type="email" class="w-full px-4 py-2 border rounded-lg" required>
1346
+ </div>
1347
+ <div class="mb-6">
1348
+ <label class="block text-gray-700 mb-2">Password</label>
1349
+ <input type="password" class="w-full px-4 py-2 border rounded-lg" required>
1350
+ </div>
1351
+ <button type="submit" class="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg">
1352
+ Sign In
1353
+ </button>
1354
+ </form>
1355
+
1356
+ <div class="text-center text-sm text-gray-600 mt-4">
1357
+ Don't have an account? <a href="#" class="text-red-600 hover:underline">Sign up</a>
1358
+ </div>
1359
+ </div>
1360
+ </div>
1361
+ </div>
1362
+
1363
+ <!-- Membership Tiers Section -->
1364
+ <section id="membership" class="py-16 bg-white">
1365
+ <div class="container mx-auto px-4">
1366
+ <h2 class="text-3xl font-bold text-center mb-4">Choose Your Membership</h2>
1367
+ <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">
1368
+ Select the plan that fits your training goals and budget.
1369
+ </p>
1370
+
1371
+ <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
1372
+ <div class="border rounded-xl p-6 hover:shadow-lg transition">
1373
+ <h3 class="text-xl font-bold mb-2">Gloves Off</h3>
1374
+ <p class="text-gray-600 mb-4">Access to group classes only</p>
1375
+ <div class="text-3xl font-bold mb-6">£29<span class="text-lg text-gray-500">/month</span></div>
1376
+ <ul class="space-y-3 mb-6">
1377
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Unlimited group classes</li>
1378
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Basic progress tracking</li>
1379
+ <li class="flex items-center"><i class="fas fa-times text-gray-400 mr-2"></i> No personal plan</li>
1380
+ <li class="flex items-center"><i class="fas fa-times text-gray-400 mr-2"></i> No video tips</li>
1381
+ </ul>
1382
+ <button class="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded-lg">
1383
+ Select Plan
1384
+ </button>
1385
+ </div>
1386
+
1387
+ <div class="border-2 border-red-600 rounded-xl p-6 hover:shadow-lg transition transform scale-105">
1388
+ <div class="bg-red-600 text-white text-xs font-bold px-3 py-1 rounded-full inline-block mb-3">
1389
+ MOST POPULAR
1390
+ </div>
1391
+ <h3 class="text-xl font-bold mb-2">Fighter Mode</h3>
1392
+ <p class="text-gray-600 mb-4">Complete training system</p>
1393
+ <div class="text-3xl font-bold mb-6">£59<span class="text-lg text-gray-500">/month</span></div>
1394
+ <ul class="space-y-3 mb-6">
1395
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Unlimited group classes</li>
1396
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Personalized workout plan</li>
1397
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Nutrition guidance</li>
1398
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Weekly video tips</li>
1399
+ </ul>
1400
+ <button class="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg">
1401
+ Select Plan
1402
+ </button>
1403
+ </div>
1404
+
1405
+ <div class="border rounded-xl p-6 hover:shadow-lg transition">
1406
+ <h3 class="text-xl font-bold mb-2">Champion</h3>
1407
+ <p class="text-gray-600 mb-4">VIP training experience</p>
1408
+ <div class="text-3xl font-bold mb-6">£199<span class="text-lg text-gray-500">/month</span></div>
1409
+ <ul class="space-y-3 mb-6">
1410
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> All Fighter Mode benefits</li>
1411
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> 2 personal sessions/month</li>
1412
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Priority booking</li>
1413
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Exclusive workshops</li>
1414
+ </ul>
1415
+ <button class="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded-lg">
1416
+ Select Plan
1417
+ </button>
1418
+ </div>
1419
+ </div>
1420
+ </div>
1421
+ </section>
1422
+
1423
+ <script>
1424
+ // Login modal functionality
1425
+ const loginBtn = document.getElementById('login-btn');
1426
+ const loginModal = document.getElementById('login-modal');
1427
+ const closeLogin = document.getElementById('close-login');
1428
+
1429
+ loginBtn.addEventListener('click', () => {
1430
+ loginModal.classList.remove('hidden');
1431
+ });
1432
+
1433
+ closeLogin.addEventListener('click', () => {
1434
+ loginModal.classList.add('hidden');
1435
+ });
1436
+
1437
+ // Close modal when clicking outside
1438
+ loginModal.addEventListener('click', (e) => {
1439
+ if (e.target === loginModal) {
1440
+ loginModal.classList.add('hidden');
1441
+ }
1442
+ });
1443
+
1444
+ // Mobile sync notification
1445
+ if (navigator.userAgent.match(/Mobile/)) {
1446
+ const notification = document.createElement('div');
1447
+ notification.className = 'fixed bottom-4 left-4 right-4 bg-blue-600 text-white p-4 rounded-lg shadow-lg flex items-center justify-between z-50';
1448
+ notification.innerHTML = `
1449
+ <div class="flex items-center">
1450
+ <i class="fas fa-mobile-alt mr-3 text-xl"></i>
1451
+ <div>
1452
+ <p class="font-medium">Get the Fighting Fit app</p>
1453
+ <p class="text-sm">Sync your plan and track progress on the go</p>
1454
+ </div>
1455
+ </div>
1456
+ <button class="bg-white text-blue-600 px-3 py-1 rounded-full text-sm font-medium">
1457
+ Download
1458
+ </button>
1459
+ `;
1460
+ document.body.appendChild(notification);
1461
+
1462
+ setTimeout(() => {
1463
+ notification.remove();
1464
+ }, 10000);
1465
+ }
1466
+ </script>
1467
+ <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=flen-crypto/fightingfit" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1468
+ </html>