forked from LeviMardis/Coffee-App
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
88 lines (81 loc) · 4.09 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Coffee Timer App</title>
<meta charset="utf-8">
<link rel="shortcut icon" href="/favicon.ico"/>
<link rel="stylesheet" href="./style.css" media="screen" />
<link rel="manifest" href="./manifest.json" crossorigin="use-credentials">
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('sw.js')
}
</script>
<meta name="theme-color" content="#13171F"/>
<!-- iOS web app configuration -->
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Coffee Timer"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<!-- iOS web app icons -->
<link rel="apple-touch-icon" sizes="192x192" href="https://coffeecollectiveapp.com/1024.png">
<link rel=”apple-touch-icon” sizes="192x192" href=”https://levimardis.github.io/Coffee-App/apple-touch-icon-192x192.png”/>
<link rel=”apple-touch-icon” sizes="180x180" href=”https://levimardis.github.io/Coffee-App/apple-touch-icon-180x180.png”/>
<link rel=”apple-touch-icon” sizes="152x152" href=”https://levimardis.github.io/Coffee-App/apple-touch-icon-152x152.png”/>
<link rel=”apple-touch-icon” sizes="120x120" href=”https://levimardis.github.io/Coffee-App/apple-touch-icon-120x120.png”/>
</head>
<body>
<div id="flex-container">
<div>
<svg width="60" height="88" viewBox="0 0 60 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M59.931 58.829C59.931 74.9964 46.6715 87.939 30 87.939C13.3285 87.939 0.0690308 74.9964 0.0690308 58.829C0.0690308 50.9029 3.35624 43.4817 6.97927 36.5282C7.90655 34.7486 10.1275 34.1064 11.8782 35.0872C13.5868 36.0443 14.2053 38.1908 13.2844 39.9191C10.1429 45.8146 7.15226 52.0832 7.15226 58.829C7.15226 71.1696 17.302 80.8872 30 80.8872C42.698 80.8872 52.8909 71.1696 52.8909 58.829C52.8909 51.3903 49.1334 44.2955 45.203 37.0288L30.5183 9.68175C30.3023 9.20877 29.784 9.16577 29.5681 9.68175L26.549 15.2877C25.5938 17.0614 23.3705 17.7081 21.613 16.7235C19.8978 15.7626 19.2687 13.6048 20.1988 11.8728L24.1693 4.47894C25.5082 2.07102 27.4518 0.867065 30 0.867065C32.505 0.867065 34.4486 2.07102 35.8307 4.52194L51.5088 33.6749C55.4392 40.9846 59.931 49.8423 59.931 58.829ZM32.7523 55.6435C34.9099 57.6039 34.9427 60.4548 32.7251 62.2482C30.4173 63.9535 27.6995 63.1651 26.3616 60.5751L18.8746 46.1481C18.1638 44.7841 19.6335 43.6551 20.7432 44.6902C20.7432 44.6902 30.5948 53.6831 32.7523 55.6435Z"
fill="#212738" />
</svg>
</div>
<div>
<p>COFFEE <span>GRAMS</span></p>
<div id="coffee-slider" class="slider">
<span><img src="./images/left.svg" alt=""></span>
<p id="pre-coffee"></p>
<p id="coffee">1</p>
<p id="post-coffee">2</p>
<span></span>
</div>
</div>
<div>
<p>RATIO</p>
<div id="ratio-slider">
<span></span>
<p id="pre-ratio">1:15</p>
<p id="ratio">1:16</p>
<p id="post-ratio">1:17</p>
<span></span>
</div>
</div>
<div>
<p>WATER <span>GRAMS</span></p>
<div id="water-slider" class="slider">
<span></span>
<p id="pre-water"></p>
<p id="water">16</p>
<p id="post-water">17</p>
<span></span>
</div>
</div>
<div>
<p>TIMER</p>
<div id="timer-slider">
<button id="reset" disabled='true'></button>
<p id="timer">00:00</p>
<input type="checkbox" name="StartStopCheckBox" id="startStop" value="startStop">
<label for="startStop"></label>
</div>
</div>
</div>
<script src="./scripts/slider.js" type="text/javascript"></script>
<script src="./scripts/stopwatch.js" type="text/javascript"></script>
<script src="./scripts/main.js" type="text/javascript"></script>
</body>
</html>