-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
139 lines (118 loc) · 9.71 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
<!DOCTYPE html>
<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">
<link rel="manifest" href="manifest.webmanifest">
<title>Mercado</title>
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/yegor256/tacit@gh-pages/tacit-css-1.5.5.min.css"/> -->
<style>
input,textarea,select,button,option,body{font:normal 400 normal 1.125rem/1.85625rem system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif}th{font-weight:600}td,th{border-bottom:0 solid #595959;padding:0.928125rem 1.125rem;text-align:left;vertical-align:top}thead th{border-bottom-width:0.135rem;padding-bottom:0.39375rem}table{display:table;width:100%}@media all and (max-width:1024px){table{display:none}}@media all and (max-width:1024px){table thead{display:none}}table tr{border-bottom-width:0.135rem}table tr th{border-bottom-width:0.135rem}table tr td,table tr th{overflow:hidden;padding:0.3375rem 0.225rem}@media all and (max-width:1024px){table tr td,table tr th{border:0;display:inline-block}}@media all and (max-width:1024px){table tr{display:inline-block;margin:0.675rem 0}}@media all and (max-width:1024px){table{display:inline-block}}fieldset label,fieldset legend{display:block}fieldset legend{margin:1.125rem 0}input,textarea,select,button{border-radius:3.6px;display:inline-block;padding:0.61875rem}input+label,input+input[type="checkbox"],input+input[type="radio"],textarea+label,textarea+input[type="checkbox"],textarea+input[type="radio"],select+label,select+input[type="checkbox"],select+input[type="radio"],button+label,button+input[type="checkbox"],button+input[type="radio"]{page-break-before:always}input,select,label{margin-right:0.225rem}textarea{min-height:5.625rem;min-width:22.5rem}label{display:inline-block;margin-bottom:0.7875rem}label+*{page-break-before:always}label>input{margin-bottom:0}input[type="submit"],input[type="reset"],button{background:#f2f2f2;color:#191919;cursor:pointer;display:inline;margin-bottom:1.125rem;margin-right:0.45rem;padding:0.4078125rem 1.4625rem;text-align:center}input[type="submit"]:hover,input[type="reset"]:hover,button:hover{background:#d9d9d9;color:#000}input[type="submit"][disabled],input[type="reset"][disabled],button[disabled]{background:#e6e5e5;color:#403f3f;cursor:not-allowed}input[type="submit"],button[type="submit"]{background:#275a90;color:#fff}input[type="submit"]:hover,button[type="submit"]:hover{background:#173454;color:#bfbfbf}input,select,textarea{margin-bottom:1.125rem}input[type="text"],input[type="password"],input[type="email"],input[type="url"],input[type="phone"],input[type="tel"],input[type="number"],input[type="datetime"],input[type="date"],input[type="month"],input[type="week"],input[type="color"],input[type="time"],input[type="search"],input[type="range"],input[type="file"],input[type="datetime-local"],select,textarea{border:1px solid #595959;padding:0.3375rem 0.39375rem}input[type="checkbox"],input[type="radio"]{flex-grow:0;height:1.85625rem;margin-left:0;margin-right:9px;vertical-align:middle}input[type="checkbox"]+label,input[type="radio"]+label{page-break-before:avoid}select[multiple]{min-width:270px}pre,code,kbd,samp,var,output{font:0.9rem Menlo,Monaco,Consolas,"Courier New",monospace}pre{border-left:0 solid #59c072;line-height:1.575rem;overflow:auto;padding-left:18px}pre code{background:none;border:0;line-height:1.85625rem;padding:0}code,kbd{background:#daf1e0;border-radius:3.6px;color:#2a6f3b;display:inline-block;line-height:1.125rem;padding:0.225rem 0.39375rem 0.16875rem}kbd{background:#2a6f3b;color:#fff}mark{background:#ffc;padding:0 0.225rem}h1,h2,h3,h4,h5,h6{color:#000;margin-bottom:1.125rem}h1{font-size:2.25rem;font-weight:500;line-height:2.7rem;margin-top:4.5rem}h2{font-size:1.575rem;font-weight:400;line-height:2.1375rem;margin-top:3.375rem}h3{font-size:1.35rem;line-height:1.6875rem;margin-top:2.25rem}h4{font-size:1.125rem;line-height:1.4625rem;margin-top:1.125rem}h5{font-size:0.9rem;font-weight:bold;line-height:1.35rem;text-transform:uppercase}h6{color:#595959;font-size:0.9rem;font-weight:bold;line-height:1.125rem;text-transform:uppercase}a{color:#275a90;text-decoration:none}a:hover{text-decoration:underline}hr{border-bottom:1px solid #595959}figcaption,small{font-size:0.95625rem}figcaption{color:#595959}var,em,i{font-style:italic}dt,strong,b{font-weight:600}del,s{text-decoration:line-through}ins,u{text-decoration:underline}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}*{border:0;border-collapse:separate;border-spacing:0;box-sizing:border-box;margin:0;max-width:100%;padding:0;vertical-align:baseline}html,body{width:100%}html{height:100%}body{background:#fff;color:#1a1919;padding:36px}p,ul,ol,dl,blockquote,hr,pre,table,form,fieldset,figure,address{margin-bottom:1.85625rem}section{margin-left:auto;margin-right:auto;width:900px}aside{float:right;width:285px}article,header,footer{padding:43.2px}article{background:#fff;border:1px solid #d9d9d9}nav{text-align:center}nav ul{list-style:none;margin-left:0;text-align:center}nav ul li{display:inline-block;margin-left:9px;margin-right:9px;vertical-align:middle}nav ul li:first-child{margin-left:0}nav ul li:last-child{margin-right:0}ol,ul{margin-left:31.5px}li dl,li ol,li ul{margin-bottom:0}dl{display:inline-block}dt{padding:0 1.125rem}dd{padding:0 1.125rem 0.28125rem}dd:last-of-type{border-bottom:0 solid #595959}dd+dt{border-top:0 solid #595959;padding-top:0.5625rem}blockquote{border-left:0 solid #595959;padding:0.28125rem 1.125rem 0.28125rem 0.99rem}blockquote footer{color:#595959;font-size:0.84375rem;margin:0}blockquote p{margin-bottom:0}img{height:auto;margin:0 auto}figure img{display:block}@media (max-width:767px){body{padding:18px 0}article{border:0;padding:18px}header,footer{padding:18px}textarea,input,select{min-width:0}fieldset{min-width:0}fieldset *{flex-grow:1;page-break-before:auto}section{width:auto}x:-moz-any-link{display:table-cell}}
input {
width: 4em;
}
header {
background-color: #111;
}
header h1 {
color: #DDD;
}
body {
padding: 0;
}
label {
display: block;
}
span {
display: block;
font-size: 80%;
color: #999;
}
.container {
display: flex;
flex-direction: row;
}
.container>* {
flex: 1;
}
#resultado_final {
background-color: #111;
padding: 1rem 0;
}
h2 {
color: #DDD;
}
</style>
</head>
<body>
<header>
<h1>Comparativo de produtos no mercado</h1>
</header>
<div class="container">
<div><input type="text" name="nome_p1" id="nome_p1" value="Produto 1"></div>
<div><input type="text" name="nome_p2" id="nome_p2" value="Produto 2"></div>
</div>
<div class="container">
<div><label>Unidades <span class="detalhe">geralmente 1</span></label><input type="number" name="unidade_p1"
id="unidade_p1" value="1"></div>
<div><label>Unidades <span class="detalhe">geralmente 1</span></label><input type="number" name="unidade_p2"
id="unidade_p2" value="1"></div>
</div>
<div class="container">
<div><label>Qtd da unidade <span class="detalhe">(ml, l, g, kg, metros)</span></label><input type="number"
name="quantidade_p1" id="quantidade_p1" value="1000"></div>
<div><label>Qtd da unidade <span class="detalhe">(ml, l, g, kg, metros)</span></label><input type="number"
name="quantidade_p2" id="quantidade_p2" value="1500"></div>
</div>
<div class="container">
<div><label>Valor</label><input type="number" name="valor_p1" id="valor_p1" value="10"></div>
<div><label>Valor</label><input type="number" name="valor_p2" id="valor_p2" value="12"></div>
</div>
<div class="container">
<div><abbr title="Valor por menor unidade de medida">$/um</abbr>
<div id="resultado_p1"></div>
</div>
<div><abbr title="Valor por menor unidade de medida">$/um</abbr>
<div id="resultado_p2"></div>
</div>
</div>
<div id="resultado_final"></div>
<!-- <button onClick="clear_cache()">cache</button> -->
<script src="js/jquery-3.6.0.min.js"></script>
<script>
function get_rate() {
r_p1 = parseFloat($('#valor_p1').val()) / (parseFloat($('#unidade_p1').val()) * parseFloat($('#quantidade_p1').val()))
r_p2 = parseFloat($('#valor_p2').val()) / (parseFloat($('#unidade_p2').val()) * parseFloat($('#quantidade_p2').val()))
$('#resultado_p1').text(r_p1)
$('#resultado_p2').text(r_p2)
if (r_p1 > r_p2) {
$('#resultado_final').html('<h2><strong>' + $('#nome_p2').val() + '</strong> mais vantajoso</h2>')
} else {
$('#resultado_final').html('<h2><strong>' + $('#nome_p1').val() + '</strong> mais vantajoso</h2>')
}
}
$(document).ready(function () {
get_rate()
$('input').change(function () {
get_rate()
})
$('input').keypress(function () {
get_rate()
})
})
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('sw.js');
}
function clear_cache() {
if ('serviceWorker' in navigator) {
caches.keys().then(function (cacheNames) {
cacheNames.forEach(function (cacheName) {
caches.delete(cacheName);
});
});
}
}
</script>
</body>
</html>