-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
169 lines (160 loc) · 6.61 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Recipe Batch Size Calculator With Bakers Percentages">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gram-Master: The Baker's Percentages Batch Size Calculator</title>
<!-- BootStrap -->
<link href="/css/main.min.css" rel="stylesheet">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/295cd3caf5.js" crossorigin="anonymous"></script>
<!-- CSS -->
<link rel="stylesheet" href="css/style.css">
</head>
<body class="">
<header class="d-flex flex-column align-items-center justify-content-center mb-3">
<!-- Logo SVG -->
<svg
viewBox="0 0 105.83333 100.54167"
height="380"
width="400">
<defs
id="defs2" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="layer4">
<rect
y="8.9058594e-06"
x="-5.7529296e-06"
height="100.54166"
width="105.83334"
id="rect4880"
style="fill:#ffffff;stroke-width:0.26458332" />
</g>
<g
transform="translate(0,-196.45832)"
id="layer1">
<path
transform="matrix(0.26458333,0,0,0.26458333,0,196.45832)"
id="rect3717"
d="M 0 0 L 0 380 L 400 380 L 400 0 L 0 0 z M 10 10 L 390 10 L 390 370 L 10 370 L 10 10 z "
style="fill:#000000;stroke-width:2.00010729" />
</g>
<g
transform="translate(0,-5.2916667)"
id="layer3">
<path
id="rect3750"
d="M 10.583333,15.875 V 95.25 h 7.317619 v -2.267805 h -4.898571 v -74.83939 h 79.828572 v 74.83939 H 88.106722 V 95.25 H 95.25 V 15.875 Z"
style="display:inline;fill:#808080;stroke-width:0.23422304" />
</g>
<g
transform="translate(0,-5.2916667)"
style="display:inline"
id="layer2">
<g
id="text3715"
style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:100.54167175px;line-height:0.60000002;font-family:Arial;-inkscape-font-specification:'Arial Heavy';letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.1819942"
transform="matrix(0.97769872,0,0,0.95994229,3.252554,-3.9687423)"
aria-label="k">
<path
id="path6571"
style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:100.54167175px;line-height:0.60000002;font-family:Arial;-inkscape-font-specification:'Arial Heavy';stroke-width:1.10920608"
d="M 22.100067,33.904995 H 41.308278 V 70.723522 L 55.345047,54.543646 H 78.478014 L 60.885878,71.642834 79.493832,103.35907 H 58.300157 l -9.92732,-19.581328 -7.064559,6.894834 V 103.35907 H 22.100067 Z" />
</g>
</g>
</svg>
<h1>Gram-Master</h1>
<h3>Recipe Batch Size Converter</h3>
<h4>With Baker's Percentages</h4>
</header>
<main class="d-flex flex-column align-items-center mb-3">
<div class="tableWrapper">
<div class="d-flex flex-column">
<h6 class="d-flex flex-row align-items-center justify-content-between">
<label for="recipeFlourMass">Total Recipe Flour Mass (g)</label>
<input class="col-2 text-end wsNoWrap" id="inputRecipeFlourMass" type="text" value="1000">
</h6>
<h6 class="d-flex flex-row align-items-center justify-content-between">
<label for="qtyInRecipe" >Qty In Recipe</label>
<input class="col-2 text-end wsNoWrap" id="inputQtyInRecipe" type="text" value="3">
</h6>
<h6 class="d-flex flex-row align-items-center justify-content-between">
<label for="totalQty">Qty Required In Batch</label>
<input class="col-2 text-end wsNoWrap" id="inputTotalQty" type="text" value="20">
</h6>
</div>
<table class="table table-striped mb-0">
<thead class="table-dark">
<th class="col-3 " scope="col">Ingredients</th>
<th class="col-3 text-end wsNoWrap" scope="col">%</th>
<th class="col-3 text-end wsNoWrap" scope="col">Mass Each</th>
<th class="col-3 text-end wsNoWrap" scope="col">Mass Total</th>
</thead>
<tbody class="">
<tr>
<td class="">Flour</td>
<td class="text-end jr">100</td>
<td class="text-end" id="flourEach"> g</td>
<td class="text-end" id="flourBatch"> g</td>
</tr>
<tr>
<td class="">Water</td>
<td class="text-end"><input id="inputWater" type="text" value="65"></td>
<td class="text-end" id="waterEach"> g</td>
<td class="text-end" id="waterBatch"> g</td>
</tr>
<tr>
<td class="">Salt</td>
<td class="text-end"><input id="inputSalt" type="text" value="1.5"></td>
<td class="text-end" id="saltEach"> g</td>
<td class="text-end" id="saltBatch"> g</td>
</tr>
<tr>
<td class="">Yeast</td>
<td class="text-end"><input id="inputYeast" type="text" value="1.5"></td>
<td class="text-end" id="yeastEach"> g</td>
<td class="text-end" id="yeastBatch"> g</td>
</tr>
<tr>
<td class="">Sugar</td>
<td class="text-end"><input id="inputSugar" type="text" value="5"></td>
<td class="text-end" id="sugarEach"> g</td>
<td class="text-end" id="sugarBatch"> g</td>
</tr>
<tr>
<td class="">Olive Oil</td>
<td class="text-end"><input id="inputOliveOil" type="text" value="5"></td>
<td class="text-end" id="oliveOilEach"> g</td>
<td class="text-end" id="oliveOilBatch"> g</td>
</tr>
</tbody>
<tfoot class="table-info">
<th class="col-3 " scope="col">Totals</th>
<th class="col-3 text-end wsNoWrap" scope="col" id=""></th>
<th class="col-3 text-end wsNoWrap" scope="col" id="totalMassEach"> g</th>
<th class="col-3 text-end wsNoWrap" scope="col" id="totalMassBatch"> g</th>
</tfoot>
</table>
</div>
<div class="mt-3 ">
<a href="https://github.com/Karsyz/grammaster" class="link-dark text-decoration-none fa-brands fa-github fa-2x mx-2" target="_blank"></a>
<a href="https://mattkars.com" class="link-dark text-decoration-none fa-solid fa-briefcase fa-2x mx-2" target="_blank"></a>
<a href="https://ko-fi.com/B0B7G3CIP" class="link-dark text-decoration-none fa-solid fa-mug-saucer ko-fi fa-2x mx-2" target="_blank"></a>
</div>
</main>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>