Hugging Face's logo

Spaces:
thigas88
/
vaquinha
Running

App Files Community
thigas88 commited on
Commit
a21e052
·
verified ·
1 Parent(s): a0c9e06

Corrija o erro que faz com que o conteúdo não carregue - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +780 -591
index.html CHANGED
@@ -3,680 +3,869 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Vaquinha Online - Crie sua campanha de arrecadação</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
- .progress-bar {
11
- height: 8px;
12
- border-radius: 4px;
13
- background-color: #e5e7eb;
 
14
  overflow: hidden;
15
  }
16
 
17
- .progress-fill {
 
 
 
 
18
  height: 100%;
19
- background-color: #3b82f6;
20
- transition: width 0.3s ease;
21
  }
22
 
23
- .campaign-card:hover {
24
- transform: translateY(-5px);
25
- box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
26
  }
27
 
28
- .step-indicator {
29
- width: 40px;
30
- height: 40px;
31
- border-radius: 50%;
32
- display: flex;
33
- align-items: center;
34
- justify-content: center;
35
- font-weight: bold;
36
  }
37
 
38
- .step-indicator.active {
39
- background-color: #3b82f6;
40
- color: white;
41
  }
42
 
43
- .step-indicator.completed {
44
- background-color: #10b981;
45
- color: white;
46
  }
47
 
48
- .step-connector {
49
- height: 2px;
50
- flex-grow: 1;
51
- background-color: #e5e7eb;
52
  }
53
 
54
- .step-connector.active {
55
- background-color: #3b82f6;
 
56
  }
57
 
58
- .step-connector.completed {
59
- background-color: #10b981;
 
60
  }
61
 
62
- @media (max-width: 640px) {
63
- .step-text {
64
- display: none;
65
- }
66
- }
67
-
68
- .floating-button {
69
- position: fixed;
70
- bottom: 2rem;
71
- right: 2rem;
72
- z-index: 50;
73
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
74
- }
75
-
76
- .share-button {
77
- transition: all 0.3s ease;
78
- }
79
-
80
- .share-button:hover {
81
- transform: scale(1.1);
82
  }
83
  </style>
84
  </head>
85
- <body class="bg-gray-50 font-sans">
86
- <!-- Header/Navbar -->
87
- <header class="bg-white shadow-sm">
88
- <div class="container mx-auto px-4 py-4 flex justify-between items-center">
89
- <div class="flex items-center">
90
- <i class="fas fa-hand-holding-heart text-blue-500 text-3xl mr-2"></i>
91
- <h1 class="text-2xl font-bold text-blue-600">Vaquinha<span class="text-blue-400">Online</span></h1>
92
- </div>
93
- <nav class="hidden md:flex space-x-6">
94
- <a href="#" class="text-gray-700 hover:text-blue-500 font-medium">Descobrir</a>
95
- <a href="#" class="text-gray-700 hover:text-blue-500 font-medium">Como funciona</a>
96
- <a href="#" class="text-gray-700 hover:text-blue-500 font-medium">Histórias</a>
97
- <a href="#" class="text-gray-700 hover:text-blue-500 font-medium">Ajuda</a>
98
- </nav>
99
- <div class="flex items-center space-x-4">
100
- <button class="hidden md:block px-4 py-2 text-blue-500 font-medium hover:bg-blue-50 rounded-lg">Entrar</button>
101
- <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg font-medium transition duration-300">
102
- Criar vaquinha
103
- </button>
104
- <button class="md:hidden text-gray-700">
105
- <i class="fas fa-bars text-xl"></i>
106
  </button>
107
  </div>
108
- </div>
109
- </header>
110
-
111
- <!-- Hero Section -->
112
- <section class="bg-gradient-to-r from-blue-500 to-blue-600 text-white py-16">
113
- <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
114
- <div class="md:w-1/2 mb-10 md:mb-0">
115
- <h2 class="text-4xl md:text-5xl font-bold mb-6">Faça a diferença com uma vaquinha online</h2>
116
- <p class="text-xl mb-8">Arrecade fundos para suas causas pessoais, projetos criativos ou necessidades especiais de forma rápida e segura.</p>
117
- <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
118
- <button class="bg-white text-blue-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-bold text-lg transition duration-300">
119
- Começar agora
120
- </button>
121
- <button class="border-2 border-white hover:bg-blue-700 px-6 py-3 rounded-lg font-bold text-lg transition duration-300">
122
- <i class="fas fa-play mr-2"></i> Ver vídeo
123
- </button>
124
  </div>
125
- </div>
126
- <div class="md:w-1/2 flex justify-center">
127
- <div class="relative w-full max-w-md">
128
- <div class="absolute -top-6 -left-6 w-32 h-32 bg-blue-400 rounded-full opacity-20"></div>
129
- <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-blue-400 rounded-full opacity-20"></div>
130
- <div class="relative bg-white rounded-xl shadow-xl p-6 text-gray-800">
131
- <div class="flex items-center mb-4">
132
- <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
133
- <i class="fas fa-heart text-blue-500 text-xl"></i>
134
- </div>
135
- <div class="ml-3">
136
- <h4 class="font-bold">Causa Social</h4>
137
- <p class="text-sm text-gray-500">Arrecadação para ajudar</p>
138
- </div>
139
- </div>
140
- <div class="mb-4">
141
- <h3 class="font-bold text-lg mb-2">Ajude crianças carentes a terem um Natal especial</h3>
142
- <p class="text-gray-600 text-sm">Vamos levar alegria para mais de 100 crianças nesta data tão especial...</p>
143
- </div>
144
- <div class="mb-4">
145
- <div class="flex justify-between text-sm mb-1">
146
- <span>R$ 3.450 arrecadados</span>
147
- <span>69% do objetivo</span>
148
- </div>
149
- <div class="progress-bar">
150
- <div class="progress-fill" style="width: 69%;"></div>
151
- </div>
152
- </div>
153
- <div class="flex justify-between items-center">
154
- <div class="text-sm">
155
- <p><span class="font-bold">42</span> apoiadores</p>
156
- </div>
157
- <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition duration-300">
158
- Apoiar agora
159
- </button>
160
- </div>
161
- </div>
162
  </div>
163
- </div>
164
- </div>
165
- </section>
166
-
167
- <!-- How It Works Section -->
168
- <section class="py-16 bg-white">
169
- <div class="container mx-auto px-4">
170
- <h2 class="text-3xl font-bold text-center mb-4">Como criar sua vaquinha</h2>
171
- <p class="text-center text-gray-600 max-w-2xl mx-auto mb-12">Em apenas 5 passos simples você pode criar sua campanha e começar a arrecadar</p>
172
-
173
- <div class="flex flex-col md:flex-row items-center justify-between mb-16">
174
- <div class="step-item flex flex-col items-center md:w-1/5 mb-8 md:mb-0">
175
- <div class="step-indicator active">
176
- <span>1</span>
177
- </div>
178
- <div class="step-connector hidden md:block"></div>
179
- <h3 class="mt-4 font-bold text-center">Crie sua vaquinha</h3>
180
- <p class="text-sm text-gray-600 text-center mt-2 step-text">Defina seu objetivo e conte sua história</p>
181
  </div>
182
 
183
- <div class="step-item flex flex-col items-center md:w-1/5 mb-8 md:mb-0">
184
- <div class="step-indicator">
185
- <span>2</span>
186
- </div>
187
- <div class="step-connector hidden md:block"></div>
188
- <h3 class="mt-4 font-bold text-center">Divulgue</h3>
189
- <p class="text-sm text-gray-600 text-center mt-2 step-text">Use redes sociais e mensagens diretas</p>
190
  </div>
191
 
192
- <div class="step-item flex flex-col items-center md:w-1/5 mb-8 md:mb-0">
193
- <div class="step-indicator">
194
- <span>3</span>
195
- </div>
196
- <div class="step-connector hidden md:block"></div>
197
- <h3 class="mt-4 font-bold text-center">Gere engajamento</h3>
198
- <p class="text-sm text-gray-600 text-center mt-2 step-text">Interaja com seus apoiadores</p>
199
  </div>
200
 
201
- <div class="step-item flex flex-col items-center md:w-1/5 mb-8 md:mb-0">
202
- <div class="step-indicator">
203
- <span>4</span>
204
- </div>
205
- <div class="step-connector hidden md:block"></div>
206
- <h3 class="mt-4 font-bold text-center">Atualizações</h3>
207
- <p class="text-sm text-gray-600 text-center mt-2 step-text">Conte novidades e agradeça</p>
208
  </div>
209
 
210
- <div class="step-item flex flex-col items-center md:w-1/5">
211
- <div class="step-indicator">
212
- <span>5</span>
213
- </div>
214
- <h3 class="mt-4 font-bold text-center">Comemore!</h3>
215
- <p class="text-sm text-gray-600 text-center mt-2 step-text">Saque o valor e receba ajuda</p>
216
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
217
  </div>
218
 
219
- <div class="text-center">
220
- <button class="bg-blue-500 hover:bg-blue-600 text-white px-8 py-3 rounded-lg font-bold text-lg transition duration-300">
221
- Criar minha vaquinha agora
 
 
 
 
222
  </button>
 
 
 
 
223
  </div>
224
  </div>
225
- </section>
226
-
227
- <!-- Campaign Creation Flow -->
228
- <section class="py-16 bg-gray-50" id="creation-flow">
229
- <div class="container mx-auto px-4 max-w-4xl">
230
- <div class="bg-white rounded-xl shadow-md overflow-hidden">
231
- <!-- Progress Bar -->
232
- <div class="bg-gray-100 px-6 py-4">
233
- <div class="flex justify-between items-center mb-2">
234
- <h3 class="font-bold text-lg">Criando sua vaquinha</h3>
235
- <span class="text-sm text-gray-600">Passo 1 de 5</span>
236
- </div>
237
- <div class="progress-bar">
238
- <div class="progress-fill" style="width: 20%;"></div>
239
- </div>
240
- </div>
 
 
 
 
241
 
242
- <!-- Form Content -->
243
- <div class="p-6">
244
- <h2 class="text-2xl font-bold mb-6">1. Crie sua vaquinha</h2>
245
-
246
- <div class="mb-8">
247
- <h3 class="text-lg font-semibold mb-4">Defina seu objetivo</h3>
248
-
249
- <div class="mb-4">
250
- <label class="block text-gray-700 font-medium mb-2" for="campaign-title">Título da vaquinha*</label>
251
- <input type="text" id="campaign-title" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Ex: Ajude crianças carentes a terem um Natal especial">
252
- <p class="text-sm text-gray-500 mt-1">Seja claro e objetivo no título para chamar atenção</p>
253
- </div>
254
-
255
- <div class="mb-4">
256
- <label class="block text-gray-700 font-medium mb-2" for="campaign-category">Categoria*</label>
257
- <select id="campaign-category" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
258
- <option value="">Selecione uma categoria</option>
259
- <option value="social">Causa Social</option>
260
- <option value="medical">Tratamento Médico</option>
261
- <option value="education">Educação</option>
262
- <option value="emergency">Emergência</option>
263
- <option value="creative">Projeto Criativo</option>
264
- <option value="other">Outro</option>
265
- </select>
266
- </div>
267
-
268
- <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
269
- <div>
270
- <label class="block text-gray-700 font-medium mb-2" for="campaign-goal">Valor objetivo (R$)*</label>
271
- <input type="number" id="campaign-goal" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="5000">
272
- </div>
273
- <div>
274
- <label class="block text-gray-700 font-medium mb-2" for="campaign-deadline">Data limite*</label>
275
- <input type="date" id="campaign-deadline" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
276
- </div>
277
- </div>
278
- </div>
279
-
280
- <div class="mb-8">
281
- <h3 class="text-lg font-semibold mb-4">Conte sua história</h3>
282
-
283
- <div class="mb-4">
284
- <label class="block text-gray-700 font-medium mb-2" for="campaign-description">Descrição detalhada*</label>
285
- <textarea id="campaign-description" rows="6" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Conte sua história de forma emocionante e verdadeira. Explique por que essa causa é importante e como o dinheiro será usado."></textarea>
286
- <p class="text-sm text-gray-500 mt-1">Histórias bem contadas têm mais chances de engajar as pessoas</p>
287
- </div>
288
-
289
- <div class="mb-4">
290
- <label class="block text-gray-700 font-medium mb-2">Imagem principal*</label>
291
- <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
292
- <i class="fas fa-cloud-upload-alt text-4xl text-blue-500 mb-2"></i>
293
- <p class="text-gray-600">Arraste e solte uma imagem aqui ou clique para selecionar</p>
294
- <p class="text-sm text-gray-500 mt-2">Recomendamos imagens de alta qualidade (mín. 1200x800px)</p>
295
- <button class="mt-4 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition duration-300">
296
- Selecionar imagem
297
- </button>
298
- </div>
299
- </div>
300
-
301
- <div>
302
- <label class="block text-gray-700 font-medium mb-2">Vídeo (opcional)</label>
303
- <div class="flex items-center">
304
- <input type="text" class="flex-grow px-4 py-2 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Cole o link do YouTube ou Vimeo">
305
- <button class="bg-gray-200 hover:bg-gray-300 px-4 py-2 rounded-r-lg text-gray-700">
306
- <i class="fas fa-link"></i>
307
- </button>
308
- </div>
309
- <p class="text-sm text-gray-500 mt-1">Vídeos aumentam em até 30% as chances de sucesso da vaquinha</p>
310
- </div>
311
- </div>
312
-
313
- <div class="flex justify-between">
314
- <button class="px-6 py-2 text-gray-600 font-medium hover:bg-gray-100 rounded-lg">
315
- Cancelar
316
- </button>
317
- <button class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-lg font-medium transition duration-300" onclick="nextStep()">
318
- Próximo passo
319
- </button>
320
- </div>
321
  </div>
322
  </div>
323
  </div>
324
- </section>
325
-
326
- <!-- Success Stories -->
327
- <section class="py-16 bg-white">
328
- <div class="container mx-auto px-4">
329
- <h2 class="text-3xl font-bold text-center mb-4">Vaquinhas que deram certo</h2>
330
- <p class="text-center text-gray-600 max-w-2xl mx-auto mb-12">Inspire-se com histórias reais de pessoas que alcançaram seus objetivos</p>
331
-
332
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
333
- <!-- Campaign Card 1 -->
334
- <div class="campaign-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
335
- <div class="relative">
336
- <img src="https://images.unsplash.com/photo-1529333166447-4f1a3f5b41cf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Campaign" class="w-full h-48 object-cover">
337
- <div class="absolute top-4 right-4 bg-white rounded-full p-2 shadow-md">
338
- <i class="fas fa-heart text-red-500"></i>
339
- </div>
340
- </div>
341
- <div class="p-6">
342
- <div class="flex items-center mb-3">
343
- <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
344
- <i class="fas fa-medkit text-blue-500"></i>
345
- </div>
346
- <div class="ml-3">
347
- <h4 class="font-bold text-sm">Tratamento Médico</h4>
348
- </div>
349
- </div>
350
- <h3 class="font-bold text-lg mb-2">Cirurgia de emergência para João</h3>
351
- <p class="text-gray-600 text-sm mb-4">João precisa de uma cirurgia urgente no coração e sua família não tem condições...</p>
352
- <div class="mb-4">
353
- <div class="flex justify-between text-sm mb-1">
354
- <span>R$ 28.750 arrecadados</span>
355
- <span>115% do objetivo</span>
356
- </div>
357
- <div class="progress-bar">
358
- <div class="progress-fill" style="width: 100%;"></div>
359
- </div>
360
- </div>
361
- <div class="flex justify-between items-center">
362
- <div class="text-sm">
363
- <p><span class="font-bold">214</span> apoiadores</p>
364
- </div>
365
- <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition duration-300">
366
- Ver história
367
- </button>
368
- </div>
369
- </div>
370
  </div>
371
 
372
- <!-- Campaign Card 2 -->
373
- <div class="campaign-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
374
- <div class="relative">
375
- <img src="https://images.unsplash.com/photo-1524179091875-bf99a9a6af57?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Campaign" class="w-full h-48 object-cover">
376
- <div class="absolute top-4 right-4 bg-white rounded-full p-2 shadow-md">
377
- <i class="fas fa-heart text-red-500"></i>
378
- </div>
379
- </div>
380
- <div class="p-6">
381
- <div class="flex items-center mb-3">
382
- <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center">
383
- <i class="fas fa-graduation-cap text-green-500"></i>
384
- </div>
385
- <div class="ml-3">
386
- <h4 class="font-bold text-sm">Educação</h4>
387
- </div>
388
- </div>
389
- <h3 class="font-bold text-lg mb-2">Bolsa de estudos para Maria</h3>
390
- <p class="text-gray-600 text-sm mb-4">Ajude Maria a realizar o sonho de cursar medicina em uma universidade pública...</p>
391
- <div class="mb-4">
392
- <div class="flex justify-between text-sm mb-1">
393
- <span>R$ 12.300 arrecadados</span>
394
- <span>82% do objetivo</span>
395
- </div>
396
- <div class="progress-bar">
397
- <div class="progress-fill" style="width: 82%;"></div>
398
- </div>
399
- </div>
400
- <div class="flex justify-between items-center">
401
- <div class="text-sm">
402
- <p><span class="font-bold">97</span> apoiadores</p>
403
- </div>
404
- <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition duration-300">
405
- Ver história
406
- </button>
407
- </div>
408
  </div>
409
  </div>
410
 
411
- <!-- Campaign Card 3 -->
412
- <div class="campaign-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
413
- <div class="relative">
414
- <img src="https://images.unsplash.com/photo-1508514177221-188e1eaf2cc5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Campaign" class="w-full h-48 object-cover">
415
- <div class="absolute top-4 right-4 bg-white rounded-full p-2 shadow-md">
416
- <i class="fas fa-heart text-red-500"></i>
417
- </div>
418
- </div>
419
- <div class="p-6">
420
- <div class="flex items-center mb-3">
421
- <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center">
422
- <i class="fas fa-music text-purple-500"></i>
423
- </div>
424
- <div class="ml-3">
425
- <h4 class="font-bold text-sm">Projeto Criativo</h4>
426
- </div>
427
- </div>
428
- <h3 class="font-bold text-lg mb-2">Primeiro álbum da banda</h3>
429
- <p class="text-gray-600 text-sm mb-4">Apoie o primeiro álbum independente da banda local que está fazendo sucesso...</p>
430
- <div class="mb-4">
431
- <div class="flex justify-between text-sm mb-1">
432
- <span>R$ 8.900 arrecadados</span>
433
- <span>178% do objetivo</span>
434
- </div>
435
- <div class="progress-bar">
436
- <div class="progress-fill" style="width: 100%;"></div>
437
- </div>
438
- </div>
439
- <div class="flex justify-between items-center">
440
- <div class="text-sm">
441
- <p><span class="font-bold">143</span> apoiadores</p>
442
- </div>
443
- <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition duration-300">
444
- Ver história
445
- </button>
446
- </div>
447
  </div>
448
  </div>
449
- </div>
450
-
451
- <div class="text-center mt-12">
452
- <button class="border-2 border-blue-500 text-blue-500 hover:bg-blue-50 px-8 py-3 rounded-lg font-bold text-lg transition duration-300">
453
- Ver mais histórias
454
- </button>
455
- </div>
456
- </div>
457
- </section>
458
-
459
- <!-- Monetization Strategy -->
460
- <section class="py-16 bg-gradient-to-r from-blue-500 to-blue-600 text-white">
461
- <div class="container mx-auto px-4">
462
- <h2 class="text-3xl font-bold text-center mb-4">Nossa estratégia de recebimento</h2>
463
- <p class="text-center max-w-2xl mx-auto mb-12">Oferecemos a menor taxa do mercado e opções flexíveis para você receber seu dinheiro</p>
464
-
465
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
466
- <div class="bg-white bg-opacity-10 rounded-xl p-8 backdrop-blur-sm">
467
- <div class="w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center mb-6">
468
- <i class="fas fa-percentage text-2xl"></i>
469
  </div>
470
- <h3 class="text-xl font-bold mb-4">Taxa competitiva</h3>
471
- <p class="mb-4">Apenas 5% sobre o valor arrecadado + taxa de processamento de pagamento (em média 3.5%)</p>
472
- <p class="text-sm opacity-80">Taxa reduzida para instituições sem fins lucrativos</p>
473
  </div>
474
 
475
- <div class="bg-white bg-opacity-10 rounded-xl p-8 backdrop-blur-sm">
476
- <div class="w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center mb-6">
477
- <i class="fas fa-money-bill-wave text-2xl"></i>
 
 
478
  </div>
479
- <h3 class="text-xl font-bold mb-4">Saque flexível</h3>
480
- <p class="mb-4">Receba seu dinheiro conforme for arrecadando ou espere até alcançar seu objetivo</p>
481
- <p class="text-sm opacity-80">Transferência para conta bancária em até 2 dias úteis</p>
482
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
483
 
484
- <div class="bg-white bg-opacity-10 rounded-xl p-8 backdrop-blur-sm">
485
- <div class="w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center mb-6">
486
- <i class="fas fa-hand-holding-usd text-2xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
487
  </div>
488
- <h3 class="text-xl font-bold mb-4">Garantia VaquinhaOnline</h3>
489
- <p class="mb-4">Se não alcançar 80% do objetivo em 30 dias, devolvemos o dinheiro aos doadores ou você pode estender o prazo</p>
490
- <p class="text-sm opacity-80">Aplicável apenas para campanhas com meta acima de R$ 5.000</p>
491
- </div>
492
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
493
 
494
- <div class="text-center mt-12">
495
- <button class="bg-white text-blue-600 hover:bg-gray-100 px-8 py-3 rounded-lg font-bold text-lg transition duration-300">
496
- Criar vaquinha sem compromisso
497
- </button>
498
- </div>
499
- </div>
500
- </section>
501
-
502
- <!-- Testimonials -->
503
- <section class="py-16 bg-gray-50">
504
- <div class="container mx-auto px-4">
505
- <h2 class="text-3xl font-bold text-center mb-4">O que dizem sobre nós</h2>
506
- <p class="text-center text-gray-600 max-w-2xl mx-auto mb-12">Depoimentos reais de pessoas que usaram nossa plataforma</p>
507
-
508
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
509
- <div class="bg-white p-6 rounded-xl shadow-sm">
510
- <div class="flex items-center mb-4">
511
- <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
512
- <i class="fas fa-user text-blue-500"></i>
513
- </div>
514
- <div class="ml-4">
515
- <h4 class="font-bold">Carlos Silva</h4>
516
- <p class="text-sm text-gray-500">Arrecadou R$ 32.000</p>
517
  </div>
518
  </div>
519
- <p class="text-gray-700 mb-4">"Graças à VaquinhaOnline consegui pagar o tratamento do meu pai. A plataforma é muito intuitiva e o suporte me ajudou em cada etapa."</p>
520
- <div class="flex">
521
- <i class="fas fa-star text-yellow-400"></i>
522
- <i class="fas fa-star text-yellow-400"></i>
523
- <i class="fas fa-star text-yellow-400"></i>
524
- <i class="fas fa-star text-yellow-400"></i>
525
- <i class="fas fa-star text-yellow-400"></i>
526
- </div>
527
- </div>
528
 
529
- <div class="bg-white p-6 rounded-xl shadow-sm">
530
- <div class="flex items-center mb-4">
531
- <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center">
532
- <i class="fas fa-user text-purple-500"></i>
533
- </div>
534
- <div class="ml-4">
535
- <h4 class="font-bold">Ana Beatriz</h4>
536
- <p class="text-sm text-gray-500">Arrecadou R$ 15.700</p>
537
- </div>
538
  </div>
539
- <p class="text-gray-700 mb-4">"Usei a vaquinha para financiar meu intercâmbio e superei a meta em apenas 3 semanas! As ferramentas de compartilhamento são ótimas."</p>
540
- <div class="flex">
541
- <i class="fas fa-star text-yellow-400"></i>
542
- <i class="fas fa-star text-yellow-400"></i>
543
- <i class="fas fa-star text-yellow-400"></i>
544
- <i class="fas fa-star text-yellow-400"></i>
545
- <i class="fas fa-star text-yellow-400"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
546
  </div>
547
- </div>
 
 
 
 
 
548
 
549
- <div class="bg-white p-6 rounded-xl shadow-sm">
550
- <div class="flex items-center mb-4">
551
- <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center">
552
- <i class="fas fa-user text-green-500"></i>
553
- </div>
554
- <div class="ml-4">
555
- <h4 class="font-bold">ONG Amigos do Bem</h4>
556
- <p class="text-sm text-gray-500">Arrecadou R$ 78.500</p>
557
- </div>
 
 
558
  </div>
559
- <p class="text-gray-700 mb-4">"Como instituição sem fins lucrativos, a taxa reduzida fez toda diferença. Conseguimos reformar o abrigo graças à generosidade das pessoas."</p>
560
- <div class="flex">
561
- <i class="fas fa-star text-yellow-400"></i>
562
- <i class="fas fa-star text-yellow-400"></i>
563
- <i class="fas fa-star text-yellow-400"></i>
564
- <i class="fas fa-star text-yellow-400"></i>
565
- <i class="fas fa-star-half-alt text-yellow-400"></i>
566
  </div>
567
- </div>
568
- </div>
569
- </div>
570
- </section>
571
-
572
- <!-- CTA Section -->
573
- <section class="py-16 bg-white">
574
- <div class="container mx-auto px-4 text-center">
575
- <h2 class="text-3xl font-bold mb-6">Pronto para começar sua vaquinha?</h2>
576
- <p class="text-xl text-gray-600 max-w-2xl mx-auto mb-8">Milhares de pessoas já alcançaram seus objetivos com nossa ajuda. O que você está esperando?</p>
577
- <button class="bg-blue-500 hover:bg-blue-600 text-white px-8 py-3 rounded-lg font-bold text-lg transition duration-300">
578
- Criar vaquinha agora - é grátis!
579
- </button>
580
- </div>
581
- </section>
582
-
583
- <!-- Footer -->
584
- <footer class="bg-gray-900 text-white pt-16 pb-8">
585
- <div class="container mx-auto px-4">
586
- <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
587
- <div>
588
- <div class="flex items-center mb-4">
589
- <i class="fas fa-hand-holding-heart text-blue-400 text-2xl mr-2"></i>
590
- <h3 class="text-xl font-bold">Vaquinha<span class="text-blue-400">Online</span></h3>
 
 
591
  </div>
592
- <p class="text-gray-400 mb-4">A plataforma mais simples e segura para você criar sua vaquinha online.</p>
593
- <div class="flex space-x-4">
594
- <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
595
- <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
596
- <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
597
- <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a>
 
 
 
 
 
 
 
 
 
 
 
 
598
  </div>
599
- </div>
 
 
 
 
600
 
601
- <div>
602
- <h4 class="text-lg font-bold mb-4">Para criadores</h4>
603
- <ul class="space-y-2">
604
- <li><a href="#" class="text-gray-400 hover:text-white">Como funciona</a></li>
605
- <li><a href="#" class="text-gray-400 hover:text-white">Por que usar</a></li>
606
- <li><a href="#" class="text-gray-400 hover:text-white">Histórias de sucesso</a></li>
607
- <li><a href="#" class="text-gray-400 hover:text-white">Dicas para sua campanha</a></li>
608
- <li><a href="#" class="text-gray-400 hover:text-white">Taxas</a></li>
609
- </ul>
610
- </div>
611
 
612
- <div>
613
- <h4 class="text-lg font-bold mb-4">Para doadores</h4>
614
- <ul class="space-y-2">
615
- <li><a href="#" class="text-gray-400 hover:text-white">Descobrir campanhas</a></li>
616
- <li><a href="#" class="text-gray-400 hover:text-white">Como doar</a></li>
617
- <li><a href="#" class="text-gray-400 hover:text-white">Segurança</a></li>
618
- <li><a href="#" class="text-gray-400 hover:text-white">Perguntas frequentes</a></li>
619
- </ul>
620
- </div>
621
 
622
- <div>
623
- <h4 class="text-lg font-bold mb-4">Contato</h4>
624
- <ul class="space-y-2">
625
- <li class="flex items-center text-gray-400"><i class="fas fa-envelope mr-2"></i> contato@vaquinhaonline.com.br</li>
626
- <li class="flex items-center text-gray-400"><i class="fas fa-phone mr-2"></i> (11) 1234-5678</li>
627
- <li class="flex items-center text-gray-400"><i class="fas fa-map-marker-alt mr-2"></i> São Paulo - SP</li>
628
- </ul>
629
- </div>
630
- </div>
 
 
 
 
 
 
 
 
631
 
632
- <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
633
- <p class="text-gray-400 mb-4 md:mb-0">© 2023 VaquinhaOnline. Todos os direitos reservados.</p>
634
- <div class="flex space-x-6">
635
- <a href="#" class="text-gray-400 hover:text-white">Termos de uso</a>
636
- <a href="#" class="text-gray-400 hover:text-white">Política de privacidade</a>
637
- <a href="#" class="text-gray-400 hover:text-white">Cookies</a>
638
- </div>
639
- </div>
640
- </div>
641
- </footer>
642
-
643
- <!-- Floating Action Button -->
644
- <button class="floating-button bg-blue-500 hover:bg-blue-600 text-white rounded-full w-16 h-16 flex items-center justify-center transition duration-300">
645
- <i class="fas fa-plus text-2xl"></i>
646
- </button>
647
-
648
- <script>
649
- // Simple step navigation for the campaign creation flow
650
- function nextStep() {
651
- alert('Você será redirecionado para o próximo passo: "Divulgue sua vaquinha". Na implementação real, isso levaria para a próxima seção do formulário.');
652
  }
653
 
654
- // Mobile menu toggle would go here
655
- document.addEventListener('DOMContentLoaded', function() {
656
- // This would be for mobile menu toggle functionality
657
- // const mobileMenuButton = document.querySelector('.md:hidden');
658
- // const mobileMenu = document.querySelector('.mobile-menu');
659
-
660
- // mobileMenuButton.addEventListener('click', function() {
661
- // mobileMenu.classList.toggle('hidden');
662
- // });
663
-
664
- // For demo purposes, we'll just show an alert when clicking campaign cards
665
- const campaignCards = document.querySelectorAll('.campaign-card');
666
- campaignCards.forEach(card => {
667
- card.addEventListener('click', function(e) {
668
- if (e.target.tagName !== 'BUTTON') {
669
- alert('Esta é uma demonstração. Na implementação real, isso levaria para a página da campanha.');
670
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
671
  });
672
  });
673
 
674
- // Floating button action
675
- const floatingButton = document.querySelector('.floating-button');
676
- floatingButton.addEventListener('click', function() {
677
- document.getElementById('creation-flow').scrollIntoView({ behavior: 'smooth' });
 
 
678
  });
679
- });
 
 
 
680
  </script>
681
  <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=thigas88/vaquinha" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
682
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Crianças de Cristo - Conteúdo Infantil Cristão</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
+ /* Custom CSS for video player */
11
+ .video-container {
12
+ position: relative;
13
+ padding-bottom: 56.25%;
14
+ height: 0;
15
  overflow: hidden;
16
  }
17
 
18
+ .video-container iframe {
19
+ position: absolute;
20
+ top: 0;
21
+ left: 0;
22
+ width: 100%;
23
  height: 100%;
24
+ border: none;
 
25
  }
26
 
27
+ /* Hide YouTube controls and branding */
28
+ .video-container iframe {
29
+ pointer-events: none;
30
  }
31
 
32
+ /* Custom scrollbar for carousels */
33
+ .carousel-container {
34
+ scrollbar-width: none; /* Firefox */
35
+ -ms-overflow-style: none; /* IE and Edge */
 
 
 
 
36
  }
37
 
38
+ .carousel-container::-webkit-scrollbar {
39
+ display: none; /* Chrome, Safari, Opera */
 
40
  }
41
 
42
+ /* Modal transition */
43
+ .modal {
44
+ transition: opacity 0.3s ease;
45
  }
46
 
47
+ /* Auth form animation */
48
+ .auth-form {
49
+ animation: fadeIn 0.5s ease;
 
50
  }
51
 
52
+ @keyframes fadeIn {
53
+ from { opacity: 0; transform: translateY(20px); }
54
+ to { opacity: 1; transform: translateY(0); }
55
  }
56
 
57
+ /* Loading spinner */
58
+ .spinner {
59
+ animation: spin 1s linear infinite;
60
  }
61
 
62
+ @keyframes spin {
63
+ 0% { transform: rotate(0deg); }
64
+ 100% { transform: rotate(360deg); }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
65
  }
66
  </style>
67
  </head>
68
+ <body class="bg-gray-900 text-white">
69
+ <!-- Auth Modal -->
70
+ <div id="authModal" class="fixed inset-0 bg-black bg-opacity-90 z-50 flex items-center justify-center p-4 modal hidden">
71
+ <div class="bg-gray-800 rounded-lg p-8 max-w-md w-full auth-form">
72
+ <div class="flex justify-between items-center mb-6">
73
+ <h2 class="text-2xl font-bold">Entrar</h2>
74
+ <button id="closeAuthModal" class="text-gray-400 hover:text-white">
75
+ <i class="fas fa-times"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
76
  </button>
77
  </div>
78
+
79
+ <form id="loginForm" class="space-y-4">
80
+ <div>
81
+ <label for="email" class="block text-sm font-medium mb-1">Email</label>
82
+ <input type="email" id="email" class="w-full bg-gray-700 rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
 
 
 
 
 
 
 
 
 
 
 
83
  </div>
84
+
85
+ <div>
86
+ <label for="password" class="block text-sm font-medium mb-1">Senha</label>
87
+ <input type="password" id="password" class="w-full bg-gray-700 rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
88
  </div>
89
+
90
+ <button type="submit" class="w-full bg-red-600 hover:bg-red-700 py-2 rounded font-medium transition duration-200">
91
+ Entrar
92
+ </button>
93
+
94
+ <div class="text-center text-sm text-gray-400">
95
+ Não tem uma conta? <button type="button" id="switchToRegister" class="text-blue-400 hover:underline">Cadastre-se</button>
96
+ </div>
97
+ </form>
98
+
99
+ <form id="registerForm" class="space-y-4 hidden">
100
+ <div>
101
+ <label for="regName" class="block text-sm font-medium mb-1">Nome</label>
102
+ <input type="text" id="regName" class="w-full bg-gray-700 rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
 
 
 
 
103
  </div>
104
 
105
+ <div>
106
+ <label for="regEmail" class="block text-sm font-medium mb-1">Email</label>
107
+ <input type="email" id="regEmail" class="w-full bg-gray-700 rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
 
 
 
 
108
  </div>
109
 
110
+ <div>
111
+ <label for="regPassword" class="block text-sm font-medium mb-1">Senha</label>
112
+ <input type="password" id="regPassword" class="w-full bg-gray-700 rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
 
 
 
 
113
  </div>
114
 
115
+ <div>
116
+ <label for="regConfirmPassword" class="block text-sm font-medium mb-1">Confirmar Senha</label>
117
+ <input type="password" id="regConfirmPassword" class="w-full bg-gray-700 rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
 
 
 
 
118
  </div>
119
 
120
+ <button type="submit" class="w-full bg-red-600 hover:bg-red-700 py-2 rounded font-medium transition duration-200">
121
+ Cadastrar
122
+ </button>
123
+
124
+ <div class="text-center text-sm text-gray-400">
125
+ Já tem uma conta? <button type="button" id="switchToLogin" class="text-blue-400 hover:underline">Faça login</button>
126
  </div>
127
+ </form>
128
+ </div>
129
+ </div>
130
+
131
+ <!-- Video Player Modal -->
132
+ <div id="videoModal" class="fixed inset-0 bg-black bg-opacity-90 z-50 flex items-center justify-center p-4 modal hidden">
133
+ <div class="w-full max-w-4xl">
134
+ <div class="flex justify-between items-center mb-4">
135
+ <h2 id="videoModalTitle" class="text-xl font-bold"></h2>
136
+ <button id="closeVideoModal" class="text-gray-400 hover:text-white text-2xl">
137
+ <i class="fas fa-times"></i>
138
+ </button>
139
  </div>
140
 
141
+ <div class="video-container rounded-lg overflow-hidden">
142
+ <iframe id="videoPlayer" src="" frameborder="0" allowfullscreen></iframe>
143
+ </div>
144
+
145
+ <div class="mt-4 flex justify-between items-center">
146
+ <button id="toggleFavorite" class="text-gray-300 hover:text-red-500">
147
+ <i class="far fa-heart"></i> <span class="ml-1">Favoritar</span>
148
  </button>
149
+
150
+ <div class="text-gray-400 text-sm">
151
+ Conteúdo infantil cristão
152
+ </div>
153
  </div>
154
  </div>
155
+ </div>
156
+
157
+ <!-- PDF Viewer Modal -->
158
+ <div id="pdfModal" class="fixed inset-0 bg-black bg-opacity-90 z-50 flex items-center justify-center p-4 modal hidden">
159
+ <div class="w-full max-w-4xl bg-gray-800 rounded-lg overflow-hidden">
160
+ <div class="flex justify-between items-center bg-gray-900 p-4">
161
+ <h2 id="pdfModalTitle" class="text-xl font-bold"></h2>
162
+ <button id="closePdfModal" class="text-gray-400 hover:text-white text-2xl">
163
+ <i class="fas fa-times"></i>
164
+ </button>
165
+ </div>
166
+
167
+ <div class="h-96 md:h-[80vh] w-full">
168
+ <iframe id="pdfViewer" src="" frameborder="0" class="w-full h-full"></iframe>
169
+ </div>
170
+
171
+ <div class="bg-gray-900 p-4 flex justify-between items-center">
172
+ <button id="togglePdfFavorite" class="text-gray-300 hover:text-red-500">
173
+ <i class="far fa-heart"></i> <span class="ml-1">Favoritar</span>
174
+ </button>
175
 
176
+ <div class="text-gray-400 text-sm">
177
+ Conteúdo infantil cristão
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
178
  </div>
179
  </div>
180
  </div>
181
+ </div>
182
+
183
+ <!-- Loading Screen -->
184
+ <div id="loadingScreen" class="fixed inset-0 bg-gray-900 flex items-center justify-center z-50">
185
+ <div class="text-center">
186
+ <div class="spinner inline-block w-16 h-16 border-4 border-red-600 border-t-transparent rounded-full mb-4"></div>
187
+ <h2 class="text-xl font-bold">Carregando conteúdo...</h2>
188
+ </div>
189
+ </div>
190
+
191
+ <!-- Main App (hidden until authenticated) -->
192
+ <div id="app" class="hidden">
193
+ <!-- Header -->
194
+ <header class="fixed top-0 left-0 right-0 z-40 bg-gradient-to-b from-black to-transparent p-4 transition-all duration-300">
195
+ <div class="flex justify-between items-center">
196
+ <div class="flex items-center">
197
+ <h1 class="text-red-600 font-bold text-2xl md:text-3xl">Crianças de Cristo</h1>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
198
  </div>
199
 
200
+ <div class="flex items-center space-x-4">
201
+ <button id="favoritesBtn" class="text-gray-300 hover:text-white">
202
+ <i class="fas fa-heart mr-1"></i> Favoritos
203
+ </button>
204
+ <button id="logoutBtn" class="bg-red-600 hover:bg-red-700 px-4 py-1 rounded transition duration-200">
205
+ Sair
206
+ </button>
207
+ </div>
208
+ </div>
209
+ </header>
210
+
211
+ <!-- Main Content -->
212
+ <main class="pt-20 pb-16 px-4">
213
+ <!-- Featured Content -->
214
+ <section id="featured" class="mb-12">
215
+ <h2 class="text-xl font-bold mb-4">Destaque</h2>
216
+ <div id="featuredContent" class="relative rounded-xl overflow-hidden h-64 md:h-96 w-full bg-gray-800">
217
+ <!-- Featured content will be loaded here -->
218
+ </div>
219
+ </section>
220
+
221
+ <!-- Video Carousels -->
222
+ <section id="videoCarousels" class="space-y-10">
223
+ <!-- Recentes -->
224
+ <div>
225
+ <h2 class="text-xl font-bold mb-4">Recentes</h2>
226
+ <div id="recentCarousel" class="carousel-container flex space-x-4 overflow-x-auto pb-4">
227
+ <!-- Recent videos will be loaded here -->
 
 
 
 
 
 
 
 
228
  </div>
229
  </div>
230
 
231
+ <!-- Histórias Bíblicas -->
232
+ <div>
233
+ <h2 class="text-xl font-bold mb-4">Histórias Bíblicas</h2>
234
+ <div id="bibleStoriesCarousel" class="carousel-container flex space-x-4 overflow-x-auto pb-4">
235
+ <!-- Bible story videos will be loaded here -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
236
  </div>
237
  </div>
238
+
239
+ <!-- Milagres de Jesus -->
240
+ <div>
241
+ <h2 class="text-xl font-bold mb-4">Milagres de Jesus</h2>
242
+ <div id="miraclesCarousel" class="carousel-container flex space-x-4 overflow-x-auto pb-4">
243
+ <!-- Miracle videos will be loaded here -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
244
  </div>
 
 
 
245
  </div>
246
 
247
+ <!-- Músicas -->
248
+ <div>
249
+ <h2 class="text-xl font-bold mb-4">Músicas</h2>
250
+ <div id="songsCarousel" class="carousel-container flex space-x-4 overflow-x-auto pb-4">
251
+ <!-- Song videos will be loaded here -->
252
  </div>
 
 
 
253
  </div>
254
+ </section>
255
+
256
+ <!-- PDF Content -->
257
+ <section id="pdfContent" class="mt-16">
258
+ <h2 class="text-xl font-bold mb-4">Conteúdo para Baixar</h2>
259
+ <div id="pdfGrid" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
260
+ <!-- PDF content will be loaded here -->
261
+ </div>
262
+ </section>
263
+ </main>
264
+
265
+ <!-- Footer -->
266
+ <footer class="fixed bottom-0 left-0 right-0 bg-gray-900 p-4 text-center text-gray-400 text-sm">
267
+ <p>© 2023 Crianças de Cristo - Conteúdo Infantil Cristão</p>
268
+ </footer>
269
+ </div>
270
+
271
+ <script>
272
+ // App state
273
+ const state = {
274
+ authenticated: false,
275
+ currentUser: null,
276
+ videos: [],
277
+ pdfs: [],
278
+ favorites: JSON.parse(localStorage.getItem('favorites')) || { videos: [], pdfs: [] }
279
+ };
280
+
281
+ // DOM Elements
282
+ const authModal = document.getElementById('authModal');
283
+ const loginForm = document.getElementById('loginForm');
284
+ const registerForm = document.getElementById('registerForm');
285
+ const switchToRegister = document.getElementById('switchToRegister');
286
+ const switchToLogin = document.getElementById('switchToLogin');
287
+ const closeAuthModal = document.getElementById('closeAuthModal');
288
+ const app = document.getElementById('app');
289
+ const loadingScreen = document.getElementById('loadingScreen');
290
+ const videoModal = document.getElementById('videoModal');
291
+ const videoPlayer = document.getElementById('videoPlayer');
292
+ const videoModalTitle = document.getElementById('videoModalTitle');
293
+ const closeVideoModal = document.getElementById('closeVideoModal');
294
+ const toggleFavorite = document.getElementById('toggleFavorite');
295
+ const pdfModal = document.getElementById('pdfModal');
296
+ const pdfViewer = document.getElementById('pdfViewer');
297
+ const pdfModalTitle = document.getElementById('pdfModalTitle');
298
+ const closePdfModal = document.getElementById('closePdfModal');
299
+ const togglePdfFavorite = document.getElementById('togglePdfFavorite');
300
+ const logoutBtn = document.getElementById('logoutBtn');
301
+ const favoritesBtn = document.getElementById('favoritesBtn');
302
+
303
+ // Content containers
304
+ const featuredContent = document.getElementById('featuredContent');
305
+ const recentCarousel = document.getElementById('recentCarousel');
306
+ const bibleStoriesCarousel = document.getElementById('bibleStoriesCarousel');
307
+ const miraclesCarousel = document.getElementById('miraclesCarousel');
308
+ const songsCarousel = document.getElementById('songsCarousel');
309
+ const pdfGrid = document.getElementById('pdfGrid');
310
+
311
+ // Initialize the app
312
+ function init() {
313
+ // Show loading screen initially
314
+ loadingScreen.classList.remove('hidden');
315
+
316
+ // Check if user is authenticated
317
+ const user = JSON.parse(localStorage.getItem('currentUser'));
318
+ if (user) {
319
+ state.authenticated = true;
320
+ state.currentUser = user;
321
+ app.classList.remove('hidden');
322
+ loadContent();
323
+ } else {
324
+ loadingScreen.classList.add('hidden');
325
+ authModal.classList.remove('hidden');
326
+ }
327
+
328
+ // Set up event listeners
329
+ setupEventListeners();
330
+ }
331
+
332
+ // Set up all event listeners
333
+ function setupEventListeners() {
334
+ // Auth modal
335
+ switchToRegister.addEventListener('click', () => {
336
+ loginForm.classList.add('hidden');
337
+ registerForm.classList.remove('hidden');
338
+ });
339
+
340
+ switchToLogin.addEventListener('click', () => {
341
+ registerForm.classList.add('hidden');
342
+ loginForm.classList.remove('hidden');
343
+ });
344
+
345
+ closeAuthModal.addEventListener('click', () => {
346
+ if (!state.authenticated) return;
347
+ authModal.classList.add('hidden');
348
+ });
349
+
350
+ // Login form
351
+ loginForm.addEventListener('submit', (e) => {
352
+ e.preventDefault();
353
+ const email = document.getElementById('email').value;
354
+ const password = document.getElementById('password').value;
355
 
356
+ // Simple validation
357
+ if (email && password) {
358
+ // In a real app, you would validate with a backend
359
+ state.currentUser = { email, name: email.split('@')[0] };
360
+ state.authenticated = true;
361
+ localStorage.setItem('currentUser', JSON.stringify(state.currentUser));
362
+
363
+ authModal.classList.add('hidden');
364
+ loadContent();
365
+ app.classList.remove('hidden');
366
+ loadingScreen.classList.add('hidden');
367
+ }
368
+ });
369
+
370
+ // Register form
371
+ registerForm.addEventListener('submit', (e) => {
372
+ e.preventDefault();
373
+ const name = document.getElementById('regName').value;
374
+ const email = document.getElementById('regEmail').value;
375
+ const password = document.getElementById('regPassword').value;
376
+ const confirmPassword = document.getElementById('regConfirmPassword').value;
377
+
378
+ // Simple validation
379
+ if (name && email && password && password === confirmPassword) {
380
+ // In a real app, you would register with a backend
381
+ state.currentUser = { email, name };
382
+ state.authenticated = true;
383
+ localStorage.setItem('currentUser', JSON.stringify(state.currentUser));
384
+
385
+ authModal.classList.add('hidden');
386
+ loadContent();
387
+ app.classList.remove('hidden');
388
+ loadingScreen.classList.add('hidden');
389
+
390
+ // Switch back to login form for next time
391
+ registerForm.classList.add('hidden');
392
+ loginForm.classList.remove('hidden');
393
+ }
394
+ });
395
+
396
+ // Video modal
397
+ closeVideoModal.addEventListener('click', () => {
398
+ videoModal.classList.add('hidden');
399
+ videoPlayer.src = '';
400
+ });
401
+
402
+ // PDF modal
403
+ closePdfModal.addEventListener('click', () => {
404
+ pdfModal.classList.add('hidden');
405
+ pdfViewer.src = '';
406
+ });
407
+
408
+ // Logout
409
+ logoutBtn.addEventListener('click', () => {
410
+ state.authenticated = false;
411
+ state.currentUser = null;
412
+ localStorage.removeItem('currentUser');
413
+ app.classList.add('hidden');
414
+ authModal.classList.remove('hidden');
415
+ });
416
+
417
+ // Favorites
418
+ favoritesBtn.addEventListener('click', showFavorites);
419
+ }
420
+
421
+ // Load content from Google Sheets
422
+ async function loadContent() {
423
+ try {
424
+ // In a real app, you would fetch from your backend that accesses the Google Sheet
425
+ // For this demo, we'll use mock data
426
+
427
+ // Mock video data (in a real app, this would come from the Google Sheet)
428
+ state.videos = [
429
+ {
430
+ titulo: "A Criação do Mundo",
431
+ video: "https://www.youtube.com/embed/dQw4w9WgXcQ",
432
+ imagem: "https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg",
433
+ categoria: "Histórias Bíblicas",
434
+ destaque: true
435
+ },
436
+ {
437
+ titulo: "Noé e o Dilúvio",
438
+ video: "https://www.youtube.com/embed/dQw4w9WgXcQ",
439
+ imagem: "https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg",
440
+ categoria: "Histórias Bíblicas",
441
+ destaque: false
442
+ },
443
+ {
444
+ titulo: "Jesus Acalma a Tempestade",
445
+ video: "https://www.youtube.com/embed/dQw4w9WgXcQ",
446
+ imagem: "https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg",
447
+ categoria: "Milagres de Jesus",
448
+ destaque: true
449
+ },
450
+ {
451
+ titulo: "A Multiplicação dos Pães",
452
+ video: "https://www.youtube.com/embed/dQw4w9WgXcQ",
453
+ imagem: "https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg",
454
+ categoria: "Milagres de Jesus",
455
+ destaque: false
456
+ },
457
+ {
458
+ titulo: "Cristo Me Ama",
459
+ video: "https://www.youtube.com/embed/dQw4w9WgXcQ",
460
+ imagem: "https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg",
461
+ categoria: "Músicas",
462
+ destaque: false
463
+ },
464
+ {
465
+ titulo: "A Arca de Noé",
466
+ video: "https://www.youtube.com/embed/dQw4w9WgXcQ",
467
+ imagem: "https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg",
468
+ categoria: "Histórias Bíblicas",
469
+ destaque: false
470
+ },
471
+ {
472
+ titulo: "Jesus Cura o Cego",
473
+ video: "https://www.youtube.com/embed/dQw4w9WgXcQ",
474
+ imagem: "https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg",
475
+ categoria: "Milagres de Jesus",
476
+ destaque: false
477
+ },
478
+ {
479
+ titulo: "Deus é Tão Bom",
480
+ video: "https://www.youtube.com/embed/dQw4w9WgXcQ",
481
+ imagem: "https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg",
482
+ categoria: "Músicas",
483
+ destaque: false
484
+ }
485
+ ];
486
+
487
+ // Mock PDF data
488
+ state.pdfs = [
489
+ {
490
+ titulo: "História de Noé para Colorir",
491
+ pdf: "https://example.com/sample.pdf",
492
+ imagem: "https://via.placeholder.com/300x424/333/fff?text=PDF+1",
493
+ categoria: "Histórias Bíblicas"
494
+ },
495
+ {
496
+ titulo: "Jesus e as Crianças",
497
+ pdf: "https://example.com/sample.pdf",
498
+ imagem: "https://via.placeholder.com/300x424/333/fff?text=PDF+2",
499
+ categoria: "Histórias Bíblicas"
500
+ },
501
+ {
502
+ titulo: "Atividades Bíblicas",
503
+ pdf: "https://example.com/sample.pdf",
504
+ imagem: "https://via.placeholder.com/300x424/333/fff?text=PDF+3",
505
+ categoria: "Atividades"
506
+ },
507
+ {
508
+ titulo: "Músicas Cristãs Infantis",
509
+ pdf: "https://example.com/sample.pdf",
510
+ imagem: "https://via.placeholder.com/300x424/333/fff?text=PDF+4",
511
+ categoria: "Músicas"
512
+ }
513
+ ];
514
+
515
+ // Render content
516
+ renderContent();
517
+
518
+ } catch (error) {
519
+ console.error('Error loading content:', error);
520
+ loadingScreen.classList.add('hidden');
521
+ app.innerHTML = `
522
+ <div class="text-center">
523
+ <i class="fas fa-exclamation-triangle text-red-500 text-4xl mb-4"></i>
524
+ <h2 class="text-xl font-bold">Erro ao carregar conteúdo</h2>
525
+ <p class="text-gray-400 mt-2">Por favor, tente novamente mais tarde.</p>
526
+ <button id="retryBtn" class="mt-4 bg-red-600 hover:bg-red-700 px-4 py-2 rounded transition duration-200">
527
+ Tentar Novamente
528
+ </button>
529
  </div>
530
+ `;
531
+
532
+ document.getElementById('retryBtn').addEventListener('click', loadContent);
533
+ }
534
+ }
535
+
536
+ // Render all content
537
+ function renderContent() {
538
+ renderFeaturedContent();
539
+ renderVideoCarousels();
540
+ renderPDFContent();
541
+ loadingScreen.classList.add('hidden');
542
+ app.classList.remove('hidden');
543
+ }
544
+
545
+ // Render featured content
546
+ function renderFeaturedContent() {
547
+ const featuredVideos = state.videos.filter(video => video.destaque);
548
 
549
+ if (featuredVideos.length > 0) {
550
+ const video = featuredVideos[0];
551
+
552
+ featuredContent.innerHTML = `
553
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent z-10 flex items-end p-6">
554
+ <div>
555
+ <h3 class="text-2xl md:text-4xl font-bold mb-2">${video.titulo}</h3>
556
+ <p class="text-gray-300 mb-4">Assista agora a esta história bíblica especial para crianças</p>
557
+ <button class="play-featured bg-red-600 hover:bg-red-700 px-6 py-2 rounded font-medium transition duration-200 flex items-center" data-video="${video.video}" data-title="${video.titulo}">
558
+ <i class="fas fa-play mr-2"></i> Assistir
559
+ </button>
 
 
 
 
 
 
 
 
 
 
 
 
560
  </div>
561
  </div>
562
+ <img src="${video.imagem}" alt="${video.titulo}" class="absolute inset-0 w-full h-full object-cover">
563
+ `;
 
 
 
 
 
 
 
564
 
565
+ // Add event listener to play button
566
+ document.querySelector('.play-featured').addEventListener('click', function() {
567
+ openVideoModal(this.dataset.video, this.dataset.title);
568
+ });
569
+ } else {
570
+ featuredContent.innerHTML = `
571
+ <div class="absolute inset-0 flex items-center justify-center">
572
+ <p class="text-gray-400">Nenhum conteúdo em destaque disponível</p>
 
573
  </div>
574
+ `;
575
+ }
576
+ }
577
+
578
+ // Render video carousels
579
+ function renderVideoCarousels() {
580
+ // Recent videos (just use all videos for demo)
581
+ renderCarousel(recentCarousel, state.videos, 'Recentes');
582
+
583
+ // Bible stories
584
+ const bibleStories = state.videos.filter(video => video.categoria === 'Histórias Bíblicas');
585
+ renderCarousel(bibleStoriesCarousel, bibleStories, 'Histórias Bíblicas');
586
+
587
+ // Miracles
588
+ const miracles = state.videos.filter(video => video.categoria === 'Milagres de Jesus');
589
+ renderCarousel(miraclesCarousel, miracles, 'Milagres de Jesus');
590
+
591
+ // Songs
592
+ const songs = state.videos.filter(video => video.categoria === 'Músicas');
593
+ renderCarousel(songsCarousel, songs, 'Músicas');
594
+ }
595
+
596
+ // Render a single carousel
597
+ function renderCarousel(container, videos, category) {
598
+ container.innerHTML = '';
599
+
600
+ if (videos.length === 0) {
601
+ container.innerHTML = `
602
+ <div class="flex items-center justify-center w-full h-32 text-gray-400">
603
+ Nenhum vídeo disponível na categoria ${category}
604
  </div>
605
+ `;
606
+ return;
607
+ }
608
+
609
+ videos.forEach(video => {
610
+ const isFavorite = state.favorites.videos.includes(video.video);
611
 
612
+ const videoCard = document.createElement('div');
613
+ videoCard.className = 'flex-none w-48 md:w-56 lg:w-64 rounded-lg overflow-hidden bg-gray-800 hover:scale-105 transition-transform duration-200';
614
+ videoCard.innerHTML = `
615
+ <div class="relative">
616
+ <img src="${video.imagem}" alt="${video.titulo}" class="w-full h-28 md:h-32 lg:h-36 object-cover">
617
+ <button class="play-btn absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 hover:opacity-100 transition-opacity duration-200" data-video="${video.video}" data-title="${video.titulo}">
618
+ <i class="fas fa-play text-white text-3xl"></i>
619
+ </button>
620
+ <button class="favorite-btn absolute top-2 right-2 text-white bg-black bg-opacity-60 rounded-full p-2" data-video="${video.video}" data-title="${video.titulo}">
621
+ <i class="${isFavorite ? 'fas' : 'far'} fa-heart ${isFavorite ? 'text-red-500' : ''}"></i>
622
+ </button>
623
  </div>
624
+ <div class="p-3">
625
+ <h3 class="font-medium truncate">${video.titulo}</h3>
 
 
 
 
 
626
  </div>
627
+ `;
628
+
629
+ container.appendChild(videoCard);
630
+
631
+ // Add event listeners
632
+ videoCard.querySelector('.play-btn').addEventListener('click', function() {
633
+ openVideoModal(this.dataset.video, this.dataset.title);
634
+ });
635
+
636
+ videoCard.querySelector('.favorite-btn').addEventListener('click', function() {
637
+ toggleVideoFavorite(this.dataset.video, this.dataset.title);
638
+ this.querySelector('i').classList.toggle('far');
639
+ this.querySelector('i').classList.toggle('fas');
640
+ this.querySelector('i').classList.toggle('text-red-500');
641
+ });
642
+ });
643
+ }
644
+
645
+ // Render PDF content
646
+ function renderPDFContent() {
647
+ pdfGrid.innerHTML = '';
648
+
649
+ if (state.pdfs.length === 0) {
650
+ pdfGrid.innerHTML = `
651
+ <div class="col-span-full flex items-center justify-center h-32 text-gray-400">
652
+ Nenhum conteúdo PDF disponível
653
  </div>
654
+ `;
655
+ return;
656
+ }
657
+
658
+ state.pdfs.forEach(pdf => {
659
+ const isFavorite = state.favorites.pdfs.includes(pdf.pdf);
660
+
661
+ const pdfCard = document.createElement('div');
662
+ pdfCard.className = 'bg-gray-800 rounded-lg overflow-hidden hover:scale-105 transition-transform duration-200';
663
+ pdfCard.innerHTML = `
664
+ <div class="relative">
665
+ <img src="${pdf.imagem}" alt="${pdf.titulo}" class="w-full h-40 object-cover">
666
+ <button class="view-pdf-btn absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 hover:opacity-100 transition-opacity duration-200" data-pdf="${pdf.pdf}" data-title="${pdf.titulo}">
667
+ <i class="fas fa-eye text-white text-3xl"></i>
668
+ </button>
669
+ <button class="favorite-pdf-btn absolute top-2 right-2 text-white bg-black bg-opacity-60 rounded-full p-2" data-pdf="${pdf.pdf}" data-title="${pdf.titulo}">
670
+ <i class="${isFavorite ? 'fas' : 'far'} fa-heart ${isFavorite ? 'text-red-500' : ''}"></i>
671
+ </button>
672
  </div>
673
+ <div class="p-3">
674
+ <h3 class="font-medium truncate">${pdf.titulo}</h3>
675
+ <p class="text-gray-400 text-sm mt-1">${pdf.categoria}</p>
676
+ </div>
677
+ `;
678
 
679
+ pdfGrid.appendChild(pdfCard);
 
 
 
 
 
 
 
 
 
680
 
681
+ // Add event listeners
682
+ pdfCard.querySelector('.view-pdf-btn').addEventListener('click', function() {
683
+ openPdfModal(this.dataset.pdf, this.dataset.title);
684
+ });
 
 
 
 
 
685
 
686
+ pdfCard.querySelector('.favorite-pdf-btn').addEventListener('click', function() {
687
+ togglePdfFavorite(this.dataset.pdf, this.dataset.title);
688
+ this.querySelector('i').classList.toggle('far');
689
+ this.querySelector('i').classList.toggle('fas');
690
+ this.querySelector('i').classList.toggle('text-red-500');
691
+ });
692
+ });
693
+ }
694
+
695
+ // Open video modal
696
+ function openVideoModal(videoUrl, title) {
697
+ // Modify YouTube URL to hide controls and branding
698
+ let embedUrl = videoUrl;
699
+ if (videoUrl.includes('youtube.com') || videoUrl.includes('youtu.be')) {
700
+ embedUrl = videoUrl.replace(/(youtube\.com\/watch\?v=|youtu\.be\/)/, 'youtube.com/embed/');
701
+ embedUrl += '?autoplay=1&controls=0&modestbranding=1&rel=0&showinfo=0';
702
+ }
703
 
704
+ videoPlayer.src = embedUrl;
705
+ videoModalTitle.textContent = title;
706
+ videoModal.classList.remove('hidden');
707
+
708
+ // Update favorite button state
709
+ const isFavorite = state.favorites.videos.includes(videoUrl);
710
+ toggleFavorite.innerHTML = `
711
+ <i class="${isFavorite ? 'fas' : 'far'} fa-heart ${isFavorite ? 'text-red-500' : ''}"></i>
712
+ <span class="ml-1">${isFavorite ? 'Remover dos' : 'Adicionar aos'} favoritos</span>
713
+ `;
714
+
715
+ // Set up favorite toggle for this video
716
+ toggleFavorite.onclick = () => {
717
+ toggleVideoFavorite(videoUrl, title);
718
+ const newIsFavorite = state.favorites.videos.includes(videoUrl);
719
+ toggleFavorite.innerHTML = `
720
+ <i class="${newIsFavorite ? 'fas' : 'far'} fa-heart ${newIsFavorite ? 'text-red-500' : ''}"></i>
721
+ <span class="ml-1">${newIsFavorite ? 'Remover dos' : 'Adicionar aos'} favoritos</span>
722
+ `;
723
+ };
724
  }
725
 
726
+ // Open PDF modal
727
+ function openPdfModal(pdfUrl, title) {
728
+ pdfViewer.src = pdfUrl;
729
+ pdfModalTitle.textContent = title;
730
+ pdfModal.classList.remove('hidden');
731
+
732
+ // Update favorite button state
733
+ const isFavorite = state.favorites.pdfs.includes(pdfUrl);
734
+ togglePdfFavorite.innerHTML = `
735
+ <i class="${isFavorite ? 'fas' : 'far'} fa-heart ${isFavorite ? 'text-red-500' : ''}"></i>
736
+ <span class="ml-1">${isFavorite ? 'Remover dos' : 'Adicionar aos'} favoritos</span>
737
+ `;
738
+
739
+ // Set up favorite toggle for this PDF
740
+ togglePdfFavorite.onclick = () => {
741
+ togglePdfFavorite(pdfUrl, title);
742
+ const newIsFavorite = state.favorites.pdfs.includes(pdfUrl);
743
+ togglePdfFavorite.innerHTML = `
744
+ <i class="${newIsFavorite ? 'fas' : 'far'} fa-heart ${newIsFavorite ? 'text-red-500' : ''}"></i>
745
+ <span class="ml-1">${newIsFavorite ? 'Remover dos' : 'Adicionar aos'} favoritos</span>
746
+ `;
747
+ };
748
+ }
749
+
750
+ // Toggle video favorite
751
+ function toggleVideoFavorite(videoUrl, title) {
752
+ const index = state.favorites.videos.indexOf(videoUrl);
753
+
754
+ if (index === -1) {
755
+ state.favorites.videos.push(videoUrl);
756
+ } else {
757
+ state.favorites.videos.splice(index, 1);
758
+ }
759
+
760
+ localStorage.setItem('favorites', JSON.stringify(state.favorites));
761
+ }
762
+
763
+ // Toggle PDF favorite
764
+ function togglePdfFavorite(pdfUrl, title) {
765
+ const index = state.favorites.pdfs.indexOf(pdfUrl);
766
+
767
+ if (index === -1) {
768
+ state.favorites.pdfs.push(pdfUrl);
769
+ } else {
770
+ state.favorites.pdfs.splice(index, 1);
771
+ }
772
+
773
+ localStorage.setItem('favorites', JSON.stringify(state.favorites));
774
+ }
775
+
776
+ // Show favorites
777
+ function showFavorites() {
778
+ const favoriteVideos = state.videos.filter(video => state.favorites.videos.includes(video.video));
779
+ const favoritePDFs = state.pdfs.filter(pdf => state.favorites.pdfs.includes(pdf.pdf));
780
+
781
+ // Create a modal to display favorites
782
+ const modal = document.createElement('div');
783
+ modal.className = 'fixed inset-0 bg-black bg-opacity-90 z-50 flex items-center justify-center p-4';
784
+ modal.innerHTML = `
785
+ <div class="bg-gray-800 rounded-lg p-6 max-w-4xl w-full max-h-[90vh] overflow-y-auto">
786
+ <div class="flex justify-between items-center mb-6">
787
+ <h2 class="text-2xl font-bold">Meus Favoritos</h2>
788
+ <button id="closeFavoritesModal" class="text-gray-400 hover:text-white">
789
+ <i class="fas fa-times"></i>
790
+ </button>
791
+ </div>
792
+
793
+ <div class="space-y-8">
794
+ <div>
795
+ <h3 class="text-xl font-bold mb-4">Vídeos Favoritos</h3>
796
+ ${favoriteVideos.length > 0 ? `
797
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
798
+ ${favoriteVideos.map(video => `
799
+ <div class="bg-gray-700 rounded-lg overflow-hidden">
800
+ <div class="relative">
801
+ <img src="${video.imagem}" alt="${video.titulo}" class="w-full h-28 object-cover">
802
+ <button class="play-btn absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 hover:opacity-100 transition-opacity duration-200" data-video="${video.video}" data-title="${video.titulo}">
803
+ <i class="fas fa-play text-white text-3xl"></i>
804
+ </button>
805
+ </div>
806
+ <div class="p-3">
807
+ <h3 class="font-medium truncate">${video.titulo}</h3>
808
+ </div>
809
+ </div>
810
+ `).join('')}
811
+ </div>
812
+ ` : `
813
+ <p class="text-gray-400">Nenhum vídeo favoritado</p>
814
+ `}
815
+ </div>
816
+
817
+ <div>
818
+ <h3 class="text-xl font-bold mb-4">PDFs Favoritos</h3>
819
+ ${favoritePDFs.length > 0 ? `
820
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
821
+ ${favoritePDFs.map(pdf => `
822
+ <div class="bg-gray-700 rounded-lg overflow-hidden">
823
+ <div class="relative">
824
+ <img src="${pdf.imagem}" alt="${pdf.titulo}" class="w-full h-28 object-cover">
825
+ <button class="view-pdf-btn absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 hover:opacity-100 transition-opacity duration-200" data-pdf="${pdf.pdf}" data-title="${pdf.titulo}">
826
+ <i class="fas fa-eye text-white text-3xl"></i>
827
+ </button>
828
+ </div>
829
+ <div class="p-3">
830
+ <h3 class="font-medium truncate">${pdf.titulo}</h3>
831
+ </div>
832
+ </div>
833
+ `).join('')}
834
+ </div>
835
+ ` : `
836
+ <p class="text-gray-400">Nenhum PDF favoritado</p>
837
+ `}
838
+ </div>
839
+ </div>
840
+ </div>
841
+ `;
842
+
843
+ document.body.appendChild(modal);
844
+
845
+ // Add event listeners
846
+ modal.querySelector('#closeFavoritesModal').addEventListener('click', () => {
847
+ modal.remove();
848
+ });
849
+
850
+ // Add play button listeners
851
+ modal.querySelectorAll('.play-btn').forEach(btn => {
852
+ btn.addEventListener('click', function() {
853
+ modal.remove();
854
+ openVideoModal(this.dataset.video, this.dataset.title);
855
  });
856
  });
857
 
858
+ // Add PDF button listeners
859
+ modal.querySelectorAll('.view-pdf-btn').forEach(btn => {
860
+ btn.addEventListener('click', function() {
861
+ modal.remove();
862
+ openPdfModal(this.dataset.pdf, this.dataset.title);
863
+ });
864
  });
865
+ }
866
+
867
+ // Initialize the app when the DOM is loaded
868
+ document.addEventListener('DOMContentLoaded', init);
869
  </script>
870
  <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=thigas88/vaquinha" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
871
  </html>