Hugging Face's logo

Spaces:
biggdadda
/
biggfitt
Running

App Files Community
biggdadda commited on
Commit
e88f7e6
·
verified ·
1 Parent(s): 6a45940

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +365 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Biggfitt
3
- emoji: 📊
4
- colorFrom: gray
5
  colorTo: red
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: biggfitt
3
+ emoji: 🐳
4
+ colorFrom: green
5
  colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,365 @@
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>Smart Workout Generator</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
+ .exercise-card {
11
+ transition: all 0.3s ease;
12
+ }
13
+ .exercise-card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
16
+ }
17
+ .progress-ring__circle {
18
+ transition: stroke-dashoffset 0.5s;
19
+ transform: rotate(-90deg);
20
+ transform-origin: 50% 50%;
21
+ }
22
+ .fade-in {
23
+ animation: fadeIn 0.5s ease-in;
24
+ }
25
+ @keyframes fadeIn {
26
+ from { opacity: 0; transform: translateY(20px); }
27
+ to { opacity: 1; transform: translateY(0); }
28
+ }
29
+ </style>
30
+ </head>
31
+ <body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen">
32
+ <div class="container mx-auto px-4 py-8">
33
+ <header class="text-center mb-12">
34
+ <h1 class="text-4xl font-bold text-indigo-800 mb-2">Smart Workout Generator</h1>
35
+ <p class="text-lg text-gray-600">Get personalized workouts based on your goals and metrics</p>
36
+ </header>
37
+
38
+ <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
39
+ <div class="md:flex">
40
+ <!-- Input Section -->
41
+ <div class="md:w-1/2 p-8 bg-indigo-700 text-white">
42
+ <h2 class="text-2xl font-bold mb-6">Your Workout Preferences</h2>
43
+
44
+ <div class="space-y-6">
45
+ <div>
46
+ <label class="block text-sm font-medium mb-1">Target Calories to Burn</label>
47
+ <div class="relative">
48
+ <input type="number" id="calories" min="100" max="2000" step="50" value="300"
49
+ class="w-full px-4 py-2 rounded-lg bg-indigo-600 border border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-300">
50
+ <span class="absolute right-3 top-2.5 text-indigo-200">kcal</span>
51
+ </div>
52
+ </div>
53
+
54
+ <div>
55
+ <label class="block text-sm font-medium mb-1">Workout Duration (minutes)</label>
56
+ <input type="range" id="duration" min="10" max="120" value="30" step="5"
57
+ class="w-full h-2 bg-indigo-600 rounded-lg appearance-none cursor-pointer">
58
+ <div class="flex justify-between text-xs text-indigo-200 mt-1">
59
+ <span>10 min</span>
60
+ <span id="duration-value">30 min</span>
61
+ <span>120 min</span>
62
+ </div>
63
+ </div>
64
+
65
+ <div class="grid grid-cols-2 gap-4">
66
+ <div>
67
+ <label class="block text-sm font-medium mb-1">Age</label>
68
+ <input type="number" id="age" min="15" max="80" value="30"
69
+ class="w-full px-4 py-2 rounded-lg bg-indigo-600 border border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-300">
70
+ </div>
71
+ <div>
72
+ <label class="block text-sm font-medium mb-1">Weight (kg)</label>
73
+ <input type="number" id="weight" min="40" max="150" value="70"
74
+ class="w-full px-4 py-2 rounded-lg bg-indigo-600 border border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-300">
75
+ </div>
76
+ </div>
77
+
78
+ <div>
79
+ <label class="block text-sm font-medium mb-1">Workout Intensity</label>
80
+ <div class="flex space-x-4">
81
+ <button class="intensity-btn active px-4 py-2 rounded-lg bg-indigo-800 text-white" data-intensity="low">Low</button>
82
+ <button class="intensity-btn px-4 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-800 text-white" data-intensity="medium">Medium</button>
83
+ <button class="intensity-btn px-4 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-800 text-white" data-intensity="high">High</button>
84
+ </div>
85
+ </div>
86
+
87
+ <button id="generate-btn" class="w-full py-3 px-4 bg-white text-indigo-700 font-bold rounded-lg hover:bg-indigo-100 transition duration-300 flex items-center justify-center">
88
+ <i class="fas fa-bolt mr-2"></i> Generate Workout
89
+ </button>
90
+ </div>
91
+ </div>
92
+
93
+ <!-- Results Section -->
94
+ <div class="md:w-1/2 p-8 bg-white">
95
+ <div id="results-placeholder" class="text-center py-12">
96
+ <div class="mx-auto w-24 h-24 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
97
+ <i class="fas fa-dumbbell text-indigo-500 text-3xl"></i>
98
+ </div>
99
+ <h3 class="text-xl font-semibold text-gray-700 mb-2">Your Workout Awaits</h3>
100
+ <p class="text-gray-500">Enter your preferences and click "Generate Workout" to get started.</p>
101
+ </div>
102
+
103
+ <div id="results-container" class="hidden">
104
+ <div class="flex justify-between items-center mb-6">
105
+ <h2 class="text-2xl font-bold text-gray-800">Your Custom Workout</h2>
106
+ <button id="save-btn" class="px-3 py-1 bg-indigo-100 text-indigo-700 rounded-lg text-sm hover:bg-indigo-200">
107
+ <i class="fas fa-bookmark mr-1"></i> Save
108
+ </button>
109
+ </div>
110
+
111
+ <div class="flex items-center justify-between mb-6 p-4 bg-indigo-50 rounded-lg">
112
+ <div>
113
+ <h3 class="font-medium text-gray-700">Workout Summary</h3>
114
+ <p class="text-sm text-gray-500" id="workout-summary"></p>
115
+ </div>
116
+ <div class="relative w-16 h-16">
117
+ <svg class="w-full h-full" viewBox="0 0 36 36">
118
+ <path class="text-gray-200" d="M18 2.0845
119
+ a 15.9155 15.9155 0 0 1 0 31.831
120
+ a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke-width="3" stroke="currentColor"/>
121
+ <path class="progress-ring__circle text-indigo-600" stroke-dasharray="100, 100" d="M18 2.0845
122
+ a 15.9155 15.9155 0 0 1 0 31.831
123
+ a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke-width="3" stroke="currentColor"/>
124
+ <text x="18" y="20.5" class="text-xs font-bold fill-indigo-700" text-anchor="middle" id="calories-progress">0%</text>
125
+ </svg>
126
+ </div>
127
+ </div>
128
+
129
+ <div id="exercises-container" class="space-y-4"></div>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </div>
134
+
135
+ <div class="mt-12 text-center text-gray-500 text-sm">
136
+ <p>Note: Calorie estimates are approximate and may vary based on individual factors.</p>
137
+ </div>
138
+ </div>
139
+
140
+ <script>
141
+ document.addEventListener('DOMContentLoaded', function() {
142
+ // DOM Elements
143
+ const caloriesInput = document.getElementById('calories');
144
+ const durationInput = document.getElementById('duration');
145
+ const durationValue = document.getElementById('duration-value');
146
+ const ageInput = document.getElementById('age');
147
+ const weightInput = document.getElementById('weight');
148
+ const intensityBtns = document.querySelectorAll('.intensity-btn');
149
+ const generateBtn = document.getElementById('generate-btn');
150
+ const resultsPlaceholder = document.getElementById('results-placeholder');
151
+ const resultsContainer = document.getElementById('results-container');
152
+ const exercisesContainer = document.getElementById('exercises-container');
153
+ const workoutSummary = document.getElementById('workout-summary');
154
+ const caloriesProgress = document.getElementById('calories-progress');
155
+ const saveBtn = document.getElementById('save-btn');
156
+
157
+ let currentIntensity = 'low';
158
+
159
+ // Update duration value display
160
+ durationInput.addEventListener('input', function() {
161
+ durationValue.textContent = `${this.value} min`;
162
+ });
163
+
164
+ // Intensity button selection
165
+ intensityBtns.forEach(btn => {
166
+ btn.addEventListener('click', function() {
167
+ intensityBtns.forEach(b => b.classList.remove('active', 'bg-indigo-800'));
168
+ intensityBtns.forEach(b => b.classList.add('bg-indigo-600'));
169
+ this.classList.add('active', 'bg-indigo-800');
170
+ this.classList.remove('bg-indigo-600');
171
+ currentIntensity = this.dataset.intensity;
172
+ });
173
+ });
174
+
175
+ // Generate workout
176
+ generateBtn.addEventListener('click', generateWorkout);
177
+
178
+ // Save workout
179
+ saveBtn.addEventListener('click', function() {
180
+ alert('Workout saved to your favorites!');
181
+ });
182
+
183
+ function generateWorkout() {
184
+ const calories = parseInt(caloriesInput.value);
185
+ const duration = parseInt(durationInput.value);
186
+ const age = parseInt(ageInput.value);
187
+ const weight = parseInt(weightInput.value);
188
+
189
+ // Validate inputs
190
+ if (isNaN(calories) || isNaN(duration) || isNaN(age) || isNaN(weight)) {
191
+ alert('Please fill in all fields with valid numbers');
192
+ return;
193
+ }
194
+
195
+ // Calculate MET (Metabolic Equivalent of Task) based on intensity
196
+ let baseMET;
197
+ switch(currentIntensity) {
198
+ case 'low': baseMET = 3.5; break;
199
+ case 'medium': baseMET = 5.0; break;
200
+ case 'high': baseMET = 7.5; break;
201
+ default: baseMET = 4.0;
202
+ }
203
+
204
+ // Adjust MET based on age (older people generally burn fewer calories)
205
+ const ageFactor = 1 - ((age - 30) * 0.003); // Small adjustment for age
206
+
207
+ // Generate exercises
208
+ const exercises = generateExercises(calories, duration, weight, baseMET * ageFactor);
209
+
210
+ // Display results
211
+ displayWorkout(exercises, calories, duration);
212
+ }
213
+
214
+ function generateExercises(targetCalories, duration, weight, baseMET) {
215
+ // Exercise database
216
+ const exerciseDB = [
217
+ { name: "Jumping Jacks", met: 8.0, category: "cardio", image: "jumping-jacks" },
218
+ { name: "Running (6 mph)", met: 9.8, category: "cardio", image: "running" },
219
+ { name: "Cycling (moderate)", met: 7.0, category: "cardio", image: "cycling" },
220
+ { name: "Burpees", met: 8.0, category: "full-body", image: "burpees" },
221
+ { name: "Push-ups", met: 3.8, category: "upper-body", image: "pushups" },
222
+ { name: "Squats", met: 5.0, category: "lower-body", image: "squats" },
223
+ { name: "Lunges", met: 4.5, category: "lower-body", image: "lunges" },
224
+ { name: "Plank", met: 3.0, category: "core", image: "plank" },
225
+ { name: "Mountain Climbers", met: 8.0, category: "full-body", image: "mountain-climbers" },
226
+ { name: "Jump Rope", met: 10.0, category: "cardio", image: "jump-rope" },
227
+ { name: "Bicycle Crunches", met: 5.0, category: "core", image: "bicycle-crunches" },
228
+ { name: "High Knees", met: 8.0, category: "cardio", image: "high-knees" }
229
+ ];
230
+
231
+ // Filter exercises based on intensity
232
+ let filteredExercises = exerciseDB;
233
+ if (currentIntensity === 'low') {
234
+ filteredExercises = exerciseDB.filter(ex => ex.met <= 5.0);
235
+ } else if (currentIntensity === 'high') {
236
+ filteredExercises = exerciseDB.filter(ex => ex.met >= 7.0);
237
+ }
238
+
239
+ // Calculate total workout MET minutes
240
+ const totalMETMinutes = (targetCalories * 200) / (weight * duration);
241
+
242
+ // Distribute exercises
243
+ const numExercises = Math.min(Math.max(Math.floor(duration / 5), 3), 8);
244
+ const exercises = [];
245
+ let remainingDuration = duration;
246
+ let remainingCalories = targetCalories;
247
+
248
+ for (let i = 0; i < numExercises; i++) {
249
+ // Last exercise takes remaining time
250
+ const isLast = i === numExercises - 1;
251
+ const exerciseDuration = isLast ? remainingDuration : Math.max(3, Math.min(10, Math.floor(remainingDuration / (numExercises - i))));
252
+
253
+ // Select random exercise
254
+ const randomIndex = Math.floor(Math.random() * filteredExercises.length);
255
+ const exercise = filteredExercises[randomIndex];
256
+
257
+ // Calculate calories burned for this exercise
258
+ const exerciseCalories = Math.round((exercise.met * weight * exerciseDuration * 3.5) / 200);
259
+
260
+ exercises.push({
261
+ name: exercise.name,
262
+ duration: exerciseDuration,
263
+ calories: exerciseCalories,
264
+ met: exercise.met,
265
+ category: exercise.category,
266
+ image: exercise.image
267
+ });
268
+
269
+ remainingDuration -= exerciseDuration;
270
+ remainingCalories -= exerciseCalories;
271
+
272
+ // Remove this exercise to avoid duplicates
273
+ filteredExercises.splice(randomIndex, 1);
274
+
275
+ // If we've run out of exercises or time, break
276
+ if (filteredExercises.length === 0 || remainingDuration <= 0) break;
277
+ }
278
+
279
+ // Adjust last exercise to account for any remaining calories
280
+ if (exercises.length > 0 && remainingCalories > 0) {
281
+ exercises[exercises.length - 1].calories += remainingCalories;
282
+ // Adjust duration proportionally
283
+ const lastExercise = exercises[exercises.length - 1];
284
+ const additionalDuration = Math.round((remainingCalories * 200) / (lastExercise.met * weight * 3.5));
285
+ lastExercise.duration += additionalDuration;
286
+ }
287
+
288
+ return exercises;
289
+ }
290
+
291
+ function displayWorkout(exercises, targetCalories, duration) {
292
+ // Hide placeholder, show results
293
+ resultsPlaceholder.classList.add('hidden');
294
+ resultsContainer.classList.remove('hidden');
295
+
296
+ // Calculate total calories from exercises
297
+ const totalCalories = exercises.reduce((sum, ex) => sum + ex.calories, 0);
298
+ const progressPercent = Math.min(100, Math.round((totalCalories / targetCalories) * 100));
299
+
300
+ // Update summary
301
+ workoutSummary.textContent = `${exercises.length} exercises • ${duration} minutes • ~${totalCalories} calories`;
302
+
303
+ // Update progress circle
304
+ const circle = document.querySelector('.progress-ring__circle');
305
+ const radius = circle.r.baseVal.value;
306
+ const circumference = radius * 2 * Math.PI;
307
+ const offset = circumference - (progressPercent / 100) * circumference;
308
+ circle.style.strokeDasharray = `${circumference} ${circumference}`;
309
+ circle.style.strokeDashoffset = offset;
310
+ caloriesProgress.textContent = `${progressPercent}%`;
311
+
312
+ // Clear previous exercises
313
+ exercisesContainer.innerHTML = '';
314
+
315
+ // Add exercises to DOM
316
+ exercises.forEach((exercise, index) => {
317
+ const exerciseElement = document.createElement('div');
318
+ exerciseElement.className = `exercise-card bg-white p-4 rounded-lg border border-gray-200 hover:border-indigo-300 fade-in`;
319
+ exerciseElement.style.animationDelay = `${index * 0.1}s`;
320
+
321
+ // Get icon based on category
322
+ let iconClass;
323
+ switch(exercise.category) {
324
+ case 'cardio': iconClass = 'fas fa-heartbeat text-red-500'; break;
325
+ case 'upper-body': iconClass = 'fas fa-hand-paper text-blue-500'; break;
326
+ case 'lower-body': iconClass = 'fas fa-walking text-green-500'; break;
327
+ case 'core': iconClass = 'fas fa-ellipsis-h text-yellow-500'; break;
328
+ default: iconClass = 'fas fa-dumbbell text-indigo-500';
329
+ }
330
+
331
+ exerciseElement.innerHTML = `
332
+ <div class="flex items-start">
333
+ <div class="mr-4 mt-1">
334
+ <div class="w-10 h-10 rounded-full bg-${exercise.category === 'cardio' ? 'red' : exercise.category === 'upper-body' ? 'blue' : exercise.category === 'lower-body' ? 'green' : 'indigo'}-100 flex items-center justify-center">
335
+ <i class="${iconClass}"></i>
336
+ </div>
337
+ </div>
338
+ <div class="flex-1">
339
+ <div class="flex justify-between items-start">
340
+ <h3 class="font-bold text-gray-800">${exercise.name}</h3>
341
+ <span class="text-sm font-medium px-2 py-1 rounded-full bg-${exercise.category === 'cardio' ? 'red' : exercise.category === 'upper-body' ? 'blue' : exercise.category === 'lower-body' ? 'green' : 'indigo'}-100 text-${exercise.category === 'cardio' ? 'red' : exercise.category === 'upper-body' ? 'blue' : exercise.category === 'lower-body' ? 'green' : 'indigo'}-700">
342
+ ${exercise.category.replace('-', ' ')}
343
+ </span>
344
+ </div>
345
+ <div class="flex justify-between mt-2 text-sm text-gray-600">
346
+ <span><i class="far fa-clock mr-1"></i> ${exercise.duration} min</span>
347
+ <span><i class="fas fa-fire mr-1"></i> ~${exercise.calories} kcal</span>
348
+ </div>
349
+ <div class="mt-2 flex items-center">
350
+ <div class="w-full bg-gray-200 rounded-full h-2">
351
+ <div class="bg-${exercise.category === 'cardio' ? 'red' : exercise.category === 'upper-body' ? 'blue' : exercise.category === 'lower-body' ? 'green' : 'indigo'}-500 h-2 rounded-full" style="width: ${Math.min(100, (exercise.met / 10) * 100)}%"></div>
352
+ </div>
353
+ <span class="ml-2 text-xs text-gray-500">${exercise.met.toFixed(1)} MET</span>
354
+ </div>
355
+ </div>
356
+ </div>
357
+ `;
358
+
359
+ exercisesContainer.appendChild(exerciseElement);
360
+ });
361
+ }
362
+ });
363
+ </script>
364
+ <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=biggdadda/biggfitt" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
365
+ </html>