From d39370fff855bfc818169ab596a2a91f373ac86e Mon Sep 17 00:00:00 2001
From: biema <biema1187@gmail.com>
Date: Mon, 17 Nov 2025 15:09:36 +0700
Subject: [PATCH] add board ui

---
 board.html | 158 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 158 insertions(+)
 create mode 100644 board.html
diff --git a/board.html b/board.html
new file mode 100644
index 0000000..1a9dd3a
--- /dev/null
+++ b/board.html
@@ -0,0 +1,158 @@
+<!doctype html>
+<html lang="id">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Hit and Run — Leaderboard</title>
+  <style>
+    :root{
+      --bg:#071827;
+      --card:#071827; 
+      --accent:#ffd54a; 
+      --muted:#cfe8d6;
+      --glass: rgba(255,255,255,0.04);
+      --shadow: 0 6px 18px rgba(2,8,3,0.6);
+      --glass-2: rgba(0,0,0,0.35);
+      font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
+    }
+
+    html,body{
+      height:100%;
+    }
+    
+    body{
+      margin:0;
+      background: radial-gradient(circle at 10% 10%, rgba(255,255,255,0.03), transparent 5%),
+                  linear-gradient(180deg, #000 0%, #071827 100%),
+                  var(--bg);
+      color:var(--muted);
+      -webkit-font-smoothing:antialiased;
+      -moz-osx-font-smoothing:grayscale;
+      padding:24px;
+      display:flex;
+      align-items:center;
+      justify-content:center;
+    }
+
+    .container{
+      width:100%; 
+      max-width:980px;
+      background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
+      border-radius:16px;
+      padding:20px;
+      box-shadow:var(--shadow);
+      backdrop-filter: blur(6px);
+    }
+
+    .header{
+      display:flex;
+      gap:16px;
+      align-items:center;
+      margin-bottom:14px
+    }
+
+    .logo{
+      width:78px;
+      height:78px;
+      border-radius:12px;
+      background:linear-gradient(135deg,#071827,#071827);
+      display:flex;
+      align-items:center;
+      justify-content:center;
+      flex-shrink:0;border:2px solid rgba(255,255,255,0.04)
+    }
+
+    .logo h1{
+      margin:0;
+      color:var(--accent);
+      font-size:20px;
+      letter-spacing:0.6px
+    }
+
+    .title{
+      flex:1
+    }
+
+    .title h2{
+      margin:0;
+      font-size:20px;
+      color:#fff
+    }
+
+    .title p{
+      margin:4px 0 0 0;
+      color:var(--muted);
+      font-size:13px
+    }
+    
+    .board{
+      display:block
+    }
+
+    .panel{
+      background:var(--card);
+      padding:14px;
+      border-radius:12px;
+      border:1px solid var(--glass-2)
+    }
+    
+    .panel h3{margin:0 0 8px 0;color:var(--accent);font-size:14px}
+
+    table{width:100%;border-collapse:collapse;font-size:14px}
+    thead th{font-size:12px;text-align:left;padding:8px 10px;color:var(--muted);opacity:0.9}
+    tbody td{padding:10px;border-top:1px dashed rgba(255,255,255,0.03)}
+    .rank{width:46px;font-weight:700;color:var(--accent)}
+    .player{display:flex;gap:10px;align-items:center}
+    .avatar{width:42px;height:42px;border-radius:8px;background:linear-gradient(135deg,#071827,#071827);display:flex;align-items:center;justify-content:center;color:var(--accent);font-weight:700}
+    .name{font-weight:600}
+    .score{font-weight:800;font-size:16px;color:#fff}
+    .meta{font-size:12px;color:rgba(255,255,255,0.55)}
+
+    .small{font-size:12px;color:var(--muted)}
+
+    footer{margin-top:14px;font-size:12px;color:rgba(255,255,255,0.45);text-align:center}
+
+    @media (max-width:880px){
+      .board{grid-template-columns:1fr}
+      .logo{width:60px;height:60px}
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="header">
+      <div class="logo">
+        <h1>🂺 🂹 🂸</h1>
+      </div>
+      <div class="title">
+        <h2>Hit Or Run — Leaderboard</h2>
+        <p>Daftar pemain terbaik dari meja Hit Or Run. Tema: felt table, kartu, dan nuansa kasino.</p>
+      </div>
+    </div>
+
+    <div class="board">
+      <div class="panel">
+        <h3>Top Players</h3>
+        <div id="leaderboard-wrap">
+          <table id="leaderboard">
+            <thead>
+              <tr><th class="rank">#</th><th>Player</th><th>Score</th></tr>
+            </thead>
+            <tbody id="board-body">
+            </tbody>
+          </table>
+        </div>
+        <div style="margin-top:12px;display:flex;gap:8px;align-items:center;justify-content:space-between">
+          <div class="small">Sort by:
+            <select id="sortBy" onchange="render()">
+            </select>
+          </div>
+          <div class="small">Jumlah entries: <span id="count">0</span></div>
+        </div>
+      </div>
+    </div>
+
+    <footer>© 2025 Hit Or Run Leaderboard</footer>
+  </div>
+</body>
+</html>
