Hugging Face's logo

Spaces:
sdurdiyev
/
naildesign-2
Running

App Files Community
sdurdiyev commited on
Commit
231bb8e
·
verified ·
1 Parent(s): 292f4fc

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +502 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Naildesign 2
3
- emoji: 🌍
4
  colorFrom: yellow
5
- colorTo: purple
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: naildesign-2
3
+ emoji: 🐳
4
  colorFrom: yellow
5
+ colorTo: blue
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,502 @@
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>Nail Size Guide | naildesign.ai</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
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
12
+ }
13
+ .size-preview {
14
+ transition: all 0.3s ease;
15
+ }
16
+ .size-preview:hover {
17
+ transform: scale(1.05);
18
+ }
19
+ .size-indicator {
20
+ position: absolute;
21
+ width: 100%;
22
+ height: 4px;
23
+ background: #ff9a9e;
24
+ bottom: -10px;
25
+ left: 0;
26
+ border-radius: 2px;
27
+ }
28
+ .hand-diagram {
29
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 300"><path d="M100,50 Q130,60 140,90 Q150,120 130,150 Q110,180 100,210 Q90,240 110,270 Q130,300 100,300 Q70,300 90,270 Q110,240 100,210 Q90,180 70,150 Q50,120 60,90 Q70,60 100,50" fill="none" stroke="%23ff9a9e" stroke-width="2"/></svg>');
30
+ background-repeat: no-repeat;
31
+ background-position: center;
32
+ background-size: contain;
33
+ }
34
+ .size-tool {
35
+ background: rgba(255,255,255,0.9);
36
+ backdrop-filter: blur(5px);
37
+ }
38
+ </style>
39
+ </head>
40
+ <body class="font-sans bg-pink-50">
41
+ <!-- Header -->
42
+ <header class="gradient-bg text-white shadow-lg">
43
+ <div class="container mx-auto px-4 py-6">
44
+ <div class="flex justify-between items-center">
45
+ <div class="flex items-center space-x-2">
46
+ <i class="fas fa-paint-brush text-3xl"></i>
47
+ <h1 class="text-2xl font-bold">naildesign.ai</h1>
48
+ </div>
49
+ <nav class="hidden md:flex space-x-8">
50
+ <a href="#" class="hover:text-pink-200 font-medium">Home</a>
51
+ <a href="#" class="hover:text-pink-200 font-medium">Shop</a>
52
+ <a href="#" class="hover:text-pink-200 font-medium">Size Guide</a>
53
+ <a href="#" class="hover:text-pink-200 font-medium">Contact</a>
54
+ </nav>
55
+ <div class="flex items-center space-x-4">
56
+ <button class="bg-white text-pink-500 px-4 py-2 rounded-full font-medium hover:bg-pink-100 transition">
57
+ <i class="fas fa-shopping-cart mr-2"></i>Cart
58
+ </button>
59
+ </div>
60
+ <button class="md:hidden text-2xl">
61
+ <i class="fas fa-bars"></i>
62
+ </button>
63
+ </div>
64
+ </div>
65
+ </header>
66
+
67
+ <!-- Main Content -->
68
+ <main class="container mx-auto px-4 py-12">
69
+ <!-- Page Header -->
70
+ <div class="text-center mb-16">
71
+ <h1 class="text-4xl md:text-5xl font-bold text-pink-700 mb-4">Press-On Nails Size Guide</h1>
72
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Find your perfect fit with our comprehensive sizing guide and interactive measurement tool</p>
73
+ </div>
74
+
75
+ <!-- How to Measure Section -->
76
+ <section class="mb-20">
77
+ <div class="flex flex-col lg:flex-row gap-12 items-center">
78
+ <div class="lg:w-1/2">
79
+ <h2 class="text-3xl font-bold text-pink-700 mb-6">How to Measure Your Nails</h2>
80
+ <div class="bg-white p-8 rounded-xl shadow-lg">
81
+ <ol class="space-y-6 text-gray-700">
82
+ <li class="flex items-start">
83
+ <span class="flex items-center justify-center bg-pink-100 text-pink-700 font-bold rounded-full w-8 h-8 mr-4 flex-shrink-0">1</span>
84
+ <div>
85
+ <h3 class="font-bold mb-1">Gather Your Tools</h3>
86
+ <p>You'll need a flexible measuring tape (or a strip of paper and ruler), a pen, and our printable sizing chart.</p>
87
+ </div>
88
+ </li>
89
+ <li class="flex items-start">
90
+ <span class="flex items-center justify-center bg-pink-100 text-pink-700 font-bold rounded-full w-8 h-8 mr-4 flex-shrink-0">2</span>
91
+ <div>
92
+ <h3 class="font-bold mb-1">Measure Each Nail</h3>
93
+ <p>Measure the width at the widest part of your natural nail (usually near the cuticle) in millimeters.</p>
94
+ </div>
95
+ </li>
96
+ <li class="flex items-start">
97
+ <span class="flex items-center justify-center bg-pink-100 text-pink-700 font-bold rounded-full w-8 h-8 mr-4 flex-shrink-0">3</span>
98
+ <div>
99
+ <h3 class="font-bold mb-1">Match to Our Chart</h3>
100
+ <p>Compare your measurements to our size chart below. Most people need 2-3 different sizes per hand.</p>
101
+ </div>
102
+ </li>
103
+ <li class="flex items-start">
104
+ <span class="flex items-center justify-center bg-pink-100 text-pink-700 font-bold rounded-full w-8 h-8 mr-4 flex-shrink-0">4</span>
105
+ <div>
106
+ <h3 class="font-bold mb-1">Order Custom or Standard</h3>
107
+ <p>Choose between our standard sets (most common sizes) or custom-sized sets for perfect fit.</p>
108
+ </div>
109
+ </li>
110
+ </ol>
111
+ <div class="mt-8 flex flex-col sm:flex-row gap-4">
112
+ <button class="bg-pink-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-pink-700 transition flex-1">
113
+ <i class="fas fa-print mr-2"></i> Print Sizing Chart
114
+ </button>
115
+ <button class="border-2 border-pink-600 text-pink-600 px-6 py-3 rounded-lg font-medium hover:bg-pink-50 transition flex-1">
116
+ <i class="fas fa-video mr-2"></i> Watch Tutorial
117
+ </button>
118
+ </div>
119
+ </div>
120
+ </div>
121
+ <div class="lg:w-1/2">
122
+ <div class="hand-diagram bg-white p-8 rounded-xl shadow-lg h-full min-h-[400px] flex items-center justify-center">
123
+ <div class="grid grid-cols-5 gap-4 w-full max-w-md">
124
+ <!-- Thumb -->
125
+ <div class="relative">
126
+ <div class="size-preview bg-pink-100 rounded-lg h-24 flex items-center justify-center cursor-pointer" data-size="0">
127
+ <span class="text-pink-700 font-bold">T</span>
128
+ </div>
129
+ <div class="text-center mt-3">
130
+ <p class="text-sm font-medium">Thumb</p>
131
+ <p class="text-xs text-gray-500">~12-16mm</p>
132
+ </div>
133
+ </div>
134
+ <!-- Fingers -->
135
+ <div class="relative">
136
+ <div class="size-preview bg-pink-100 rounded-lg h-32 flex items-center justify-center cursor-pointer" data-size="1">
137
+ <span class="text-pink-700 font-bold">1</span>
138
+ </div>
139
+ <div class="text-center mt-3">
140
+ <p class="text-sm font-medium">Index</p>
141
+ <p class="text-xs text-gray-500">~9-12mm</p>
142
+ </div>
143
+ </div>
144
+ <div class="relative">
145
+ <div class="size-preview bg-pink-100 rounded-lg h-36 flex items-center justify-center cursor-pointer" data-size="2">
146
+ <span class="text-pink-700 font-bold">2</span>
147
+ </div>
148
+ <div class="text-center mt-3">
149
+ <p class="text-sm font-medium">Middle</p>
150
+ <p class="text-xs text-gray-500">~10-13mm</p>
151
+ </div>
152
+ </div>
153
+ <div class="relative">
154
+ <div class="size-preview bg-pink-100 rounded-lg h-32 flex items-center justify-center cursor-pointer" data-size="3">
155
+ <span class="text-pink-700 font-bold">3</span>
156
+ </div>
157
+ <div class="text-center mt-3">
158
+ <p class="text-sm font-medium">Ring</p>
159
+ <p class="text-xs text-gray-500">~9-12mm</p>
160
+ </div>
161
+ </div>
162
+ <div class="relative">
163
+ <div class="size-preview bg-pink-100 rounded-lg h-28 flex items-center justify-center cursor-pointer" data-size="4">
164
+ <span class="text-pink-700 font-bold">4</span>
165
+ </div>
166
+ <div class="text-center mt-3">
167
+ <p class="text-sm font-medium">Pinky</p>
168
+ <p class="text-xs text-gray-500">~7-10mm</p>
169
+ </div>
170
+ </div>
171
+ </div>
172
+ </div>
173
+ </div>
174
+ </div>
175
+ </section>
176
+
177
+ <!-- Size Chart Section -->
178
+ <section class="mb-20">
179
+ <h2 class="text-3xl font-bold text-pink-700 mb-8 text-center">Our Standard Size Chart</h2>
180
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
181
+ <div class="overflow-x-auto">
182
+ <table class="w-full">
183
+ <thead class="bg-pink-600 text-white">
184
+ <tr>
185
+ <th class="py-4 px-6 text-left">Size</th>
186
+ <th class="py-4 px-6 text-center">Width (mm)</th>
187
+ <th class="py-4 px-6 text-center">Most Common For</th>
188
+ <th class="py-4 px-6 text-center">Included in Standard Set</th>
189
+ </tr>
190
+ </thead>
191
+ <tbody class="divide-y divide-gray-200">
192
+ <tr class="hover:bg-pink-50">
193
+ <td class="py-4 px-6 font-bold">XXS</td>
194
+ <td class="py-4 px-6 text-center">6-7mm</td>
195
+ <td class="py-4 px-6 text-center">Children, petite pinkies</td>
196
+ <td class="py-4 px-6 text-center text-pink-600"><i class="fas fa-times"></i></td>
197
+ </tr>
198
+ <tr class="hover:bg-pink-50">
199
+ <td class="py-4 px-6 font-bold">XS</td>
200
+ <td class="py-4 px-6 text-center">7-8mm</td>
201
+ <td class="py-4 px-6 text-center">Small pinkies, ring fingers</td>
202
+ <td class="py-4 px-6 text-center text-pink-600"><i class="fas fa-check"></i> (2 per set)</td>
203
+ </tr>
204
+ <tr class="hover:bg-pink-50">
205
+ <td class="py-4 px-6 font-bold">S</td>
206
+ <td class="py-4 px-6 text-center">8-9mm</td>
207
+ <td class="py-4 px-6 text-center">Pinkies, narrow ring/index</td>
208
+ <td class="py-4 px-6 text-center text-pink-600"><i class="fas fa-check"></i> (2 per set)</td>
209
+ </tr>
210
+ <tr class="hover:bg-pink-50">
211
+ <td class="py-4 px-6 font-bold">M</td>
212
+ <td class="py-4 px-6 text-center">9-10mm</td>
213
+ <td class="py-4 px-6 text-center">Average index/ring fingers</td>
214
+ <td class="py-4 px-6 text-center text-pink-600"><i class="fas fa-check"></i> (4 per set)</td>
215
+ </tr>
216
+ <tr class="hover:bg-pink-50">
217
+ <td class="py-4 px-6 font-bold">L</td>
218
+ <td class="py-4 px-6 text-center">10-11mm</td>
219
+ <td class="py-4 px-6 text-center">Middle fingers, wide index</td>
220
+ <td class="py-4 px-6 text-center text-pink-600"><i class="fas fa-check"></i> (2 per set)</td>
221
+ </tr>
222
+ <tr class="hover:bg-pink-50">
223
+ <td class="py-4 px-6 font-bold">XL</td>
224
+ <td class="py-4 px-6 text-center">11-12mm</td>
225
+ <td class="py-4 px-6 text-center">Middle fingers, small thumbs</td>
226
+ <td class="py-4 px-6 text-center text-pink-600"><i class="fas fa-check"></i> (1 per set)</td>
227
+ </tr>
228
+ <tr class="hover:bg-pink-50">
229
+ <td class="py-4 px-6 font-bold">XXL</td>
230
+ <td class="py-4 px-6 text-center">12-13mm</td>
231
+ <td class="py-4 px-6 text-center">Average thumbs</td>
232
+ <td class="py-4 px-6 text-center text-pink-600"><i class="fas fa-check"></i> (1 per set)</td>
233
+ </tr>
234
+ <tr class="hover:bg-pink-50">
235
+ <td class="py-4 px-6 font-bold">XXXL</td>
236
+ <td class="py-4 px-6 text-center">13-15mm</td>
237
+ <td class="py-4 px-6 text-center">Wide thumbs</td>
238
+ <td class="py-4 px-6 text-center text-pink-600"><i class="fas fa-times"></i></td>
239
+ </tr>
240
+ </tbody>
241
+ </table>
242
+ </div>
243
+ <div class="p-6 bg-pink-50 border-t border-pink-100">
244
+ <p class="text-center text-pink-700 font-medium">
245
+ <i class="fas fa-info-circle mr-2"></i> Standard sets include 14 nails (7 sizes). Custom sets allow you to choose exact sizes for each nail.
246
+ </p>
247
+ </div>
248
+ </div>
249
+ </section>
250
+
251
+ <!-- Interactive Size Tool -->
252
+ <section class="mb-20">
253
+ <h2 class="text-3xl font-bold text-pink-700 mb-8 text-center">Interactive Size Finder</h2>
254
+ <div class="size-tool bg-white rounded-xl shadow-lg p-8 max-w-3xl mx-auto">
255
+ <div class="flex flex-col md:flex-row gap-8">
256
+ <div class="md:w-1/2">
257
+ <h3 class="text-xl font-bold mb-4">Enter Your Measurements</h3>
258
+ <div class="space-y-4">
259
+ <div>
260
+ <label class="block text-gray-700 mb-1">Thumb (mm)</label>
261
+ <input type="number" min="6" max="20" class="w-full p-3 border border-gray-300 rounded-lg" placeholder="12-16">
262
+ </div>
263
+ <div>
264
+ <label class="block text-gray-700 mb-1">Index Finger (mm)</label>
265
+ <input type="number" min="6" max="20" class="w-full p-3 border border-gray-300 rounded-lg" placeholder="9-12">
266
+ </div>
267
+ <div>
268
+ <label class="block text-gray-700 mb-1">Middle Finger (mm)</label>
269
+ <input type="number" min="6" max="20" class="w-full p-3 border border-gray-300 rounded-lg" placeholder="10-13">
270
+ </div>
271
+ <div>
272
+ <label class="block text-gray-700 mb-1">Ring Finger (mm)</label>
273
+ <input type="number" min="6" max="20" class="w-full p-3 border border-gray-300 rounded-lg" placeholder="9-12">
274
+ </div>
275
+ <div>
276
+ <label class="block text-gray-700 mb-1">Pinky (mm)</label>
277
+ <input type="number" min="6" max="20" class="w-full p-3 border border-gray-300 rounded-lg" placeholder="7-10">
278
+ </div>
279
+ <button class="w-full bg-pink-600 text-white py-3 rounded-lg font-medium hover:bg-pink-700 transition">
280
+ Find My Sizes
281
+ </button>
282
+ </div>
283
+ </div>
284
+ <div class="md:w-1/2">
285
+ <h3 class="text-xl font-bold mb-4">Your Recommended Sizes</h3>
286
+ <div class="bg-pink-50 rounded-lg p-6 h-full flex flex-col justify-center">
287
+ <div class="text-center py-8">
288
+ <i class="fas fa-hand-paper text-5xl text-pink-400 mb-4"></i>
289
+ <p class="text-gray-600">Enter your measurements to see your recommended sizes</p>
290
+ </div>
291
+ <div id="sizeResults" class="hidden">
292
+ <div class="grid grid-cols-2 gap-4">
293
+ <div class="bg-white p-3 rounded-lg shadow-sm">
294
+ <p class="font-bold text-pink-600">Thumb:</p>
295
+ <p>XXL (13mm)</p>
296
+ </div>
297
+ <div class="bg-white p-3 rounded-lg shadow-sm">
298
+ <p class="font-bold text-pink-600">Index:</p>
299
+ <p>M (9.5mm)</p>
300
+ </div>
301
+ <div class="bg-white p-3 rounded-lg shadow-sm">
302
+ <p class="font-bold text-pink-600">Middle:</p>
303
+ <p>L (10.5mm)</p>
304
+ </div>
305
+ <div class="bg-white p-3 rounded-lg shadow-sm">
306
+ <p class="font-bold text-pink-600">Ring:</p>
307
+ <p>M (9mm)</p>
308
+ </div>
309
+ <div class="bg-white p-3 rounded-lg shadow-sm">
310
+ <p class="font-bold text-pink-600">Pinky:</p>
311
+ <p>S (8mm)</p>
312
+ </div>
313
+ </div>
314
+ <div class="mt-6 bg-white p-4 rounded-lg">
315
+ <p class="font-bold mb-2">Recommended Set:</p>
316
+ <p>Standard Set + XXS Pinky (or Custom Set)</p>
317
+ <button class="w-full mt-4 bg-pink-600 text-white py-2 rounded-lg font-medium hover:bg-pink-700 transition">
318
+ Shop Custom Sets
319
+ </button>
320
+ </div>
321
+ </div>
322
+ </div>
323
+ </div>
324
+ </div>
325
+ </div>
326
+ </section>
327
+
328
+ <!-- FAQ Section -->
329
+ <section>
330
+ <h2 class="text-3xl font-bold text-pink-700 mb-8 text-center">Frequently Asked Questions</h2>
331
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden max-w-3xl mx-auto">
332
+ <div class="divide-y divide-gray-200">
333
+ <!-- FAQ Item 1 -->
334
+ <div class="p-6 hover:bg-pink-50 transition cursor-pointer faq-item">
335
+ <div class="flex justify-between items-center">
336
+ <h3 class="font-bold text-lg">What if my nails are between sizes?</h3>
337
+ <i class="fas fa-chevron-down text-pink-600 transition-transform"></i>
338
+ </div>
339
+ <div class="faq-answer mt-3 hidden text-gray-600">
340
+ <p>We recommend sizing down if you're between sizes. Press-on nails can be gently filed to fit perfectly. Our nails have a flexible base that can conform slightly to your natural nail shape.</p>
341
+ </div>
342
+ </div>
343
+
344
+ <!-- FAQ Item 2 -->
345
+ <div class="p-6 hover:bg-pink-50 transition cursor-pointer faq-item">
346
+ <div class="flex justify-between items-center">
347
+ <h3 class="font-bold text-lg">How do I measure if my nails are uneven?</h3>
348
+ <i class="fas fa-chevron-down text-pink-600 transition-transform"></i>
349
+ </div>
350
+ <div class="faq-answer mt-3 hidden text-gray-600">
351
+ <p>Measure each nail individually, even if they're on the same finger. Many people have slightly different sized nails on each hand. For the most accurate fit, consider ordering a custom set where you can specify each nail's size.</p>
352
+ </div>
353
+ </div>
354
+
355
+ <!-- FAQ Item 3 -->
356
+ <div class="p-6 hover:bg-pink-50 transition cursor-pointer faq-item">
357
+ <div class="flex justify-between items-center">
358
+ <h3 class="font-bold text-lg">Can I mix sizes from different sets?</h3>
359
+ <i class="fas fa-chevron-down text-pink-600 transition-transform"></i>
360
+ </div>
361
+ <div class="faq-answer mt-3 hidden text-gray-600">
362
+ <p>Absolutely! Many customers purchase two standard sets to mix and match sizes. You can also purchase individual sizes from our "Single Sizes" collection to supplement your set.</p>
363
+ </div>
364
+ </div>
365
+
366
+ <!-- FAQ Item 4 -->
367
+ <div class="p-6 hover:bg-pink-50 transition cursor-pointer faq-item">
368
+ <div class="flex justify-between items-center">
369
+ <h3 class="font-bold text-lg">How do I know if I need a custom set?</h3>
370
+ <i class="fas fa-chevron-down text-pink-600 transition-transform"></i>
371
+ </div>
372
+ <div class="faq-answer mt-3 hidden text-gray-600">
373
+ <p>Consider custom sizing if: 1) Your nails are significantly wider/narrower than average, 2) You need sizes not included in standard sets (like XXS or XXXL), or 3) Your nails vary more than 2mm from the standard progression.</p>
374
+ </div>
375
+ </div>
376
+
377
+ <!-- FAQ Item 5 -->
378
+ <div class="p-6 hover:bg-pink-50 transition cursor-pointer faq-item">
379
+ <div class="flex justify-between items-center">
380
+ <h3 class="font-bold text-lg">What's the return policy for wrong sizes?</h3>
381
+ <i class="fas fa-chevron-down text-pink-600 transition-transform"></i>
382
+ </div>
383
+ <div class="faq-answer mt-3 hidden text-gray-600">
384
+ <p>We offer free size exchanges within 14 days of purchase. Unused nails in original packaging can be exchanged for correct sizes. Custom sets are final sale but we provide detailed sizing guidance to ensure perfect fit.</p>
385
+ </div>
386
+ </div>
387
+ </div>
388
+ </div>
389
+ </section>
390
+ </main>
391
+
392
+ <!-- CTA Section -->
393
+ <section class="gradient-bg text-white py-16">
394
+ <div class="container mx-auto px-4 text-center">
395
+ <h2 class="text-3xl font-bold mb-6">Ready for Perfect-Fit Nails?</h2>
396
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Shop our collection of standard and custom-sized press-on nails</p>
397
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
398
+ <button class="bg-white text-pink-600 px-8 py-3 rounded-full font-bold text-lg hover:bg-pink-100 transition">
399
+ Shop Standard Sets
400
+ </button>
401
+ <button class="bg-transparent border-2 border-white px-8 py-3 rounded-full font-bold text-lg hover:bg-white hover:text-pink-600 transition">
402
+ Create Custom Set
403
+ </button>
404
+ </div>
405
+ </div>
406
+ </section>
407
+
408
+ <!-- Footer -->
409
+ <footer class="bg-gray-900 text-white py-12">
410
+ <div class="container mx-auto px-4">
411
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
412
+ <div>
413
+ <h3 class="text-xl font-bold mb-4 flex items-center">
414
+ <i class="fas fa-paint-brush mr-2"></i> naildesign.ai
415
+ </h3>
416
+ <p class="text-gray-400">Revolutionizing nail art with AI technology. Create, try, and wear stunning designs effortlessly.</p>
417
+ </div>
418
+
419
+ <div>
420
+ <h4 class="font-bold mb-4">Quick Links</h4>
421
+ <ul class="space-y-2">
422
+ <li><a href="#" class="text-gray-400 hover:text-white">Home</a></li>
423
+ <li><a href="#" class="text-gray-400 hover:text-white">Shop</a></li>
424
+ <li><a href="#" class="text-gray-400 hover:text-white">Size Guide</a></li>
425
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
426
+ </ul>
427
+ </div>
428
+
429
+ <div>
430
+ <h4 class="font-bold mb-4">Support</h4>
431
+ <ul class="space-y-2">
432
+ <li><a href="#" class="text-gray-400 hover:text-white">FAQs</a></li>
433
+ <li><a href="#" class="text-gray-400 hover:text-white">Shipping Policy</a></li>
434
+ <li><a href="#" class="text-gray-400 hover:text-white">Returns & Exchanges</a></li>
435
+ <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li>
436
+ </ul>
437
+ </div>
438
+
439
+ <div>
440
+ <h4 class="font-bold mb-4">Connect With Us</h4>
441
+ <div class="flex space-x-4 mb-4">
442
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-pink-600 transition">
443
+ <i class="fab fa-instagram"></i>
444
+ </a>
445
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-pink-600 transition">
446
+ <i class="fab fa-tiktok"></i>
447
+ </a>
448
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-pink-600 transition">
449
+ <i class="fab fa-pinterest"></i>
450
+ </a>
451
+ </div>
452
+ <p class="text-gray-400">
453
+ <i class="fas fa-envelope mr-2"></i> hello@naildesign.ai
454
+ </p>
455
+ </div>
456
+ </div>
457
+
458
+ <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
459
+ <p>© 2023 naildesign.ai. All rights reserved.</p>
460
+ </div>
461
+ </div>
462
+ </footer>
463
+
464
+ <script>
465
+ // Interactive size preview
466
+ document.querySelectorAll('.size-preview').forEach(preview => {
467
+ preview.addEventListener('click', function() {
468
+ // Remove all active indicators
469
+ document.querySelectorAll('.size-indicator').forEach(ind => ind.remove());
470
+
471
+ // Add indicator to clicked preview
472
+ const indicator = document.createElement('div');
473
+ indicator.className = 'size-indicator';
474
+ this.appendChild(indicator);
475
+
476
+ // Show measurement input for this finger
477
+ const sizeIndex = this.getAttribute('data-size');
478
+ const inputs = document.querySelectorAll('input[type="number"]');
479
+ if (inputs[sizeIndex]) {
480
+ inputs[sizeIndex].focus();
481
+ }
482
+ });
483
+ });
484
+
485
+ // FAQ accordion
486
+ document.querySelectorAll('.faq-item').forEach(item => {
487
+ item.addEventListener('click', function() {
488
+ const answer = this.querySelector('.faq-answer');
489
+ const icon = this.querySelector('.fa-chevron-down');
490
+
491
+ answer.classList.toggle('hidden');
492
+ icon.classList.toggle('rotate-180');
493
+ });
494
+ });
495
+
496
+ // Size finder button
497
+ document.querySelector('.size-tool button').addEventListener('click', function() {
498
+ document.getElementById('sizeResults').classList.remove('hidden');
499
+ });
500
+ </script>
501
+ <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=sdurdiyev/naildesign-2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
502
+ </html>
prompts.txt ADDED
File without changes