-
Notifications
You must be signed in to change notification settings - Fork 0
/
bootstrap.html
171 lines (166 loc) · 10 KB
/
bootstrap.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
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kalkusia - Kalkulator proporcji kawy</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" integrity="sha512-xldqyfIMDW7oKjy5b5Q+8vhZoR5mKk/f9tD1+tV8/PPy1x2B/2OKjEi7V8PnZu+7VWGJYXjKHTWJ8v0xjM+xmw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-GJQ7FglKnwYXMv7I+J/o4zV7kjyIaaN/9NcXZGnDZlp/ZRzlK/wYg1C6xqT6y/iTgiUfJNBvzznXfZI+UZC6FA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
/* Funkcja obliczająca proporcje kawy do napoju */
function calculate() {
var water = parseFloat(document.getElementById("water").value);
var coffeeRatio = parseFloat(document.getElementById("coffeeRatio").value);
var coffee = water * coffeeRatio / 100;
document.getElementById("coffee").value = coffee.toFixed(1);
/* Zmiana wartości dla stalych w przepisie */
document.getElementById("waterRecipe").innerHTML = water.toFixed(0) + " g";
document.getElementById("coffeeRecipe").innerHTML = coffee.toFixed(1) + " g";
/* Zmiana ilosci wody dla przepisu przepisu */
var waterStep1 = 50;
var waterSteps = [waterStep1, 40, 60, 80, 100];
for (var i = 2; i <= waterSteps.length; i++) {
document.getElementById("waterStep" + i).innerHTML = (waterSteps[i-1] * water / 100).toFixed(0) + "g";
}
}
/* Funkcja ustawiająca wartość pola wyboru stosunku kawy do wody na podstawie klikniętego przycisku */
function setCoffeeRatio(ratio) {
document.getElementById("coffeeRatio").value = ratio;
calculate();
}
/* Funkcja ustawiająca wartość pola ilości wody na podstawie klikniętego przycisku */
function setWater(amount) {
document.getElementById("water").value = amount;
calculate();
}
</script>
<style>
html, body {
height: 100%;
margin: 0;
}
@media (max-width: 768px) {
.row {
flex-direction: column;
}
.list-group-item {
padding: 2px 10px;
font-size: 16px;
}
}
</style>
</head>
<body>
<div class="container-fluid h-100 d-flex flex-column">
<div class="row flex-fill" style="min-height:0">
<div class="col p-0 bg-light mh-100">
<div id="Kalkusia" class="col mh-100" style="height: 100%;">
<div class="col p-5 flex-column">
<div class="d-flex justify-content-center align-items-center">
<form>
<div class="text-center mb-3">
<div class="btn-group" role="group" aria-label="menu">
<a class="btn btn-primary active" href="#Kalkusia">Początek</a>
<a class="btn btn-primary" href="#Kalkulator">Kalkulator proporcji</a>
<a class="btn btn-primary" href="#Przepisv60">Przepis na Drip</a>
</div>
<br>
<br>
<h1>Kalkusia</h1>
<p>Kalkulator proporcji kawy do wody przy metodach alternatywnych (Aeropress, Drip, Chemex...)</p>
<br>
<p class="fw-lighter">
Ta strona internetowa oferuje narzędzie, które pomaga w ustaleniu proporcji kawy do wody podczas parzenia metodą drip v60. Wprowadzając ilość kawy i wody, kalkulator automatycznie oblicza odpowiednie proporcje i wyświetla wynik. Ponadto, na stronie znajduje się przepis na parzenie kawy metodą drip v60, który dostosowuje ilość kawy na podstawie wyliczonych proporcji. Dzięki temu użytkownik może łatwo i precyzyjnie przygotować idealną kawę w domu.
</p>
</div>
</form>
</div>
</div>
</div>
<div id="Kalkulator" class="col bg-primary mh-100" style="height: 100%;">
<div class="col p-5 text-white flex-column">
<div class="d-flex justify-content-center align-items-center">
<form>
<div class="text-center mb-3">
<div class="btn-group" role="group" aria-label="menu">
<a class="btn btn-light" href="#Kalkusia">Początek</a>
<a class="btn btn-light active" href="#Kalkulator">Kalkulator proporcji</a>
<a class="btn btn-light" href="#Przepisv60">Przepis na Drip</a>
</div>
<br>
<br>
<br>
<label for="water" class="form-label"><h5>Ilość wody (ml):</h5></label>
<br>
<div class="btn-group" role="group" aria-label="Ilość wody">
<button type="button" class="btn btn-light btn-lg" onclick="setWater(200)">200 ml</button>
<button type="button" class="btn btn-light btn-lg" onclick="setWater(250)">250 ml</button>
<button type="button" class="btn btn-light btn-lg" onclick="setWater(300)">300 ml</button>
<button type="button" class="btn btn-light btn-lg" onclick="setWater(330)">330 ml</button>
</div>
</div>
<div class="text-center mb-3">
<input type="number" class="form-control form-control-lg" id="water" name="water" min="1" max="10000" step="1" value="100" onchange="calculate()">
</div>
<div class="text-center mb-3">
<label for="coffeeRatio" class="form-label"><h5>Stosunek kawy do wody:</h5></label>
<br>
<div class="btn-group" role="group" aria-label="Stosunek kawy do wody">
<button type="button" class="btn btn-light btn-lg" onclick="setCoffeeRatio(7)">7 na 100</button>
<button type="button" class="btn btn-light btn-lg" onclick="setCoffeeRatio(6)">6 na 100</button>
<button type="button" class="btn btn-light btn-lg" onclick="setCoffeeRatio(10)">10 na 100</button>
</div>
<input type="hidden" id="coffeeRatio" name="coffeeRatio" value="7" onchange="calculate()">
</div>
<div class="text-center mb-3">
<label for="coffee" class="form-label"><h5>Ilość kawy (g):</h5></label>
<input type="text" class="form-control form-control-lg" id="coffee" name="coffee" readonly>
</div>
</form>
</div>
</div>
</div>
<div id="Przepisv60" class="col bg-primary mh-100" style="height: 100%;">
<div class="col p-5 text-white flex-column">
<div class="d-flex justify-content-center align-items-center">
<form>
<div class="text-center mb-3">
<div class="btn-group" role="group" aria-label="menu">
<a class="btn btn-light" href="#Kalkusia">Początek</a>
<a class="btn btn-light" href="#Kalkulator">Kalkulator proporcji</a>
<a class="btn btn-light active" href="#Przepisv60">Przepis na Drip</a>
</div>
<br>
<br>
<ul class="list-group">
<li class="list-group-item active bg-dark" aria-current="true">
Przygotuj <span id="coffeeRecipe">15 g</span> kawy mielonej oraz<span id="waterRecipe"> 250 g</span> przefiltrowanej wody
</li>
<li class="list-group-item"><span class="badge bg-primary badge-primary badge-pill">0:00s</span> Wlej <span id="waterStep1">50 g</span> wody</li>
<li class="list-group-item"><span class="badge bg-primary badge-primary badge-pill">0:10s-0:15s</span> Delikatnie zawiruj kawe</li>
<li class="list-group-item"><span class="badge bg-primary badge-primary badge-pill">0:00s-0:45s</span> Rozkwit kawy</li>
<li class="list-group-item"><span class="badge bg-primary badge-primary badge-pill">0:45s-1:00s</span> Wlej łącznie do <span id="waterStep2">100g</span></li>
<li class="list-group-item"><span class="badge bg-primary badge-primary badge-pill">1:00s-1:10s</span> Pauza</li>
<li class="list-group-item"><span class="badge bg-primary badge-primary badge-pill">1:10s-1:20s</span> Wlej łącznie do <span id="waterStep3">150g</span></li>
<li class="list-group-item"><span class="badge bg-primary badge-primary badge-pill">1:20s-1:30s</span> Pauza</li>
<li class="list-group-item"><span class="badge bg-primary badge-primary badge-pill">1:30s-1:40s</span> Wlej łącznie do <span id="waterStep4">200g</span></li>
<li class="list-group-item"><span class="badge bg-primary badge-primary badge-pill">1:40s-1:50s</span> Pauza</li>
<li class="list-group-item"><span class="badge bg-primary badge-primary badge-pill">1:50s-2:00s</span> Wlej łącznie do <span id="waterStep5">250g</span></li>
<li class="list-group-item"><span class="badge bg-primary badge-primary badge-pill">2:00s-2:05s</span> Delikatnie zawiruj kawe</li>
<li class="list-group-item">Parzenie powinien zakończyć się około <span class="badge bg-primary badge-primary badge-pill">3:00</span></li>
</ul>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="bg-primary fixed-bottom">
<p style="font-size: 12px; text-align: center; margin:auto;">© 2023 Kalkusia - Kalkulator proporcji kawy<a href="https://github.com/kmkamyk/kalkusia" target="_blank"> - wiecej informacji</a></p>
</footer>
</body>
</html>