-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
225 lines (198 loc) · 15.5 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
<html lang="en">
<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">
<title>IMC Cálculo</title>
<meta name="facebook-domain-verification" content="dmul7k34k1v4nsi55jas5knv1t04hd" />
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="./styles/globals.css">
</head>
<body>
<!-- require Tailwind CSS v2.0+ -->
<div class="p-4 bg-gradient-to-r from-blue-100">
<div class="container mx-auto md:px-14">
<div class="items-center flex flex-wrap">
<div class="p-2 inline-flex items-center justify-center w-full mb-2 shadow-sm rounded-sm">
<a href="https://medfitpaulista.com.br/" target="_blank">
<img src="imgs/logo.png" class="w-64"></img>
</a>
</div>
<div class="inline-flex items-center justify-center w-full mb-6">
<h1 class="text-5xl mt-6 mb-3 font-bold text-center">Descubra seu peso ideal.</h1>
</div>
<!-- Inicio do form -->
<div id="form" class="bg-blue-50 md:w-6/12 mx-auto lg:w-4/12 md:6/12 shadow-md w-full">
<div class="py-8 px-8 rounded-xl">
<h1 class="font-medium text-3xl text-center">Calcule o seu IMC</h1>
<form id="formIMC" action="/resultado" method="POST" class="mt-6">
<div class="my-5 text-sm"><label for="nome"
class="block mb-2 text-sm text-gray-600 dark:text-gray-400 ">Nome
*</label><input type="text" id="nome"
class="w-full px-3 py-2 placeholder-gray-300 border border-gray-300 border-2rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300 dark:bg-gray-700 dark:text-white dark:placeholder-gray-500 dark:border-gray-600 dark:focus:ring-gray-900 dark:focus:border-gray-500"
placeholder="Nome"><label for="nome" id="errorName"
class="block mb-2 font-thin text-xs text-red-600 dark:text-gray-400 "></label>
</div>
<div class="my-5 text-sm"><label for="phone"
class="block mb-2 text-sm text-gray-600 dark:text-gray-400">Telefone
*</label><input type="tel" id="phone" name="phone" maxlength="12"
class="w-full px-3 py-2 placeholder-gray-300 border border-gray-300 border-2rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300 dark:bg-gray-700 dark:text-white dark:placeholder-gray-500 dark:border-gray-600 dark:focus:ring-gray-900 dark:focus:border-gray-500"
placeholder="Telefone"><label id="errorPhone"
class="block mb-2 font-thin text-xs text-red-600 dark:text-gray-400 "></label>
</div>
<div class="text-sm"><label for="altura"
class="block mb-2 text-sm text-gray-600 dark:text-gray-400">Altura (ex.:
1,70) *</label><input type="tel" id="altura" maxlength="4"
class="w-full px-3 py-2 placeholder-gray-300 border border-gray-300 border-2rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300 dark:bg-gray-700 dark:text-white dark:placeholder-gray-500 dark:border-gray-600 dark:focus:ring-gray-900 dark:focus:border-gray-500"
placeholder="Altura"><label id="errorAltura"
class="block mb-2 font-thin text-xs text-red-600 dark:text-gray-400 "></label>
</div>
<div class="my-5 text-sm"><label for="peso"
class="block mb-2 text-sm text-gray-600 dark:text-gray-400">Peso (ex.:
88,70) *</label><input type="tel" id="peso" maxlength="6"
class="w-full px-3 py-2 placeholder-gray-300 border border-gray-300 border-2rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300 dark:bg-gray-700 dark:text-white dark:placeholder-gray-500 dark:border-gray-600 dark:focus:ring-gray-900 dark:focus:border-gray-500"
placeholder="Altura"><label id="errorPeso"
class="block mb-2 font-thin text-xs text-red-600 dark:text-gray-400 "></label>
</div><button type="button" onclick="setLead()"
class="block text-center text-white bg-green-600 hover:bg-green-500 p-4 mt-12 duration-300 rounded-sm hover:bg-red w-full"><span
class="font-bold text-xl">Calcular</span></button>
</form>
<div class="flex justify-end mt-4 w-full rounded-xl "><a class="link mr-6" target="_blank"
href="https://www.facebook.com/medfitpaulista/"
data-tippy-content="@facebook_handle"><svg
class="h-6 fill-current text-gray-600 hover:text-green-700" role="img"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>Facebook</title>
<path
d="M22.676 0H1.324C.593 0 0 .593 0 1.324v21.352C0 23.408.593 24 1.324 24h11.494v-9.294H9.689v-3.621h3.129V8.41c0-3.099 1.894-4.785 4.659-4.785 1.325 0 2.464.097 2.796.141v3.24h-1.921c-1.5 0-1.792.721-1.792 1.771v2.311h3.584l-.465 3.63H16.56V24h6.115c.733 0 1.325-.592 1.325-1.324V1.324C24 .593 23.408 0 22.676 0">
</path>
</svg></a><a class="link mr-6" target="_blank"
href="https://www.instagram.com/medfitclinica/"
data-tippy-content="@instagram_handle"><svg
class="h-6 fill-current text-gray-600 hover:text-green-700" role="img"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>Instagram</title>
<path
d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z">
</path>
</svg></a>
</div>
</div>
<!-- Fim do form -->
</div>
<div class="md:w-12/12 lg:w-6/12 mx-auto px-4">
<div class="mt-7">
<h3 class="text-3xl font-bold">Você sabe qual é o seu peso ideal?</h3>
<p class="mt-3 text-lg leading-relaxed text-blueGray-500">Entre muitos cuidados que devemos ter
com nossa saúde e corpo, um deles é imprescindível: saber e manter o peso ideal. Sendo de
grande importância para a promoção da saúde e prevenção de doenças.
Por isso, é importante conhecer seu Índice de Massa Corporal (IMC).</p>
<div class="md:w-12/12 mt-4 mx-auto">
<img class="max-w-full rounded-lg shadow-lg" src="imgs/imc.jpg"></img>
</div>
</div>
</div>
</div>
<!-- {/* part 2 site */} -->
<a class="lg:hidden block" href="#form">
<button
class="lg:hidden block text-center text-white bg-green-600 hover:bg-green-500 p-4 mt-6 duration-300 rounded-sm hover:bg-red w-full">
<span class="font-bold text-xl ">Calcular</span>
</button>
</a>
<div class="border-b-2 m-4 border-fuchsia-600"></div>
</div>
</div>
<script>
document.querySelector('#phone').addEventListener('keypress', (e) => {
e.target.value = e.target.value.replace(/\D/g, "");
e.target.value = e.target.value.replace(/^(\d{2})(\d)/, "$1-$2")
});
document.querySelector('#altura').addEventListener('keypress', (e) => {
e.target.value = e.target.value.replace(/\D/g, "");
e.target.value = e.target.value.replace(/(\d)(\d{2})$/, "$1,$2");
e.target.value = e.target.value.replace(/(?=(\d{3})+(\D))\B/g, ".");
});
function setLead() {
document.getElementById('nome').classList.replace("border-red-600", "border-gray-300");
document.getElementById('phone').classList.replace("border-red-600", "border-gray-300");
document.getElementById('peso').classList.replace("border-red-600", "border-gray-300");
document.getElementById('altura').classList.replace("border-red-600", "border-gray-300");
document.getElementById("errorName").innerText = '';
document.getElementById("errorPhone").innerText = '';
document.getElementById("errorAltura").innerText = '';
document.getElementById("errorPeso").innerText = '';
let nome = document.getElementById('nome').value;
let phone = document.getElementById('phone').value;
let altura = document.getElementById('altura').value;
let peso = document.getElementById('peso').value;
if ( nome == "" || nome.match(/\d+/g) ) {
document.getElementById("nome").focus();
document.getElementById('nome').classList.remove("border-gray-300");
document.getElementById('nome').classList.add("border-red-600");
document.getElementById("errorName").innerText = 'Nome informado inválido';
return
}
if ( phone == "" || phone.substring(3).match(/^[A-Za-z]+$/) || phone.substring(3).length < 8) {
document.getElementById("phone").focus();
document.getElementById('phone').classList.remove("border-gray-300");
document.getElementById('phone').classList.add("border-red-600");
document.getElementById("errorPhone").innerText = 'Telefone informado inválido';
return
}
if ( altura == "" || Number(altura) <= 0 || altura.match(/^[A-Za-z]+$/) ) {
document.getElementById("altura").focus();
document.getElementById('altura').classList.remove("border-gray-300");
document.getElementById('altura').classList.add("border-red-600");
document.getElementById("errorAltura").innerText = 'Altura informada inválido';
return
}
if ( peso == "" || Number(peso) <= 0 || peso.match(/^[A-Za-z]+$/) ) {
document.getElementById("peso").focus();
document.getElementById('peso').classList.remove("border-gray-300");
document.getElementById('peso').classList.add("border-red-600");
document.getElementById("errorPeso").innerText = 'Peso informado inválido';
return
}
var imc = Number((peso.replace(',', '.') / (altura.replace(',', '.') * altura.replace(',', '.'))) ).toFixed(2);
let textResult1 = '';
let textResult2 = '';
let result = '';
if( imc < 18.5 ) {
result = 0;
textResult1 = "Seu IMC indica que você está abaixo do peso.";
// textResult2 = "O seu peso deveria ser no mínimo 67 kg. Assim, para ganhar peso de forma saudável e sem ganhar barriga, você deve continuar praticando atividade física, aumentar o volume das refeições e comer a cada 3 horas. "
}
if( imc >= 18.5 && imc <= 24.9 ) {
result = 1;
textResult1 = "Parabéns! Você está no seu peso ideal.";
// textResult2 = "De acordo com as informações passadas, o seu peso pode variar entre 67 kg e 90 kg. "
}else if( imc > 24.9 && imc <= 29.9 ) {
result = 2;
textResult1 = "Seu IMC indica sobrepeso.";
// textResult2 = "O seu peso ideal pode variar entre 67 kg e 90 kg por isso para emagrecer com saúde é importante comer mais frutas e verduras além de praticar exercício físico entre 2 e 3 vezes por semana, ingerindo 3035 calorias por dia"
}else if( imc > 29.9 && imc <= 39.9 ) {
result = 3;
textResult1 = "Seu IMC indica obesidade.";
// textResult2 = "Você deve ainda falar com seu médico para fazer exames de sangue para saber se o seu colesterol e triglicerídeos estão bem. Um nutricionista também pode te ajudar a emagrecer comendo bem, mas além da dieta é também importante fazer exercícios físicos bem orientado por um preparador físico para emagrecer mais rápido."
}else if( imc > 39.9 ) {
textResult1 = "Seu IMC indica obesidade de grau elevado.";
result = 3;
}
//await postLead(newLead);
let newLead = {
nome,
phone,
altura,
peso,
imc,
textResult1,
textResult2,
result
};
window.localStorage.setItem('lead', JSON.stringify(newLead));
window.location.href = "./resultado.html"
}
</script>
</body>
</html>