Hugging Face's logo

Spaces:
tommytracx
/
corefit
Running

App Files Community
corefit
File size: 17,277 Bytes 
8e4a7b8
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CoreFit Pro | Two-a-Day Workout Tracker</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            font-family: 'Nunito Sans', 'Open Sans', sans-serif;
        }
        .exercise-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        .progress-ring__circle {
            transition: stroke-dashoffset 0.5s;
            transform: rotate(-90deg);
            transform-origin: 50% 50%;
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        .animate-pulse {
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
        .nav-item.active {
            color: #00A8CC;
            border-bottom: 2px solid #00A8CC;
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-900">
    <!-- Header -->
    <header class="bg-white shadow-sm sticky top-0 z-10">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center">
                <div class="w-10 h-10 rounded-full bg-gradient-to-r from-[#FF6B35] to-[#00A8CC] flex items-center justify-center text-white font-bold text-xl">CF</div>
                <h1 class="ml-3 text-2xl font-bold text-[#1A1A1A]">CoreFit Pro</h1>
            </div>
            <div class="flex items-center space-x-4">
                <div class="relative">
                    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-10 h-10 rounded-full border-2 border-[#00A8CC]">
                    <div class="absolute -bottom-1 -right-1 bg-[#28A745] w-4 h-4 rounded-full border-2 border-white"></div>
                </div>
                <span class="hidden md:inline font-medium">John D.</span>
            </div>
        </div>
    </header>

    <!-- Navigation -->
    <nav class="bg-white shadow-sm">
        <div class="container mx-auto px-4">
            <div class="flex overflow-x-auto">
                <button class="nav-item px-4 py-3 text-sm font-medium whitespace-nowrap active" data-tab="dashboard">
                    <i class="fas fa-home mr-2"></i>Dashboard
                </button>
                <button class="nav-item px-4 py-3 text-sm font-medium whitespace-nowrap" data-tab="workouts">
                    <i class="fas fa-dumbbell mr-2"></i>Workouts
                </button>
                <button class="nav-item px-4 py-3 text-sm font-medium whitespace-nowrap" data-tab="progress">
                    <i class="fas fa-chart-line mr-2"></i>Progress
                </button>
                <button class="nav-item px-4 py-3 text-sm font-medium whitespace-nowrap" data-tab="nutrition">
                    <i class="fas fa-utensils mr-2"></i>Nutrition
                </button>
                <button class="nav-item px-4 py-3 text-sm font-medium whitespace-nowrap" data-tab="settings">
                    <i class="fas fa-cog mr-2"></i>Settings
                </button>
            </div>
        </div>
    </nav>

    <!-- Dashboard Content -->
    <div id="dashboard" class="tab-content active">
        <!-- User Stats Banner -->
        <div class="bg-gradient-to-r from-[#004E89] to-[#00A8CC] text-white py-6">
            <div class="container mx-auto px-4">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <div class="mb-4 md:mb-0">
                        <h2 class="text-xl font-bold">Today's Workout Plan</h2>
                        <p class="text-sm opacity-90">Customized for your goals</p>
                    </div>
                    <div class="flex space-x-6 text-center">
                        <div>
                            <div class="text-2xl font-bold">6'2"</div>
                            <div class="text-xs opacity-80">Height</div>
                        </div>
                        <div>
                            <div class="text-2xl font-bold">235 lbs</div>
                            <div class="text-xs opacity-80">Weight</div>
                        </div>
                        <div>
                            <div class="text-2xl font-bold">28%</div>
                            <div class="text-xs opacity-80">Body Fat</div>
                        </div>
                    </div>
                    <button class="bg-[#FF6B35] hover:bg-[#e05a2b] text-white px-4 py-2 rounded-full font-medium text-sm transition-colors">
                        Update Stats
                    </button>
                </div>
            </div>
        </div>

        <!-- Main Content -->
        <main class="container mx-auto px-4 py-8">
            <!-- Workout Tabs -->
            <div class="flex border-b border-gray-200 mb-8">
                <button id="morning-tab" class="flex-1 py-4 px-1 text-center border-b-2 font-medium text-sm border-[#FF6B35] text-[#FF6B35]">
                    Morning Routine (7:00 AM)
                </button>
                <button id="evening-tab" class="flex-1 py-4 px-1 text-center border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">
                    Evening Routine (6:30 PM)
                </button>
            </div>

            <!-- Morning Workout Content -->
            <div id="morning-content" class="workout-content">
                <div class="mb-8">
                    <h2 class="text-2xl font-bold mb-2">Core Activation & Fat Burn</h2>
                    <p class="text-gray-600 mb-4">This high-intensity morning routine will kickstart your metabolism and target stubborn side and back fat.</p>
                    <div class="flex items-center text-sm text-gray-500">
                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        <span>45 min • 8 exercises • 340-420 kcal</span>
                    </div>
                </div>

                <!-- Exercises -->
                <div class="space-y-6">
                    <!-- Exercise 1 -->
                    <div class="exercise-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300">
                        <div class="md:flex">
                            <div class="md:flex-shrink-0 md:w-48 bg-gray-100 flex items-center justify-center">
                                <img class="h-full w-full object-cover" src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Russian Twists">
                            </div>
                            <div class="p-6 flex-1">
                                <div class="flex justify-between items-start">
                                    <div>
                                        <div class="uppercase tracking-wide text-sm text-[#00A8CC] font-semibold">Core • 3 sets</div>
                                        <h3 class="mt-1 text-xl font-semibold">Weighted Russian Twists</h3>
                                    </div>
                                    <button class="complete-btn ml-4 px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm font-medium hover:bg-[#28A745] hover:text-white transition-colors" data-exercise="russian-twists">
                                        Complete
                                    </button>
                                </div>
                                <div class="mt-4">
                                    <div class="flex items-center text-sm text-gray-500 mb-2">
                                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                                        </svg>
                                        <span>20 reps (each side) • 30 sec rest</span>
                                    </div>
                                    <p class="mt-2 text-gray-600">Sit on floor with knees bent, lean back slightly. Hold weight with both hands and rotate torso side to side, touching weight to floor each side.</p>
                                    <div class="mt-3 flex space-x-2">
                                        <span class="px-2 py-1 text-xs rounded-full bg-[#F7F9FC] text-[#004E89]">Oblique Focus</span>
                                        <span class="px-2 py-1 text-xs rounded-full bg-[#F7F9FC] text-[#004E89]">Core Stability</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="px-6 py-3 bg-gray-50 border-t border-gray-100 flex justify-between items-center">
                            <button class="text-[#00A8CC] text-sm font-medium flex items-center">
                                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                Watch Form
                            </button>
                            <div class="flex items-center text-sm text-gray-500">
                                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                </svg>
                                <span>Last done: 2 days ago</span>
                            </div>
                        </div>
                    </div>

                    <!-- Exercise 2 -->
                    <div class="exercise-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300">
                        <div class="md:flex">
                            <div class="md:flex-shrink-0 md-w-48 bg-gray-100 flex items-center justify-center">
                                <img class="h-full w-full object-cover" src="https://images.unsplash.com/photo-1535914254981-b5012eebbd15?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Mountain Climbers">
                            </div>
                            <div class="p-6 flex-1">
                                <div class="flex justify-between items-start">
                                    <div>
                                        <div class="uppercase tracking-wide text-sm text-[#00A8CC] font-semibold">Cardio • 4 sets</div>
                                        <h3 class="mt-1 text-xl font-semibold">Mountain Climbers</h3>
                                    </div>
                                    <button class="complete-btn ml-4 px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm font-medium hover:bg-[#28A745] hover:text-white transition-colors" data-exercise="mountain-climbers">
                                        Complete
                                    </button>
                                </div>
                                <div class="mt-4">
                                    <div class="flex items-center text-sm text-gray-500 mb-2">
                                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                                        </svg>
                                        <span>45 sec • 20 sec rest</span>
                                    </div>
                                    <p class="mt-2 text-gray-600">Start in plank position, quickly alternate bringing knees to chest. Keep core engaged and back flat throughout movement.</p>
                                    <div class="mt-3 flex space-x-2">
                                        <span class="px-2 py-1 text-xs rounded-full bg-[#F7F9FC] text-[#004E89]">Full Body</span>
                                        <span class="px-2 py-1 text-xs rounded-full bg-[#F7F9FC] text-[#004E89]">HIIT</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="px-6 py-3 bg-gray-50 border-t border-gray-100 flex justify-between items-center">
                            <button class="text-[#00A8CC] text-sm font-medium flex items-center">
                                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                Watch Form
                            </button>
                            <div class="flex items-center text-sm text-gray-500">
                                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                </svg>
                                <span>Last done: 3 days ago</span>
                            </div>
                        </div>
                    </div>

                    <!-- Exercise 3 -->
                    <div class="exercise-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300">
                        <div class="md:flex">
                            <div class="md:flex-shrink-0 md:w-48 bg-gray-100 flex items-center justify-center">
                                <img class="h-full w-full object-cover" src="https://images.unsplash.com/photo-1571019614242-c5c5dee9f50b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Side Plank">
                            </div>
                            <div class="p-6 flex-1">
                                <div class="flex justify-between items-start">
                                    <div>
                                        <div class="uppercase tracking-wide text-sm text-[#00A8CC] font-semibold">Core • 3 sets</div>
                                        <h3 class="mt-1 text-xl font-semibold">Weighted Side Plank</h3>
                                    </div>
                                    <button class="complete-btn ml-4 px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm font-medium hover:bg-[#28A745] hover:text-white transition-colors" data-exercise="side-plank">
                                        Complete
                                    </button>
                                </div>
                                <div class="mt-4">
                                    <div class="flex items-center text-sm text-gray-500 mb-2">
                                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                                        </svg>
                                        <span>30 sec (each side) • 20 sec rest</span>
                                    </div>
                                    <p class="mt-2 text-gray-600
</html>