-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
214 lines (194 loc) · 7.59 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
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sourdough Baking Calculator</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"> <!-- Font Awesome Icons -->
<style>
h1 {
text-align: center;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 1rem;
}
.time-box {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
}
.wait-time {
background-color: #d9edf7; /* Greenish background color */
border-radius: 5px;
padding: 5px;
margin-top: 5px;
}
.wait-arrow {
text-align: center;
font-size: 24px;
margin-top: -10px;
}
#schedule {
margin-top: 20px;
}
p {
margin: 10px 0;
}
.summary-container {
background-color: #f8f9fa;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin-top: 20px;
}
textarea {
width: 100%;
height: 150px;
resize: none;
border: none;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="container">
<h1>Sourdough Baking Calculator <i class="fa-solid fa-bread-slice"></i></h1>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="starterRatio" class="form-label">Sourdough Starter Ratio</label>
<select id="starterRatio" class="form-control" onchange="updatePeakTime()">
<option value="1:1:1">1:1:1</option>
<option value="1:2:2">1:2:2</option>
<option value="1:12:12">1:12:12</option>
<option value="1:20:20">1:20:20</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="peakTime" class="form-label">Time to Peak (hours)</label>
<input type="number" id="peakTime" class="form-control" placeholder="5" value="5">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="startTime" class="form-label">Start Time</label>
<input type="datetime-local" id="startTime" class="form-control" value="">
</div>
</div>
</div>
<div class="form-group">
<button onclick="calculateSchedule()" class="btn btn-primary">Calculate Schedule <i class="fa-solid fa-bread-slice"></i></button>
</div>
<hr> <!-- Divider added here -->
</div>
<div id="schedule" class="container"></div>
<div class="summary-container">
<h3>Summary of Steps</h3>
<textarea id="scheduleSummary" class="form-control" readonly></textarea>
</div>
<script>
function calculateSchedule() {
const starterRatioInput = document.getElementById("starterRatio").value || "1:1:1"; // Default to 1:1:1 if input is empty
const starterRatio = starterRatioInput.split(":").map(Number);
const peakTimeInput = parseInt(document.getElementById("peakTime").value) || 5; // Default to 5 hours if input is empty
const startTimeInput = document.getElementById("startTime").value;
const startTime = startTimeInput ? new Date(startTimeInput) : new Date(); // Use selected start time or current time
const peakTimeOptions = {
"1:1:1": 5,
"1:2:2": 9,
"1:12:12": 12,
"1:20:20": 20
};
const peakTime = new Date(startTime.getTime() + peakTimeOptions[starterRatioInput] * 60 * 60 * 1000); // Peak time after specified hours
const starterReady = new Date(startTime.getTime() + peakTimeOptions[starterRatioInput] * 60 * 60 * 1000); // Time now plus time to peak
const autolyseTime = new Date(starterReady.getTime()); // Start autolyse when starter is ready
const mixIngredientsTime = new Date(autolyseTime.getTime() + 30 * 60 * 1000); // Mix ingredients 5 minutes after autolyse
const fold1Time = new Date(mixIngredientsTime.getTime() + 30 * 60 * 1000); // 30 minutes after autolyse
const fold2Time = new Date(fold1Time.getTime() + 30 * 60 * 1000); // 30 minutes after first folding
const fold3Time = new Date(fold2Time.getTime() + 30 * 60 * 1000); // 30 minutes after second folding
const waitTimeStart = new Date(fold3Time.getTime()); // Start wait time after third folding
const preShapeTimes = [];
for (let i = 1; i <= 3; i++) {
const preShapeTime = new Date(waitTimeStart.getTime() + i * 60 * 60 * 1000); // Pre-shape after 1, 2, and 3 hours
preShapeTimes.push(preShapeTime);
}
const shapeTimeOptions = [];
for (let i = 0; i < preShapeTimes.length; i++) {
const shapeTime = new Date(preShapeTimes[i].getTime() + 15 * 60 * 1000); // Shape after 15 minutes of pre-shape
shapeTimeOptions.push(shapeTime);
}
const fridgeTimeStart = new Date(startTime.getTime() + 6 * 60 * 60 * 1000);
const fridgeTimeEnd = new Date(fridgeTimeStart.getTime() + 24 * 60 * 60 * 1000);
const schedule = `
<div class="time-box">
<p><i class="fas fa-hourglass-start"></i> Starter Ready: ${formatTime(starterReady)}</p>
</div>
<div class="time-box">
<p><i class="fas fa-flask"></i> Autolyse Start: ${formatTime(autolyseTime)}</p>
<div class="wait-time">Wait ${formatWaitTime(0.5)}</div>
</div>
<div class="time-box">
<p><i class="fa-solid fa-blender"></i> Mix Ingredients: ${formatTime(mixIngredientsTime)}</p>
<div class="wait-time">Wait ${formatWaitTime(0.5)}</div>
</div>
<div class="time-box">
<p><i class="fa-solid fa-hand-holding-heart"></i> Fold 1: ${formatTime(fold1Time)}</p>
<div class="wait-time">Wait ${formatWaitTime(0.5)}</div>
</div>
<div class="time-box">
<p><i class="fa-solid fa-hand-holding-heart"></i> Fold 2: ${formatTime(fold2Time)}</p>
<div class="wait-time">Wait ${formatWaitTime(0.5)}</div>
</div>
<div class="time-box">
<p><i class="fa-solid fa-hand-holding-heart"></i> Fold 3: ${formatTime(fold3Time)}</p>
<div class="wait-time">Wait 1 to 3 hours</div>
</div>
<div class="time-box">
<p><i class="fas fa-cut"></i> Pre-Shape:</p>
<ul>
${preShapeTimes.map(time => `<li>${formatTime(time)}</li>`).join('')}
</ul>
<div class="wait-time">Wait ${formatWaitTime(0.25)}</div>
</div>
<div class="time-box">
<p><i class="fa-solid fa-shapes"></i> Final Shape:</p>
<ul>
${shapeTimeOptions.map(time => `<li>${formatTime(time)}</li>`).join('')}
</ul>
</div>
<div class="time-box">
<p><i class="fas fa-snowflake"></i> Fridge Time: from 6 to 24 hours</p>
</div>
`;
document.getElementById("schedule").innerHTML = schedule;
}
function updatePeakTime() {
const starterRatioInput = document.getElementById("starterRatio").value;
const peakTimeOptions = {
"1:1:1": 5,
"1:2:2": 9,
"1:12:12": 12,
"1:20:20": 20
};
document.getElementById("peakTime").value = peakTimeOptions[starterRatioInput];
}
function formatTime(date) {
return date.toLocaleTimeString('en-US', {hour12: false, hour: '2-digit', minute: '2-digit'});
}
function formatWaitTime(hours) {
if (hours < 1) {
return Math.floor(hours * 60) + " mins";
} else {
return Math.floor(hours) + " hours";
}
}
</script>
</body>
</html>