agomizi1cmandClaude Opus 5.5
c3fbfdd12e
Replace the look of every page (key, lobby, create, table, range, review) with light/dark semantic colors, translucent materials, iOS-style grouped lists and system typography. Add fluid.js, a small spring engine with interruptible, velocity-aware animations, and use it for draggable bottom sheets, sliding segmented controls, a custom bet slider with rubber-banding, swipe-to-delete in the lobby, and dealt/flipped cards. Seats and cards are now reused between renders so animations are not cut off. Honors reduced motion, reduced transparency and increased contrast. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
177 lines
9.3 KiB
HTML
177 lines
9.3 KiB
HTML
<!doctype html>
|
|
<html lang="ja">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
|
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#eceef1">
|
|
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#070c0a">
|
|
<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-table">
|
|
<div class="conn-lost" id="conn-lost" role="status" hidden><span class="spinner" aria-hidden="true"></span>接続が切れました。再接続中…</div>
|
|
|
|
<main class="table-main" id="main" hidden>
|
|
<header class="table-bar">
|
|
<button class="glass-btn" id="leave" aria-label="退席する" title="退席する">
|
|
<svg class="i icon-leave" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 4h3.5A2.5 2.5 0 0 1 20 6.5v11a2.5 2.5 0 0 1-2.5 2.5H14"/><path d="M10 8l-4 4 4 4M6 12h9"/></svg>
|
|
<svg class="i icon-back" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 5l-7 7 7 7"/></svg>
|
|
</button>
|
|
<h1 id="table-name"></h1>
|
|
<!-- ホストだけに表示 -->
|
|
<span class="host-controls" id="host-controls" hidden>
|
|
<button class="btn btn-tint btn-sm" id="start">START</button>
|
|
<button class="glass-btn" id="pause" aria-label="一時停止" title="一時停止">
|
|
<svg class="i i-fill icon-pause" viewBox="0 0 24 24" aria-hidden="true"><rect x="6.5" y="5" width="4" height="14" rx="1.3"/><rect x="13.5" y="5" width="4" height="14" rx="1.3"/></svg>
|
|
<svg class="i i-fill icon-play" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5.6v12.8a1 1 0 0 0 1.5.86l10.2-6.4a1 1 0 0 0 0-1.72L9.5 4.74A1 1 0 0 0 8 5.6z"/></svg>
|
|
</button>
|
|
</span>
|
|
<!-- レビュー付きCPU戦のみ -->
|
|
<button class="glass-btn" id="review-open" aria-label="直前のハンドのレビュー" title="直前のハンドのレビュー" hidden>
|
|
<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>
|
|
</button>
|
|
<button class="glass-btn" id="share" aria-label="サイトのリンクをコピー" title="サイトのリンクをコピー">
|
|
<svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 14a4.5 4.5 0 0 0 6.4 0l3-3a4.5 4.5 0 0 0-6.4-6.4l-1.2 1.2"/><path d="M14 10a4.5 4.5 0 0 0-6.4 0l-3 3a4.5 4.5 0 0 0 6.4 6.4l1.2-1.2"/></svg>
|
|
</button>
|
|
</header>
|
|
|
|
<div class="level-bar">
|
|
<span class="lv" id="level"></span>
|
|
<span class="blinds" id="blinds"></span>
|
|
<span class="timer" id="timer"></span>
|
|
</div>
|
|
<div class="level-sub">
|
|
<span id="next-blinds"></span>
|
|
<span id="stack-info"></span>
|
|
</div>
|
|
|
|
<div class="felt-area" id="felt-area">
|
|
<div class="rail">
|
|
<div class="felt">
|
|
<div class="pot-label">POT</div>
|
|
<div class="pot" id="pot">$0</div>
|
|
<div class="board" id="board" hidden></div>
|
|
<div class="phase"><span id="phase">WAITING</span><span class="hand-no" id="hand-no"></span></div>
|
|
<div class="result" id="result" hidden></div>
|
|
</div>
|
|
</div>
|
|
<div id="seats"></div>
|
|
</div>
|
|
|
|
<div class="spectator-note" id="spectator-note" hidden>
|
|
<span id="spectator-text">満席のため観戦中です</span>
|
|
<button class="btn btn-tint btn-sm" id="take-seat" hidden>空席に座る</button>
|
|
</div>
|
|
</main>
|
|
|
|
<section class="action-bar" id="action-bar" hidden>
|
|
<!-- レイズ額: レイズボタンから上に開く（すりガラスを重ねないよう .inner の外に置く） -->
|
|
<div class="raise-panel" id="raise-panel" hidden>
|
|
<div class="raise-head">
|
|
<div class="raise-value"><span class="cur" aria-hidden="true">$</span><input type="number" class="raise-amount" id="raise-amount" inputmode="numeric" aria-label="レイズ額"></div>
|
|
<span class="raise-meta" id="raise-meta"></span>
|
|
</div>
|
|
<div class="bet-slider" id="raise-range" role="slider" tabindex="0" aria-label="レイズ額">
|
|
<div class="bet-track"><div class="bet-fill"></div></div>
|
|
<div class="bet-thumb"></div>
|
|
</div>
|
|
<div class="presets" id="presets">
|
|
<button type="button" class="chip-btn" data-preset="min">Min</button>
|
|
<button type="button" class="chip-btn" data-preset="half">½ Pot</button>
|
|
<button type="button" class="chip-btn" data-preset="threeq">¾ Pot</button>
|
|
<button type="button" class="chip-btn" data-preset="pot">Pot</button>
|
|
<button type="button" class="chip-btn" data-preset="max">All-in</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="inner">
|
|
<div class="me-row">
|
|
<div class="my-cards" id="my-cards" hidden></div>
|
|
<div class="me-info">
|
|
<div class="my-stack" id="my-stack">$0</div>
|
|
<div class="me-sub"><span class="my-hand" id="my-hand"></span><span id="my-net"></span><span class="my-bet" id="my-bet"></span></div>
|
|
</div>
|
|
<button class="btn btn-sm" id="sit-out" title="次のハンドから参加しません">離席</button>
|
|
</div>
|
|
|
|
<div class="status-line" id="status-line" aria-live="polite"></div>
|
|
|
|
<div class="award-panel" id="award-panel" hidden>
|
|
<div class="award-pots" id="award-pots"></div>
|
|
<button class="btn btn-tint btn-lg btn-block" id="award-confirm" disabled>確定</button>
|
|
</div>
|
|
|
|
<div class="actions" id="actions">
|
|
<button class="btn act-fold" id="act-fold" disabled>Fold</button>
|
|
<button class="btn act-call" id="act-call" disabled>Check</button>
|
|
<button class="btn act-raise" id="act-raise" disabled>Raise</button>
|
|
</div>
|
|
<div class="actions raising" id="raise-actions" hidden>
|
|
<button class="btn" id="raise-cancel">戻る</button>
|
|
<button class="btn act-raise" id="raise-confirm">Raise</button>
|
|
</div>
|
|
<div class="actions raising" id="review-actions" hidden>
|
|
<button class="btn" id="review-show">レビュー</button>
|
|
<button class="btn btn-tint" id="review-next">次のハンドへ</button>
|
|
</div>
|
|
<div class="actions single" id="alt-actions" hidden>
|
|
<button class="btn btn-tint" id="sit-in">復帰する</button>
|
|
<button class="btn btn-blue" id="rebuy">リバイ</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="center-message" id="not-found" hidden>
|
|
<div class="badge-icon" aria-hidden="true"><svg class="i" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7.5v5.5M12 16.5v.01"/></svg></div>
|
|
<h2 id="not-found-title">テーブルが見つかりません</h2>
|
|
<p id="not-found-text">終了したか、URLが間違っている可能性があります。</p>
|
|
<a class="btn btn-tint btn-lg" href="/">ロビーへ戻る</a>
|
|
</div>
|
|
|
|
<!-- 直前のハンドのレビュー（下から出るシート。つまみを下へ払うと閉じる） -->
|
|
<div class="sheet-backdrop" id="review-modal" hidden>
|
|
<div class="sheet review-sheet" role="dialog" aria-modal="true" aria-labelledby="review-title" tabindex="-1">
|
|
<div class="sheet-header" data-sheet-drag>
|
|
<span class="sheet-grabber" aria-hidden="true"></span>
|
|
<h2 class="sheet-title" id="review-title">ハンドのレビュー</h2>
|
|
</div>
|
|
<div class="sheet-scroll">
|
|
<div id="review-body"></div>
|
|
<button type="button" class="btn btn-block mt-12" id="review-copy">
|
|
<svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 3.5l1.6 4.4L16 9.5l-4.4 1.6L10 15.5l-1.6-4.4L4 9.5l4.4-1.6z"/><path d="M18 14l.8 2.2L21 17l-2.2.8L18 20l-.8-2.2L15 17l2.2-.8z"/></svg>AIに質問する用にコピー
|
|
</button>
|
|
<div class="list mt-12">
|
|
<a class="cell cell-link" id="review-link" href="/review" target="_blank" rel="noopener">
|
|
<span class="cell-title">対局全体のレビュー<span class="cell-sub">点数表・成績・リプレイ</span></span>
|
|
<svg class="i chevron" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 5l7 7-7 7"/></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="sheet-footer">
|
|
<div class="btn-row">
|
|
<button type="button" class="btn btn-lg" id="review-close">閉じる</button>
|
|
<button type="button" class="btn btn-tint btn-lg" id="review-modal-next">次のハンドへ</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 名前の入力（閉じられないシート） -->
|
|
<div class="sheet-backdrop" id="name-modal" hidden>
|
|
<form class="sheet sheet-form" id="name-form" role="dialog" aria-modal="true" aria-labelledby="name-title" tabindex="-1">
|
|
<h2 class="sheet-title" id="name-title">名前を入力</h2>
|
|
<p class="hint mt-8">テーブルで表示される名前です</p>
|
|
<input id="name-input" class="field mt-12" type="text" maxlength="12" placeholder="例: とらのすけ" autocomplete="nickname" aria-labelledby="name-title">
|
|
<button class="btn btn-tint btn-lg btn-block mt-12" type="submit">参加する</button>
|
|
</form>
|
|
</div>
|
|
|
|
<script src="/socket.io/socket.io.js"></script>
|
|
<script src="/assets/fluid.js"></script>
|
|
<script src="/assets/common.js"></script>
|
|
<script src="/assets/table.js"></script>
|
|
</body>
|
|
</html>
|