Refactor tips and index layout for improved readability and user experience; add .gitignore for cache files

.gitignore

@@ -0,0 +1 @@
+*__pycache__**/

app/tips.py

@@ -64,4 +64,5 @@ def tip_for(expected: str, heard: str | None) -> dict | None:
         return {"title": name, "text": text, "key": f"{expected}>{heard}"}
     if heard == "_":
         return {"title": name, "text": "לא נשמעה בבירור.", "key": f"{expected}>_"}
-    return {"title": name, "text": f"נשמעה כמו [{heard}].", "key": f"{expected}>{heard}"}
+    text = f"נשמעה כמו {NAMES[heard]}." if heard in NAMES else "נשמעה אחרת מהצפוי."
+    return {"title": name, "text": text, "key": f"{expected}>{heard}"}

static/index.html

@@ -7,7 +7,7 @@
 <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+Naskh+Arabic:wght@500;700&family=Noto+Sans+Mono&display=swap">
 <style>
-/* Layout: one practice card, prompt on top, mic in the middle, per-word / per-phoneme feedback below. RTL. */
+/* Layout: one compact practice card that fits the first screen: prompt, mic, hint, per-word feedback, actions. RTL. */
 :root{
   --bg:#EEF0E8; --surface:#FAFBF6; --ink:#1C241D; --muted:#5E685C; --line:#D5DACB;
   --olive:#4B6A2C; --on-olive:#FFFFFF; --olive-soft:#E3EAD6;
@@ -23,54 +23,54 @@
   --sumac:#E77B87; --sumac-bg:#3A1E23; --ok:#6CC08A; --ok-bg:#1C3324; --amber:#E0B45A; --amber-bg:#3A2F17;
   color-scheme:dark}}
 *{box-sizing:border-box}
+[hidden]{display:none!important}
 html,body{margin:0}
-body{background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--f-body);padding:20px 16px 48px;min-height:100vh}
-.wrap{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
-.brand{font:400 30px/1 var(--f-display)}
+body{background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--f-body);padding:10px 16px 24px;min-height:100vh}
+.wrap{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
+header{display:flex;align-items:baseline;gap:4px 12px;flex-wrap:wrap}
+.brand{font:400 24px/1 var(--f-display)}
 .brand .ar{font-family:var(--f-ar);font-weight:700;color:var(--olive);margin-inline-start:8px}
 .sub{color:var(--muted);font-size:14px}
 .chips{display:flex;gap:6px;flex-wrap:wrap}
-.chip{border:1px solid var(--line);background:transparent;color:var(--ink);font:600 14px var(--f-body);padding:6px 12px;border-radius:999px;cursor:pointer}
+.chip{border:1px solid var(--line);background:transparent;color:var(--ink);font:600 14px var(--f-body);padding:4px 12px;border-radius:999px;cursor:pointer}
 .chip[aria-pressed="true"]{background:var(--olive);border-color:var(--olive);color:var(--on-olive)}
-.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px 20px;display:flex;flex-direction:column;gap:18px}
+.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
 .meta{display:flex;justify-content:space-between;color:var(--muted);font-size:13px;letter-spacing:.04em;font-variant-numeric:tabular-nums}
-.prompt{font:400 clamp(26px,6vw,36px)/1.25 var(--f-display);text-wrap:balance;margin:0}
-.task{color:var(--muted);font-size:15px;margin:-10px 0 0}
-.hint{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:10px;background:var(--olive-soft)}
-.hint .tr{font-size:20px;font-weight:600}
-.hint .arline{font:700 28px/1.5 var(--f-ar)}
+.prompt{font:400 clamp(22px,5vw,30px)/1.2 var(--f-display);text-wrap:balance;margin:0}
+.task{color:var(--muted);font-size:14px;margin:-6px 0 0}
+.hint{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 16px;padding:6px 12px;border-radius:10px;background:var(--olive-soft)}
+.hint .tr{font-size:18px;font-weight:600}
+.hint .arline{font:700 24px/1.4 var(--f-ar)}
 .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
-.btn{font:600 15px var(--f-body);border-radius:10px;padding:9px 14px;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--ink)}
+.btn{font:600 15px var(--f-body);border-radius:10px;padding:6px 12px;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--ink)}
 .btn.primary{background:var(--olive);border-color:var(--olive);color:var(--on-olive)}
 .btn:disabled{opacity:.45;cursor:default}
 :focus-visible{outline:3px solid var(--olive);outline-offset:2px}
-.mic-zone{display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px 0}
-.mic{width:92px;height:92px;border-radius:50%;border:0;background:var(--olive);color:var(--on-olive);cursor:pointer;display:grid;place-items:center;position:relative}
-.mic svg{width:38px;height:38px}
+.mic-zone{display:flex;align-items:center;gap:14px}
+.mic{flex:none;width:60px;height:60px;border-radius:50%;border:0;background:var(--olive);color:var(--on-olive);cursor:pointer;display:grid;place-items:center;position:relative}
+.mic svg{width:26px;height:26px}
 .mic.live{background:var(--sumac)}
-.mic.live::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:3px solid var(--sumac);opacity:.5;animation:pulse 1.2s ease-out infinite}
+.mic.live::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:3px solid var(--sumac);opacity:.5;animation:pulse 1.2s ease-out infinite}
 .mic:disabled{opacity:.5;cursor:progress}
 @keyframes pulse{from{transform:scale(.9);opacity:.6}to{transform:scale(1.15);opacity:0}}
 @media (prefers-reduced-motion:reduce){.mic.live::after{animation:none}}
-.status{color:var(--muted);font-size:14px;min-height:1.5em;text-align:center}
-.result{display:flex;flex-direction:column;gap:16px;border-top:1px solid var(--line);padding-top:18px}
-.verdict{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
-.score{font:400 34px/1 var(--f-display);font-variant-numeric:tabular-nums}
+.status{color:var(--muted);font-size:14px}
+.result{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:10px}
+.verdict{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap}
+.score{font:400 28px/1 var(--f-display);font-variant-numeric:tabular-nums}
 .pill{font:700 13px var(--f-body);padding:4px 10px;border-radius:999px}
 .good{background:var(--ok-bg);color:var(--ok)} .mid{background:var(--amber-bg);color:var(--amber)} .bad{background:var(--sumac-bg);color:var(--sumac)}
-.label{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--muted);margin-bottom:6px}
-.words{display:flex;flex-wrap:wrap;gap:14px 18px;direction:rtl}
-.word{display:flex;flex-direction:column;align-items:center;gap:6px}
-.word .w{font:700 30px/1.4 var(--f-ar)}
+.words{display:flex;flex-wrap:wrap;gap:4px 14px;direction:rtl}
+.word{display:flex;flex-direction:column;align-items:center}
+.word .w{font:700 26px/1.3 var(--f-ar)}
+.word .n{font-size:12px;line-height:1;color:var(--muted);font-variant-numeric:tabular-nums}
 .word .w.bad{background:none;color:var(--sumac)} .word .w.mid{background:none;color:var(--amber)} .word .w.good{background:none;color:var(--ink)}
-.phs{display:flex;gap:3px;direction:ltr;flex-wrap:wrap;justify-content:center}
-.ph{font:500 14px/1 var(--f-ipa);padding:5px 6px;border-radius:6px;min-width:22px;text-align:center;font-variant-numeric:tabular-nums}
-.heard{font:500 15px/1.6 var(--f-ipa);direction:ltr;text-align:left;overflow-x:auto;color:var(--muted)}
-.tips{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
-.tips li{padding:10px 12px;border-radius:10px;border:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
+.tips{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
+.tips li{padding:6px 10px;border-radius:10px;border:1px solid var(--line);font-size:15px;line-height:1.4}
+.tips .what::after{content:" · "}
 .tips .what{font-weight:700}
-.tips .what .ar{font-family:var(--f-ar);font-size:20px}
-.note{font-size:13px;color:var(--muted);max-width:65ch}
+.tips .what .ar{font-family:var(--f-ar);font-size:18px}
+.note{font-size:12px;margin:0;color:var(--muted);max-width:65ch}
 .warn{background:var(--amber-bg);color:var(--amber);border-radius:10px;padding:10px 12px;font-size:14px}
 </style>
 </head>
@@ -96,35 +96,27 @@ body{background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--f-body);padd
       <div class="status" id="status">לחצו, דברו, ולחצו שוב לסיום</div>
     </div>
 
-    <div class="row">
-      <button class="btn" id="hintBtn">רמז</button>
-      <button class="btn" id="answerBtn">הצג תשובה</button>
-      <button class="btn" id="speakBtn">🔊 השמע</button>
-      <button class="btn" id="playMine" disabled>▶ ההקלטה שלי</button>
-      <span style="flex:1"></span>
-      <button class="btn primary" id="nextBtn">המשפט הבא ←</button>
-    </div>
-
     <div class="hint" id="hint" hidden>
       <div class="tr" id="hintTr"></div>
       <div class="arline" id="hintAr" lang="ar" hidden></div>
     </div>
 
     <section class="result" id="result" hidden>
-      <div class="verdict"><span class="score" id="score"></span><span class="pill" id="pill"></span></div>
-      <div>
-        <div class="label">ציון לכל מילה ולכל הגה</div>
-        <div class="words" id="words"></div>
-      </div>
+      <div class="verdict"><span class="score" id="score"></span><span class="pill" id="pill"></span><div class="words" id="words"></div></div>
       <ul class="tips" id="tips"></ul>
-      <div>
-        <div class="label">ההגאים שהמודל זיהה</div>
-        <div class="heard" id="heard"></div>
-      </div>
     </section>
+
+    <div class="row">
+      <button class="btn" id="hintBtn">רמז</button>
+      <button class="btn" id="answerBtn">הצג תשובה</button>
+      <button class="btn" id="speakBtn">🔊 השמע</button>
+      <button class="btn" id="playMine" disabled>▶ ההקלטה שלי</button>
+      <span style="flex:1"></span>
+      <button class="btn primary" id="nextBtn">המשפט הבא ←</button>
+    </div>
   </main>
 
-  <p class="note">הניתוח נעשה ברמת ההגה: מודל זיהוי הגאים מיישר את ההקלטה מול רצף ההגאים הצפוי ובודק כמה בטוח הוא בכל הגה, ואיזה הגה אחר נשמע במקומו. ההשמעה משתמשת בקול ערבי של המכשיר, שבדרך כלל אינו במבטא פלסטיני.</p>
+  <p class="note">הניתוח נעשה ברמת ההגה. ההשמעה משתמשת בקול ערבי של המכשיר, שבדרך כלל אינו במבטא פלסטיני.</p>
 </div>
 
 <script>
@@ -133,7 +125,6 @@ const store={get(k,d){try{const v=localStorage.getItem(k);return v?JSON.parse(v)
 let CATS=[], PHRASES=[], cat=store.get("ihki.cat","meet"), best=store.get("ihki.best2",{}), order=[], pos=0, cur=null;
 let myAudioUrl=null;
 
-const VOWELS=new Set(["a","i","u","e","o","aː","iː","uː","eː","oː"]);
 const band=s=>s>=75?"good":s>=50?"mid":"bad";
 
 function shuffle(a){for(let i=a.length-1;i>0;i--){const j=Math.random()*(i+1)|0;[a[i],a[j]]=[a[j],a[i]]}return a}
@@ -170,13 +161,8 @@ function render(r){
   for(const w of r.words){
     const box=document.createElement("div"); box.className="word";
     const ar=document.createElement("div"); ar.className="w "+band(w.score); ar.lang="ar"; ar.textContent=w.ar;
-    const phs=document.createElement("div"); phs.className="phs";
-    for(const p of w.phonemes){
-      const c=document.createElement("span"); c.className="ph "+band(p.score); c.textContent=p.ipa;
-      c.title=`${p.ipa}: ${Math.round(p.score)}`+(p.heard?` (נשמע: ${p.heard})`:"");
-      phs.appendChild(c);
-    }
-    box.append(ar,phs); words.appendChild(box);
+    const n=document.createElement("div"); n.className="n"; n.textContent=Math.round(w.score);
+    box.append(ar,n); words.appendChild(box);
   }
 
   const tips=$("tips"); tips.innerHTML="";
@@ -197,8 +183,8 @@ function render(r){
     const li=document.createElement("li"); li.innerHTML='<span class="what">כל העיצורים נשמעו נכון</span><span>נסו לומר את המשפט בקצב דיבור טבעי.</span>';
     tips.appendChild(li);
   }
-  $("heard").textContent="/"+r.heard_ipa+"/";
   $("result").hidden=false;
+  $("result").scrollIntoView({block:"nearest",behavior:"smooth"});
   if(best[cur.id]==null||s>best[cur.id]){best[cur.id]=s; store.set("ihki.best2",best);}
 }