-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
197 lines (177 loc) · 8.96 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
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
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!DOCTYPE html>
<html lang="de">
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link type="text/css" rel="stylesheet" href="css/nouislider.css" />
<link type="text/css" rel="stylesheet" href="css/custom.min.css">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-FPFM24LFT0"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-FPFM24LFT0');
</script>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png">
<link rel="manifest" href="/img/site.webmanifest">
<link rel="mask-icon" href="/img/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<meta charset="UTF-8">
<title>Zapfdruck Rechner</title>
</head>
<body>
<nav>
<div class="nav-wrapper">
<a href="/" class="brand-logo center">Zapfdruckrechner</a>
</div>
</nav>
<div class="container">
<div class="row">
<form>
<div class="col s12">
<h4>1. Schritt: Sättigungsdruck ermitteln</h4>
<div class="col l6">
<h5>Sättigungsdruck</h5>
<p>
Biertemperatur (Bierkellertemperatur) messen und den zugehörigen Wert einstellen.
</p>
<p>Ausschnitt der Drucktabelle:</p>
<table class="centered">
<thead>
<tr>
<th>Temperatur</th>
<th>Sättigungsdruck</th>
</tr>
</thead>
<tbody>
<tr>
<td>5°C</td>
<td>0,8 bar</td>
</tr>
<tr>
<td>10°C</td>
<td>1,2 bar</td>
</tr>
<tr>
<td>15°C</td>
<td>1,6 bar</td>
</tr>
<tr>
<td>20°C</td>
<td>2,0 bar</td>
</tr>
<tr>
<td>25°C</td>
<td>2,4 bar</td>
</tr>
</tbody>
</table>
</div>
<div class="col l6 temperature">
<div class="temperature-heading">
<h5>Biertemperatur</h5>
<div id="temperature-slider"></div>
<p class="center">Wählen Sie die Temperatur Ihres Bieres</p>
</div>
<p>
Hier können Sie einen Temperaturbereich oder eine genaue Temperatur festlegen.
Falls ein Temperaturbereich festgelegt werden sollte, wird ein minimal und maximal Druck berechnet.
<br>
<br>
<strong>
Achtung: Insbesondere bei Festen und Partys im Sommer ist eine Temperatur von 26°C nicht unüblich!
Im Winter kann auch eine Temperatur von 8°C oder weniger vorkommen.
</strong>
</p>
</div>
</div>
<div class="col s12">
<h4>2. Schritt: Förderdruck ermitteln und zum Sättigungsdruck hinzurechnen</h4>
<div class="col l6">
<h5>Förderhöhe</h5>
<p>Es wird pro Meter Förderhöhe (Fassboden bis Zapfhahn) 0,1 bar Druck benötigt. Dies gilt unanhängig vom Querschnitt der Leitung.</p>
<p><strong>Achtung: Bitte geben Sie die Förderhöhe mit einer Nachkommastelle an.</strong></p>
<div class="input-field col s12">
<input type="number" class="validate" id="height" step="0.1" min="0.2" max="10" required>
<label for="height">Förderhöhe</label>
<span class="helper-text" data-error="Bitte geben Sie eine richtige Förderhöhe an">Bitte geben Sie hier die Förderhöhe in Meter an</span>
</div>
</div>
<div class="col l6">
<h5>Leitungslänge</h5>
<p>
Die Reibungsverluste sind abhängig von der Länge und dem Querschnitt der Leitung.
Bei 4 mm Leitungen werden pro Meter 0,72 bar addiert, bei 7 mm Leitungen 0,05 bar und bei 10 mm Leitungen 0,01 bar.
</p>
<div class="input-field col s12">
<select id="thickness">
<option value="" disabled selected>Wählen Sie einen Durchmesser</option>
<option value="0.72">4 mm</option>
<option value="0.05">7 mm</option>
<option value="0.01">10 mm</option>
</select>
<label for="thickness">Durchmesser</label>
</div>
<p><strong>Achtung: Bitte geben Sie die Leitungslänge mit einer Nachkommastelle an.</strong></p>
<div class="input-field col s12">
<input type="number" class="validate" id="length" step="0.1" min="0.2" max="10" required>
<label for="length">Leitungslänge</label>
<span class="helper-text" data-error="Ihre Bierleitung ist zu lang">Bitte geben Sie hier die Länge der Bierleitung in Meter an</span>
</div>
</div>
</div>
<div class="col s12">
<h4>3. Schritt: Zapfdruck berechnen</h4>
<div class="col l6">
<h5>Beispielrechnung</h5>
<p>Rechnen Sie die 3 Werte für Sättigungsdruck, Höhenunterschied und die Leitungslänge zusammen.</p>
<p><strong>Beispiel:</strong></p>
<p>Bei 20°C Biertemperatur, 3 m, Höhenunterschied und 6 m Leitungslänge bei einer 10 mm Leitung haben Sie:</p>
<p>2,0 bar (Sättigungsdruck) + 0,3 bar (Höhenunterschied) + 0,1 bar (Leitungslänge)
<br>
= 2,4 bar (Zapfdruck)
</p>
</div>
<div class="col l6">
<h5>Ihr optimaler Zapfdruck</h5>
<p>Der optimale Zapfdruck bei Ihren Gegebenheiten beträgt:
</p>
<div class="center flow-text" id="result"></div>
<blockquote><strong>Dieser Druck sollte in der Praxis auf keinen Fall unterschritten werden. Im Zweifelsfall sollte der Druck erhöht werden.</strong></blockquote>
<button class="waves-effect waves-light btn-large" onclick="calcPressure();" type="button"><i class="material-icons left">update</i>Berechnen</button>
</div>
</div>
</form>
</div>
</div>
<footer class="page-footer">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Werte</h5>
<p class="grey-text text-lighten-4">Es wird keine Gewähr über Richtigkeit der Werte übernommen!</p>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2022
</div>
</div>
</footer>
<!--JavaScript at end of body for optimized loading-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wnumb/1.2.0/wNumb.min.js" integrity="sha256-HT7c4lBipI1Hkl/uvUrU1HQx4WF3oQnSafPjgR9Cn8A=" crossorigin="anonymous"></script>
<script type="application/javascript" src="js/nouislider.min.js"></script>
<script type="text/javascript" src="js/index.min.js"></script>
</body>
</html>