Poker/public/create.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
  <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f2f2f7">
  <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000000">
  <meta name="robots" content="noindex, nofollow">
  <title>テーブル作成 - Hold'em Night</title>
  <link rel="icon" href="/assets/favicon.ico">
  <link rel="stylesheet" href="/assets/style.css">
</head>
<body class="page-create">
  <header class="nav-bar" id="nav">
    <div class="nav-inner">
      <a class="nav-back" href="/"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 5l-7 7 7 7"/></svg>ロビー</a>
      <span class="nav-title"></span>
    </div>
  </header>

  <main class="wrap">
    <h1 class="large-title" id="large-title">テーブルを作成</h1>

    <form id="form" novalidate>
      <section class="group">
        <div class="group-header"><label for="table-name">テーブル名</label></div>
        <div class="list">
          <div class="cell field-cell">
            <input id="table-name" type="text" maxlength="24" required>
            <button type="button" class="icon-plain" id="reroll" aria-label="別の名前にする" title="別の名前にする">
              <svg class="i" viewBox="0 0 24 24" aria-hidden="true"><rect x="4" y="4" width="16" height="16" rx="4"/><circle cx="9" cy="9" r="1.4" fill="currentColor" stroke="none"/><circle cx="12" cy="12" r="1.4" fill="currentColor" stroke="none"/><circle cx="15" cy="15" r="1.4" fill="currentColor" stroke="none"/></svg>
            </button>
          </div>
        </div>
      </section>

      <section class="group">
        <div class="group-header" id="mode-label">テーブルの種類</div>
        <div class="list" role="radiogroup" aria-labelledby="mode-label">
          <label class="cell choice">
            <input type="radio" name="mode" value="chips" checked>
            <span class="cell-icon tone-green"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><ellipse cx="12" cy="7" rx="7" ry="3"/><path d="M5 7v5c0 1.7 3.1 3 7 3s7-1.3 7-3V7"/><path d="M5 12v5c0 1.7 3.1 3 7 3s7-1.3 7-3v-5"/></svg></span>
            <span class="choice-text"><span class="cell-title">キャッシュオンリー</span><span class="cell-sub">実物のカードで遊び、サイトはチップだけを管理。ショーダウンの勝者はホストが選ぶ</span></span>
            <svg class="i check" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>
          </label>
          <label class="cell choice">
            <input type="radio" name="mode" value="friends">
            <span class="cell-icon tone-blue"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M9.5 5.2l-3.9.7a2 2 0 0 0-1.6 2.3l1.8 10a2 2 0 0 0 2.3 1.6l1.4-.3"/><rect x="10.5" y="3.5" width="10" height="15" rx="2"/></svg></span>
            <span class="choice-text"><span class="cell-title">友人戦</span><span class="cell-sub">各自のスマホに手札が配られ、勝敗とポットの分配は自動</span></span>
            <svg class="i check" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>
          </label>
          <label class="cell choice">
            <input type="radio" name="mode" value="cpu">
            <span class="cell-icon tone-indigo"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><rect x="6" y="6" width="12" height="12" rx="2.5"/><rect x="9.5" y="9.5" width="5" height="5" rx="1"/><path d="M9 3v3M15 3v3M9 18v3M15 18v3M3 9h3M3 15h3M18 9h3M18 15h3"/></svg></span>
            <span class="choice-text"><span class="cell-title">CPU戦</span><span class="cell-sub">CPU と対戦（友達も空いている席に参加できる）。カードの配布・勝敗の判定は自動</span></span>
            <svg class="i check" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>
          </label>
          <!-- 管理者だけに表示 -->
          <label class="cell choice" id="review-mode" hidden>
            <input type="radio" name="mode" value="review">
            <span class="cell-icon tone-orange"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 3H7.5A2.5 2.5 0 0 0 5 5.5v13A2.5 2.5 0 0 0 7.5 21h9a2.5 2.5 0 0 0 2.5-2.5V8z"/><path d="M14 3v5h5M9 13h6M9 17h4"/></svg></span>
            <span class="choice-text"><span class="cell-title">レビュー付きCPU戦</span><span class="cell-sub">あなたと CPU だけで対戦（友達は入れない）。ハンドごとにハンドレンジの色・行動の点数を表示し、対局全体の成績も振り返れる</span></span>
            <svg class="i check" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>
          </label>
        </div>
      </section>

      <div class="collapsible collapsed" id="cpu-options" inert>
        <div class="collapse-inner">
          <section class="group">
            <div class="group-header" id="cpu-label">CPU の人数</div>
            <div class="segmented numbers" role="radiogroup" aria-labelledby="cpu-label">
              <label><input type="radio" name="cpu-count" value="1"><span>1</span></label>
              <label><input type="radio" name="cpu-count" value="2"><span>2</span></label>
              <label><input type="radio" name="cpu-count" value="3"><span>3</span></label>
              <label><input type="radio" name="cpu-count" value="4"><span>4</span></label>
              <label><input type="radio" name="cpu-count" value="5" checked><span>5</span></label>
              <label><input type="radio" name="cpu-count" value="6"><span>6</span></label>
              <label><input type="radio" name="cpu-count" value="7"><span>7</span></label>
              <label><input type="radio" name="cpu-count" value="8"><span>8</span></label>
            </div>
          </section>
        </div>
      </div>

      <section class="group">
        <div class="group-header">チップ</div>
        <div class="list">
          <div class="cell field-cell value-right">
            <label for="stack">開始スタック</label>
            <input id="stack" type="number" inputmode="numeric" min="10" step="1">
          </div>
          <div class="cell field-cell value-right">
            <label for="sb">スモールブラインド</label>
            <input id="sb" type="number" inputmode="numeric" min="1" step="1">
          </div>
          <div class="cell field-cell value-right">
            <label for="bb">ビッグブラインド</label>
            <input id="bb" type="number" inputmode="numeric" min="1" step="1">
          </div>
        </div>
        <div class="group-footer" id="blind-hint">スタックに合わせて自動設定（BB ≒ スタックの1/100）</div>
      </section>

      <section class="group">
        <div class="group-header">ブラインドタイマー</div>
        <div class="list">
          <div class="cell">
            <span class="cell-title" id="timer-label">ブラインドを自動で上げる</span>
            <span class="switch">
              <input id="timer" type="checkbox" aria-labelledby="timer-label">
              <span></span>
            </span>
          </div>
          <div class="collapsible collapsed" id="interval-row" inert>
            <div class="collapse-inner">
              <div class="cell field-cell value-right">
                <label for="interval">インターバル</label>
                <input id="interval" type="number" inputmode="numeric" min="1" max="240" step="1" value="10" disabled>
                <span class="unit">分</span>
              </div>
            </div>
          </div>
        </div>
        <div class="schedule" id="schedule" hidden></div>
      </section>

      <div class="submit-area">
        <div class="error-text" id="error" role="alert"></div>
        <button class="btn btn-tint btn-lg btn-block" id="submit" type="submit">テーブルを作成</button>
      </div>
    </form>
  </main>

  <script src="/assets/fluid.js"></script>
  <script src="/assets/common.js"></script>
  <script src="/assets/blinds.js"></script>
  <script src="/assets/create.js"></script>
</body>
</html>