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>
81 lines
3.5 KiB
HTML
81 lines
3.5 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">
|
|
</head>
|
|
<body class="page-lobby">
|
|
<header class="nav-bar" id="nav">
|
|
<div class="nav-inner"><span class="nav-title"></span></div>
|
|
</header>
|
|
|
|
<main class="wrap">
|
|
<div class="hero">
|
|
<div class="app-mark small" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24"><path d="M12 2.2c-2.3 3.1-7.6 6.3-7.6 10.4a4.1 4.1 0 0 0 7 2.9c-.1 2.3-1 4-2.6 5.3h6.4c-1.6-1.3-2.5-3-2.6-5.3a4.1 4.1 0 0 0 7-2.9c0-4.1-5.3-7.3-7.6-10.4z"/></svg>
|
|
</div>
|
|
<div>
|
|
<h1 class="large-title" id="large-title">Hold'em Night</h1>
|
|
<p class="brand-sub">PRIVATE CLUB</p>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="group">
|
|
<div class="group-header">プロフィール</div>
|
|
<div class="list">
|
|
<div class="cell field-cell">
|
|
<label for="name">名前</label>
|
|
<input id="name" type="text" maxlength="12" placeholder="例: とらのすけ" autocomplete="nickname">
|
|
</div>
|
|
</div>
|
|
<div class="error-text" id="name-error" role="alert"></div>
|
|
</section>
|
|
|
|
<div class="lobby-actions">
|
|
<button id="create" class="btn btn-tint btn-lg btn-block" type="button">
|
|
<svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>テーブルを作成
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 管理者だけに表示 -->
|
|
<section class="group" id="admin-group" hidden>
|
|
<div class="group-header">管理者</div>
|
|
<div class="list">
|
|
<a id="range-link" class="cell cell-link" href="/range">
|
|
<span class="cell-icon tone-purple"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><rect x="4" y="4" width="6.5" height="6.5" rx="1.5"/><rect x="13.5" y="4" width="6.5" height="6.5" rx="1.5"/><rect x="4" y="13.5" width="6.5" height="6.5" rx="1.5"/><rect x="13.5" y="13.5" width="6.5" height="6.5" rx="1.5"/></svg></span>
|
|
<span class="cell-title">ハンドレンジ学習</span>
|
|
<svg class="i chevron" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 5l7 7-7 7"/></svg>
|
|
</a>
|
|
<a id="review-link" class="cell cell-link" href="/review">
|
|
<span class="cell-icon tone-orange"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 20v-8M12 20V5M19 20v-9"/></svg></span>
|
|
<span class="cell-title">CPU戦のレビュー</span>
|
|
<svg class="i chevron" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 5l7 7-7 7"/></svg>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="group">
|
|
<div class="group-header">
|
|
<span>開催中のテーブル</span>
|
|
<span id="count"></span>
|
|
</div>
|
|
<div class="list" id="list">
|
|
<div class="empty">読み込み中…</div>
|
|
</div>
|
|
<div class="group-footer" id="list-footer" hidden>行を左へスワイプすると削除できます（管理者）。</div>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="/socket.io/socket.io.js"></script>
|
|
<script src="/assets/fluid.js"></script>
|
|
<script src="/assets/common.js"></script>
|
|
<script src="/assets/lobby.js"></script>
|
|
</body>
|
|
</html>
|