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>
70 lines
3.7 KiB
HTML
70 lines
3.7 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="#f2f2f7">
|
|
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000000">
|
|
<meta name="robots" content="noindex, nofollow">
|
|
<title>CPU戦のレビュー - Hold'em Night</title>
|
|
<link rel="icon" href="/assets/favicon.ico">
|
|
<link rel="stylesheet" href="/assets/style.css">
|
|
<link rel="stylesheet" href="/range/files/review.css">
|
|
</head>
|
|
<body class="page-review">
|
|
<header class="nav-bar" id="nav">
|
|
<div class="nav-inner">
|
|
<a class="nav-back" id="back" href="/" aria-label="戻る"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 5l-7 7 7 7"/></svg><span id="back-label">ロビー</span></a>
|
|
<span class="nav-title"></span>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="wrap review-wrap">
|
|
<h1 class="large-title" id="title">CPU戦のレビュー</h1>
|
|
|
|
<!-- 対局の一覧 -->
|
|
<section id="view-list">
|
|
<div class="group-header">レビュー付きCPU戦の対局（新しい順・最大50件）</div>
|
|
<div id="sessions" class="list rv-sessions"></div>
|
|
</section>
|
|
|
|
<!-- 1回の対局 -->
|
|
<section id="view-session" hidden>
|
|
<div class="rv-overview" id="overview"></div>
|
|
<div class="segmented rv-tabs" id="tabs">
|
|
<button type="button" class="seg-btn active" data-tab="scores">点数表</button>
|
|
<button type="button" class="seg-btn" data-tab="stats">成績</button>
|
|
<button type="button" class="seg-btn" data-tab="range">色・位置</button>
|
|
<button type="button" class="seg-btn" data-tab="worst">見直し</button>
|
|
<button type="button" class="seg-btn" data-tab="graph">収支</button>
|
|
</div>
|
|
<div id="tab-body"></div>
|
|
</section>
|
|
|
|
<!-- 1ハンドのリプレイ -->
|
|
<section id="view-replay" hidden>
|
|
<div class="rv-replay-head" id="replay-head"></div>
|
|
<div class="rv-board-box">
|
|
<div class="rv-board" id="replay-board"></div>
|
|
<div class="rv-pot" id="replay-pot"></div>
|
|
</div>
|
|
<div class="rv-step" id="replay-step" aria-live="polite"></div>
|
|
<div class="rv-controls">
|
|
<button type="button" class="btn" data-step="first" aria-label="最初へ"><svg class="i i-fill" viewBox="0 0 24 24" aria-hidden="true"><rect x="5" y="5.5" width="2.4" height="13" rx="1"/><path d="M19 6.6v10.8a.9.9 0 0 1-1.4.75L9.6 12.9a1.1 1.1 0 0 1 0-1.8l8-5.25a.9.9 0 0 1 1.4.75z"/></svg></button>
|
|
<button type="button" class="btn" data-step="prev" aria-label="前へ"><svg class="i i-fill" viewBox="0 0 24 24" aria-hidden="true"><path d="M17 6.6v10.8a.9.9 0 0 1-1.4.75L7.6 12.9a1.1 1.1 0 0 1 0-1.8l8-5.25a.9.9 0 0 1 1.4.75z"/></svg></button>
|
|
<button type="button" class="btn btn-tint" data-step="next" aria-label="次へ"><svg class="i i-fill" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 6.6v10.8a.9.9 0 0 0 1.4.75l8-5.25a1.1 1.1 0 0 0 0-1.8l-8-5.25A.9.9 0 0 0 7 6.6z"/></svg></button>
|
|
<button type="button" class="btn" data-step="last" aria-label="最後へ"><svg class="i i-fill" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 6.6v10.8a.9.9 0 0 0 1.4.75l8-5.25a1.1 1.1 0 0 0 0-1.8l-8-5.25A.9.9 0 0 0 5 6.6z"/><rect x="16.6" y="5.5" width="2.4" height="13" rx="1"/></svg></button>
|
|
</div>
|
|
<div id="replay-analysis"></div>
|
|
<div class="rv-players" id="replay-players"></div>
|
|
<div class="rv-section">アクション一覧</div>
|
|
<div class="rv-log" id="replay-log"></div>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="/assets/fluid.js"></script>
|
|
<script src="/assets/common.js"></script>
|
|
<script src="/range/files/review.js"></script>
|
|
</body>
|
|
</html>
|