-
Notifications
You must be signed in to change notification settings - Fork 0
/
voluntariado.html
299 lines (277 loc) · 18 KB
/
voluntariado.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Voluntariado - Disaster</title>
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" type="icon" href="img/disaster-logo-bg.png">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/8ca23e5339.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-white text-black font-oswald">
<!-- Header -->
<header class="bg-blue-200 text-black p-4 flex justify-around items-center">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center">
<img src="img/disaster-logo-bg.png" alt="Disaster Logo" class="max-w-[50px]">
<h1 class="text-2xl font-bold"><a href="index.html">DISASTER</a></h1>
</div>
<button id="menu-btn" class="ml-auto text-black sm:hidden">
<i class="fas fa-bars text-2xl"></i>
</button>
<a href="#" id="open-login-modal-btn" class="pl-3 text-black block text-center sm:text-left relative hover:text-white hover:scale-105 transition-transform duration-300">
<i class="fa-solid fa-user text-2xl"></i>
</a>
<button id="language-toggle" class="mt-4 px-4 py-2 bg-black text-white rounded flex items-center hover:text-white hover:scale-105 transition-transform duration-300">
<i id="language-icon" class="fas fa-language mr-2"></i>
<span>Mudar para Inglês</span>
</button>
</div>
</header>
<!-- Sidebar + Main Content -->
<div class="flex flex-col sm:flex-row">
<aside id="sidebar" class="sm:w-1/4 bg-blue-100 p-4 sm:block hidden">
<div class="relative w-full max-w-xs mb-4">
<input id="search-input" type="text" placeholder="Search..."
class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg">
<i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-black"></i>
</div>
<nav>
<ul class="list-none p-0">
<li class="mt-2 mb-2 search-item">
<a href="#"
class="text-black block sm:text-left relative hover:text-white hover:bg-blue-800 hover:scale-105 transition-transform duration-300 hover:shadow-md">
<i class="fas fa-home mr-2"></i> Home
<span
class="absolute bottom-0 left-0 w-full h-0.5 bg-white transition-all duration-300 transform scale-x-0 hover:scale-x-100"></span>
</a>
</li>
<li class="mt-2 mb-2 search-item">
<a href="#origin"
class="text-black block sm:text-left relative hover:text-white hover:bg-blue-800 hover:scale-105 transition-transform duration-300 hover:shadow-md">
<i class="fas fa-map-marker-alt mr-2"></i> Origin of Disaster
<span
class="absolute bottom-0 left-0 w-full h-0.5 bg-white transition-all duration-300 transform scale-x-0 hover:scale-x-100"></span>
</a>
</li>
<li class="mt-2 mb-2 search-item">
<a href="#news"
class="text-black block sm:text-left relative hover:text-white hover:bg-blue-800 hover:scale-105 transition-transform duration-300 hover:shadow-md">
<i class="fas fa-newspaper mr-2"></i> Disaster News
<span
class="absolute bottom-0 left-0 w-full h-0.5 bg-white transition-all duration-300 transform scale-x-0 hover:scale-x-100"></span>
</a>
</li>
<li class="mt-2 mb-2 search-item">
<a href="#testimonials"
class="text-black block sm:text-left relative hover:text-white hover:bg-blue-800 hover:scale-105 transition-transform duration-300 hover:shadow-md">
<i class="fas fa-quote-left mr-2"></i> Testimonials
<span
class="absolute bottom-0 left-0 w-full h-0.5 bg-white transition-all duration-300 transform scale-x-0 hover:scale-x-100"></span>
</a>
</li>
<li class="mt-2 mb-2 search-item">
<a href="#donation"
class="text-black block sm:text-left relative hover:text-white hover:bg-blue-800 hover:scale-105 transition-transform duration-300 hover:shadow-md">
<i class="fas fa-donate"></i> Donate
<span
class="absolute bottom-0 left-0 w-full h-0.5 bg-white transition-all duration-300 transform scale-x-0 hover:scale-x-100"></span>
</a>
</li>
<li class="mt-2 mb-2 search-item">
<a href="voluntariado.html" class="text-black block sm:text-left relative hover:text-white hover:bg-blue-800 hover:scale-105 transition-transform duration-300 hover:shadow-md">
<i class="fas fa-hands-helping mr-2"></i> Voluntariado
</a>
</li>
<li class="mt-2 mb-2 search-item">
<a href="#about"
class="text-black block sm:text-left relative hover:text-white hover:bg-blue-800 hover:scale-105 transition-transform duration-300 hover:shadow-md">
<i class="fas fa-info-circle mr-2"></i> About Us
<span
class="absolute bottom-0 left-0 w-full h-0.5 bg-white transition-all duration-300 transform scale-x-0 hover:scale-x-100"></span>
</a>
</li>
</ul>
</nav>
</aside>
<!-- Main Content -->
<main class="sm:w-3/4 p-4">
<div id="volunteer" class="mt-8 ml-5 p-3 bg-white border border-gray-200 rounded-lg shadow-md">
<h2 class="text-2xl font-bold mb-6 text-center">Inscreva-se como Voluntário</h2>
<form action="#" method="POST">
<!-- Name Field -->
<div class="mb-4">
<label for="name" class="block text-gray-700 font-bold mb-2">Nome</label>
<input type="text" id="name" name="name" placeholder="Digite seu nome"
class="w-full p-2 border border-gray-300 rounded-lg" required>
</div>
<!-- Email Field -->
<div class="mb-4">
<label for="email" class="block text-gray-700 font-bold mb-2">Email</label>
<input type="email" id="email" name="email" placeholder="Digite seu email"
class="w-full p-2 border border-gray-300 rounded-lg" required>
</div>
<!-- Phone Number Field -->
<div class="mb-4">
<label for="phone" class="block text-gray-700 font-bold mb-2">Telefone</label>
<input type="tel" id="phone" name="phone" placeholder="Digite seu telefone"
class="w-full p-2 border border-gray-300 rounded-lg">
</div>
<!-- Volunteer Preferences -->
<div class="mb-4">
<label class="block text-gray-700 font-bold mb-2">Preferências de Voluntariado</label>
<div class="flex items-center space-x-4">
<label class="inline-flex items-center">
<input type="checkbox" name="preferences" value="event" class="form-checkbox text-blue-500">
<span class="ml-2">Eventos</span>
</label>
<label class="inline-flex items-center">
<input type="checkbox" name="preferences" value="education" class="form-checkbox text-blue-500">
<span class="ml-2">Educação</span>
</label>
<label class="inline-flex items-center">
<input type="checkbox" name="preferences" value="community" class="form-checkbox text-blue-500">
<span class="ml-2">Comunidade</span>
</label>
</div>
</div>
<!-- Message Field -->
<div class="mb-4">
<label for="message" class="block text-gray-700 font-bold mb-2">Mensagem (opcional)</label>
<textarea id="message" name="message" placeholder="Deixe uma mensagem"
class="w-full p-2 border border-gray-300 rounded-lg"></textarea>
</div>
<!-- Submit Button -->
<div class="text-center">
<button type="submit" class="bg-blue-500 text-white px-6 py-2 rounded-lg">Inscrever-se</button>
</div>
</form>
</div>
<h3 class="text-2xl font-bold mt-8 mb-4">Relatos de Voluntários</h3>
<div id="testimonials" class="mb-6">
<div class="bg-blue-100 p-4 rounded-lg shadow">
<p><strong>Maria:</strong> "Foi uma experiência incrível, pude ajudar muitas pessoas!"</p>
</div>
<div class="bg-blue-100 p-4 rounded-lg shadow mt-2">
<p><strong>João:</strong> "A equipe é maravilhosa e muito acolhedora!"</p>
</div>
</div>
<h3 class="text-2xl font-bold mt-8 mb-4">Entidades Associadas</h3>
<div class="mt-8 mx-5 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Card 1 -->
<div class="bg-white border border-gray-200 rounded-lg shadow-md p-4">
<img src="path/to/image1.jpg" alt="Entidade 1" class="w-full h-32 object-cover rounded-md">
<h3 class="text-xl font-bold mt-4">Entidade 1</h3>
<p class="text-gray-700 mt-2">Descrição breve da entidade 1.</p>
<button class="mt-4 inline-block bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition duration-200 entity-button" data-entity="entity1">Saiba Mais</button>
</div>
<!-- Card 2 -->
<div class="bg-white border border-gray-200 rounded-lg shadow-md p-4">
<img src="path/to/image2.jpg" alt="Entidade 2" class="w-full h-32 object-cover rounded-md">
<h3 class="text-xl font-bold mt-4">Entidade 2</h3>
<p class="text-gray-700 mt-2">Descrição breve da entidade 2.</p>
<button class="mt-4 inline-block bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition duration-200 entity-button" data-entity="entity2">Saiba Mais</button>
</div>
<!-- Card 3 -->
<div class="bg-white border border-gray-200 rounded-lg shadow-md p-4">
<img src="path/to/image3.jpg" alt="Entidade 3" class="w-full h-32 object-cover rounded-md">
<h3 class="text-xl font-bold mt-4">Entidade 3</h3>
<p class="text-gray-700 mt-2">Descrição breve da entidade 3.</p>
<button class="mt-4 inline-block bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition duration-200 entity-button" data-entity="entity3">Saiba Mais</button>
</div>
</div>
<div id="info-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center">
<div class="bg-white p-6 rounded-lg shadow-lg max-w-lg w-full">
<h2 id="modal-title" class="text-xl font-bold mb-2"></h2>
<p id="modal-description" class="mb-4"></p>
<p id="modal-cnpj" class="mb-2"></p>
<p id="modal-address" class="mb-2"></p>
<p id="modal-phone" class="mb-2"></p>
<p id="modal-email" class="mb-2"></p>
<button class="mt-4 bg-red-500 text-white px-4 py-2 rounded-lg" onclick="closeModal()">Fechar</button>
</div>
</div>
<h3 class="text-2xl font-bold mt-8 mb-4">Vídeos de Propaganda</h3>
<div class="carousel relative" data-carousel="static">
<div class="carousel-inner relative w-full overflow-hidden">
<div class="carousel-item active relative float-left w-full">
<iframe width="100%" height="315" src="https://www.youtube.com/embed/video1" frameborder="0" allowfullscreen></iframe>
</div>
<div class="carousel-item relative float-left w-full">
<iframe width="100%" height="315" src="https://www.youtube.com/embed/video2" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<button class="carousel-control-prev" type="button" data-carousel="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</button>
<button class="carousel-control-next" type="button" data-carousel="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</button>
</div>
</main>
</div>
<!-- Footer -->
<footer id="about" class="bg-blue-200 text-black-800 p-6">
<div class="container mx-auto flex flex-col sm:flex-row items-center justify-center">
<!-- Seção About Us -->
<div class="text-center sm:text-left w-full sm:w-1/3 mb-4 sm:mb-0">
<h3 class="font-bold text-lg">About Us</h3>
<p class="text-sm">We provide timely and accurate information on natural disasters around the globe.</p>
<div class="flex justify-center sm:justify-start space-x-4 mt-2">
<a href="#" class="hover:text-blue-500 hover:scale-105 transition-transform duration-300">
<i class="fa-brands fa-square-facebook"></i>
</a>
<a href="#" class="hover:text-blue-500 hover:scale-105 transition-transform duration-300">
<i class="fa-brands fa-square-twitter"></i>
</a>
<a href="#" class="hover:text-blue-500 hover:scale-105 transition-transform duration-300">
<i class="fa-brands fa-square-instagram"></i>
</a>
</div>
</div>
<!-- Seção Testemunho -->
<div class="text-center sm:text-left w-full sm:w-1/3 mb-4 sm:mb-0">
<div class="flex justify-center sm:justify-start">
<h3 class="font-bold text-lg">Give your testimony</h3>
<a href="#" class="hover:text-blue-500 hover:scale-105 transition-transform duration-300">
<i class="p-2 fa-solid fa-pen-to-square"></i>
</a>
</div>
<p class="text-sm">Your story can inspire others. Share your testimony and be part of this journey with us!</p>
</div>
<!-- Seção Doação -->
<div class="text-center sm:text-left w-full sm:w-1/3 mb-4 sm:mb-0">
<div class="flex justify-center sm:justify-start">
<h3 class="font-bold text-lg">Make a donation</h3>
<a href="#donation" class="hover:text-blue-500 hover:scale-105 transition-transform duration-300">
<i class="p-2 fa-solid fa-square-plus"></i>
</a>
</div>
<p class="text-sm">Your generosity can make a difference. Donate now and help transform lives!</p>
</div>
<!-- Seção Logo -->
<div class="text-center sm:text-right w-full sm:w-1/3 flex justify-center sm:justify-end">
<div class="text-sm mt-2 items-center">
<img src="img/disaster-logo-bg.png" alt="Disaster Logo" class="mx-auto" style="max-width: 130px;">
© 2024 Disaster. All Rights Reserved.
</div>
</div>
</div>
</footer>
<script>
// Função para manipular o envio do formulário
document.getElementById('volunteer-form').addEventListener('submit', function(event) {
event.preventDefault();
alert('Inscrição enviada com sucesso!');
this.reset();
});
</script>
</body>
</html>