-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
302 lines (275 loc) · 13.9 KB
/
index.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
300
301
302
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
<title>Projeto Doar Sangue</title>
<link rel='stylesheet' type='text/css' media='screen' href='./css/home.css'>
<!-- link Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<!-- leaflet -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
</head>
<body>
<script src="https://www.gstatic.com/firebasejs/7.15.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.1/firebase-auth.js"></script>
<script src="https://unpkg.com/geofirestore/dist/geofirestore.js"></script>
<script language="javascript" type="text/javascript" src="./js/firestore.js"></script>
<script language="javascript" type="text/javascript" src="./js/home.js"></script>
<!-- Modal inicial sobre a localização -->
<div class="modal_selecione" id='modal_localizacao' tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header_selecione" >
<h2 class="modal-title">Atenção</h2>
</div>
<div class="modal-body">
<p id='texto_navegacao'>Os locais expostos no site se restringem a cidade de São Paulo, pedimos que não conceda a localização caso não esteja nela. Por ter fins acadêmicos, os dados acerca da situação do estoque de sangue podem ser fictícios.</p>
<button id="button_localizacao" onclick="inicio()" type="button"><h3> Ok, entendi</h3></button>
</div>
</div>
</div>
</div>
</div>
<!-- Modal inicial para escolher do tipo sanguineo -->
<div id="container_selecione">
<div class="modal_selecione" id='myModal' tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header_selecione">
<h2 class="modal-title">Selecione o tipo sanguíneo</h2>
</div>
<div class="modal-body">
<div class="tipo_sanguino">
<p id='textTipo'>(Mostraremos quais locais mais precisam do tipo informado)</p>
<div id="container">
<!-- botões para escolher os tipos sanguineos -->
<!-- cada botão tem um valor de classe diferente -->
<button class="close" data-dismiss="modal" aria-label="Fechar" type="button" id="botao" class="a+"
value="Apos" onclick="verificaLocais(this.value);aciona()">
A+
<img src="./Ícones/bolsa_alta.svg">
</button>
<button class="close" data-dismiss="modal" aria-label="Fechar" type="button" id="botao" class="a-"
value="Aneg" onclick="verificaLocais(this.value);aciona()">
A-
<img src="./Ícones/bolsa_alta.svg">
</button>
<button class="close" data-dismiss="modal" aria-label="Fechar" type="button" id="botao" class="b+"
value="Bpos" onclick="verificaLocais(this.value);aciona()">
B+
<img src="./Ícones/bolsa_alta.svg">
</button>
<button class="close" data-dismiss="modal" aria-label="Fechar" type="button" id="botao" class="b-"
value="Bneg" onclick="verificaLocais(this.value);aciona()">
B-
<img src="./Ícones/bolsa_alta.svg">
</button>
</div >
<div id="container_secundario">
<button class="close" onclick="verificaLocais(this.value);aciona()" data-dismiss="modal" aria-label="Fechar"
type="button" id="botao" class="o+" value="Opos">
O+
<img src="./Ícones/bolsa_alta.svg">
</button>
<button class="close" onclick="verificaLocais(this.value);aciona()" data-dismiss="modal" aria-label="Fechar"
type="button" id="botao" class="o-" value="Oneg">
O-
<img src="./Ícones/bolsa_alta.svg">
</button>
<button class="close" onclick="verificaLocais(this.value);aciona()" data-dismiss="modal" aria-label="Fechar"
type="button" id="botao" class="ab+" value="ABpos">
AB+
<img src="./Ícones/bolsa_alta.svg">
</button>
<button class="close" onclick="verificaLocais(this.value);aciona()" data-dismiss="modal" aria-label="Fechar"
type="button" id="botao" class="ab-" value="ABneg">
AB-
<img src="./Ícones/bolsa_alta.svg">
</button>
</div>
<button id="button_tipo" onclick="verificaLocais(this.value);aciona()" class="close" data-dismiss="modal"
aria-label="Fechar" class="sem_escolha" value="0" type="button"><u>Não quero informar</u></button>
</div>
</div>
</div>
</div>
</div>
</div>
<div id='overlay'></div>
<!-- Botão de informações -->
<div class="informacoes">
<button type="button" id='button_informacao' onclick='habilita_survey()' class="btn btn-primary" data-toggle="modal"
data-target="#modalExemplo">
<h3>Saiba Mais</h3>
</button>
<!-- Modal -->
<div class="modal fade" id="modalExemplo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">
<img src="./Ícones/bolsa_media.png">Informações
</h5>
<button type="button" onclick='close_modal()' class="close" data-dismiss="modal" aria-label="Fechar">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h6>A doação de sangue deve ser voluntária, anônima e altruísta.</h6>
<p> No dia da doação é feita uma entrevista com um profissional de saúde, além de uma avaliação do histórico
médico do doador para avaliar a sua aptidão ou não para a doação de sangue.</p>
<br>
<h6>Frequência máxima para doações: </h6>
<ul>
<li>Homens: 4 doações anuais, com intervalo mínimo de 2 meses; </li>
<li>Mulheres: 3 doações anuais, com intervalo mínimo de 3 meses. </li>
</ul>
<br>
<h6>Requisitos mínimos para doação: </h6>
<p>O doador deve ter idade entre 16 e 69 anos, onde: </p>
<ul>
<li>Candidatos menores de 18 anos devem possuir consentimento formal do seu responsável legal; </li>
<li>O limite para a primeira doação é de 60 anos.</li>
</ul>
<p>O candidato deve pesar, no mínimo, 50kg; </p>
<p>A pulsação do candidato deverá ser regular e apresentar características normais; </p>
<p>Não consumir refeições gordurosas por pelo menos 3 horas antes da doação;</p>
<p>Não ingerir bebidas alcoólicas 12 horas antes da doação.</p>
<br>
<h6>Após a doação:</h6>
<p>É recomendável que permaneça por 15 minutos no local após fazer a doação;</p>
<p>Deve ser oferecida hidratação ao doador, repondo líquidos;</p>
<p>Aguardar, pelo menos, 60 minutos antes de consumir produtos fumígenos, como cigarro; </p>
<p>Permanecer aproximadamente 12 horas sem realizar qualquer esforço físico.</p>
<br>
<h6>Inaptidão temporária:</h6>
<p>Até 12 semanas após o parto ou abortamento; </p>
<p>Mulheres em período de amamentação, em que o parto tenha ocorrido há menos de 12 meses;</p>
<p>Recebimento de transfusões de sangue nos últimos 12 meses;
<p>
<p>Caso de infecções e uso de antibióticos. Estará apto à doação 2 semanas após o fim do tratamento e
desaparecimento dos sintomas;</p>
<p>Candidatos que se deslocarem ou que residam em regiões com epidemias. Aptidão após 30 dias da saída
dessas regiões; </p>
<p>Sintoma de gripe ou resfriado, junto à temperatura corporal maior ou igual 38°. Inapto por 2 semanas após
desaparecer os sintomas;</p>
<p>No caso de Malária:</p>
<ul>
<li>Caso de malária nos 12 meses que antecedem a doação; </li>
<li>Febre ou suspeita de malária nos últimos 30 dias; </li>
</ul>
<p>O uso de anabolizantes, crack ou cocaína impede a doação por um período de 12 meses;</p>
<p>O uso de maconha impede a doação por 12 horas;</p>
<p>No caso de Doença Sexualmente Transmissível, há inaptidão por 12 meses após a cura;</p>
<p>Candidatos que tenham feito "piercing", tatuagem ou maquiagem definitiva há inaptidão por 12 meses;</p>
<p>Ter se submetido a cirurgias e procedimentos odontológicos impede a doação por tempo variável de acordo
com o procedimento;</p>
<p>Procedimentos endoscópicos impedem a doação por 6 meses;</p>
<!-- homens que tiveram relações sexuais com outros homens e/ou as parceiras sexuais destes inaptidão por 12 meses-->
<br>
<h6>Inaptidão definitiva:</h6>
<p>Alcoolismo crônico; </p>
<p>Antecedente de hepatite viral após os 11 anos de idade; </p>
<p>Antecedente de infecção pelos agentes HBV, HCV, HIV ou HTLV;
<p>
<p>Antecedente epidemiológico para Doença de Chagas; </p>
<p>Uso de drogas injetáveis ilícitas.</p>
<br>
<p><b>FONTE: PORTARIA DE CONSOLIDAÇÃO Nº 5, DE 28 DE SETEMBRO DE 2017 - ACESSO 25/05/2020 AS 17H20</b></p>
</div>
</div>
</div>
</div>
</div>
<!-- Questinario -->
<div id="executar_questionario">
<a href="https://forms.gle/K7wwEguSEY8R1Fpo6" target="_blank">
<img id='img_questionario' onclick="fechar_balao()"
src="./Ícones/icone-survey.svg" width="65" height="65"></a>
<div id="balao_questionario">
<p>Obrigado por acessar o site! Você pode nos ajudar avaliando o sistema no ícone abaixo.</p>
</div>
</div>
<!-- Legenda -->
<div id="legenda">
<button class="btn btn-primary" id='button_legenda' type="button" data-toggle="collapse"
data-target=".multi-collapse" aria-expanded="true"
aria-controls="multiCollapseExample1">Legenda</button>
<div class="collapse multi-collapse" id="multiCollapseExample1" >
<div class="card card-body">
<div id="info_legenda">
<!-- Linha crítico -->
<div class="row">
<div class="critico">
<div class="col" id="coluna_legenda">
<h4>Crítico</h4>
</div>
<div class="col" id="coluna_imagem">
<img src="./Ícones/marcador-claro.svg">
</div>
</div>
</div>
<!-- fim linha critico -->
<!-- Linha alerta -->
<div class="row">
<div class="alerta">
<div class="col" id="coluna_legenda">
<h4>Alerta</h4>
</div>
<div class="col" id="coluna_imagem">
<img src="./Ícones/marcador-medio.svg">
</div>
</div>
</div>
<!-- fim linha alerta -->
<!-- Linha estavel -->
<div class="row">
<div class="estavel">
<div class="col" id="coluna_legenda">
<h4>Estável</h4>
</div>
<div class="col" id="coluna_imagem">
<img src="./Ícones/marcador-escuro.svg">
</div>
</div>
</div>
<!-- fim linha estavel -->
</div>
</div>
</div>
</div>
<!-- local é pra abrir o modal de local -->
<div id='local'></div>
<div id='mapid'></div>
<script language="javascript" type="text/javascript" src="./js/mapbox.js"></script>
<script type="text/javascript">
$('#myModal').modal({
keyboard: false
})
$('#multiCollapseExample1').on('hidden.bs.collapse', function () {
document.getElementById("button_legenda").style.bottom = "12px";
})
$('#multiCollapseExample1').on('show.bs.collapse', function () {
document.getElementById("button_legenda").style.bottom = "125px";
})
</script>
</body>
</html>