-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
351 lines (305 loc) · 15.6 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
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Helio Giroto">
<!--
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
<link rel="shortcut icon" href="img/favicon.ico" />
-->
<link rel="icon" type="image/x-icon" href="img/favicon.ico">
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/stylesMobile.css">
<link rel="stylesheet" href="css/stylesTablet.css">
<link rel="stylesheet" href="css/stylesDesktop.css">
<title>Bíblia 24 Horas</title>
</head>
<body>
<div class="pagina1" id="topo">
<div class="areaImg">
<!--
<img src="menuCirculo.svg" class="btMenu" alt="">
-->
<img class='btsMuda' src="img/retrocede.png" id="btRetrocede">
<div class="capa">
<div class="logo"><img id='logo' class='imgLogo' src="img/logo.png" alt=""></div>
<div class="infoLivro" id="infolivro">
<p class="nunito violeta" id="nomeLivro"></p>
<p class="nunito violeta" id="nroCapitulo"></p>
</div>
<!-- abaixo: localização incerta -->
<img id="imgMobile" class="imgPlayer" src="img/fundoMobile.jpg">
<img id="imgDesktop" class="imgPlayer" src="img/fundoDesktop.jpg">
</div>
<img class="btsMuda" src="img/avanca.png" id="btAvanca">
</div>
<audio id='player'></audio>
<div class="btPlayPause">
<img src="img/playRED.png" id="btPlay" alt="">
<img src="img/pauseRED.png" id="btPause" alt="">
</div>
<div id='nomeVersao' class="nomeVersao montserrat">Nova Versão Internacional</div>
</div>
<div class="reportarErros oculta">
<h3 class="centraliza lato">Por favor, precisamos saber dos erros de tradução que você encontrou!</h3>
<br>
<h4 class="centraliza vermelho lato">Erros encontrados em:</h4>
<h4 class="centraliza vermelho lato" id="listaErros"></h4>
<br>
<p class="centraliza negrito lato">Para nos enviar, basta clicar agora num dos botões abaixo:</p>
<br>
<div class="btsErros">
<button id="btErrosWt" class="">ENVIAR POR WHATSAPP</button>
<button id="btErrosEm" class="">ENVIAR POR EMAIL</button>
</div>
</div>
<h3 class="h4opcoes h3 lato">ESCOLHA UMA OPÇÃO:</h3>
<div class="menu">
<img src="img/icon1.png" id="iconePausa" alt="">
<img src="img/icon2.png" id="iconeDesempenho" alt="">
<img src="img/icon5.png" id="iconeLeitura" alt="">
<img src="img/icon4.png" id="iconeCompartilha" alt="">
<img src="img/icon3.png" id="iconeMais" alt="">
</div>
<div class="pagina2">
<div class="escolherVersao">
<h3 class="h4Escolher h3 lato">ESCOLHA A VERSÃO/TRADUÇÃO:</h3>
<div class="itensEscolha">
<span class="acf lato">ACF</span>
<input type="radio" class="radioVersao" id="acf" value="ACF" name="versao">
<span class="nvi lato">NVI</span>
<input type="radio" class="radioVersao" id="nvi" value="NVI" name="versao">
<span class="rv lato">RV</span>
<input type="radio" class="radioVersao" id="rv" value="RV" name="versao">
</div>
</div>
<div class="escolherOrdem">
<h3 class="h4Ordem h3 lato">ORDEM EM QUE OS LIVROS SERÃO OUVIDOS:</h3>
<div class="itensEscolha">
<span class="ordem normal lato">Ordem Normal</span>
<input type="radio" class="radioOrdem" id="impressa" value="0" name="ordem">
<span class="ordem crono lato">Ordem Cronológica</span>
<input type="radio" class="radioOrdem" id="cronologica" value="1" name="ordem">
</div>
</div>
<div class="grades" id="grades">
<h3 class="h4Livro h3 lato">SELECIONE O LIVRO DA BÍBLIA:</h3>
<div class="cabecalho lato _oculta"><strong id="cabecalhoAT">ANTIGO TESTAMENTO</strong></div>
<div class="gradeLivros gradeAT _oculta">
<!-- <div class="quadriculaLivro">AT</div> -->
</div>
<div class="cabecalho lato _oculta"><strong id="cabecalhoNT">NOVO TESTAMENTO</strong></div>
<div class="gradeLivros gradeNT _oculta">
<!-- <div class="quadriculaLivro">NT</div> -->
</div>
<small class="lato smallEscala">Escala de quanto você já ouviu:</small>
<div class="escala">
<p>0%</p>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<p>100%</p>
</div>
<h3 class="h4Capitulo h3 lato oculta">ESCOLHA O CAPÍTULO:</h3>
<small class="lato vermelho oculta smallEmVermelho">Os capítulos já ouvidos estão em vermelho:</small>
<!-- <div class="cabecalhoCapitulos lato oculta"><strong>CAPÍTULO</strong></div> -->
<div class="gradeCapitulos oculta" id="gradeCapitulos">
<!-- <div class="quadriculaCapitulo">1</div> -->
</div>
</div>
</div>
<!-- pagina das divs de menú: -->
<div class="pagina3">
<!-- dentro de cada div abaixo vai os details: https://heliogiroto.github.io/Escatologia-em-Lucas -->
<div class="divPausa oculta">
<h3 class="h4Pausa h3 lato">PROGRAMAÇÃO DE PAUSA</h3>
<h2>Pára de tocar em:</h2>
<input type="number" id="minutosPausa" class="minutosPausa" value="60">
<h2>minutos.</h2>
<button id="btProgramaPausa">PROGRAMAR PAUSA</button>
<h3 class="h4Pausa h3 lato">AGENDAR LEMBRETE:</h3>
<div class="googleAgenda">
<h3 class="lato googleTexto">1. Escolha o horário dos alertas:</h3>
<input type="time" id="horarioGoogle">
<br>
<h3>2. Em seguida, clique neste ícone:</h3>
<img id='googleAgenda' src="img/googleCalendar.png" alt="">
</div>
<br>
<small class="lato centraliza">* Não se esqueça de marcar na opção:</small>
<p class="lato centraliza">REPETIR = TODOS OS DIAS</p>
<img src="img/close.png" class="fechaJanela">
</div>
<div class="divDesempenho oculta">
<h3 class="h4Desempenho h3 lato">MEU DESEMPENHO</h3>
<details class="total">
<summary>
<h4 class="lato">DESEMPENHO TOTAL</h4>
</summary>
<div>
<h4>Até agora você já ouviu:</h4>
<h2><span id="totalCapitulos">200</span> capítulos</h2><br>
<h4>Num tempo total de:</h4>
<h2><span id="tempoOuvido">X</span></h2><br>
<h4>Para completar toda a Bíblia, faltam:</h4>
<h2><span id="faltaOuvirCapitulos">990</span> capítulos</h2>
<p>ou</p>
<h2><span id="tempoFalta">0</span></h2>
<p>aproximadamente.</p>
</div>
<div class="areaGraficoPizza">
<h3>Gráfico</h3>
<small>(Quantidade de tempo ouvido - em minutos)</small>
<p id='ajuste1' class="peq lato negrito">(Clique no gráfico para ajustá-lo melhor à tela)</p>
<div id="pizza1"></div><br>
</div>
</details>
<details class="hoje">
<summary>
<h4 class="lato">RESULTADOS DE HOJE</h4>
</summary>
<div>
<p>Hoje você ouviu:</p>
<h2><span id="totalDiario">23</span></h2>
<p>... e está a</p>
<h2><span id="mediaHoje">Z</span> minutos</h2>
<p><span id="frenteOuTras" class="negrito">W</span> da média diária.</p>
<br>
</div>
</details>
<details class="media">
<summary>
<h4 class="lato">MÉDIA E ESTIMATIVAS</h4>
</summary>
<div>
<p>O tempo médio dos últimos 10 dias</p>
<p>que você ouviu a "Bíblia Falada" foi de:</p>
<h2><span id="media">X</span> minutos.</h3>
<br>
<p>Se mantiver essa mesma média,</p>
<p>você conseguirá ouvir toda a Bíblia em:</p>
<h2><span id="faltaMedia">Y</span> dias!</h2>
<br>
<p id="msgMotivacao" class="oculta"><strong class="destaque"> ANIME-SE!!! </strong><br>Se você
ouvir
<strong>1 hora por dia</strong>, em apenas 80 dias você já terá terminado de ouvir
<strong>toda</strong> a Bíblia!</p>
<br>
<div class="abrirLembrete">
<p><strong>A FÉ VEM PELO OUVIR A PALAVRA!</strong></p>
<p>Se quiser, pode programar um aviso diário</p>
<p>para lembrar você num horário que escolher!</p>
<p>CLIQUE AQUI PARA AGENDAR LEMBRETE</p>
</div>
<br>
</div>
</details>
<details class="maisGraficos">
<summary id="topoGraficoBarras">
<h4 class="lato">GRÁFICO MENSAL E SEMANAL</h4>
</summary>
<h4 class="lato vermelho centraliza" id="escolhaPeriodo">Escolha o período de tempo:</h4>
<div class="cabecalhoPeriodo">
<div class="lato" id="semanasOuvido">SEMANAL</div>
<div class="lato" id="ult10Ouvido">ÚLT. 10 DIAS</div>
<div class="lato" id="mesesOuvido">MENSAL</div>
</div>
<p id='ajuste2' class="peq lato negrito oculta">(Clique no gráfico se precisar ajustá-lo melhor à tela)
</p>
<div class="areaGraficoBarras" id="graficosBarras"></div>
<div id="calendario"></div>
<h4 class="lato oculta" id="escolheTipoGrafico">Mude o tipo de gráfico:</h4>
<div class="btsMudaBarra oculta">
<img class="iconTipoGrafico" id="barrasV" src="img/bar_vertical.png" alt="">
<img class="iconTipoGrafico" id="barrasH" src="img/bar_horizontal.png" alt="">
<img class="iconTipoGrafico" id="linhaChart" src="img/lineChart.png" alt="">
</div>
</details>
<img src="img/close.png" class="fechaJanela">
</div>
<div class="divLeitura oculta" id="divLeitura">
<h3 class="h4Pausa h3 lato">LEITURA DO TEXTO:</h3>
<h4 class="centraliza tamMedio">Tradução:</h4>
<h3 class="centraliza tamMedio" id="nomeTraducao">ALMEIDA CORRIGIDA FIEL</h3>
<h4 class="centraliza tamMedio negrito vermelho" id="livroCapitulo"></h4>
<small id='avisoFavoritos'>Clique no <strong class="">coração</strong> para adicionar o versículo aos
Favoritos!</small>
<div class="textoBiblico">
<!-- Aqui vai o texto bíblico -->
<table id="tabela"></table>
</div>
<small id='avisoErro'><strong>*</strong> Se encontrar algum <strong>erro no texto</strong>, clique
<strong>encima do número</strong> do versículo onde notou a falha, para uma futura correção.</small>
<img src="img/close.png" class="fechaJanela">
</div>
<div class="divCompartilha oculta">
<h3 class="h4Compartilha h3 lato">COMPARTILHE A BÍBLIA FALADA:</h4>
<p class="msgCompartilhe lato">Clique no ícone da sua rede social para compartilhar essa benção com seus
familiares, amigos, pessoas que não
conseguem ler, hospitalizadas, etc.:</p>
<div class="redes">
<div>
<img class='icons' id='whatsapp' src="img/whatsapp.png" alt="whatsapp">
<p class="lato">Whatsapp</p>
</div>
<div>
<img class='icons' id='telegram' src="img/telegram.png" alt="telegram">
<p class="lato">Telegram</p>
</div>
<div>
<img class='icons' id='gmail' src="img/gmail.png" alt="gmail">
<p class="lato">Enviar por email</p>
</div>
<div>
<img class='icons' id='facebook' src="img/facebook.png" alt="facebook">
<p class="lato">Facebook</p>
</div>
<div>
<img class='icons' id='twitter' src="img/twitter.png" alt="twitter">
<p class="lato">Twitter</p>
</div>
</div>
<img src="img/close.png" class="fechaJanela">
</div>
<div class="divMais oculta">
<h3 class="h4Mais h3 lato tituloMais">MAIS RECURSOS</h3>
<div class="btsMais">
<button class='btMais' id='btExportar'><img class='iconBtMais' src="img/exportar2.png"
alt=""><span>EXPORTAR MEUS DADOS</span></button>
<button class='btMais' id='btRadio'> <img class='iconBtMais' src="img/radio2.png" alt=""><span>OUÇA A
RÁDIO J24h</span></button>
<button class='btMais' id='btOracao'> <img class='iconBtMais' src="img/oracao2.png" alt=""><span>PEDIDO
DE ORAÇÃO</span></button>
<button class='btMais' id='btProblema'><img class='iconBtMais' src="img/problema2.png"
alt=""><span>REPORTAR PROBLEMA</span></button>
<button class='btMais' id='btApoie'> <img class='iconBtMais' src="img/apoie2.png" alt=""><span>AJUDE
ESSE TRABALHO</span></button>
</div>
<img src="img/close.png" class="fechaJanela">
</div>
</div>
<script src="js/localStorage.js"></script>
<script src="js/BibliaOBJ.js"></script>
<script src="js/script.js"></script>
<script src="js/loader.js"></script>
<script src="js/graficos.js"></script>
<script src="js/exportar.js"></script>
<script src="versoes/acf.js"></script>
<script src="versoes/nvi.js"></script>
<!-- <script src="js/history_15.js"></script> -->
</body>
</html>