Skip to content

Instantly share code, notes, and snippets.

@dvygolov

dvygolov/weightlosscalculator.html

Created October 28, 2021 19:02
Show Gist options
  • Save dvygolov/769d0ec88e26e645682491b9b9167fdf to your computer and use it in GitHub Desktop.
Save dvygolov/769d0ec88e26e645682491b9b9167fdf to your computer and use it in GitHub Desktop.
Download ZIP
This is an example of a weight loss calculator for your prelandings: has responsive design and requires JQuery.
Raw
weightlosscalculator.html
<html>
<head>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<style>
.zamer {
background: #008dc9;
margin: 15px;
padding: 15px 0 15px;
border-radius: 4px;
}
.zamer .h2-block {
max-width: 550px;
color: #000;
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
padding: 20px;
margin: 10px;
border: 1px dotted rgba(255, 255, 255, 0.5);
border-radius: 6px;
}
.line1 {
font-size: 30px;
margin-bottom: 30px;
color: #ffd400;
font-weight: 900;
text-transform: uppercase;
}
.line2 {
font-size: 20px;
color: #fff;
}
.green {
color: #8aff64;
font-weight: 900;
text-transform: uppercase;
}
.zamer .form {
max-width: 369px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
-webkit-box-shadow: 0 0 11.68px 4.32px rgba(0, 0, 1, 0.05);
box-shadow: 0 0 11.68px 4.32px rgba(0, 0, 1, 0.05);
padding: 28px 33px 34px;
text-align: center;
margin: 10px 20px;
max-height: 350px;
}
.zamer .form h3 {
font-size: 26px;
font-family: pnb;
color: #003955;
text-transform: uppercase;
margin-bottom: 2px;
}
.zamer .form span {
font-size: 21px;
font-family: pnb;
color: #003955;
text-transform: uppercase;
margin-bottom: 13px;
display: block;
}
.zamer .form h4 {
font-family: pnb;
display: block;
background: url("urn:scrapbook:download:error:https://nametovar.com/assets_page/f97d9fd5302911a875ca7767da8f7b852452a872/src/css/186/prelp/src/img/akcii2.png") no-repeat center center;
font-size: 17px;
font-family: pnb;
text-transform: uppercase;
color: #fff;
width: 256px;
height: 37px;
margin-left: auto;
margin-right: auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 21px;
}
.zamer .form form button {
width: 306px;
height: 53px;
background: -webkit-gradient(linear, left bottom, left top, from(#f6d30c), to(#ffe937));
background: -webkit-linear-gradient(bottom, #f6d30c 0, #ffe937 100%);
background: -o-linear-gradient(bottom, #f6d30c 0, #ffe937 100%);
background: linear-gradient(360deg, #f6d30c 0, #ffe937 100%);
-webkit-border-radius: 6px;
border-radius: 6px;
border: none;
-webkit-box-shadow: 0 4px 0 0 #e7ae01;
box-shadow: 0 4px 0 0 #e7ae01;
font-size: 20px;
text-transform: uppercase;
font-family: pnb;
width: 100%;
}
.zamer .form form button:hover {
background: -webkit-gradient(linear, left top, left bottom, from(#f6d30c), to(#ffe937));
background: -webkit-linear-gradient(top, #f6d30c 0, #ffe937 100%);
background: -o-linear-gradient(top, #f6d30c 0, #ffe937 100%);
background: linear-gradient(180deg, #f6d30c 0, #ffe937 100%);
}
.zamer .form form input {
border-width: 1px;
border-color: #ccc;
border-style: solid;
-webkit-border-radius: 4px;
border-radius: 4px;
background-color: #fff;
width: 100%;
height: 47px;
padding: 0 16px;
margin-bottom: 12px;
}
.zamer .form form select {
border-width: 1px;
border-color: #ccc;
border-style: solid;
-webkit-border-radius: 4px;
border-radius: 4px;
background-color: #fff;
width: 100%;
height: 47px;
padding: 0 16px;
margin-bottom: 12px;
}
.d-flex {
display: -ms-flexbox;
display: flex;
}
@media (max-width: 991px) {
.d-flex {
display: -ms-flexbox !important;
display: block;
margin: 0 auto;
width: 100%;
}
.zamer .form {
margin: 0 auto;
margin-bottom: 50px;
}
.zamer .h2-block {
margin: 0 auto;
}
}
@media (max-width: 630px) {
.line1 {
font-size: 20px;
}
.line2 {
font-size: 16px;
}
.zamer .form {
margin: 20px;
}
.zamer .h2-block {
margin: 20px;
}
.zamer .form {
padding: 1px 10px;
}
.zamer .form p {
margin: 3px;
}
.zamer .form form input {
margin-bottom: 5px;
}
.zamer .form form select {
margin-bottom: 5px;
}
}
</style>
<div class="zamer container-fluid calc-form" id="zakaz">
<div class="container">
<div class="row">
<p style="font-size: 25px; font-weight: 700; text-align: center; color: #fff">КАЛЬКУЛЯТОР ЛИШНЕГО ВЕСА</p>
<div class="col-12 d-flex justify-content-between align-items-center flex-wrap">
<div class="form wow fadeInRight left" data-wow-duration="2s">
<form class="main-order-form">
<p><b>Выберите пол:</b></p>
<select autocomplete="off" class="inp">
<option value="Женский" selected="selected">Женский</option>
<option>Мужской</option>
</select>
<input type="tel" placeholder="Ваш возраст" class="inp1" value="">
<input type="tel" placeholder="Ваш рост" class="inp inp2" value="">
<input type="tel" placeholder="Ваш вес" class="inp inp3" value="">
</form>
</div>
<div class="h2-block right" data-wow-duration="2s">
<div class="line1" style="visibility: hidden">Ожирение <br>2-й степени</div>
<div class="line2" style="visibility: hidden">Немедленно начните лечение!</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".calc-form input").change(function () {
calc();
});
$(".calc-form input").keyup(function () {
calc();
});
});
function calc() {
var age = $(".calc-form .inp1").val();
var height2 = $(".calc-form .inp2").val();
var weight2 = $(".calc-form .inp3").val();
var summs = height2 - weight2;
age = parseInt(age.replace(/\D+/g, ""));
height2 = parseInt(height2.replace(/\D+/g, ""));
weight2 = parseInt(weight2.replace(/\D+/g, ""));
console.log(summs);
if (age > 0 && height2 > 0 && weight2 > 0) {
if (summs >= 115) {
$(".calc-form .line1").attr("style", "visibility: display;");
$(".calc-form .line2").attr("style", "visibility: display;");
$(".calc-form .line1").html('<span class="green">Вы в прекрасной форме.</span>');
$(".calc-form .line2").html("Для её поддержания достаточно принимать капли IdealFit один раз в неделю.");
} else {
if (summs >= 104 && summs <= 114) {
$(".calc-form .line1").attr("style", "visibility: display;");
$(".calc-form .line2").attr("style", "visibility: display;");
$(".calc-form .line1").html("У вас не более 10 кг лишнего веса.");
$(".calc-form .line2").html("Достаточно пройти 2-недельный курс капель IdealFit.");
} else {
if (summs >= 90 && summs <= 103) {
$(".calc-form .line1").attr("style", "visibility: display;");
$(".calc-form .line2").attr("style", "visibility: display;");
$(".calc-form .line1").html("У вас более 18 кг лишнего веса.");
$(".calc-form .line2").html("Чтобы от него избавиться – рекомендуем пройти полный курс капель IdealFit. Ожидаемая потеря веса в первый месяц – от 8 до 17 кг.");
} else {
if (summs <= 89) {
$(".calc-form .line1").attr("style", "visibility: display;");
$(".calc-form .line2").attr("style", "visibility: display;");
$(".calc-form .line1").html("У вас крайняя стадия ожирения.");
$(".calc-form .line2").html("Срочно пройдите расширенный курс IdealFit (от 10 до 14 недель), а также добавьте физические нагрузки. За это время можно сбросить от 25 кг до 40 кг.");
}
}
}
}
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment