Hugging Face's logo

Spaces:
j1225d
/
kintsugitraining
Running

App Files Community
j1225d commited on
Commit
71638fe
·
verified ·
1 Parent(s): 0779555

let's make all the potential selections black, and then white when selected - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +289 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Kintsugitraining
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: kintsugitraining
3
+ emoji: 🐳
4
+ colorFrom: gray
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,289 @@
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>Build Your Perfect Workout | Kintsugi 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
+ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');
11
+
12
+ body {
13
+ font-family: 'Inter', sans-serif;
14
+ background-color: #000000;
15
+ color: #ffffff;
16
+ }
17
+
18
+ h1, h2, h3, h4 {
19
+ font-family: 'Playfair Display', serif;
20
+ color: #d4af37;
21
+ letter-spacing: -0.025em;
22
+ }
23
+
24
+ .equipment-card:hover {
25
+ transform: translateY(-5px);
26
+ box-shadow: 0 10px 25px -5px rgba(212, 175, 55, 0.3);
27
+ border-color: #d4af37;
28
+ background-color: #111111;
29
+ }
30
+
31
+ .gold-gradient {
32
+ background: linear-gradient(135deg, #d4af37 0%, #a78a3a 100%);
33
+ }
34
+
35
+ .step-indicator.active {
36
+ background-color: #d4af37;
37
+ color: #000000;
38
+ border-color: #d4af37;
39
+ }
40
+
41
+ .nav-link:hover {
42
+ color: #d4af37;
43
+ }
44
+
45
+ .equipment-card {
46
+ background-color: #111111;
47
+ border: 1px solid #222222;
48
+ }
49
+
50
+ footer {
51
+ background-color: #000000;
52
+ border-top: 1px solid #222222;
53
+ }
54
+
55
+ .gold-text {
56
+ color: #d4af37;
57
+ }
58
+ </style>
59
+ </head>
60
+ <body class="min-h-screen">
61
+ <!-- Header/Navigation -->
62
+ <header class="bg-black border-b border-gray-800">
63
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
64
+ <div class="flex items-center space-x-2">
65
+ <img src="https://ktworkout-kintsugi-tradings-projects.vercel.app/_next/static/media/logo.810a19e0.png"
66
+ alt="Kintsugi Training Logo" class="h-10 w-10">
67
+ <span class="text-xl font-bold gold-text">Kintsugi Training</span>
68
+ </div>
69
+
70
+ <nav class="hidden md:flex space-x-6">
71
+ <a href="#" class="nav-link text-gray-600 hover:text-amber-500 transition">Home</a>
72
+ <a href="#" class="nav-link text-gray-600 hover:text-amber-500 transition">Profile</a>
73
+ <div class="flex space-x-4">
74
+ <a href="#" class="px-4 py-2 rounded-md text-gray-600 hover:bg-gray-100 transition">Login</a>
75
+ <a href="#" class="px-4 py-2 rounded-md gold-gradient text-white hover:opacity-90 transition">Register</a>
76
+ </div>
77
+ </nav>
78
+
79
+ <button class="md:hidden text-gray-600">
80
+ <i class="fas fa-bars text-2xl"></i>
81
+ </button>
82
+ </div>
83
+ </header>
84
+
85
+ <!-- Mobile Menu (hidden by default) -->
86
+ <div class="md:hidden bg-white shadow-lg hidden" id="mobileMenu">
87
+ <div class="container mx-auto px-4 py-4 flex flex-col space-y-4">
88
+ <a href="#" class="text-gray-600 hover:text-amber-500 py-2">Home</a>
89
+ <a href="#" class="text-gray-600 hover:text-amber-500 py-2">Profile</a>
90
+ <div class="flex flex-col space-y-2 pt-2 border-t border-gray-100">
91
+ <a href="#" class="px-4 py-2 rounded-md text-center text-gray-600 hover:bg-gray-100">Login</a>
92
+ <a href="#" class="px-4 py-2 rounded-md text-center gold-gradient text-white hover:opacity-90">Register</a>
93
+ </div>
94
+ </div>
95
+ </div>
96
+
97
+ <!-- Main Content -->
98
+ <main class="container mx-auto px-4 py-8 md:py-12">
99
+ <div class="max-w-4xl mx-auto text-center mb-16">
100
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Build Your Perfect Workout</h1>
101
+ <p class="text-gray-400 max-w-2xl mx-auto text-lg">
102
+ Select your equipment, target muscles, and customize exercises to create a personalized workout plan.
103
+ </p>
104
+ </div>
105
+
106
+ <!-- Progress Steps -->
107
+ <div class="flex justify-center mb-12">
108
+ <div class="flex items-center">
109
+ <!-- Step 1 -->
110
+ <div class="flex flex-col items-center">
111
+ <div class="step-indicator w-10 h-10 rounded-full border-2 border-amber-500 flex items-center justify-center font-bold text-amber-500 active">
112
+ 1
113
+ </div>
114
+ <span class="mt-2 text-sm font-medium text-gray-700">Equipment</span>
115
+ </div>
116
+
117
+ <div class="w-16 md:w-24 h-1 bg-gray-200 mx-2"></div>
118
+
119
+ <!-- Step 2 -->
120
+ <div class="flex flex-col items-center">
121
+ <div class="step-indicator w-10 h-10 rounded-full border-2 border-gray-300 flex items-center justify-center font-bold text-gray-400">
122
+ 2
123
+ </div>
124
+ <span class="mt-2 text-sm font-medium text-gray-500">Muscles</span>
125
+ </div>
126
+
127
+ <div class="w-16 md:w-24 h-1 bg-gray-200 mx-2"></div>
128
+
129
+ <!-- Step 3 -->
130
+ <div class="flex flex-col items-center">
131
+ <div class="step-indicator w-10 h-10 rounded-full border-2 border-gray-300 flex items-center justify-center font-bold text-gray-400">
132
+ 3
133
+ </div>
134
+ <span class="mt-2 text-sm font-medium text-gray-500">Exercises</span>
135
+ </div>
136
+ </div>
137
+ </div>
138
+
139
+ <!-- Equipment Selection -->
140
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6">
141
+ <!-- Bodyweight Card -->
142
+ <div class="equipment-card rounded-lg overflow-hidden transition duration-300 cursor-pointer">
143
+ <div class="p-6 flex flex-col items-center">
144
+ <div class="w-20 h-20 mb-4 flex items-center justify-center">
145
+ <img src="https://ktworkout-kintsugi-tradings-projects.vercel.app/_next/static/media/bodyweight.e08c10a8.png"
146
+ alt="Bodyweight" class="w-full h-full object-contain">
147
+ </div>
148
+ <h3 class="text-lg font-semibold">Bodyweight</h3>
149
+ </div>
150
+ </div>
151
+
152
+ <!-- Dumbbell Card -->
153
+ <div class="equipment-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 cursor-pointer">
154
+ <div class="p-6 flex flex-col items-center">
155
+ <div class="w-20 h-20 mb-4 flex items-center justify-center">
156
+ <img src="https://ktworkout-kintsugi-tradings-projects.vercel.app/_next/static/media/dumbbell.0cab1a70.png"
157
+ alt="Dumbbell" class="w-full h-full object-contain">
158
+ </div>
159
+ <h3 class="text-lg font-semibold">Dumbbell</h3>
160
+ </div>
161
+ </div>
162
+
163
+ <!-- Barbell Card -->
164
+ <div class="equipment-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 cursor-pointer">
165
+ <div class="p-6 flex flex-col items-center">
166
+ <div class="w-20 h-20 mb-4 flex items-center justify-center">
167
+ <img src="https://ktworkout-kintsugi-tradings-projects.vercel.app/_next/static/media/barbell.50cb27fb.png"
168
+ alt="Barbell" class="w-full h-full object-contain">
169
+ </div>
170
+ <h3 class="text-lg font-semibold text-gray-800">Barbell</h3>
171
+ </div>
172
+ </div>
173
+
174
+ <!-- Kettlebell Card -->
175
+ <div class="equipment-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 cursor-pointer">
176
+ <div class="p-6 flex flex-col items-center">
177
+ <div class="w-20 h-20 mb-4 flex items-center justify-center">
178
+ <img src="https://ktworkout-kintsugi-tradings-projects.vercel.app/_next/static/media/kettlebell.9f01f239.png"
179
+ alt="Kettlebell" class="w-full h-full object-contain">
180
+ </div>
181
+ <h3 class="text-lg font-semibold text-gray-800">Kettlebell</h3>
182
+ </div>
183
+ </div>
184
+
185
+ <!-- Band Card -->
186
+ <div class="equipment-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 cursor-pointer">
187
+ <div class="p-6 flex flex-col items-center">
188
+ <div class="w-20 h-20 mb-4 flex items-center justify-center">
189
+ <img src="https://ktworkout-kintsugi-tradings-projects.vercel.app/_next/static/media/band.e40118b4.png"
190
+ alt="Band" class="w-full h-full object-contain">
191
+ </div>
192
+ <h3 class="text-lg font-semibold text-gray-800">Band</h3>
193
+ </div>
194
+ </div>
195
+
196
+ <!-- Plate Card -->
197
+ <div class="equipment-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 cursor-pointer">
198
+ <div class="p-6 flex flex-col items-center">
199
+ <div class="w-20 h-20 mb-4 flex items-center justify-center">
200
+ <img src="https://ktworkout-kintsugi-tradings-projects.vercel.app/_next/static/media/plate.ae3a3195.png"
201
+ alt="Plate" class="w-full h-full object-contain">
202
+ </div>
203
+ <h3 class="text-lg font-semibold text-gray-800">Plate</h3>
204
+ </div>
205
+ </div>
206
+
207
+ <!-- Pull-up bar Card -->
208
+ <div class="equipment-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 cursor-pointer">
209
+ <div class="p-6 flex flex-col items-center">
210
+ <div class="w-20 h-20 mb-4 flex items-center justify-center">
211
+ <img src="https://ktworkout-kintsugi-tradings-projects.vercel.app/_next/static/media/pull-up-bar.5a1808c8.png"
212
+ alt="Pull-up bar" class="w-full h-full object-contain">
213
+ </div>
214
+ <h3 class="text-lg font-semibold text-gray-800">Pull-up bar</h3>
215
+ </div>
216
+ </div>
217
+
218
+ <!-- Bench Card -->
219
+ <div class="equipment-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 cursor-pointer">
220
+ <div class="p-6 flex flex-col items-center">
221
+ <div class="w-20 h-20 mb-4 flex items-center justify-center">
222
+ <img src="https://ktworkout-kintsugi-tradings-projects.vercel.app/_next/static/media/bench.15b24162.png"
223
+ alt="Bench" class="w-full h-full object-contain">
224
+ </div>
225
+ <h3 class="text-lg font-semibold text-gray-800">Bench</h3>
226
+ </div>
227
+ </div>
228
+ </div>
229
+
230
+ <!-- Navigation Buttons -->
231
+ <div class="flex justify-between mt-12">
232
+ <button class="px-6 py-3 rounded-md text-gray-400 hover:text-gold-500 hover:bg-gray-800 transition border border-gray-700">
233
+ <i class="fas fa-arrow-left mr-2"></i> Back
234
+ </button>
235
+ <button class="px-6 py-3 rounded-md gold-gradient text-black hover:opacity-90 transition font-medium">
236
+ Next <i class="fas fa-arrow-right ml-2"></i>
237
+ </button>
238
+ </div>
239
+ </main>
240
+
241
+ <!-- Footer -->
242
+ <footer class="py-8 mt-12">
243
+ <div class="container mx-auto px-4">
244
+ <div class="flex flex-col md:flex-row justify-between items-center">
245
+ <div class="flex items-center space-x-2 mb-4 md:mb-0">
246
+ <img src="https://ktworkout-kintsugi-tradings-projects.vercel.app/_next/static/media/logo.810a19e0.png"
247
+ alt="Kintsugi Training Logo" class="h-8 w-8">
248
+ <span class="text-lg font-semibold text-gray-700">Kintsugi Training</span>
249
+ </div>
250
+
251
+ <div class="flex space-x-6">
252
+ <a href="#" class="text-gray-500 hover:text-amber-500 transition">Terms</a>
253
+ <a href="#" class="text-gray-500 hover:text-amber-500 transition">Privacy</a>
254
+ <a href="#" class="text-gray-500 hover:text-amber-500 transition">Contact</a>
255
+ </div>
256
+ </div>
257
+
258
+ <div class="mt-6 text-center text-gray-400 text-sm">
259
+ &copy; 2023 Kintsugi Training. All rights reserved.
260
+ </div>
261
+ </div>
262
+ </footer>
263
+
264
+ <script>
265
+ // Mobile menu toggle
266
+ document.querySelector('button.md\\:hidden').addEventListener('click', function() {
267
+ const menu = document.getElementById('mobileMenu');
268
+ menu.classList.toggle('hidden');
269
+ });
270
+
271
+ // Equipment card selection
272
+ const equipmentCards = document.querySelectorAll('.equipment-card');
273
+ equipmentCards.forEach(card => {
274
+ card.addEventListener('click', function() {
275
+ // Remove active class from all cards
276
+ equipmentCards.forEach(c => {
277
+ c.classList.remove('border-2', 'border-amber-500');
278
+ c.style.backgroundColor = '#000000';
279
+ });
280
+
281
+ // Add active class to clicked card
282
+ this.classList.add('border-2', 'border-amber-500');
283
+ this.style.backgroundColor = '#ffffff';
284
+ this.style.color = '#000000';
285
+ });
286
+ });
287
+ </script>
288
+ <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=j1225d/kintsugitraining" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
289
+ </html>