miles
b4c6c48958
Introduce a new Guess The Rank feature: add guess.html and associated styles and logic. app.js gains video modal utilities (extractYouTubeID, openVideoModal, renderApprovedRunsForLevel) and the full guessing-game flow (modes, round lifecycle, input handling). Refactor existing video-open usage to the new modal and enable showing approved runs in the modal. Update multiple navs and index highlights to link to the new Guess Game. Add CSS for guess UI and responsive tweaks, and adjust some UI copy (e.g. "View Video").
81 lines
2.7 KiB
HTML
81 lines
2.7 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<title>Lists — GD fedl</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body data-page="lists">
|
|
<header>
|
|
<h1>fedl</h1>
|
|
<nav>
|
|
<a href="index.html">Home</a>
|
|
<a href="guess.html">Guess Game</a>
|
|
<a href="players.html">Players</a>
|
|
<a href="run.html">Submit Run</a>
|
|
<a href="rules.html">Rules</a>
|
|
<a href="roulette.html">Roulette</a>
|
|
<a href="admelist.html">Admin</a>
|
|
</nav>
|
|
</header>
|
|
<main class="layout">
|
|
<aside class="sidebar">
|
|
<div class="panel list-sidebar-panel">
|
|
<p class="sidebar-kicker">Quick Jump</p>
|
|
<h2>Rank ranges</h2>
|
|
<p class="muted">Jump straight to a section of the list and narrow things down fast.</p>
|
|
<ul id="levels"></ul>
|
|
</div>
|
|
</aside>
|
|
|
|
<section class="content list-page-shell">
|
|
<section class="panel list-hero-panel">
|
|
<div class="list-hero-copy">
|
|
<p class="hero-kicker">FEDL Rankings</p>
|
|
<h2 id="list-title">FEDL List</h2>
|
|
<p class="muted list-hero-text">Browse the full ranking, search for a level by name, filter by placement range, and open linked videos directly from the table.</p>
|
|
</div>
|
|
<div class="list-hero-badge">
|
|
<strong>Live list</strong>
|
|
<span>Updates pull from the current FEDL data source when available.</span>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel list-controls-panel">
|
|
<div class="search-row">
|
|
<label class="control-block" for="search">
|
|
<span>Search</span>
|
|
<input id="search" type="text" placeholder="Search titles..." />
|
|
</label>
|
|
<label class="control-block control-select" for="level-filter">
|
|
<span>Filter</span>
|
|
<select id="level-filter"><option value="all">All Levels</option></select>
|
|
</label>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel list-table-panel">
|
|
<div class="table-header">
|
|
<div>
|
|
<p class="status-label">List Table</p>
|
|
<h3>Current placements</h3>
|
|
</div>
|
|
<p class="muted table-hint">Click <strong>Open</strong> on any row to watch the linked run.</p>
|
|
</div>
|
|
|
|
<div class="table-wrap">
|
|
<table class="levels-table">
|
|
<thead>
|
|
<tr><th style="width:80px">#</th><th>Title</th><th style="width:140px">Action</th></tr>
|
|
</thead>
|
|
<tbody id="list-area"></tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
</main>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|