-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
114 lines (95 loc) · 6.45 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
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-QQLS3BE0CJ"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-QQLS3BE0CJ');
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- https://stackoverflow.com/questions/26888751/chrome-device-mode-emulation-media-queries-not-working -->
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<title>Calculadora de horas</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<script src="js/before.js"></script>
<!-- Uso do Base64 https://stackoverflow.com/questions/9943771/adding-a-favicon-to-a-static-html-page -->
<!-- favicon from Freepik from flaticon.com in https://www.flaticon.com/free-icon/clock_2919780?term=time&page=1&position=2 -->
<link rel="shortcut icon" href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAsQAAALEBxi1JjQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAPESURBVEiJnZZLbFRVGMd/58yd6YMWCp2SSiu0YtA0YovBNQuTEkUoWIpWamKFLjQGdcPCBY+1iSY1QtDWkrSGxMCCUhIXkvoIqz6mSI1trG1tS58gdPpiZu6cz8W8e6eV+O3u/5zz//+/79z7fVexTmzulu2WpsrAAaUoQdjh/SsUBiYQGQXVYYXt6/212eNrcah0YH6fFCnhDHACcCWveYdCq7cbhbomtn16oDZr9D8F8n1yWEErkJOMZ2oockPGiM2jgBAMO3wtiJi6wWOZ7WsKFPjkI4HPAQ2Q64ITXjiYBy9mRfbcXgQBxuaF7hlD59+GxwkxI4pPBo96Gh0CUefXYuQH8+CzYsi3EgbOnbvF4sIDjpw/Fsf8QWj7PUzvjEmIiDkSy0QDbLkjxdGyaIAPt0JzSSo5wFPbNuItKUjBNnrg/T0uKkt1DNJK6bbnrixti2eQ75NvFdTHnDeXrHH70RKlCwEu+ML4opkINA3WeBrU5m7Z7nIxDLhyNHSVgTfqvO1KP48DNiffrUgr0Hn1Lkv+AK+/txeAhSB8+kuIFRuAsK3tEm1pDhN9FU8WJMgBRISmlj6aLvc5HHdevUtHSw+eLHccy/XAvqfjpXK5xaqyRPMqEkEO5aWSvPP2bgC+utQDEM8kRr6/bg+VteUpZ/YWan4YiZTJGHnNQngWIEvDC1nO2q4Wmca1JjnAjk0KjwuCYVBK7bSAQoBCd+RiGy90sbVgA2/VlDlFvvsTFv1UHq9wkP/8zS0eTT2k6sxR8jIUs8sCUBQvmDjNp0bORlTuJsz0ODI1se5WkyAzFjAJ7JoJRUROffBy2kO2bWioeYbRshWU1o71fQ2vxI36g3GFSQvFMMKuFQO/LUN5dnpX9W+UAnB7f+m67kfmE31KRIa1wM3Y4o35dc8+UfROm6Qn1aHFxXUgDNA0B3P2/yf3B+GnsbiAHXbZN/Q/u9U4issASwZOjz/BhacJI9DaH07urM1D1dkTGkDgLLAA0DEPZ++lF7n0dRe/tnSmJf9+MIxvNu7er7T7PES754MKdU8JbxIt1cU5qB9xlmtq0s/90bkUzB+Ai74wP44m2jXK1P1RraZg9cDplVOi+CImvEEnBk55dmRzbOCMzgs904bOMUMgaeAAHw/UeL6MAY6u7O2VQyjagNxkPCM6MjNHbB4GhJBzZPpBHx+osTqSQccXc/8l1W4JO0XRCMSLFDAwHIDZZQe5EUWr0u7nV5OnzSA5ttyRYmWoUnAARSkm8dsiIsNaqZshbbcPVWev2Tv+BcsTkCvM69FEAAAAAElFTkSuQmCC" />
<!-- Ícone que será adicionado na home screen do Android https://web.dev/add-manifest/ ver também https://web.dev/maskable-icon-audit/ -->
<link rel="manifest" href="manifest.webmanifest" crossorigin="anonymous">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
</head>
<body id="pageBody">
<!-- https://www.codexpedia.com/javascript/submitting-html-form-without-reload-the-page/ -->
<form action="#" id="form1" name="calculator" onreset="resetAndAutoFocus();" onsubmit="f1();">
<div class="labelEcampo" style="margin-bottom: 10px;">
<div class="label"><span>Preciso fazer</span></div>
<input value="08:00" type="text" id="horasNecessarias" onfocus="autoLimpar(this);" onblur="f1();" required />
</div>
<div id="blocosEntradasSaidas" class="blocosEntradasSaidas">
<div id="bloco0" class="labelEcampo blocoEntradaSaida">
<div class="labelCampoEntradaSaida">
<div class="label"><span>Entrada</span></div>
<input type="text" maxlength="5" id="h1" pattern="^([0-9]{1}|1{1}[0-9]{1}|2{1}[0-3]):[0-5]{1}[0-9]{1}$|^(0{1}[0-9]{1}|1{1}[0-9]{1}|2{1}[0-3]):[0-5]{1}[0-9]{1}$" onfocus="autoLimpar(this);" inputmode="decimal" onblur="f1();" autofocus />
</div>
<div class="labelCampoEntradaSaida">
<div class="label"><span>Saída</span></div>
<input type="text" maxlength="5" value="--:--" id="h2" pattern="^([0-9]{1}|1{1}[0-9]{1}|2{1}[0-3]):[0-5]{1}[0-9]{1}$|^(0{1}[0-9]{1}|1{1}[0-9]{1}|2{1}[0-3]):[0-5]{1}[0-9]{1}$" onfocus="autoLimpar(this);" inputmode="decimal" onblur="f1();" />
</div>
</div>
<div class="labelEcampo blocoEntradaSaida">
<div class="labelCampoEntradaSaida">
<div class="label"><span>Entrada</span></div>
<input type="text" maxlength="5" value="--:--" id="h3" pattern="^([0-9]{1}|1{1}[0-9]{1}|2{1}[0-3]):[0-5]{1}[0-9]{1}$|^(0{1}[0-9]{1}|1{1}[0-9]{1}|2{1}[0-3]):[0-5]{1}[0-9]{1}$" onfocus="autoLimpar(this);" inputmode="decimal" onblur="f1();" />
</div>
<div class="labelCampoEntradaSaida">
<div class="label"><span>Saída</span></div>
<input type="text" maxlength="5" value="--:--" id="h4" pattern="^([0-9]{1}|1{1}[0-9]{1}|2{1}[0-3]):[0-5]{1}[0-9]{1}$|^(0{1}[0-9]{1}|1{1}[0-9]{1}|2{1}[0-3]):[0-5]{1}[0-9]{1}$" onfocus="autoLimpar(this);" inputmode="decimal" onblur="f1();" />
</div>
</div>
</div>
<div class="botoes">
<button type="button" id="calcular">CALCULAR</button>
<button type="reset" title="Clique ou pressione 'c' para limpar.">LIMPAR</button>
</div>
<div class="labelEcampo blocoEntradaSaida">
<div class="labelCampoEntradaSaida">
<div class="label"><span>Feitas</span></div>
<input value="--:--" type="text" name="horasFeitas" id="horasFeitas" class="inputsReadOnly" disabled>
</div>
</div>
<div class="labelEcampo blocoEntradaSaida">
<div class="labelCampoEntradaSaida">
<div class="label"><span>Extras</span></div>
<input value="--:--" type="text" name="horasExtras" id="horasExtras" class="inputsReadOnly" disabled>
</div>
</div>
<div class="labelEcampo blocoEntradaSaida">
<div class="labelCampoEntradaSaida">
<div class="label"><span>Faltam</span></div>
<input value="08:00" type="text" name="horasFaltando" id="horasFaltando" class="inputsReadOnly" disabled>
</div>
</div>
<div class="labelEcampo blocoEntradaSaida">
<div class="labelCampoEntradaSaida">
<div class="label"><span>Sair às</span></div>
<input value="--:--" type="text" name="horaSair" id="horaSair" class="inputsReadOnly" disabled>
</div>
</div>
</form>
<form>
<button type="submit" id="botaoBaixarEmArquivo" onclick="salvarEmArquivo();">BAIXAR</button>
</form>
<div class="footer">
v3.3
</div>
<script src="js/funcoes.js"></script>
</body>
</html>