Hugging Face's logo

Spaces:
af27
/
afonso-manuel
Running

App Files Community
af27 commited on
Commit
a11f140
·
verified ·
1 Parent(s): 4b3c349

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1057 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Afonso Manuel
3
- emoji: 👁
4
- colorFrom: gray
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: afonso-manuel
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: pink
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,1057 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="pt">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>VÊ - Rede Social Esportiva</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
+ .dark-mode {
11
+ background-color: #1a202c;
12
+ color: #f7fafc;
13
+ }
14
+ .light-mode {
15
+ background-color: #f7fafc;
16
+ color: #1a202c;
17
+ }
18
+ .sport-card:hover {
19
+ transform: translateY(-5px);
20
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
21
+ }
22
+ .chat-container {
23
+ height: calc(100vh - 150px);
24
+ }
25
+ .map-container {
26
+ height: 400px;
27
+ background-color: #e5e7eb;
28
+ }
29
+ .notification-badge {
30
+ position: absolute;
31
+ top: -5px;
32
+ right: -5px;
33
+ }
34
+ .gold {
35
+ color: #FFD700;
36
+ }
37
+ .silver {
38
+ color: #C0C0C0;
39
+ }
40
+ .bronze {
41
+ color: #CD7F32;
42
+ }
43
+ .ve-logo {
44
+ font-weight: 800;
45
+ background: linear-gradient(135deg, #3B82F6 0%, #10B981 50%, #F59E0B 100%);
46
+ -webkit-background-clip: text;
47
+ -webkit-text-fill-color: transparent;
48
+ background-clip: text;
49
+ text-fill-color: transparent;
50
+ }
51
+ </style>
52
+ </head>
53
+ <body class="light-mode">
54
+ <!-- Onboarding Modal -->
55
+ <div id="onboardingModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
56
+ <div class="bg-white dark:bg-gray-800 rounded-lg p-6 w-full max-w-md">
57
+ <h2 class="text-2xl font-bold mb-4 dark:text-white">Bem-vindo ao <span class="ve-logo">VÊ</span>!</h2>
58
+ <p class="mb-6 dark:text-gray-300">Complete seu cadastro para começar</p>
59
+
60
+ <div class="mb-4">
61
+ <label class="block text-gray-700 dark:text-gray-300 mb-2">Escolha seu esporte principal</label>
62
+ <select class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white">
63
+ <option value="">Selecione um esporte</option>
64
+ <option value="futebol">Futebol</option>
65
+ <option value="basquete">Basquete</option>
66
+ <option value="tenis">Tênis</option>
67
+ <option value="vôlei">Vôlei</option>
68
+ <option value="outro">Outro</option>
69
+ </select>
70
+ </div>
71
+
72
+ <div class="mb-4">
73
+ <label class="block text-gray-700 dark:text-gray-300 mb-2">Gênero</label>
74
+ <div class="flex space-x-4">
75
+ <label class="inline-flex items-center">
76
+ <input type="radio" name="gender" value="male" class="form-radio">
77
+ <span class="ml-2 dark:text-gray-300">Masculino</span>
78
+ </label>
79
+ <label class="inline-flex items-center">
80
+ <input type="radio" name="gender" value="female" class="form-radio">
81
+ <span class="ml-2 dark:text-gray-300">Feminino</span>
82
+ </label>
83
+ <label class="inline-flex items-center">
84
+ <input type="radio" name="gender" value="other" class="form-radio">
85
+ <span class="ml-2 dark:text-gray-300">Outro</span>
86
+ </label>
87
+ </div>
88
+ </div>
89
+
90
+ <div class="mb-4">
91
+ <label class="block text-gray-700 dark:text-gray-300 mb-2">Data de Nascimento</label>
92
+ <input type="date" class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white">
93
+ </div>
94
+
95
+ <div class="flex justify-end space-x-3">
96
+ <button onclick="closeOnboarding()" class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500 dark:text-white">Pular</button>
97
+ <button onclick="completeOnboarding()" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Concluir</button>
98
+ </div>
99
+ </div>
100
+ </div>
101
+
102
+ <!-- Login Modal -->
103
+ <div id="loginModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
104
+ <div class="bg-white dark:bg-gray-800 rounded-lg p-6 w-full max-w-md">
105
+ <h2 class="text-2xl font-bold mb-4 dark:text-white">Login no <span class="ve-logo">VÊ</span></h2>
106
+
107
+ <div class="mb-4">
108
+ <label class="block text-gray-700 dark:text-gray-300 mb-2">Email ou Telefone</label>
109
+ <input type="text" class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="[email protected] ou +55 (00) 00000-0000">
110
+ </div>
111
+
112
+ <div class="mb-4">
113
+ <label class="block text-gray-700 dark:text-gray-300 mb-2">Senha</label>
114
+ <input type="password" class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="********">
115
+ </div>
116
+
117
+ <div class="mb-4 flex items-center">
118
+ <input type="checkbox" id="remember" class="mr-2">
119
+ <label for="remember" class="text-gray-700 dark:text-gray-300">Lembrar-me</label>
120
+ </div>
121
+
122
+ <button onclick="login()" class="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 mb-4">Entrar</button>
123
+
124
+ <div class="text-center">
125
+ <a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Esqueceu a senha?</a>
126
+ <p class="text-gray-700 dark:text-gray-300 mt-2">Não tem uma conta? <a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Cadastre-se</a></p>
127
+ </div>
128
+ </div>
129
+ </div>
130
+
131
+ <!-- Main App Layout -->
132
+ <div class="flex h-screen">
133
+ <!-- Sidebar -->
134
+ <div class="w-64 bg-gray-800 text-white flex flex-col">
135
+ <div class="p-4 border-b border-gray-700">
136
+ <h1 class="text-2xl font-bold flex items-center">
137
+ <span class="ve-logo text-3xl mr-2">VÊ</span>
138
+ </h1>
139
+ </div>
140
+
141
+ <div class="p-4 border-b border-gray-700">
142
+ <div class="flex items-center mb-4">
143
+ <img src="https://via.placeholder.com/40" alt="Profile" class="rounded-full mr-3">
144
+ <div>
145
+ <p class="font-semibold">João Silva</p>
146
+ <p class="text-xs text-gray-400">Ativo agora</p>
147
+ </div>
148
+ </div>
149
+ </div>
150
+
151
+ <nav class="flex-1 overflow-y-auto">
152
+ <div class="p-2">
153
+ <button class="w-full flex items-center p-2 rounded hover:bg-gray-700">
154
+ <i class="fas fa-home mr-3"></i>
155
+ Feed
156
+ </button>
157
+ <button class="w-full flex items-center p-2 rounded hover:bg-gray-700">
158
+ <i class="fas fa-user mr-3"></i>
159
+ Perfil
160
+ </button>
161
+ <button class="w-full flex items-center p-2 rounded hover:bg-gray-700">
162
+ <i class="fas fa-users mr-3"></i>
163
+ Amigos
164
+ </button>
165
+ <button class="w-full flex items-center p-2 rounded hover:bg-gray-700">
166
+ <i class="fas fa-comments mr-3"></i>
167
+ Chat
168
+ <span class="notification-badge bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
169
+ </button>
170
+ <button class="w-full flex items-center p-2 rounded hover:bg-gray-700">
171
+ <i class="fas fa-bell mr-3"></i>
172
+ Notificações
173
+ <span class="notification-badge bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">5</span>
174
+ </button>
175
+ <button class="w-full flex items-center p-2 rounded hover:bg-gray-700">
176
+ <i class="fas fa-map-marked-alt mr-3"></i>
177
+ Radar
178
+ </button>
179
+ <button class="w-full flex items-center p-2 rounded hover:bg-gray-700">
180
+ <i class="fas fa-trophy mr-3"></i>
181
+ Prêmios
182
+ </button>
183
+ <button class="w-full flex items-center p-2 rounded hover:bg-gray-700">
184
+ <i class="fas fa-store mr-3"></i>
185
+ Marketplace
186
+ <span class="notification-badge bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">2</span>
187
+ </button>
188
+ <button class="w-full flex items-center p-2 rounded hover:bg-gray-700">
189
+ <i class="fas fa-calendar-alt mr-3"></i>
190
+ Eventos
191
+ </button>
192
+ <button class="w-full flex items-center p-2 rounded hover:bg-gray-700">
193
+ <i class="fas fa-video mr-3"></i>
194
+ Jogos ao Vivo
195
+ </button>
196
+ </div>
197
+
198
+ <div class="p-2 border-t border-gray-700">
199
+ <p class="text-xs text-gray-400 uppercase mb-2">Equipes</p>
200
+ <button class="w-full flex items-center p-2 rounded hover:bg-gray-700">
201
+ <i class="fas fa-plus-circle mr-3"></i>
202
+ Criar Equipe
203
+ </button>
204
+ <button class="w-full flex items-center p-2 rounded hover:bg-gray-700">
205
+ <i class="fas fa-search mr-3"></i>
206
+ Buscar Equipes
207
+ </button>
208
+ </div>
209
+
210
+ <div class="p-2 border-t border-gray-700">
211
+ <p class="text-xs text-gray-400 uppercase mb-2">Profissionais</p>
212
+ <button class="w-full flex items-center p-2 rounded hover:bg-gray-700">
213
+ <i class="fas fa-user-md mr-3"></i>
214
+ Área da Saúde
215
+ </button>
216
+ <button class="w-full flex items-center p-2 rounded hover:bg-gray-700">
217
+ <i class="fas fa-whistle mr-3"></i>
218
+ Árbitros
219
+ </button>
220
+ <button class="w-full flex items-center p-2 rounded hover:bg-gray-700">
221
+ <i class="fas fa-chalkboard-teacher mr-3"></i>
222
+ Treinadores
223
+ </button>
224
+ </div>
225
+
226
+ <div class="p-2 border-t border-gray-700">
227
+ <p class="text-xs text-gray-400 uppercase mb-2">Configurações</p>
228
+ <button onclick="toggleDarkMode()" class="w-full flex items-center p-2 rounded hover:bg-gray-700">
229
+ <i class="fas fa-moon mr-3"></i>
230
+ Modo Escuro
231
+ </button>
232
+ <button class="w-full flex items-center p-2 rounded hover:bg-gray-700">
233
+ <i class="fas fa-language mr-3"></i>
234
+ Idioma
235
+ </button>
236
+ <button class="w-full flex items-center p-2 rounded hover:bg-gray-700">
237
+ <i class="fas fa-lock mr-3"></i>
238
+ Privacidade
239
+ </button>
240
+ <button class="w-full flex items-center p-2 rounded hover:bg-gray-700">
241
+ <i class="fas fa-cog mr-3"></i>
242
+ Configurações
243
+ </button>
244
+ </div>
245
+ </nav>
246
+ </div>
247
+
248
+ <!-- Main Content -->
249
+ <div class="flex-1 flex flex-col overflow-hidden">
250
+ <!-- Top Navigation -->
251
+ <header class="bg-white dark:bg-gray-800 shadow-sm p-4 flex items-center justify-between">
252
+ <div class="flex items-center">
253
+ <button class="mr-4 text-gray-600 dark:text-gray-300">
254
+ <i class="fas fa-bars"></i>
255
+ </button>
256
+ <div class="relative">
257
+ <input type="text" placeholder="Buscar no VÊ..." class="pl-10 pr-4 py-2 border rounded-full w-64 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
258
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
259
+ </div>
260
+ </div>
261
+
262
+ <div class="flex items-center space-x-4">
263
+ <button class="text-gray-600 dark:text-gray-300 relative">
264
+ <i class="fas fa-bell text-xl"></i>
265
+ <span class="notification-badge bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">5</span>
266
+ </button>
267
+ <button class="text-gray-600 dark:text-gray-300 relative">
268
+ <i class="fas fa-comments text-xl"></i>
269
+ <span class="notification-badge bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
270
+ </button>
271
+ <button class="text-gray-600 dark:text-gray-300">
272
+ <i class="fas fa-plus-circle text-xl"></i>
273
+ </button>
274
+ <img src="https://via.placeholder.com/40" alt="Profile" class="rounded-full">
275
+ </div>
276
+ </header>
277
+
278
+ <!-- Content Area -->
279
+ <main class="flex-1 overflow-y-auto p-4 bg-gray-100 dark:bg-gray-900">
280
+ <!-- Feed Section -->
281
+ <div class="max-w-3xl mx-auto">
282
+ <!-- Create Post -->
283
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow mb-4 p-4">
284
+ <div class="flex items-center mb-4">
285
+ <img src="https://via.placeholder.com/40" alt="Profile" class="rounded-full mr-3">
286
+ <input type="text" placeholder="O que você está pensando?" class="flex-1 p-2 border rounded-full dark:bg-gray-700 dark:border-gray-600 dark:text-white">
287
+ </div>
288
+ <div class="flex justify-between border-t pt-3">
289
+ <button class="flex items-center text-gray-600 dark:text-gray-300 px-3 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700">
290
+ <i class="fas fa-video text-red-500 mr-2"></i> Vídeo
291
+ </button>
292
+ <button class="flex items-center text-gray-600 dark:text-gray-300 px-3 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700">
293
+ <i class="fas fa-image text-green-500 mr-2"></i> Foto
294
+ </button>
295
+ <button class="flex items-center text-gray-600 dark:text-gray-300 px-3 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700">
296
+ <i class="fas fa-calendar-alt text-blue-500 mr-2"></i> Evento
297
+ </button>
298
+ <button class="flex items-center text-gray-600 dark:text-gray-300 px-3 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700">
299
+ <i class="fas fa-trophy text-yellow-500 mr-2"></i> Conquista
300
+ </button>
301
+ </div>
302
+ </div>
303
+
304
+ <!-- Post 1 -->
305
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow mb-4">
306
+ <div class="p-4">
307
+ <div class="flex items-center justify-between">
308
+ <div class="flex items-center">
309
+ <img src="https://via.placeholder.com/40" alt="Profile" class="rounded-full mr-3">
310
+ <div>
311
+ <p class="font-semibold dark:text-white">Carlos Oliveira</p>
312
+ <p class="text-xs text-gray-500 dark:text-gray-400">30 minutos atrás · <i class="fas fa-globe-americas"></i></p>
313
+ </div>
314
+ </div>
315
+ <button class="text-gray-500 dark:text-gray-400">
316
+ <i class="fas fa-ellipsis-h"></i>
317
+ </button>
318
+ </div>
319
+
320
+ <p class="my-3 dark:text-gray-300">Acabei de marcar um jogo de futebol para sábado às 15h no campo da Praça da Juventude. Quem topa?</p>
321
+
322
+ <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm mb-3">
323
+ <div class="flex items-center mr-4">
324
+ <div class="flex -space-x-2">
325
+ <img src="https://via.placeholder.com/24" alt="Like" class="w-6 h-6 rounded-full border-2 border-white dark:border-gray-800">
326
+ <img src="https://via.placeholder.com/24" alt="Like" class="w-6 h-6 rounded-full border-2 border-white dark:border-gray-800">
327
+ <img src="https://via.placeholder.com/24" alt="Like" class="w-6 h-6 rounded-full border-2 border-white dark:border-gray-800">
328
+ </div>
329
+ <span class="ml-2">12</span>
330
+ </div>
331
+ <span>5 comentários</span>
332
+ </div>
333
+
334
+ <div class="border-t pt-3 flex justify-between">
335
+ <button class="flex items-center justify-center w-1/3 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300">
336
+ <i class="far fa-thumbs-up mr-2"></i> Curtir
337
+ </button>
338
+ <button class="flex items-center justify-center w-1/3 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300">
339
+ <i class="far fa-comment mr-2"></i> Comentar
340
+ </button>
341
+ <button class="flex items-center justify-center w-1/3 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300">
342
+ <i class="far fa-share-square mr-2"></i> Compartilhar
343
+ </button>
344
+ </div>
345
+ </div>
346
+
347
+ <div class="border-t p-4 bg-gray-50 dark:bg-gray-700">
348
+ <div class="flex items-center mb-3">
349
+ <img src="https://via.placeholder.com/32" alt="Profile" class="rounded-full mr-3">
350
+ <div class="flex-1">
351
+ <input type="text" placeholder="Escreva um comentário..." class="w-full p-2 border rounded-full dark:bg-gray-600 dark:border-gray-500 dark:text-white">
352
+ </div>
353
+ </div>
354
+
355
+ <div class="flex items-center text-xs text-gray-500 dark:text-gray-400">
356
+ <button class="flex items-center mr-3">
357
+ <i class="fas fa-image mr-1"></i> Foto
358
+ </button>
359
+ <button class="flex items-center mr-3">
360
+ <i class="fas fa-user-tag mr-1"></i> Marcar
361
+ </button>
362
+ <button class="flex items-center">
363
+ <i class="fas fa-smile mr-1"></i> Emoji
364
+ </button>
365
+ </div>
366
+ </div>
367
+ </div>
368
+
369
+ <!-- Game Suggestion -->
370
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow mb-4 p-4">
371
+ <div class="flex items-center justify-between mb-4">
372
+ <h3 class="font-semibold dark:text-white">Jogos Sugeridos no VÊ</h3>
373
+ <a href="#" class="text-blue-500 text-sm">Ver todos</a>
374
+ </div>
375
+
376
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
377
+ <div class="border rounded-lg p-3 hover:shadow-md transition cursor-pointer">
378
+ <div class="flex items-center justify-between mb-2">
379
+ <span class="text-sm font-medium dark:text-gray-300">Futebol</span>
380
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full dark:bg-green-900 dark:text-green-200">Disponível</span>
381
+ </div>
382
+ <p class="text-sm dark:text-gray-400">Hoje, 18:00</p>
383
+ <p class="text-sm font-medium dark:text-gray-300">Campo da Praça Central</p>
384
+ <div class="flex items-center mt-2">
385
+ <div class="flex -space-x-2">
386
+ <img src="https://via.placeholder.com/24" alt="Player" class="w-6 h-6 rounded-full border-2 border-white dark:border-gray-800">
387
+ <img src="https://via.placeholder.com/24" alt="Player" class="w-6 h-6 rounded-full border-2 border-white dark:border-gray-800">
388
+ <img src="https://via.placeholder.com/24" alt="Player" class="w-6 h-6 rounded-full border-2 border-white dark:border-gray-800">
389
+ </div>
390
+ <span class="text-xs ml-2 dark:text-gray-400">+5 jogadores</span>
391
+ </div>
392
+ <button class="w-full mt-3 bg-blue-500 text-white py-1 rounded text-sm hover:bg-blue-600">Participar</button>
393
+ </div>
394
+
395
+ <div class="border rounded-lg p-3 hover:shadow-md transition cursor-pointer">
396
+ <div class="flex items-center justify-between mb-2">
397
+ <span class="text-sm font-medium dark:text-gray-300">Basquete</span>
398
+ <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full dark:bg-yellow-900 dark:text-yellow-200">Indispensável</span>
399
+ </div>
400
+ <p class="text-sm dark:text-gray-400">Amanhã, 09:00</p>
401
+ <p class="text-sm font-medium dark:text-gray-300">Quadra do Parque</p>
402
+ <div class="flex items-center mt-2">
403
+ <div class="flex -space-x-2">
404
+ <img src="https://via.placeholder.com/24" alt="Player" class="w-6 h-6 rounded-full border-2 border-white dark:border-gray-800">
405
+ <img src="https://via.placeholder.com/24" alt="Player" class="w-6 h-6 rounded-full border-2 border-white dark:border-gray-800">
406
+ </div>
407
+ <span class="text-xs ml-2 dark:text-gray-400">+3 jogadores</span>
408
+ </div>
409
+ <button class="w-full mt-3 bg-blue-500 text-white py-1 rounded text-sm hover:bg-blue-600">Participar</button>
410
+ </div>
411
+ </div>
412
+ </div>
413
+
414
+ <!-- Marketplace Section -->
415
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow mb-4 p-4">
416
+ <div class="flex items-center justify-between mb-4">
417
+ <h3 class="font-semibold dark:text-white">Marketplace do VÊ</h3>
418
+ <div class="flex items-center">
419
+ <a href="#" class="text-blue-500 text-sm mr-3">Ver carrinho (2)</a>
420
+ <a href="#" class="text-blue-500 text-sm">Ver todos</a>
421
+ </div>
422
+ </div>
423
+
424
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
425
+ <div class="border rounded-lg overflow-hidden hover:shadow-md transition cursor-pointer">
426
+ <div class="h-32 bg-gray-200 flex items-center justify-center">
427
+ <i class="fas fa-shopping-bag text-3xl text-gray-400"></i>
428
+ </div>
429
+ <div class="p-3">
430
+ <p class="text-sm font-medium truncate dark:text-gray-300">Tênis de Basquete Nike</p>
431
+ <p class="text-sm text-gray-500 dark:text-gray-400">R$ 299,90</p>
432
+ <button class="w-full mt-2 border border-blue-500 text-blue-500 py-1 rounded text-sm hover:bg-blue-50 dark:hover:bg-gray-700">Adicionar</button>
433
+ </div>
434
+ </div>
435
+
436
+ <div class="border rounded-lg overflow-hidden hover:shadow-md transition cursor-pointer">
437
+ <div class="h-32 bg-gray-200 flex items-center justify-center">
438
+ <i class="fas fa-shopping-bag text-3xl text-gray-400"></i>
439
+ </div>
440
+ <div class="p-3">
441
+ <p class="text-sm font-medium truncate dark:text-gray-300">Bola de Futebol Adidas</p>
442
+ <p class="text-sm text-gray-500 dark:text-gray-400">R$ 129,90</p>
443
+ <button class="w-full mt-2 border border-blue-500 text-blue-500 py-1 rounded text-sm hover:bg-blue-50 dark:hover:bg-gray-700">Adicionar</button>
444
+ </div>
445
+ </div>
446
+
447
+ <div class="border rounded-lg overflow-hidden hover:shadow-md transition cursor-pointer">
448
+ <div class="h-32 bg-gray-200 flex items-center justify-center">
449
+ <i class="fas fa-shopping-bag text-3xl text-gray-400"></i>
450
+ </div>
451
+ <div class="p-3">
452
+ <p class="text-sm font-medium truncate dark:text-gray-300">Camisa de Time</p>
453
+ <p class="text-sm text-gray-500 dark:text-gray-400">R$ 199,90</p>
454
+ <button class="w-full mt-2 border border-blue-500 text-blue-500 py-1 rounded text-sm hover:bg-blue-50 dark:hover:bg-gray-700">Adicionar</button>
455
+ </div>
456
+ </div>
457
+
458
+ <div class="border rounded-lg overflow-hidden hover:shadow-md transition cursor-pointer">
459
+ <div class="h-32 bg-gray-200 flex items-center justify-center">
460
+ <i class="fas fa-shopping-bag text-3xl text-gray-400"></i>
461
+ </div>
462
+ <div class="p-3">
463
+ <p class="text-sm font-medium truncate dark:text-gray-300">Luva de Goleiro</p>
464
+ <p class="text-sm text-gray-500 dark:text-gray-400">R$ 89,90</p>
465
+ <button class="w-full mt-2 border border-blue-500 text-blue-500 py-1 rounded text-sm hover:bg-blue-50 dark:hover:bg-gray-700">Adicionar</button>
466
+ </div>
467
+ </div>
468
+ </div>
469
+ </div>
470
+
471
+ <!-- Live Games Section -->
472
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow mb-4 p-4">
473
+ <div class="flex items-center justify-between mb-4">
474
+ <h3 class="font-semibold dark:text-white">Jogos ao Vivo no VÊ</h3>
475
+ <a href="#" class="text-blue-500 text-sm">Ver todos</a>
476
+ </div>
477
+
478
+ <div class="grid grid-cols-1 gap-4">
479
+ <div class="relative rounded-lg overflow-hidden">
480
+ <div class="h-48 bg-gray-800 flex items-center justify-center">
481
+ <i class="fas fa-play-circle text-4xl text-white opacity-75"></i>
482
+ </div>
483
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
484
+ <div class="flex items-center justify-between">
485
+ <div>
486
+ <p class="text-white font-medium">Futebol Amador</p>
487
+ <p class="text-white text-sm">São Paulo FC x Santos FC</p>
488
+ </div>
489
+ <span class="bg-red-500 text-white text-xs px-2 py-1 rounded-full">AO VIVO</span>
490
+ </div>
491
+ </div>
492
+ </div>
493
+
494
+ <div class="grid grid-cols-2 gap-4">
495
+ <div class="relative rounded-lg overflow-hidden">
496
+ <div class="h-32 bg-gray-800 flex items-center justify-center">
497
+ <i class="fas fa-play-circle text-3xl text-white opacity-75"></i>
498
+ </div>
499
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-3">
500
+ <p class="text-white text-sm truncate">Basquete Universitário</p>
501
+ </div>
502
+ </div>
503
+
504
+ <div class="relative rounded-lg overflow-hidden">
505
+ <div class="h-32 bg-gray-800 flex items-center justify-center">
506
+ <i class="fas fa-play-circle text-3xl text-white opacity-75"></i>
507
+ </div>
508
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-3">
509
+ <p class="text-white text-sm truncate">Vôlei de Praia</p>
510
+ </div>
511
+ </div>
512
+ </div>
513
+ </div>
514
+ </div>
515
+ </div>
516
+ </main>
517
+ </div>
518
+
519
+ <!-- Right Sidebar -->
520
+ <div class="w-80 bg-white dark:bg-gray-800 border-l border-gray-200 dark:border-gray-700 hidden lg:block overflow-y-auto">
521
+ <div class="p-4">
522
+ <!-- Events -->
523
+ <div class="mb-6">
524
+ <div class="flex items-center justify-between mb-3">
525
+ <h3 class="font-semibold dark:text-white">Eventos no VÊ</h3>
526
+ <button class="text-blue-500 text-sm">Criar</button>
527
+ </div>
528
+
529
+ <div class="space-y-3">
530
+ <div class="border rounded-lg p-3 hover:shadow-md transition cursor-pointer">
531
+ <div class="flex items-start">
532
+ <div class="bg-blue-100 text-blue-800 rounded-lg p-2 mr-3 dark:bg-blue-900 dark:text-blue-200">
533
+ <p class="text-center font-bold">15</p>
534
+ <p class="text-xs">JUN</p>
535
+ </div>
536
+ <div>
537
+ <p class="font-medium dark:text-gray-300">Torneio de Futebol</p>
538
+ <p class="text-sm text-gray-500 dark:text-gray-400">Praça Central, 15h</p>
539
+ <div class="flex items-center mt-1">
540
+ <div class="flex -space-x-2">
541
+ <img src="https://via.placeholder.com/24" alt="Player" class="w-5 h-5 rounded-full border-2 border-white dark:border-gray-800">
542
+ <img src="https://via.placeholder.com/24" alt="Player" class="w-5 h-5 rounded-full border-2 border-white dark:border-gray-800">
543
+ </div>
544
+ <span class="text-xs ml-2 dark:text-gray-400">+8 confirmados</span>
545
+ </div>
546
+ </div>
547
+ </div>
548
+ </div>
549
+
550
+ <div class="border rounded-lg p-3 hover:shadow-md transition cursor-pointer">
551
+ <div class="flex items-start">
552
+ <div class="bg-blue-100 text-blue-800 rounded-lg p-2 mr-3 dark:bg-blue-900 dark:text-blue-200">
553
+ <p class="text-center font-bold">20</p>
554
+ <p class="text-xs">JUN</p>
555
+ </div>
556
+ <div>
557
+ <p class="font-medium dark:text-gray-300">Treino de Basquete</p>
558
+ <p class="text-sm text-gray-500 dark:text-gray-400">Quadra Municipal, 18h</p>
559
+ <div class="flex items-center mt-1">
560
+ <div class="flex -space-x-2">
561
+ <img src="https://via.placeholder.com/24" alt="Player" class="w-5 h-5 rounded-full border-2 border-white dark:border-gray-800">
562
+ </div>
563
+ <span class="text-xs ml-2 dark:text-gray-400">+3 confirmados</span>
564
+ </div>
565
+ </div>
566
+ </div>
567
+ </div>
568
+ </div>
569
+ </div>
570
+
571
+ <!-- Player Radar -->
572
+ <div class="mb-6">
573
+ <div class="flex items-center justify-between mb-3">
574
+ <h3 class="font-semibold dark:text-white">Radar de Jogadores</h3>
575
+ <button class="text-blue-500 text-sm">Filtrar</button>
576
+ </div>
577
+
578
+ <div class="map-container rounded-lg mb-3 flex items-center justify-center">
579
+ <i class="fas fa-map-marked-alt text-4xl text-gray-500"></i>
580
+ </div>
581
+
582
+ <div class="space-y-3">
583
+ <div class="flex items-center p-2 border rounded-lg hover:shadow-md transition cursor-pointer">
584
+ <img src="https://via.placeholder.com/40" alt="Player" class="rounded-full mr-3">
585
+ <div>
586
+ <p class="font-medium dark:text-gray-300">Marcos Santos</p>
587
+ <p class="text-xs text-gray-500 dark:text-gray-400">Futebol · 1.2km de distância</p>
588
+ </div>
589
+ <button class="ml-auto text-blue-500">
590
+ <i class="fas fa-plus-circle"></i>
591
+ </button>
592
+ </div>
593
+
594
+ <div class="flex items-center p-2 border rounded-lg hover:shadow-md transition cursor-pointer">
595
+ <img src="https://via.placeholder.com/40" alt="Player" class="rounded-full mr-3">
596
+ <div>
597
+ <p class="font-medium dark:text-gray-300">Ana Oliveira</p>
598
+ <p class="text-xs text-gray-500 dark:text-gray-400">Vôlei · 0.8km de distância</p>
599
+ </div>
600
+ <button class="ml-auto text-blue-500">
601
+ <i class="fas fa-plus-circle"></i>
602
+ </button>
603
+ </div>
604
+ </div>
605
+ </div>
606
+
607
+ <!-- Available Fields -->
608
+ <div class="mb-6">
609
+ <div class="flex items-center justify-between mb-3">
610
+ <h3 class="font-semibold dark:text-white">Campos Disponíveis</h3>
611
+ <button class="text-blue-500 text-sm">Ver todos</button>
612
+ </div>
613
+
614
+ <div class="space-y-3">
615
+ <div class="border rounded-lg p-3 hover:shadow-md transition cursor-pointer">
616
+ <p class="font-medium dark:text-gray-300">Campo da Praça Central</p>
617
+ <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">Futebol · 1.5km</p>
618
+ <div class="flex items-center justify-between text-sm">
619
+ <span class="text-green-600 dark:text-green-400">Disponível agora</span>
620
+ <span class="text-gray-500 dark:text-gray-400">R$ 80/h</span>
621
+ </div>
622
+ </div>
623
+
624
+ <div class="border rounded-lg p-3 hover:shadow-md transition cursor-pointer">
625
+ <p class="font-medium dark:text-gray-300">Quadra do Parque</p>
626
+ <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">Basquete · 0.7km</p>
627
+ <div class="flex items-center justify-between text-sm">
628
+ <span class="text-green-600 dark:text-green-400">Disponível amanhã</span>
629
+ <span class="text-gray-500 dark:text-gray-400">R$ 50/h</span>
630
+ </div>
631
+ </div>
632
+ </div>
633
+ </div>
634
+
635
+ <!-- Sponsors -->
636
+ <div>
637
+ <div class="flex items-center justify-between mb-3">
638
+ <h3 class="font-semibold dark:text-white">Patrocinadores do VÊ</h3>
639
+ <button class="text-blue-500 text-sm">Tornar-se</button>
640
+ </div>
641
+
642
+ <div class="grid grid-cols-3 gap-3">
643
+ <div class="border rounded-lg p-2 flex items-center justify-center hover:shadow-md transition cursor-pointer">
644
+ <img src="https://via.placeholder.com/60" alt="Sponsor" class="h-12 object-contain">
645
+ </div>
646
+ <div class="border rounded-lg p-2 flex items-center justify-center hover:shadow-md transition cursor-pointer">
647
+ <img src="https://via.placeholder.com/60" alt="Sponsor" class="h-12 object-contain">
648
+ </div>
649
+ <div class="border rounded-lg p-2 flex items-center justify-center hover:shadow-md transition cursor-pointer">
650
+ <img src="https://via.placeholder.com/60" alt="Sponsor" class="h-12 object-contain">
651
+ </div>
652
+ <div class="border rounded-lg p-2 flex items-center justify-center hover:shadow-md transition cursor-pointer">
653
+ <img src="https://via.placeholder.com/60" alt="Sponsor" class="h-12 object-contain">
654
+ </div>
655
+ <div class="border rounded-lg p-2 flex items-center justify-center hover:shadow-md transition cursor-pointer">
656
+ <img src="https://via.placeholder.com/60" alt="Sponsor" class="h-12 object-contain">
657
+ </div>
658
+ <div class="border rounded-lg p-2 flex items-center justify-center hover:shadow-md transition cursor-pointer">
659
+ <img src="https://via.placeholder.com/60" alt="Sponsor" class="h-12 object-contain">
660
+ </div>
661
+ </div>
662
+ </div>
663
+ </div>
664
+ </div>
665
+ </div>
666
+
667
+ <!-- Chat Modal -->
668
+ <div id="chatModal" class="fixed bottom-0 right-0 w-80 bg-white dark:bg-gray-800 shadow-lg rounded-t-lg border border-gray-300 dark:border-gray-700 z-40 hidden">
669
+ <div class="flex items-center justify-between p-3 border-b dark:border-gray-700 bg-gray-100 dark:bg-gray-700 rounded-t-lg">
670
+ <div class="flex items-center">
671
+ <img src="https://via.placeholder.com/32" alt="Profile" class="rounded-full mr-2">
672
+ <span class="font-medium dark:text-white">Chat do VÊ</span>
673
+ </div>
674
+ <div class="flex items-center space-x-2">
675
+ <button class="text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-white">
676
+ <i class="fas fa-cog"></i>
677
+ </button>
678
+ <button onclick="toggleChat()" class="text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-white">
679
+ <i class="fas fa-times"></i>
680
+ </button>
681
+ </div>
682
+ </div>
683
+
684
+ <div class="chat-container overflow-y-auto p-3">
685
+ <div class="flex mb-3">
686
+ <img src="https://via.placeholder.com/32" alt="Profile" class="rounded-full mr-2 self-end">
687
+ <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-2 max-w-xs">
688
+ <p class="text-sm dark:text-gray-300">E aí, vamos marcar um futebol no sábado?</p>
689
+ <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">10:30 AM</p>
690
+ </div>
691
+ </div>
692
+
693
+ <div class="flex mb-3 justify-end">
694
+ <div class="bg-blue-500 text-white rounded-lg p-2 max-w-xs">
695
+ <p class="text-sm">Bora sim! Que horas?</p>
696
+ <p class="text-xs text-blue-100 mt-1">10:32 AM</p>
697
+ </div>
698
+ <img src="https://via.placeholder.com/32" alt="Profile" class="rounded-full ml-2 self-end">
699
+ </div>
700
+
701
+ <div class="flex mb-3">
702
+ <img src="https://via.placeholder.com/32" alt="Profile" class="rounded-full mr-2 self-end">
703
+ <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-2 max-w-xs">
704
+ <p class="text-sm dark:text-gray-300">Pensei em 15h no campo da Praça</p>
705
+ <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">10:33 AM</p>
706
+ </div>
707
+ </div>
708
+
709
+ <div class="flex mb-3 justify-end">
710
+ <div class="bg-blue-500 text-white rounded-lg p-2 max-w-xs">
711
+ <p class="text-sm">Perfeito! Já convidei o pessoal</p>
712
+ <p class="text-xs text-blue-100 mt-1">10:35 AM</p>
713
+ </div>
714
+ <img src="https://via.placeholder.com/32" alt="Profile" class="rounded-full ml-2 self-end">
715
+ </div>
716
+ </div>
717
+
718
+ <div class="p-3 border-t dark:border-gray-700">
719
+ <div class="flex items-center">
720
+ <button class="text-gray-500 dark:text-gray-400 mr-2">
721
+ <i class="far fa-smile"></i>
722
+ </button>
723
+ <input type="text" placeholder="Digite uma mensagem..." class="flex-1 p-2 border rounded-full dark:bg-gray-700 dark:border-gray-600 dark:text-white">
724
+ <button class="ml-2 text-blue-500">
725
+ <i class="fas fa-paper-plane"></i>
726
+ </button>
727
+ </div>
728
+ </div>
729
+ </div>
730
+
731
+ <!-- Create Team Modal -->
732
+ <div id="createTeamModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
733
+ <div class="bg-white dark:bg-gray-800 rounded-lg p-6 w-full max-w-md">
734
+ <h2 class="text-2xl font-bold mb-4 dark:text-white">Criar Equipe no VÊ</h2>
735
+
736
+ <div class="mb-4">
737
+ <label class="block text-gray-700 dark:text-gray-300 mb-2">Nome da Equipe</label>
738
+ <input type="text" class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Ex: Os Invictos">
739
+ </div>
740
+
741
+ <div class="mb-4">
742
+ <label class="block text-gray-700 dark:text-gray-300 mb-2">Esporte</label>
743
+ <select class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white">
744
+ <option value="">Selecione um esporte</option>
745
+ <option value="futebol">Futebol</option>
746
+ <option value="basquete">Basquete</option>
747
+ <option value="vôlei">Vôlei</option>
748
+ <option value="outro">Outro</option>
749
+ </select>
750
+ </div>
751
+
752
+ <div class="mb-4">
753
+ <label class="block text-gray-700 dark:text-gray-300 mb-2">Descrição</label>
754
+ <textarea class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white" rows="3" placeholder="Descreva sua equipe..."></textarea>
755
+ </div>
756
+
757
+ <div class="mb-4">
758
+ <label class="block text-gray-700 dark:text-gray-300 mb-2">Foto da Equipe</label>
759
+ <div class="border-2 border-dashed rounded-lg p-4 text-center dark:border-gray-600">
760
+ <i class="fas fa-camera text-3xl text-gray-400 mb-2"></i>
761
+ <p class="text-sm text-gray-500 dark:text-gray-400">Arraste e solte ou clique para enviar</p>
762
+ <input type="file" class="hidden">
763
+ </div>
764
+ </div>
765
+
766
+ <div class="flex justify-end space-x-3">
767
+ <button onclick="closeCreateTeam()" class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500 dark:text-white">Cancelar</button>
768
+ <button onclick="createTeam()" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Criar</button>
769
+ </div>
770
+ </div>
771
+ </div>
772
+
773
+ <!-- Schedule Game Modal -->
774
+ <div id="scheduleGameModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
775
+ <div class="bg-white dark:bg-gray-800 rounded-lg p-6 w-full max-w-md">
776
+ <h2 class="text-2xl font-bold mb-4 dark:text-white">Marcar Jogo no VÊ</h2>
777
+
778
+ <div class="mb-4">
779
+ <label class="block text-gray-700 dark:text-gray-300 mb-2">Tipo de Jogo</label>
780
+ <select class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white">
781
+ <option value="">Selecione o tipo</option>
782
+ <option value="friendly">Amistoso</option>
783
+ <option value="training">Treino</option>
784
+ <option value="tournament">Torneio</option>
785
+ </select>
786
+ </div>
787
+
788
+ <div class="mb-4">
789
+ <label class="block text-gray-700 dark:text-gray-300 mb-2">Disponibilidade</label>
790
+ <div class="flex space-x-4">
791
+ <label class="inline-flex items-center">
792
+ <input type="radio" name="availability" value="available" class="form-radio" checked>
793
+ <span class="ml-2 dark:text-gray-300">Disponível</span>
794
+ </label>
795
+ <label class="inline-flex items-center">
796
+ <input type="radio" name="availability" value="indispensable" class="form-radio">
797
+ <span class="ml-2 dark:text-gray-300">Indispensável</span>
798
+ </label>
799
+ </div>
800
+ </div>
801
+
802
+ <div class="mb-4">
803
+ <label class="block text-gray-700 dark:text-gray-300 mb-2">Data e Hora</label>
804
+ <input type="datetime-local" class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white">
805
+ </div>
806
+
807
+ <div class="mb-4">
808
+ <label class="block text-gray-700 dark:text-gray-300 mb-2">Localização</label>
809
+ <input type="text" class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Endereço ou nome do local">
810
+ </div>
811
+
812
+ <div class="mb-4">
813
+ <label class="block text-gray-700 dark:text-gray-300 mb-2">Equipe Adversária (opcional)</label>
814
+ <input type="text" class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Nome da equipe">
815
+ </div>
816
+
817
+ <div class="mb-4">
818
+ <label class="block text-gray-700 dark:text-gray-300 mb-2">Descrição</label>
819
+ <textarea class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white" rows="3" placeholder="Detalhes adicionais..."></textarea>
820
+ </div>
821
+
822
+ <div class="flex justify-end space-x-3">
823
+ <button onclick="closeScheduleGame()" class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500 dark:text-white">Cancelar</button>
824
+ <button onclick="scheduleGame()" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Marcar</button>
825
+ </div>
826
+ </div>
827
+ </div>
828
+
829
+ <!-- Payment Modal -->
830
+ <div id="paymentModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
831
+ <div class="bg-white dark:bg-gray-800 rounded-lg p-6 w-full max-w-md">
832
+ <h2 class="text-2xl font-bold mb-4 dark:text-white">Pagamento no VÊ</h2>
833
+
834
+ <div class="mb-4">
835
+ <label class="block text-gray-700 dark:text-gray-300 mb-2">Método de Pagamento</label>
836
+ <select class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white">
837
+ <option value="">Selecione o método</option>
838
+ <option value="credit">Cartão de Crédito</option>
839
+ <option value="debit">Cartão de Débito</option>
840
+ <option value="pix">PIX</option>
841
+ <option value="paypal">PayPal</option>
842
+ </select>
843
+ </div>
844
+
845
+ <div class="mb-4">
846
+ <label class="block text-gray-700 dark:text-gray-300 mb-2">Número do Cartão</label>
847
+ <input type="text" class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="0000 0000 0000 0000">
848
+ </div>
849
+
850
+ <div class="grid grid-cols-2 gap-4 mb-4">
851
+ <div>
852
+ <label class="block text-gray-700 dark:text-gray-300 mb-2">Validade</label>
853
+ <input type="text" class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="MM/AA">
854
+ </div>
855
+ <div>
856
+ <label class="block text-gray-700 dark:text-gray-300 mb-2">CVV</label>
857
+ <input type="text" class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="123">
858
+ </div>
859
+ </div>
860
+
861
+ <div class="mb-4">
862
+ <label class="block text-gray-700 dark:text-gray-300 mb-2">Nome no Cartão</label>
863
+ <input type="text" class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Nome completo">
864
+ </div>
865
+
866
+ <div class="border-t pt-4 mb-4 dark:border-gray-700">
867
+ <div class="flex justify-between mb-2">
868
+ <span class="text-gray-700 dark:text-gray-300">Subtotal</span>
869
+ <span class="font-medium dark:text-white">R$ 299,90</span>
870
+ </div>
871
+ <div class="flex justify-between mb-2">
872
+ <span class="text-gray-700 dark:text-gray-300">Frete</span>
873
+ <span class="font-medium dark:text-white">R$ 15,00</span>
874
+ </div>
875
+ <div class="flex justify-between text-lg font-bold">
876
+ <span class="text-gray-700 dark:text-gray-300">Total</span>
877
+ <span class="dark:text-white">R$ 314,90</span>
878
+ </div>
879
+ </div>
880
+
881
+ <div class="flex justify-end space-x-3">
882
+ <button onclick="closePayment()" class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500 dark:text-white">Cancelar</button>
883
+ <button onclick="processPayment()" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Pagar</button>
884
+ </div>
885
+ </div>
886
+ </div>
887
+
888
+ <!-- Professional Registration Modal -->
889
+ <div id="professionalModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
890
+ <div class="bg-white dark:bg-gray-800 rounded-lg p-6 w-full max-w-2xl">
891
+ <h2 class="text-2xl font-bold mb-4 dark:text-white">Cadastro de Profissional no VÊ</h2>
892
+
893
+ <div class="mb-4">
894
+ <label class="block text-gray-700 dark:text-gray-300 mb-2">Tipo de Profissional</label>
895
+ <select class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white">
896
+ <option value="">Selecione o tipo</option>
897
+ <option value="health">Profissional de Saúde</option>
898
+ <option value="referee">Árbitro</option>
899
+ <option value="coach">Treinador</option>
900
+ </select>
901
+ </div>
902
+
903
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
904
+ <div>
905
+ <label class="block text-gray-700 dark:text-gray-300 mb-2">Nome Completo</label>
906
+ <input type="text" class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white">
907
+ </div>
908
+ <div>
909
+ <label class="block text-gray-700 dark:text-gray-300 mb-2">CPF</label>
910
+ <input type="text" class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="000.000.000-00">
911
+ </div>
912
+ </div>
913
+
914
+ <div class="mb-4">
915
+ <label class="block text-gray-700 dark:text-gray-300 mb-2">Documentos Comprovantes (PDF)</label>
916
+ <div class="border-2 border-dashed rounded-lg p-4 text-center dark:border-gray-600">
917
+ <i class="fas fa-file-pdf text-3xl text-red-500 mb-2"></i>
918
+ <p class="text-sm text-gray-500 dark:text-gray-400">Arraste e solte ou clique para enviar documentos</p>
919
+ <input type="file" class="hidden" accept=".pdf">
920
+ </div>
921
+ </div>
922
+
923
+ <div class="mb-4">
924
+ <label class="block text-gray-700 dark:text-gray-300 mb-2">Especialidade</label>
925
+ <input type="text" class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Ex: Fisioterapia Esportiva">
926
+ </div>
927
+
928
+ <div class="mb-4">
929
+ <label class="block text-gray-700 dark:text-gray-300 mb-2">Experiência</label>
930
+ <textarea class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white" rows="3" placeholder="Descreva sua experiência profissional..."></textarea>
931
+ </div>
932
+
933
+ <div class="flex justify-end space-x-3">
934
+ <button onclick="closeProfessional()" class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500 dark:text-white">Cancelar</button>
935
+ <button onclick="submitProfessional()" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Enviar</button>
936
+ </div>
937
+ </div>
938
+ </div>
939
+
940
+ <script>
941
+ // Toggle dark/light mode
942
+ function toggleDarkMode() {
943
+ const body = document.body;
944
+ if (body.classList.contains('dark-mode')) {
945
+ body.classList.remove('dark-mode');
946
+ body.classList.add('light-mode');
947
+ } else {
948
+ body.classList.remove('light-mode');
949
+ body.classList.add('dark-mode');
950
+ }
951
+ }
952
+
953
+ // Onboarding modal
954
+ function closeOnboarding() {
955
+ document.getElementById('onboardingModal').classList.add('hidden');
956
+ }
957
+
958
+ function completeOnboarding() {
959
+ document.getElementById('onboardingModal').classList.add('hidden');
960
+ // Here you would typically save the onboarding data
961
+ }
962
+
963
+ // Login modal
964
+ function login() {
965
+ document.getElementById('loginModal').classList.add('hidden');
966
+ // Here you would typically handle login logic
967
+ }
968
+
969
+ // Chat functions
970
+ function toggleChat() {
971
+ const chatModal = document.getElementById('chatModal');
972
+ chatModal.classList.toggle('hidden');
973
+ }
974
+
975
+ // Team creation
976
+ function openCreateTeam() {
977
+ document.getElementById('createTeamModal').classList.remove('hidden');
978
+ }
979
+
980
+ function closeCreateTeam() {
981
+ document.getElementById('createTeamModal').classList.add('hidden');
982
+ }
983
+
984
+ function createTeam() {
985
+ closeCreateTeam();
986
+ // Here you would typically handle team creation
987
+ }
988
+
989
+ // Game scheduling
990
+ function openScheduleGame() {
991
+ document.getElementById('scheduleGameModal').classList.remove('hidden');
992
+ }
993
+
994
+ function closeScheduleGame() {
995
+ document.getElementById('scheduleGameModal').classList.add('hidden');
996
+ }
997
+
998
+ function scheduleGame() {
999
+ closeScheduleGame();
1000
+ // Here you would typically handle game scheduling
1001
+ }
1002
+
1003
+ // Payment
1004
+ function openPayment() {
1005
+ document.getElementById('paymentModal').classList.remove('hidden');
1006
+ }
1007
+
1008
+ function closePayment() {
1009
+ document.getElementById('paymentModal').classList.add('hidden');
1010
+ }
1011
+
1012
+ function processPayment() {
1013
+ closePayment();
1014
+ // Here you would typically handle payment processing
1015
+ }
1016
+
1017
+ // Professional registration
1018
+ function openProfessional() {
1019
+ document.getElementById('professionalModal').classList.remove('hidden');
1020
+ }
1021
+
1022
+ function closeProfessional() {
1023
+ document.getElementById('professionalModal').classList.add('hidden');
1024
+ }
1025
+
1026
+ function submitProfessional() {
1027
+ closeProfessional();
1028
+ // Here you would typically handle professional registration
1029
+ }
1030
+
1031
+ // Initialize modals
1032
+ document.addEventListener('DOMContentLoaded', function() {
1033
+ // Show onboarding modal on first visit
1034
+ // In a real app, you would check if the user has completed onboarding
1035
+ document.getElementById('onboardingModal').classList.remove('hidden');
1036
+
1037
+ // Show login modal (for demo purposes)
1038
+ // In a real app, you would check if the user is logged in
1039
+ document.getElementById('loginModal').classList.remove('hidden');
1040
+ });
1041
+
1042
+ // Like with medals
1043
+ function likeWithMedal(postId, medalType) {
1044
+ // Here you would typically handle the like with medal type
1045
+ console.log(`Liked post ${postId} with ${medalType} medal`);
1046
+
1047
+ // For demo purposes, we'll just show an alert
1048
+ let medalName;
1049
+ if (medalType === 'gold') medalName = 'ouro';
1050
+ else if (medalType === 'silver') medalName = 'prata';
1051
+ else medalName = 'bronze';
1052
+
1053
+ alert(`Você deu like com medalha de ${medalName} neste post!`);
1054
+ }
1055
+ </script>
1056
+ <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=af27/afonso-manuel" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1057
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ o nome do aplicativo e VÊ .