3v324v23 commited on
Commit
767607c
·
1 Parent(s): aa2dc4c

Add a comprehensive guide for using the app in Hebrew, detailing features, navigation, and tips for effective practice.

Browse files
Files changed (2) hide show
  1. static/guide.html +411 -0
  2. static/index.html +16 -0
static/guide.html ADDED
@@ -0,0 +1,411 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!doctype html>
2
+ <html lang="he" dir="rtl">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
6
+ <meta name="theme-color" content="#4B6A2C">
7
+ <title>איך מתרגלים · אהלא וסהלא</title>
8
+ <link rel="icon" href="/static/icons/icon-192.png?v=2">
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <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">
11
+ <style>
12
+ /* Layout: one narrow RTL column; each section pairs a drawn mock of the app with a numbered key beside it (stacked on phones). */
13
+ :root{
14
+ --bg:#EEF0E8; --surface:#FAFBF6; --ink:#1C241D; --muted:#5E685C; --line:#D5DACB;
15
+ --olive:#4B6A2C; --olive-deep:#36501D; --on-olive:#FFFFFF; --olive-soft:#E3EAD6;
16
+ --sumac:#A3303F; --sumac-bg:#F6E3E3; --ok:#2F7A4A; --ok-bg:#E1F0E4; --amber:#8A5E0E; --amber-bg:#F5ECD8; --gold:#B8860B; --gold-bg:#F7EBC6;
17
+ --f-display:"Secular One","Assistant",system-ui,sans-serif;
18
+ --f-body:"Assistant",system-ui,"Segoe UI",Arial,sans-serif;
19
+ --f-tr:"Noto Sans Hebrew","Arial Hebrew",sans-serif;
20
+ }
21
+ @media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
22
+ --bg:#141915; --surface:#1D241F; --ink:#E7EBE2; --muted:#9AA595; --line:#2F3830;
23
+ --olive:#93B85F; --olive-deep:#6E8F42; --on-olive:#10150F; --olive-soft:#26301F;
24
+ --sumac:#E77B87; --sumac-bg:#3A1E23; --ok:#6CC08A; --ok-bg:#1C3324; --amber:#E0B45A; --amber-bg:#3A2F17; --gold:#E8C35A; --gold-bg:#3A3217;
25
+ color-scheme:dark}}
26
+ :root[data-theme="dark"]{
27
+ --bg:#141915; --surface:#1D241F; --ink:#E7EBE2; --muted:#9AA595; --line:#2F3830;
28
+ --olive:#93B85F; --olive-deep:#6E8F42; --on-olive:#10150F; --olive-soft:#26301F;
29
+ --sumac:#E77B87; --sumac-bg:#3A1E23; --ok:#6CC08A; --ok-bg:#1C3324; --amber:#E0B45A; --amber-bg:#3A2F17; --gold:#E8C35A; --gold-bg:#3A3217;
30
+ color-scheme:dark}
31
+ *{box-sizing:border-box}
32
+ 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%}
33
+ main{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:44px}
34
+ h1,h2,h3{font-family:var(--f-display);font-weight:400;text-wrap:balance;margin:0}
35
+ h1{font-size:clamp(30px,6vw,44px);line-height:1.1}
36
+ h2{font-size:26px;line-height:1.2}
37
+ h3{font-size:19px}
38
+ p{margin:0}
39
+ .lead{color:var(--muted);max-width:60ch;font-size:18px}
40
+ .eyebrow{font:700 13px/1 var(--f-body);letter-spacing:.06em;color:var(--olive)}
41
+ header.top{display:flex;flex-direction:column;gap:12px}
42
+ section{display:flex;flex-direction:column;gap:16px}
43
+ .sechead{display:flex;flex-direction:column;gap:6px}
44
+ .sechead p{color:var(--muted);max-width:62ch}
45
+ .tr{font-family:var(--f-tr)}
46
+
47
+ /* a drawn screen and its numbered key */
48
+ .pair{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:24px;align-items:start}
49
+ @media (max-width:720px){.pair{grid-template-columns:minmax(0,1fr)}}
50
+ .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}
51
+ .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}
52
+ .phone .n{position:absolute;z-index:2;box-shadow:0 0 0 2px var(--surface)}
53
+ .at{position:relative}
54
+ .at>.n{top:50%;right:-25px;transform:translateY(-50%)}
55
+ .at.l>.n{right:auto;left:-25px}
56
+ .m-foot.at>.n{top:-14px;transform:none}
57
+ .key{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
58
+ .key li{display:flex;gap:10px;align-items:flex-start}
59
+ .key li div{min-width:0}
60
+ .key b{display:block;font-weight:700}
61
+ .key span.d{color:var(--muted);font-size:16px}
62
+
63
+ /* mock pieces, in the app's own shapes */
64
+ .m-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
65
+ .m-brand{font:400 18px/1 var(--f-display)}
66
+ .m-pill{padding:4px 10px;border-radius:999px;border:1px solid var(--line);font:700 12px/1.2 var(--f-body);background:var(--bg)}
67
+ .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)}
68
+ .m-today{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
69
+ .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)}
70
+ .m-today div small{display:block;font-weight:400;color:var(--muted);font-size:11px}
71
+ .m-today .hot{border-color:var(--olive);background:var(--olive-soft)}
72
+ .m-nav{display:flex;gap:4px;flex-wrap:wrap}
73
+ .m-nav span:not(.n){font:600 12px/1 var(--f-body);padding:6px 8px;border-radius:8px;color:var(--muted)}
74
+ .m-nav span.on:not(.n){background:var(--olive);color:var(--on-olive)}
75
+ .m-level{font:400 15px/1.2 var(--f-display);text-align:center;color:var(--olive-deep)}
76
+ .m-level small{display:block;font:400 11px var(--f-body);color:var(--muted)}
77
+ .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)}
78
+ .m-chapter small{font-weight:400;opacity:.85}
79
+ .m-chapter i{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.3);margin-top:4px;position:relative;overflow:hidden}
80
+ .m-chapter i::after{content:"";position:absolute;inset:0 auto 0 0;width:55%;background:var(--on-olive)}
81
+ .road{position:relative;height:520px}
82
+ .road svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
83
+ .road .thread{fill:none;stroke:var(--line);stroke-width:4;stroke-linecap:round}
84
+ .road .went{fill:none;stroke:var(--ok);stroke-width:4;stroke-dasharray:1 10;stroke-linecap:round}
85
+ .stop{position:absolute;display:flex;align-items:center;gap:8px;transform:translateY(-50%)}
86
+ .stop.L{flex-direction:row-reverse}
87
+ .stop.L .lbl{text-align:left}
88
+ .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)}
89
+ .ball.started{background:conic-gradient(var(--olive) 0 40%,var(--line) 40% 100%);border:0}
90
+ .ball.started::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--surface)}
91
+ .ball.started span{position:relative}
92
+ .ball.now{border-color:var(--olive);color:var(--olive);box-shadow:0 0 0 6px var(--olive-soft)}
93
+ .ball.done{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
94
+ .ball.gold{background:var(--gold-bg);border-color:var(--gold);color:var(--gold)}
95
+ .ball.locked{opacity:.6;font-size:18px}
96
+ .ball.video{border-style:dashed;color:var(--olive)}
97
+ .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}
98
+ .ball.gold .badge{background:var(--gold)}
99
+ .lbl{font:700 13px/1.25 var(--f-body);max-width:120px}
100
+ .lbl small{display:block;font-weight:400;color:var(--muted);font-size:11.5px}
101
+ .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)}
102
+ .chip.read{background:var(--amber-bg);color:var(--amber)}
103
+ .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}
104
+ .tag::after{content:"";position:absolute;top:100%;right:50%;transform:translateX(50%);border:5px solid transparent;border-top-color:var(--olive)}
105
+ .tag.hw{background:var(--amber);color:var(--surface)}
106
+ .tag.hw::after{border-top-color:var(--amber)}
107
+ .tag small{display:block;font-weight:400;font-size:10px;opacity:.9}
108
+ .cup{position:absolute;transform:translate(50%,-50%);font-size:28px}
109
+
110
+ /* the practice card */
111
+ .m-bar{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
112
+ .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}
113
+ .m-btn.p{background:var(--olive);color:var(--on-olive);border-color:var(--olive)}
114
+ .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}
115
+ .m-meta{align-self:stretch;display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
116
+ .m-prompt{font:400 26px/1.2 var(--f-display)}
117
+ .m-task{font-size:13px;color:var(--muted);margin-top:-6px}
118
+ .m-mics{display:flex;align-items:center;gap:14px}
119
+ .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)}
120
+ .m-mic.he{width:46px;height:46px;background:var(--surface);color:var(--olive);border:2px solid var(--olive);box-shadow:none}
121
+ .m-mic svg{width:26px;height:26px}
122
+ .m-status{font-size:12px;color:var(--muted)}
123
+ .m-result{align-self:stretch;border-top:1px dashed var(--line);padding-top:10px;display:flex;flex-direction:column;gap:6px;align-items:center}
124
+ .m-score{display:flex;gap:8px;align-items:center}
125
+ .m-score b{font:400 28px/1 var(--f-display);font-variant-numeric:tabular-nums}
126
+ .pill{padding:3px 10px;border-radius:999px;font:700 12px/1.3 var(--f-body)}
127
+ .pill.good{background:var(--ok-bg);color:var(--ok)}
128
+ .pill.mid{background:var(--amber-bg);color:var(--amber)}
129
+ .pill.bad{background:var(--sumac-bg);color:var(--sumac)}
130
+ .m-words{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;font:700 17px/1.3 var(--f-tr)}
131
+ .m-words span{padding:2px 6px;border-radius:6px}
132
+ .w-ok{background:var(--ok-bg);color:var(--ok)}
133
+ .w-near{background:var(--amber-bg);color:var(--amber)}
134
+ .m-sp{flex:1}
135
+ .m-flag{font-size:11.5px;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:3px 8px;background:var(--surface)}
136
+ .m-foot{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;align-self:stretch}
137
+ .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)}
138
+
139
+ /* the settings dialog */
140
+ .m-btn.gear.hl{background:var(--olive-soft);border-color:var(--olive);box-shadow:0 0 0 4px var(--olive-soft)}
141
+ .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)}
142
+ .dlg-h{display:flex;justify-content:space-between;align-items:center;font-size:15px}
143
+ .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)}
144
+ .sel{border:1px solid var(--line);border-radius:8px;padding:3px 10px;font-weight:700;background:var(--bg)}
145
+ .seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;direction:ltr}
146
+ .seg i{font-style:normal;padding:3px 8px;font-size:12.5px}
147
+ .seg i.on{background:var(--olive);color:var(--on-olive)}
148
+ .tg{width:38px;height:22px;border-radius:999px;background:var(--line);position:relative;flex:none}
149
+ .tg::after{content:"";position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:50%;background:var(--surface)}
150
+ .tg.on{background:var(--olive)}
151
+ .tg.on::after{right:auto;left:3px}
152
+
153
+ /* topic cards */
154
+ .topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
155
+ .topic{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
156
+ .topic .th{display:flex;align-items:center;gap:12px}
157
+ .topic .ball{width:44px;height:44px;font-size:16px}
158
+ .topic .th div{min-width:0}
159
+ .topic .th small{display:block;color:var(--muted);font-size:13.5px}
160
+ .topic p{font-size:15.5px}
161
+ .flow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font:700 13px/1.3 var(--f-body)}
162
+ .flow span{padding:3px 8px;border-radius:8px;background:var(--bg);border:1px solid var(--line)}
163
+ .flow i{font-style:normal;color:var(--muted)}
164
+ .ex{font-size:13.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:8px}
165
+ .ex b{color:var(--ink);font-weight:600}
166
+
167
+ /* legend of states */
168
+ .states{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
169
+ .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)}
170
+ .state b{font-size:15px}
171
+ .state span{font-size:13.5px;color:var(--muted)}
172
+ .score-scale{display:flex;flex-direction:column;gap:6px}
173
+ .scale{display:flex;height:34px;border-radius:10px;overflow:hidden;font:700 13px/34px var(--f-body);text-align:center;direction:ltr}
174
+ .scale div{min-width:0;white-space:nowrap;overflow:hidden}
175
+ .scale .bad{flex:60;background:var(--sumac-bg);color:var(--sumac)}
176
+ .scale .mid{flex:25;background:var(--amber-bg);color:var(--amber)}
177
+ .scale .good{flex:15;background:var(--ok-bg);color:var(--ok)}
178
+ .ticks{display:flex;direction:ltr;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
179
+ .ticks span:nth-child(1){flex:60}.ticks span:nth-child(2){flex:25}.ticks span:nth-child(3){flex:15}
180
+
181
+ .tips{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
182
+ .tip{border-inline-start:3px solid var(--olive);padding:4px 12px;display:flex;flex-direction:column;gap:4px}
183
+ .tip p{font-size:15.5px;color:var(--muted)}
184
+ .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)}
185
+ .jump::-webkit-scrollbar{display:none}
186
+ .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)}
187
+ .jump a:focus-visible{outline:2px solid var(--olive);outline-offset:2px}
188
+ section{scroll-margin-top:60px}
189
+ html{scroll-behavior:smooth}
190
+ @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
191
+ @media (max-width:720px){
192
+ .pair .phone{max-width:380px;width:100%;margin-inline:auto}
193
+ }
194
+ @media (max-width:520px){
195
+ body{font-size:16px;padding-block:18px 40px}
196
+ main{gap:34px}
197
+ h2{font-size:23px}
198
+ .lead{font-size:16.5px}
199
+ .phone{padding-block:12px;border-radius:18px}
200
+ .key{gap:10px}
201
+ .key span.d{font-size:15px}
202
+ .topics{grid-template-columns:minmax(0,1fr)}
203
+ .states{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
204
+ .state{padding:12px 8px}
205
+ .tips{grid-template-columns:minmax(0,1fr)}
206
+ .lbl{font-size:12.5px;max-width:104px}
207
+ .m-btn{padding:5px 7px}
208
+ }
209
+ .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}
210
+ .back:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
211
+ a,button{-webkit-tap-highlight-color:transparent}
212
+ .jump a{min-height:36px;display:inline-flex;align-items:center}
213
+ </style>
214
+
215
+ </head>
216
+ <body>
217
+ <main>
218
+ <a class="back" id="back" href="/">→ חזרה לאפליקציה</a>
219
+ <header class="top">
220
+ <span class="eyebrow">אהלא וסהלא · מדריך קצר</span>
221
+ <h1>איך מתרגלים במסלול</h1>
222
+ <p class="lead">המסלול הוא הדרך שלכם בין השיעורים. כל עיגול בדרך הוא נושא: בוחרים אותו, שומעים, אומרים בקול ומקבלים ציון על ההגייה. כאן תמצאו מה עושה כל כפתור, ומה ההבדל בין סוגי הנושאים.</p>
223
+ </header>
224
+
225
+ <nav class="jump" aria-label="תוכן המדריך"><a href="#path">המסלול</a><a href="#states">העיגולים</a><a href="#kinds">סוגי נושאים</a><a href="#practice">התרגול</a><a href="#settings">הגדרות</a><a href="#tips">טיפים</a></nav>
226
+
227
+ <!-- 1. the path screen -->
228
+ <section id="path">
229
+ <div class="sechead">
230
+ <h2>מסך המסלול</h2>
231
+ <p>זה המסך שנפתח אחרי הכניסה. הוא נפתח תמיד על הנושא שכדאי לתרגל עכשיו.</p>
232
+ </div>
233
+ <div class="pair">
234
+ <div class="phone" aria-label="דוגמה של מסך המסלול">
235
+ <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>
236
+ <div class="m-today at l"><span class="n">2</span>
237
+ <div class="hot">סרטון יומי<small>יום 3 · ברכות</small></div>
238
+ <div>תרגול יומי<small>10 משפטים</small></div>
239
+ <div>שיעורי בית<small>עוד יומיים</small></div>
240
+ </div>
241
+ <div class="m-nav at"><span class="n">3</span><span class="on">מסלול</span><span>ספריה דיגיטלית</span><span>חבר מביא חבר</span></div>
242
+ <div class="m-level">שלב א׳<small>8 מתוך 10 שיעורים מוכנים</small></div>
243
+ <div class="m-chapter at l"><span class="n">4</span><div>שיעור 3<i></i></div><small>תורגלו 22 מתוך 40</small></div>
244
+ <div class="road">
245
+ <svg viewBox="0 0 310 520" preserveAspectRatio="none" aria-hidden="true">
246
+ <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"/>
247
+ <path class="went" d="M155 40 C155 84 230 84 230 128 C230 172 155 172 155 216 C155 260 80 260 80 304"/>
248
+ </svg>
249
+ <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>
250
+ <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>
251
+ <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>
252
+ <span class="n" style="top:292px;right:-25px">5</span>
253
+ <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>
254
+ <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>
255
+ <span class="n" style="top:468px;right:-25px">6</span>
256
+ <div class="stop" style="right:calc(26% - 26px);top:480px"><div class="ball locked">🔒</div><div class="lbl">כתיבת משפטים<small>נעול</small></div></div>
257
+ </div>
258
+ </div>
259
+ <ol class="key">
260
+ <li><span class="n">1</span><div><b>הכיתה ומצב נסיעה</b><span class="d">לחיצה על שם הכיתה מראה את חברי הכיתה, או מחליפה כיתה אם אתם ביותר מאחת. <b style="display:inline">מצב נסיעה</b> מקריא את המשפט, מקשיב לתשובה ואומר את ההערכה בקול, בלי להסתכל על המסך.</span></div></li>
261
+ <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>
262
+ <li><span class="n">3</span><div><b>לשוניות</b><span class="d">המסלול, הספרייה הדיגיטלית (סרטונים וטקסטים) וחבר מביא חבר.</span></div></li>
263
+ <li><span class="n">4</span><div><b>כותרת השיעור</b><span class="d">הפס מראה כמה מהשיעור תורגל. לחיצה עליה פותחת את הנושא הבא שעוד לא נגמר. בסוף כל שיעור יש גביע 🏆 שמזהיב כשהשיעור הושלם.</span></div></li>
264
+ <li><span class="n">5</span><div><b>הנושא של עכשיו</b><span class="d">מסומן בהילה ובבועה „התחילו” או „המשך”. אם גללתם רחוק, הכפתור „חזרה לנושא הנוכחי” מחזיר אליו.</span></div></li>
265
+ <li><span class="n">6</span><div><b>נושאים נעולים</b><span class="d">נפתחים כשמתרגלים את כל המשפטים בנושאים שלפניהם. נושא שהוא שיעורי בית פתוח תמיד, וסרטון או כתיבה לא נועלים את מה שאחריהם.</span></div></li>
266
+ </ol>
267
+ </div>
268
+ </section>
269
+
270
+ <!-- 2. topic states -->
271
+ <section id="states">
272
+ <div class="sechead">
273
+ <h2>מה אומר כל עיגול</h2>
274
+ <p>הטבעת סביב העיגול מתמלאת לפי כמה משפטים כבר אמרתם בנושא. החוט בין העיגולים נצבע ירוק אחרי נושא שנגמר.</p>
275
+ </div>
276
+ <div class="states">
277
+ <div class="state"><div class="ball">4</div><b>עוד לא התחלתם</b><span>המספר הוא מקום הנושא בשיעור</span></div>
278
+ <div class="state"><div class="ball started"><span>3</span></div><b>בתהליך</b><span>הטבעת מראה כמה כבר תורגל</span></div>
279
+ <div class="state"><div class="ball done"><span class="badge">✓</span>2</div><b>הושלם</b><span>כל המשפטים נאמרו לפחות פעם אחת</span></div>
280
+ <div class="state"><div class="ball gold"><span class="badge">★</span>1</div><b>זהב</b><span>כל המשפטים קיבלו „מצוין” (85 ומעלה)</span></div>
281
+ <div class="state"><div class="ball locked">🔒</div><b>נעול</b><span>קודם מסיימים את הנושאים שלפניו</span></div>
282
+ <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>
283
+ </div>
284
+ </section>
285
+
286
+ <!-- 3. topic kinds -->
287
+ <section id="kinds">
288
+ <div class="sechead">
289
+ <h2>סוגי הנושאים</h2>
290
+ <p>הסמל בעיגול והתווית מתחת לשם אומרים איזה סוג תרגול מחכה בפנים.</p>
291
+ </div>
292
+ <div class="topics">
293
+ <article class="topic">
294
+ <div class="th"><div class="ball now">1</div><div><h3>עברית ← ערבית</h3><small>תווית ירוקה <span class="chip">עב׳ ← ער׳</span></small></div></div>
295
+ <div class="flow"><span>רואים עברית</span><i>←</i><span>אומרים בערבית</span><i>←</i><span>ציון הגייה</span></div>
296
+ <p>הסוג הנפוץ. מופיע משפט בעברית, ואתם אומרים אותו בערבית מדוברת. מי שלא בטוח לוחץ „הצג תשובה”. בנושאים האלה יש גם <b>תרגול שקט ללא ציון</b>: מרכיבים את המשפט מאוסף מילים, בלי מיקרופון.</p>
297
+ <p class="ex"><b>למשל:</b> משפטים א׳ וב׳, פעלים, הטיות בעבר, המספרים, הזוגי, עבר ועתיד</p>
298
+ </article>
299
+ <article class="topic">
300
+ <div class="th"><div class="ball now">2</div><div><h3>ערבית ← עברית</h3><small>תווית צהובה <span class="chip read">ער׳ ← עב׳</span></small></div></div>
301
+ <div class="flow"><span>רואים תעתיק</span><i>←</i><span>קוראים בקול</span><i>←</i><span>מתרגמים</span></div>
302
+ <p>מופיע משפט בערבית בתעתיק עברי. יש שני מיקרופונים: <b>ע</b> לקריאה בערבית, עם ציון על ההגייה, ו<b>א</b> לתרגום בעברית, עם ציון על התרגום שלא נשמר. „הצג תרגום” מראה את התרגום הנכון.</p>
303
+ <p class="ex"><b>למשל:</b> משפטים: ערבית ← עברית, שאלות על סיפור המוסך, קפטן איוב</p>
304
+ </article>
305
+ <article class="topic">
306
+ <div class="th"><div class="ball now">💬</div><div><h3>שיחה, סיפור ושיר</h3><small>סמל בועת דיבור</small></div></div>
307
+ <div class="flow"><span>כל השורות על המסך</span><i>←</i><span>אומרים בתורן</span></div>
308
+ <p>אומרים את השורות אחת אחרי השנייה. <b>השמעת השיחה</b> מקריאה הכול מההתחלה (עם אפשרות „ערבית בלבד”), ו<b>בוחן</b> מבקש לומר את כל השיחה ברצף ונותן ציון לכל שורה ובסוף ציון כולל. בשיחה יש שני דוברים, בסיפור קול אחד.</p>
309
+ <p class="ex"><b>למשל:</b> שיחת היכרות, סיפור השוק, סיפור הפלאפל, שיר הצבעים</p>
310
+ </article>
311
+ <article class="topic">
312
+ <div class="th"><div class="ball now">✎&#xFE0E;</div><div><h3>כתיבת משפטים</h3><small>סמל עיפרון, בסוף כל שיעור</small></div></div>
313
+ <div class="flow"><span>מטלה מהחוברת</span><i>←</i><span>כותבים משפטים</span><i>←</i><span>המורה קורא</span></div>
314
+ <p>שיעורי הבית של החוברת: כותבים משפטים משלכם לפי ההנחיה, שורה לכל משפט. הטקסט נשמר אוטומטית, המורה קורא אותו בפאנל, ואין ציון.</p>
315
+ <p class="ex"><b>נספר כ:</b> „נכתבו 3 מתוך 5”</p>
316
+ </article>
317
+ <article class="topic">
318
+ <div class="th"><div class="ball video">▶&#xFE0E;</div><div><h3>סרטון</h3><small>עיגול מקווקו</small></div></div>
319
+ <div class="flow"><span>צופים</span><i>←</i><span>✓ נצפה</span></div>
320
+ <p>סרטון שהמורה הוסיף לשיעור, במקום שלו בדרך. אחרי צפייה מופיע עליו ✓. סרטון לא נועל את הנושאים שאחריו.</p>
321
+ </article>
322
+ </div>
323
+ </section>
324
+
325
+ <!-- 4. the practice screen -->
326
+ <section id="practice">
327
+ <div class="sechead">
328
+ <h2>מסך התרגול</h2>
329
+ <p>נפתח כשבוחרים נושא. כאן אומרים את המשפטים ורואים מה המערכת שמעה.</p>
330
+ </div>
331
+ <div class="pair">
332
+ <div class="phone" aria-label="דוגמה של מסך התרגול">
333
+ <div class="m-bar at"><span class="n">1</span><span class="m-btn p">→ חזרה למסלול</span><span class="m-sp"></span><span class="m-btn">☰ רשימה</span><span class="m-btn gear">⚙</span></div>
334
+ <div class="m-card">
335
+ <div class="m-meta"><span>3 / 10</span><span>משפטים א׳</span></div>
336
+ <div class="at l" style="display:flex;flex-direction:column;gap:6px;padding-inline:14px"><span class="n">2</span>
337
+ <div class="m-prompt">מה שלומך?</div>
338
+ <div class="m-task">איך אומרים את זה בערבית מדוברת?</div>
339
+ </div>
340
+ <div class="m-mics at"><span class="n">3</span>
341
+ <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>
342
+ </div>
343
+ <div class="m-status">לחצו ודברו. ההקלטה נעצרת לבד כשמסיימים</div>
344
+ <span class="m-btn">תרגול שקט ללא ציון</span>
345
+ <div class="m-result at l"><span class="n">4</span>
346
+ <div class="m-score"><b>78</b><span class="pill mid">כמעט</span></div>
347
+ <div class="m-words tr"><span class="w-ok">כִּיף</span><span class="w-near">חָאלַכּ</span></div>
348
+ </div>
349
+ <div class="m-foot at"><span class="n">5</span><span>🔊 השמע</span><span>▶ הקלטה</span><span>הצג תשובה</span><span>הקודם</span><span>הבא</span></div>
350
+ </div>
351
+ </div>
352
+ <ol class="key">
353
+ <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>
354
+ <li><span class="n">2</span><div><b>המשפט</b><span class="d">מה שצריך לומר, ומעליו המיקום בנושא.</span></div></li>
355
+ <li><span class="n">3</span><div><b>המיקרופון</b><span class="d">לוחצים פעם אחת ומדברים, וההקלטה נעצרת לבד. בלי מיקרופון אפשר לבחור <b style="display:inline">תרגול שקט</b> ולהרכיב את המשפט ממילים.</span></div></li>
356
+ <li><span class="n">4</span><div><b>הציון</b><span class="d">כל מילה נצבעת לפי מה שנשמע: ירוק נאמר נכון, צהוב כמעט. מתחת מופיעים טיפים לשיפור.</span></div></li>
357
+ <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>
358
+ </ol>
359
+ </div>
360
+ <div class="score-scale" aria-label="סולם הציונים">
361
+ <h3>סולם הציון</h3>
362
+ <div class="scale"><div class="bad">נסו שוב</div><div class="mid">כמעט</div><div class="good">מצוין</div></div>
363
+ <div class="ticks"><span>0</span><span>60</span><span>85–100</span></div>
364
+ </div>
365
+ </section>
366
+
367
+
368
+ <!-- 5. playback settings -->
369
+ <section id="settings">
370
+ <div class="sechead">
371
+ <h2>הגדרות השמעה ⚙</h2>
372
+ <p>במסך התרגול, בפינה השמאלית העליונה, יש כפתור ⚙. הוא פותח חלון עם שלוש הגדרות. הבחירה נשמרת במכשיר לפעם הבאה.</p>
373
+ </div>
374
+ <div class="pair">
375
+ <div class="phone" aria-label="דוגמה של חלון הגדרות ההשמעה">
376
+ <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>
377
+ <div class="dlg">
378
+ <div class="dlg-h"><b>הגדרות השמעה</b><span class="m-btn">סגירה</span></div>
379
+ <div class="row at l"><span class="n">1</span><span>קול ההשמעה</span><span class="sel">אמיר ▾</span></div>
380
+ <div class="row at l"><span class="n">2</span><span>מהירות</span><span class="seg"><i>x0.8</i><i class="on">x1</i><i>x1.5</i></span></div>
381
+ <div class="row at l"><span class="n">3</span><span>הקראת המשפט בעברית</span><span class="tg on" aria-hidden="true"></span></div>
382
+ </div>
383
+ </div>
384
+ <ol class="key">
385
+ <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>
386
+ <li><span class="n">2</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>
387
+ <li><span class="n">3</span><div><b>הקראת המשפט בעברית</b><span class="d">כשמסומן, כל משפט חדש מוקרא בקול בעברית לפני שעונים, כך שאפשר לתרגל בלי לקרוא מהמסך. בנושאי ערבית ← עברית אין הקראה, כי העברית היא התשובה.</span></div></li>
388
+ </ol>
389
+ </div>
390
+ </section>
391
+
392
+ <!-- 6. tips -->
393
+ <section id="tips">
394
+ <div class="sechead"><h2>כמה טיפים</h2></div>
395
+ <div class="tips">
396
+ <div class="tip"><h3>לא יודעים מה לתרגל?</h3><p>לחצו „תרגול יומי”. הסבב בוחר לבד משפטים לשיפור ומשפטים חדשים.</p></div>
397
+ <div class="tip"><h3>רוצים זהב?</h3><p>חזרו לנושא שהושלם ושפרו כל משפט ל־85 ומעלה. נשמר תמיד הציון הכי טוב.</p></div>
398
+ <div class="tip"><h3>בדרך לעבודה?</h3><p>מצב נסיעה מקריא, מקשיב ונותן משוב בקול, משפט אחרי משפט.</p></div>
399
+ <div class="tip"><h3>ציון נמוך מסיבה לא ברורה?</h3><p>דברו קרוב למיקרופון, בשקט סביב, ולחצו „השמע” כדי לשמוע שוב את הנוסח הנכון.</p></div>
400
+ </div>
401
+ </section>
402
+ </main>
403
+ <script>
404
+ // opened from the app: go back to where the student was; opened from a shared link: to the app's start
405
+ document.getElementById("back").onclick=e=>{
406
+ try{ if(document.referrer&&new URL(document.referrer).origin===location.origin&&history.length>1){ e.preventDefault(); history.back(); } }catch{}
407
+ };
408
+ </script>
409
+ </body>
410
+ </html>
411
+
static/index.html CHANGED
@@ -72,6 +72,15 @@ header{display:flex;align-items:center;gap:4px 12px;flex-wrap:wrap}
72
  A locked topic (one before it is not finished) is grey with a padlock. */
73
  body.home #practice,body.home #driveBtn,body:not(.home) #path,body:not(.home) #today,body:not(.home) #toNow,body.home .where,body:not(.home) .brand,body:not(.home) .maphint{display:none}
74
  header .sub.maphint{flex:0 0 100%;color:var(--ink)}
 
 
 
 
 
 
 
 
 
75
  /* Above the path, and staying in sight as it scrolls, three in a row: the day's video, the daily session and the nearest
76
  homework. (The homework is on the path itself too: the bubble over its topic counts the days left.) */
77
  #today{position:sticky;top:0;z-index:7;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:stretch;width:100%;max-width:460px;margin:0 auto;padding:6px 0;background:var(--bg)}
@@ -704,7 +713,9 @@ body.quiet :is(#mic,#playMine,#driveBtn,.phone-btn),body.driving :is(#quietBtn,#
704
  <div class="brand">אהלא וסהלא</div>
705
  <button id="myClass"></button>
706
  <div class="where"><small id="lessonName"></small><span id="catName"></span></div>
 
707
  <div class="sub maphint">בחרו נושא במסלול ותרגלו אותו בקול</div>
 
708
  <button class="drive" id="toManage" hidden>ניהול</button>
709
  <button class="drive" id="driveBtn" title="מצב נסיעה: האפליקציה מקריאה, מקשיבה ואומרת את ההערכה בקול"><svg class="ic" aria-hidden="true"><use href="#i-car"/></svg> עבור למצב נסיעה</button>
710
  </header>
@@ -886,6 +897,7 @@ body.quiet :is(#mic,#playMine,#driveBtn,.phone-btn),body.driving :is(#quietBtn,#
886
  <label>מהירות<select id="speed"><option value="0.8">x0.8</option><option value="1">x1</option><option value="1.5">x1.5</option></select></label>
887
  <label>הקראת המשפט בעברית<input type="checkbox" id="readHe"></label>
888
  </div>
 
889
  </dialog>
890
  <dialog id="verbDlg" class="verb-dlg" aria-labelledby="verbTitle">
891
  <div class="verb-shell">
@@ -2408,6 +2420,10 @@ $("prevBtn").onclick=()=>{ // the sentence before this one in the topic, pract
2408
  function arVoice(){ const vs=speechSynthesis.getVoices(); return vs.find(v=>/^ar[-_](PS|JO|LB|SY|IL)/i.test(v.lang))||vs.find(v=>/^ar/i.test(v.lang)); }
2409
  if("speechSynthesis" in window) speechSynthesis.getVoices();
2410
  const ttsUrls={}; // "phrase id|voice" -> {url} of the server-generated answer
 
 
 
 
2411
  $("readHe").checked=store.get("ihki.readHe",false);
2412
  $("readHe").onchange=()=>{
2413
  store.set("ihki.readHe",$("readHe").checked);
 
72
  A locked topic (one before it is not finished) is grey with a padlock. */
73
  body.home #practice,body.home #driveBtn,body:not(.home) #path,body:not(.home) #today,body:not(.home) #toNow,body.home .where,body:not(.home) .brand,body:not(.home) .maphint{display:none}
74
  header .sub.maphint{flex:0 0 100%;color:var(--ink)}
75
+ /* the student's guide (static/guide.html): a round "?" beside the class pill, and once, a line under the hint */
76
+ .help{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--olive);background:var(--surface);color:var(--olive);font:700 17px/1 var(--f-body);text-decoration:none;box-shadow:0 2px 0 var(--line)}
77
+ .help:hover{background:var(--olive-soft)}
78
+ #myClass:empty+.help{margin-inline-start:auto}
79
+ .guidetip{flex:0 0 100%;display:flex;align-items:center;gap:8px;padding-block:6px;padding-inline:12px 6px;border-radius:12px;background:var(--olive-soft);border:1px solid var(--olive)}
80
+ .guidetip a{flex:1;min-width:0;color:var(--olive-deep);font-weight:700;text-decoration:none}
81
+ .guidetip button{flex:none;width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:15px;cursor:pointer}
82
+ body:not(.home) .help,body.manage .help,body:not(.home) .guidetip,body.manage .guidetip,body[data-view] .guidetip{display:none}
83
+ .sethelp{display:block;margin-top:12px;color:var(--olive);font-weight:700}
84
  /* Above the path, and staying in sight as it scrolls, three in a row: the day's video, the daily session and the nearest
85
  homework. (The homework is on the path itself too: the bubble over its topic counts the days left.) */
86
  #today{position:sticky;top:0;z-index:7;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:stretch;width:100%;max-width:460px;margin:0 auto;padding:6px 0;background:var(--bg)}
 
713
  <div class="brand">אהלא וסהלא</div>
714
  <button id="myClass"></button>
715
  <div class="where"><small id="lessonName"></small><span id="catName"></span></div>
716
+ <a class="help" id="helpLink" href="/static/guide.html" title="איך מתרגלים: מדריך קצר" aria-label="איך מתרגלים: מדריך קצר">?</a>
717
  <div class="sub maphint">בחרו נושא במסלול ותרגלו אותו בקול</div>
718
+ <div class="guidetip" id="guideTip" hidden><a href="/static/guide.html">חדשים כאן? מדריך של דקה ←</a><button type="button" id="guideTipClose" aria-label="סגירה" title="סגירה">✕</button></div>
719
  <button class="drive" id="toManage" hidden>ניהול</button>
720
  <button class="drive" id="driveBtn" title="מצב נסיעה: האפליקציה מקריאה, מקשיבה ואומרת את ההערכה בקול"><svg class="ic" aria-hidden="true"><use href="#i-car"/></svg> עבור למצב נסיעה</button>
721
  </header>
 
897
  <label>מהירות<select id="speed"><option value="0.8">x0.8</option><option value="1">x1</option><option value="1.5">x1.5</option></select></label>
898
  <label>הקראת המשפט בעברית<input type="checkbox" id="readHe"></label>
899
  </div>
900
+ <a class="sethelp" href="/static/guide.html#settings">מה עושה כל הגדרה?</a>
901
  </dialog>
902
  <dialog id="verbDlg" class="verb-dlg" aria-labelledby="verbTitle">
903
  <div class="verb-shell">
 
2420
  function arVoice(){ const vs=speechSynthesis.getVoices(); return vs.find(v=>/^ar[-_](PS|JO|LB|SY|IL)/i.test(v.lang))||vs.find(v=>/^ar/i.test(v.lang)); }
2421
  if("speechSynthesis" in window) speechSynthesis.getVoices();
2422
  const ttsUrls={}; // "phrase id|voice" -> {url} of the server-generated answer
2423
+ // the guide's line for a new student: until it is opened or closed once
2424
+ const guideSeen=()=>{ store.set("ihki.guideSeen",true); $("guideTip").hidden=true; };
2425
+ $("guideTip").hidden=store.get("ihki.guideSeen",false);
2426
+ $("guideTip").querySelector("a").onclick=guideSeen; $("guideTipClose").onclick=guideSeen; $("helpLink").onclick=guideSeen;
2427
  $("readHe").checked=store.get("ihki.readHe",false);
2428
  $("readHe").onchange=()=>{
2429
  store.set("ihki.readHe",$("readHe").checked);