Improve org page: remove stats/leaderboard/dialect/methodology, add logo, update team with emails

index.html

@@ -48,50 +48,13 @@
       pointer-events: none;
     }
 
-    /* Logo mark — the small icon on top */
-    .hero-icon {
-      width: 72px;
-      height: 72px;
-      margin: 0 auto 20px;
-      border-radius: 18px;
-      background: linear-gradient(135deg, rgba(74,222,128,0.15), rgba(34,197,94,0.08));
-      border: 1.5px solid rgba(74,222,128,0.25);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      overflow: hidden;
-    }
-    .hero-icon img {
-      width: 52px;
-      height: 52px;
-      object-fit: contain;
+    .hero-logo {
+      height: 90px;
       display: block;
-    }
-    /* Fallback icon when image fails */
-    .hero-icon-fallback {
-      font-size: 2rem;
-      color: var(--brand);
-    }
-
-    /* "Haakkim" wordmark */
-    .hero-wordmark {
-      font-size: clamp(2.8rem, 7vw, 4.5rem);
-      font-weight: 900;
-      letter-spacing: -0.02em;
-      color: var(--brand);
-      line-height: 1;
-      margin-bottom: 10px;
+      margin: 0 auto 28px;
+      object-fit: contain;
     }
 
-    /* Arabic subtitle */
-    .hero-ar {
-      font-size: 2rem;
-      font-weight: 700;
-      color: rgba(74,222,128,0.7);
-      direction: rtl;
-      margin-bottom: 20px;
-      letter-spacing: 0.05em;
-    }
     .hero p {
       font-size: 1.1rem;
       color: var(--muted);
@@ -152,112 +115,6 @@
       margin-bottom: 32px;
     }
 
-    /* ── Stats grid ──────────────────────────── */
-    .stats-grid {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: center;
-      gap: 16px;
-    }
-    .stat-card {
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      padding: 24px 20px;
-      text-align: center;
-      transition: border-color 0.2s, transform 0.2s;
-      min-width: 155px;
-      flex: 1 1 155px;
-      max-width: 200px;
-    }
-    .stat-card:hover { border-color: var(--brand); transform: translateY(-2px); }
-    .stat-value {
-      font-size: 2.2rem;
-      font-weight: 800;
-      color: var(--brand);
-      line-height: 1;
-      margin-bottom: 6px;
-    }
-    .stat-label {
-      font-size: 0.8rem;
-      color: var(--muted);
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-    }
-
-    /* ── Leaderboard table ───────────────────── */
-    .table-wrap {
-      overflow-x: auto;
-      border-radius: var(--radius);
-      border: 1px solid var(--border);
-    }
-    table {
-      width: 100%;
-      border-collapse: collapse;
-      font-size: 0.9rem;
-    }
-    thead th {
-      background: var(--surface2);
-      color: var(--muted);
-      font-size: 0.78rem;
-      text-transform: uppercase;
-      letter-spacing: 0.06em;
-      padding: 12px 16px;
-      text-align: left;
-      white-space: nowrap;
-    }
-    tbody tr {
-      border-top: 1px solid var(--border);
-      transition: background 0.15s;
-    }
-    tbody tr:hover { background: var(--surface2); }
-    td {
-      padding: 12px 16px;
-      vertical-align: middle;
-    }
-    .rank-badge {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 28px;
-      height: 28px;
-      border-radius: 50%;
-      font-weight: 700;
-      font-size: 0.85rem;
-    }
-    .rank-1 { background: linear-gradient(135deg, #f59e0b, #fbbf24); color: #000; }
-    .rank-2 { background: linear-gradient(135deg, #94a3b8, #cbd5e1); color: #000; }
-    .rank-3 { background: linear-gradient(135deg, #cd7c2f, #e09050); color: #000; }
-    .rank-other { background: var(--surface2); color: var(--muted); }
-    .model-name {
-      font-family: 'SFMono-Regular', Consolas, monospace;
-      font-size: 0.83rem;
-      color: var(--text);
-    }
-    .model-org {
-      color: var(--muted);
-      font-size: 0.78rem;
-    }
-    .score-val {
-      font-weight: 700;
-      color: var(--brand);
-      font-variant-numeric: tabular-nums;
-    }
-    .ci-val {
-      color: var(--muted);
-      font-size: 0.78rem;
-      font-variant-numeric: tabular-nums;
-    }
-    .battles-badge {
-      display: inline-flex;
-      align-items: center;
-      background: var(--surface2);
-      border-radius: 99px;
-      padding: 2px 10px;
-      font-size: 0.78rem;
-      color: var(--muted);
-    }
-
     /* ── Cards ───────────────────────────────── */
     .cards-grid {
       display: grid;
@@ -290,57 +147,6 @@
       color: var(--muted);
     }
 
-    /* ── Dialect pills ───────────────────────── */
-    .dialect-list {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 10px;
-    }
-    .dialect-pill {
-      background: var(--surface2);
-      border: 1px solid var(--border);
-      border-radius: 99px;
-      padding: 6px 14px;
-      font-size: 0.82rem;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-    .dialect-pill .bar {
-      height: 4px;
-      border-radius: 99px;
-      background: var(--brand);
-      min-width: 4px;
-    }
-
-    /* ── Scoring steps ───────────────────────── */
-    .method-steps {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-      gap: 16px;
-    }
-    .step {
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      padding: 20px;
-    }
-    .step-num {
-      width: 32px;
-      height: 32px;
-      border-radius: 50%;
-      background: var(--brand);
-      color: #0a0f0a;
-      font-weight: 800;
-      font-size: 0.9rem;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-bottom: 12px;
-    }
-    .step h4 { font-size: 0.92rem; font-weight: 700; margin-bottom: 6px; }
-    .step p { font-size: 0.82rem; color: var(--muted); }
-
     /* ── Dataset callout ─────────────────────── */
     .dataset-callout {
       background: linear-gradient(135deg, rgba(74,222,128,0.06), rgba(99,102,241,0.06));
@@ -386,48 +192,21 @@
       font-weight: 800;
       color: #0a0f0a;
       margin: 0 auto 14px;
-      overflow: hidden;
       flex-shrink: 0;
     }
-    .team-avatar img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      border-radius: 50%;
-    }
     .team-name { font-weight: 700; font-size: 1rem; margin-bottom: 3px; }
     .team-role { font-size: 0.78rem; color: var(--brand); font-weight: 600; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
     .team-affil { font-size: 0.76rem; color: var(--muted); margin-bottom: 10px; }
-    .team-bio {
-      font-size: 0.8rem;
-      color: var(--muted);
-      line-height: 1.55;
-      text-align: left;
-      margin-bottom: 12px;
-      flex: 1;
-    }
     .team-links { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
-    .team-hf {
+    .team-email {
       display: inline-flex;
       align-items: center;
       gap: 4px;
       font-size: 0.76rem;
-      color: var(--brand);
-      text-decoration: none;
-    }
-    .team-hf:hover { text-decoration: underline; }
-
-    /* ── Note box ────────────────────────────── */
-    .note-box {
-      background: rgba(74,222,128,0.05);
-      border: 1px solid rgba(74,222,128,0.2);
-      border-radius: 8px;
-      padding: 14px 18px;
-      font-size: 0.85rem;
       color: var(--muted);
-      margin-top: 20px;
+      text-decoration: none;
     }
-    .note-box strong { color: var(--text); }
+    .team-email:hover { color: var(--brand); text-decoration: underline; }
 
     /* ── Footer ──────────────────────────────── */
     footer {
@@ -452,14 +231,13 @@
      HERO
 ════════════════════════════════════════════════════ -->
 <div class="hero">
-  <!-- Small icon badge -->
-  <div class="hero-icon">
-    <span class="hero-icon-fallback">⚖</span>
-  </div>
-
-  <!-- Wordmark in brand green -->
-  <div class="hero-wordmark">Haakkim</div>
-  <div class="hero-ar">حَكِّم</div>
+  <img
+    src="haakkim-logo-withname.png"
+    alt="Haakkim"
+    class="hero-logo"
+    onerror="this.style.display='none'; document.getElementById('hero-fallback').style.display='block';"
+  />
+  <div id="hero-fallback" style="display:none; font-size:2.8rem; font-weight:900; color:var(--brand); margin-bottom:20px;">Haakkim &nbsp; حَكِّم</div>
 
   <p>An open arena-style human preference evaluation platform for Arabic large language models — built from the ground up for Arabic.</p>
 
@@ -472,157 +250,6 @@
 
 <div class="container">
 
-<!-- ═══════════════════════════════════════════════════
-     STATS
-════════════════════════════════════════════════════ -->
-<section>
-  <div class="section-title">Current Snapshot — v1.0</div>
-  <div class="section-sub">Statistics from the first public release of Haakkim battle data</div>
-  <div class="stats-grid">
-    <div class="stat-card">
-      <div class="stat-value">1,273</div>
-      <div class="stat-label">Total Battles</div>
-    </div>
-    <div class="stat-card">
-      <div class="stat-value">831</div>
-      <div class="stat-label">BT-Ranked Battles</div>
-    </div>
-    <div class="stat-card">
-      <div class="stat-value">67</div>
-      <div class="stat-label">Models Ranked</div>
-    </div>
-    <div class="stat-card">
-      <div class="stat-value">11</div>
-      <div class="stat-label">Arabic Dialects</div>
-    </div>
-    <div class="stat-card">
-      <div class="stat-value">582</div>
-      <div class="stat-label">ESS (Clamped)</div>
-    </div>
-    <div class="stat-card">
-      <div class="stat-value">0.35</div>
-      <div class="stat-label">Graph Density</div>
-    </div>
-  </div>
-</section>
-
-<!-- ═══════════════════════════════════════════════════
-     MSA LEADERBOARD TOP 10
-════════════════════════════════════════════════════ -->
-<section>
-  <div class="section-title">MSA Leaderboard — Top 10</div>
-  <div class="section-sub">Bradley–Terry scores (1000-centered log-odds). Full 67-model leaderboard at <a href="https://haakkim.tech/#leaderboard" style="color:var(--brand)">haakkim.tech</a></div>
-  <div class="table-wrap">
-    <table>
-      <thead>
-        <tr>
-          <th>Rank</th>
-          <th>Model</th>
-          <th>BT Score</th>
-          <th>95% CI</th>
-          <th>Battles</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td><span class="rank-badge rank-1">1</span></td>
-          <td><span class="model-org">mistralai/</span><span class="model-name">ministral-3b-2512</span></td>
-          <td><span class="score-val">1001.75</span></td>
-          <td><span class="ci-val">[1001.20, 1002.93]</span></td>
-          <td><span class="battles-badge">40</span></td>
-        </tr>
-        <tr>
-          <td><span class="rank-badge rank-2">2</span></td>
-          <td><span class="model-org">mistralai/</span><span class="model-name">ministral-8b-2512</span></td>
-          <td><span class="score-val">1001.61</span></td>
-          <td><span class="ci-val">[1000.72, 1002.97]</span></td>
-          <td><span class="battles-badge">43</span></td>
-        </tr>
-        <tr>
-          <td><span class="rank-badge rank-3">3</span></td>
-          <td><span class="model-org">Qwen/</span><span class="model-name">Qwen3-235B-A22B-Thinking-2507</span></td>
-          <td><span class="score-val">1001.21</span></td>
-          <td><span class="ci-val">[1000.47, 1002.00]</span></td>
-          <td><span class="battles-badge">38</span></td>
-        </tr>
-        <tr>
-          <td><span class="rank-badge rank-other">4</span></td>
-          <td><span class="model-org">Qwen/</span><span class="model-name">Qwen3-30B-A3B-Instruct-2507</span></td>
-          <td><span class="score-val">1001.14</span></td>
-          <td><span class="ci-val">[999.96, 1002.83]</span></td>
-          <td><span class="battles-badge">31</span></td>
-        </tr>
-        <tr>
-          <td><span class="rank-badge rank-other">5</span></td>
-          <td><span class="model-org">deepseek/</span><span class="model-name">deepseek-v3.2-exp</span></td>
-          <td><span class="score-val">1001.13</span></td>
-          <td><span class="ci-val">[1000.27, 1002.16]</span></td>
-          <td><span class="battles-badge">38</span></td>
-        </tr>
-        <tr>
-          <td><span class="rank-badge rank-other">6</span></td>
-          <td><span class="model-org">deepseek/</span><span class="model-name">deepseek-v3.1</span></td>
-          <td><span class="score-val">1000.99</span></td>
-          <td><span class="ci-val">[999.81, 1002.07]</span></td>
-          <td><span class="battles-badge">29</span></td>
-        </tr>
-        <tr>
-          <td><span class="rank-badge rank-other">7</span></td>
-          <td><span class="model-org">Qwen/</span><span class="model-name">Qwen3-235B-A22B-Instruct-2507</span></td>
-          <td><span class="score-val">1000.98</span></td>
-          <td><span class="ci-val">[1000.12, 1002.08]</span></td>
-          <td><span class="battles-badge">39</span></td>
-        </tr>
-        <tr>
-          <td><span class="rank-badge rank-other">8</span></td>
-          <td><span class="model-org">deepseek/</span><span class="model-name">deepseek-r1-0528</span></td>
-          <td><span class="score-val">1000.93</span></td>
-          <td><span class="ci-val">[1000.10, 1002.14]</span></td>
-          <td><span class="battles-badge">38</span></td>
-        </tr>
-        <tr>
-          <td><span class="rank-badge rank-other">9</span></td>
-          <td><span class="model-org">openai/</span><span class="model-name">gpt-oss-120b</span></td>
-          <td><span class="score-val">1000.93</span></td>
-          <td><span class="ci-val">[1000.04, 1002.58]</span></td>
-          <td><span class="battles-badge">25</span></td>
-        </tr>
-        <tr>
-          <td><span class="rank-badge rank-other">10</span></td>
-          <td><span class="model-org">deepseek/</span><span class="model-name">deepseek-v3.2</span></td>
-          <td><span class="score-val">1000.89</span></td>
-          <td><span class="ci-val">[999.86, 1002.25]</span></td>
-          <td><span class="battles-badge">31</span></td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-  <div class="note-box">
-    <strong>Score scale:</strong> Haakkim uses unscaled log-odds units centered at 1000 — a 1-point gap corresponds to win odds of e¹ ≈ 2.7:1, producing a ~4-point spread across 67 models. Chatbot Arena-style Elo (×173.7) encodes identical win probabilities with hundreds-of-points spreads.
-  </div>
-</section>
-
-<!-- ═══════════════════════════════════════════════════
-     DIALECT COVERAGE
-════════════════════════════════════════════════════ -->
-<section>
-  <div class="section-title">Arabic Dialect Coverage</div>
-  <div class="section-sub">11 varieties — from Modern Standard Arabic to regional dialects across the Arab world</div>
-  <div class="dialect-list">
-    <div class="dialect-pill">MSA <div class="bar" style="width:80px"></div> 77.5%</div>
-    <div class="dialect-pill">Tunisian <div class="bar" style="width:22px"></div> 9.0%</div>
-    <div class="dialect-pill">Saudi <div class="bar" style="width:16px"></div> 6.5%</div>
-    <div class="dialect-pill">Egyptian <div class="bar" style="width:9px"></div> 3.5%</div>
-    <div class="dialect-pill">Levantine <div class="bar" style="width:5px"></div> 1.7%</div>
-    <div class="dialect-pill">Sudanese <div class="bar" style="width:4px"></div> 0.9%</div>
-    <div class="dialect-pill">Omani <div class="bar" style="width:4px"></div> 0.4%</div>
-    <div class="dialect-pill">Iraqi <div class="bar" style="width:4px"></div> 0.2%</div>
-    <div class="dialect-pill">Moroccan <div class="bar" style="width:4px"></div> &lt;0.1%</div>
-    <div class="dialect-pill">Libyan <div class="bar" style="width:4px"></div> &lt;0.1%</div>
-    <div class="dialect-pill">Algerian <div class="bar" style="width:4px"></div> &lt;0.1%</div>
-  </div>
-</section>
-
 <!-- ═══════════════════════════════════════════════════
      EVALUATION MODES
 ════════════════════════════════════════════════════ -->
@@ -651,36 +278,6 @@
   </div>
 </section>
 
-<!-- ═══════════════════════════════════════════════════
-     SCORING METHODOLOGY
-════════════════════════════════════════════════════ -->
-<section>
-  <div class="section-title">Scoring Methodology</div>
-  <div class="section-sub">Statistically rigorous Bradley–Terry model with four key components</div>
-  <div class="method-steps">
-    <div class="step">
-      <div class="step-num">1</div>
-      <h4>Inverse-Probability Weighting</h4>
-      <p>Corrects for non-uniform model exposure using ε-greedy adaptive sampling weights, clamped to [P1, P99].</p>
-    </div>
-    <div class="step">
-      <div class="step-num">2</div>
-      <h4>Bootstrap Confidence Intervals</h4>
-      <p>200 vote-level resamples per run to produce 95% CIs on every model's BT score.</p>
-    </div>
-    <div class="step">
-      <div class="step-num">3</div>
-      <h4>Rankability Gate</h4>
-      <p>BT scores published only when the comparison graph is fully connected and ESS is sufficient; otherwise win-rate fallback is shown.</p>
-    </div>
-    <div class="step">
-      <div class="step-num">4</div>
-      <h4>Log-odds Scale</h4>
-      <p>1000-centered unscaled log-odds. A 1-point gap ≈ 2.7:1 win odds. Full reproducibility: pipeline and dataset are open.</p>
-    </div>
-  </div>
-</section>
-
 <!-- ═══════════════════════════════════════════════════
      DATASET CALLOUT
 ════════════════════════════════════════════════════ -->
@@ -703,36 +300,34 @@
   <div class="section-sub">College of Computing, Umm Al-Qura University — Mecca, Saudi Arabia</div>
   <div class="team-grid">
 
-    <!-- Mourad Mars -->
     <div class="team-card">
       <div class="team-avatar">MM</div>
       <div class="team-name">Dr. Mourad Mars</div>
-      <div class="team-role">Academic Supervisor</div>
-      <div class="team-affil">Assistant Professor · Umm Al-Qura University</div>
+      <div class="team-role">Principal Investigator</div>
+      <div class="team-affil">Umm Al-Qura University</div>
       <div class="team-links">
-        <a href="https://huggingface.co/mouradmars" class="team-hf">🤗 mouradmars</a>
-        <a href="mailto:msmars@uqu.edu.sa" class="team-hf">✉ msmars@uqu.edu.sa</a>
+        <a href="mailto:msmars@uqu.edu.sa" class="team-email">✉ msmars@uqu.edu.sa</a>
       </div>
     </div>
 
-    <!-- Hassan Barmandah -->
     <div class="team-card">
       <div class="team-avatar">HB</div>
       <div class="team-name">Hassan Barmandah</div>
       <div class="team-role">AI Researcher</div>
-      <div class="team-affil">B.S. Software Engineering · Umm Al-Qura University</div>
+      <div class="team-affil">Umm Al-Qura University</div>
       <div class="team-links">
-        <a href="https://huggingface.co/HassanB4" class="team-hf">🤗 HassanB4</a>
-        <a href="https://github.com/HasanBGIt" class="team-hf">⌥ HasanBGIt</a>
+        <a href="mailto:hassanhbarmandah@gmail.com" class="team-email">✉ hassanhbarmandah@gmail.com</a>
       </div>
     </div>
 
-    <!-- Abdulrhman Alassaf -->
     <div class="team-card">
       <div class="team-avatar">AA</div>
       <div class="team-name">Abdulrhman Alassaf</div>
       <div class="team-role">Software Engineer</div>
       <div class="team-affil">Umm Al-Qura University</div>
+      <div class="team-links">
+        <a href="mailto:aaalassaf@outlook.com" class="team-email">✉ aaalassaf@outlook.com</a>
+      </div>
     </div>
 
   </div>