-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
390 lines (348 loc) · 18.1 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
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
<!DOCTYPE html>
<html>
<head>
<title>Babyweeks | Calculator</title>
<meta charset="UTF-8">
<link rel="icon" type="image/x-icon" href="assets/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
<!-- PyScript -->
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<!-- Style -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style/style.css">
<!-- Support Project -->
<script async defer data-name="BMC-Widget" data-cfasync="false" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="ntemposd" data-description="Support me on Buy me a coffee!" data-message="" data-color="#40DCA5" data-position="Right" data-x_margin="18" data-y_margin="36"></script>
<!-- Meta Tags -->
<meta property="og:title" content="How young is my baby.">
<meta property="og:description" content="Calculate the week of your baby's growing cycle; realize 1st year's transitions.">
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Babyweeks">
<meta property="og:image" content="https://babyweeks.app/assets/thumbnail.jpg">
<meta property="og:url" content="https://babyweeks.app">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image:alt" content="Babyweeks Logo">
<!-- Google Analytics - Global site tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-P41R3F8TH1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-P41R3F8TH1');
</script>
</head>
<body>
<div class="container-fluid">
<!-- Header -->
<div class="row text-center text-white bg-purple shadow-md bg-gradient">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg px-0 py-0">
<div class="container-fluid px-1">
<div class="d-flex flex-column align-self-middle">
<a class="ms-0 pt-1 pb-1 fw-bold" href="./">
<img src="assets/baby-girl.svg" alt="Babyweekslogo" width="24" height="24" class="d-inline-block fw-bold align-text-bottom">
<strong class="logo">Babyweeks</strong><span class="badge"><small>BETA</small></span>
</a>
<svg height="5" width="90">
<line x1="10" y1="1" x2="80" y2="-1" style="stroke:rgb(214, 2, 112);stroke-width:2" />
<line x1="20" y1="2" x2="90" y2="-1" style="stroke:rgb(25, 135, 84);stroke-width:3" />
</svg>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
</svg>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item small d-flex justify-content-end">
<a class="nav-link" aria-current="page" href="./about/"><span class="material-icons align-bottom">info</span></a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Hero -->
<div class="text-center">
<h1 class="display-5 fw-bold logo mt-2">How young is my baby</h1>
<p class="small fw-light mt-3 mb-5">Calculate the <mark>week</mark> of your <span class="material-icons">child_care</span> growing cycle; <span class="material-icons">tips_and_updates</span>realize 1st year's transitions.</p>
</div>
</div>
<!-- SVG lines -->
<div class="row mx-0">
<svg height="2" width="1200">
<line x1="0" y1="0" x2="1200" y2="0" style="stroke:rgb(255,225,0);stroke-width:3" />
</svg>
</div>
<!-- Input -->
<div id="date-input" class="row text-center bg-body my-3">
<h2 class="display-6">Insert Birthdate</h2>
<span class="material-icons-outlined">south</span>
<div class="col-sm"></div>
<div class="col-sm-5 shadow-lg py-3 my-3 rounded">
<span class="me-4">🎂</span><input class="h6 fw-light mb-0" type="date" id="birthday">
</div>
<div class="col-sm"></div>
</div>
<!-- Pass Input to PyScript -->
<div class="row text-center bg-body">
<div class="col-sm"></div>
<div id="calc-button" class="col-sm-4">
<button id="run" pys-onClick="calculate" type="button" class="btn btn-lg btn-success mt-2">Calculate</button>
</div>
<div id="recalc-button" class="hide col-sm-4">
<a class="btn btn-md btn-success" role="button" href="./"><small>Recalculate</small></a>
</div>
<div class="col-sm"></div>
</div>
<!-- Output -->
<div class="row text-center bg-body my-0">
<div class="col-sm"></div>
<div class="col-md-6">
<h3 class="display-6 mt-4 mb-2">My baby is <span class="fw-bold text-success mb-0" id="weeks">?</span> weeks young</h3>
<p id="explain" class="fw-light fs-small"></p>
<div id="point" class="hide">
<span class="material-icons-outlined">south</span>
</div>
</div>
<div class="col-sm"></div>
</div>
<!-- Transitions content -->
<div id="transitions-view" class="row transitions text-center">
<div class="col-sm"></div>
<div class="col-md-6 shadow-lg rounded mb-20">
<div id="leap-1" class="hide">
<h4>Transition<span class="material-icons">looks_one</span></h4>
<span class="badge rounded-pill">Weeks: 5-6</span>
<p class="lead">As a consequence of eye development, your baby becomes more interested in their environment. Their vision range increases beyond 20-30 centimeters long. Due to lacrimal gland development, their eyes begin producing tears just like all land mammals' do. The tears help lubricate their eyes, remove irritants, and aid their immune system.</p>
<section class="controls">
<!--<button id="previous1" pys-onClick="previous1" type="button"><span class="material-icons-outlined">navigate_before</span>Previous</button>-->
<button id="next1" pys-onClick="next1" type="button">Next<span class="material-icons-outlined">navigate_next</span></button>
</section>
</div>
<div id="leap-2" class="hide">
<h4>Transition<span class="material-icons">looks_two</span></h4>
<span class="badge rounded-pill">Weeks: 8-9</span>
<p class="lead">During this transition, your baby starts developing movement consciously rather than reflectively. They might momentarily lift their head during tummy time and turn them towards sounds. They might also move and look curiously at both sides of their hands after twisting them. They now start feeling the movement of their body parts even if they cannot control it well yet.</p>
<section class="controls">
<button id="previous2" pys-onClick="previous2" type="button"><span class="material-icons-outlined">navigate_before</span>Previous</button>
<button id="next2" pys-onClick="next2" type="button">Next<span class="material-icons-outlined">navigate_next</span></button>
</section>
</div>
<div id="leap-3" class="hide">
<h4>Transition<span class="material-icons">looks_3</span></h4>
<span class="badge rounded-pill">Week: 12</span>
<p class="lead">Up to now, your infant's brain has grown by 25% compared to their due date brain size. Senses like vision and hearing clarity are sharpening, while motion developments will let your baby move smoother and less robotic. They might also start grabbing, holding, and tasting things by putting them into their mouth. Vocal development is also developing fast.</p>
<section class="controls">
<button id="previous3" pys-onClick="previous3" type="button"><span class="material-icons-outlined">navigate_before</span>Previous</button>
<button id="next3" pys-onClick="next3" type="button">Next<span class="material-icons-outlined">navigate_next</span></button>
</section>
</div>
<div id="leap-4" class="hide">
<h4>Transition<span class="material-icons">looks_4</span></h4>
<span class="badge rounded-pill">Weeks: 15-19</span>
<p class="lead">During this transition, your baby starts searching for their caretaker and following them with their eyes. Their upgraded motion control enables them to move all their body limbs and pass things from one hand to the opposite. They now see, scent, feel, and taste better. They might start waving their hand and changing facial expressions according to the sounds they hear.</p>
<section class="controls">
<button id="previous4" pys-onClick="previous4" type="button"><span class="material-icons-outlined">navigate_before</span>Previous</button>
<button id="next4" pys-onClick="next4" type="button">Next<span class="material-icons-outlined">navigate_next</span></button>
</section>
</div>
<div id="leap-5" class="hide">
<h4>Transition<span class="material-icons">looks_5</span></h4>
<span class="badge rounded-pill">Weeks: 23-26</span>
<p class="lead">During this transition, your baby starts developing an understanding of relationships between things; most importantly, here is when your baby understands the idea of distance. Want to reach for a pacifier or observe their caretaker leaving the room, same reaction. Your baby might start protesting to show they do not like to remain away from things and people. Motion control is now even better.</p>
<section class="controls">
<button id="previous5" pys-onClick="previous5" type="button"><span class="material-icons-outlined">navigate_before</span>Previous</button>
<button id="next5" pys-onClick="next5" type="button">Next<span class="material-icons-outlined">navigate_next</span></button>
</section>
</div>
<div id="leap-6" class="hide">
<h4>Transition<span class="material-icons">looks_6</span></h4>
<span class="badge rounded-pill">Weeks: 29-30</span>
<p class="lead">Even if it comes after a short gap, this period is considered the apogee of Transition 5. Although it might become stressful, keep it up, it's usually brief. Your baby begins paying closer attention to the distance between themselves and their caretakers. As a result, they might resist putting themselves to sleep unless caretakers are close enough.</p>
<section class="controls">
<button id="previous6" pys-onClick="previous6" type="button"><span class="material-icons-outlined">navigate_before</span>Previous</button>
<button id="next6" pys-onClick="next6" type="button">Next<span class="material-icons-outlined">navigate_next</span></button>
</section>
</div>
<div id="leap-7" class="hide">
<h4>Transition<span class="material-icons-outlined">filter_7</span></h4>
<span class="badge rounded-pill">Weeks: 34-37</span>
<p class="lead">By the end of this transition, your infant is growing strong and more confident in their movements. They might be already trying to stand on their own feet, aided by you, and try to crawl as well; however, balance is not in the picture yet. At the same time, they start inspecting things around. You might see them paying very close attention to the stuff they meet, like hair left on the floor.</p>
<section class="controls">
<button id="previous7" pys-onClick="previous7" type="button"><span class="material-icons-outlined">navigate_before</span>Previous</button>
<button id="next7" pys-onClick="next7" type="button">Next<span class="material-icons-outlined">navigate_next</span></button>
</section>
</div>
<div id="leap-8" class="hide">
<h4>Transition<span class="material-icons-outlined">filter_8</span></h4>
<span class="badge rounded-pill">weeks: 42-47</span>
<p class="lead">The last transition before your infant becomes a toddler, up until the age of 4. Your baby now is strong enough to explore the world around them and have an opinion. They might understand sequential event flows and refuse to follow their everyday routine. They enjoy meeting new things and going places with their caretakers.</p>
<section class="controls">
<button id="previous8" pys-onClick="previous8" type="button"><span class="material-icons-outlined">navigate_before</span>Previous</button>
<!--<button id="next8" pys-onClick="next8" type="button">Next<span class="material-icons-outlined">navigate_next</span></button>-->
</section>
</div>
</div>
<div class="col-md"></div>
</div>
<nav class="navbar fixed-bottom navbar-light bg-light justify-content-start pt-0">
<ul class="list-group list-group-horizontal ms-2">
<li><a href="./about/"><span class="material-icons-outlined">info</span></a></li>
<li><a href="https://www.ntemposd.me/"><span class="material-icons-outlined">palette</span></a></li>
<li><a href="mailto:hello@babyweeks.app"><span class="material-icons">mail_outline</span></a></li>
</ul>
</nav>
</div>
<py-script>
# Import packages
import datetime as dt
from js import document
# Define HTML input elements
input = Element("birthday")
# Define HTML output elements
weeks_output = Element("weeks")
explanation = Element("explain")
# leap content
cb = document.getElementById("calc-button")
di = document.getElementById("date-input")
rb = document.getElementById("recalc-button")
tv = document.getElementById("transitions-view")
arrow = document.getElementById("point")
leap1 = document.getElementById("leap-1")
leap2 = document.getElementById("leap-2")
leap3 = document.getElementById("leap-3")
leap4 = document.getElementById("leap-4")
leap5 = document.getElementById("leap-5")
leap6 = document.getElementById("leap-6")
leap7 = document.getElementById("leap-7")
leap8 = document.getElementById("leap-8")
# Calculate
def calculate(*args):
today = dt.date.today()
birthdate = dt.datetime.strptime(input.value,"%Y-%m-%d").date()
weeksold = (today-birthdate).days//7
weeks_output.write(weeksold)
cb.className = "hide"
di.className = "hide"
rb.className = "hide show"
arrow.className = "hide show"
if weeksold < 0:
explanation.write("Your baby was born in the future!")
elif 0 < weeksold < 4:
leap1.className = "hide show"
explanation.write("Transition 1 is approaching.")
elif 4 <= weeksold <= 6:
leap1.className = "hide show"
explanation.write("You are right in Transition 1.")
elif 6 < weeksold < 7:
leap2.className = "hide show"
explanation.write("Transition 2 is approaching.")
elif 7 <= weeksold <= 9:
leap2.className = "hide show"
explanation.write("You are right in Transition 2.")
elif 9 < weeksold < 11:
leap3.className = "hide show"
explanation.write("Transition 3 is approaching.")
elif 11 <= weeksold <= 12:
leap3.className = "hide show"
explanation.write("You are right in Transition 3.")
elif 12 < weeksold < 14:
leap4.className = "hide show"
explanation.write("Transition 4 is approaching.")
elif 14 <= weeksold <= 19:
leap4.className = "hide show"
explanation.write("You are right in Transition 4.")
elif 19 < weeksold < 22:
leap5.className = "hide show"
explanation.write("Transition 5 is approaching.")
elif 22 <= weeksold <= 26:
leap5.className = "hide show"
explanation.write("You are right in Transition 5.")
elif 26 < weeksold < 28:
leap6.className = "hide show"
explanation.write("Transition 6 is approaching.")
elif 28 <= weeksold <= 30:
leap6.className = "hide show"
explanation.write("You are right in Transition 6.")
elif 30 < weeksold < 33:
leap7.className = "hide show"
explanation.write("Transition 7 is approaching.")
elif 33 <= weeksold <= 37:
leap7.className = "hide show"
explanation.write("You are right in Transition 7.")
elif 37 < weeksold < 41:
leap8.className = "hide show"
explanation.write("Transition 8 is approaching.")
elif 41 <= weeksold <= 47:
leap8.className = "hide show"
explanation.write("You are right in Transition 8.")
else:
explanation.write("Well done! Your baby has passed through 8 Transitions so far.")
arrow.className = "hide"
# Transition 1 controls
def previous1(*args):
leap1.className = "hide"
leap8.className = "hide show"
def next1(*args):
leap1.className = "hide"
leap2.className = "hide show"
# Transition 2 controls
def previous2(*args):
leap2.className = "hide"
leap1.className = "hide show"
def next2(*args):
leap2.className = "hide"
leap3.className = "hide show"
# Transition 3 controls
def previous3(*args):
leap3.className = "hide"
leap2.className = "hide show"
def next3(*args):
leap3.className = "hide"
leap4.className = "hide show"
# Transition 4 controls
def previous4(*args):
leap4.className = "hide"
leap3.className = "hide show"
def next4(*args):
leap4.className = "hide"
leap5.className = "hide show"
# Transition 5 controls
def previous5(*args):
leap5.className = "hide"
leap4.className = "hide show"
def next5(*args):
leap5.className = "hide"
leap6.className = "hide show"
# Transition 6 controls
def previous6(*args):
leap6.className = "hide"
leap5.className = "hide show"
def next6(*args):
leap6.className = "hide"
leap7.className = "hide show"
# Transition 7 controls
def previous7(*args):
leap7.className = "hide"
leap6.className = "hide show"
def next7(*args):
leap7.className = "hide"
leap8.className = "hide show"
# Transition 8 controls
def previous8(*args):
leap8.className = "hide"
leap7.className = "hide show"
def next8(*args):
leap8.className = "hide"
leap1.className = "hide show"
</py-script>
<!-- Bootstrap JS -->
<script async src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>