Hugging Face's logo

Spaces:
Proplayer555
/
Volt-2
Running

App Files Community
Matheusopro commited on
Commit
d235a7a
·
verified ·
1 Parent(s): f78f6a0

Quando alguém escolher o tamanho quero que a seleção fique guardada até que eles fechem a página, Quando alguém escolher o tamanho quero que a seleção fique guardada até que eles fechem a página - Follow Up Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1587 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: G
3
- emoji: 🌖
4
- colorFrom: green
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: g
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: yellow
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,1587 @@
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
+
2
+ <!-- Product Page Template -->
3
+ <div id="product-page" class="hidden fixed inset-0 bg-white z-50 overflow-y-auto h-screen w-screen p-0 md:p-4">
4
+ <div class="w-full h-full">
5
+ <div class="bg-black text-white py-4 px-4 sticky top-0 z-30 w-full shadow-lg">
6
+ <div class="container mx-auto flex flex-col md:flex-row justify-between items-center space-y-2 md:space-y-0">
7
+ <a href="#" class="text-2xl font-bold volt-text tracking-wider">VOLT</a>
8
+ <div class="w-full md:w-1/3 px-4">
9
+ <div class="relative">
10
+ <input type="text" placeholder="Buscar produtos..." class="w-full py-2 px-4 rounded-full bg-gray-800 text-white focus:outline-none focus:ring-2 focus:ring-volt">
11
+ <button class="absolute right-0 top-0 h-full px-4 text-gray-400 hover:text-volt">
12
+ <i class="fas fa-search"></i>
13
+ </button>
14
+ </div>
15
+ </div>
16
+ <div class="flex space-x-4 text-sm justify-center">
17
+ <a href="#" class="hover:text-volt transition">Novidades</a>
18
+ <a href="#" class="hover:text-volt transition">Oversized</a>
19
+ <a href="#" class="hover:text-volt transition">Masculino</a>
20
+ <a href="#" class="hover:text-volt transition">Feminino</a>
21
+ </div>
22
+ </div>
23
+ </div>
24
+ <button onclick="closeProductPage()" class="fixed top-4 right-4 text-2xl hover:text-volt transition z-50 bg-black bg-opacity-70 rounded-full p-2">
25
+ <i class="fas fa-times"></i>
26
+ </button>
27
+
28
+ <div class="flex flex-col md:flex-row gap-4 md:gap-8 pt-16 pb-20 md:pb-0 h-[calc(100%-80px)] overflow-y-auto">
29
+ <!-- Left Column - Product Images -->
30
+ <div class="w-full md:w-1/2 px-4 md:px-0">
31
+ <div class="mb-4 rounded-lg overflow-hidden">
32
+ <img id="product-main-image" src="" alt="Product Image" class="w-full h-auto object-cover">
33
+ </div>
34
+ <div class="grid grid-cols-4 gap-2">
35
+ <div class="cursor-pointer border border-gray-200 rounded hover:border-volt">
36
+ <img src="" alt="Thumbnail" class="w-full h-20 object-cover">
37
+ </div>
38
+ <div class="cursor-pointer border border-gray-200 rounded hover:border-volt">
39
+ <img src="" alt="Thumbnail" class="w-full h-20 object-cover">
40
+ </div>
41
+ <div class="cursor-pointer border border-gray-200 rounded hover:border-volt">
42
+ <img src="" alt="Thumbnail" class="w-full h-20 object-cover">
43
+ </div>
44
+ <div class="cursor-pointer border border-gray-200 rounded hover:border-volt">
45
+ <img src="" alt="Thumbnail" class="w-full h-20 object-cover">
46
+ </div>
47
+ </div>
48
+
49
+ <!-- Product Description -->
50
+ <div class="mt-8">
51
+ <div class="bg-gray-50 p-6 rounded-lg mb-8">
52
+ <h3 class="font-bold mb-6 text-3xl text-black">DESCRIÇÃO DO PRODUTO</h3>
53
+ <p id="product-description" class="text-gray-700 text-lg mb-6 max-w-4xl leading-relaxed"></p>
54
+ </div>
55
+ </div>
56
+ </div>
57
+
58
+ <!-- Right Column - Product Info -->
59
+ <div class="w-full md:w-1/2 px-4 md:px-0 sticky bottom-0 bg-white pt-4 pb-4 md:pb-0 md:static md:bg-transparent">
60
+ <div id="quantity-warning" class="hidden bg-red-100 text-red-800 font-bold text-sm py-2 px-4 w-full text-center fixed top-0 left-0 z-50">
61
+ <div class="container mx-auto flex justify-between items-center">
62
+ <p>Para pedidos acima de 100 unidades, entre em contato via <a href="https://wa.me/551140040040" class="font-bold underline hover:text-gray-200 transition">WhatsApp</a></p>
63
+ <button onclick="closeQuantityWarning()" class="ml-4">
64
+ <i class="fas fa-times"></i>
65
+ </button>
66
+ </div>
67
+ <div id="warning-timer" class="h-1 bg-red-500 w-full absolute bottom-0 left-0"></div>
68
+ </div>
69
+ <h1 id="product-title" class="text-3xl font-bold mb-2"></h1>
70
+ <div class="mb-4">
71
+ <div class="flex text-gray-300 mr-2">
72
+ <i class="far fa-star"></i>
73
+ <i class="far fa-star"></i>
74
+ <i class="far fa-star"></i>
75
+ <i class="far fa-star"></i>
76
+ <i class="far fa-star"></i>
77
+ </div>
78
+ <span class="text-gray-600">(Seja o primeiro a avaliar)</span>
79
+ </div>
80
+
81
+ <div class="mb-6">
82
+ <span id="product-price" class="text-2xl font-bold"></span>
83
+ <span class="text-gray-500 line-through ml-2">R$ 159,90</span>
84
+ <span class="ml-2 bg-volt text-white text-sm px-2 py-1 rounded">20% OFF</span>
85
+ </div>
86
+ <div class="mb-4">
87
+ <div class="flex items-center">
88
+ <i class="fas fa-bolt text-volt mr-2"></i>
89
+ <div class="voltage-meter" style="max-width: 300px;">
90
+ <div class="voltage-fill high" style="width: 100%">
91
+ <div class="lightning"></div>
92
+ </div>
93
+ </div>
94
+ </div>
95
+ <p class="text-xs text-gray-500 mt-1">MEDIDOR DE VOLTAGEM: 100% (MAIS VENDIDO)</p>
96
+ </div>
97
+ ,
98
+ <div class="mb-6">
99
+ <h3 class="font-bold mb-2">CORES</h3>
100
+ <div class="flex space-x-4">
101
+ <button class="color-option w-10 h-10 rounded-full bg-black border-2 border-gray-300 hover:scale-110 transition-transform duration-200" data-color="black"></button>
102
+ <button class="color-option w-10 h-10 rounded-full bg-gray-400 border-2 border-gray-300 hover:scale-110 transition-transform duration-200" data-color="gray"></button>
103
+ <button class="color-option w-10 h-10 rounded-full bg-white border-2 border-gray-300 hover:scale-110 transition-transform duration-200" data-color="white"></button>
104
+ </div>
105
+ </div>
106
+
107
+ <div class="mb-6">
108
+ <h3 class="font-bold mb-2">TAMANHOS</h3>
109
+ <div class="flex flex-wrap gap-2">
110
+ <button class="size-option px-4 py-2 border border-gray-300 hover:border-volt hover:text-volt rounded transition-all duration-200" data-size="P">P</button>
111
+ <button class="size-option px-4 py-2 border border-gray-300 hover:border-volt hover:text-volt rounded transition-all duration-200" data-size="M">M</button>
112
+ <button class="size-option px-4 py-2 border border-gray-300 hover:border-volt hover:text-volt rounded transition-all duration-200" data-size="G">G</button>
113
+ <button class="size-option px-4 py-2 border border-gray-300 hover:border-volt hover:text-volt rounded transition-all duration-200" data-size="GG">GG</button>
114
+ </div>
115
+ </div>
116
+
117
+ <div class="mb-6">
118
+ <div class="flex flex-col space-y-4 md:flex-row md:items-center md:space-y-0 md:space-x-4 mb-4">
119
+ <div class="flex items-center justify-center">
120
+ <button id="decrease-qty" class="bg-gray-200 px-3 py-1 rounded-l hover:bg-gray-300 transition">-</button>
121
+ <input type="number" id="quantity" min="1" max="100" value="1" class="w-16 text-center border-t border-b border-gray-300 px-2 py-1">
122
+ <button id="increase-qty" class="bg-gray-200 px-3 py-1 rounded-r hover:bg-gray-300 transition">+</button>
123
+ </div>
124
+ <button onclick="handleBuyClick(event)" class="bg-volt hover:bg-voltlight text-white font-bold py-3 px-6 rounded-full transition w-full md:w-auto">COMPRAR</button>
125
+ <button onclick="handleAddToCartClick(event)" class="bg-gray-800 hover:bg-gray-700 text-white font-bold py-3 px-6 rounded-full transition w-full md:w-auto">ADICIONAR AO CARRINHO</button>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ </div>
130
+
131
+ <!-- Product Info Bottom Section -->
132
+ <div class="md:w-1/2 mt-8">
133
+ <div class="border-t border-gray-200 pt-8 pb-8">
134
+ <div class="bg-gray-50 p-6 rounded-lg mb-8">
135
+ <h3 class="font-bold mb-6 text-3xl text-black">DESCRIÇÃO DO PRODUTO</h3>
136
+ <p id="product-description" class="text-gray-700 text-lg mb-6 max-w-4xl leading-relaxed"></p>
137
+ </div>
138
+
139
+ <div class="bg-gray-50 p-6 rounded-lg mb-8">
140
+ <h3 class="font-bold mb-6 text-3xl text-black">SEGURANÇA E PAGAMENTO</h3>
141
+ <ul class="text-gray-700 list-disc pl-5 max-w-4xl space-y-3 text-lg">
142
+ <li><span class="font-semibold">Pagamentos:</span> Processados com criptografia SSL de 256-bit</li>
143
+ <li><span class="font-semibold">Dados:</span> Suas informações são protegidas e nunca compartilhadas</li>
144
+ <li><span class="font-semibold">Garantia:</span> Compra segura com reembolso em até 7 dias</li>
145
+ </ul>
146
+ </div>
147
+
148
+ <div class="bg-gray-50 p-6 rounded-lg mb-8">
149
+ <h3 class="font-bold mb-6 text-3xl text-black">DETALHES TÉCNICOS</h3>
150
+ <ul class="text-gray-700 list-disc pl-5 max-w-4xl space-y-3 text-lg">
151
+ <li><span class="font-semibold">Modelagem:</span> Oversized com caimento perfeito</li>
152
+ <li><span class="font-semibold">Tecido:</span> 100% algodão penteado de alta qualidade</li>
153
+ <li><span class="font-semibold">Estampa:</span> Digital de alta definição e durabilidade</li>
154
+ <li><span class="font-semibold">Costura:</span> Reforçada para maior resistência</li>
155
+ <li><span class="font-semibold">Lavagem:</span> Pode ser lavada na máquina sem desbotar</li>
156
+ <li><span class="font-semibold">Origem:</span> Produzido no Brasil com materiais premium</li>
157
+ </ul>
158
+ </div>
159
+ </div>
160
+
161
+ <!-- Customer Reviews Section -->
162
+ <div class="border-t border-gray-200 pt-12 mt-8">
163
+ <div class="bg-gray-50 p-6 rounded-lg">
164
+ <h3 class="font-bold mb-6 text-3xl text-black">AVALIAÇÕES DOS CLIENTES</h3>
165
+ <div class="flex items-center mb-6">
166
+ <div class="flex text-yellow-400 text-2xl mr-4">
167
+ <i class="fas fa-star"></i>
168
+ <i class="fas fa-star"></i>
169
+ <i class="fas fa-star"></i>
170
+ <i class="fas fa-star"></i>
171
+ <i class="far fa-star"></i>
172
+ </div>
173
+ <span class="text-gray-700 text-lg">0/5.0 (<span id="review-count">0</span> avaliações)</span>
174
+ </div>
175
+
176
+ <!-- Review Form (hidden by default) -->
177
+ <div id="review-form" class="hidden bg-gray-50 p-6 rounded-lg mb-6">
178
+ <div id="login-prompt" class="mb-4 p-4 bg-yellow-50 border-l-4 border-yellow-400">
179
+ <p class="text-yellow-700">Você precisa estar logado para avaliar.</p>
180
+ <div class="flex space-x-2 mt-2">
181
+ <button class="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600">Google</button>
182
+ <button class="px-3 py-1 bg-indigo-600 text-white rounded hover:bg-indigo-700">Facebook</button>
183
+ <button class="px-3 py-1 bg-purple-500 text-white rounded hover:bg-purple-600">Discord</button>
184
+ </div>
185
+ </div>
186
+ <h4 class="font-bold mb-4">ESCREVA SUA AVALIAÇÃO</h4>
187
+ <form id="submit-review">
188
+ <div class="mb-4">
189
+ <label class="block font-medium mb-2">Sua avaliação *</label>
190
+ <div class="flex text-yellow-400 text-2xl mb-2" id="star-rating">
191
+ <i class="far fa-star cursor-pointer hover:scale-110 transition" data-rating="1"></i>
192
+ <i class="far fa-star cursor-pointer hover:scale-110 transition" data-rating="2"></i>
193
+ <i class="far fa-star cursor-pointer hover:scale-110 transition" data-rating="3"></i>
194
+ <i class="far fa-star cursor-pointer hover:scale-110 transition" data-rating="4"></i>
195
+ <i class="far fa-star cursor-pointer hover:scale-110 transition" data-rating="5"></i>
196
+ </div>
197
+ <input type="hidden" id="rating-value" name="rating" required>
198
+ </div>
199
+ <div class="mb-4">
200
+ <label for="review-title" class="block font-medium mb-2">Título *</label>
201
+ <input type="text" id="review-title" name="title" class="w-full px-4 py-2 border border-gray-300 rounded focus:ring-volt focus:border-volt" required>
202
+ </div>
203
+ <div class="mb-4">
204
+ <label for="review-text" class="block font-medium mb-2">Comentário *</label>
205
+ <textarea id="review-text" name="review" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded focus:ring-volt focus:border-volt" required></textarea>
206
+ </div>
207
+ <div class="mb-4">
208
+ <label class="block font-medium mb-2">Fotos (opcional)</label>
209
+ <div class="flex items-center space-x-2">
210
+ <label for="review-photos" class="cursor-pointer border border-dashed border-gray-300 rounded p-4 text-center hover:bg-gray-100 transition">
211
+ <i class="fas fa-camera text-gray-400 text-xl mb-2"></i>
212
+ <p class="text-sm">Adicionar fotos</p>
213
+ <input type="file" id="review-photos" name="photos" class="hidden" multiple accept="image/*">
214
+ </label>
215
+ <div id="photo-preview" class="flex space-x-2"></div>
216
+ </div>
217
+ </div>
218
+ <div class="flex justify-end space-x-4">
219
+ <button type="button" onclick="document.getElementById('review-form').classList.add('hidden'); document.getElementById('review-button').classList.remove('hidden')" class="px-4 py-2 border border-gray-300 rounded hover:bg-gray-100 transition">Cancelar</button>
220
+ <button type="submit" class="px-4 py-2 bg-volt hover:bg-voltlight text-white rounded transition">Enviar Avaliação</button>
221
+ </div>
222
+ </form>
223
+ </div>
224
+
225
+ <button id="review-button" onclick="document.getElementById('review-form').classList.remove('hidden'); this.classList.add('hidden')" class="bg-volt hover:bg-voltlight text-white font-bold py-2 px-4 rounded transition">
226
+ <i class="fas fa-pen mr-2"></i>ESCREVER AVALIAÇÃO
227
+ </button>
228
+ </div>
229
+
230
+ <!-- Review List -->
231
+ <div class="space-y-6">
232
+ <!-- Reviews List -->
233
+ <div class="space-y-6">
234
+ <div id="no-reviews-message" class="bg-white p-6 rounded-lg shadow-sm text-center">
235
+ <i class="far fa-comment-dots text-4xl text-gray-300 mb-4"></i>
236
+ <p class="text-gray-500">Este produto ainda não possui avaliações. Seja o primeiro a compartilhar sua opinião!</p>
237
+ </div>
238
+ </div>
239
+
240
+ <!-- Load More Button -->
241
+ <div class="text-center mt-4 hidden">
242
+ <button id="load-more-reviews" class="text-volt hover:text-voltlight font-medium">
243
+ <i class="fas fa-chevron-down mr-1"></i>CARREGAR MAIS AVALIAÇÕES
244
+ </button>
245
+ </div>
246
+ </div>
247
+ </div>
248
+
249
+ <script>
250
+ // Star rating interaction
251
+ const stars = document.querySelectorAll('#star-rating i');
252
+ stars.forEach(star => {
253
+ star.addEventListener('click', function() {
254
+ const rating = parseInt(this.getAttribute('data-rating'));
255
+ document.getElementById('rating-value').value = rating;
256
+
257
+ stars.forEach((s, index) => {
258
+ if (index < rating) {
259
+ s.classList.remove('far');
260
+ s.classList.add('fas');
261
+ } else {
262
+ s.classList.remove('fas');
263
+ s.classList.add('far');
264
+ }
265
+ });
266
+ });
267
+ });
268
+
269
+ // Photo upload preview
270
+ document.getElementById('review-photos').addEventListener('change', function(e) {
271
+ const preview = document.getElementById('photo-preview');
272
+ preview.innerHTML = '';
273
+
274
+ if (this.files) {
275
+ Array.from(this.files).forEach(file => {
276
+ const reader = new FileReader();
277
+ reader.onload = function(e) {
278
+ const img = document.createElement('img');
279
+ img.src = e.target.result;
280
+ img.className = 'w-20 h-20 object-cover rounded border border-gray-200';
281
+ preview.appendChild(img);
282
+ }
283
+ reader.readAsDataURL(file);
284
+ });
285
+ }
286
+ });
287
+
288
+ // Check login status before showing review form
289
+ function checkLoginBeforeReview() {
290
+ // In a real app, check actual login status
291
+ const isLoggedIn = false; // Change to true when user logs in
292
+
293
+ if (!isLoggedIn) {
294
+ document.getElementById('review-form').classList.remove('hidden');
295
+ document.getElementById('login-prompt').classList.remove('hidden');
296
+ } else {
297
+ document.getElementById('review-form').classList.toggle('hidden');
298
+ document.getElementById('login-prompt').classList.add('hidden');
299
+ }
300
+ }
301
+
302
+ // Form submission
303
+ document.getElementById('submit-review').addEventListener('submit', function(e) {
304
+ e.preventDefault();
305
+ // Verify user is logged in
306
+ const isLoggedIn = false; // Change to true when user logs in
307
+
308
+ if (!isLoggedIn) {
309
+ alert('Por favor, faça login para enviar uma avaliação.');
310
+ return;
311
+ }
312
+
313
+ // Create new review element
314
+ const reviewsContainer = document.querySelector('.space-y-6');
315
+ const newReview = document.createElement('div');
316
+ newReview.className = 'bg-white p-6 rounded-lg shadow-sm';
317
+ newReview.innerHTML = `
318
+ <div class="flex justify-between items-start mb-4">
319
+ <div>
320
+ <h4 class="font-bold">Você</h4>
321
+ <div class="flex text-yellow-400 text-sm mt-1" id="new-review-stars"></div>
322
+ </div>
323
+ <span class="text-gray-500 text-sm">${new Date().toLocaleDateString()}</span>
324
+ </div>
325
+ <h5 class="font-medium mb-2">${document.getElementById('review-title').value}</h5>
326
+ <p class="text-gray-700">${document.getElementById('review-text').value}</p>
327
+ `;
328
+
329
+ // Add stars to new review
330
+ const rating = parseInt(document.getElementById('rating-value').value);
331
+ const starsContainer = newReview.querySelector('#new-review-stars');
332
+ for (let i = 1; i <= 5; i++) {
333
+ const star = document.createElement('i');
334
+ star.className = i <= rating ? 'fas fa-star' : 'far fa-star';
335
+ starsContainer.appendChild(star);
336
+ }
337
+
338
+ // Add new review to top of list
339
+ reviewsContainer.prepend(newReview);
340
+
341
+ // Update review count and hide "no reviews" message
342
+ const countElement = document.getElementById('review-count');
343
+ const newCount = parseInt(countElement.textContent) + 1;
344
+ countElement.textContent = newCount;
345
+
346
+ // Hide "no reviews" message if it's the first review
347
+ if (newCount === 1) {
348
+ document.getElementById('no-reviews-message').classList.add('hidden');
349
+ }
350
+
351
+ // Reset form
352
+ this.reset();
353
+ document.getElementById('photo-preview').innerHTML = '';
354
+ document.getElementById('review-form').classList.add('hidden');
355
+
356
+ document.getElementById('review-button').classList.remove('hidden');
357
+ alert('Avaliação publicada com sucesso! Obrigado por seu feedback.');
358
+ });
359
+
360
+ // Load more reviews button
361
+ document.getElementById('load-more-reviews').addEventListener('click', function() {
362
+ // In a real app, this would fetch more reviews from the server
363
+ console.log('Loading more reviews...');
364
+ });
365
+ </script>
366
+ </div>
367
+ </div>
368
+
369
+ <!-- Related Products (moved below reviews) -->
370
+ <div class="px-4 py-8 bg-gray-50 mt-12">
371
+ <h2 class="text-2xl font-bold mb-8 electric-line">PRODUTOS RELACIONADOS</h2>
372
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
373
+ <!-- Related product cards would go here -->
374
+ </div>
375
+ </div>
376
+ </div>
377
+ </div>
378
+
379
+ <!DOCTYPE html>
380
+ <html lang="pt-BR">
381
+ <head>
382
+ <meta charset="UTF-8">
383
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
384
+ <title>VOLT - Camisas Oversized Premium</title>
385
+ <script src="https://cdn.tailwindcss.com"></script>
386
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
387
+ <script>
388
+ tailwind.config = {
389
+ theme: {
390
+ extend: {
391
+ colors: {
392
+ volt: '#bc13fe',
393
+ voltlight: '#d46afd',
394
+ voltdark: '#8a00b5',
395
+ },
396
+ fontFamily: {
397
+ sans: ['Inter', 'sans-serif'],
398
+ },
399
+ animation: {
400
+ 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
401
+ }
402
+ }
403
+ }
404
+ }
405
+ </script>
406
+ <style>
407
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
408
+
409
+ body {
410
+ font-family: 'Inter', sans-serif;
411
+ }
412
+
413
+ .volt-text {
414
+ color: #bc13fe;
415
+ text-shadow: 0 0 8px rgba(188, 19, 254, 0.6);
416
+ }
417
+
418
+ .volt-border {
419
+ border-color: #bc13fe;
420
+ box-shadow: 0 0 12px rgba(188, 19, 254, 0.4);
421
+ }
422
+
423
+ .volt-bg {
424
+ background-color: #bc13fe;
425
+ box-shadow: 0 0 12px rgba(188, 19, 254, 0.4);
426
+ }
427
+
428
+ .hover-effect:hover {
429
+ transform: translateY(-2px);
430
+ transition: all 0.3s ease;
431
+ }
432
+
433
+ .sticky-nav-active {
434
+ position: fixed;
435
+ width: 100%;
436
+ top: 0;
437
+ animation: slideDown 0.3s ease-out;
438
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
439
+ }
440
+
441
+ @keyframes slideDown {
442
+ from {
443
+ transform: translateY(-100%);
444
+ }
445
+ to {
446
+ transform: translateY(0);
447
+ }
448
+ }
449
+
450
+ .electric-line {
451
+ position: relative;
452
+ overflow: hidden;
453
+ }
454
+
455
+ .electric-line::after {
456
+ content: '';
457
+ position: absolute;
458
+ bottom: 0;
459
+ left: 0;
460
+ width: 100%;
461
+ height: 2px;
462
+ background: linear-gradient(90deg, transparent, #bc13fe, transparent);
463
+ animation: electric 3s linear infinite;
464
+ }
465
+
466
+ @keyframes electric {
467
+ 0% {
468
+ transform: translateX(-100%);
469
+ opacity: 0;
470
+ }
471
+ 20% {
472
+ opacity: 1;
473
+ }
474
+ 100% {
475
+ transform: translateX(100%);
476
+ opacity: 0;
477
+ }
478
+ }
479
+
480
+ #mobile-menu {
481
+ backdrop-filter: blur(5px);
482
+ -webkit-backdrop-filter: blur(5px);
483
+ }
484
+
485
+ @media (max-width: 1023px) {
486
+ body.menu-open {
487
+ overflow: hidden;
488
+ height: 100vh;
489
+ }
490
+ }
491
+
492
+ #mobile-menu-button {
493
+ box-shadow: 0 0 10px rgba(188, 19, 254, 0.5);
494
+ }
495
+
496
+ .product-card:hover .product-image {
497
+ transform: scale(1.03);
498
+ transition: transform 0.3s ease;
499
+ }
500
+
501
+ .voltage-meter {
502
+ width: 100%;
503
+ height: 6px;
504
+ background: white;
505
+ border: 1px solid black;
506
+ border-radius: 3px;
507
+ margin-top: 8px;
508
+ overflow: hidden;
509
+ position: relative;
510
+ }
511
+
512
+ .voltage-fill {
513
+ height: 100%;
514
+ width: 100%;
515
+ position: relative;
516
+ transition: width 0.5s ease, background 0.5s ease;
517
+ }
518
+
519
+ .voltage-fill.low {
520
+ background: white;
521
+ }
522
+
523
+ .voltage-fill.low ~ .fa-bolt {
524
+ color: white;
525
+ }
526
+
527
+ .voltage-fill.medium {
528
+ background: #00f0ff;
529
+ box-shadow: 0 0 10px #00f0ff;
530
+ animation: electric-pulse 2s infinite;
531
+ }
532
+
533
+ .voltage-fill.medium ~ .fa-bolt {
534
+ color: #00f0ff;
535
+ animation: electric-pulse 2s infinite;
536
+ }
537
+
538
+ .voltage-fill.high {
539
+ background: #bc13fe;
540
+ box-shadow: 0 0 15px #bc13fe;
541
+ animation: electric-storm 1.5s infinite;
542
+ }
543
+
544
+ .voltage-fill.high ~ .fa-bolt {
545
+ color: #bc13fe;
546
+ animation: electric-storm 1.5s infinite;
547
+ }
548
+
549
+ /* Selected color option */
550
+ .selected-color {
551
+ border-color: #bc13fe !important;
552
+ box-shadow: 0 0 0 2px #bc13fe !important;
553
+ transform: scale(1.1) !important;
554
+ }
555
+
556
+ /* Selected size option */
557
+ .selected-size {
558
+ background-color: #bc13fe !important;
559
+ color: white !important;
560
+ border-color: #bc13fe !important;
561
+ transform: scale(1.05) !important;
562
+ }
563
+
564
+ @keyframes electric-pulse {
565
+ 0% { box-shadow: 0 0 5px #00f0ff; }
566
+ 50% { box-shadow: 0 0 15px #00f0ff; }
567
+ 100% { box-shadow: 0 0 5px #00f0ff; }
568
+ }
569
+
570
+ @keyframes electric-storm {
571
+ 0% { box-shadow: 0 0 10px #bc13fe; }
572
+ 25% { box-shadow: 0 0 20px #bc13fe, 0 0 30px rgba(188, 19, 254, 0.5); }
573
+ 50% { box-shadow: 0 0 15px #bc13fe; }
574
+ 75% { box-shadow: 0 0 25px #bc13fe, 0 0 35px rgba(188, 19, 254, 0.5); }
575
+ 100% { box-shadow: 0 0 10px #bc13fe; }
576
+ }
577
+
578
+ .lightning {
579
+ position: absolute;
580
+ width: 100%;
581
+ height: 100%;
582
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
583
+ top: 0;
584
+ left: -100%;
585
+ animation: lightning 3s infinite;
586
+ opacity: 0;
587
+ }
588
+
589
+ @keyframes lightning {
590
+ 0% { left: -100%; opacity: 0; }
591
+ 10% { opacity: 0.8; }
592
+ 20% { left: 100%; opacity: 0; }
593
+ 100% { left: 100%; opacity: 0; }
594
+ }
595
+
596
+ .high .lightning {
597
+ animation: lightning 1s infinite;
598
+ }
599
+
600
+ #product-page {
601
+ background-color: rgba(255, 255, 255, 0.98);
602
+ z-index: 1000;
603
+ }
604
+
605
+ #cart-sidebar {
606
+ scrollbar-width: thin;
607
+ scrollbar-color: #bc13fe #f3f4f6;
608
+ }
609
+
610
+ #cart-sidebar::-webkit-scrollbar {
611
+ width: 6px;
612
+ }
613
+
614
+ #cart-sidebar::-webkit-scrollbar-track {
615
+ background: #f3f4f6;
616
+ }
617
+
618
+ #cart-sidebar::-webkit-scrollbar-thumb {
619
+ background-color: #bc13fe;
620
+ border-radius: 3px;
621
+ }
622
+
623
+ @media (min-width: 768px) {
624
+ #product-page {
625
+ padding: 3rem;
626
+ }
627
+ }
628
+ </style>
629
+ </head>
630
+ <body class="bg-white text-gray-900">
631
+ <!-- Top Bar -->
632
+ <div class="bg-black text-white text-sm py-2 px-4">
633
+ <div class="container mx-auto flex justify-between items-center">
634
+ <div class="flex items-center space-x-4">
635
+ <button id="mobile-menu-button" class="lg:hidden mr-2 bg-black p-2 rounded-full focus:outline-none">
636
+ <div class="w-6 h-6 relative">
637
+ <span class="block absolute h-0.5 w-6 bg-volt transform transition duration-300 ease-in-out" id="bar1"></span>
638
+ <span class="block absolute h-0.5 w-6 bg-volt transform transition duration-300 ease-in-out mt-2" id="bar2"></span>
639
+ <span class="block absolute h-0.5 w-6 bg-volt transform transition duration-300 ease-in-out mt-4" id="bar3"></span>
640
+ </div>
641
+ </button>
642
+ <a href="#" class="hover:text-volt transition">Ajuda</a>
643
+ <a href="#" class="hover:text-volt transition">Entregas</a>
644
+ </div>
645
+ <div class="flex space-x-4">
646
+ <a href="#" class="hover:text-volt transition"><i class="fas fa-store mr-1"></i> Lojas</a>
647
+ <a href="#" class="hover:text-volt transition"><i class="fas fa-phone mr-1"></i> Contato</a>
648
+ </div>
649
+ </div>
650
+ </div>
651
+
652
+ <!-- Header -->
653
+ <header class="py-6 px-4 border-b border-gray-200">
654
+ <div class="container mx-auto flex flex-col md:flex-row items-center justify-between">
655
+ <div class="flex items-center mb-4 md:mb-0">
656
+ <a href="#" class="text-3xl font-bold volt-text">VOLT</a>
657
+ <span class="ml-2 text-xs bg-black text-white px-2 py-1 rounded">BRASIL</span>
658
+ </div>
659
+
660
+ <div class="w-full md:w-auto flex-1 md:px-8">
661
+ <div class="relative">
662
+ <input type="text" placeholder="Buscar produtos..." class="w-full py-2 px-4 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-volt focus:border-transparent">
663
+ <button class="absolute right-0 top-0 h-full px-4 text-gray-500 hover:text-volt">
664
+ <i class="fas fa-search"></i>
665
+ </button>
666
+ </div>
667
+ </div>
668
+
669
+ <div class="flex items-center space-x-6 mt-4 md:mt-0">
670
+ <a href="#" class="hover:text-volt transition"><i class="far fa-user text-xl"></i></a>
671
+ <a href="#" onclick="openCart(event)" class="hover:text-volt transition relative">
672
+ <i class="fas fa-shopping-bag text-xl"></i>
673
+ <span id="cart-count" class="absolute -top-2 -right-2 bg-volt text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
674
+ </a>
675
+ </div>
676
+ </div>
677
+ </header>
678
+
679
+
680
+ <!-- Mobile Menu -->
681
+ <div id="mobile-menu" class="hidden fixed inset-0 bg-black bg-opacity-80 z-40 pt-20 px-6">
682
+ <button onclick="closeMobileMenu()" class="absolute top-6 right-6 text-volt text-2xl">
683
+ <i class="fas fa-times"></i>
684
+ </button>
685
+ <div class="flex flex-col items-center mb-8 mt-8">
686
+ <img src="https://via.placeholder.com/80" alt="Profile" class="rounded-full w-20 h-20 mb-2 border-2 border-volt">
687
+ <span class="text-white font-medium">Olá, Cliente</span>
688
+ </div>
689
+ <nav class="flex flex-col space-y-4 text-white">
690
+ <a href="#" class="py-2 border-b border-gray-700 hover:text-volt transition"><i class="fas fa-user mr-2"></i> Minha Conta</a>
691
+ <a href="#" class="py-2 border-b border-gray-700 hover:text-volt transition"><i class="fas fa-box mr-2"></i> Meus Pedidos</a>
692
+ <a href="#" class="py-2 border-b border-gray-700 hover:text-volt transition"><i class="fas fa-heart mr-2"></i> Favoritos</a>
693
+ <a href="#" class="py-2 border-b border-gray-700 hover:text-volt transition"><i class="fas fa-question-circle mr-2"></i> Ajuda</a>
694
+ <a href="#" class="py-2 border-b border-gray-700 hover:text-volt transition"><i class="fas fa-cog mr-2"></i> Configurações</a>
695
+ <a href="#" class="py-2 text-volt hover:text-voltlight transition"><i class="fas fa-sign-out-alt mr-2"></i> Sair</a>
696
+ </nav>
697
+ </div>
698
+
699
+ <!-- Navigation -->
700
+ <nav class="bg-white py-4 px-4 border-b border-gray-200 sticky top-0 z-30" id="main-nav">
701
+ <div class="container mx-auto">
702
+ <div class="overflow-x-auto whitespace-nowrap py-2">
703
+ <ul class="inline-flex space-x-1 md:space-x-6">
704
+ <li><a href="#" class="px-3 py-2 font-medium hover:text-volt transition">Novidades</a></li>
705
+ <li><a href="#" class="px-3 py-2 font-medium hover:text-volt transition">Oversized</a></li>
706
+ <li><a href="#" class="px-3 py-2 font-medium hover:text-volt transition">Masculino</a></li>
707
+ <li><a href="#" class="px-3 py-2 font-medium hover:text-volt transition">Feminino</a></li>
708
+ <li><a href="#" class="px-3 py-2 font-medium hover:text-volt transition">Outlet</a></li>
709
+ <li><a href="#" class="px-3 py-2 font-medium hover:text-volt transition">Basics</a></li>
710
+ <li><a href="#" class="px-3 py-2 font-medium hover:text-volt transition">Acessórios</a></li>
711
+ </ul>
712
+ </div>
713
+ </div>
714
+ </nav>
715
+
716
+ <!-- Hero Banner -->
717
+ <div class="relative bg-black text-white pt-20">
718
+ <div class="absolute inset-0 bg-gradient-to-r from-black to-transparent z-10"></div>
719
+ <img src="https://images.unsplash.com/photo-1527719327859-c6ce80353573?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="VOLT Collection" class="w-full h-auto object-cover opacity-90">
720
+ <div class="absolute inset-0 flex items-center z-20">
721
+ <div class="container mx-auto px-6">
722
+ <h1 class="text-4xl md:text-6xl font-bold mb-4">COLEÇÃO <span class="volt-text">ELÉTRICA</span></h1>
723
+ <p class="text-xl md:text-2xl mb-8 max-w-lg">Camisas oversized que carregam sua personalidade com alta voltagem.</p>
724
+ <a href="#" class="inline-block bg-volt hover:bg-voltlight text-white font-bold py-3 px-8 rounded-full transition hover-effect" onclick="openProductPageFromHero(event, this)">COMPRE AGORA</a>
725
+ </div>
726
+ </div>
727
+ </div>
728
+
729
+ <!-- Featured Categories -->
730
+ <div class="py-12 bg-gray-50">
731
+ <div class="container mx-auto px-4">
732
+ <h2 class="text-3xl font-bold text-center mb-12 electric-line">CATEGORIAS EM DESTAQUE</h2>
733
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
734
+ <a href="#" class="group relative overflow-hidden rounded-lg hover-effect">
735
+ <img src="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=736&q=80" alt="Camisetas Oversized" class="w-full h-64 object-cover group-hover:opacity-90 transition">
736
+ <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
737
+ <h3 class="text-white text-xl font-bold">CAMISETAS OVERSIZED</h3>
738
+ </div>
739
+ </a>
740
+ <a href="#" class="group relative overflow-hidden rounded-lg hover-effect">
741
+ <img src="https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=776&q=80" alt="Moletons" class="w-full h-64 object-cover group-hover:opacity-90 transition">
742
+ <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
743
+ <h3 class="text-white text-xl font-bold">MOLETONS</h3>
744
+ </div>
745
+ </a>
746
+ <a href="#" class="group relative overflow-hidden rounded-lg hover-effect">
747
+ <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Shorts" class="w-full h-64 object-cover group-hover:opacity-90 transition">
748
+ <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
749
+ <h3 class="text-white text-xl font-bold">SHORTS</h3>
750
+ </div>
751
+ </a>
752
+ <a href="#" class="group relative overflow-hidden rounded-lg hover-effect">
753
+ <img src="https://images.unsplash.com/photo-1594631252845-29fc4cc8cde9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Acessórios" class="w-full h-64 object-cover group-hover:opacity-90 transition">
754
+ <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
755
+ <h3 class="text-white text-xl font-bold">ACESSÓRIOS</h3>
756
+ </div>
757
+ </a>
758
+ </div>
759
+ </div>
760
+ </div>
761
+
762
+ <!-- New Arrivals -->
763
+ <div class="py-12">
764
+ <div class="container mx-auto px-4">
765
+ <h2 class="text-3xl font-bold text-center mb-12 electric-line">LANÇAMENTOS</h2>
766
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
767
+ <!-- Product 1 -->
768
+ <div class="product-card group">
769
+ <div class="relative overflow-hidden rounded-lg mb-4">
770
+ <img src="https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=776&q=80" alt="Camiseta VOLT" class="w-full h-80 object-cover product-image transition cursor-pointer" onclick="showBuyButton(this)">
771
+ <div class="absolute top-4 right-4">
772
+ </div>
773
+ <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 text-white p-3 opacity-0 transition buy-button-container">
774
+ <a href="#" class="block text-center py-2 bg-volt hover:bg-voltlight rounded font-medium transition" onclick="openProductPageFromCard(event, this)">COMPRAR</a>
775
+ </div>
776
+ </div>
777
+ <h3 class="font-medium">CAMISETA OVERSIZED VOLT</h3>
778
+ <div class="flex justify-between items-center mt-1">
779
+ <span class="text-gray-600">Preto</span>
780
+ <span class="font-bold">R$ 129,90</span>
781
+ </div>
782
+ <div class="flex items-center">
783
+ <i class="fas fa-bolt text-volt mr-2"></i>
784
+ <div class="voltage-meter">
785
+ <div class="voltage-fill high" style="width: 100%">
786
+ <div class="lightning"></div>
787
+ </div>
788
+ </div>
789
+ </div>
790
+ </div>
791
+
792
+ <!-- Product 2 -->
793
+ <div class="product-card group">
794
+ <div class="relative overflow-hidden rounded-lg mb-4">
795
+ <img src="https://images.unsplash.com/photo-1576566588028-4147f3842f27?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=764&q=80" alt="Moletom VOLT" class="w-full h-80 object-cover product-image transition cursor-pointer" onclick="showBuyButton(this)">
796
+ <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 text-white p-3 opacity-0 transition buy-button-container">
797
+ <a href="#" class="block text-center py-2 bg-volt hover:bg-voltlight rounded font-medium transition" onclick="openProductPageFromCard(event, this)">COMPRAR</a>
798
+ </div>
799
+ </div>
800
+ <h3 class="font-medium">MOLETON OVERSIZED VOLT</h3>
801
+ <div class="flex justify-between items-center mt-1">
802
+ <span class="text-gray-600">Cinza</span>
803
+ <span class="font-bold">R$ 199,90</span>
804
+ </div>
805
+ <div class="flex items-center">
806
+ <i class="fas fa-bolt text-volt mr-2"></i>
807
+ <div class="voltage-meter">
808
+ <div class="voltage-fill medium" style="width: 75%">
809
+ <div class="lightning"></div>
810
+ </div>
811
+ </div>
812
+ </div>
813
+ </div>
814
+
815
+ <!-- Product 3 -->
816
+ <div class="product-card group">
817
+ <div class="relative overflow-hidden rounded-lg mb-4">
818
+ <img src="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=736&q=80" alt="Camiseta VOLT" class="w-full h-80 object-cover product-image transition">
819
+ <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 text-white p-3 opacity-0 group-hover:opacity-100 transition">
820
+ <a href="#" class="block text-center py-2 bg-volt hover:bg-voltlight rounded font-medium transition">COMPRAR</a>
821
+ </div>
822
+ </div>
823
+ <h3 class="font-medium">CAMISETA OVERSIZED VOLT</h3>
824
+ <div class="flex justify-between items-center mt-1">
825
+ <span class="text-gray-600">Branco</span>
826
+ <span class="font-bold">R$ 129,90</span>
827
+ </div>
828
+ <div class="flex items-center">
829
+ <i class="fas fa-bolt text-volt mr-2"></i>
830
+ <div class="voltage-meter">
831
+ <div class="voltage-fill high" style="width: 100%">
832
+ <div class="lightning"></div>
833
+ </div>
834
+ </div>
835
+ </div>
836
+ </div>
837
+
838
+ <!-- Product 4 -->
839
+ <div class="product-card group">
840
+ <div class="relative overflow-hidden rounded-lg mb-4">
841
+ <img src="https://images.unsplash.com/photo-1576566588028-4147f3842f27?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=764&q=80" alt="Camiseta VOLT" class="w-full h-80 object-cover product-image transition">
842
+ <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 text-white p-3 opacity-0 group-hover:opacity-100 transition">
843
+ <a href="#" class="block text-center py-2 bg-volt hover:bg-voltlight rounded font-medium transition">COMPRAR</a>
844
+ </div>
845
+ </div>
846
+ <h3 class="font-medium">CAMISETA OVERSIZED VOLT</h3>
847
+ <div class="flex justify-between items-center mt-1">
848
+ <span class="text-gray-600">Azul</span>
849
+ <span class="font-bold">R$ 139,90</span>
850
+ </div>
851
+ <div class="flex items-center">
852
+ <i class="fas fa-bolt text-volt mr-2"></i>
853
+ <div class="voltage-meter">
854
+ <div class="voltage-fill medium" style="width: 75%">
855
+ <div class="lightning"></div>
856
+ </div>
857
+ </div>
858
+ </div>
859
+ </div>
860
+ </div>
861
+
862
+ <div class="text-center mt-10">
863
+ <a href="#" class="inline-block border-2 border-black hover:bg-black hover:text-white font-bold py-3 px-8 rounded-full transition">VER TODOS</a>
864
+ </div>
865
+ </div>
866
+ </div>
867
+
868
+ <!-- Banner -->
869
+ <div class="py-12 bg-gray-100">
870
+ <div class="container mx-auto px-4">
871
+ <div class="bg-white rounded-lg overflow-hidden shadow-lg">
872
+ <div class="md:flex">
873
+ <div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
874
+ <h2 class="text-3xl font-bold mb-4">SEJA UM <span class="volt-text">MEMBRO VOLT</span></h2>
875
+ <p class="text-gray-600 mb-6">Cadastre-se e ganhe 10% OFF na primeira compra, além de receber ofertas exclusivas e acesso antecipado a novos lançamentos.</p>
876
+ <div class="flex max-w-md">
877
+ <input type="email" placeholder="Seu e-mail" class="flex-1 py-2 px-4 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-volt focus:border-transparent">
878
+ <button class="bg-volt hover:bg-voltlight text-white font-bold py-2 px-4 rounded-r-lg transition text-sm">CADASTRAR</button>
879
+ </div>
880
+ </div>
881
+ <div class="md:w-1/2">
882
+ <img src="https://images.unsplash.com/photo-1529333166437-7750a6dd5a70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="Membro VOLT" class="w-full h-full object-cover">
883
+ </div>
884
+ </div>
885
+ </div>
886
+ </div>
887
+ </div>
888
+
889
+ <!-- Instagram -->
890
+ <div class="py-12">
891
+ <div class="container mx-auto px-4">
892
+ <div class="flex flex-col md:flex-row items-center justify-between mb-8">
893
+ <h2 class="text-3xl font-bold electric-line">SIGA A <span class="volt-text">@VOLTBRASIL</span></h2>
894
+ <a href="#" class="mt-4 md:mt-0 inline-flex items-center text-black hover:text-volt font-medium">
895
+ <i class="fab fa-instagram text-2xl mr-2"></i> VER MAIS NO INSTAGRAM
896
+ </a>
897
+ </div>
898
+
899
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
900
+ <a href="#" class="group relative overflow-hidden rounded-lg hover-effect">
901
+ <img src="https://images.unsplash.com/photo-1527719327859-c6ce80353573?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Instagram 1" class="w-full h-64 object-cover group-hover:opacity-90 transition">
902
+ <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 flex items-center justify-center transition">
903
+ <i class="fab fa-instagram text-white text-3xl opacity-0 group-hover:opacity-100 transition"></i>
904
+ </div>
905
+ </a>
906
+ <a href="#" class="group relative overflow-hidden rounded-lg hover-effect">
907
+ <img src="https://images.unsplash.com/photo-1576566588028-4147f3842f27?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=764&q=80" alt="Instagram 2" class="w-full h-64 object-cover group-hover:opacity-90 transition">
908
+ <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 flex items-center justify-center transition">
909
+ <i class="fab fa-instagram text-white text-3xl opacity-0 group-hover:opacity-100 transition"></i>
910
+ </div>
911
+ </a>
912
+ <a href="#" class="group relative overflow-hidden rounded-lg hover-effect">
913
+ <img src="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=736&q=80" alt="Instagram 3" class="w-full h-64 object-cover group-hover:opacity-90 transition">
914
+ <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 flex items-center justify-center transition">
915
+ <i class="fab fa-instagram text-white text-3xl opacity-0 group-hover:opacity-100 transition"></i>
916
+ </div>
917
+ </a>
918
+ <a href="#" class="group relative overflow-hidden rounded-lg hover-effect">
919
+ <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Instagram 4" class="w-full h-64 object-cover group-hover:opacity-90 transition">
920
+ <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 flex items-center justify-center transition">
921
+ <i class="fab fa-instagram text-white text-3xl opacity-0 group-hover:opacity-100 transition"></i>
922
+ </div>
923
+ </a>
924
+ </div>
925
+ </div>
926
+ </div>
927
+
928
+ <!-- Footer -->
929
+ <footer class="bg-black text-white pt-12 pb-6">
930
+ <div class="container mx-auto px-4">
931
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
932
+ <div>
933
+ <h3 class="text-xl font-bold mb-4 volt-text">VOLT</h3>
934
+ <p class="mb-4">Camisas oversized premium com estilo único e conforto inigualável.</p>
935
+ <div class="flex space-x-4">
936
+ <a href="#" class="text-white hover:text-volt transition"><i class="fab fa-facebook-f"></i></a>
937
+ <a href="#" class="text-white hover:text-volt transition"><i class="fab fa-instagram"></i></a>
938
+ <a href="#" class="text-white hover:text-volt transition"><i class="fab fa-twitter"></i></a>
939
+ <a href="#" class="text-white hover:text-volt transition"><i class="fab fa-youtube"></i></a>
940
+ </div>
941
+ </div>
942
+
943
+ <div>
944
+ <h3 class="text-lg font-bold mb-4">INSTITUCIONAL</h3>
945
+ <ul class="space-y-2">
946
+ <li><a href="#" class="hover:text-volt transition">Sobre a VOLT</a></li>
947
+ <li><a href="#" class="hover:text-volt transition">Trabalhe Conosco</a></li>
948
+ <li><a href="#" class="hover:text-volt transition">Política de Privacidade</a></li>
949
+ <li><a href="#" class="hover:text-volt transition">Termos e Condições</a></li>
950
+ </ul>
951
+ </div>
952
+
953
+ <div>
954
+ <h3 class="text-lg font-bold mb-4">AJUDA</h3>
955
+ <ul class="space-y-2">
956
+ <li><a href="#" class="hover:text-volt transition">Dúvidas Frequentes</a></li>
957
+ <li><a href="#" class="hover:text-volt transition">Trocas e Devoluções</a></li>
958
+ <li><a href="#" class="hover:text-volt transition">Entregas</a></li>
959
+ <li><a href="#" class="hover:text-volt transition">Meus Pedidos</a></li>
960
+ </ul>
961
+ </div>
962
+
963
+ <div>
964
+ <h3 class="text-lg font-bold mb-4">CONTATO</h3>
965
+ <ul class="space-y-2">
966
+ <li><i class="fas fa-phone-alt mr-2"></i> (11) 4004-0040</li>
967
+ <li><i class="fas fa-envelope mr-2"></i> contato@voltbrasil.com.br</li>
968
+ <li><i class="fas fa-map-marker-alt mr-2"></i> São Paulo - SP</li>
969
+ <li class="mt-4">
970
+ <div class="flex max-w-xs">
971
+ <input type="email" placeholder="Seu e-mail" class="flex-1 py-1 px-3 bg-gray-800 text-white rounded-l focus:outline-none text-sm">
972
+ <button class="bg-volt hover:bg-voltlight text-white py-1 px-3 rounded-r transition text-sm">
973
+ <i class="fas fa-paper-plane"></i>
974
+ </button>
975
+ </div>
976
+ </li>
977
+ </ul>
978
+ </div>
979
+ </div>
980
+
981
+ <div class="border-t border-gray-800 pt-6">
982
+ <div class="flex flex-col md:flex-row justify-between items-center">
983
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 VOLT Brasil. Todos os direitos reservados.</p>
984
+ <div class="flex space-x-4">
985
+ <img src="https://via.placeholder.com/40x25" alt="Visa" class="h-6">
986
+ <img src="https://via.placeholder.com/40x25" alt="Mastercard" class="h-6">
987
+ <img src="https://via.placeholder.com/40x25" alt="American Express" class="h-6">
988
+ <img src="https://via.placeholder.com/40x25" alt="Pix" class="h-6">
989
+ </div>
990
+ </div>
991
+ </div>
992
+ </div>
993
+ </footer>
994
+
995
+ <!-- Shopping Cart Sidebar -->
996
+ <div id="cart-sidebar" class="fixed top-0 right-0 h-full w-0 bg-white shadow-xl z-50 overflow-y-auto transition-all duration-300">
997
+ <div class="p-6">
998
+ <div class="flex justify-between items-center mb-6">
999
+ <h2 class="text-2xl font-bold">SEU CARRINHO</h2>
1000
+ <button onclick="closeCart()" class="text-gray-500 hover:text-gray-700">
1001
+ <i class="fas fa-times text-2xl"></i>
1002
+ </button>
1003
+ </div>
1004
+
1005
+ <div id="cart-items" class="space-y-4">
1006
+ <!-- Cart items will be added here dynamically -->
1007
+ <div id="empty-cart-message" class="text-center py-12">
1008
+ <i class="fas fa-shopping-cart text-4xl text-gray-300 mb-4"></i>
1009
+ <p class="text-gray-500">Seu carrinho está vazio</p>
1010
+ </div>
1011
+ </div>
1012
+
1013
+ <div id="cart-summary" class="border-t border-gray-200 pt-4 mt-6 hidden">
1014
+ <div class="flex justify-between mb-2">
1015
+ <span>Subtotal</span>
1016
+ <span id="cart-subtotal">R$ 0,00</span>
1017
+ </div>
1018
+ <div class="flex justify-between mb-4">
1019
+ <span>Frete</span>
1020
+ <span>Grátis</span>
1021
+ </div>
1022
+ <div class="flex justify-between font-bold text-lg">
1023
+ <span>Total</span>
1024
+ <span id="cart-total">R$ 0,00</span>
1025
+ </div>
1026
+ <button id="checkout-button" class="w-full bg-volt hover:bg-voltlight text-white font-bold py-3 px-4 rounded-full mt-6 transition">
1027
+ FINALIZAR COMPRA
1028
+ </button>
1029
+ </div>
1030
+ </div>
1031
+ </div>
1032
+
1033
+ <!-- WhatsApp Float -->
1034
+ <a href="#" class="fixed bottom-6 right-6 bg-green-500 text-white rounded-full p-4 shadow-lg hover:bg-green-600 transition">
1035
+ <i class="fab fa-whatsapp text-2xl"></i>
1036
+ </a>
1037
+
1038
+ <!-- Notification Toast -->
1039
+ <div id="notification-toast" class="fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-gray-700 text-white px-6 py-3 rounded-lg shadow-lg opacity-0 transition-opacity duration-300 z-50">
1040
+ <p id="notification-message"></p>
1041
+ </div>
1042
+
1043
+ <script>
1044
+ // Sticky navigation handler
1045
+ window.addEventListener('scroll', function() {
1046
+ const nav = document.getElementById('main-nav');
1047
+ const navHeight = nav.offsetHeight;
1048
+
1049
+ if (window.pageYOffset > navHeight) {
1050
+ nav.classList.add('sticky-nav-active');
1051
+ document.body.style.paddingTop = navHeight + 'px';
1052
+ } else {
1053
+ nav.classList.remove('sticky-nav-active');
1054
+ document.body.style.paddingTop = '0';
1055
+ }
1056
+ });
1057
+
1058
+ // Mobile menu functions
1059
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
1060
+ const mobileMenu = document.getElementById('mobile-menu');
1061
+ const bars = [
1062
+ document.getElementById('bar1'),
1063
+ document.getElementById('bar2'),
1064
+ document.getElementById('bar3')
1065
+ ];
1066
+
1067
+ let menuOpen = false;
1068
+
1069
+ function closeMobileMenu() {
1070
+ menuOpen = false;
1071
+ mobileMenu.classList.add('hidden');
1072
+ document.body.style.overflow = 'auto';
1073
+ bars[0].style.transform = '';
1074
+ bars[0].style.width = '';
1075
+ bars[1].style.opacity = '';
1076
+ bars[2].style.transform = '';
1077
+ bars[2].style.width = '';
1078
+ }
1079
+
1080
+ mobileMenuButton.addEventListener('click', () => {
1081
+ menuOpen = !menuOpen;
1082
+
1083
+ if (menuOpen) {
1084
+ mobileMenu.classList.remove('hidden');
1085
+ document.body.style.overflow = 'hidden';
1086
+ bars[0].style.transform = 'rotate(45deg) translate(6px, 6px)';
1087
+ bars[0].style.width = '24px';
1088
+ bars[1].style.opacity = '0';
1089
+ bars[2].style.transform = 'rotate(-45deg) translate(6px, -6px)';
1090
+ bars[2].style.width = '24px';
1091
+ } else {
1092
+ mobileMenu.classList.add('hidden');
1093
+ document.body.style.overflow = 'auto';
1094
+ bars[0].style.transform = '';
1095
+ bars[0].style.width = '';
1096
+ bars[1].style.opacity = '';
1097
+ bars[2].style.transform = '';
1098
+ bars[2].style.width = '';
1099
+ }
1100
+ });
1101
+
1102
+ function openProductPage(product) {
1103
+ document.getElementById('product-page').classList.remove('hidden');
1104
+ document.body.style.overflow = 'hidden';
1105
+
1106
+ // Populate product data
1107
+ document.getElementById('product-title').textContent = product.title;
1108
+ document.getElementById('product-price').textContent = product.price;
1109
+ document.getElementById('product-description').textContent = product.description;
1110
+ document.getElementById('product-main-image').src = product.image;
1111
+ }
1112
+
1113
+ function closeProductPage() {
1114
+ document.getElementById('product-page').classList.add('hidden');
1115
+ document.body.style.overflow = 'auto';
1116
+ }
1117
+
1118
+ function closeQuantityWarning() {
1119
+ document.getElementById('quantity-warning').classList.add('hidden');
1120
+ }
1121
+
1122
+ function showQuantityWarning() {
1123
+ const warningDiv = document.getElementById('quantity-warning');
1124
+ warningDiv.classList.remove('hidden');
1125
+
1126
+ // Auto-hide after 5 seconds
1127
+ setTimeout(() => {
1128
+ warningDiv.classList.add('hidden');
1129
+ }, 5000);
1130
+ }
1131
+
1132
+ // Product voltage data (simulated) - all set to high voltage (100%)
1133
+ const productVoltage = {
1134
+ 'CAMISETA OVERSIZED VOLT': 100,
1135
+ 'MOLETON OVERSIZED VOLT': 75,
1136
+ 'CAMISETA OVERSIZED VOLT': 50,
1137
+ 'CAMISETA OVERSIZED VOLT': 75
1138
+ };
1139
+
1140
+ // Update voltage meters
1141
+ function updateVoltageMeters() {
1142
+ document.querySelectorAll('.product-card').forEach(card => {
1143
+ const title = card.querySelector('h3').textContent;
1144
+ const voltage = productVoltage[title] || 0;
1145
+ const meter = card.querySelector('.voltage-fill');
1146
+
1147
+ meter.style.width = `${voltage}%`;
1148
+ meter.className = 'voltage-fill';
1149
+ const boltIcon = card.querySelector('.fa-bolt');
1150
+
1151
+ if (voltage === 0) {
1152
+ meter.classList.add('low');
1153
+ boltIcon.classList.add('low');
1154
+ } else if (voltage < 75) {
1155
+ meter.classList.add('medium');
1156
+ boltIcon.classList.add('medium');
1157
+ } else {
1158
+ meter.classList.add('high');
1159
+ boltIcon.classList.add('high');
1160
+ }
1161
+ });
1162
+ }
1163
+
1164
+ // Shopping cart functionality
1165
+ let cart = [];
1166
+
1167
+ function openCart(e) {
1168
+ e.preventDefault();
1169
+ document.getElementById('cart-sidebar').style.width = '85%';
1170
+ document.body.style.overflow = 'hidden';
1171
+ }
1172
+
1173
+ function closeCart() {
1174
+ document.getElementById('cart-sidebar').style.width = '0';
1175
+ document.body.style.overflow = 'auto';
1176
+ }
1177
+
1178
+ function showNotification(message) {
1179
+ const toast = document.getElementById('notification-toast');
1180
+ const messageEl = document.getElementById('notification-message');
1181
+ messageEl.textContent = message;
1182
+ toast.classList.remove('opacity-0');
1183
+ toast.classList.add('opacity-100');
1184
+
1185
+ setTimeout(() => {
1186
+ toast.classList.remove('opacity-100');
1187
+ toast.classList.add('opacity-0');
1188
+ }, 3000);
1189
+ }
1190
+
1191
+ function addToCart(product, color, size, quantity) {
1192
+ // Check if color and size are selected
1193
+ if (!color || !size) {
1194
+ let message = '';
1195
+ if (!color && !size) {
1196
+ message = 'Por favor, selecione a cor e o tamanho';
1197
+ } else if (!color) {
1198
+ message = 'Por favor, selecione a cor';
1199
+ } else {
1200
+ message = 'Por favor, selecione o tamanho';
1201
+ }
1202
+ showNotification(message);
1203
+ return false;
1204
+ }
1205
+
1206
+ // Add item to cart
1207
+ const price = parseFloat(product.price.replace('R$ ', '').replace(',', '.'));
1208
+ const total = price * quantity;
1209
+
1210
+ const cartItem = {
1211
+ id: Date.now(),
1212
+ product: product.title,
1213
+ image: product.image,
1214
+ price: price,
1215
+ color: color,
1216
+ size: size,
1217
+ quantity: quantity,
1218
+ total: total
1219
+ };
1220
+
1221
+ cart.push(cartItem);
1222
+ updateCartDisplay();
1223
+ showNotification('Item adicionado ao carrinho!');
1224
+ return true;
1225
+ }
1226
+
1227
+ function updateCartDisplay() {
1228
+ const cartItemsEl = document.getElementById('cart-items');
1229
+ const emptyCartEl = document.getElementById('empty-cart-message');
1230
+ const cartSummaryEl = document.getElementById('cart-summary');
1231
+ const cartCountEl = document.getElementById('cart-count');
1232
+
1233
+ if (cart.length === 0) {
1234
+ emptyCartEl.classList.remove('hidden');
1235
+ cartSummaryEl.classList.add('hidden');
1236
+ cartCountEl.textContent = '0';
1237
+ return;
1238
+ }
1239
+
1240
+ emptyCartEl.classList.add('hidden');
1241
+ cartSummaryEl.classList.remove('hidden');
1242
+ cartCountEl.textContent = cart.length.toString();
1243
+
1244
+ // Clear existing items
1245
+ cartItemsEl.innerHTML = '';
1246
+
1247
+ let subtotal = 0;
1248
+
1249
+ // Add each cart item
1250
+ cart.forEach(item => {
1251
+ subtotal += item.total;
1252
+
1253
+ const itemEl = document.createElement('div');
1254
+ itemEl.className = 'flex border-b border-gray-200 pb-4';
1255
+ itemEl.innerHTML = `
1256
+ <div class="w-24 h-24 bg-gray-100 rounded-lg overflow-hidden mr-4">
1257
+ <img src="${item.image}" alt="${item.product}" class="w-full h-full object-cover">
1258
+ </div>
1259
+ <div class="flex-1">
1260
+ <h3 class="font-medium">${item.product}</h3>
1261
+ <p class="text-sm text-gray-500">${item.color} / ${item.size}</p>
1262
+ <div class="flex justify-between items-center mt-2">
1263
+ <div class="flex items-center">
1264
+ <button onclick="updateQuantity(${item.id}, -1)" class="bg-gray-200 px-2 py-1 rounded-l">-</button>
1265
+ <span class="px-2">${item.quantity}</span>
1266
+ <button onclick="updateQuantity(${item.id}, 1)" class="bg-gray-200 px-2 py-1 rounded-r">+</button>
1267
+ </div>
1268
+ <span class="font-medium">R$ ${item.total.toFixed(2).replace('.', ',')}</span>
1269
+ </div>
1270
+ </div>
1271
+ <button onclick="removeFromCart(${item.id})" class="ml-4 text-gray-400 hover:text-red-500">
1272
+ <i class="fas fa-trash"></i>
1273
+ </button>
1274
+ `;
1275
+ cartItemsEl.appendChild(itemEl);
1276
+ });
1277
+
1278
+ // Update totals
1279
+ document.getElementById('cart-subtotal').textContent = `R$ ${subtotal.toFixed(2).replace('.', ',')}`;
1280
+ document.getElementById('cart-total').textContent = `R$ ${subtotal.toFixed(2).replace('.', ',')}`;
1281
+ }
1282
+
1283
+ function updateQuantity(itemId, change) {
1284
+ const itemIndex = cart.findIndex(item => item.id === itemId);
1285
+ if (itemIndex === -1) return;
1286
+
1287
+ const newQuantity = cart[itemIndex].quantity + change;
1288
+ if (newQuantity < 1) return;
1289
+
1290
+ cart[itemIndex].quantity = newQuantity;
1291
+ cart[itemIndex].total = cart[itemIndex].price * newQuantity;
1292
+ updateCartDisplay();
1293
+ }
1294
+
1295
+ function removeFromCart(itemId) {
1296
+ cart = cart.filter(item => item.id !== itemId);
1297
+ updateCartDisplay();
1298
+ }
1299
+
1300
+ function handleBuyClick(e) {
1301
+ e.preventDefault();
1302
+ const color = document.querySelector('.color-option.selected')?.dataset.color;
1303
+ const size = document.querySelector('.size-option.selected')?.dataset.size;
1304
+ const quantity = parseInt(document.getElementById('quantity').value);
1305
+
1306
+ const product = {
1307
+ title: document.getElementById('product-title').textContent,
1308
+ price: document.getElementById('product-price').textContent,
1309
+ image: document.getElementById('product-main-image').src
1310
+ };
1311
+
1312
+ if (addToCart(product, color, size, quantity)) {
1313
+ // If validation passed and item was added to cart
1314
+ openCart(e);
1315
+ }
1316
+ }
1317
+
1318
+ function handleAddToCartClick(e) {
1319
+ e.preventDefault();
1320
+ const color = document.querySelector('.color-option.selected')?.dataset.color;
1321
+ const size = document.querySelector('.size-option.selected')?.dataset.size;
1322
+ const quantity = parseInt(document.getElementById('quantity').value);
1323
+
1324
+ const product = {
1325
+ title: document.getElementById('product-title').textContent,
1326
+ price: document.getElementById('product-price').textContent,
1327
+ image: document.getElementById('product-main-image').src
1328
+ };
1329
+
1330
+ addToCart(product, color, size, quantity);
1331
+ }
1332
+
1333
+ // Initialize voltage meters
1334
+ updateVoltageMeters();
1335
+
1336
+ // Show buy button when clicking product image
1337
+ function showBuyButton(imgElement) {
1338
+ const container = imgElement.closest('.relative');
1339
+ const buyButton = container.querySelector('.buy-button-container');
1340
+ buyButton.classList.toggle('opacity-0');
1341
+ buyButton.classList.toggle('opacity-100');
1342
+ }
1343
+
1344
+ // Open product page from hero banner
1345
+ function openProductPageFromHero(event, button) {
1346
+ event.preventDefault();
1347
+ const product = {
1348
+ title: "CAMISETA OVERSIZED VOLT",
1349
+ price: "R$ 129,90",
1350
+ description: 'Camiseta oversized premium com estampa exclusiva VOLT. Modelagem confortável e moderna, perfeita para looks despojados.',
1351
+ image: "https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=776&q=80"
1352
+ };
1353
+ openProductPage(product);
1354
+ initializeQuantityControls();
1355
+ }
1356
+
1357
+ // Open product page from buy button
1358
+ function openProductPageFromCard(event, button) {
1359
+ event.preventDefault();
1360
+ event.stopPropagation();
1361
+ const productCard = button.closest('.product-card');
1362
+ const product = {
1363
+ title: productCard.querySelector('h3').textContent,
1364
+ price: productCard.querySelector('.font-bold:last-child').textContent,
1365
+ description: 'Camiseta oversized premium com estampa exclusiva VOLT. Modelagem confortável e moderna, perfeita para looks despojados.',
1366
+ image: productCard.querySelector('.product-image').src
1367
+ };
1368
+ openProductPage(product);
1369
+ initializeQuantityControls();
1370
+ }
1371
+
1372
+ // Initialize product selection controls
1373
+ function initializeQuantityControls() {
1374
+ // Color selection
1375
+ const colorOptions = document.querySelectorAll('.color-option');
1376
+ colorOptions.forEach(option => {
1377
+ option.addEventListener('click', function() {
1378
+ // Remove selected class from all color options
1379
+ colorOptions.forEach(opt => {
1380
+ opt.classList.remove('selected-color');
1381
+ });
1382
+ // Add selected class to clicked option
1383
+ this.classList.add('selected-color');
1384
+ // Store selected color
1385
+ this.closest('#product-page').dataset.selectedColor = this.dataset.color;
1386
+ });
1387
+
1388
+ // Check if this color was previously selected
1389
+ if (this.dataset.color === this.closest('#product-page').dataset.selectedColor) {
1390
+ this.classList.add('selected-color');
1391
+ }
1392
+ });
1393
+
1394
+ // Size selection
1395
+ const sizeOptions = document.querySelectorAll('.size-option');
1396
+ sizeOptions.forEach(option => {
1397
+ option.addEventListener('click', function() {
1398
+ // Remove selected class from all size options
1399
+ sizeOptions.forEach(opt => {
1400
+ opt.classList.remove('selected-size');
1401
+ });
1402
+ // Add selected class to clicked option
1403
+ this.classList.add('selected-size');
1404
+ // Store selected size
1405
+ this.closest('#product-page').dataset.selectedSize = this.dataset.size;
1406
+ });
1407
+
1408
+ // Check if this size was previously selected
1409
+ if (this.dataset.size === this.closest('#product-page').dataset.selectedSize) {
1410
+ this.classList.add('selected-size');
1411
+ }
1412
+ });
1413
+
1414
+ const decreaseBtn = document.getElementById('decrease-qty');
1415
+ const increaseBtn = document.getElementById('increase-qty');
1416
+ const quantityInput = document.getElementById('quantity');
1417
+ const warningDiv = document.getElementById('quantity-warning');
1418
+
1419
+ // Button controls
1420
+ decreaseBtn.addEventListener('click', () => {
1421
+ let quantity = parseInt(quantityInput.value);
1422
+ if (isNaN(quantity)) quantity = 1;
1423
+ if (quantity > 1) {
1424
+ quantityInput.value = quantity - 1;
1425
+ }
1426
+ });
1427
+
1428
+ increaseBtn.addEventListener('click', () => {
1429
+ let quantity = parseInt(quantityInput.value);
1430
+ if (isNaN(quantity)) quantity = 0;
1431
+ if (quantity < 100) {
1432
+ quantityInput.value = quantity + 1;
1433
+ // Show warning when reaching 100
1434
+ if (quantity + 1 === 100) {
1435
+ showQuantityWarning();
1436
+ }
1437
+ } else {
1438
+ showQuantityWarning();
1439
+ }
1440
+ });
1441
+
1442
+ // Input validation
1443
+ quantityInput.addEventListener('input', () => {
1444
+ let quantity = parseInt(quantityInput.value);
1445
+
1446
+ if (isNaN(quantity)) {
1447
+ quantityInput.value = 1;
1448
+ return;
1449
+ }
1450
+
1451
+ if (quantity > 100) {
1452
+ quantityInput.value = 100;
1453
+ showQuantityWarning();
1454
+ } else if (quantity < 1) {
1455
+ quantityInput.value = 1;
1456
+ }
1457
+
1458
+ // Show warning if quantity is exactly 100
1459
+ if (quantity === 100) {
1460
+ showQuantityWarning();
1461
+ }
1462
+ });
1463
+
1464
+ // Also validate on blur in case user typed invalid value
1465
+ quantityInput.addEventListener('blur', () => {
1466
+ let quantity = parseInt(quantityInput.value);
1467
+ if (isNaN(quantity) || quantity < 1) {
1468
+ quantityInput.value = 1;
1469
+ } else if (quantity > 100) {
1470
+ quantityInput.value = 100;
1471
+ showQuantityWarning();
1472
+ }
1473
+ });
1474
+
1475
+ let warningTimer;
1476
+
1477
+ function showQuantityWarning() {
1478
+ // Clear any existing timer
1479
+ if (warningTimer) {
1480
+ clearInterval(warningTimer);
1481
+ }
1482
+
1483
+ warningDiv.classList.remove('hidden');
1484
+ let timeLeft = 7;
1485
+ const timer = document.getElementById('warning-timer');
1486
+ timer.style.width = '100%';
1487
+
1488
+ warningTimer = setInterval(() => {
1489
+ timeLeft -= 0.1;
1490
+ timer.style.width = `${(timeLeft / 7) * 100}%`;
1491
+
1492
+ if (timeLeft <= 0) {
1493
+ clearInterval(warningTimer);
1494
+ warningDiv.classList.add('hidden');
1495
+ }
1496
+ }, 100);
1497
+ }
1498
+ }
1499
+
1500
+ // Add click handlers to all "COMPRAR" buttons
1501
+ document.querySelectorAll('.product-card a[href="#"]').forEach(button => {
1502
+ button.addEventListener('click', function(e) {
1503
+ e.preventDefault();
1504
+ const productCard = this.closest('.product-card');
1505
+ const product = {
1506
+ title: productCard.querySelector('h3').textContent,
1507
+ price: productCard.querySelector('.font-bold:last-child').textContent,
1508
+ description: 'Camiseta oversized premium com estampa exclusiva VOLT. Modelagem confortável e moderna, perfeita para looks despojados.',
1509
+ image: productCard.querySelector('.product-image').src
1510
+ };
1511
+ openProductPage(product);
1512
+ // Initialize quantity controls
1513
+ const decreaseBtn = document.getElementById('decrease-qty');
1514
+ const increaseBtn = document.getElementById('increase-qty');
1515
+ const quantityInput = document.getElementById('quantity');
1516
+ const warningDiv = document.getElementById('quantity-warning');
1517
+
1518
+ // Button controls
1519
+ decreaseBtn.addEventListener('click', () => {
1520
+ let quantity = parseInt(quantityInput.value);
1521
+ if (quantity > 1) {
1522
+ quantityInput.value = quantity - 1;
1523
+ }
1524
+ });
1525
+
1526
+ increaseBtn.addEventListener('click', () => {
1527
+ let quantity = parseInt(quantityInput.value);
1528
+ if (quantity < 100) {
1529
+ quantityInput.value = quantity + 1;
1530
+ // Show warning when reaching 100
1531
+ if (quantity + 1 === 100) {
1532
+ showQuantityWarning();
1533
+ }
1534
+ } else {
1535
+ showQuantityWarning();
1536
+ }
1537
+ });
1538
+
1539
+ // Input validation
1540
+ quantityInput.addEventListener('input', () => {
1541
+ let quantity = parseInt(quantityInput.value);
1542
+
1543
+ if (isNaN(quantity)) {
1544
+ return; // Allow empty input
1545
+ }
1546
+
1547
+ if (quantity > 100) {
1548
+ quantityInput.value = 100;
1549
+ showQuantityWarning();
1550
+ } else if (quantity < 1) {
1551
+ quantityInput.value = 1;
1552
+ }
1553
+
1554
+ // Show warning if quantity is exactly 100
1555
+ if (quantity === 100) {
1556
+ showQuantityWarning();
1557
+ }
1558
+ });
1559
+
1560
+ let warningTimer;
1561
+
1562
+ function showQuantityWarning() {
1563
+ // Clear any existing timer
1564
+ if (warningTimer) {
1565
+ clearInterval(warningTimer);
1566
+ }
1567
+
1568
+ warningDiv.classList.remove('hidden');
1569
+ let timeLeft = 7;
1570
+ const timer = document.getElementById('warning-timer');
1571
+ timer.style.width = '100%';
1572
+
1573
+ warningTimer = setInterval(() => {
1574
+ timeLeft -= 0.1;
1575
+ timer.style.width = `${(timeLeft / 7) * 100}%`;
1576
+
1577
+ if (timeLeft <= 0) {
1578
+ clearInterval(warningTimer);
1579
+ warningDiv.classList.add('hidden');
1580
+ }
1581
+ }, 100);
1582
+ }
1583
+ });
1584
+ });
1585
+ </script>
1586
+ <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://deepsite.hf.co/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://deepsite.hf.co" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://deepsite.hf.co?remix=Paolo2000p/volt" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p><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://deepsite.hf.co/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://deepsite.hf.co" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://deepsite.hf.co?remix=Antoli121/good" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p><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://deepsite.hf.co/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://deepsite.hf.co" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://deepsite.hf.co?remix=Alex3566m/volts" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p><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://deepsite.hf.co/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://deepsite.hf.co" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://deepsite.hf.co?remix=Juanelgod5/volt-1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p><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://deepsite.hf.co/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://deepsite.hf.co" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://deepsite.hf.co?remix=Matheusopro/g" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1587
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ Quando alguém escolher um tamanho ou uma cor quero que fique selecionado e não saia a seleção ate que a pessoa feche a página do produto ou troque de escolha, e aundo apertar no botão + ele só aumenta uma unidade ou seja de 1 a 2 de 2 a 3 e quando apertar no botão - de 3 a 2 de 2 a 1
2
+ Quando alguém escolher o tamanho quero que a seleção fique guardada até que eles fechem a página, Quando alguém escolher o tamanho quero que a seleção fique guardada até que eles fechem a página