Hugging Face's logo

Spaces:
tidotto
/
brshare
Running

App Files Community
tidotto commited on
Commit
ec982f0
·
verified ·
1 Parent(s): e696a7e

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +308 -635
  2. prompts.txt +2 -1
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>BRShare - Compartilhamento de Arquivos Seguro</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>
@@ -11,721 +11,394 @@
11
  .gradient-bg {
12
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
13
  }
14
- .file-card:hover {
15
- transform: translateY(-5px);
16
- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
17
  }
18
- .progress-bar {
19
- transition: width 0.3s ease;
20
  }
21
- .dropdown-menu {
22
- opacity: 0;
23
- visibility: hidden;
24
- transition: all 0.3s ease;
25
  }
26
- .dropdown:hover .dropdown-menu {
27
- opacity: 1;
28
- visibility: visible;
29
  }
30
- .mobile-menu {
31
- max-height: 0;
32
- overflow: hidden;
33
- transition: max-height 0.3s ease-out;
34
  }
35
- .mobile-menu.open {
36
- max-height: 500px;
 
37
  }
38
  </style>
39
  </head>
40
- <body class="font-sans bg-gray-50 text-gray-800">
41
  <!-- Header/Navbar -->
42
  <header class="bg-white shadow-sm sticky top-0 z-50">
43
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
44
  <div class="flex items-center space-x-2">
45
  <i class="fas fa-share-alt text-blue-600 text-2xl"></i>
46
- <a href="#" class="text-2xl font-bold text-blue-600">BRShare</a>
47
  </div>
48
 
49
- <!-- Desktop Navigation -->
50
- <nav class="hidden md:flex space-x-8">
51
- <a href="#home" class="text-blue-600 font-medium hover:text-blue-800 transition">Início</a>
52
- <a href="#features" class="text-gray-600 hover:text-blue-600 transition">Recursos</a>
53
- <a href="#pricing" class="text-gray-600 hover:text-blue-600 transition">Planos</a>
54
- <a href="#about" class="text-gray-600 hover:text-blue-600 transition">Sobre</a>
55
- <div class="dropdown relative">
56
- <button class="text-gray-600 hover:text-blue-600 transition flex items-center">
57
- Mais <i class="fas fa-chevron-down ml-1 text-xs"></i>
58
- </button>
59
- <div class="dropdown-menu absolute left-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50">
60
- <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-blue-50">Blog</a>
61
- <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-blue-50">FAQ</a>
62
- <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-blue-50">Contato</a>
63
- </div>
64
- </div>
65
- </nav>
66
-
67
- <div class="hidden md:flex items-center space-x-4">
68
- <a href="#" class="px-4 py-2 text-blue-600 font-medium hover:bg-blue-50 rounded-md transition">Login</a>
69
- <a href="#" class="px-4 py-2 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 transition">Cadastre-se</a>
70
- </div>
71
-
72
- <!-- Mobile Menu Button -->
73
- <button id="mobile-menu-button" class="md:hidden text-gray-600 focus:outline-none">
74
- <i class="fas fa-bars text-2xl"></i>
75
- </button>
76
- </div>
77
-
78
- <!-- Mobile Navigation -->
79
- <div id="mobile-menu" class="mobile-menu md:hidden bg-white border-t">
80
- <div class="container mx-auto px-4 py-2 flex flex-col space-y-2">
81
- <a href="#home" class="px-4 py-3 text-blue-600 font-medium">Início</a>
82
- <a href="#features" class="px-4 py-3 text-gray-600">Recursos</a>
83
- <a href="#pricing" class="px-4 py-3 text-gray-600">Planos</a>
84
- <a href="#about" class="px-4 py-3 text-gray-600">Sobre</a>
85
- <a href="#" class="px-4 py-3 text-gray-600">Blog</a>
86
- <a href="#" class="px-4 py-3 text-gray-600">FAQ</a>
87
- <a href="#" class="px-4 py-3 text-gray-600">Contato</a>
88
- <div class="border-t my-2"></div>
89
- <a href="#" class="px-4 py-3 text-blue-600 font-medium text-center">Login</a>
90
- <a href="#" class="px-4 py-3 bg-blue-600 text-white font-medium rounded-md text-center hover:bg-blue-700 transition">Cadastre-se</a>
91
  </div>
92
  </div>
93
  </header>
94
 
95
- <!-- Hero Section -->
96
- <section id="home" class="gradient-bg text-white py-20">
97
- <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
98
- <div class="md:w-1/2 mb-10 md:mb-0">
99
- <h1 class="text-4xl md:text-5xl font-bold mb-6">Compartilhe arquivos de forma rápida e segura</h1>
100
- <p class="text-xl mb-8 opacity-90">O BRShare permite que você envie arquivos grandes com segurança, privacidade e sem complicações.</p>
101
- <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
102
- <a href="#" class="px-6 py-3 bg-white text-blue-600 font-bold rounded-md hover:bg-gray-100 transition text-center">Comece agora - é grátis</a>
103
- <a href="#" class="px-6 py-3 border border-white text-white font-bold rounded-md hover:bg-white hover:bg-opacity-10 transition flex items-center justify-center">
104
- <i class="fas fa-play mr-2"></i> Ver demonstração
105
- </a>
106
- </div>
107
- <div class="mt-8 flex items-center space-x-4">
108
- <div class="flex -space-x-2">
109
- <img src="https://randomuser.me/api/portraits/women/12.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="User">
110
- <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="User">
111
- <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="User">
112
- </div>
113
- <p class="text-sm opacity-80">Junte-se a mais de 50.000 usuários satisfeitos</p>
114
- </div>
115
- </div>
116
- <div class="md:w-1/2 flex justify-center">
117
- <div class="bg-white rounded-xl shadow-2xl p-6 w-full max-w-md">
118
- <div class="flex justify-between items-center mb-6">
119
- <h3 class="text-xl font-bold text-gray-800">Upload de Arquivos</h3>
120
- <button class="text-gray-500 hover:text-gray-700">
121
- <i class="fas fa-times"></i>
122
- </button>
123
- </div>
124
-
125
- <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center mb-6 cursor-pointer hover:border-blue-400 transition">
126
- <i class="fas fa-cloud-upload-alt text-4xl text-blue-500 mb-3"></i>
127
- <p class="text-gray-600 mb-2">Arraste e solte arquivos aqui</p>
128
- <p class="text-sm text-gray-500">ou clique para selecionar</p>
129
  </div>
130
 
131
- <div class="mb-6">
132
- <div class="flex justify-between text-sm text-gray-600 mb-1">
133
- <span>Arquivo-exemplo.pdf</span>
134
- <span>75%</span>
135
- </div>
136
- <div class="w-full bg-gray-200 rounded-full h-2">
137
- <div class="progress-bar bg-blue-500 h-2 rounded-full" style="width: 75%"></div>
 
 
 
138
  </div>
139
- </div>
140
-
141
- <div class="flex justify-between text-sm text-gray-600 mb-6">
142
  <div>
143
- <i class="fas fa-lock mr-1"></i>
144
- <span>Protegido</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
145
  </div>
 
146
  <div>
147
- <i class="fas fa-clock mr-1"></i>
148
- <span>Expira em 7 dias</span>
 
 
149
  </div>
150
- </div>
151
-
152
- <button class="w-full py-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition flex items-center justify-center">
153
- <i class="fas fa-paper-plane mr-2"></i> Enviar arquivo
154
- </button>
155
- </div>
156
- </div>
157
- </div>
158
- </section>
159
 
160
- <!-- Trusted By Section -->
161
- <section class="bg-gray-100 py-12">
162
- <div class="container mx-auto px-4">
163
- <p class="text-center text-gray-500 mb-8">Confiança de empresas em todo o mundo</p>
164
- <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16">
165
- <img src="https://via.placeholder.com/120x40?text=Company+1" alt="Company Logo" class="h-8 opacity-60 hover:opacity-100 transition">
166
- <img src="https://via.placeholder.com/120x40?text=Company+2" alt="Company Logo" class="h-8 opacity-60 hover:opacity-100 transition">
167
- <img src="https://via.placeholder.com/120x40?text=Company+3" alt="Company Logo" class="h-10 opacity-60 hover:opacity-100 transition">
168
- <img src="https://via.placeholder.com/120x40?text=Company+4" alt="Company Logo" class="h-8 opacity-60 hover:opacity-100 transition">
169
- <img src="https://via.placeholder.com/120x40?text=Company+5" alt="Company Logo" class="h-8 opacity-60 hover:opacity-100 transition">
170
- </div>
171
- </div>
172
- </section>
173
 
174
- <!-- Features Section -->
175
- <section id="features" class="py-20">
176
- <div class="container mx-auto px-4">
177
- <div class="text-center mb-16">
178
- <h2 class="text-3xl md:text-4xl font-bold mb-4">Recursos poderosos para suas necessidades</h2>
179
- <p class="text-xl text-gray-600 max-w-3xl mx-auto">O BRShare oferece tudo que você precisa para compartilhar arquivos com segurança e eficiência</p>
180
- </div>
181
-
182
- <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
183
- <!-- Feature 1 -->
184
- <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition">
185
- <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-6">
186
- <i class="fas fa-shield-alt text-blue-600 text-2xl"></i>
187
- </div>
188
- <h3 class="text-xl font-bold mb-3">Segurança avançada</h3>
189
- <p class="text-gray-600">Todos os arquivos são criptografados com padrão AES-256 e protegidos contra acesso não autorizado.</p>
190
- </div>
191
-
192
- <!-- Feature 2 -->
193
- <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition">
194
- <div class="w-14 h-14 bg-purple-100 rounded-full flex items-center justify-center mb-6">
195
- <i class="fas fa-bolt text-purple-600 text-2xl"></i>
196
- </div>
197
- <h3 class="text-xl font-bold mb-3">Velocidade ultrarrápida</h3>
198
- <p class="text-gray-600">Nossa rede global de servidores garante transferências rápidas, não importa onde você esteja.</p>
199
- </div>
200
-
201
- <!-- Feature 3 -->
202
- <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition">
203
- <div class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mb-6">
204
- <i class="fas fa-expand text-green-600 text-2xl"></i>
205
  </div>
206
- <h3 class="text-xl font-bold mb-3">Arquivos grandes</h3>
207
- <p class="text-gray-600">Envie arquivos de até 20GB com um único link, sem necessidade de compactação ou divisão.</p>
208
- </div>
209
-
210
- <!-- Feature 4 -->
211
- <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition">
212
- <div class="w-14 h-14 bg-yellow-100 rounded-full flex items-center justify-center mb-6">
213
- <i class="fas fa-calendar-alt text-yellow-600 text-2xl"></i>
214
  </div>
215
- <h3 class="text-xl font-bold mb-3">Links expiráveis</h3>
216
- <p class="text-gray-600">Defina prazos de expiração para seus links ou limite o número de downloads para maior controle.</p>
217
  </div>
218
 
219
- <!-- Feature 5 -->
220
- <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition">
221
- <div class="w-14 h-14 bg-red-100 rounded-full flex items-center justify-center mb-6">
222
- <i class="fas fa-eye-slash text-red-600 text-2xl"></i>
223
- </div>
224
- <h3 class="text-xl font-bold mb-3">Privacidade total</h3>
225
- <p class="text-gray-600">Seus arquivos nunca são escaneados ou indexados. Você tem controle total sobre quem acessa.</p>
226
- </div>
227
-
228
- <!-- Feature 6 -->
229
- <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition">
230
- <div class="w-14 h-14 bg-indigo-100 rounded-full flex items-center justify-center mb-6">
231
- <i class="fas fa-chart-line text-indigo-600 text-2xl"></i>
232
- </div>
233
- <h3 class="text-xl font-bold mb-3">Estatísticas detalhadas</h3>
234
- <p class="text-gray-600">Acompanhe downloads, visualizações e atividades em tempo real com nosso painel analítico.</p>
235
  </div>
236
  </div>
237
  </div>
238
- </section>
239
 
240
- <!-- How It Works Section -->
241
- <section class="py-20 bg-gray-50">
242
- <div class="container mx-auto px-4">
243
- <div class="text-center mb-16">
244
- <h2 class="text-3xl md:text-4xl font-bold mb-4">Como funciona</h2>
245
- <p class="text-xl text-gray-600 max-w-3xl mx-auto">Compartilhar arquivos nunca foi tão fácil. Veja como começar em 3 passos simples</p>
246
- </div>
247
-
248
- <div class="grid md:grid-cols-3 gap-8">
249
- <!-- Step 1 -->
250
- <div class="text-center">
251
- <div class="w-20 h-20 bg-blue-600 text-white rounded-full flex items-center justify-center text-2xl font-bold mx-auto mb-6">1</div>
252
- <h3 class="text-xl font-bold mb-3">Envie seus arquivos</h3>
253
- <p class="text-gray-600">Arraste e solte ou selecione os arquivos que deseja compartilhar. Você pode enviar múltiplos arquivos de uma vez.</p>
254
- </div>
255
-
256
- <!-- Step 2 -->
257
- <div class="text-center">
258
- <div class="w-20 h-20 bg-blue-600 text-white rounded-full flex items-center justify-center text-2xl font-bold mx-auto mb-6">2</div>
259
- <h3 class="text-xl font-bold mb-3">Configure as opções</h3>
260
- <p class="text-gray-600">Defina senha, data de expiração ou limite de downloads para maior segurança e controle.</p>
261
- </div>
262
-
263
- <!-- Step 3 -->
264
- <div class="text-center">
265
- <div class="w-20 h-20 bg-blue-600 text-white rounded-full flex items-center justify-center text-2xl font-bold mx-auto mb-6">3</div>
266
- <h3 class="text-xl font-bold mb-3">Compartilhe o link</h3>
267
- <p class="text-gray-600">Copie o link gerado e compartilhe com quem quiser via email, mensagem ou qualquer outro meio.</p>
268
- </div>
269
- </div>
270
-
271
- <div class="mt-16 text-center">
272
- <a href="#" class="px-8 py-3 bg-blue-600 text-white font-bold rounded-md hover:bg-blue-700 transition inline-flex items-center">
273
- <i class="fas fa-play mr-2"></i> Ver demonstração
274
- </a>
275
- </div>
276
- </div>
277
- </section>
278
-
279
- <!-- Pricing Section -->
280
- <section id="pricing" class="py-20">
281
- <div class="container mx-auto px-4">
282
- <div class="text-center mb-16">
283
- <h2 class="text-3xl md:text-4xl font-bold mb-4">Planos acessíveis para todos</h2>
284
- <p class="text-xl text-gray-600 max-w-3xl mx-auto">Escolha o plano que melhor atende às suas necessidades</p>
285
- </div>
286
-
287
- <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
288
- <!-- Free Plan -->
289
- <div class="bg-white rounded-xl shadow-sm overflow-hidden border border-gray-200">
290
- <div class="p-8">
291
- <h3 class="text-2xl font-bold mb-2">Grátis</h3>
292
- <p class="text-gray-600 mb-6">Ideal para uso pessoal ocasional</p>
293
- <div class="mb-6">
294
- <span class="text-4xl font-bold">R$0</span>
295
- <span class="text-gray-500">/mês</span>
296
- </div>
297
- <a href="#" class="block w-full py-3 border border-blue-600 text-blue-600 font-medium rounded-md hover:bg-blue-50 transition text-center">Começar agora</a>
298
  </div>
299
- <div class="border-t border-gray-200 p-8 bg-gray-50">
300
- <ul class="space-y-3">
301
- <li class="flex items-center">
302
- <i class="fas fa-check text-green-500 mr-2"></i>
303
- <span>2GB de armazenamento</span>
304
- </li>
305
- <li class="flex items-center">
306
- <i class="fas fa-check text-green-500 mr-2"></i>
307
- <span>Arquivos até 500MB</span>
308
- </li>
309
- <li class="flex items-center">
310
- <i class="fas fa-check text-green-500 mr-2"></i>
311
- <span>Links expiram em 7 dias</span>
312
- </li>
313
- <li class="flex items-center text-gray-400">
314
- <i class="fas fa-times mr-2"></i>
315
- <span>Sem estatísticas avançadas</span>
316
- </li>
317
- <li class="flex items-center text-gray-400">
318
- <i class="fas fa-times mr-2"></i>
319
- <span>Sem proteção por senha</span>
320
- </li>
321
- </ul>
322
- </div>
323
- </div>
324
-
325
- <!-- Pro Plan -->
326
- <div class="bg-white rounded-xl shadow-lg overflow-hidden border-2 border-blue-600 relative">
327
- <div class="absolute top-0 right-0 bg-blue-600 text-white text-xs font-bold px-3 py-1 rounded-bl-lg">MAIS POPULAR</div>
328
- <div class="p-8">
329
- <h3 class="text-2xl font-bold mb-2">Profissional</h3>
330
- <p class="text-gray-600 mb-6">Perfeito para freelancers e pequenas equipes</p>
331
- <div class="mb-6">
332
- <span class="text-4xl font-bold">R$29</span>
333
- <span class="text-gray-500">/mês</span>
334
  </div>
335
- <a href="#" class="block w-full py-3 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 transition text-center">Assinar agora</a>
336
- </div>
337
- <div class="border-t border-gray-200 p-8 bg-gray-50">
338
- <ul class="space-y-3">
339
- <li class="flex items-center">
340
- <i class="fas fa-check text-green-500 mr-2"></i>
341
- <span>100GB de armazenamento</span>
342
- </li>
343
- <li class="flex items-center">
344
- <i class="fas fa-check text-green-500 mr-2"></i>
345
- <span>Arquivos até 5GB</span>
346
- </li>
347
- <li class="flex items-center">
348
- <i class="fas fa-check text-green-500 mr-2"></i>
349
- <span>Links expiram em 30 dias</span>
350
- </li>
351
- <li class="flex items-center">
352
- <i class="fas fa-check text-green-500 mr-2"></i>
353
- <span>Estatísticas avançadas</span>
354
- </li>
355
- <li class="flex items-center">
356
- <i class="fas fa-check text-green-500 mr-2"></i>
357
- <span>Proteção por senha</span>
358
- </li>
359
- </ul>
360
- </div>
361
- </div>
362
-
363
- <!-- Business Plan -->
364
- <div class="bg-white rounded-xl shadow-sm overflow-hidden border border-gray-200">
365
- <div class="p-8">
366
- <h3 class="text-2xl font-bold mb-2">Empresarial</h3>
367
- <p class="text-gray-600 mb-6">Para empresas com necessidades avançadas</p>
368
- <div class="mb-6">
369
- <span class="text-4xl font-bold">R$99</span>
370
- <span class="text-gray-500">/mês</span>
371
  </div>
372
- <a href="#" class="block w-full py-3 border border-blue-600 text-blue-600 font-medium rounded-md hover:bg-blue-50 transition text-center">Assinar agora</a>
373
- </div>
374
- <div class="border-t border-gray-200 p-8 bg-gray-50">
375
- <ul class="space-y-3">
376
- <li class="flex items-center">
377
- <i class="fas fa-check text-green-500 mr-2"></i>
378
- <span>1TB de armazenamento</span>
379
- </li>
380
- <li class="flex items-center">
381
- <i class="fas fa-check text-green-500 mr-2"></i>
382
- <span>Arquivos até 20GB</span>
383
- </li>
384
- <li class="flex items-center">
385
- <i class="fas fa-check text-green-500 mr-2"></i>
386
- <span>Links nunca expiram</span>
387
- </li>
388
- <li class="flex items-center">
389
- <i class="fas fa-check text-green-500 mr-2"></i>
390
- <span>Estatísticas completas</span>
391
- </li>
392
- <li class="flex items-center">
393
- <i class="fas fa-check text-green-500 mr-2"></i>
394
- <span>Suporte prioritário 24/7</span>
395
- </li>
396
- </ul>
397
- </div>
398
- </div>
399
- </div>
400
-
401
- <div class="mt-12 text-center">
402
- <p class="text-gray-600 mb-4">Precisa de um plano personalizado para sua empresa?</p>
403
- <a href="#" class="text-blue-600 font-medium hover:underline">Fale com nossa equipe de vendas</a>
404
- </div>
405
- </div>
406
- </section>
407
 
408
- <!-- Testimonials Section -->
409
- <section class="py-20 bg-gray-50">
410
- <div class="container mx-auto px-4">
411
- <div class="text-center mb-16">
412
- <h2 class="text-3xl md:text-4xl font-bold mb-4">O que nossos clientes dizem</h2>
413
- <p class="text-xl text-gray-600 max-w-3xl mx-auto">Milhares de profissionais e empresas confiam no BRShare diariamente</p>
414
- </div>
415
-
416
- <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
417
- <!-- Testimonial 1 -->
418
- <div class="bg-white p-8 rounded-xl shadow-sm">
419
- <div class="flex items-center mb-6">
420
- <img src="https://randomuser.me/api/portraits/women/32.jpg" class="w-12 h-12 rounded-full mr-4" alt="User">
421
  <div>
422
- <h4 class="font-bold">Ana Carolina</h4>
423
- <p class="text-gray-600 text-sm">Designer Freelancer</p>
 
 
 
 
 
 
 
 
 
 
 
 
424
  </div>
425
- </div>
426
- <p class="text-gray-700 mb-4">"Como designer, preciso enviar arquivos grandes para clientes constantemente. O BRShare simplificou meu fluxo de trabalho e me deu mais profissionalismo."</p>
427
- <div class="flex text-yellow-400">
428
- <i class="fas fa-star"></i>
429
- <i class="fas fa-star"></i>
430
- <i class="fas fa-star"></i>
431
- <i class="fas fa-star"></i>
432
- <i class="fas fa-star"></i>
433
- </div>
434
- </div>
435
-
436
- <!-- Testimonial 2 -->
437
- <div class="bg-white p-8 rounded-xl shadow-sm">
438
- <div class="flex items-center mb-6">
439
- <img src="https://randomuser.me/api/portraits/men/54.jpg" class="w-12 h-12 rounded-full mr-4" alt="User">
440
  <div>
441
- <h4 class="font-bold">Ricardo Almeida</h4>
442
- <p class="text-gray-600 text-sm">Gerente de TI</p>
 
 
 
 
 
 
 
 
 
 
 
443
  </div>
444
- </div>
445
- <p class="text-gray-700 mb-4">"Implementamos o BRShare em nossa empresa e reduzimos em 80% o uso de pendrives e emails com anexos. A segurança dos dados foi o fator decisivo."</p>
446
- <div class="flex text-yellow-400">
447
- <i class="fas fa-star"></i>
448
- <i class="fas fa-star"></i>
449
- <i class="fas fa-star"></i>
450
- <i class="fas fa-star"></i>
451
- <i class="fas fa-star-half-alt"></i>
452
- </div>
453
- </div>
454
-
455
- <!-- Testimonial 3 -->
456
- <div class="bg-white p-8 rounded-xl shadow-sm">
457
- <div class="flex items-center mb-6">
458
- <img src="https://randomuser.me/api/portraits/women/68.jpg" class="w-12 h-12 rounded-full mr-4" alt="User">
459
  <div>
460
- <h4 class="font-bold">Juliana Santos</h4>
461
- <p class="text-gray-600 text-sm">Professora Universitária</p>
 
 
462
  </div>
463
- </div>
464
- <p class="text-gray-700 mb-4">"Uso o BRShare para compartilhar materiais com meus alunos. A possibilidade de definir senhas e prazos de expiração é perfeita para meu uso acadêmico."</p>
465
- <div class="flex text-yellow-400">
466
- <i class="fas fa-star"></i>
467
- <i class="fas fa-star"></i>
468
- <i class="fas fa-star"></i>
469
- <i class="fas fa-star"></i>
470
- <i class="fas fa-star"></i>
471
- </div>
472
- </div>
473
- </div>
474
- </div>
475
- </section>
476
 
477
- <!-- CTA Section -->
478
- <section class="py-20 gradient-bg text-white">
479
- <div class="container mx-auto px-4 text-center">
480
- <h2 class="text-3xl md:text-4xl font-bold mb-6">Pronto para começar?</h2>
481
- <p class="text-xl mb-8 max-w-2xl mx-auto">Junte-se a milhares de usuários satisfeitos e compartilhe seus arquivos com segurança hoje mesmo.</p>
482
- <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
483
- <a href="#" class="px-8 py-3 bg-white text-blue-600 font-bold rounded-md hover:bg-gray-100 transition">Criar conta gratuita</a>
484
- <a href="#" class="px-8 py-3 border border-white text-white font-bold rounded-md hover:bg-white hover:bg-opacity-10 transition">Fale com vendas</a>
485
- </div>
486
- </div>
487
- </section>
488
 
489
- <!-- FAQ Section -->
490
- <section id="about" class="py-20">
491
- <div class="container mx-auto px-4">
492
- <div class="text-center mb-16">
493
- <h2 class="text-3xl md:text-4xl font-bold mb-4">Perguntas frequentes</h2>
494
- <p class="text-xl text-gray-600 max-w-3xl mx-auto">Tire suas dúvidas sobre o BRShare</p>
495
- </div>
496
-
497
- <div class="max-w-3xl mx-auto">
498
- <!-- FAQ Item 1 -->
499
- <div class="mb-6 border-b border-gray-200 pb-6">
500
- <button class="faq-question flex justify-between items-center w-full text-left font-bold text-lg focus:outline-none">
501
- <span>O BRShare é realmente gratuito?</span>
502
- <i class="fas fa-plus text-blue-600"></i>
503
- </button>
504
- <div class="faq-answer mt-3 text-gray-600 hidden">
505
- <p>Sim, oferecemos um plano gratuito que permite enviar arquivos de até 500MB com links que expiram em 7 dias. Para recursos avançados como armazenamento maior, prazos mais longos e estatísticas, oferecemos planos pagos com preços acessíveis.</p>
506
- </div>
507
- </div>
508
-
509
- <!-- FAQ Item 2 -->
510
- <div class="mb-6 border-b border-gray-200 pb-6">
511
- <button class="faq-question flex justify-between items-center w-full text-left font-bold text-lg focus:outline-none">
512
- <span>Meus arquivos estão seguros no BRShare?</span>
513
- <i class="fas fa-plus text-blue-600"></i>
514
- </button>
515
- <div class="faq-answer mt-3 text-gray-600 hidden">
516
- <p>Absolutamente. Todos os arquivos são criptografados com padrão AES-256, o mesmo usado por bancos e instituições governamentais. Além disso, oferecemos opções adicionais de segurança como proteção por senha e links expiráveis para maior controle sobre seus dados.</p>
517
- </div>
518
- </div>
519
-
520
- <!-- FAQ Item 3 -->
521
- <div class="mb-6 border-b border-gray-200 pb-6">
522
- <button class="faq-question flex justify-between items-center w-full text-left font-bold text-lg focus:outline-none">
523
- <span>Qual é o tamanho máximo de arquivo que posso enviar?</span>
524
- <i class="fas fa-plus text-blue-600"></i>
525
- </button>
526
- <div class="faq-answer mt-3 text-gray-600 hidden">
527
- <p>No plano gratuito, o limite é de 500MB por arquivo. Nos planos Profissional e Empresarial, você pode enviar arquivos de até 5GB e 20GB respectivamente. Não há limites no número de arquivos que você pode enviar, apenas no tamanho individual de cada um.</p>
528
  </div>
529
- </div>
530
-
531
- <!-- FAQ Item 4 -->
532
- <div class="mb-6 border-b border-gray-200 pb-6">
533
- <button class="faq-question flex justify-between items-center w-full text-left font-bold text-lg focus:outline-none">
534
- <span>Posso cancelar minha assinatura a qualquer momento?</span>
535
- <i class="fas fa-plus text-blue-600"></i>
536
- </button>
537
- <div class="faq-answer mt-3 text-gray-600 hidden">
538
- <p>Sim, você pode cancelar sua assinatura a qualquer momento sem taxas ou penalidades. Se cancelar, você continuará tendo acesso aos recursos pagos até o final do período já pago, quando então sua conta será rebaixada para o plano gratuito.</p>
539
  </div>
540
  </div>
541
 
542
- <!-- FAQ Item 5 -->
543
- <div class="mb-6 border-b border-gray-200 pb-6">
544
- <button class="faq-question flex justify-between items-center w-full text-left font-bold text-lg focus:outline-none">
545
- <span>O BRShare funciona em dispositivos móveis?</span>
546
- <i class="fas fa-plus text-blue-600"></i>
547
- </button>
548
- <div class="faq-answer mt-3 text-gray-600 hidden">
549
- <p>Sim, nosso site é totalmente responsivo e funciona perfeitamente em smartphones e tablets. Além disso, estamos desenvolvendo aplicativos nativos para iOS e Android que serão lançados em breve, oferecendo uma experiência ainda melhor para usuários móveis.</p>
550
- </div>
551
  </div>
552
  </div>
553
-
554
- <div class="mt-12 text-center">
555
- <p class="text-gray-600 mb-4">Não encontrou sua dúvida aqui?</p>
556
- <a href="#" class="text-blue-600 font-medium hover:underline">Entre em contato com nosso suporte</a>
557
- </div>
558
  </div>
559
- </section>
560
 
561
  <!-- Footer -->
562
- <footer class="bg-gray-900 text-white pt-16 pb-8">
563
  <div class="container mx-auto px-4">
564
- <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12">
565
- <!-- Column 1 -->
566
- <div>
567
- <div class="flex items-center space-x-2 mb-6">
568
- <i class="fas fa-share-alt text-blue-400 text-2xl"></i>
569
- <span class="text-2xl font-bold">BRShare</span>
570
- </div>
571
- <p class="text-gray-400 mb-6">Compartilhamento de arquivos seguro, rápido e fácil para pessoas e empresas.</p>
572
- <div class="flex space-x-4">
573
- <a href="#" class="text-gray-400 hover:text-white transition">
574
- <i class="fab fa-facebook-f"></i>
575
- </a>
576
- <a href="#" class="text-gray-400 hover:text-white transition">
577
- <i class="fab fa-twitter"></i>
578
- </a>
579
- <a href="#" class="text-gray-400 hover:text-white transition">
580
- <i class="fab fa-linkedin-in"></i>
581
- </a>
582
- <a href="#" class="text-gray-400 hover:text-white transition">
583
- <i class="fab fa-instagram"></i>
584
- </a>
585
- </div>
586
  </div>
587
 
588
- <!-- Column 2 -->
589
- <div>
590
- <h4 class="text-lg font-bold mb-6">Produto</h4>
591
- <ul class="space-y-3">
592
- <li><a href="#" class="text-gray-400 hover:text-white transition">Recursos</a></li>
593
- <li><a href="#" class="text-gray-400 hover:text-white transition">Planos</a></li>
594
- <li><a href="#" class="text-gray-400 hover:text-white transition">Demonstração</a></li>
595
- <li><a href="#" class="text-gray-400 hover:text-white transition">Atualizações</a></li>
596
- <li><a href="#" class="text-gray-400 hover:text-white transition">API</a></li>
597
- </ul>
598
- </div>
599
-
600
- <!-- Column 3 -->
601
- <div>
602
- <h4 class="text-lg font-bold mb-6">Suporte</h4>
603
- <ul class="space-y-3">
604
- <li><a href="#" class="text-gray-400 hover:text-white transition">Central de Ajuda</a></li>
605
- <li><a href="#" class="text-gray-400 hover:text-white transition">Documentação</a></li>
606
- <li><a href="#" class="text-gray-400 hover:text-white transition">Tutoriais</a></li>
607
- <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
608
- <li><a href="#" class="text-gray-400 hover:text-white transition">Status</a></li>
609
- </ul>
610
- </div>
611
-
612
- <!-- Column 4 -->
613
- <div>
614
- <h4 class="text-lg font-bold mb-6">Empresa</h4>
615
- <ul class="space-y-3">
616
- <li><a href="#" class="text-gray-400 hover:text-white transition">Sobre nós</a></li>
617
- <li><a href="#" class="text-gray-400 hover:text-white transition">Carreiras</a></li>
618
- <li><a href="#" class="text-gray-400 hover:text-white transition">Privacidade</a></li>
619
- <li><a href="#" class="text-gray-400 hover:text-white transition">Termos</a></li>
620
- <li><a href="#" class="text-gray-400 hover:text-white transition">Contato</a></li>
621
- </ul>
622
  </div>
623
  </div>
624
 
625
- <div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
626
- <p class="text-gray-400 mb-4 md:mb-0">© 2023 BRShare. Todos os direitos reservados.</p>
627
- <div class="flex space-x-6">
628
- <a href="#" class="text-gray-400 hover:text-white transition">Termos de serviço</a>
629
- <a href="#" class="text-gray-400 hover:text-white transition">Política de privacidade</a>
630
- <a href="#" class="text-gray-400 hover:text-white transition">Cookies</a>
631
- </div>
632
  </div>
633
  </div>
634
  </footer>
635
 
636
  <script>
637
- // Mobile Menu Toggle
638
- document.getElementById('mobile-menu-button').addEventListener('click', function() {
639
- const menu = document.getElementById('mobile-menu');
640
- menu.classList.toggle('open');
641
 
642
- // Change icon
643
- const icon = this.querySelector('i');
644
- if (menu.classList.contains('open')) {
645
- icon.classList.remove('fa-bars');
646
- icon.classList.add('fa-times');
647
  } else {
648
- icon.classList.remove('fa-times');
649
- icon.classList.add('fa-bars');
 
650
  }
651
  });
652
 
653
- // FAQ Accordion
654
- const faqQuestions = document.querySelectorAll('.faq-question');
655
- faqQuestions.forEach(question => {
656
- question.addEventListener('click', function() {
657
- const answer = this.nextElementSibling;
658
- const icon = this.querySelector('i');
659
-
660
- // Toggle answer
661
- answer.classList.toggle('hidden');
662
-
663
- // Toggle icon
664
- if (answer.classList.contains('hidden')) {
665
- icon.classList.remove('fa-minus');
666
- icon.classList.add('fa-plus');
667
- } else {
668
- icon.classList.remove('fa-plus');
669
- icon.classList.add('fa-minus');
670
- }
671
-
672
- // Close other open answers
673
- faqQuestions.forEach(q => {
674
- if (q !== this) {
675
- q.nextElementSibling.classList.add('hidden');
676
- q.querySelector('i').classList.remove('fa-minus');
677
- q.querySelector('i').classList.add('fa-plus');
678
- }
679
- });
680
- });
681
  });
682
 
683
- // Smooth scrolling for anchor links
684
- document.querySelectorAll('a[href^="#"]').forEach(anchor => {
685
- anchor.addEventListener('click', function(e) {
686
- e.preventDefault();
687
-
688
- const targetId = this.getAttribute('href');
689
- if (targetId === '#') return;
690
-
691
- const targetElement = document.querySelector(targetId);
692
- if (targetElement) {
693
- // Close mobile menu if open
694
- const mobileMenu = document.getElementById('mobile-menu');
695
- if (mobileMenu.classList.contains('open')) {
696
- mobileMenu.classList.remove('open');
697
- document.getElementById('mobile-menu-button').querySelector('i').classList.remove('fa-times');
698
- document.getElementById('mobile-menu-button').querySelector('i').classList.add('fa-bars');
 
 
 
 
 
 
 
 
 
 
 
 
699
  }
700
 
701
- // Scroll to target
702
- window.scrollTo({
703
- top: targetElement.offsetTop - 80,
704
- behavior: 'smooth'
705
- });
706
  }
 
 
 
 
 
 
 
707
  });
708
  });
709
 
710
- // File upload simulation
711
- const uploadArea = document.querySelector('.border-dashed');
712
- if (uploadArea) {
713
- uploadArea.addEventListener('click', function() {
714
- // Simulate file selection
715
- const progressBar = document.querySelector('.progress-bar');
716
- let progress = 0;
717
- const interval = setInterval(() => {
718
- progress += 5;
719
- progressBar.style.width = `${progress}%`;
720
-
721
- if (progress >= 100) {
722
- clearInterval(interval);
723
- // Show success message
724
- alert('Arquivo enviado com sucesso! Link de compartilhamento copiado para a área de transferência.');
725
- }
726
- }, 100);
727
- });
728
- }
729
  </script>
730
  <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=tidotto/brshare" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
731
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>BRShare - Acesse sua conta</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>
 
11
  .gradient-bg {
12
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
13
  }
14
+ .auth-card {
15
+ transition: all 0.3s ease;
16
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
17
  }
18
+ .auth-card:hover {
19
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
20
  }
21
+ .input-field:focus {
22
+ border-color: #3b82f6;
23
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
 
24
  }
25
+ .toggle-forms {
26
+ display: none;
 
27
  }
28
+ #loginForm:target ~ #registerContainer,
29
+ #registerForm:target ~ #loginContainer {
30
+ display: none;
 
31
  }
32
+ #loginForm:target ~ #loginContainer,
33
+ #registerForm:target ~ #registerContainer {
34
+ display: flex;
35
  }
36
  </style>
37
  </head>
38
+ <body class="font-sans bg-gray-50 text-gray-800 min-h-screen flex flex-col">
39
  <!-- Header/Navbar -->
40
  <header class="bg-white shadow-sm sticky top-0 z-50">
41
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
42
  <div class="flex items-center space-x-2">
43
  <i class="fas fa-share-alt text-blue-600 text-2xl"></i>
44
+ <a href="index.html" class="text-2xl font-bold text-blue-600">BRShare</a>
45
  </div>
46
 
47
+ <div class="flex items-center space-x-4">
48
+ <a href="index.html" class="px-4 py-2 text-gray-600 hover:text-blue-600 transition">Voltar ao site</a>
49
+ <a href="#registerForm" class="px-4 py-2 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 transition">Criar conta</a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
50
  </div>
51
  </div>
52
  </header>
53
 
54
+ <!-- Main Content -->
55
+ <main class="flex-grow">
56
+ <!-- Anchor targets for form toggling -->
57
+ <div id="loginForm"></div>
58
+ <div id="registerForm"></div>
59
+
60
+ <!-- Login Container (shown by default) -->
61
+ <div id="loginContainer" class="flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
62
+ <div class="w-full max-w-md">
63
+ <div class="auth-card bg-white py-8 px-6 rounded-xl">
64
+ <div class="text-center mb-8">
65
+ <i class="fas fa-share-alt text-blue-600 text-5xl mb-4"></i>
66
+ <h2 class="text-3xl font-bold text-gray-900">Acesse sua conta</h2>
67
+ <p class="text-gray-600 mt-2">Entre para compartilhar seus arquivos</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
68
  </div>
69
 
70
+ <form class="space-y-6" action="#" method="POST">
71
+ <div>
72
+ <label for="email" class="block text-sm font-medium text-gray-700">E-mail</label>
73
+ <div class="mt-1 relative rounded-md shadow-sm">
74
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
75
+ <i class="fas fa-envelope text-gray-400"></i>
76
+ </div>
77
+ <input id="email" name="email" type="email" autocomplete="email" required
78
+ class="input-field py-3 pl-10 block w-full border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
79
+ </div>
80
  </div>
81
+
 
 
82
  <div>
83
+ <label for="password" class="block text-sm font-medium text-gray-700">Senha</label>
84
+ <div class="mt-1 relative rounded-md shadow-sm">
85
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
86
+ <i class="fas fa-lock text-gray-400"></i>
87
+ </div>
88
+ <input id="password" name="password" type="password" autocomplete="current-password" required
89
+ class="input-field py-3 pl-10 block w-full border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
90
+ <div class="absolute inset-y-0 right-0 pr-3 flex items-center">
91
+ <button type="button" class="text-gray-400 hover:text-gray-500 focus:outline-none" id="togglePassword">
92
+ <i class="fas fa-eye" id="passwordIcon"></i>
93
+ </button>
94
+ </div>
95
+ </div>
96
+ </div>
97
+
98
+ <div class="flex items-center justify-between">
99
+ <div class="flex items-center">
100
+ <input id="remember-me" name="remember-me" type="checkbox"
101
+ class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
102
+ <label for="remember-me" class="ml-2 block text-sm text-gray-700">Lembrar de mim</label>
103
+ </div>
104
+
105
+ <div class="text-sm">
106
+ <a href="#" class="font-medium text-blue-600 hover:text-blue-500">Esqueceu sua senha?</a>
107
+ </div>
108
  </div>
109
+
110
  <div>
111
+ <button type="submit"
112
+ class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition">
113
+ Entrar
114
+ </button>
115
  </div>
116
+ </form>
 
 
 
 
 
 
 
 
117
 
118
+ <div class="mt-6">
119
+ <div class="relative">
120
+ <div class="absolute inset-0 flex items-center">
121
+ <div class="w-full border-t border-gray-300"></div>
122
+ </div>
123
+ <div class="relative flex justify-center text-sm">
124
+ <span class="px-2 bg-white text-gray-500">Ou continue com</span>
125
+ </div>
126
+ </div>
 
 
 
 
127
 
128
+ <div class="mt-6 grid grid-cols-3 gap-3">
129
+ <div>
130
+ <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
131
+ <i class="fab fa-google text-red-500"></i>
132
+ </a>
133
+ </div>
134
+ <div>
135
+ <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
136
+ <i class="fab fa-facebook-f text-blue-600"></i>
137
+ </a>
138
+ </div>
139
+ <div>
140
+ <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
141
+ <i class="fab fa-apple text-gray-900"></i>
142
+ </a>
143
+ </div>
144
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
145
  </div>
146
+
147
+ <div class="mt-6 text-center">
148
+ <p class="text-sm text-gray-600">
149
+ Não tem uma conta?
150
+ <a href="#registerForm" class="font-medium text-blue-600 hover:text-blue-500">Cadastre-se</a>
151
+ </p>
 
 
152
  </div>
 
 
153
  </div>
154
 
155
+ <div class="mt-6 text-center text-sm text-gray-600">
156
+ <p>Ao continuar, você concorda com nossos <a href="#" class="font-medium text-blue-600 hover:text-blue-500">Termos de Serviço</a> e <a href="#" class="font-medium text-blue-600 hover:text-blue-500">Política de Privacidade</a>.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
157
  </div>
158
  </div>
159
  </div>
 
160
 
161
+ <!-- Register Container (hidden by default) -->
162
+ <div id="registerContainer" class="hidden items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
163
+ <div class="w-full max-w-md">
164
+ <div class="auth-card bg-white py-8 px-6 rounded-xl">
165
+ <div class="text-center mb-8">
166
+ <i class="fas fa-user-plus text-blue-600 text-5xl mb-4"></i>
167
+ <h2 class="text-3xl font-bold text-gray-900">Crie sua conta</h2>
168
+ <p class="text-gray-600 mt-2">Comece a compartilhar arquivos em minutos</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
169
  </div>
170
+
171
+ <form class="space-y-6" action="#" method="POST">
172
+ <div>
173
+ <label for="full-name" class="block text-sm font-medium text-gray-700">Nome completo</label>
174
+ <div class="mt-1 relative rounded-md shadow-sm">
175
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
176
+ <i class="fas fa-user text-gray-400"></i>
177
+ </div>
178
+ <input id="full-name" name="full-name" type="text" autocomplete="name" required
179
+ class="input-field py-3 pl-10 block w-full border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
180
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
181
  </div>
182
+
183
+ <div>
184
+ <label for="email" class="block text-sm font-medium text-gray-700">E-mail</label>
185
+ <div class="mt-1 relative rounded-md shadow-sm">
186
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
187
+ <i class="fas fa-envelope text-gray-400"></i>
188
+ </div>
189
+ <input id="email" name="email" type="email" autocomplete="email" required
190
+ class="input-field py-3 pl-10 block w-full border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
191
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
192
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
193
 
 
 
 
 
 
 
 
 
 
 
 
 
 
194
  <div>
195
+ <label for="password" class="block text-sm font-medium text-gray-700">Senha</label>
196
+ <div class="mt-1 relative rounded-md shadow-sm">
197
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
198
+ <i class="fas fa-lock text-gray-400"></i>
199
+ </div>
200
+ <input id="password" name="password" type="password" autocomplete="new-password" required
201
+ class="input-field py-3 pl-10 block w-full border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
202
+ <div class="absolute inset-y-0 right-0 pr-3 flex items-center">
203
+ <button type="button" class="text-gray-400 hover:text-gray-500 focus:outline-none" id="toggleRegPassword">
204
+ <i class="fas fa-eye" id="regPasswordIcon"></i>
205
+ </button>
206
+ </div>
207
+ </div>
208
+ <p class="mt-2 text-xs text-gray-500">Mínimo de 8 caracteres com letras e números</p>
209
  </div>
210
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
211
  <div>
212
+ <label for="confirm-password" class="block text-sm font-medium text-gray-700">Confirme sua senha</label>
213
+ <div class="mt-1 relative rounded-md shadow-sm">
214
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
215
+ <i class="fas fa-lock text-gray-400"></i>
216
+ </div>
217
+ <input id="confirm-password" name="confirm-password" type="password" autocomplete="new-password" required
218
+ class="input-field py-3 pl-10 block w-full border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
219
+ <div class="absolute inset-y-0 right-0 pr-3 flex items-center">
220
+ <button type="button" class="text-gray-400 hover:text-gray-500 focus:outline-none" id="toggleConfirmPassword">
221
+ <i class="fas fa-eye" id="confirmPasswordIcon"></i>
222
+ </button>
223
+ </div>
224
+ </div>
225
  </div>
226
+
227
+ <div class="flex items-start">
228
+ <div class="flex items-center h-5">
229
+ <input id="terms" name="terms" type="checkbox"
230
+ class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded" required>
231
+ </div>
232
+ <div class="ml-3 text-sm">
233
+ <label for="terms" class="font-medium text-gray-700">Eu concordo com os</label>
234
+ <a href="#" class="text-blue-600 hover:text-blue-500"> Termos de Serviço</a> e <a href="#" class="text-blue-600 hover:text-blue-500">Política de Privacidade</a>
235
+ </div>
236
+ </div>
237
+
 
 
 
238
  <div>
239
+ <button type="submit"
240
+ class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition">
241
+ Criar conta
242
+ </button>
243
  </div>
244
+ </form>
 
 
 
 
 
 
 
 
 
 
 
 
245
 
246
+ <div class="mt-6">
247
+ <div class="relative">
248
+ <div class="absolute inset-0 flex items-center">
249
+ <div class="w-full border-t border-gray-300"></div>
250
+ </div>
251
+ <div class="relative flex justify-center text-sm">
252
+ <span class="px-2 bg-white text-gray-500">Ou cadastre-se com</span>
253
+ </div>
254
+ </div>
 
 
255
 
256
+ <div class="mt-6 grid grid-cols-3 gap-3">
257
+ <div>
258
+ <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
259
+ <i class="fab fa-google text-red-500"></i>
260
+ </a>
261
+ </div>
262
+ <div>
263
+ <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
264
+ <i class="fab fa-facebook-f text-blue-600"></i>
265
+ </a>
266
+ </div>
267
+ <div>
268
+ <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
269
+ <i class="fab fa-apple text-gray-900"></i>
270
+ </a>
271
+ </div>
272
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
273
  </div>
274
+
275
+ <div class="mt-6 text-center">
276
+ <p class="text-sm text-gray-600">
277
+ Já tem uma conta?
278
+ <a href="#loginForm" class="font-medium text-blue-600 hover:text-blue-500">Faça login</a>
279
+ </p>
 
 
 
 
280
  </div>
281
  </div>
282
 
283
+ <div class="mt-6 text-center text-sm text-gray-600">
284
+ <p>Seu cadastro está protegido por criptografia de ponta a ponta.</p>
 
 
 
 
 
 
 
285
  </div>
286
  </div>
 
 
 
 
 
287
  </div>
288
+ </main>
289
 
290
  <!-- Footer -->
291
+ <footer class="bg-gray-900 text-white py-8">
292
  <div class="container mx-auto px-4">
293
+ <div class="flex flex-col md:flex-row justify-between items-center">
294
+ <div class="flex items-center space-x-2 mb-4 md:mb-0">
295
+ <i class="fas fa-share-alt text-blue-400 text-xl"></i>
296
+ <span class="text-xl font-bold">BRShare</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
297
  </div>
298
 
299
+ <div class="flex space-x-6">
300
+ <a href="#" class="text-gray-400 hover:text-white transition">Termos</a>
301
+ <a href="#" class="text-gray-400 hover:text-white transition">Privacidade</a>
302
+ <a href="#" class="text-gray-400 hover:text-white transition">Segurança</a>
303
+ <a href="#" class="text-gray-400 hover:text-white transition">Contato</a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
304
  </div>
305
  </div>
306
 
307
+ <div class="mt-6 pt-6 border-t border-gray-800 text-center text-sm text-gray-400">
308
+ <p>© 2023 BRShare. Todos os direitos reservados.</p>
 
 
 
 
 
309
  </div>
310
  </div>
311
  </footer>
312
 
313
  <script>
314
+ // Toggle password visibility
315
+ document.getElementById('togglePassword').addEventListener('click', function() {
316
+ const passwordInput = document.getElementById('password');
317
+ const icon = document.getElementById('passwordIcon');
318
 
319
+ if (passwordInput.type === 'password') {
320
+ passwordInput.type = 'text';
321
+ icon.classList.remove('fa-eye');
322
+ icon.classList.add('fa-eye-slash');
 
323
  } else {
324
+ passwordInput.type = 'password';
325
+ icon.classList.remove('fa-eye-slash');
326
+ icon.classList.add('fa-eye');
327
  }
328
  });
329
 
330
+ // Toggle register password visibility
331
+ document.getElementById('toggleRegPassword').addEventListener('click', function() {
332
+ const passwordInput = document.getElementById('password');
333
+ const icon = document.getElementById('regPasswordIcon');
334
+
335
+ if (passwordInput.type === 'password') {
336
+ passwordInput.type = 'text';
337
+ icon.classList.remove('fa-eye');
338
+ icon.classList.add('fa-eye-slash');
339
+ } else {
340
+ passwordInput.type = 'password';
341
+ icon.classList.remove('fa-eye-slash');
342
+ icon.classList.add('fa-eye');
343
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
344
  });
345
 
346
+ // Toggle confirm password visibility
347
+ document.getElementById('toggleConfirmPassword').addEventListener('click', function() {
348
+ const passwordInput = document.getElementById('confirm-password');
349
+ const icon = document.getElementById('confirmPasswordIcon');
350
+
351
+ if (passwordInput.type === 'password') {
352
+ passwordInput.type = 'text';
353
+ icon.classList.remove('fa-eye');
354
+ icon.classList.add('fa-eye-slash');
355
+ } else {
356
+ passwordInput.type = 'password';
357
+ icon.classList.remove('fa-eye-slash');
358
+ icon.classList.add('fa-eye');
359
+ }
360
+ });
361
+
362
+ // Form validation
363
+ document.querySelectorAll('form').forEach(form => {
364
+ form.addEventListener('submit', function(e) {
365
+ // Check if passwords match in registration form
366
+ if (this.querySelector('#confirm-password')) {
367
+ const password = this.querySelector('#password').value;
368
+ const confirmPassword = this.querySelector('#confirm-password').value;
369
+
370
+ if (password !== confirmPassword) {
371
+ e.preventDefault();
372
+ alert('As senhas não coincidem. Por favor, verifique e tente novamente.');
373
+ return;
374
  }
375
 
376
+ if (password.length < 8) {
377
+ e.preventDefault();
378
+ alert('A senha deve ter pelo menos 8 caracteres.');
379
+ return;
380
+ }
381
  }
382
+
383
+ // Simulate form submission
384
+ e.preventDefault();
385
+ alert('Formulário enviado com sucesso! Redirecionando...');
386
+ setTimeout(() => {
387
+ window.location.href = 'index.html';
388
+ }, 1500);
389
  });
390
  });
391
 
392
+ // Check URL hash on page load to show correct form
393
+ window.addEventListener('load', function() {
394
+ if (window.location.hash === '#registerForm') {
395
+ document.getElementById('registerContainer').classList.remove('hidden');
396
+ document.getElementById('loginContainer').classList.add('hidden');
397
+ } else {
398
+ document.getElementById('loginContainer').classList.remove('hidden');
399
+ document.getElementById('registerContainer').classList.add('hidden');
400
+ }
401
+ });
 
 
 
 
 
 
 
 
 
402
  </script>
403
  <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=tidotto/brshare" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
404
  </html>
prompts.txt CHANGED
@@ -1 +1,2 @@
1
- Crie um site completo com todas as páginas e sessões do bjshare, vai se chamar BRShare, utilize o que ha de mais moderno em HTML5, CSS3, JS, React e as bibliotecas mais importantes dessas linguagens.
 
 
1
+ Crie um site completo com todas as páginas e sessões do bjshare, vai se chamar BRShare, utilize o que ha de mais moderno em HTML5, CSS3, JS, React e as bibliotecas mais importantes dessas linguagens.
2
+ Agora crie a tela de login e de cadastro para o BRshare recem criado