Chess — Multiplayer Chess - chess-demo-lobby.html

Overview Files Versions Dependencies Discussions Activity
Raw
<!DOCTYPE html>
<html lang="en">
<head><script>(function(){var n=0;function show(p,m){var el=document.createElement('div');el.style.cssText='position:fixed;left:0;right:0;background:#e04040;color:#fff;padding:6px 12px;z-index:'+(99999-n)+';font:13px/1.4 monospace;white-space:pre-wrap;border-bottom:1px solid #b02020;top:'+n*30+'px';el.textContent=p+m;document.body.appendChild(el);n++}window.onerror=function(msg,src,line){show('ERROR '+(src||'').split('/').pop()+':'+line+' \u2014 ',msg)};window.addEventListener('unhandledrejection',function(e){show('REJECT \u2014 ',e.reason&&e.reason.message||e.reason||'unknown')})})()</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chess — Lobby</title>
<style>
  :root {
    --bg: #0d1117; --bg-surface: #161b22; --bg-elevated: #1c2128;
    --border: #30363d; --text: #e6edf3; --text-secondary: #8b949e;
    --accent: #00b8b0; --accent-bright: #00e6dc; --accent-muted: rgba(0,184,176,0.12);
    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'SF Mono', 'Cascadia Code', Consolas, monospace;
    --radius-md: 6px;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { background: var(--bg); color: var(--text); font-family: var(--font); height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; }
  .title { font-size: 36px; font-weight: 700; color: var(--accent); letter-spacing: -0.5px; }
  .subtitle { font-size: 14px; color: var(--text-secondary); margin-top: -16px; }
  .row { display: flex; gap: 16px; align-items: center; }
  .btn { padding: 12px 28px; background: var(--accent-muted); border: 1px solid rgba(0,184,176,0.3); border-radius: var(--radius-md); color: var(--accent); font-size: 15px; font-weight: 600; font-family: var(--font); cursor: pointer; }
  .btn:hover { background: rgba(0,184,176,0.2); border-color: var(--accent); }
  .input { padding: 12px 16px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text); font-size: 18px; font-family: var(--font-mono); width: 130px; text-align: center; letter-spacing: 4px; text-transform: uppercase; }
  .name-row { display: flex; gap: 8px; align-items: center; }
  .name-label { font-size: 13px; color: var(--text-secondary); }
  .name-input { padding: 8px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text); font-size: 14px; font-family: var(--font); width: 160px; }
  .lobby-section { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; width: 320px; }
  .lobby-header { font-size: 14px; font-weight: 600; color: var(--accent); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
  .lobby-game { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--bg-elevated); border-radius: 4px; margin-bottom: 6px; }
  .lobby-game-name { font-size: 13px; color: var(--text); }
  .lobby-game-code { font-size: 12px; color: var(--text-secondary); font-family: var(--font-mono); }
  .join-small { padding: 4px 12px; background: var(--accent-muted); border: 1px solid rgba(0,184,176,0.3); border-radius: 4px; color: var(--accent); font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--font); }
  .connected { font-size: 12px; color: #3fb950; display: flex; align-items: center; gap: 4px; }
  .dot { width: 6px; height: 6px; background: #3fb950; border-radius: 50%; }
  .demo-note { position: fixed; bottom: 8px; right: 12px; font-size: 11px; color: var(--text-secondary); opacity: 0.6; }
</style>
</head>
<body>
  <div class="title">Chess</div>
  <div class="subtitle">Multiplayer chess for Gallia Viewer</div>
  <div class="name-row">
    <span class="name-label">Your name:</span>
    <input class="name-input" value="Einstein" readonly>
  </div>
  <div class="row">
    <button class="btn">Play vs Bot</button>
    <button class="btn">Host Game</button>
  </div>
  <div class="row">
    <input class="input" value="A3F2" readonly>
    <button class="btn">Join</button>
  </div>
  <div class="lobby-section">
    <div class="lobby-header"><span class="dot"></span> Public Games</div>
    <div class="lobby-game">
      <div><div class="lobby-game-name">Curie</div><div class="lobby-game-code">XKQP</div></div>
      <button class="join-small">Join</button>
    </div>
    <div class="lobby-game">
      <div><div class="lobby-game-name">Hawking</div><div class="lobby-game-code">M7RZ</div></div>
      <button class="join-small">Join</button>
    </div>
    <div class="lobby-game">
      <div><div class="lobby-game-name">Feynman</div><div class="lobby-game-code">B4WT</div></div>
      <button class="join-small">Join</button>
    </div>
  </div>
  <div class="connected"><span class="dot"></span> Connected &middot; 4 online</div>
  <div class="demo-note">Demo &mdash; simulated data</div>
</body>
</html>