-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
251 lines (231 loc) · 13.2 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
<!-- TODO: Make the website completely dark mode (dark background, white font)-->
<!DOCTYPE html>
<html lang="es" dir="ltr" class="rootsize">
<!-- Head -->
<head>
<!-- Meta -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Title and Favicon -->
<title>Alkometer</title>
<link rel="icon" type="image/png" href="images/favicon.png">
<!-- SEO -->
<meta name="description" content="Alkometer es un alcoholímetro online que te permite calcular tu alcoholemia de forma rápida y sencilla. ¡No juzga, no multa, solo te cuida!">
<meta name="keywords" content="Alkometer, alcoholímetro, alcoholemia, calculadora de alcoholemia, fórmula de Widmark, conducir alcoholizado, seguridad vial">
<meta name="author" content="Tomás Bravo, Tomás Bruno, Joaquín Suárez Vallejos, Brian Valente">
<meta name="robots" content="index, follow">
<meta name="theme-color" content="#000000">
<!-- Fonts -->
<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=Manrope:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="fonts/fa/css/all.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/style-global-blocks.css">
<link rel="stylesheet" href="css/style-global.css">
<!-- Font Awesome CDN Link (Incons)-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
</head>
<!-- Body -->
<body>
<header>
<div id="header-content">
<a id="header-logo">
<div id="isotype"></div>
<div id="logo"></div>
</a>
<button aria-label="Abrir menú" href="javascript:void(0)" id="header-menu-toggle"><i class="fa-solid"></i></button>
<nav id="headnav">
<ul>
<li class="active"><a href="#home">Inicio</a></li>
<li><a href="#que_es_alcoholemia">Acerca de</a></li>
<li><a href="#alcoholimetro">Alcoholímetro</a></li>
<li><a href="#contact">Contacto</a></li>
</ul>
</nav>
</div>
</header>
<main class="screen w_100 ml_auto mr_auto">
<!-- Banner -->
<section class="banner dflex flex_wrap jc_c ai_c pt_150_tablet pb_125_tablet" id="home">
<div class="container pl_60 pr_60">
<div class="text">
<h1 class="slogan w_auto text-overlay fs_45 f_900 text_white text_center ml_15 mr_15 fs_40_tablet fs_32_mobile">El único alcoholímetro que no juzga y no multa... tampoco quiere tu auto, sólo tu bienestar.</h1>
</div>
<a id="hero-link" href="#alcoholimetro" class="button big inline dark icon-martini-glass fs_18_mobile">Calculá tu alcoholemia</a>
</div>
</section>
<!-- Page Divider 1 -->
<div class="page_divider w_40 w_55_tablet w_70_mobile dflex ml_auto mr_auto pt_40"></div>
<!-- ¿Qué es la Alcoholemia? -->
<section class="title_line_color" id="que_es_alcoholemia">
<div class="container">
<div class="contentblock dflex flex_wrap jc_sb ai_c pt_40">
<div class="text f_r w_100 pl_0 w_100_tablet pl_0_tablet">
<h2 class="text_center fs_42 fs_38_tablet fs_32_mobile smallborder after lrb pb_40 mb_30">¿QUÉ ES LA ALCOHOLEMIA?</h2>
<p class="fs_22 text_center mb_50 ml_40 mr_40 ml_20_tablet mr_20_tablet ml_5_mobile mr_5_mobile lh_200 fs_20_tablet">
La <b>alcoholemia</b> es la <b>concentración de alcohol en sangre</b>,
un dato crucial para evaluar el <b>grado de intoxicación etílica</b> de una
persona. Cuando tomamos bebidas alcohólicas, el alcohol pasa al torrente
sanguíneo y comienza a afectar tanto el cuerpo como la mente. El nivel de alcoholemia se
expresa en gramos de alcohol por litro de sangre <b>(g/L)</b> y puede
determinarse mediante diferentes métodos, siendo el <b>análisis de sangre</b> y
las <b>pruebas de aliento con alcoholímetro</b> los más comunes.
</p>
</div>
<div class="controlAlcoholemia1 aligncenter mb_50">
<img src="images/controlAlcoholemia1.webp" alt="" class="img_basic img_fit"/>
</div>
<p class="fs_22 text_center ml_40 mr_40 ml_20_tablet mr_20_tablet ml_5_mobile mr_5_mobile lh_200 fs_20_tablet">
Esta medición en g/L es fundamental para evaluar la capacidad de una persona para realizar actividades
que requieren <b>atención y coordinación</b>, como <b>conducir</b>. La <b>conducción bajo los efectos del alcohol</b> es
una de las principales causas de <b>accidentes de tráfico</b> en el mundo, y cada país ha establecido normativas
específicas para combatir esta problemática y garantizar la seguridad vial. Los <b>límites legales</b> de alcoholemia
varían, pero generalmente se sitúan entre <b>0,2 y 0,5 g/L</b> para conductores particulares. Por otro lado,
hay muchos países que han adoptado la política de <b>tolerancia cero</b>, donde el límite es directamente <b>0 g/L</b>,
cualquiera sea el caso. Las <b>sanciones</b> por conducir alcoholizado pueden variar desde <b>multas económicas</b>
y la <b>suspensión de la licencia de conducir</b> hasta penas de cárcel en casos de reincidencia o accidentes graves.
Para más información sobre el control de alcoholemia,
visita este <a class="click_aqui" href="https://es.wikipedia.org/wiki/Control_de_alcoholemia" target="_blank">artículo sobre control de alcoholemia</a> en Wikipedia.
</p>
</div>
</div>
</section>
<!-- Page Divider 2 -->
<div class="page_divider w_40 w_55_tablet w_70_mobile dflex ml_auto mr_auto pt_40"></div>
<!-- Alcoholímetro (Calculadora de Alcoholemia) -->
<section class="title_line_color " id="alcoholimetro">
<div class="container">
<div class="contentblock dflex flex_wrap jc_sb ai_c pt_45">
<div class="text f_r w_100 pl_0 w_100_tablet pl_0_tablet">
<h2 class="text_center fs_42 fs_38_tablet fs_32_mobile smallborder after lrb pb_40 mb_30">ALCOHOLÍMETRO</h2>
<p class="fs_22 text_center mb_50 ml_40 mr_40 ml_20_tablet mr_20_tablet ml_5_mobile mr_5_mobile lh_200 fs_20_tablet">
A continuación, te presentamos nuestro <b>"alcoholímetro online"</b>, una <b>calculadora de alcoholemia</b>
basada en la <a class="click_aqui"
href="https://es.wikihow.com/calcular-el-contenido-de-alcohol-en-la-sangre-(f%C3%B3rmula--de-Widmark)"
target="_blank">fórmula de Widmark</a>.
¿Es 100% exacta? No, pero es bastante precisa. ¿Van a recopilar mis datos? No, tranquilo/a, no somos Facebook.
</p>
</div>
<div id="calculator">
<div id="calculator-pages">
<form id="personal-info">
<h3 class="fs_32 fs_28_mobile">Cuéntanos un poco sobre ti...</h3>
<p class="fs_20 fs_18_mobile">Esta información será utilizada para obtener resultados más precisos.</p>
<div class="page-content">
<div class="multi-input fs_18 fs_16_mobile">
<label for="weight">Peso (en kg): </label>
<input name="weight" id="weight" type="number" min="20" max="500" step="0.1" placeholder="Ej: 70" required>
<label for="gender">Género: </label>
<select name="gender" id="gender" required>
<option value="" disabled selected>Seleccionar...</option>
<option value="male">Hombre</option>
<option value="female">Mujer</option>
</select>
</div>
</div>
<button type="submit" class="button continue-btn">Continuar</button>
</form>
<form id="drinks-info">
<h3 class="fs_32 fs_28_mobile">¿Qué bebidas tomaste?</h3>
<p class="fs_20 fs_18_mobile">El tipo de bebida es importante ya que cada una tiene una graduación alcohólica diferente.</p>
<div class="page-content">
<ul id="drinks-table">
<li id="drinks-table-header">
<span>Bebida</span>
<span>Mililitros consumidos</span>
<span>Graduación alcohólica</span>
<span>Tiempo desde la ingesta (en horas)</span>
</li>
<li id="drinks-table-add">
<button id="add-drink" class="button small green plus">Agregar bebida</button>
</li>
</ul>
</div>
<button type="submit" class="button continue-btn">Continuar</button>
</form>
<div id="results">
<div class="gauge" id="gauge">
<div class="gauge-mask">
<div class="gauge-bar"></div>
</div>
</div>
<h3 class="fs_32 fs_28_mobile">Title</h3>
<p class="fs_20 fs_16_mobile">Results</p>
<button type="submit" class="button restart-btn" id="restart-btn">Volver a empezar</button>
</div>
</div>
<button aria-label="Ir atrás" id="back-btn"></button>
</div>
</div>
</div>
</section>
<!-- Contacto -->
<section class="contact pt_60 pb_60 pl_60 pr_60 bg_gainsboro mt_70 mt_60_tablet pt_60_tablet pb_60_tablet pl_60_tablet pr_60_tablet pt_30_mobile pb_30_mobile pl_30_mobile pr_30_mobile" id="contact">
<div class="container">
<h2 class="text_center tt_u fs_42 fs_38_tablet fs_32_mobile smallborder after lrb pb_40 mb_40 mb_30_tablet pb_30_tablet">
Contacto por WhatsApp <i class="fab fa-whatsapp ml_6"></i>
</h2>
<h3 class="text_center fs_20 fs_16_mobile mb_30 f_400">¡Estamos a disposición por cualquier consulta que tengas!</h3>
<div class="contactform style1 aligncenter w_50 w_75_tablet w_100_mobile">
<form method="post" action="/" id="contact-form">
<input type="text" name="firstname" placeholder="Nombre" required>
<input type="text" name="lastname" placeholder="Apellido" required>
<input type="email" name="email" placeholder="E-mail" required>
<textarea name="message" placeholder="Tu mensaje..." required class="pt_15 pb_15 pr_15 pl_15 mb_35_fhd mb_25_tablet pt_10_mobile pb_10_mobile pr_15_mobile pl_15_mobile"></textarea>
<button type="submit" class="button icon-arrow-right submit_button">Enviar</button>
</form>
</div>
</div>
</section>
</main>
<footer class="mt_10 mt_20_tablet mt_30_mobile">
<div>
<span class="f_800">© <span id="year"></span> - Alkometer<span class="f_300"> | Todos los derechos reservados</span></span>
<span class="credits">
Desarrollado por
<a target="_blank" href="https://bravoto.github.io/Ficha-personal-parcial1/">Tomás Bravo</a>,
<a target="_blank" href="https://tomardo04.github.io/dydw-ficha/">Tomás Bruno</a>,
<a target="_blank" href="https://joaquinsuarezvallejos.github.io/PrimerParcial-JoaquinSuarezVallejos-DesarrolloWeb/">Joaquín Suárez Vallejos</a> y
<a target="_blank" href="https://brianvalente.github.io/uade-dydw-parcial-1/">Brian Valente</a>.
</span>
</div>
<div>
<img alt="Logo de UADE" loading="lazy" height="40" src="images/uade.webp">
</div>
</footer>
<!-- Templates -->
<template id="calculator-drink-row-template">
<li>
<label>
<span>Bebida:</span>
<select data-name="Bebida" name="drink" required>
<option value="" disabled selected>Seleccionar...</option>
</select>
</label>
<label>
<span>Mililitros consumidos:</span>
<input data-name="Mililitros consumidos" name="ml" type="number" min="1" step="1" placeholder="Ej: 500" required>
</label>
<label>
<span>Graduación alcohólica:</span>
<input data-name="Graduación alcohólica" name="graduation" type="number" min="0.1" step="any" placeholder="Ej: 5" required>
</label>
<label>
<span>Tiempo desde la ingesta (en horas):</span>
<input data-name="Tiempo desde la ingesta (en horas)" name="hours-passed" type="number" min="0.01" step="any" placeholder="Ej: 2" required>
</label>
<button class="delete-btn button small danger trash inline"></button>
</li>
</template>
</body>
<!-- JS -->
<script defer src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.11/dayjs.min.js" integrity="sha512-FwNWaxyfy2XlEINoSnZh1JQ5TRRtGow0D6XcmAWmYCRgvqOUTnzCxPc9uF35u5ZEpirk1uhlPVA19tflhvnW1g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.11/locale/es.min.js" integrity="sha512-zXA0Z+C+U5x6VWKPRCOQUC+5uPvpCEUM5Cs40sJXPO6Jr9Bd+j+h94eMMDcZOu5bSITZJLD83kW37oZbxGY6PA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.11/plugin/duration.min.js" integrity="sha512-t0b2NyBypSms8nA81pldWo0mXbfMotsdYgvs4awmbi/GU/25YBNLnXj+I9DAMV7WGZ8+z8wtRolX7zSF2LN8UQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.11/plugin/relativeTime.min.js" integrity="sha512-MVzDPmm7QZ8PhEiqJXKz/zw2HJuv61waxb8XXuZMMs9b+an3LoqOqhOEt5Nq3LY1e4Ipbbd/e+AWgERdHlVgaA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script defer src="js/js-global-blocks.js"></script>
<script defer src="js/navjs.js"></script>
</html>