Hugging Face's logo

Spaces:
Joaomatheus
/
entreteingo
Running

App Files Community
Joaomatheus commited on
Commit
d7effbf
·
verified ·
1 Parent(s): ada6233

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +893 -461
  2. prompts.txt +1 -0
index.html CHANGED
@@ -3,58 +3,200 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>EntertainGo - Delivery de Entretenimento</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
- .map-container {
11
- height: 400px;
12
- width: 100%;
13
- border-radius: 1rem;
14
- overflow: hidden;
15
  }
16
 
17
- .category-card:hover {
18
  transform: translateY(-5px);
19
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
20
  }
21
 
22
- .animate-pulse {
23
- animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 
 
 
 
 
 
24
  }
25
 
26
- @keyframes pulse {
27
- 0%, 100% {
28
- opacity: 1;
29
- }
30
- 50% {
31
- opacity: 0.5;
32
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
33
  }
34
 
35
- .gradient-bg {
36
- background: linear-gradient(135deg, #6b46c1 0%, #4299e1 100%);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
37
  }
38
  </style>
39
  </head>
40
  <body class="bg-gray-50 font-sans">
41
  <!-- Header/Navbar -->
42
- <header class="gradient-bg text-white shadow-lg">
43
  <div class="container mx-auto px-4 py-4">
44
  <div class="flex justify-between items-center">
45
- <div class="flex items-center space-x-2">
46
- <i class="fas fa-gamepad text-2xl"></i>
47
- <h1 class="text-2xl font-bold">EntertainGo</h1>
48
  </div>
49
  <nav class="hidden md:flex space-x-8">
50
- <a href="#" class="hover:text-purple-200 font-medium">Início</a>
51
- <a href="#" class="hover:text-purple-200 font-medium">Serviços</a>
52
- <a href="#" class="hover:text-purple-200 font-medium">Como Funciona</a>
53
- <a href="#" class="hover:text-purple-200 font-medium">Contato</a>
 
54
  </nav>
55
  <div class="flex items-center space-x-4">
56
- <button class="bg-white text-purple-800 px-4 py-2 rounded-full font-medium hover:bg-purple-100 transition">
57
- Entrar
58
  </button>
59
  <button class="md:hidden text-2xl" id="mobile-menu-button">
60
  <i class="fas fa-bars"></i>
@@ -64,484 +206,590 @@
64
  </div>
65
 
66
  <!-- Mobile Menu -->
67
- <div class="md:hidden hidden bg-purple-800 px-4 py-2" id="mobile-menu">
68
- <a href="#" class="block py-2 hover:text-purple-200">Início</a>
69
- <a href="#" class="block py-2 hover:text-purple-200">Serviços</a>
70
- <a href="#" class="block py-2 hover:text-purple-200">Como Funciona</a>
71
- <a href="#" class="block py-2 hover:text-purple-200">Contato</a>
 
72
  </div>
73
  </header>
74
 
75
- <!-- Hero Section -->
76
- <section class="gradient-bg text-white py-16">
77
- <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
78
- <div class="md:w-1/2 mb-8 md:mb-0">
79
- <h2 class="text-4xl md:text-5xl font-bold mb-4">Entretenimento sob demanda na sua localização</h2>
80
- <p class="text-xl mb-8">Encontre e contrate profissionais de entretenimento próximos a você para festas, eventos ou momentos especiais.</p>
81
- <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
82
- <button class="bg-white text-purple-800 px-6 py-3 rounded-full font-bold hover:bg-purple-100 transition flex items-center justify-center">
83
- <i class="fas fa-map-marker-alt mr-2"></i> Usar minha localização
84
- </button>
85
- <button class="bg-transparent border-2 border-white px-6 py-3 rounded-full font-bold hover:bg-white hover:text-purple-800 transition">
86
- Explorar serviços
87
- </button>
88
- </div>
89
- </div>
90
- <div class="md:w-1/2 flex justify-center">
91
- <img src="https://images.unsplash.com/photo-1519671482749-fd09be7ccebf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
92
- alt="Entretenimento"
93
- class="rounded-xl shadow-2xl max-w-full h-auto">
94
- </div>
95
- </div>
96
- </section>
97
-
98
- <!-- How It Works Section -->
99
- <section class="py-16 bg-white">
100
- <div class="container mx-auto px-4">
101
- <h2 class="text-3xl font-bold text-center mb-12">Como funciona</h2>
102
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
103
- <div class="text-center p-6 rounded-xl hover:shadow-lg transition">
104
- <div class="bg-purple-100 text-purple-800 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
105
- <i class="fas fa-map-marker-alt text-2xl"></i>
106
  </div>
107
- <h3 class="text-xl font-semibold mb-2">1. Ative sua localização</h3>
108
- <p class="text-gray-600">Permita que detectemos sua localização para encontrar os melhores profissionais próximos a você.</p>
109
- </div>
110
- <div class="text-center p-6 rounded-xl hover:shadow-lg transition">
111
- <div class="bg-purple-100 text-purple-800 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
112
- <i class="fas fa-search text-2xl"></i>
113
  </div>
114
- <h3 class="text-xl font-semibold mb-2">2. Escolha seu entretenimento</h3>
115
- <p class="text-gray-600">Navegue por diversas categorias e selecione o tipo de entretenimento que deseja.</p>
116
  </div>
117
- <div class="text-center p-6 rounded-xl hover:shadow-lg transition">
118
- <div class="bg-purple-100 text-purple-800 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
119
- <i class="fas fa-calendar-check text-2xl"></i>
 
 
 
 
 
 
 
120
  </div>
121
- <h3 class="text-xl font-semibold mb-2">3. Agende e aproveite</h3>
122
- <p class="text-gray-600">Combine os detalhes com o profissional e prepare-se para se divertir!</p>
123
  </div>
124
  </div>
125
- </div>
126
- </section>
127
-
128
- <!-- Categories Section -->
129
- <section class="py-16 bg-gray-50">
130
- <div class="container mx-auto px-4">
131
- <h2 class="text-3xl font-bold text-center mb-4">Categorias de Entretenimento</h2>
132
- <p class="text-center text-gray-600 mb-12">Encontre o tipo de entretenimento perfeito para sua ocasião</p>
133
 
134
- <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
135
- <!-- Category 1 -->
136
- <div class="category-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300">
137
- <div class="h-48 bg-purple-200 flex items-center justify-center">
138
- <i class="fas fa-music text-6xl text-purple-700"></i>
139
- </div>
140
- <div class="p-6">
141
- <h3 class="font-bold text-xl mb-2">Músicos</h3>
142
- <p class="text-gray-600">DJs, bandas, cantores e instrumentistas para seu evento.</p>
143
- <button class="mt-4 text-purple-700 font-medium hover:text-purple-900 transition">
144
- Ver profissionais <i class="fas fa-arrow-right ml-1"></i>
145
- </button>
 
 
 
 
146
  </div>
147
- </div>
148
-
149
- <!-- Category 2 -->
150
- <div class="category-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300">
151
- <div class="h-48 bg-blue-200 flex items-center justify-center">
152
- <i class="fas fa-magic text-6xl text-blue-700"></i>
 
 
 
 
 
 
 
 
 
153
  </div>
154
- <div class="p-6">
155
- <h3 class="font-bold text-xl mb-2">Mágicos</h3>
156
- <p class="text-gray-600">Ilusionistas e performers para surpreender seus convidados.</p>
157
- <button class="mt-4 text-blue-700 font-medium hover:text-blue-900 transition">
158
- Ver profissionais <i class="fas fa-arrow-right ml-1"></i>
159
- </button>
 
 
 
160
  </div>
161
  </div>
162
-
163
- <!-- Category 3 -->
164
- <div class="category-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300">
165
- <div class="h-48 bg-green-200 flex items-center justify-center">
166
- <i class="fas fa-child text-6xl text-green-700"></i>
167
- </div>
168
- <div class="p-6">
169
- <h3 class="font-bold text-xl mb-2">Animadores</h3>
170
- <p class="text-gray-600">Especialistas em entreter crianças e adultos em festas.</p>
171
- <button class="mt-4 text-green-700 font-medium hover:text-green-900 transition">
172
- Ver profissionais <i class="fas fa-arrow-right ml-1"></i>
173
- </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
174
  </div>
175
  </div>
176
 
177
- <!-- Category 4 -->
178
- <div class="category-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300">
179
- <div class="h-48 bg-yellow-200 flex items-center justify-center">
180
- <i class="fas fa-theater-masks text-6xl text-yellow-700"></i>
181
- </div>
182
- <div class="p-6">
183
- <h3 class="font-bold text-xl mb-2">Atores</h3>
184
- <p class="text-gray-600">Performances teatrais, personagens temáticos e muito mais.</p>
185
- <button class="mt-4 text-yellow-700 font-medium hover:text-yellow-900 transition">
186
- Ver profissionais <i class="fas fa-arrow-right ml-1"></i>
187
- </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
188
  </div>
189
  </div>
190
  </div>
191
 
192
- <div class="text-center mt-10">
193
- <button class="px-6 py-3 bg-gray-800 text-white rounded-full font-medium hover:bg-gray-700 transition">
194
- Ver todas as categorias
195
- </button>
 
 
 
 
 
 
 
 
 
 
 
 
196
  </div>
197
- </div>
198
- </section>
199
-
200
- <!-- Map and Nearby Professionals Section -->
201
- <section class="py-16 bg-white">
202
- <div class="container mx-auto px-4">
203
- <h2 class="text-3xl font-bold text-center mb-4">Profissionais próximos a você</h2>
204
- <p class="text-center text-gray-600 mb-12">Ative sua localização para ver os melhores profissionais disponíveis na sua região</p>
205
 
206
- <div class="flex flex-col lg:flex-row gap-8">
207
- <div class="lg:w-2/3">
208
- <div class="map-container bg-gray-200 flex items-center justify-center">
209
- <div class="text-center">
210
- <i class="fas fa-map-marked-alt text-5xl text-gray-400 mb-4"></i>
211
- <p class="text-gray-500">Mapa será exibido aqui quando a localização for ativada</p>
212
- <button id="enable-location" class="mt-4 px-4 py-2 bg-purple-600 text-white rounded-full hover:bg-purple-700 transition">
213
- Ativar Localização
214
- </button>
215
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
216
  </div>
217
  </div>
218
 
219
- <div class="lg:w-1/3">
220
- <div class="bg-gray-50 p-6 rounded-xl shadow-sm">
221
- <h3 class="font-bold text-xl mb-4">Filtros</h3>
222
-
223
- <div class="mb-6">
224
- <label class="block text-gray-700 mb-2">Distância máxima</label>
225
- <select class="w-full p-2 border border-gray-300 rounded">
226
- <option>5 km</option>
227
- <option>10 km</option>
228
- <option selected>25 km</option>
229
- <option>50 km</option>
230
- <option>100 km</option>
231
- </select>
232
  </div>
233
-
234
- <div class="mb-6">
235
- <label class="block text-gray-700 mb-2">Categoria</label>
236
- <select class="w-full p-2 border border-gray-300 rounded">
237
- <option>Todas as categorias</option>
238
- <option>Músicos</option>
239
- <option>Mágicos</option>
240
- <option>Animadores</option>
241
- <option>Atores</option>
242
- </select>
243
- </div>
244
-
245
- <div class="mb-6">
246
- <label class="block text-gray-700 mb-2">Disponibilidade</label>
247
- <div class="flex items-center space-x-4">
248
- <label class="flex items-center">
249
- <input type="radio" name="availability" class="mr-2" checked>
250
- <span>Hoje</span>
251
- </label>
252
- <label class="flex items-center">
253
- <input type="radio" name="availability" class="mr-2">
254
- <span>Este fim de semana</span>
255
- </label>
256
- </div>
257
  </div>
258
-
259
- <button class="w-full py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition">
260
- Aplicar Filtros
261
- </button>
262
  </div>
263
  </div>
264
  </div>
265
- </div>
266
- </section>
267
-
268
- <!-- Professionals List (Initially hidden) -->
269
- <section class="py-16 bg-gray-50 hidden" id="professionals-section">
270
- <div class="container mx-auto px-4">
271
- <h2 class="text-3xl font-bold text-center mb-12">Profissionais disponíveis</h2>
272
 
273
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
274
- <!-- Professional Card 1 -->
275
- <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition">
276
- <div class="h-48 bg-purple-100 relative">
277
- <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
278
- alt="DJ profissional"
279
- class="w-full h-full object-cover">
280
- <div class="absolute top-4 right-4 bg-white px-3 py-1 rounded-full text-sm font-medium shadow">
281
- <i class="fas fa-map-marker-alt text-purple-600 mr-1"></i> 2.3 km
282
- </div>
283
- </div>
284
- <div class="p-6">
285
- <div class="flex justify-between items-start mb-3">
286
- <div>
287
- <h3 class="font-bold text-xl">DJ Mark</h3>
288
- <p class="text-gray-600">Música Eletrônica</p>
289
  </div>
290
- <div class="flex items-center text-yellow-400">
291
- <i class="fas fa-star"></i>
292
- <span class="ml-1 text-gray-800">4.9</span>
 
 
 
 
293
  </div>
294
  </div>
295
- <p class="text-gray-700 mb-4">DJ profissional com 10 anos de experiência em festas e eventos corporativos.</p>
296
- <div class="flex justify-between items-center">
297
- <span class="font-bold text-lg">R$ 800</span>
298
- <button class="px-4 py-2 bg-purple-600 text-white rounded-full hover:bg-purple-700 transition">
299
- Contratar
300
- </button>
 
 
 
 
 
 
 
 
 
 
301
  </div>
302
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
303
  </div>
304
-
305
- <!-- Professional Card 2 -->
306
- <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition">
307
- <div class="h-48 bg-blue-100 relative">
308
- <img src="https://images.unsplash.com/photo-1605106702734-205df224ecce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
309
- alt="Mágico profissional"
310
- class="w-full h-full object-cover">
311
- <div class="absolute top-4 right-4 bg-white px-3 py-1 rounded-full text-sm font-medium shadow">
312
- <i class="fas fa-map-marker-alt text-blue-600 mr-1"></i> 5.1 km
313
- </div>
314
- </div>
315
- <div class="p-6">
316
- <div class="flex justify-between items-start mb-3">
317
- <div>
318
- <h3 class="font-bold text-xl">Mágico André</h3>
319
- <p class="text-gray-600">Ilusionismo</p>
 
320
  </div>
321
- <div class="flex items-center text-yellow-400">
322
- <i class="fas fa-star"></i>
323
- <span class="ml-1 text-gray-800">4.8</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
324
  </div>
325
  </div>
326
- <p class="text-gray-700 mb-4">Especializado em mágica de perto e truques que impressionam crianças e adultos.</p>
327
- <div class="flex justify-between items-center">
328
- <span class="font-bold text-lg">R$ 600</span>
329
- <button class="px-4 py-2 bg-blue-600 text-white rounded-full hover:bg-blue-700 transition">
330
- Contratar
331
- </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
332
  </div>
333
  </div>
334
  </div>
335
-
336
- <!-- Professional Card 3 -->
337
- <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition">
338
- <div class="h-48 bg-green-100 relative">
339
- <img src="https://images.unsplash.com/photo-1547153760-18fc86324498?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
340
- alt="Animadora infantil"
341
- class="w-full h-full object-cover">
342
- <div class="absolute top-4 right-4 bg-white px-3 py-1 rounded-full text-sm font-medium shadow">
343
- <i class="fas fa-map-marker-alt text-green-600 mr-1"></i> 3.7 km
344
- </div>
345
- </div>
346
- <div class="p-6">
347
- <div class="flex justify-between items-start mb-3">
348
- <div>
349
- <h3 class="font-bold text-xl">Tia Bia</h3>
350
- <p class="text-gray-600">Animação Infantil</p>
351
- </div>
352
- <div class="flex items-center text-yellow-400">
353
- <i class="fas fa-star"></i>
354
- <span class="ml-1 text-gray-800">5.0</span>
 
 
 
 
 
 
 
 
 
 
 
 
355
  </div>
356
  </div>
357
- <p class="text-gray-700 mb-4">Especialista em festas infantis com pintura facial, brincadeiras e contação de histórias.</p>
358
- <div class="flex justify-between items-center">
359
- <span class="font-bold text-lg">R$ 450</span>
360
- <button class="px-4 py-2 bg-green-600 text-white rounded-full hover:bg-green-700 transition">
361
- Contratar
362
- </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
363
  </div>
364
  </div>
365
  </div>
366
  </div>
 
 
 
 
 
367
 
368
- <div class="text-center mt-12">
369
- <button class="px-6 py-3 border-2 border-gray-300 text-gray-700 rounded-full font-medium hover:bg-gray-100 transition">
370
- Carregar mais profissionais
371
- </button>
372
- </div>
373
- </div>
374
- </section>
375
-
376
- <!-- Testimonials Section -->
377
- <section class="py-16 bg-white">
378
- <div class="container mx-auto px-4">
379
- <h2 class="text-3xl font-bold text-center mb-12">O que nossos clientes dizem</h2>
380
-
381
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
382
- <!-- Testimonial 1 -->
383
- <div class="bg-gray-50 p-8 rounded-xl shadow-sm">
384
- <div class="flex items-center mb-4">
385
- <div class="flex items-center text-yellow-400 mr-2">
386
- <i class="fas fa-star"></i>
387
- <i class="fas fa-star"></i>
388
- <i class="fas fa-star"></i>
389
- <i class="fas fa-star"></i>
390
- <i class="fas fa-star"></i>
391
  </div>
392
- <span class="text-gray-500 text-sm">2 dias atrás</span>
393
  </div>
394
- <p class="text-gray-700 mb-6">"Contratei um DJ para minha festa de aniversário e foi incrível! O sistema de geolocalização me mostrou os melhores profissionais próximos e o preço foi justo."</p>
395
- <div class="flex items-center">
396
- <img src="https://randomuser.me/api/portraits/women/44.jpg"
397
- alt="Cliente satisfeito"
398
- class="w-12 h-12 rounded-full mr-4">
399
- <div>
400
- <h4 class="font-bold">Ana Carolina</h4>
401
- <p class="text-gray-500 text-sm">São Paulo, SP</p>
402
- </div>
403
  </div>
404
- </div>
405
 
406
- <!-- Testimonial 2 -->
407
- <div class="bg-gray-50 p-8 rounded-xl shadow-sm">
408
- <div class="flex items-center mb-4">
409
- <div class="flex items-center text-yellow-400 mr-2">
410
- <i class="fas fa-star"></i>
411
- <i class="fas fa-star"></i>
412
- <i class="fas fa-star"></i>
413
- <i class="fas fa-star"></i>
414
- <i class="fas fa-star"></i>
415
  </div>
416
- <span class="text-gray-500 text-sm">1 semana atrás</span>
417
  </div>
418
- <p class="text-gray-700 mb-6">"O mágico que encontrei aqui fez o aniversário do meu filho inesquecível! Fácil de contratar e o profissional chegou pontualmente."</p>
419
- <div class="flex items-center">
420
- <img src="https://randomuser.me/api/portraits/men/32.jpg"
421
- alt="Cliente satisfeito"
422
- class="w-12 h-12 rounded-full mr-4">
423
- <div>
424
- <h4 class="font-bold">Carlos Eduardo</h4>
425
- <p class="text-gray-500 text-sm">Rio de Janeiro, RJ</p>
426
- </div>
427
  </div>
428
- </div>
429
 
430
- <!-- Testimonial 3 -->
431
- <div class="bg-gray-50 p-8 rounded-xl shadow-sm">
432
- <div class="flex items-center mb-4">
433
- <div class="flex items-center text-yellow-400 mr-2">
434
- <i class="fas fa-star"></i>
435
- <i class="fas fa-star"></i>
436
- <i class="fas fa-star"></i>
437
- <i class="fas fa-star"></i>
438
- <i class="fas fa-star-half-alt"></i>
439
  </div>
440
- <span class="text-gray-500 text-sm">3 semanas atrás</span>
441
  </div>
442
- <p class="text-gray-700 mb-6">"Usei o EntertainGo para contratar uma animadora infantil para o evento da empresa. Foi um sucesso e as crianças adoraram!"</p>
443
- <div class="flex items-center">
444
- <img src="https://randomuser.me/api/portraits/women/68.jpg"
445
- alt="Cliente satisfeito"
446
- class="w-12 h-12 rounded-full mr-4">
447
- <div>
448
- <h4 class="font-bold">Fernanda Lima</h4>
449
- <p class="text-gray-500 text-sm">Belo Horizonte, MG</p>
 
 
 
 
450
  </div>
451
  </div>
452
- </div>
453
- </div>
454
- </div>
455
- </section>
456
-
457
- <!-- CTA Section -->
458
- <section class="py-16 gradient-bg text-white">
459
- <div class="container mx-auto px-4 text-center">
460
- <h2 class="text-3xl md:text-4xl font-bold mb-6">Pronto para transformar seu evento?</h2>
461
- <p class="text-xl mb-8 max-w-2xl mx-auto">Encontre os melhores profissionais de entretenimento próximos a você com apenas alguns cliques.</p>
462
- <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
463
- <button class="bg-white text-purple-800 px-8 py-3 rounded-full font-bold hover:bg-purple-100 transition">
464
- Começar agora
465
- </button>
466
- <button class="bg-transparent border-2 border-white px-8 py-3 rounded-full font-bold hover:bg-white hover:text-purple-800 transition">
467
- Fale conosco
468
- </button>
469
  </div>
470
- </div>
471
- </section>
472
 
473
  <!-- Footer -->
474
- <footer class="bg-gray-900 text-white py-12">
475
  <div class="container mx-auto px-4">
476
  <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
477
  <div>
478
  <div class="flex items-center space-x-2 mb-4">
479
- <i class="fas fa-gamepad text-2xl"></i>
480
- <h3 class="text-xl font-bold">EntertainGo</h3>
481
  </div>
482
- <p class="text-gray-400">Conectando você aos melhores profissionais de entretenimento na sua região.</p>
483
  <div class="flex space-x-4 mt-6">
484
  <a href="#" class="text-gray-400 hover:text-white transition">
485
- <i class="fab fa-facebook-f"></i>
486
- </a>
487
- <a href="#" class="text-gray-400 hover:text-white transition">
488
- <i class="fab fa-instagram"></i>
489
  </a>
490
  <a href="#" class="text-gray-400 hover:text-white transition">
491
- <i class="fab fa-twitter"></i>
492
  </a>
493
  <a href="#" class="text-gray-400 hover:text-white transition">
494
- <i class="fab fa-linkedin-in"></i>
495
  </a>
496
  </div>
497
  </div>
498
 
499
  <div>
500
- <h4 class="text-lg font-semibold mb-4">Empresa</h4>
501
  <ul class="space-y-2">
502
- <li><a href="#" class="text-gray-400 hover:text-white transition">Sobre nós</a></li>
503
- <li><a href="#" class="text-gray-400 hover:text-white transition">Carreiras</a></li>
504
- <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
505
- <li><a href="#" class="text-gray-400 hover:text-white transition">Imprensa</a></li>
506
  </ul>
507
  </div>
508
 
509
  <div>
510
- <h4 class="text-lg font-semibold mb-4">Para Profissionais</h4>
511
  <ul class="space-y-2">
512
- <li><a href="#" class="text-gray-400 hover:text-white transition">Cadastre-se</a></li>
513
- <li><a href="#" class="text-gray-400 hover:text-white transition">Como funciona</a></li>
514
- <li><a href="#" class="text-gray-400 hover:text-white transition">Central de Ajuda</a></li>
515
- <li><a href="#" class="text-gray-400 hover:text-white transition">Termos de serviço</a></li>
516
  </ul>
517
  </div>
518
 
519
  <div>
520
- <h4 class="text-lg font-semibold mb-4">Contato</h4>
521
  <ul class="space-y-2">
522
- <li class="flex items-center">
523
- <i class="fas fa-map-marker-alt text-gray-400 mr-2"></i>
524
- <span class="text-gray-400">Av. Paulista, 1000 - São Paulo, SP</span>
525
- </li>
526
- <li class="flex items-center">
527
- <i class="fas fa-phone text-gray-400 mr-2"></i>
528
- <span class="text-gray-400">(11) 1234-5678</span>
529
- </li>
530
- <li class="flex items-center">
531
- <i class="fas fa-envelope text-gray-400 mr-2"></i>
532
- <span class="text-gray-400">contato@entertaingo.com</span>
533
- </li>
534
  </ul>
535
  </div>
536
  </div>
537
 
538
- <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
539
- <p class="text-gray-400 mb-4 md:mb-0">© 2023 EntertainGo. Todos os direitos reservados.</p>
540
- <div class="flex space-x-6">
541
- <a href="#" class="text-gray-400 hover:text-white transition">Termos de serviço</a>
542
- <a href="#" class="text-gray-400 hover:text-white transition">Política de privacidade</a>
543
- <a href="#" class="text-gray-400 hover:text-white transition">Cookies</a>
544
- </div>
545
  </div>
546
  </div>
547
  </footer>
@@ -553,60 +801,244 @@
553
  menu.classList.toggle('hidden');
554
  });
555
 
556
- // Simulate geolocation activation
557
- document.getElementById('enable-location').addEventListener('click', function() {
558
- // Show loading state
559
- const button = this;
560
- button.innerHTML = '<i class="fas fa-spinner animate-spin mr-2"></i> Detectando localização...';
561
- button.disabled = true;
562
-
563
- // Simulate API call
564
- setTimeout(function() {
565
- // Show success message
566
- button.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Localização ativada';
567
- button.classList.remove('bg-purple-600', 'hover:bg-purple-700');
568
- button.classList.add('bg-green-600', 'hover:bg-green-700');
569
-
570
- // Show professionals section
571
- document.getElementById('professionals-section').classList.remove('hidden');
572
 
573
- // Update map display
574
- const mapContainer = document.querySelector('.map-container');
575
- mapContainer.innerHTML = `
576
- <div class="relative w-full h-full">
577
- <div class="absolute inset-0 bg-gray-200 flex items-center justify-center">
578
- <i class="fas fa-spinner animate-spin text-4xl text-gray-500"></i>
579
- </div>
580
- <div class="absolute inset-0 bg-gray-800 opacity-50"></div>
581
- <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center">
582
- <div class="bg-white p-4 rounded-lg shadow-lg">
583
- <h3 class="font-bold text-lg mb-2">Sua localização</h3>
584
- <p class="text-gray-700 mb-3">Mostrando profissionais em um raio de 25km</p>
585
- <div class="flex justify-center space-x-2">
586
- <div class="w-3 h-3 bg-purple-600 rounded-full animate-pulse"></div>
587
- <div class="w-3 h-3 bg-purple-600 rounded-full animate-pulse" style="animation-delay: 0.2s"></div>
588
- <div class="w-3 h-3 bg-purple-600 rounded-full animate-pulse" style="animation-delay: 0.4s"></div>
589
- </div>
590
- </div>
591
- </div>
592
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
593
  `;
594
-
595
- // After 2 seconds, show "map loaded"
596
- setTimeout(function() {
597
- mapContainer.innerHTML = `
598
- <div class="relative w-full h-full bg-gray-200">
599
- <div class="absolute inset-0 flex items-center justify-center">
600
- <div class="text-center">
601
- <i class="fas fa-map-marked-alt text-5xl text-purple-600 mb-4"></i>
602
- <p class="text-gray-700">Mapa carregado com sua localização</p>
603
- <p class="text-sm text-gray-500 mt-2">3 profissionais encontrados próximos a você</p>
604
- </div>
605
- </div>
606
- </div>
607
- `;
608
- }, 2000);
609
- }, 1500);
 
 
 
 
610
  });
611
  </script>
612
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Joaomatheus/entreteingo" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>LoL Stats Comparator | Compare League of Legends Statistics</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
+ .champion-card {
11
+ transition: all 0.3s ease;
 
 
 
12
  }
13
 
14
+ .champion-card:hover {
15
  transform: translateY(-5px);
16
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
17
  }
18
 
19
+ .role-icon {
20
+ width: 24px;
21
+ height: 24px;
22
+ display: inline-block;
23
+ background-size: contain;
24
+ background-repeat: no-repeat;
25
+ vertical-align: middle;
26
+ margin-right: 5px;
27
  }
28
 
29
+ .top-icon {
30
+ background-image: url('https://static.u.gg/assets/lol/role_icons/top.png');
31
+ }
32
+
33
+ .jungle-icon {
34
+ background-image: url('https://static.u.gg/assets/lol/role_icons/jungle.png');
35
+ }
36
+
37
+ .mid-icon {
38
+ background-image: url('https://static.u.gg/assets/lol/role_icons/middle.png');
39
+ }
40
+
41
+ .adc-icon {
42
+ background-image: url('https://static.u.gg/assets/lol/role_icons/bottom.png');
43
+ }
44
+
45
+ .support-icon {
46
+ background-image: url('https://static.u.gg/assets/lol/role_icons/support.png');
47
+ }
48
+
49
+ .stat-bar {
50
+ height: 8px;
51
+ border-radius: 4px;
52
+ position: relative;
53
+ overflow: hidden;
54
+ }
55
+
56
+ .stat-bar-fill {
57
+ position: absolute;
58
+ top: 0;
59
+ left: 0;
60
+ height: 100%;
61
+ border-radius: 4px;
62
+ }
63
+
64
+ .winrate-indicator {
65
+ width: 12px;
66
+ height: 12px;
67
+ border-radius: 50%;
68
+ display: inline-block;
69
+ margin-right: 5px;
70
+ }
71
+
72
+ .positive-winrate {
73
+ background-color: #48bb78;
74
+ }
75
+
76
+ .negative-winrate {
77
+ background-color: #f56565;
78
+ }
79
+
80
+ .neutral-winrate {
81
+ background-color: #a0aec0;
82
+ }
83
+
84
+ .tier-icon {
85
+ width: 24px;
86
+ height: 24px;
87
+ display: inline-block;
88
+ background-size: contain;
89
+ background-repeat: no-repeat;
90
+ vertical-align: middle;
91
+ margin-right: 5px;
92
+ }
93
+
94
+ .tier-S {
95
+ background-image: url('https://static.u.gg/assets/lol/ranked-positions/tier-icons/S.png');
96
  }
97
 
98
+ .tier-A {
99
+ background-image: url('https://static.u.gg/assets/lol/ranked-positions/tier-icons/A.png');
100
+ }
101
+
102
+ .tier-B {
103
+ background-image: url('https://static.u.gg/assets/lol/ranked-positions/tier-icons/B.png');
104
+ }
105
+
106
+ .tier-C {
107
+ background-image: url('https://static.u.gg/assets/lol/ranked-positions/tier-icons/C.png');
108
+ }
109
+
110
+ .tier-D {
111
+ background-image: url('https://static.u.gg/assets/lol/ranked-positions/tier-icons/D.png');
112
+ }
113
+
114
+ .tab-content {
115
+ display: none;
116
+ }
117
+
118
+ .tab-content.active {
119
+ display: block;
120
+ animation: fadeIn 0.3s ease;
121
+ }
122
+
123
+ @keyframes fadeIn {
124
+ from { opacity: 0; }
125
+ to { opacity: 1; }
126
+ }
127
+
128
+ .tab-button.active {
129
+ border-bottom: 3px solid #805ad5;
130
+ color: #805ad5;
131
+ font-weight: 600;
132
+ }
133
+
134
+ .comparison-table {
135
+ border-collapse: separate;
136
+ border-spacing: 0 10px;
137
+ }
138
+
139
+ .comparison-table tr {
140
+ background-color: white;
141
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
142
+ }
143
+
144
+ .comparison-table tr:hover {
145
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
146
+ }
147
+
148
+ .comparison-table td {
149
+ padding: 12px 16px;
150
+ vertical-align: middle;
151
+ }
152
+
153
+ .comparison-table td:first-child {
154
+ border-top-left-radius: 8px;
155
+ border-bottom-left-radius: 8px;
156
+ }
157
+
158
+ .comparison-table td:last-child {
159
+ border-top-right-radius: 8px;
160
+ border-bottom-right-radius: 8px;
161
+ }
162
+
163
+ .better-stat {
164
+ background-color: rgba(72, 187, 120, 0.1);
165
+ font-weight: 600;
166
+ color: #2f855a;
167
+ }
168
+
169
+ .worse-stat {
170
+ background-color: rgba(245, 101, 101, 0.1);
171
+ font-weight: 600;
172
+ color: #c53030;
173
+ }
174
+
175
+ .equal-stat {
176
+ background-color: rgba(160, 174, 192, 0.1);
177
+ color: #4a5568;
178
  }
179
  </style>
180
  </head>
181
  <body class="bg-gray-50 font-sans">
182
  <!-- Header/Navbar -->
183
+ <header class="bg-gray-900 text-white shadow-lg">
184
  <div class="container mx-auto px-4 py-4">
185
  <div class="flex justify-between items-center">
186
+ <div class="flex items-center space-x-3">
187
+ <img src="https://static.u.gg/assets/lol/riot-game-lol-logo.png" alt="League of Legends Logo" class="h-10">
188
+ <h1 class="text-2xl font-bold">LoL Stats Comparator</h1>
189
  </div>
190
  <nav class="hidden md:flex space-x-8">
191
+ <a href="#" class="hover:text-purple-300 font-medium">Home</a>
192
+ <a href="#" class="hover:text-purple-300 font-medium">Champions</a>
193
+ <a href="#" class="hover:text-purple-300 font-medium">Tier List</a>
194
+ <a href="#" class="hover:text-purple-300 font-medium">Pro Builds</a>
195
+ <a href="#" class="hover:text-purple-300 font-medium">Leaderboards</a>
196
  </nav>
197
  <div class="flex items-center space-x-4">
198
+ <button class="bg-purple-600 text-white px-4 py-2 rounded-full font-medium hover:bg-purple-700 transition flex items-center">
199
+ <i class="fas fa-user mr-2"></i> Login
200
  </button>
201
  <button class="md:hidden text-2xl" id="mobile-menu-button">
202
  <i class="fas fa-bars"></i>
 
206
  </div>
207
 
208
  <!-- Mobile Menu -->
209
+ <div class="md:hidden hidden bg-gray-800 px-4 py-2" id="mobile-menu">
210
+ <a href="#" class="block py-2 hover:text-purple-300">Home</a>
211
+ <a href="#" class="block py-2 hover:text-purple-300">Champions</a>
212
+ <a href="#" class="block py-2 hover:text-purple-300">Tier List</a>
213
+ <a href="#" class="block py-2 hover:text-purple-300">Pro Builds</a>
214
+ <a href="#" class="block py-2 hover:text-purple-300">Leaderboards</a>
215
  </div>
216
  </header>
217
 
218
+ <!-- Main Content -->
219
+ <main class="container mx-auto px-4 py-8">
220
+ <!-- Search and Compare Section -->
221
+ <section class="bg-white rounded-xl shadow-md p-6 mb-8">
222
+ <h2 class="text-2xl font-bold mb-6">Compare League of Legends Statistics</h2>
223
+
224
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
225
+ <!-- Champion 1 Search -->
226
+ <div>
227
+ <label class="block text-gray-700 font-medium mb-2">Champion 1</label>
228
+ <div class="relative">
229
+ <input type="text" placeholder="Search champion..." class="w-full p-3 border border-gray-300 rounded-lg pr-10" id="champion1-search">
230
+ <i class="fas fa-search absolute right-3 top-3 text-gray-400"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
231
  </div>
232
+ <div class="mt-2 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-2" id="champion1-suggestions">
233
+ <!-- Champion suggestions will appear here -->
 
 
 
 
234
  </div>
 
 
235
  </div>
236
+
237
+ <!-- Champion 2 Search -->
238
+ <div>
239
+ <label class="block text-gray-700 font-medium mb-2">Champion 2</label>
240
+ <div class="relative">
241
+ <input type="text" placeholder="Search champion..." class="w-full p-3 border border-gray-300 rounded-lg pr-10" id="champion2-search">
242
+ <i class="fas fa-search absolute right-3 top-3 text-gray-400"></i>
243
+ </div>
244
+ <div class="mt-2 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-2" id="champion2-suggestions">
245
+ <!-- Champion suggestions will appear here -->
246
  </div>
 
 
247
  </div>
248
  </div>
 
 
 
 
 
 
 
 
249
 
250
+ <!-- Filters -->
251
+ <div class="bg-gray-50 p-4 rounded-lg mb-6">
252
+ <h3 class="font-medium text-gray-700 mb-3">Filters</h3>
253
+ <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
254
+ <div>
255
+ <label class="block text-gray-600 text-sm mb-1">Rank</label>
256
+ <select class="w-full p-2 border border-gray-300 rounded">
257
+ <option>All Ranks</option>
258
+ <option>Iron</option>
259
+ <option>Bronze</option>
260
+ <option>Silver</option>
261
+ <option>Gold</option>
262
+ <option>Platinum</option>
263
+ <option>Diamond</option>
264
+ <option>Master+</option>
265
+ </select>
266
  </div>
267
+ <div>
268
+ <label class="block text-gray-600 text-sm mb-1">Region</label>
269
+ <select class="w-full p-2 border border-gray-300 rounded">
270
+ <option>Global</option>
271
+ <option>North America</option>
272
+ <option>Europe West</option>
273
+ <option>Korea</option>
274
+ <option>Brazil</option>
275
+ <option>LAS</option>
276
+ <option>LAN</option>
277
+ <option>Oceania</option>
278
+ <option>Russia</option>
279
+ <option>Turkey</option>
280
+ <option>Japan</option>
281
+ </select>
282
  </div>
283
+ <div>
284
+ <label class="block text-gray-600 text-sm mb-1">Patch</label>
285
+ <select class="w-full p-2 border border-gray-300 rounded">
286
+ <option>14.10</option>
287
+ <option>14.9</option>
288
+ <option>14.8</option>
289
+ <option>14.7</option>
290
+ <option>14.6</option>
291
+ </select>
292
  </div>
293
  </div>
294
+ </div>
295
+
296
+ <button class="w-full md:w-auto bg-purple-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-purple-700 transition flex items-center justify-center mx-auto">
297
+ <i class="fas fa-chart-bar mr-2"></i> Compare Champions
298
+ </button>
299
+ </section>
300
+
301
+ <!-- Comparison Results -->
302
+ <section id="comparison-results" class="hidden">
303
+ <!-- Champion Cards -->
304
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
305
+ <!-- Champion 1 Card -->
306
+ <div class="champion-card bg-white rounded-xl overflow-hidden shadow-md">
307
+ <div class="flex">
308
+ <div class="w-1/3 bg-gray-100 flex items-center justify-center p-4">
309
+ <img src="https://ddragon.leagueoflegends.com/cdn/14.10.1/img/champion/Aatrox.png"
310
+ alt="Aatrox"
311
+ class="w-full h-auto rounded-lg">
312
+ </div>
313
+ <div class="w-2/3 p-6">
314
+ <div class="flex justify-between items-start mb-2">
315
+ <h3 class="text-xl font-bold">Aatrox</h3>
316
+ <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded-full text-xs font-medium">Top Lane</span>
317
+ </div>
318
+ <div class="flex items-center mb-2">
319
+ <span class="tier-icon tier-S mr-1"></span>
320
+ <span class="font-medium">S Tier</span>
321
+ <span class="mx-2 text-gray-400">|</span>
322
+ <span class="winrate-indicator positive-winrate"></span>
323
+ <span class="font-medium">52.3%</span>
324
+ <span class="text-gray-500 text-sm ml-1">Win Rate</span>
325
+ </div>
326
+ <div class="mb-2">
327
+ <span class="text-gray-700 text-sm">Pick Rate: <span class="font-medium">8.2%</span></span>
328
+ <span class="mx-2 text-gray-400">|</span>
329
+ <span class="text-gray-700 text-sm">Ban Rate: <span class="font-medium">12.5%</span></span>
330
+ </div>
331
+ <div class="flex space-x-2">
332
+ <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs">Juggernaut</span>
333
+ <span class="bg-red-100 text-red-800 px-2 py-1 rounded-full text-xs">Melee</span>
334
+ <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">Sustain</span>
335
+ </div>
336
+ </div>
337
  </div>
338
  </div>
339
 
340
+ <!-- Champion 2 Card -->
341
+ <div class="champion-card bg-white rounded-xl overflow-hidden shadow-md">
342
+ <div class="flex">
343
+ <div class="w-1/3 bg-gray-100 flex items-center justify-center p-4">
344
+ <img src="https://ddragon.leagueoflegends.com/cdn/14.10.1/img/champion/Darius.png"
345
+ alt="Darius"
346
+ class="w-full h-auto rounded-lg">
347
+ </div>
348
+ <div class="w-2/3 p-6">
349
+ <div class="flex justify-between items-start mb-2">
350
+ <h3 class="text-xl font-bold">Darius</h3>
351
+ <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded-full text-xs font-medium">Top Lane</span>
352
+ </div>
353
+ <div class="flex items-center mb-2">
354
+ <span class="tier-icon tier-A mr-1"></span>
355
+ <span class="font-medium">A Tier</span>
356
+ <span class="mx-2 text-gray-400">|</span>
357
+ <span class="winrate-indicator positive-winrate"></span>
358
+ <span class="font-medium">50.8%</span>
359
+ <span class="text-gray-500 text-sm ml-1">Win Rate</span>
360
+ </div>
361
+ <div class="mb-2">
362
+ <span class="text-gray-700 text-sm">Pick Rate: <span class="font-medium">6.7%</span></span>
363
+ <span class="mx-2 text-gray-400">|</span>
364
+ <span class="text-gray-700 text-sm">Ban Rate: <span class="font-medium">9.3%</span></span>
365
+ </div>
366
+ <div class="flex space-x-2">
367
+ <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs">Juggernaut</span>
368
+ <span class="bg-red-100 text-red-800 px-2 py-1 rounded-full text-xs">Melee</span>
369
+ <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-xs">Snowball</span>
370
+ </div>
371
+ </div>
372
  </div>
373
  </div>
374
  </div>
375
 
376
+ <!-- Tabs -->
377
+ <div class="mb-6 border-b border-gray-200">
378
+ <div class="flex space-x-8">
379
+ <button class="tab-button active py-2 px-1 font-medium text-gray-700" data-tab="overview">
380
+ Overview
381
+ </button>
382
+ <button class="tab-button py-2 px-1 font-medium text-gray-500 hover:text-gray-700" data-tab="matchups">
383
+ Matchups
384
+ </button>
385
+ <button class="tab-button py-2 px-1 font-medium text-gray-500 hover:text-gray-700" data-tab="builds">
386
+ Builds
387
+ </button>
388
+ <button class="tab-button py-2 px-1 font-medium text-gray-500 hover:text-gray-700" data-tab="counters">
389
+ Counters
390
+ </button>
391
+ </div>
392
  </div>
 
 
 
 
 
 
 
 
393
 
394
+ <!-- Tab Contents -->
395
+ <div class="tab-content active" id="overview-tab">
396
+ <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
397
+ <div class="p-6">
398
+ <h3 class="text-lg font-bold mb-4">General Statistics Comparison</h3>
399
+ <table class="w-full comparison-table">
400
+ <tr>
401
+ <td class="font-medium">Win Rate</td>
402
+ <td class="better-stat">52.3%</td>
403
+ <td class="worse-stat">50.8%</td>
404
+ </tr>
405
+ <tr>
406
+ <td class="font-medium">Pick Rate</td>
407
+ <td class="better-stat">8.2%</td>
408
+ <td class="worse-stat">6.7%</td>
409
+ </tr>
410
+ <tr>
411
+ <td class="font-medium">Ban Rate</td>
412
+ <td class="worse-stat">12.5%</td>
413
+ <td class="better-stat">9.3%</td>
414
+ </tr>
415
+ <tr>
416
+ <td class="font-medium">KDA Ratio</td>
417
+ <td class="better-stat">2.8</td>
418
+ <td class="worse-stat">2.5</td>
419
+ </tr>
420
+ <tr>
421
+ <td class="font-medium">Average Kills</td>
422
+ <td class="better-stat">6.2</td>
423
+ <td class="worse-stat">5.8</td>
424
+ </tr>
425
+ <tr>
426
+ <td class="font-medium">Average Deaths</td>
427
+ <td class="worse-stat">5.1</td>
428
+ <td class="better-stat">4.9</td>
429
+ </tr>
430
+ <tr>
431
+ <td class="font-medium">Average Assists</td>
432
+ <td class="equal-stat">5.3</td>
433
+ <td class="equal-stat">5.3</td>
434
+ </tr>
435
+ <tr>
436
+ <td class="font-medium">CS per Minute</td>
437
+ <td class="worse-stat">6.1</td>
438
+ <td class="better-stat">6.4</td>
439
+ </tr>
440
+ </table>
441
  </div>
442
  </div>
443
 
444
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
445
+ <!-- Win Rate by Game Length -->
446
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
447
+ <div class="p-6">
448
+ <h3 class="text-lg font-bold mb-4">Win Rate by Game Length</h3>
449
+ <img src="https://via.placeholder.com/600x300?text=Win+Rate+by+Game+Length+Chart" alt="Win Rate by Game Length" class="w-full h-auto rounded">
 
 
 
 
 
 
 
450
  </div>
451
+ </div>
452
+
453
+ <!-- Popularity Trend -->
454
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
455
+ <div class="p-6">
456
+ <h3 class="text-lg font-bold mb-4">Popularity Trend (Last 5 Patches)</h3>
457
+ <img src="https://via.placeholder.com/600x300?text=Popularity+Trend+Chart" alt="Popularity Trend" class="w-full h-auto rounded">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
458
  </div>
 
 
 
 
459
  </div>
460
  </div>
461
  </div>
 
 
 
 
 
 
 
462
 
463
+ <div class="tab-content" id="matchups-tab">
464
+ <div class="bg-white rounded-xl shadow-md overflow-hidden p-6">
465
+ <h3 class="text-lg font-bold mb-4">Head-to-Head Matchup</h3>
466
+ <p class="text-gray-700 mb-6">When Aatrox faces Darius in the top lane, Aatrox wins <span class="font-bold text-green-600">52.1%</span> of the time, which is <span class="font-bold text-green-600">1.3%</span> higher than expected.</p>
467
+
468
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
469
+ <!-- Early Game -->
470
+ <div class="bg-gray-50 p-4 rounded-lg">
471
+ <h4 class="font-bold text-gray-800 mb-2">Early Game (0-15 min)</h4>
472
+ <div class="mb-2">
473
+ <span class="font-medium">Gold Difference @15:</span>
474
+ <span class="float-right font-bold text-green-600">+287g</span>
 
 
 
 
475
  </div>
476
+ <div class="mb-2">
477
+ <span class="font-medium">CS Difference @15:</span>
478
+ <span class="float-right font-bold text-green-600">+4.2</span>
479
+ </div>
480
+ <div class="mb-2">
481
+ <span class="font-medium">First Blood Rate:</span>
482
+ <span class="float-right font-bold text-green-600">54.3%</span>
483
  </div>
484
  </div>
485
+
486
+ <!-- Mid Game -->
487
+ <div class="bg-gray-50 p-4 rounded-lg">
488
+ <h4 class="font-bold text-gray-800 mb-2">Mid Game (15-25 min)</h4>
489
+ <div class="mb-2">
490
+ <span class="font-medium">Tower Take Rate:</span>
491
+ <span class="float-right font-bold text-green-600">62.1%</span>
492
+ </div>
493
+ <div class="mb-2">
494
+ <span class="font-medium">Kill Participation:</span>
495
+ <span class="float-right font-bold text-red-600">48.7%</span>
496
+ </div>
497
+ <div class="mb-2">
498
+ <span class="font-medium">Dragon Control:</span>
499
+ <span class="float-right font-bold text-green-600">53.8%</span>
500
+ </div>
501
  </div>
502
  </div>
503
+
504
+ <h4 class="font-bold text-gray-800 mb-3">Win Rate by Summoner Spells</h4>
505
+ <table class="w-full bg-gray-50 rounded-lg overflow-hidden mb-6">
506
+ <thead class="bg-gray-200">
507
+ <tr>
508
+ <th class="p-2 text-left">Aatrox Spells</th>
509
+ <th class="p-2 text-left">Darius Spells</th>
510
+ <th class="p-2 text-left">Win Rate</th>
511
+ <th class="p-2 text-left">Games</th>
512
+ </tr>
513
+ </thead>
514
+ <tbody>
515
+ <tr class="border-b border-gray-200">
516
+ <td class="p-2">Flash + Ignite</td>
517
+ <td class="p-2">Flash + Ghost</td>
518
+ <td class="p-2 font-bold text-green-600">53.2%</td>
519
+ <td class="p-2">12,453</td>
520
+ </tr>
521
+ <tr class="border-b border-gray-200">
522
+ <td class="p-2">Flash + Teleport</td>
523
+ <td class="p-2">Flash + Ghost</td>
524
+ <td class="p-2 font-bold text-red-600">48.7%</td>
525
+ <td class="p-2">8,921</td>
526
+ </tr>
527
+ <tr>
528
+ <td class="p-2">Flash + Ignite</td>
529
+ <td class="p-2">Flash + Teleport</td>
530
+ <td class="p-2 font-bold text-green-600">55.1%</td>
531
+ <td class="p-2">5,632</td>
532
+ </tr>
533
+ </tbody>
534
+ </table>
535
  </div>
536
+ </div>
537
+
538
+ <div class="tab-content" id="builds-tab">
539
+ <div class="bg-white rounded-xl shadow-md overflow-hidden p-6">
540
+ <h3 class="text-lg font-bold mb-6">Build Comparison</h3>
541
+
542
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
543
+ <!-- Aatrox Build -->
544
+ <div>
545
+ <h4 class="font-bold text-lg mb-4 text-center">Aatrox Most Frequent Build</h4>
546
+ <div class="bg-gray-50 p-4 rounded-lg mb-4">
547
+ <h5 class="font-medium mb-2">Starting Items</h5>
548
+ <div class="flex space-x-2">
549
+ <img src="https://ddragon.leagueoflegends.com/cdn/14.10.1/img/item/1055.png" alt="Doran's Blade" class="w-10 h-10 rounded">
550
+ <img src="https://ddragon.leagueoflegends.com/cdn/14.10.1/img/item/2003.png" alt="Health Potion" class="w-10 h-10 rounded">
551
+ <img src="https://ddragon.leagueoflegends.com/cdn/14.10.1/img/item/3340.png" alt="Warding Totem" class="w-10 h-10 rounded">
552
+ </div>
553
  </div>
554
+
555
+ <div class="bg-gray-50 p-4 rounded-lg mb-4">
556
+ <h5 class="font-medium mb-2">Core Items</h5>
557
+ <div class="flex space-x-2">
558
+ <img src="https://ddragon.leagueoflegends.com/cdn/14.10.1/img/item/6630.png" alt="Eclipse" class="w-10 h-10 rounded">
559
+ <img src="https://ddragon.leagueoflegends.com/cdn/14.10.1/img/item/3071.png" alt="Black Cleaver" class="w-10 h-10 rounded">
560
+ <img src="https://ddragon.leagueoflegends.com/cdn/14.10.1/img/item/6693.png" alt="Sterak's Gage" class="w-10 h-10 rounded">
561
+ </div>
562
+ </div>
563
+
564
+ <div class="bg-gray-50 p-4 rounded-lg">
565
+ <h5 class="font-medium mb-2">Boots</h5>
566
+ <div class="flex space-x-2">
567
+ <img src="https://ddragon.leagueoflegends.com/cdn/14.10.1/img/item/3009.png" alt="Plated Steelcaps" class="w-10 h-10 rounded">
568
+ <img src="https://ddragon.leagueoflegends.com/cdn/14.10.1/img/item/3111.png" alt="Mercury's Treads" class="w-10 h-10 rounded">
569
+ </div>
570
  </div>
571
  </div>
572
+
573
+ <!-- Darius Build -->
574
+ <div>
575
+ <h4 class="font-bold text-lg mb-4 text-center">Darius Most Frequent Build</h4>
576
+ <div class="bg-gray-50 p-4 rounded-lg mb-4">
577
+ <h5 class="font-medium mb-2">Starting Items</h5>
578
+ <div class="flex space-x-2">
579
+ <img src="https://ddragon.leagueoflegends.com/cdn/14.10.1/img/item/1055.png" alt="Doran's Blade" class="w-10 h-10 rounded">
580
+ <img src="https://ddragon.leagueoflegends.com/cdn/14.10.1/img/item/2003.png" alt="Health Potion" class="w-10 h-10 rounded">
581
+ <img src="https://ddragon.leagueoflegends.com/cdn/14.10.1/img/item/3340.png" alt="Warding Totem" class="w-10 h-10 rounded">
582
+ </div>
583
+ </div>
584
+
585
+ <div class="bg-gray-50 p-4 rounded-lg mb-4">
586
+ <h5 class="font-medium mb-2">Core Items</h5>
587
+ <div class="flex space-x-2">
588
+ <img src="https://ddragon.leagueoflegends.com/cdn/14.10.1/img/item/3078.png" alt="Trinity Force" class="w-10 h-10 rounded">
589
+ <img src="https://ddragon.leagueoflegends.com/cdn/14.10.1/img/item/3071.png" alt="Black Cleaver" class="w-10 h-10 rounded">
590
+ <img src="https://ddragon.leagueoflegends.com/cdn/14.10.1/img/item/3742.png" alt="Dead Man's Plate" class="w-10 h-10 rounded">
591
+ </div>
592
+ </div>
593
+
594
+ <div class="bg-gray-50 p-4 rounded-lg">
595
+ <h5 class="font-medium mb-2">Boots</h5>
596
+ <div class="flex space-x-2">
597
+ <img src="https://ddragon.leagueoflegends.com/cdn/14.10.1/img/item/3009.png" alt="Plated Steelcaps" class="w-10 h-10 rounded">
598
+ <img src="https://ddragon.leagueoflegends.com/cdn/14.10.1/img/item/3111.png" alt="Mercury's Treads" class="w-10 h-10 rounded">
599
+ </div>
600
+ </div>
601
  </div>
602
  </div>
603
  </div>
604
+ </div>
605
+
606
+ <div class="tab-content" id="counters-tab">
607
+ <div class="bg-white rounded-xl shadow-md overflow-hidden p-6">
608
+ <h3 class="text-lg font-bold mb-6">Counter Comparison</h3>
609
+
610
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
611
+ <!-- Aatrox Counters -->
612
+ <div>
613
+ <h4 class="font-bold text-lg mb-4">Aatrox Counters</h4>
614
+ <div class="space-y-3">
615
+ <div class="flex items-center justify-between bg-gray-50 p-3 rounded-lg">
616
+ <div class="flex items-center">
617
+ <img src="https://ddragon.leagueoflegends.com/cdn/14.10.1/img/champion/Fiora.png" alt="Fiora" class="w-8 h-8 rounded-full mr-2">
618
+ <span class="font-medium">Fiora</span>
619
+ </div>
620
+ <span class="font-bold text-red-600">46.2% WR</span>
621
+ </div>
622
+ <div class="flex items-center justify-between bg-gray-50 p-3 rounded-lg">
623
+ <div class="flex items-center">
624
+ <img src="https://ddragon.leagueoflegends.com/cdn/14.10.1/img/champion/Irelia.png" alt="Irelia" class="w-8 h-8 rounded-full mr-2">
625
+ <span class="font-medium">Irelia</span>
626
+ </div>
627
+ <span class="font-bold text-red-600">47.1% WR</span>
628
+ </div>
629
+ <div class="flex items-center justify-between bg-gray-50 p-3 rounded-lg">
630
+ <div class="flex items-center">
631
+ <img src="https://ddragon.leagueoflegends.com/cdn/14.10.1/img/champion/Riven.png" alt="Riven" class="w-8 h-8 rounded-full mr-2">
632
+ <span class="font-medium">Riven</span>
633
+ </div>
634
+ <span class="font-bold text-red-600">48.3% WR</span>
635
+ </div>
636
  </div>
637
  </div>
638
+
639
+ <!-- Darius Counters -->
640
+ <div>
641
+ <h4 class="font-bold text-lg mb-4">Darius Counters</h4>
642
+ <div class="space-y-3">
643
+ <div class="flex items-center justify-between bg-gray-50 p-3 rounded-lg">
644
+ <div class="flex items-center">
645
+ <img src="https://ddragon.leagueoflegends.com/cdn/14.10.1/img/champion/Vayne.png" alt="Vayne" class="w-8 h-8 rounded-full mr-2">
646
+ <span class="font-medium">Vayne</span>
647
+ </div>
648
+ <span class="font-bold text-red-600">44.8% WR</span>
649
+ </div>
650
+ <div class="flex items-center justify-between bg-gray-50 p-3 rounded-lg">
651
+ <div class="flex items-center">
652
+ <img src="https://ddragon.leagueoflegends.com/cdn/14.10.1/img/champion/Quinn.png" alt="Quinn" class="w-8 h-8 rounded-full mr-2">
653
+ <span class="font-medium">Quinn</span>
654
+ </div>
655
+ <span class="font-bold text-red-600">45.5% WR</span>
656
+ </div>
657
+ <div class="flex items-center justify-between bg-gray-50 p-3 rounded-lg">
658
+ <div class="flex items-center">
659
+ <img src="https://ddragon.leagueoflegends.com/cdn/14.10.1/img/champion/Wukong.png" alt="Wukong" class="w-8 h-8 rounded-full mr-2">
660
+ <span class="font-medium">Wukong</span>
661
+ </div>
662
+ <span class="font-bold text-red-600">47.9% WR</span>
663
+ </div>
664
+ </div>
665
  </div>
666
  </div>
667
  </div>
668
  </div>
669
+ </section>
670
+
671
+ <!-- Popular Comparisons -->
672
+ <section class="mt-12">
673
+ <h2 class="text-2xl font-bold mb-6">Popular Comparisons</h2>
674
 
675
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
676
+ <!-- Comparison 1 -->
677
+ <a href="#" class="bg-white rounded-lg shadow-sm p-4 hover:shadow-md transition flex items-center">
678
+ <div class="flex-shrink-0 mr-4">
679
+ <div class="flex">
680
+ <img src="https://ddragon.leagueoflegends.com/cdn/14.10.1/img/champion/Yasuo.png" alt="Yasuo" class="w-10 h-10 rounded-full border-2 border-white -mr-2">
681
+ <img src="https://ddragon.leagueoflegends.com/cdn/14.10.1/img/champion/Yone.png" alt="Yone" class="w-10 h-10 rounded-full border-2 border-white">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
682
  </div>
 
683
  </div>
684
+ <div>
685
+ <h3 class="font-medium">Yasuo vs Yone</h3>
686
+ <p class="text-sm text-gray-500">Mid Lane</p>
 
 
 
 
 
 
687
  </div>
688
+ </a>
689
 
690
+ <!-- Comparison 2 -->
691
+ <a href="#" class="bg-white rounded-lg shadow-sm p-4 hover:shadow-md transition flex items-center">
692
+ <div class="flex-shrink-0 mr-4">
693
+ <div class="flex">
694
+ <img src="https://ddragon.leagueoflegends.com/cdn/14.10.1/img/champion/Zed.png" alt="Zed" class="w-10 h-10 rounded-full border-2 border-white -mr-2">
695
+ <img src="https://ddragon.leagueoflegends.com/cdn/14.10.1/img/champion/Talon.png" alt="Talon" class="w-10 h-10 rounded-full border-2 border-white">
 
 
 
696
  </div>
 
697
  </div>
698
+ <div>
699
+ <h3 class="font-medium">Zed vs Talon</h3>
700
+ <p class="text-sm text-gray-500">Mid Lane</p>
 
 
 
 
 
 
701
  </div>
702
+ </a>
703
 
704
+ <!-- Comparison 3 -->
705
+ <a href="#" class="bg-white rounded-lg shadow-sm p-4 hover:shadow-md transition flex items-center">
706
+ <div class="flex-shrink-0 mr-4">
707
+ <div class="flex">
708
+ <img src="https://ddragon.leagueoflegends.com/cdn/14.10.1/img/champion/Jinx.png" alt="Jinx" class="w-10 h-10 rounded-full border-2 border-white -mr-2">
709
+ <img src="https://ddragon.leagueoflegends.com/cdn/14.10.1/img/champion/Caitlyn.png" alt="Caitlyn" class="w-10 h-10 rounded-full border-2 border-white">
 
 
 
710
  </div>
 
711
  </div>
712
+ <div>
713
+ <h3 class="font-medium">Jinx vs Caitlyn</h3>
714
+ <p class="text-sm text-gray-500">Bottom Lane</p>
715
+ </div>
716
+ </a>
717
+
718
+ <!-- Comparison 4 -->
719
+ <a href="#" class="bg-white rounded-lg shadow-sm p-4 hover:shadow-md transition flex items-center">
720
+ <div class="flex-shrink-0 mr-4">
721
+ <div class="flex">
722
+ <img src="https://ddragon.leagueoflegends.com/cdn/14.10.1/img/champion/Thresh.png" alt="Thresh" class="w-10 h-10 rounded-full border-2 border-white -mr-2">
723
+ <img src="https://ddragon.leagueoflegends.com/cdn/14.10.1/img/champion/Leona.png" alt="Leona" class="w-10 h-10 rounded-full border-2 border-white">
724
  </div>
725
  </div>
726
+ <div>
727
+ <h3 class="font-medium">Thresh vs Leona</h3>
728
+ <p class="text-sm text-gray-500">Support</p>
729
+ </div>
730
+ </a>
 
 
 
 
 
 
 
 
 
 
 
 
731
  </div>
732
+ </section>
733
+ </main>
734
 
735
  <!-- Footer -->
736
+ <footer class="bg-gray-900 text-white py-12 mt-12">
737
  <div class="container mx-auto px-4">
738
  <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
739
  <div>
740
  <div class="flex items-center space-x-2 mb-4">
741
+ <img src="https://static.u.gg/assets/lol/riot-game-lol-logo.png" alt="League of Legends Logo" class="h-8">
742
+ <h3 class="text-xl font-bold">LoL Stats Comparator</h3>
743
  </div>
744
+ <p class="text-gray-400">The ultimate tool to compare League of Legends champion statistics and matchups.</p>
745
  <div class="flex space-x-4 mt-6">
746
  <a href="#" class="text-gray-400 hover:text-white transition">
747
+ <i class="fab fa-twitter"></i>
 
 
 
748
  </a>
749
  <a href="#" class="text-gray-400 hover:text-white transition">
750
+ <i class="fab fa-discord"></i>
751
  </a>
752
  <a href="#" class="text-gray-400 hover:text-white transition">
753
+ <i class="fab fa-reddit"></i>
754
  </a>
755
  </div>
756
  </div>
757
 
758
  <div>
759
+ <h4 class="text-lg font-semibold mb-4">Resources</h4>
760
  <ul class="space-y-2">
761
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Champion Stats</a></li>
762
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Tier Lists</a></li>
763
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Pro Builds</a></li>
764
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Counters</a></li>
765
  </ul>
766
  </div>
767
 
768
  <div>
769
+ <h4 class="text-lg font-semibold mb-4">Tools</h4>
770
  <ul class="space-y-2">
771
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Matchup Analyzer</a></li>
772
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Build Comparator</a></li>
773
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Win Rate Tracker</a></li>
774
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Meta Reports</a></li>
775
  </ul>
776
  </div>
777
 
778
  <div>
779
+ <h4 class="text-lg font-semibold mb-4">Company</h4>
780
  <ul class="space-y-2">
781
+ <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li>
782
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
783
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li>
784
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a></li>
 
 
 
 
 
 
 
 
785
  </ul>
786
  </div>
787
  </div>
788
 
789
+ <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
790
+ <p>LoL Stats Comparator isn't endorsed by Riot Games and doesn't reflect the views or opinions of Riot Games or anyone officially involved in producing or managing League of Legends.</p>
791
+ <p class="mt-2">League of Legends and Riot Games are trademarks or registered trademarks of Riot Games, Inc.</p>
792
+ <p class="mt-4">© 2023 LoL Stats Comparator. All rights reserved.</p>
 
 
 
793
  </div>
794
  </div>
795
  </footer>
 
801
  menu.classList.toggle('hidden');
802
  });
803
 
804
+ // Tab switching
805
+ const tabButtons = document.querySelectorAll('.tab-button');
806
+ tabButtons.forEach(button => {
807
+ button.addEventListener('click', function() {
808
+ // Remove active class from all buttons and contents
809
+ tabButtons.forEach(btn => btn.classList.remove('active'));
810
+ document.querySelectorAll('.tab-content').forEach(content => {
811
+ content.classList.remove('active');
812
+ });
 
 
 
 
 
 
 
813
 
814
+ // Add active class to clicked button and corresponding content
815
+ this.classList.add('active');
816
+ const tabId = this.getAttribute('data-tab') + '-tab';
817
+ document.getElementById(tabId).classList.add('active');
818
+ });
819
+ });
820
+
821
+ // Simulate champion search
822
+ const championSearch1 = document.getElementById('champion1-search');
823
+ const championSearch2 = document.getElementById('champion2-search');
824
+ const suggestions1 = document.getElementById('champion1-suggestions');
825
+ const suggestions2 = document.getElementById('champion2-suggestions');
826
+
827
+ // Sample champion data
828
+ const champions = [
829
+ { name: "Aatrox", image: "Aatrox.png", role: "top" },
830
+ { name: "Ahri", image: "Ahri.png", role: "mid" },
831
+ { name: "Akali", image: "Akali.png", role: "mid" },
832
+ { name: "Akshan", image: "Akshan.png", role: "mid" },
833
+ { name: "Alistar", image: "Alistar.png", role: "support" },
834
+ { name: "Amumu", image: "Amumu.png", role: "jungle" },
835
+ { name: "Anivia", image: "Anivia.png", role: "mid" },
836
+ { name: "Annie", image: "Annie.png", role: "mid" },
837
+ { name: "Aphelios", image: "Aphelios.png", role: "adc" },
838
+ { name: "Ashe", image: "Ashe.png", role: "adc" },
839
+ { name: "Aurelion Sol", image: "AurelionSol.png", role: "mid" },
840
+ { name: "Azir", image: "Azir.png", role: "mid" },
841
+ { name: "Bard", image: "Bard.png", role: "support" },
842
+ { name: "Blitzcrank", image: "Blitzcrank.png", role: "support" },
843
+ { name: "Brand", image: "Brand.png", role: "support" },
844
+ { name: "Braum", image: "Braum.png", role: "support" },
845
+ { name: "Caitlyn", image: "Caitlyn.png", role: "adc" },
846
+ { name: "Camille", image: "Camille.png", role: "top" },
847
+ { name: "Cassiopeia", image: "Cassiopeia.png", role: "mid" },
848
+ { name: "Cho'Gath", image: "Chogath.png", role: "top" },
849
+ { name: "Corki", image: "Corki.png", role: "mid" },
850
+ { name: "Darius", image: "Darius.png", role: "top" },
851
+ { name: "Diana", image: "Diana.png", role: "jungle" },
852
+ { name: "Draven", image: "Draven.png", role: "adc" },
853
+ { name: "Dr. Mundo", image: "DrMundo.png", role: "top" },
854
+ { name: "Ekko", image: "Ekko.png", role: "jungle" },
855
+ { name: "Elise", image: "Elise.png", role: "jungle" },
856
+ { name: "Evelynn", image: "Evelynn.png", role: "jungle" },
857
+ { name: "Ezreal", image: "Ezreal.png", role: "adc" },
858
+ { name: "Fiddlesticks", image: "Fiddlesticks.png", role: "jungle" },
859
+ { name: "Fiora", image: "Fiora.png", role: "top" },
860
+ { name: "Fizz", image: "Fizz.png", role: "mid" },
861
+ { name: "Galio", image: "Galio.png", role: "mid" },
862
+ { name: "Gangplank", image: "Gangplank.png", role: "top" },
863
+ { name: "Garen", image: "Garen.png", role: "top" },
864
+ { name: "Gnar", image: "Gnar.png", role: "top" },
865
+ { name: "Gragas", image: "Gragas.png", role: "jungle" },
866
+ { name: "Graves", image: "Graves.png", role: "jungle" },
867
+ { name: "Gwen", image: "Gwen.png", role: "top" },
868
+ { name: "Hecarim", image: "Hecarim.png", role: "jungle" },
869
+ { name: "Heimerdinger", image: "Heimerdinger.png", role: "mid" },
870
+ { name: "Illaoi", image: "Illaoi.png", role: "top" },
871
+ { name: "Irelia", image: "Irelia.png", role: "top" },
872
+ { name: "Ivern", image: "Ivern.png", role: "jungle" },
873
+ { name: "Janna", image: "Janna.png", role: "support" },
874
+ { name: "Jarvan IV", image: "JarvanIV.png", role: "jungle" },
875
+ { name: "Jax", image: "Jax.png", role: "top" },
876
+ { name: "Jayce", image: "Jayce.png", role: "top" },
877
+ { name: "Jhin", image: "Jhin.png", role: "adc" },
878
+ { name: "Jinx", image: "Jinx.png", role: "adc" },
879
+ { name: "Kai'Sa", image: "Kaisa.png", role: "adc" },
880
+ { name: "Kalista", image: "Kalista.png", role: "adc" },
881
+ { name: "Karma", image: "Karma.png", role: "support" },
882
+ { name: "Karthus", image: "Karthus.png", role: "jungle" },
883
+ { name: "Kassadin", image: "Kassadin.png", role: "mid" },
884
+ { name: "Katarina", image: "Katarina.png", role: "mid" },
885
+ { name: "Kayle", image: "Kayle.png", role: "top" },
886
+ { name: "Kayn", image: "Kayn.png", role: "jungle" },
887
+ { name: "Kennen", image: "Kennen.png", role: "top" },
888
+ { name: "Kha'Zix", image: "Khazix.png", role: "jungle" },
889
+ { name: "Kindred", image: "Kindred.png", role: "jungle" },
890
+ { name: "Kled", image: "Kled.png", role: "top" },
891
+ { name: "Kog'Maw", image: "KogMaw.png", role: "adc" },
892
+ { name: "LeBlanc", image: "Leblanc.png", role: "mid" },
893
+ { name: "Lee Sin", image: "LeeSin.png", role: "jungle" },
894
+ { name: "Leona", image: "Leona.png", role: "support" },
895
+ { name: "Lillia", image: "Lillia.png", role: "jungle" },
896
+ { name: "Lissandra", image: "Lissandra.png", role: "mid" },
897
+ { name: "Lucian", image: "Lucian.png", role: "adc" },
898
+ { name: "Lulu", image: "Lulu.png", role: "support" },
899
+ { name: "Lux", image: "Lux.png", role: "support" },
900
+ { name: "Malphite", image: "Malphite.png", role: "top" },
901
+ { name: "Malzahar", image: "Malzahar.png", role: "mid" },
902
+ { name: "Maokai", image: "Maokai.png", role: "support" },
903
+ { name: "Master Yi", image: "MasterYi.png", role: "jungle" },
904
+ { name: "Miss Fortune", image: "MissFortune.png", role: "adc" },
905
+ { name: "Mordekaiser", image: "Mordekaiser.png", role: "top" },
906
+ { name: "Morgana", image: "Morgana.png", role: "support" },
907
+ { name: "Nami", image: "Nami.png", role: "support" },
908
+ { name: "Nasus", image: "Nasus.png", role: "top" },
909
+ { name: "Nautilus", image: "Nautilus.png", role: "support" },
910
+ { name: "Neeko", image: "Neeko.png", role: "mid" },
911
+ { name: "Nidalee", image: "Nidalee.png", role: "jungle" },
912
+ { name: "Nocturne", image: "Nocturne.png", role: "jungle" },
913
+ { name: "Nunu & Willump", image: "Nunu.png", role: "jungle" },
914
+ { name: "Olaf", image: "Olaf.png", role: "jungle" },
915
+ { name: "Orianna", image: "Orianna.png", role: "mid" },
916
+ { name: "Ornn", image: "Ornn.png", role: "top" },
917
+ { name: "Pantheon", image: "Pantheon.png", role: "mid" },
918
+ { name: "Poppy", image: "Poppy.png", role: "jungle" },
919
+ { name: "Pyke", image: "Pyke.png", role: "support" },
920
+ { name: "Qiyana", image: "Qiyana.png", role: "mid" },
921
+ { name: "Quinn", image: "Quinn.png", role: "top" },
922
+ { name: "Rakan", image: "Rakan.png", role: "support" },
923
+ { name: "Rammus", image: "Rammus.png", role: "jungle" },
924
+ { name: "Rek'Sai", image: "RekSai.png", role: "jungle" },
925
+ { name: "Rell", image: "Rell.png", role: "support" },
926
+ { name: "Renekton", image: "Renekton.png", role: "top" },
927
+ { name: "Rengar", image: "Rengar.png", role: "jungle" },
928
+ { name: "Riven", image: "Riven.png", role: "top" },
929
+ { name: "Rumble", image: "Rumble.png", role: "top" },
930
+ { name: "Ryze", image: "Ryze.png", role: "mid" },
931
+ { name: "Samira", image: "Samira.png", role: "adc" },
932
+ { name: "Sejuani", image: "Sejuani.png", role: "jungle" },
933
+ { name: "Senna", image: "Senna.png", role: "support" },
934
+ { name: "Seraphine", image: "Seraphine.png", role: "support" },
935
+ { name: "Sett", image: "Sett.png", role: "top" },
936
+ { name: "Shaco", image: "Shaco.png", role: "jungle" },
937
+ { name: "Shen", image: "Shen.png", role: "top" },
938
+ { name: "Shyvana", image: "Shyvana.png", role: "jungle" },
939
+ { name: "Singed", image: "Singed.png", role: "top" },
940
+ { name: "Sion", image: "Sion.png", role: "top" },
941
+ { name: "Sivir", image: "Sivir.png", role: "adc" },
942
+ { name: "Skarner", image: "Skarner.png", role: "jungle" },
943
+ { name: "Sona", image: "Sona.png", role: "support" },
944
+ { name: "Soraka", image: "Soraka.png", role: "support" },
945
+ { name: "Swain", image: "Swain.png", role: "support" },
946
+ { name: "Sylas", image: "Sylas.png", role: "mid" },
947
+ { name: "Syndra", image: "Syndra.png", role: "mid" },
948
+ { name: "Tahm Kench", image: "TahmKench.png", role: "support" },
949
+ { name: "Taliyah", image: "Taliyah.png", role: "jungle" },
950
+ { name: "Talon", image: "Talon.png", role: "mid" },
951
+ { name: "Taric", image: "Taric.png", role: "support" },
952
+ { name: "Teemo", image: "Teemo.png", role: "top" },
953
+ { name: "Thresh", image: "Thresh.png", role: "support" },
954
+ { name: "Tristana", image: "Tristana.png", role: "adc" },
955
+ { name: "Trundle", image: "Trundle.png", role: "jungle" },
956
+ { name: "Tryndamere", image: "Tryndamere.png", role: "top" },
957
+ { name: "Twisted Fate", image: "TwistedFate.png", role: "mid" },
958
+ { name: "Twitch", image: "Twitch.png", role: "adc" },
959
+ { name: "Udyr", image: "Udyr.png", role: "jungle" },
960
+ { name: "Urgot", image: "Urgot.png", role: "top" },
961
+ { name: "Varus", image: "Varus.png", role: "adc" },
962
+ { name: "Vayne", image: "Vayne.png", role: "adc" },
963
+ { name: "Veigar", image: "Veigar.png", role: "mid" },
964
+ { name: "Vel'Koz", image: "Velkoz.png", role: "support" },
965
+ { name: "Vex", image: "Vex.png", role: "mid" },
966
+ { name: "Vi", image: "Vi.png", role: "jungle" },
967
+ { name: "Viego", image: "Viego.png", role: "jungle" },
968
+ { name: "Viktor", image: "Viktor.png", role: "mid" },
969
+ { name: "Vladimir", image: "Vladimir.png", role: "mid" },
970
+ { name: "Volibear", image: "Volibear.png", role: "jungle" },
971
+ { name: "Warwick", image: "Warwick.png", role: "jungle" },
972
+ { name: "Wukong", image: "Wukong.png", role: "jungle" },
973
+ { name: "Xayah", image: "Xayah.png", role: "adc" },
974
+ { name: "Xerath", image: "Xerath.png", role: "support" },
975
+ { name: "Xin Zhao", image: "XinZhao.png", role: "jungle" },
976
+ { name: "Yasuo", image: "Yasuo.png", role: "mid" },
977
+ { name: "Yone", image: "Yone.png", role: "mid" },
978
+ { name: "Yorick", image: "Yorick.png", role: "top" },
979
+ { name: "Yuumi", image: "Yuumi.png", role: "support" },
980
+ { name: "Zac", image: "Zac.png", role: "jungle" },
981
+ { name: "Zed", image: "Zed.png", role: "mid" },
982
+ { name: "Zeri", image: "Zeri.png", role: "adc" },
983
+ { name: "Ziggs", image: "Ziggs.png", role: "mid" },
984
+ { name: "Zilean", image: "Zilean.png", role: "support" },
985
+ { name: "Zoe", image: "Zoe.png", role: "mid" },
986
+ { name: "Zyra", image: "Zyra.png", role: "support" }
987
+ ];
988
+
989
+ // Function to get role icon class
990
+ function getRoleIcon(role) {
991
+ switch(role) {
992
+ case 'top': return 'top-icon';
993
+ case 'jungle': return 'jungle-icon';
994
+ case 'mid': return 'mid-icon';
995
+ case 'adc': return 'adc-icon';
996
+ case 'support': return 'support-icon';
997
+ default: return '';
998
+ }
999
+ }
1000
+
1001
+ // Function to display champion suggestions
1002
+ function displaySuggestions(input, container) {
1003
+ const searchTerm = input.value.toLowerCase();
1004
+ container.innerHTML = '';
1005
+
1006
+ if (searchTerm.length < 2) return;
1007
+
1008
+ const filtered = champions.filter(champ =>
1009
+ champ.name.toLowerCase().includes(searchTerm)
1010
+ ).slice(0, 10);
1011
+
1012
+ filtered.forEach(champ => {
1013
+ const div = document.createElement('div');
1014
+ div.className = 'bg-gray-100 rounded p-2 flex items-center cursor-pointer hover:bg-gray-200 transition';
1015
+ div.innerHTML = `
1016
+ <img src="https://ddragon.leagueoflegends.com/cdn/14.10.1/img/champion/${champ.image}"
1017
+ alt="${champ.name}"
1018
+ class="w-8 h-8 rounded-full mr-2">
1019
+ <span class="text-sm font-medium">${champ.name}</span>
1020
+ <span class="ml-auto ${getRoleIcon(champ.role)}"></span>
1021
  `;
1022
+ div.addEventListener('click', () => {
1023
+ input.value = champ.name;
1024
+ container.innerHTML = '';
1025
+ // In a real app, you would load the champion data here
1026
+ document.getElementById('comparison-results').classList.remove('hidden');
1027
+ });
1028
+ container.appendChild(div);
1029
+ });
1030
+ }
1031
+
1032
+ // Event listeners for search inputs
1033
+ championSearch1.addEventListener('input', () => displaySuggestions(championSearch1, suggestions1));
1034
+ championSearch2.addEventListener('input', () => displaySuggestions(championSearch2, suggestions2));
1035
+
1036
+ // Simulate clicking compare button
1037
+ document.querySelector('button').addEventListener('click', function() {
1038
+ // In a real app, you would validate inputs and fetch data
1039
+ if (championSearch1.value && championSearch2.value) {
1040
+ document.getElementById('comparison-results').classList.remove('hidden');
1041
+ }
1042
  });
1043
  </script>
1044
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Joaomatheus/entreteingo" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
prompts.txt CHANGED
@@ -0,0 +1 @@
 
 
1
+ vamos criar um comparador de league of legends estatisticas de