Update templates/index.html

templates/index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>BeRestoral | Birchbark Manuscript Analysis</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
     <style>
         :root {
             --birch: #F5EDD8; --birch-dark: #E8D9B5;
@@ -19,7 +19,7 @@
         .mode-btn.active { background: var(--cinnabar); color: white; }
         .mode-btn:not(.active):hover { color: white; }
         .mode-desc { font-size: 0.8rem; color: var(--chainmail); margin-top: 6px; min-height: 1.4em; }
-        .legend-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--birch); border: 1px solid var(--birch-dark); border-radius: 20px; padding: 3px 11px; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; }
+        .legend-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--birch); border: 1px solid var(--birch-dark); border-radius: 20px; padding: 3px 11px; font-family: 'Inter', sans-serif; font-size: 0.75rem; }
         .legend-pill .symbol { font-size: 0.95rem; color: var(--cinnabar); font-weight: 500; }
         textarea { font-family: 'Inter', sans-serif; font-size: 0.95rem; line-height: 1.7; background: var(--birch); border: 1.5px solid var(--birch-dark); border-radius: 8px; padding: 18px 20px; width: 100%; resize: none; outline: none; transition: border-color 0.2s; }
         textarea:focus { border-color: var(--gold); }
@@ -34,22 +34,22 @@
         .highlight-restored { color: var(--cinnabar); font-weight: 600; background: #FEF2F2; padding: 0 3px; border-radius: 3px; }
         .bar-fill { height: 3px; border-radius: 2px; transition: width 0.4s ease; }
         header { border-bottom: 1px solid var(--birch-dark); background: var(--cream); }
-        .section-label { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--chainmail); margin-bottom: 6px; }
+        .section-label { font-family: 'Inter', sans-serif; font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--chainmail); margin-bottom: 6px; }
         select.lang-sw { background: transparent; border: 1px solid var(--birch-dark); border-radius: 6px; padding: 4px 8px; font-family: 'Inter', sans-serif; font-size: 0.85rem; color: var(--charcoal); cursor: pointer; outline: none; }
         .results-panel { background: #FAFAF7; border: 1px solid var(--birch-dark); border-radius: 12px; padding: 24px; min-height: 400px; }
-        .res-title { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--charcoal); margin-bottom: 16px; }
+        .res-title { font-family: 'Inter', sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--charcoal); margin-bottom: 16px; }
         .steps-block { margin-bottom: 20px; }
         .step-row { display: flex; align-items: baseline; gap: 12px; padding: 6px 0; border-bottom: 1px solid #EDE9E0; font-size: 0.92rem; line-height: 1.5; }
         .step-row:last-child { border-bottom: none; }
         .step-sentence { flex: 1; color: var(--charcoal); }
-        .step-conf { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: var(--chainmail); white-space: nowrap; }
+        .step-conf { font-family: 'Inter', sans-serif; font-size: 0.7rem; color: var(--chainmail); white-space: nowrap; }
         .steps-divider { border: none; border-top: 1px solid var(--birch-dark); margin: 18px 0; }
 
         /* Classification card */
         .classify-card { background: white; border: 1px solid #E8DDD0; border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; }
         .classify-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
         .classify-item { background: var(--birch); border-radius: 8px; padding: 10px 12px; }
-        .classify-item-label { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--chainmail); margin-bottom: 4px; }
+        .classify-item-label { font-family: 'Inter', sans-serif; font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--chainmail); margin-bottom: 4px; }
         .classify-item-value { font-size: 1rem; font-weight: 600; color: var(--charcoal); }
         .classify-item-sub { font-size: 0.75rem; color: var(--chainmail); margin-top: 2px; }
 
@@ -58,9 +58,9 @@
         .hist-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
         .hist-bar { width: 100%; background: var(--birch-dark); border-radius: 2px 2px 0 0; transition: height 0.4s; min-height: 2px; }
         .hist-bar.active { background: var(--cinnabar); }
-        .hist-label { font-family: 'JetBrains Mono', monospace; font-size: 0.45rem; color: var(--chainmail); text-align: center; writing-mode: vertical-rl; transform: rotate(180deg); height: 28px; overflow: hidden; }
+        .hist-label { font-family: 'Inter', sans-serif; font-size: 0.45rem; color: var(--chainmail); text-align: center; writing-mode: vertical-rl; transform: rotate(180deg); height: 28px; overflow: hidden; }
 
-        .gap-badge { display: inline-flex; align-items: center; gap: 5px; background: var(--charcoal); color: white; border-radius: 20px; padding: 3px 10px; font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; margin-bottom: 14px; }
+        .gap-badge { display: inline-flex; align-items: center; gap: 5px; background: var(--charcoal); color: white; border-radius: 20px; padding: 3px 10px; font-family: 'Inter', sans-serif; font-size: 0.7rem; margin-bottom: 14px; }
     </style>
 </head>
 <body>
@@ -73,7 +73,7 @@
                 <div style="font-size:1.35rem;font-weight:600;letter-spacing:0.12em">
                     <span style="color:var(--cinnabar)">Be</span>Restoral
                 </div>
-                <div style="font-family:'JetBrains Mono',monospace;font-size:0.6rem;letter-spacing:0.1em;color:var(--chainmail)" data-i18n="subtitle">BIRCHBARK MANUSCRIPT ANALYSIS</div>
+                <div style="font-family:'Inter',sans-serif;font-size:0.7rem;letter-spacing:0.04em;color:var(--chainmail)" data-i18n="subtitle">BIRCHBARK MANUSCRIPT ANALYSIS</div>
             </div>
         </div>
         <select class="lang-sw" onchange="changeLanguage(this.value)">
@@ -122,7 +122,7 @@
             <div>
                 <div class="section-label flex justify-between">
                     <span data-i18n="slider_topk">Search width (Top-K)</span>
-                    <span id="topkValue" style="color:var(--cinnabar);font-family:'JetBrains Mono',monospace;font-size:0.7rem">5</span>
+                    <span id="topkValue" style="color:var(--cinnabar);font-family:'Inter',sans-serif;font-size:0.7rem">5</span>
                 </div>
                 <input type="range" id="topkSlider" min="1" max="20" value="5"
                     oninput="document.getElementById('topkValue').innerText = this.value">
@@ -130,7 +130,7 @@
             <div>
                 <div class="section-label flex justify-between">
                     <span data-i18n="slider_temp">Temperature</span>
-                    <span id="tempValue" style="color:var(--cinnabar);font-family:'JetBrains Mono',monospace;font-size:0.7rem">1.0</span>
+                    <span id="tempValue" style="color:var(--cinnabar);font-family:'Inter',sans-serif;font-size:0.7rem">1.0</span>
                 </div>
                 <input type="range" id="tempSlider" min="0.1" max="2.0" step="0.1" value="1.0"
                     oninput="document.getElementById('tempValue').innerText = parseFloat(this.value).toFixed(1)">
@@ -319,11 +319,6 @@ function renderResults(data) {
         card.appendChild(grid);
 
         // Histogram
-        const histLabel = document.createElement('div');
-        histLabel.className = 'section-label';
-        histLabel.textContent = d.date_hist_label;
-        card.appendChild(histLabel);
-
         const maxProb = Math.max(...cl.date_probs);
         const histWrap = document.createElement('div');
         histWrap.className = 'hist-bar-wrap';
@@ -395,7 +390,7 @@ function renderResults(data) {
             row.innerHTML = `
                 <div style="display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px">
                     <span style="font-size:1.1rem;font-weight:${isTop?'600':'400'};color:${isTop?'var(--cinnabar)':'var(--charcoal)'}">${v.word}</span>
-                    <span style="font-family:'JetBrains Mono',monospace;font-size:0.7rem;color:var(--chainmail)">${v.score}%</span>
+                    <span style="font-family:'Inter',sans-serif;font-size:0.7rem;color:var(--chainmail)">${v.score}%</span>
                 </div>
                 <div style="background:#EDE9E0;border-radius:2px;height:3px;margin-bottom:8px">
                     <div class="bar-fill" style="width:${Math.min(v.score,100)}%;background:${color}"></div>