Hugging Face's logo

Spaces:
eubottura
/
anycoder-5f8244d4
Running

App Files Community
eubottura commited on
Commit
455c405
·
verified ·
1 Parent(s): 02a5a6b

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +851 -19
index.html CHANGED
@@ -1,19 +1,851 @@
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="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Leve 6, Pague Só 3! - Polo Tucano Masculina Premium</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ :root {
10
+ --primary-color: #2c3e50;
11
+ --secondary-color: #3498db;
12
+ --accent-color: #e74c3c;
13
+ --light-color: #ecf0f1;
14
+ --dark-color: #2c3e50;
15
+ --success-color: #2ecc71;
16
+ }
17
+
18
+ * {
19
+ margin: 0;
20
+ padding: 0;
21
+ box-sizing: border-box;
22
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
23
+ }
24
+
25
+ body {
26
+ background-color: #f5f7fa;
27
+ color: var(--dark-color);
28
+ line-height: 1.6;
29
+ }
30
+
31
+ header {
32
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
33
+ color: white;
34
+ padding: 1.5rem 0;
35
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
36
+ }
37
+
38
+ .container {
39
+ max-width: 1400px;
40
+ margin: 0 auto;
41
+ padding: 0 1rem;
42
+ }
43
+
44
+ .header-content {
45
+ display: flex;
46
+ justify-content: space-between;
47
+ align-items: center;
48
+ }
49
+
50
+ .logo {
51
+ font-size: 1.8rem;
52
+ font-weight: 700;
53
+ display: flex;
54
+ align-items: center;
55
+ gap: 0.5rem;
56
+ }
57
+
58
+ .logo-icon {
59
+ font-size: 2rem;
60
+ }
61
+
62
+ .header-right {
63
+ display: flex;
64
+ align-items: center;
65
+ gap: 1.5rem;
66
+ }
67
+
68
+ .anycoder-link {
69
+ color: white;
70
+ text-decoration: none;
71
+ font-size: 0.9rem;
72
+ opacity: 0.8;
73
+ transition: opacity 0.3s;
74
+ }
75
+
76
+ .anycoder-link:hover {
77
+ opacity: 1;
78
+ }
79
+
80
+ .cart-icon {
81
+ font-size: 1.5rem;
82
+ cursor: pointer;
83
+ position: relative;
84
+ }
85
+
86
+ .cart-count {
87
+ position: absolute;
88
+ top: -8px;
89
+ right: -8px;
90
+ background: var(--accent-color);
91
+ color: white;
92
+ border-radius: 50%;
93
+ width: 20px;
94
+ height: 20px;
95
+ display: flex;
96
+ justify-content: center;
97
+ align-items: center;
98
+ font-size: 0.7rem;
99
+ }
100
+
101
+ .breadcrumb {
102
+ background-color: white;
103
+ padding: 0.8rem 0;
104
+ border-bottom: 1px solid #e1e8ed;
105
+ }
106
+
107
+ .breadcrumb-content {
108
+ display: flex;
109
+ align-items: center;
110
+ gap: 0.5rem;
111
+ font-size: 0.9rem;
112
+ color: #7f8c8d;
113
+ }
114
+
115
+ .breadcrumb a {
116
+ color: var(--secondary-color);
117
+ text-decoration: none;
118
+ }
119
+
120
+ .main-content {
121
+ display: grid;
122
+ grid-template-columns: 1fr 1fr;
123
+ gap: 2rem;
124
+ padding: 2rem 0;
125
+ align-items: start;
126
+ }
127
+
128
+ .product-gallery {
129
+ background: white;
130
+ padding: 1.5rem;
131
+ border-radius: 8px;
132
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
133
+ }
134
+
135
+ .main-image-container {
136
+ position: relative;
137
+ margin-bottom: 1.5rem;
138
+ border: 1px solid #e1e8ed;
139
+ border-radius: 4px;
140
+ overflow: hidden;
141
+ }
142
+
143
+ .main-image {
144
+ width: 100%;
145
+ height: 400px;
146
+ object-fit: contain;
147
+ background-color: #f0f0f0;
148
+ display: block;
149
+ }
150
+
151
+ .thumbnail-container {
152
+ display: grid;
153
+ grid-template-columns: repeat(4, 1fr);
154
+ gap: 0.5rem;
155
+ }
156
+
157
+ .thumbnail {
158
+ width: 100%;
159
+ height: 80px;
160
+ object-fit: cover;
161
+ cursor: pointer;
162
+ border: 2px solid transparent;
163
+ border-radius: 4px;
164
+ transition: all 0.3s;
165
+ }
166
+
167
+ .thumbnail:hover, .thumbnail.active {
168
+ border-color: var(--secondary-color);
169
+ }
170
+
171
+ .product-info {
172
+ background: white;
173
+ padding: 1.5rem;
174
+ border-radius: 8px;
175
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
176
+ }
177
+
178
+ .product-title {
179
+ font-size: 1.8rem;
180
+ font-weight: 600;
181
+ margin-bottom: 0.5rem;
182
+ color: var(--primary-color);
183
+ }
184
+
185
+ .product-subtitle {
186
+ font-size: 1.1rem;
187
+ color: #7f8c8d;
188
+ margin-bottom: 1rem;
189
+ }
190
+
191
+ .rating {
192
+ display: flex;
193
+ align-items: center;
194
+ gap: 0.5rem;
195
+ margin-bottom: 1rem;
196
+ }
197
+
198
+ .stars {
199
+ color: #f39c12;
200
+ }
201
+
202
+ .price-container {
203
+ margin: 1.5rem 0;
204
+ }
205
+
206
+ .original-price {
207
+ text-decoration: line-through;
208
+ color: #95a5a6;
209
+ font-size: 1.1rem;
210
+ }
211
+
212
+ .discount-price {
213
+ font-size: 2rem;
214
+ font-weight: 700;
215
+ color: var(--accent-color);
216
+ margin-left: 0.5rem;
217
+ }
218
+
219
+ .installments {
220
+ color: #7f8c8d;
221
+ font-size: 0.9rem;
222
+ margin-top: 0.5rem;
223
+ }
224
+
225
+ .color-options {
226
+ margin: 2rem 0;
227
+ }
228
+
229
+ .color-title {
230
+ font-weight: 600;
231
+ margin-bottom: 1rem;
232
+ display: flex;
233
+ align-items: center;
234
+ gap: 0.5rem;
235
+ }
236
+
237
+ .colors-grid {
238
+ display: grid;
239
+ grid-template-columns: repeat(4, 1fr);
240
+ gap: 0.5rem;
241
+ }
242
+
243
+ .color-option {
244
+ width: 100%;
245
+ height: 60px;
246
+ border-radius: 4px;
247
+ cursor: pointer;
248
+ border: 2px solid transparent;
249
+ transition: all 0.3s;
250
+ position: relative;
251
+ overflow: hidden;
252
+ }
253
+
254
+ .color-option:hover, .color-option.active {
255
+ border-color: var(--secondary-color);
256
+ transform: scale(1.05);
257
+ }
258
+
259
+ .color-option::after {
260
+ content: '';
261
+ position: absolute;
262
+ top: 50%;
263
+ left: 50%;
264
+ transform: translate(-50%, -50%);
265
+ width: 24px;
266
+ height: 24px;
267
+ background: white;
268
+ border-radius: 50%;
269
+ opacity: 0;
270
+ transition: opacity 0.3s;
271
+ }
272
+
273
+ .color-option.active::after {
274
+ opacity: 1;
275
+ }
276
+
277
+ .rosa { background-color: #ff99cc; }
278
+ .azul-claro { background-color: #87ceeb; }
279
+ .azul-marinho { background-color: #000080; }
280
+ .azul-escuro { background-color: #000033; }
281
+ .ciano { background-color: #00ffff; }
282
+ .preto { background-color: #000000; }
283
+ .branco { background-color: #ffffff; border: 1px solid #ddd; }
284
+
285
+ .product-details {
286
+ margin: 2rem 0;
287
+ }
288
+
289
+ .detail-item {
290
+ display: flex;
291
+ margin-bottom: 0.8rem;
292
+ }
293
+
294
+ .detail-icon {
295
+ color: var(--secondary-color);
296
+ margin-right: 0.8rem;
297
+ font-size: 1.1rem;
298
+ }
299
+
300
+ .detail-text {
301
+ flex: 1;
302
+ }
303
+
304
+ .bonus-section {
305
+ background-color: #f8f9fa;
306
+ padding: 1.5rem;
307
+ border-radius: 8px;
308
+ margin: 2rem 0;
309
+ }
310
+
311
+ .bonus-title {
312
+ font-weight: 600;
313
+ margin-bottom: 1rem;
314
+ color: var(--success-color);
315
+ display: flex;
316
+ align-items: center;
317
+ gap: 0.5rem;
318
+ }
319
+
320
+ .bonus-item {
321
+ display: flex;
322
+ align-items: center;
323
+ gap: 0.8rem;
324
+ margin-bottom: 0.8rem;
325
+ padding-bottom: 0.8rem;
326
+ border-bottom: 1px solid #e1e8ed;
327
+ }
328
+
329
+ .bonus-item:last-child {
330
+ border-bottom: none;
331
+ margin-bottom: 0;
332
+ padding-bottom: 0;
333
+ }
334
+
335
+ .bonus-icon {
336
+ color: var(--success-color);
337
+ font-size: 1.2rem;
338
+ }
339
+
340
+ .quantity-selector {
341
+ display: flex;
342
+ align-items: center;
343
+ gap: 1rem;
344
+ margin: 2rem 0;
345
+ }
346
+
347
+ .quantity-btn {
348
+ width: 30px;
349
+ height: 30px;
350
+ border: 1px solid #ddd;
351
+ background: white;
352
+ cursor: pointer;
353
+ display: flex;
354
+ justify-content: center;
355
+ align-items: center;
356
+ border-radius: 4px;
357
+ transition: all 0.3s;
358
+ }
359
+
360
+ .quantity-btn:hover {
361
+ background: #f0f0f0;
362
+ }
363
+
364
+ .quantity-input {
365
+ width: 50px;
366
+ height: 30px;
367
+ text-align: center;
368
+ border: 1px solid #ddd;
369
+ border-radius: 4px;
370
+ }
371
+
372
+ .add-to-cart {
373
+ width: 100%;
374
+ padding: 1rem;
375
+ background: var(--secondary-color);
376
+ color: white;
377
+ border: none;
378
+ border-radius: 4px;
379
+ font-size: 1.1rem;
380
+ font-weight: 600;
381
+ cursor: pointer;
382
+ transition: all 0.3s;
383
+ margin-bottom: 1rem;
384
+ }
385
+
386
+ .add-to-cart:hover {
387
+ background: #2980b9;
388
+ transform: translateY(-2px);
389
+ }
390
+
391
+ .buy-now {
392
+ width: 100%;
393
+ padding: 1rem;
394
+ background: var(--accent-color);
395
+ color: white;
396
+ border: none;
397
+ border-radius: 4px;
398
+ font-size: 1.1rem;
399
+ font-weight: 600;
400
+ cursor: pointer;
401
+ transition: all 0.3s;
402
+ }
403
+
404
+ .buy-now:hover {
405
+ background: #c0392b;
406
+ transform: translateY(-2px);
407
+ }
408
+
409
+ .product-description {
410
+ margin-top: 2rem;
411
+ padding-top: 2rem;
412
+ border-top: 1px solid #e1e8ed;
413
+ }
414
+
415
+ .description-title {
416
+ font-weight: 600;
417
+ margin-bottom: 1rem;
418
+ }
419
+
420
+ .description-text {
421
+ color: #555;
422
+ line-height: 1.8;
423
+ }
424
+
425
+ .material-badge {
426
+ display: inline-block;
427
+ background: var(--success-color);
428
+ color: white;
429
+ padding: 0.3rem 0.8rem;
430
+ border-radius: 20px;
431
+ font-size: 0.8rem;
432
+ font-weight: 600;
433
+ margin-top: 0.5rem;
434
+ }
435
+
436
+ .mobile-menu-toggle {
437
+ display: none;
438
+ font-size: 1.5rem;
439
+ cursor: pointer;
440
+ }
441
+
442
+ @media (max-width: 768px) {
443
+ .main-content {
444
+ grid-template-columns: 1fr;
445
+ }
446
+
447
+ .header-content {
448
+ flex-direction: column;
449
+ gap: 1rem;
450
+ }
451
+
452
+ .header-right {
453
+ width: 100%;
454
+ justify-content: space-between;
455
+ }
456
+
457
+ .mobile-menu-toggle {
458
+ display: block;
459
+ }
460
+
461
+ .nav-menu {
462
+ display: none;
463
+ flex-direction: column;
464
+ gap: 1rem;
465
+ margin-top: 1rem;
466
+ }
467
+
468
+ .nav-menu.active {
469
+ display: flex;
470
+ }
471
+
472
+ .colors-grid {
473
+ grid-template-columns: repeat(3, 1fr);
474
+ }
475
+
476
+ .thumbnail-container {
477
+ grid-template-columns: repeat(3, 1fr);
478
+ }
479
+ }
480
+
481
+ @media (max-width: 480px) {
482
+ .colors-grid {
483
+ grid-template-columns: repeat(2, 1fr);
484
+ }
485
+
486
+ .thumbnail-container {
487
+ grid-template-columns: repeat(2, 1fr);
488
+ }
489
+ }
490
+
491
+ .loading {
492
+ text-align: center;
493
+ padding: 2rem;
494
+ color: #7f8c8d;
495
+ }
496
+
497
+ .spinner {
498
+ border: 4px solid rgba(0, 0, 0, 0.1);
499
+ border-radius: 50%;
500
+ border-top: 4px solid var(--secondary-color);
501
+ width: 40px;
502
+ height: 40px;
503
+ animation: spin 1s linear infinite;
504
+ margin: 0 auto 1rem;
505
+ }
506
+
507
+ @keyframes spin {
508
+ 0% { transform: rotate(0deg); }
509
+ 100% { transform: rotate(360deg); }
510
+ }
511
+
512
+ .error-message {
513
+ background: #ffdddd;
514
+ color: #d32f2f;
515
+ padding: 1rem;
516
+ border-radius: 4px;
517
+ margin: 1rem 0;
518
+ display: none;
519
+ }
520
+ </style>
521
+ </head>
522
+ <body>
523
+ <header>
524
+ <div class="container">
525
+ <div class="header-content">
526
+ <div class="logo">
527
+ <i class="fas fa-shopping-bag logo-icon"></i>
528
+ <span>Tucano Premium</span>
529
+ </div>
530
+ <div class="header-right">
531
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">
532
+ <i class="fas fa-code"></i> Built with anycoder
533
+ </a>
534
+ <div class="cart-icon">
535
+ <i class="fas fa-shopping-cart"></i>
536
+ <span class="cart-count">0</span>
537
+ </div>
538
+ <div class="mobile-menu-toggle">
539
+ <i class="fas fa-bars"></i>
540
+ </div>
541
+ </div>
542
+ </div>
543
+ <nav class="nav-menu">
544
+ <a href="#">Home</a>
545
+ <a href="#">Produtos</a>
546
+ <a href="#">Ofertas</a>
547
+ <a href="#">Contato</a>
548
+ </nav>
549
+ </div>
550
+ </header>
551
+
552
+ <div class="breadcrumb">
553
+ <div class="container">
554
+ <div class="breadcrumb-content">
555
+ <i class="fas fa-home"></i>
556
+ <a href="#">Home</a>
557
+ <i class="fas fa-chevron-right"></i>
558
+ <a href="#">Masculino</a>
559
+ <i class="fas fa-chevron-right"></i>
560
+ <span>Polos Premium</span>
561
+ </div>
562
+ </div>
563
+ </div>
564
+
565
+ <div class="container">
566
+ <div class="main-content">
567
+ <div class="product-gallery">
568
+ <div class="main-image-container">
569
+ <img src="https://i.imgur.com/GSB6PvF.png" alt="Polo Tucano Masculina Premium" class="main-image" id="mainProductImage">
570
+ <div class="loading" id="imageLoading">
571
+ <div class="spinner"></div>
572
+ <p>Carregando imagem...</p>
573
+ </div>
574
+ </div>
575
+
576
+ <div class="thumbnail-container">
577
+ <img src="https://i.imgur.com/GSB6PvF.png" alt="Thumbnail 1" class="thumbnail active" data-src="https://i.imgur.com/GSB6PvF.png">
578
+ <img src="https://i.imgur.com/lSCOCiz.png" alt="Thumbnail 2" class="thumbnail" data-src="https://i.imgur.com/lSCOCiz.png">
579
+ <img src="https://i.imgur.com/zDk6JxB.png" alt="Thumbnail 3" class="thumbnail" data-src="https://i.imgur.com/zDk6JxB.png">
580
+ <img src="https://i.imgur.com/OLrgRSN.png" alt="Thumbnail 4" class="thumbnail" data-src="https://i.imgur.com/OLrgRSN.png">
581
+ </div>
582
+
583
+ <div class="error-message" id="imageError">
584
+ <i class="fas fa-exclamation-triangle"></i> Não foi possível carregar algumas imagens.
585
+ </div>
586
+ </div>
587
+
588
+ <div class="product-info">
589
+ <h1 class="product-title">Polo Tucano Masculina Premium</h1>
590
+ <p class="product-subtitle">Leve 6, Pague Só 3!</p>
591
+
592
+ <div class="rating">
593
+ <div class="stars">
594
+ <i class="fas fa-star"></i>
595
+ <i class="fas fa-star"></i>
596
+ <i class="fas fa-star"></i>
597
+ <i class="fas fa-star"></i>
598
+ <i class="fas fa-star-half-alt"></i>
599
+ </div>
600
+ <span>(4.7) 128 avaliações</span>
601
+ </div>
602
+
603
+ <div class="price-container">
604
+ <span class="original-price">R$ 1.199,90</span>
605
+ <span class="discount-price">R$ 599,90</span>
606
+ <div class="installments">ou 10x de R$ 59,99 sem juros</div>
607
+ </div>
608
+
609
+ <div class="color-options">
610
+ <h3 class="color-title">
611
+ <i class="fas fa-palette"></i>
612
+ Escolha sua cor (7 opções)
613
+ </h3>
614
+ <div class="colors-grid">
615
+ <div class="color-option rosa" data-color="Rosa" title="Rosa"></div>
616
+ <div class="color-option azul-claro" data-color="Azul Claro" title="Azul Claro"></div>
617
+ <div class="color-option azul-marinho" data-color="Azul Marinho" title="Azul Marinho"></div>
618
+ <div class="color-option azul-escuro" data-color="Azul Escuro" title="Azul Escuro"></div>
619
+ <div class="color-option ciano" data-color="Ciano" title="Ciano"></div>
620
+ <div class="color-option preto" data-color="Preto" title="Preto"></div>
621
+ <div class="color-option branco" data-color="Branco" title="Branco"></div>
622
+ </div>
623
+ </div>
624
+
625
+ <div class="product-details">
626
+ <div class="detail-item">
627
+ <i class="fas fa-check-circle detail-icon"></i>
628
+ <div class="detail-text">
629
+ <strong>Material Premium:</strong> Seda Gelada e Poliéster de Alta Respirabilidade
630
+ <span class="material-badge">Alta Qualidade</span>
631
+ </div>
632
+ </div>
633
+ <div class="detail-item">
634
+ <i class="fas fa-gem detail-icon"></i>
635
+ <div class="detail-text">
636
+ <strong>Bordado Distintivo:</strong> Detalhes exclusivos que garantem autenticidade
637
+ </div>
638
+ </div>
639
+ <div class="detail-item">
640
+ <i class="fas fa-tshirt detail-icon"></i>
641
+ <div class="detail-text">
642
+ <strong>Quantidade:</strong> 6 Polos + 3 Brindes (Relógio Tático e 3 Bermudas)
643
+ </div>
644
+ </div>
645
+ </div>
646
+
647
+ <div class="bonus-section">
648
+ <h3 class="bonus-title">
649
+ <i class="fas fa-gift"></i>
650
+ Brindes Inclusos
651
+ </h3>
652
+ <div class="bonus-item">
653
+ <i class="fas fa-clock bonus-icon"></i>
654
+ <div>
655
+ <strong>Relógio Tático Premium</strong>
656
+ <p>Resistente à água com design militar</p>
657
+ </div>
658
+ </div>
659
+ <div class="bonus-item">
660
+ <i class="fas fa-tshirt bonus-icon"></i>
661
+ <div>
662
+ <strong>3 Bermudas Esportivas</strong>
663
+ <p>Tecido leve e confortável para qualquer ocasião</p>
664
+ </div>
665
+ </div>
666
+ </div>
667
+
668
+ <div class="quantity-selector">
669
+ <span>Quantidade:</span>
670
+ <button class="quantity-btn" id="decreaseQuantity">-</button>
671
+ <input type="number" class="quantity-input" id="quantityInput" value="1" min="1" max="10">
672
+ <button class="quantity-btn" id="increaseQuantity">+</button>
673
+ </div>
674
+
675
+ <button class="add-to-cart">
676
+ <i class="fas fa-shopping-cart"></i> Adicionar ao Carrinho
677
+ </button>
678
+ <button class="buy-now">
679
+ <i class="fas fa-credit-card"></i> Comprar Agora
680
+ </button>
681
+
682
+ <div class="product-description">
683
+ <h3 class="description-title">Descrição do Produto</h3>
684
+ <p class="description-text">
685
+ A Polo Tucano Masculina Premium é confeccionada com os melhores materiais do mercado,
686
+ combinando seda gelada e poliéster de alta respirabilidade para garantir máximo conforto
687
+ em qualquer ocasião. Com bordados distintivos e detalhes litrados, esta coleção oferece
688
+ estilo e sofisticação.
689
+ </p>
690
+ <p class="description-text">
691
+ <strong>Promoção Especial:</strong> Leve 6 polos e pague apenas por 3, além de receber
692
+ um relógio tático premium e 3 bermudas esportivas como brinde. Aproveite esta oferta
693
+ por tempo limitado!
694
+ </p>
695
+ </div>
696
+ </div>
697
+ </div>
698
+ </div>
699
+
700
+ <script>
701
+ document.addEventListener('DOMContentLoaded', function() {
702
+ // Mobile menu toggle
703
+ const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
704
+ const navMenu = document.querySelector('.nav-menu');
705
+
706
+ mobileMenuToggle.addEventListener('click', function() {
707
+ navMenu.classList.toggle('active');
708
+ });
709
+
710
+ // Color selection
711
+ const colorOptions = document.querySelectorAll('.color-option');
712
+ colorOptions.forEach(option => {
713
+ option.addEventListener('click', function() {
714
+ colorOptions.forEach(opt => opt.classList.remove('active'));
715
+ this.classList.add('active');
716
+ });
717
+ });
718
+
719
+ // Quantity selector
720
+ const decreaseBtn = document.getElementById('decreaseQuantity');
721
+ const increaseBtn = document.getElementById('increaseQuantity');
722
+ const quantityInput = document.getElementById('quantityInput');
723
+
724
+ decreaseBtn.addEventListener('click', function() {
725
+ let currentValue = parseInt(quantityInput.value);
726
+ if (currentValue > 1) {
727
+ quantityInput.value = currentValue - 1;
728
+ }
729
+ });
730
+
731
+ increaseBtn.addEventListener('click', function() {
732
+ let currentValue = parseInt(quantityInput.value);
733
+ if (currentValue < 10) {
734
+ quantityInput.value = currentValue + 1;
735
+ }
736
+ });
737
+
738
+ // Image gallery
739
+ const thumbnails = document.querySelectorAll('.thumbnail');
740
+ const mainImage = document.getElementById('mainProductImage');
741
+ const loadingIndicator = document.getElementById('imageLoading');
742
+ const errorMessage = document.getElementById('imageError');
743
+
744
+ thumbnails.forEach(thumbnail => {
745
+ thumbnail.addEventListener('click', function() {
746
+ // Show loading indicator
747
+ loadingIndicator.style.display = 'block';
748
+ mainImage.style.display = 'none';
749
+ errorMessage.style.display = 'none';
750
+
751
+ // Remove active class from all thumbnails
752
+ thumbnails.forEach(thumb => thumb.classList.remove('active'));
753
+ this.classList.add('active');
754
+
755
+ // Get the new image source
756
+ const newSrc = this.getAttribute('data-src');
757
+
758
+ // Create a new image to check if it loads
759
+ const tempImg = new Image();
760
+ tempImg.src = newSrc;
761
+
762
+ tempImg.onload = function() {
763
+ mainImage.src = newSrc;
764
+ mainImage.style.display = 'block';
765
+ loadingIndicator.style.display = 'none';
766
+ };
767
+
768
+ tempImg.onerror = function() {
769
+ loadingIndicator.style.display = 'none';
770
+ errorMessage.style.display = 'block';
771
+ };
772
+ });
773
+ });
774
+
775
+ // Initialize first image
776
+ const firstThumbnail = document.querySelector('.thumbnail.active');
777
+ if (firstThumbnail) {
778
+ const initialSrc = firstThumbnail.getAttribute('data-src');
779
+ const tempImg = new Image();
780
+ tempImg.src = initialSrc;
781
+
782
+ tempImg.onload = function() {
783
+ mainImage.src = initialSrc;
784
+ mainImage.style.display = 'block';
785
+ loadingIndicator.style.display = 'none';
786
+ };
787
+
788
+ tempImg.onerror = function() {
789
+ loadingIndicator.style.display = 'none';
790
+ errorMessage.style.display = 'block';
791
+ };
792
+ }
793
+
794
+ // Add to cart functionality
795
+ const addToCartBtn = document.querySelector('.add-to-cart');
796
+ const cartCount = document.querySelector('.cart-count');
797
+
798
+ addToCartBtn.addEventListener('click', function() {
799
+ const quantity = parseInt(quantityInput.value);
800
+ const currentCount = parseInt(cartCount.textContent);
801
+ cartCount.textContent = currentCount + quantity;
802
+
803
+ // Show feedback
804
+ addToCartBtn.textContent = 'Adicionado!';
805
+ addToCartBtn.style.background = '#2ecc71';
806
+
807
+ setTimeout(() => {
808
+ addToCartBtn.innerHTML = '<i class="fas fa-shopping-cart"></i> Adicionar ao Carrinho';
809
+ addToCartBtn.style.background = 'var(--secondary-color)';
810
+ }, 2000);
811
+ });
812
+
813
+ // Buy now functionality
814
+ const buyNowBtn = document.querySelector('.buy-now');
815
+
816
+ buyNowBtn.addEventListener('click', function() {
817
+ alert('Redirecionando para o checkout...');
818
+ // In a real application, this would redirect to checkout
819
+ });
820
+
821
+ // Preload images to check for errors
822
+ const imageUrls = [
823
+ 'https://i.imgur.com/GSB6PvF.png',
824
+ 'https://i.imgur.com/lSCOCiz.png',
825
+ 'https://i.imgur.com/zDk6JxB.png',
826
+ 'https://i.imgur.com/OLrgRSN.png',
827
+ 'https://i.imgur.com/S4j3IGA.png',
828
+ 'https://i.imgur.com/cdkLWrC.png',
829
+ 'https://i.imgur.com/Ujd8GKf.png',
830
+ 'https://i.imgur.com/D4Lmakb.jpeg',
831
+ 'https://i.imgur.com/nkKCO6j.jpeg',
832
+ 'https://i.imgur.com/b2Eqh1I.jpeg'
833
+ ];
834
+
835
+ let errorCount = 0;
836
+
837
+ imageUrls.forEach(url => {
838
+ const img = new Image();
839
+ img.src = url;
840
+
841
+ img.onerror = function() {
842
+ errorCount++;
843
+ if (errorCount > 0) {
844
+ errorMessage.style.display = 'block';
845
+ }
846
+ };
847
+ });
848
+ });
849
+ </script>
850
+ </body>
851
+ </html>