-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
186 lines (182 loc) · 5.8 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="manifest" href="manifest.json">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="msapplication-starturl" content="/">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="icon" href="assets/logo.svg" type="image/svg+xml" />
<title>Baby Bam Bam</title>
<script>navigator.serviceWorker.register("js/service-worker.js")</script>
<link href="style/app.css" rel="stylesheet" />
</head>
<body>
<div id="imagepreload"></div>
<canvas id="canvas"></canvas>
<div id="help" class="help">
<div id="help-desktop">
<kbd>ctrl</kbd> + <kbd>alt</kbd> + <kbd>shift</kbd> + <kbd>O</kbd> to show
options</div>
<div id="help-mobile">
Longpress 3s to show options
</div>
</div>
<div id="preloadProgress">
<div id="preloadProgressBar"></div>
<div id="preloadProgressText">Preloading images & audio : <span id="preloadDone">0</span>/<span id="preloadTotal">0</span></div>
</div>
<dialog id="optionsDialog">
<div id="logo">
<img src="assets/logo.svg" />
<div>
<h1>Baby</h1>
<h2>Bam <span>Bam</span></h2>
</div>
</div>
<p>
As babies smash on the keyboard, images, letters and numbers appear on
the screen. Try the many options and find the ones that are right for
your baby. Help and suggestions on
<a href="https://github.com/bfritscher/baby-bam-bam" target="_blank">GitHub</a>.
</p>
<h2>Options</h2>
<details>
<summary>Global</summary>
<p>
<label><input type="checkbox" name="fadeAway" /> Fade</label>
<label>after <input type="number" name="fadeAfter" />s</label>
</p>
<p>
<label
><input type="checkbox" name="limitItems" />Limit objects</label
>
<label>to <input type="number" name="maxItems" /></label> on screen
</p>
<p>
<label
>Throttle to <input type="number" name="throttleMS" /> ms between objects</label
>
</p>
<p>
<label
><input type="checkbox" name="animateOnClick" /> Animate on
click</label
>
</p>
<p>
<label
><input type="checkbox" name="removeOnClick" /> Remove on
click</label
>
</p>
<p>
<label
><input type="checkbox" name="lockCursor" /> Lock Cursor</label
>
<span class="hint">( Currently disables drawing and click )</span>
</p>
</details>
<details>
<summary>Content</summary>
<p>
<label
><input type="checkbox" name="forceUpperCase" /> Force letters to
UPPERCASE</label
>
</p>
<p>
<label
><input type="checkbox" name="onlyAlphaNum" /> Only Letters and
Numbers</label
>
</p>
<p>
<label>
Font
<input type="text" name="fontFamily"
/></label>
<span class="hint"
>any name from
<a href="https://fonts.google.com/" target="_blank"
>Google Fonts</a
></span
>
</p>
<p>
<label>
Keyboard Letters Behaviour
<select name="letterMode">
<option value="letter">Display letters with font</option>
<option value="image">Display images matching letter</option>
</select></label
>
</p>
<p>
<label
><input type="checkbox" name="emptyBeforeRepeat" /> Random only repeats after showing complete collection</label
>
</p>
<p>
<label>
Enabled Image collections
<span class="hint">(ctrl + click to select multiple)</span><br />
<select
id="imageCollections"
name="imageCollections"
multiple
></select
></label>
<span class="hint"><br>In selection <span id="imagesCount"></span>
images, <span id="audioCount"></span> with audio</span>
</p>
<p>
External collections repositories <input type="button" id="externalCollectionAdd" value="add">
<ul id="externalCollections"></ul>
</p>
</details>
<details>
<summary>Drawing</summary>
<p>
<label
><input type="checkbox" name="drawingEnabled" /> Drawing enabled
</label>
</p>
<p>
<label
><input type="checkbox" name="clicklessDrawing" />Clickless mouse
drawing</label
>
</p>
<p>
<label
>Line Width <input type="number" name="drawingLineWidth" />
</label>
</p>
</details>
<details>
<summary>Audio</summary>
<p>
<label
><input type="checkbox" name="playAudio" /> Play audio clips</label
>
</p>
<p>
<label><input type="checkbox" name="ttsEnabled" /> Enable TextToSpeech </label
>,
<label
>language override
<input type="text" name="ttsLang" placeholder="browser default"
/></label>
</p>
</details>
<div class="actions">
<button id="optionsDialogClose" class="cta">Play</button>
<button id="fullscreenButton">Fullscreen</button>
</div>
</dialog>
<script src="js/app.js"></script>
</body>
</html>