File size: 44,496 Bytes
767607c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f98e127
767607c
 
 
 
 
 
 
f98e127
767607c
 
 
 
f98e127
767607c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f98e127
 
 
767607c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f98e127
 
767607c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f98e127
767607c
 
f98e127
767607c
 
 
 
 
 
 
 
 
f98e127
767607c
 
 
 
 
f98e127
 
767607c
 
 
 
 
 
 
 
 
 
 
 
 
 
4f6b38e
767607c
 
 
f98e127
767607c
f98e127
767607c
 
4f6b38e
767607c
 
 
 
 
 
 
 
 
 
 
 
 
 
1c2ce5a
767607c
f98e127
767607c
 
 
f98e127
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1c2ce5a
f98e127
 
 
 
 
 
 
 
767607c
 
 
 
 
 
bb8c49a
 
 
 
 
 
 
 
 
 
 
 
767607c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f98e127
767607c
 
 
 
 
 
 
f98e127
767607c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f98e127
767607c
 
 
 
 
 
 
 
 
1c2ce5a
767607c
 
 
f98e127
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
767607c
f98e127
767607c
 
 
f98e127
767607c
 
 
 
 
 
f98e127
 
767607c
 
 
f98e127
 
767607c
 
 
 
f98e127
767607c
 
 
bb8c49a
767607c
1c2ce5a
767607c
 
 
 
 
 
 
 
 
 
 
 
 
 
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
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
<!doctype html>
<html lang="he" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<meta name="theme-color" content="#4B6A2C">
<title>איך מתרגלים · אהלא וסהלא</title>
<link rel="icon" href="/static/icons/icon-192.png?v=2">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Assistant:wght@400;600;700&family=Secular+One&family=Noto+Sans+Hebrew:wght@500;700&display=swap">
<style>
/* Layout: one narrow RTL column; each section pairs a drawn mock of the app with a numbered key beside it (stacked on phones). */
:root{
  --bg:#EEF0E8; --surface:#FAFBF6; --ink:#1C241D; --muted:#5E685C; --line:#D5DACB;
  --olive:#4B6A2C; --olive-deep:#36501D; --on-olive:#FFFFFF; --olive-soft:#E3EAD6;
  --sumac:#A3303F; --sumac-bg:#F6E3E3; --ok:#2F7A4A; --ok-bg:#E1F0E4; --amber:#8A5E0E; --amber-bg:#F5ECD8; --orange:#C45F00; --gold:#B8860B; --gold-bg:#F7EBC6;
  --f-display:"Secular One","Assistant",system-ui,sans-serif;
  --f-body:"Assistant",system-ui,"Segoe UI",Arial,sans-serif;
  --f-tr:"Noto Sans Hebrew","Arial Hebrew",sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#141915; --surface:#1D241F; --ink:#E7EBE2; --muted:#9AA595; --line:#2F3830;
  --olive:#93B85F; --olive-deep:#6E8F42; --on-olive:#10150F; --olive-soft:#26301F;
  --sumac:#E77B87; --sumac-bg:#3A1E23; --ok:#6CC08A; --ok-bg:#1C3324; --amber:#E0B45A; --amber-bg:#3A2F17; --orange:#F2A04A; --gold:#E8C35A; --gold-bg:#3A3217;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#141915; --surface:#1D241F; --ink:#E7EBE2; --muted:#9AA595; --line:#2F3830;
  --olive:#93B85F; --olive-deep:#6E8F42; --on-olive:#10150F; --olive-soft:#26301F;
  --sumac:#E77B87; --sumac-bg:#3A1E23; --ok:#6CC08A; --ok-bg:#1C3324; --amber:#E0B45A; --amber-bg:#3A2F17; --orange:#F2A04A; --gold:#E8C35A; --gold-bg:#3A3217;
  color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--f-body);margin:0;padding-inline:max(16px,env(safe-area-inset-left),env(safe-area-inset-right));padding-block:max(18px,env(safe-area-inset-top)) max(48px,env(safe-area-inset-bottom));-webkit-text-size-adjust:100%}
main{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:44px}
h1,h2,h3{font-family:var(--f-display);font-weight:400;text-wrap:balance;margin:0}
h1{font-size:clamp(30px,6vw,44px);line-height:1.1}
h2{font-size:26px;line-height:1.2}
h3{font-size:19px}
p{margin:0}
.lead{color:var(--muted);max-width:60ch;font-size:18px}
.eyebrow{font:700 13px/1 var(--f-body);letter-spacing:.06em;color:var(--olive)}
header.top{display:flex;flex-direction:column;gap:12px}
section{display:flex;flex-direction:column;gap:16px}
.sechead{display:flex;flex-direction:column;gap:6px}
.sechead p{color:var(--muted);max-width:62ch}
.tr{font-family:var(--f-tr)}

/* a drawn screen and its numbered key */
.pair{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:720px){.pair{grid-template-columns:minmax(0,1fr)}}
.phone{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding-block:14px;padding-inline:24px;display:flex;flex-direction:column;gap:10px;box-shadow:0 3px 0 var(--line);position:relative}
.n{display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:50%;background:var(--sumac);color:#fff;font:700 13px/1 var(--f-body);flex:none;font-variant-numeric:tabular-nums}
.phone .n{position:absolute;z-index:2;box-shadow:0 0 0 2px var(--surface)}
.at{position:relative}
.at>.n{top:50%;right:-25px;transform:translateY(-50%)}
.at.l>.n{right:auto;left:-25px}
.m-foot.at>.n{top:-14px;transform:none}
.key{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.key li{display:flex;gap:10px;align-items:flex-start}
.key li div{min-width:0}
.key b{display:block;font-weight:700}
.key span.d{color:var(--muted);font-size:16px}

/* mock pieces, in the app's own shapes */
.m-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.m-brand{font:400 18px/1 var(--f-display)}
.m-pill{padding:4px 10px;border-radius:999px;border:1px solid var(--line);font:700 12px/1.2 var(--f-body);background:var(--bg)}
.m-drive{margin-inline-start:auto;padding:4px 10px;border-radius:999px;border:1px solid var(--olive);color:var(--olive);font:700 12px/1.2 var(--f-body)}
.m-today{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.m-today div{border:1px solid var(--line);border-radius:12px;padding:6px 4px;text-align:center;font:700 13px/1.25 var(--f-body);background:var(--bg)}
.m-today div small{display:block;font-weight:400;color:var(--muted);font-size:11px}
.m-today .hot{border-color:var(--olive);background:var(--olive-soft)}
.m-rewards{display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--olive);border-radius:12px;background:var(--surface)}
.m-week{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--amber-bg);border:2px solid var(--orange);color:var(--orange);font:700 13px var(--f-body)}
.m-rewards b{display:block;font-size:13px}.m-rewards small{display:block;color:var(--orange);font-size:10.5px;font-weight:700}.m-fire{color:var(--olive);font-weight:700;font-size:11px;text-align:left}
.m-nav{display:flex;gap:4px;flex-wrap:wrap}
.m-nav span:not(.n){font:600 12px/1 var(--f-body);padding:6px 8px;border-radius:8px;color:var(--muted)}
.m-nav span.on:not(.n){background:var(--olive);color:var(--on-olive)}
.m-level{font:400 15px/1.2 var(--f-display);text-align:center;color:var(--olive-deep)}
.m-level small{display:block;font:400 11px var(--f-body);color:var(--muted)}
.m-chapter{border-radius:14px;background:var(--olive);color:var(--on-olive);padding:8px 12px;display:flex;justify-content:space-between;align-items:center;font:700 14px/1.2 var(--f-body)}
.m-chapter small{font-weight:400;opacity:.85}
.m-chapter i{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.3);margin-top:4px;position:relative;overflow:hidden}
.m-chapter i::after{content:"";position:absolute;inset:0 auto 0 0;width:55%;background:var(--on-olive)}
.road{position:relative;height:520px}
.road svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.road .thread{fill:none;stroke:var(--line);stroke-width:4;stroke-linecap:round}
.road .went{fill:none;stroke:var(--ok);stroke-width:4;stroke-dasharray:1 10;stroke-linecap:round}
.stop{position:absolute;display:flex;align-items:center;gap:8px;transform:translateY(-50%)}
.stop.L{flex-direction:row-reverse}
.stop.L .lbl{text-align:left}
.ball{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;flex:none;position:relative;font:700 18px/1 var(--f-body);background:var(--surface);border:3px solid var(--line);color:var(--muted)}
.ball.started{background:conic-gradient(var(--olive) 0 40%,var(--line) 40% 100%);border:0}
.ball.started::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--surface)}
.ball.started span{position:relative}
.ball.now{border-color:var(--olive);color:var(--olive);box-shadow:0 0 0 6px var(--olive-soft)}
.ball.done{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.ball.gold{background:var(--gold-bg);border-color:var(--gold);color:var(--gold)}
.ball.video{border-style:dashed;color:var(--olive)}
.ball .badge{position:absolute;top:-4px;inset-inline-end:-4px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;background:var(--ok);color:#fff}
.ball.gold .badge{background:var(--gold)}
.lbl{font:700 13px/1.25 var(--f-body);max-width:120px}
.lbl small{display:block;font-weight:400;color:var(--muted);font-size:11.5px}
.chip{display:inline-block;margin-top:2px;padding:1px 6px;border-radius:6px;font:700 10.5px/1.4 var(--f-body);background:var(--olive-soft);color:var(--olive-deep)}
.chip.read{background:var(--amber-bg);color:var(--amber)}
.tag{position:absolute;bottom:calc(100% + 6px);right:50%;transform:translateX(50%);white-space:nowrap;background:var(--olive);color:var(--on-olive);font:700 11px/1.2 var(--f-body);padding:4px 8px;border-radius:8px}
.tag::after{content:"";position:absolute;top:100%;right:50%;transform:translateX(50%);border:5px solid transparent;border-top-color:var(--olive)}
.tag.hw{background:var(--amber);color:var(--surface)}
.tag.hw::after{border-top-color:var(--amber)}
.tag small{display:block;font-weight:400;font-size:10px;opacity:.9}
.cup{position:absolute;transform:translate(50%,-50%);font-size:28px}

/* the practice card */
.m-bar{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.m-btn{border:1px solid var(--line);border-radius:10px;padding:5px 8px;font:600 12px/1.2 var(--f-body);background:var(--surface);color:var(--ink);white-space:nowrap}
.m-btn.p{background:var(--olive);color:var(--on-olive);border-color:var(--olive)}
.m-card{border:1px solid var(--line);border-radius:16px;padding:14px 12px;display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center;background:var(--bg);position:relative}
.m-meta{align-self:stretch;display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.m-prompt{font:400 26px/1.2 var(--f-display)}
.m-task{font-size:13px;color:var(--muted);margin-top:-6px}
.m-mics{display:flex;align-items:center;gap:14px}
.m-mic{width:64px;height:64px;border-radius:50%;background:var(--olive);color:var(--on-olive);display:grid;place-items:center;box-shadow:0 0 0 7px var(--olive-soft)}
.m-mic.he{width:46px;height:46px;background:var(--surface);color:var(--olive);border:2px solid var(--olive);box-shadow:none}
.m-mic svg{width:26px;height:26px}
.m-status{font-size:12px;color:var(--muted)}
.m-result{align-self:stretch;border-top:1px dashed var(--line);padding-top:10px;display:flex;flex-direction:column;gap:6px;align-items:center}
.m-score{display:flex;gap:8px;align-items:center}
.m-score b{font:400 28px/1 var(--f-display);font-variant-numeric:tabular-nums}
.pill{padding:3px 10px;border-radius:999px;font:700 12px/1.3 var(--f-body)}
.pill.good{background:var(--ok-bg);color:var(--ok)}
.pill.mid{background:var(--amber-bg);color:var(--amber)}
.pill.bad{background:var(--sumac-bg);color:var(--sumac)}
.m-words{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;font:700 17px/1.3 var(--f-tr)}
.m-words span{padding:2px 6px;border-radius:6px}
.w-ok{background:var(--ok-bg);color:var(--ok)}
.w-near{background:var(--amber-bg);color:var(--amber)}
.m-sp{flex:1}
.m-flag{font-size:11.5px;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:3px 8px;background:var(--surface)}
.m-foot{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;align-self:stretch}
.m-foot span:not(.n){border:1px solid var(--line);border-radius:10px;padding:6px 2px;font:600 11px/1.2 var(--f-body);text-align:center;background:var(--surface)}

/* the settings dialog */
.m-btn.gear.hl{background:var(--olive-soft);border-color:var(--olive);box-shadow:0 0 0 4px var(--olive-soft)}
.dlg{border:1px solid var(--line);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:12px;background:var(--bg);box-shadow:0 8px 24px rgba(0,0,0,.12)}
.dlg-h{display:flex;justify-content:space-between;align-items:center;font-size:15px}
.dlg .row{display:flex;justify-content:space-between;align-items:center;gap:8px;font:600 14px/1.3 var(--f-body);padding:8px 10px;border-radius:10px;background:var(--surface);border:1px solid var(--line)}
.sel{border:1px solid var(--line);border-radius:8px;padding:3px 10px;font-weight:700;background:var(--bg)}
.seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;direction:ltr}
.seg i{font-style:normal;padding:3px 8px;font-size:12.5px}
.seg i.on{background:var(--olive);color:var(--on-olive)}
.tg{width:38px;height:22px;border-radius:999px;background:var(--line);position:relative;flex:none}
.tg::after{content:"";position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:50%;background:var(--surface)}
.tg.on{background:var(--olive)}
.tg.on::after{right:auto;left:3px}

/* topic cards */
.topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.topic{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.topic .th{display:flex;align-items:center;gap:12px}
.topic .ball{width:44px;height:44px;font-size:16px}
.topic .th div{min-width:0}
.topic .th small{display:block;color:var(--muted);font-size:13.5px}
.topic p{font-size:15.5px}
.flow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font:700 13px/1.3 var(--f-body)}
.flow span{padding:3px 8px;border-radius:8px;background:var(--bg);border:1px solid var(--line)}
.flow i{font-style:normal;color:var(--muted)}
.ex{font-size:13.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:8px}
.ex b{color:var(--ink);font-weight:600}

/* legend of states */
.states{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:14px 10px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.state b{font-size:15px}
.state span{font-size:13.5px;color:var(--muted)}
.score-scale{display:flex;flex-direction:column;gap:6px}
.scale{display:flex;height:34px;border-radius:10px;overflow:hidden;font:700 13px/34px var(--f-body);text-align:center;direction:ltr}
.scale div{min-width:0;white-space:nowrap;overflow:hidden}
.scale .bad{flex:60;background:var(--sumac-bg);color:var(--sumac)}
.scale .mid{flex:25;background:var(--amber-bg);color:var(--amber)}
.scale .good{flex:15;background:var(--ok-bg);color:var(--ok)}
.ticks{display:flex;direction:ltr;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.ticks span:nth-child(1){flex:60}.ticks span:nth-child(2){flex:25}.ticks span:nth-child(3){flex:15}

.tips{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.tip{border-inline-start:3px solid var(--olive);padding:4px 12px;display:flex;flex-direction:column;gap:4px}
.tip p{font-size:15.5px;color:var(--muted)}
.reward-demo{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:12px}.reward-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.reward-stats div{padding:9px 4px;border-radius:10px;background:var(--olive-soft);text-align:center}.reward-stats div:first-child{background:var(--amber-bg);box-shadow:inset 0 0 0 1px var(--orange)}.reward-stats div:first-child b{color:var(--orange)}.reward-stats b{display:block;color:var(--olive);font:400 23px/1.1 var(--f-display)}.reward-stats small{font-size:11px;color:var(--muted)}
.reward-lesson{font:400 19px/1.2 var(--f-display);color:var(--olive);border-bottom:1px solid var(--line);padding-bottom:5px}.reward-subject{font-weight:700;font-size:14px}.beads{display:flex;gap:7px;flex-wrap:wrap}.bead{width:28px;height:28px;border-radius:50%;border:3px solid #52624b;background:radial-gradient(circle at 32% 27%,#dce7d4 0 9%,#769064 23%,#405136 72%);box-shadow:inset -2px -3px 3px rgb(0 0 0/.25)}.bead.gold{border-color:#9b690b;background:radial-gradient(circle at 32% 27%,#fff3a7 0 9%,#e4b83e 27%,#9d6509 75%)}
.jump{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding:8px 16px;background:var(--bg);border-bottom:1px solid var(--line)}
.jump::-webkit-scrollbar{display:none}
.jump a{flex:none;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;font:700 14px/1.2 var(--f-body)}
.jump a:focus-visible{outline:2px solid var(--olive);outline-offset:2px}
section{scroll-margin-top:60px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (max-width:720px){
  .pair .phone{max-width:380px;width:100%;margin-inline:auto}
}
@media (max-width:520px){
  body{font-size:16px;padding-block:18px 40px}
  main{gap:34px}
  h2{font-size:23px}
  .lead{font-size:16.5px}
  .phone{padding-block:12px;border-radius:18px}
  .key{gap:10px}
  .key span.d{font-size:15px}
  .topics{grid-template-columns:minmax(0,1fr)}
  .states{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .state{padding:12px 8px}
  .tips{grid-template-columns:minmax(0,1fr)}
  .lbl{font-size:12.5px;max-width:104px}
  .m-btn{padding:5px 7px}
}
.back{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:1px solid var(--olive);background:var(--olive);color:var(--on-olive);font:700 15px/1.2 var(--f-body);text-decoration:none;min-height:40px}
.back:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
a,button{-webkit-tap-highlight-color:transparent}
.jump a{min-height:36px;display:inline-flex;align-items:center}
</style>

</head>
<body>
<main>
  <a class="back" id="back" href="/">→ חזרה לאפליקציה</a>
  <header class="top">
    <span class="eyebrow">אהלא וסהלא · מדריך קצר</span>
    <h1>איך מתרגלים במסלול</h1>
    <p class="lead">המסלול הוא הדרך שלכם בין השיעורים. לומדים מילים, מתרגלים משפטים בקול, מקבלים משוב על ההגייה ואוספים את המשפטים שכבר הפכו לשלכם. כאן תמצאו את המסלול, הפרסים והמשוב, כל סוגי התרגול והכלים הנוספים באפליקציה.</p>
  </header>

  <nav class="jump" aria-label="תוכן המדריך"><a href="#path">המסלול</a><a href="#states">העיגולים</a><a href="#rewards">ההתקדמות שלי</a><a href="#kinds">סוגי נושאים</a><a href="#practice">התרגול</a><a href="#more">עוד דרכי תרגול</a><a href="#settings">הגדרות</a><a href="#tips">טיפים</a></nav>

  <!-- 1. the path screen -->
  <section id="path">
    <div class="sechead">
      <h2>מסך המסלול</h2>
      <p>זה המסך שנפתח אחרי הכניסה. הוא נפתח תמיד על הנושא שכדאי לתרגל עכשיו.</p>
    </div>
    <div class="pair">
      <div class="phone" aria-label="דוגמה של מסך המסלול">
        <div class="m-head at"><span class="n">1</span><span class="m-brand">אהלא וסהלא</span><span class="m-pill">כיתה ב׳ ▾</span><span class="m-drive">? מדריך</span></div>
        <div class="m-today at l"><span class="n">2</span>
          <div class="hot">סרטון יומי<small>יום 3 · ברכות</small></div>
          <div>תרגול יומי<small>10 משפטים</small></div>
          <div>שיעורי בית<small>עוד יומיים</small></div>
        </div>
        <div class="m-rewards at"><span class="n">3</span><span class="m-week">🔥 6</span><span><b>הערבית שכבר שלכם</b><small>רצף של 6 ימים · שיא 11</small></span><span class="m-fire">3/4 השבוע<br>18 ★</span></div>
        <div class="m-nav"><span class="on">מסלול</span><span>פעלים</span><span>משחקים</span><span>חבר מביא חבר</span></div>
        <div class="m-level">שלב א׳<small>8 מתוך 10 שיעורים מוכנים</small></div>
        <div class="m-chapter at l"><span class="n">4</span><div>שיעור 3<i></i></div><small>תורגלו 22 מתוך 40</small></div>
        <div class="road">
          <svg viewBox="0 0 310 520" preserveAspectRatio="none" aria-hidden="true">
            <path class="thread" d="M155 40 C155 84 230 84 230 128 C230 172 155 172 155 216 C155 260 80 260 80 304 C80 348 155 348 155 392 C155 436 230 436 230 480 L230 515"/>
            <path class="went" d="M155 40 C155 84 230 84 230 128 C230 172 155 172 155 216 C155 260 80 260 80 304"/>
          </svg>
          <div class="stop" style="right:calc(50% - 26px);top:40px"><div class="ball gold"><span class="badge">★</span>1</div><div class="lbl">פעלים<small>תורגלו 8 מתוך 8</small></div></div>
          <div class="stop" style="right:calc(26% - 26px);top:128px"><div class="ball done"><span class="badge">✓</span>2</div><div class="lbl">משפטים א׳<span class="chip">עב׳ ← ער׳</span><small>תורגלו 10 מתוך 10</small></div></div>
          <div class="stop" style="right:calc(50% - 26px);top:216px"><div class="ball video"><span class="badge">✓</span>▶&#xFE0E;</div><div class="lbl">בשוק<small>✓ נצפה</small></div></div>
          <span class="n" style="top:292px;right:-25px">5</span>
          <div class="stop L" style="left:calc(26% - 26px);top:304px"><div class="ball started now"><div class="tag">התחילו</div><span>3</span></div><div class="lbl">משפטים א׳<span class="chip read">ער׳ ← עב׳</span><small>תורגלו 4 מתוך 10</small></div></div>
          <div class="stop" style="right:calc(50% - 26px);top:392px"><div class="ball"><div class="tag hw">שיעורי בית<small>עוד יומיים</small></div>💬</div><div class="lbl">סיפור השוק<small>תורגלו 0 מתוך 12</small></div></div>
          <span class="n" style="top:468px;right:-25px">6</span>
          <div class="stop" style="right:calc(26% - 26px);top:480px"><div class="ball">✎&#xFE0E;</div><div class="lbl">כתיבת משפטים<small>נכתבו 0 מתוך 8</small></div></div>
        </div>
      </div>
      <ol class="key">
        <li><span class="n">1</span><div><b>הכיתה והמדריך</b><span class="d">לחיצה על שם הכיתה מראה את חברי הכיתה, או מחליפה כיתה אם אתם ביותר מאחת. הכפתור <b style="display:inline">?</b> מחזיר למדריך הזה בכל רגע מהמסלול.</span></div></li>
        <li><span class="n">2</span><div><b>שלושה קיצורים להיום</b><span class="d"><b style="display:inline">סרטון יומי</b> שהמורה קבע להיום (מודגש עד שצופים). <b style="display:inline">תרגול יומי</b>: סבב של 10 משפטים, חצי לשיפור וחצי חדשים מהשיעור הנוכחי. <b style="display:inline">שיעורי בית</b>: פותח ישר את הנושא הקרוב להגשה.</span></div></li>
        <li><span class="n">3</span><div><b>ההתקדמות והרצף שלכם</b><span class="d">🔥 הוא מספר ימי התרגול הרצופים ומופיע במרכז הכרטיס. לידו מופיעים יעד ארבעת הימים השבועי ומספר משפטי הזהב ★. לחיצה פותחת את כל אוסף החרוזים, לפי שיעור ונושא.</span></div></li>
        <li><span class="n">4</span><div><b>כותרת השיעור</b><span class="d">הפס מראה כמה מהשיעור תורגל. לחיצה עליה פותחת את הנושא הבא שעוד לא נגמר. בסוף כל שיעור יש גביע 🏆 שמזהיב כשהשיעור הושלם.</span></div></li>
        <li><span class="n">5</span><div><b>הנושא של עכשיו</b><span class="d">מסומן בהילה ובבועה „התחילו” או „המשך”. אם גללתם רחוק, הכפתור „חזרה לנושא הנוכחי” מחזיר אליו.</span></div></li>
        <li><span class="n">6</span><div><b>כל הנושאים פתוחים</b><span class="d">אפשר לפתוח כל נושא בכל שיעור, גם בלי לסיים את מה שלפניו.</span></div></li>
      </ol>
    </div>
  </section>

  <!-- 2. topic states -->
  <section id="states">
    <div class="sechead">
      <h2>מה אומר כל עיגול</h2>
      <p>הטבעת סביב העיגול מתמלאת לפי כמה משפטים כבר אמרתם בנושא. החוט בין העיגולים נצבע ירוק אחרי נושא שנגמר.</p>
    </div>
    <div class="states">
      <div class="state"><div class="ball">4</div><b>עוד לא התחלתם</b><span>המספר הוא מקום הנושא בשיעור</span></div>
      <div class="state"><div class="ball started"><span>3</span></div><b>בתהליך</b><span>הטבעת מראה כמה כבר תורגל</span></div>
      <div class="state"><div class="ball done"><span class="badge">✓</span>2</div><b>הושלם</b><span>כל המשפטים נאמרו לפחות פעם אחת</span></div>
      <div class="state"><div class="ball gold"><span class="badge">★</span>1</div><b>זהב</b><span>כל המשפטים קיבלו 75 ומעלה</span></div>
      <div class="state"><div class="ball" style="border-color:var(--amber);margin-top:22px"><div class="tag hw" style="font-size:10px">עוד 3 ימים</div>5</div><b>שיעורי בית</b><span>הבועה סופרת את הימים עד ההגשה</span></div>
      <div class="state"><div class="ball video">▶&#xFE0E;</div><b>סרטון</b><span>✓ מופיע אחרי שפתחתם וצפיתם</span></div>
    </div>
  </section>

  <!-- 3. progress rewards -->
  <section id="rewards">
    <div class="sechead">
      <h2>הערבית שכבר שלכם</h2>
      <p>זה המקום לראות לא רק מה סיימתם, אלא כמה ערבית כבר צברתם לאורך הדרך. פותחים אותו בלחיצה על הכרטיס שמעל המסלול.</p>
    </div>
    <div class="pair">
      <div class="reward-demo" aria-label="דוגמה של אוסף ההתקדמות">
        <div class="reward-stats"><div><b>🔥 6</b><small>רצף · שיא 11</small></div><div><b>42</b><small>משפטים שלכם</small></div><div><b>18</b><small>חרוזי זהב</small></div><div><b>3</b><small>ימים השבוע</small></div></div>
        <div class="reward-lesson">שלב א׳ · שיעור 3</div>
        <div class="reward-subject">משפטים: עברית ← ערבית א׳</div>
        <div class="beads" aria-hidden="true"><i class="bead gold"></i><i class="bead gold"></i><i class="bead"></i><i class="bead gold"></i><i class="bead"></i><i class="bead"></i></div>
        <div class="reward-subject">פעלים בעבר</div>
        <div class="beads" aria-hidden="true"><i class="bead gold"></i><i class="bead"></i><i class="bead gold"></i><i class="bead"></i></div>
      </div>
      <div class="tips">
        <div class="tip"><h3>חרוז לכל משפט</h3><p>הקלטה ראשונה עם דיבור אוספת את המשפט. לחיצה על חרוז באוסף מחזירה ישר למשפט שלו.</p></div>
        <div class="tip"><h3>זהב ב־75</h3><p>כשהציון הטוב ביותר במשפט מגיע ל־75, החרוז הופך לזהב. האפליקציה שומרת את הציון הגבוה ביותר, לא את האחרון.</p></div>
        <div class="tip"><h3>יעד שבועי 4/4</h3><p>הטבעת סופרת ימים שונים שבהם תרגלתם השבוע, מיום שני עד יום ראשון. די בהקלטה אחת עם דיבור כדי שהיום ייספר.</p></div>
        <div class="tip"><h3>רצף 🔥</h3><p>הרצף סופר ימי תרגול רצופים. הרצף של אתמול נשאר מוצג במשך היום כדי שתספיקו להמשיך אותו; אם היום עובר בלי תרגול, הוא מתאפס. השיא האישי נשמר.</p></div>
        <div class="tip"><h3>רגעים שחוגגים</h3><p>חרוז חדש, מעבר לזהב, שיא חדש, המשך רצף והשלמת נושא מקבלים הודעת חגיגה קצרה אחרי הציון.</p></div>
      </div>
    </div>
  </section>

  <!-- 4. topic kinds -->
  <section id="kinds">
    <div class="sechead">
      <h2>סוגי הנושאים</h2>
      <p>הסמל בעיגול והתווית מתחת לשם אומרים איזה סוג תרגול מחכה בפנים.</p>
    </div>
    <div class="topics">
      <article class="topic">
        <div class="th"><div class="ball now">📖</div><div><h3>מילים חדשות</h3><small>סמל ספר, בתחילת כל שיעור</small></div></div>
        <div class="flow"><span>רואים מילה בעברית</span><i>←</i><span>נזכרים וחושפים</span><i>←</i><span>ידעתי / עוד לא</span></div>
        <p>כרטיס לכל מילה חדשה בשיעור. נסו להיזכר איך אומרים אותה, ואז הקישו לגילוי: מופיעים התעתיק והכתב הערבי, והמילה מושמעת (כפתור <b>לאט</b> משמיע אותה שוב לאט). מסמנים <b>ידעתי</b> או <b>עוד לא</b>, ומילה שסימנתם „עוד לא” חוזרת בסוף הסבב. אין כאן ציון ואין מיקרופון.</p>
        <p class="ex"><b>נספר כ:</b> „נלמדו 12 מתוך 19”. הנושא הושלם כשכל מילה סומנה „ידעתי” פעם אחת. ההתקדמות נשמרת במכשיר הזה.</p>
      </article>
      <article class="topic">
        <div class="th"><div class="ball now">🧩</div><div><h3>התאימו זוגות</h3><small>סמל פאזל, אחרי המילים החדשות</small></div></div>
        <div class="flow"><span>עברית בטור אחד</span><i>←</i><span>תעתיק בטור השני</span><i>←</i><span>מחברים זוגות</span></div>
        <p>משחק על המילים החדשות של השיעור, בסבבים של עד חמש מילים. מקישים על מילה בעברית ועל התעתיק שלה: זוג נכון נצבע בירוק ומושמע, וזוג שגוי רועד באדום ונספר כטעות. בסוף רואים כמה טעויות היו וכמה זמן לקח, ואפשר לשחק שוב.</p>
        <p class="ex"><b>נספר כ:</b> „הותאמו 15 מתוך 19”. משחק שלם בלי אף טעות מזהיב את הנושא ★. ההתקדמות נשמרת במכשיר הזה.</p>
      </article>
      <article class="topic">
        <div class="th"><div class="ball now">1</div><div><h3>עברית ← ערבית</h3><small>תווית ירוקה <span class="chip">עב׳ ← ער׳</span></small></div></div>
        <div class="flow"><span>רואים עברית</span><i>←</i><span>אומרים בערבית</span><i>←</i><span>ציון הגייה</span></div>
        <p>הסוג הנפוץ. מופיע משפט בעברית, ואתם אומרים אותו בערבית מדוברת. מי שלא בטוח לוחץ „הצג תשובה”. בנושאים האלה יש גם <b>תרגול שקט ללא ציון</b>: מרכיבים את המשפט מאוסף מילים, בלי מיקרופון.</p>
        <p class="ex"><b>למשל:</b> משפטים א׳ וב׳, פעלים, הטיות בעבר, המספרים, הזוגי, עבר ועתיד</p>
      </article>
      <article class="topic">
        <div class="th"><div class="ball now">2</div><div><h3>ערבית ← עברית</h3><small>תווית צהובה <span class="chip read">ער׳ ← עב׳</span></small></div></div>
        <div class="flow"><span>רואים תעתיק</span><i>←</i><span>קוראים בקול</span><i>←</i><span>מתרגמים</span></div>
        <p>מופיע משפט בערבית בתעתיק עברי. יש שני מיקרופונים: <b>ע</b> לקריאה בערבית, עם ציון על ההגייה, ו<b>א</b> לתרגום בעברית, עם ציון על התרגום שלא נשמר. „הצג תרגום” מראה את התרגום הנכון.</p>
        <p class="ex"><b>למשל:</b> משפטים: ערבית ← עברית, שאלות על סיפור המוסך, קפטן איוב</p>
      </article>
      <article class="topic">
        <div class="th"><div class="ball now">💬</div><div><h3>שיחה, סיפור ושיר</h3><small>סמל בועת דיבור</small></div></div>
        <div class="flow"><span>כל השורות על המסך</span><i>←</i><span>אומרים בתורן</span></div>
        <p>אומרים את השורות אחת אחרי השנייה. <b>השמעת השיחה</b> מקריאה הכול מההתחלה (עם אפשרות „ערבית בלבד”), ו<b>בוחן</b> מבקש לומר את כל השיחה ברצף ונותן ציון לכל שורה ובסוף ציון כולל. בשיחה יש שני דוברים, בסיפור קול אחד.</p>
        <p class="ex"><b>למשל:</b> שיחת היכרות, סיפור השוק, סיפור הפלאפל, שיר הצבעים</p>
      </article>
      <article class="topic">
        <div class="th"><div class="ball now">✎&#xFE0E;</div><div><h3>כתיבת משפטים</h3><small>סמל עיפרון, בסוף כל שיעור</small></div></div>
        <div class="flow"><span>מטלה מהחוברת</span><i>←</i><span>כותבים משפטים</span><i>←</i><span>המורה קורא</span></div>
        <p>שיעורי הבית של החוברת: כותבים משפטים משלכם לפי ההנחיה, שורה לכל משפט. הטקסט נשמר אוטומטית, המורה קורא אותו בפאנל, ואין ציון.</p>
        <p class="ex"><b>נספר כ:</b> „נכתבו 3 מתוך 5”</p>
      </article>
      <article class="topic">
        <div class="th"><div class="ball video">▶&#xFE0E;</div><div><h3>סרטון</h3><small>עיגול מקווקו</small></div></div>
        <div class="flow"><span>צופים</span><i>←</i><span>✓ נצפה</span></div>
        <p>סרטון שהמורה הוסיף לשיעור, במקום שלו בדרך. אחרי צפייה מופיע עליו ✓. סרטון לא נועל את הנושאים שאחריו.</p>
      </article>
    </div>
  </section>

  <!-- 5. the practice screen -->
  <section id="practice">
    <div class="sechead">
      <h2>מסך התרגול</h2>
      <p>נפתח כשבוחרים נושא. כאן אומרים את המשפטים ורואים מה המערכת שמעה.</p>
    </div>
    <div class="pair">
      <div class="phone" aria-label="דוגמה של מסך התרגול">
        <div class="m-bar at"><span class="n">1</span><span class="m-btn p">→ חזרה למסלול</span><span class="m-btn">🚗 מצב נסיעה</span><span class="m-sp"></span><span class="m-btn">☰ רשימה</span><span class="m-btn gear">⚙</span></div>
        <div class="m-card">
          <div class="m-meta"><span>3 / 10</span><span>משפטים א׳</span></div>
          <div class="at l" style="display:flex;flex-direction:column;gap:6px;padding-inline:14px"><span class="n">2</span>
            <div class="m-prompt">מה שלומך?</div>
            <div class="m-task">איך אומרים את זה בערבית מדוברת?</div>
          </div>
          <div class="m-mics at"><span class="n">3</span>
            <div class="m-mic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="2" width="6" height="12" rx="3" fill="currentColor"/><path d="M5 11a7 7 0 0 0 14 0M12 18v4M8 22h8"/></svg></div>
          </div>
          <div class="m-status">לחצו ודברו. ההקלטה נעצרת לבד כשמסיימים</div>
          <span class="m-btn">תרגול שקט ללא ציון</span>
          <div class="m-result at l"><span class="n">4</span>
            <div class="m-score"><b>78</b><span class="pill mid">כמעט</span></div>
            <div class="m-words tr"><span class="w-ok">כִּיף</span><span class="w-near">חָאלַכּ</span></div>
          </div>
          <div class="m-foot at"><span class="n">5</span><span>🔊 השמע</span><span>▶ הקלטה</span><span>הצג תשובה</span><span>הקודם</span><span>הבא</span></div>
        </div>
      </div>
      <ol class="key">
        <li><span class="n">1</span><div><b>שורת הכלים</b><span class="d"><b style="display:inline">חזרה למסלול</b>, <b style="display:inline">מצב נסיעה</b> שמקריא ומקשיב בלי לגעת במסך, <b style="display:inline">רשימת המשפטים</b> עם הציון הכי טוב בכל משפט, ו־⚙ להגדרות ההשמעה. בשיחה מופיעים כאן גם השמעת השיחה ובוחן.</span></div></li>
        <li><span class="n">2</span><div><b>המשפט</b><span class="d">מה שצריך לומר, ומעליו המיקום בנושא.</span></div></li>
        <li><span class="n">3</span><div><b>המיקרופון</b><span class="d">לוחצים פעם אחת ומדברים, וההקלטה נעצרת לבד. בלי מיקרופון אפשר לבחור <b style="display:inline">תרגול שקט</b> ולהרכיב את המשפט ממילים.</span></div></li>
        <li><span class="n">4</span><div><b>הציון</b><span class="d">כל מילה נצבעת לפי מה שנשמע: ירוק נאמר נכון, צהוב כמעט. מתחת מופיעים טיפים לשיפור.</span></div></li>
        <li><span class="n">5</span><div><b>הכפתורים למטה</b><span class="d"><b style="display:inline">השמע</b> את התשובה הנכונה, <b style="display:inline">הקלטה</b> כדי לשמוע את עצמכם, <b style="display:inline">הצג תשובה</b>, ומעבר בין משפטים. בחלק מהנושאים יש גם <b style="display:inline">שלילה</b> ו<b style="display:inline">הטיית פעלים</b>: אותו משפט בשלילה או בגוף אחר.</span></div></li>
      </ol>
    </div>
    <div class="score-scale" aria-label="סולם הציונים">
      <h3>סולם הציון</h3>
      <div class="scale"><div class="bad">נסו שוב</div><div class="mid">כמעט</div><div class="good">מצוין</div></div>
      <div class="ticks"><span>0</span><span>60</span><span>75–100</span></div>
    </div>
  </section>

  <!-- 6. other practice routes -->
  <section id="more">
    <div class="sechead">
      <h2>עוד דרכים לתרגל</h2>
      <p>לא חייבים לבחור נושא ולתרגל אותו מההתחלה עד הסוף. אלה המסלולים הקצרים והמשחקיים שמופיעים לפי ההרשאות והשיעורים של הכיתה.</p>
    </div>
    <div class="topics">
      <article class="topic"><div class="th"><div class="ball now">10</div><div><h3>תרגול יומי</h3><small>הכפתור מעל המסלול</small></div></div><p>סבב קצר של עד עשרה משפטים. הוא משלב משפטים חלשים שכדאי לשפר עם משפטים חדשים משיעורי הבית או מהשיעור הראשון שעוד לא הושלם. בסוף רואים כמה נאמרו וכמה ציונים השתפרו.</p><p class="ex"><b>הסבב מסומן כהושלם להיום:</b> אחרי שאמרתם לפחות חצי ממנו.</p></article>
      <article class="topic"><div class="th"><div class="ball now">🚗</div><div><h3>מצב נסיעה</h3><small>במסך התרגול</small></div></div><p>האפליקציה מקריאה את ההנחיה, מקשיבה לתשובה, אומרת את ההערכה בקול וממשיכה. מתאים להליכה או נסיעה שבהן לא רוצים לגעת במסך. מסיימים בכפתור „סיום נסיעה”.</p></article>
      <article class="topic"><div class="th"><div class="ball now">פעל</div><div><h3>לשונית פעלים</h3><small>טבלת הפעלים של הקורס</small></div></div><p>מחפשים פועל, עוברים בין השיעורים ורואים את הצורות שכבר נלמדו לפי בניין וגזרה. לחיצה על צורה בערבית משמיעה אותה. הסברים קצרים עוזרים לזהות את התבנית.</p></article>
      <article class="topic"><div class="th"><div class="ball now">📿</div><div><h3>משחקי חזרה</h3><small>בלשונית משחקים, כשזמינים</small></div></div><p>משחק הזיכרון הופך חרוזים ומחבר בין פעלים בעברית ובערבית. משחקים נוספים יכולים להיפתח לפי החומר וההרשאה של הכיתה.</p></article>
      <article class="topic"><div class="th"><div class="ball now">💬</div><div><h3>יאללה נדבר</h3><small>שיחה עם דמויות מהשיעורים, כשזמינה</small></div></div><p>בוחרים תרחיש ומנהלים שיחה קצרה בערבית עם דמות מהקורס. השיחה משתמשת במילים ובדקדוק שכבר נלמדו, ומתקנת ניסוח או דקדוק בעברית כשצריך.</p></article>
      <article class="topic"><div class="th"><div class="ball video">▶&#xFE0E;</div><div><h3>סרטונים וספרייה</h3><small>לפי התוכן שהמורה פרסם</small></div></div><p>סרטון יומי מופיע מעל המסלול ביום שנקבע. סרטוני שיעור נמצאים בתוך הדרך, והספרייה הדיגיטלית נפתחת ממסך הכניסה למי שקיבל גישה.</p></article>
    </div>
  </section>


  <!-- 7. playback settings -->
  <section id="settings">
    <div class="sechead">
      <h2>הגדרות השמעה ⚙</h2>
      <p>במסך התרגול יש כפתור ⚙. הוא פותח שתי הגדרות שנשמרות במכשיר לפעם הבאה.</p>
    </div>
    <div class="pair">
      <div class="phone" aria-label="דוגמה של חלון הגדרות ההשמעה">
        <div class="m-bar"><span class="m-btn p">→ חזרה למסלול</span><span class="m-sp"></span><span class="m-btn">☰ רשימה</span><span class="m-btn gear hl">⚙</span></div>
        <div class="dlg">
          <div class="dlg-h"><b>הגדרות השמעה</b><span class="m-btn">סגירה</span></div>
          <div class="row at l"><span class="n">1</span><span>מהירות</span><span class="sel">x1</span></div>
          <div class="row at l"><span class="n">2</span><span>הקראת המשפט בעברית</span><span class="tg on" aria-hidden="true"></span></div>
        </div>
      </div>
      <ol class="key">
        <li><span class="n">1</span><div><b>מהירות</b><span class="d"><b style="display:inline">x0.8</b> לאט יותר, כדי לשמוע כל הברה. <b style="display:inline">x1</b> רגיל. <b style="display:inline">x1.5</b> מהיר, לאימון הבנת שמיעה.</span></div></li>
        <li><span class="n">2</span><div><b>הקראת המשפט בעברית</b><span class="d">כשמסומן, כל משפט חדש מוקרא בקול בעברית לפני שעונים, כך שאפשר לתרגל בלי לקרוא מהמסך. בנושאי ערבית ← עברית אין הקראה, כי העברית היא התשובה.</span></div></li>
      </ol>
    </div>
  </section>

  <!-- 8. tips -->
  <section id="tips">
    <div class="sechead"><h2>כמה טיפים</h2></div>
    <div class="tips">
      <div class="tip"><h3>מתחילים שיעור חדש?</h3><p>עברו קודם על המילים החדשות ושחקו בהתאמת הזוגות. כך המשפטים של השיעור יהיו מוכרים כשתגיעו אליהם.</p></div>
      <div class="tip"><h3>לא יודעים מה לתרגל?</h3><p>לחצו „תרגול יומי”. הסבב בוחר לבד משפטים לשיפור ומשפטים חדשים.</p></div>
      <div class="tip"><h3>רוצים זהב?</h3><p>חזרו לנושא שהושלם ושפרו כל משפט ל־75 ומעלה. נשמר תמיד הציון הכי טוב.</p></div>
      <div class="tip"><h3>בדרך לעבודה?</h3><p>מצב נסיעה מקריא, מקשיב ונותן משוב בקול, משפט אחרי משפט.</p></div>
      <div class="tip"><h3>ציון נמוך מסיבה לא ברורה?</h3><p>דברו קרוב למיקרופון, בשקט סביב, ולחצו „השמע” כדי לשמוע שוב את הנוסח הנכון.</p></div>
    </div>
  </section>
</main>
<script>
// opened from the app: go back to where the student was; opened from a shared link: to the app's start
document.getElementById("back").onclick=e=>{
  try{ if(document.referrer&&new URL(document.referrer).origin===location.origin&&history.length>1){ e.preventDefault(); history.back(); } }catch{}
};
</script>
</body>
</html>