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>
85 lines
3.3 KiB
HTML
85 lines
3.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="#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">
|
||
<link rel="stylesheet" href="/range/files/range.css">
|
||
</head>
|
||
<body class="page-range">
|
||
<header class="nav-bar" id="nav">
|
||
<div class="nav-inner">
|
||
<a class="nav-back" href="/" aria-label="ロビーへ戻る"><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 range-wrap">
|
||
<h1 class="large-title" id="large-title">ハンドレンジ</h1>
|
||
|
||
<div class="segmented range-tabs" id="tabs">
|
||
<button type="button" class="seg-btn active" data-view="range">レンジ表</button>
|
||
<button type="button" class="seg-btn" data-view="quiz">クイズ</button>
|
||
</div>
|
||
|
||
<!-- レンジ表 -->
|
||
<section id="view-range">
|
||
<div class="matrix-card">
|
||
<div class="range-matrix" id="matrix" aria-label="13×13 ハンドレンジ表"></div>
|
||
</div>
|
||
<div class="range-legend" id="legend"></div>
|
||
|
||
<div class="card selected-card" id="selected">
|
||
<div class="sel-hand">—</div>
|
||
<div class="hint">セルをタップすると分類を確認できます</div>
|
||
</div>
|
||
|
||
<button type="button" class="btn btn-tint btn-lg btn-block mt-12" id="start-from-range">クイズを始める</button>
|
||
</section>
|
||
|
||
<!-- クイズ -->
|
||
<section id="view-quiz" hidden>
|
||
<div class="label">問題数（全169ハンドからランダム）</div>
|
||
<div class="segmented" id="count">
|
||
<button type="button" class="seg-btn active" data-count="10">10問</button>
|
||
<button type="button" class="seg-btn" data-count="20">20問</button>
|
||
<button type="button" class="seg-btn" data-count="0">全問</button>
|
||
</div>
|
||
|
||
<div class="quiz-progress"><i id="progress-bar"></i></div>
|
||
<div class="quiz-stats">
|
||
<span id="q-count">開始前</span>
|
||
<span id="q-score">正解 0 / 0</span>
|
||
<span id="q-accuracy">正答率 --</span>
|
||
</div>
|
||
|
||
<div class="card quiz-hand">
|
||
<div class="quiz-cards">
|
||
<img id="card-1" alt="" hidden>
|
||
<img id="card-2" alt="" hidden>
|
||
</div>
|
||
<div class="quiz-hand-name" id="q-hand">?</div>
|
||
<div class="hint" id="q-prompt">「開始」を押してください</div>
|
||
</div>
|
||
|
||
<div class="quiz-answers" id="answers"></div>
|
||
<div class="quiz-feedback" id="feedback" aria-live="polite" hidden></div>
|
||
|
||
<div class="row mt-12">
|
||
<button type="button" class="btn btn-lg" id="start-quiz">開始</button>
|
||
<button type="button" class="btn btn-tint btn-lg" id="next-question" disabled>次の問題</button>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<script src="/assets/fluid.js"></script>
|
||
<script src="/range/files/range-data.js"></script>
|
||
<script src="/range/files/range.js"></script>
|
||
</body>
|
||
</html>
|