miles
463fa222ff
Revamp the Lists and Roulette pages with new semantic panels and updated layout. lists.html: replace the simple list panel with a sidebar Quick Jump, a prominent hero section, dedicated controls (search + filter) and a separate table panel while preserving existing IDs (search, level-filter, list-area, list-title). roulette.html: reorganize into a roulette-shell with a main roulette panel (spin button, card) and a rules sidebar/card with concise rule items; interactive IDs (roulette-spin, roulette-card, roulette-open, etc.) remain intact. styles.css: add styles for the new components (.list-*, .control-block, .roulette-shell, .roulette-rules-card, .roulette-rule-list, .sidebar-kicker and more), tweak search-row spacing and responsive behaviors to support the new layout. No JS behavior changed in this diff (app.js left referenced but untouched).
68 lines
2.6 KiB
HTML
68 lines
2.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<title>Demon Roulette - GD fedl</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body data-page="roulette">
|
|
<header>
|
|
<h1>Demon Roulette</h1>
|
|
<nav>
|
|
<a href="index.html">Home</a>
|
|
<a href="lists.html">Lists</a>
|
|
<a href="players.html">Players</a>
|
|
<a href="rules.html">Rules</a>
|
|
</nav>
|
|
</header>
|
|
<main>
|
|
<section class="roulette-shell">
|
|
<section class="panel roulette-panel">
|
|
<div class="roulette-head">
|
|
<div>
|
|
<p class="roulette-kicker">Random Challenge</p>
|
|
<h2>Demon Roulette</h2>
|
|
<p class="muted roulette-intro">Spin the FEDL list to get a random demon for your next roulette run, practice grind, or bad decision.</p>
|
|
</div>
|
|
<button class="btn roulette-btn" id="roulette-spin" type="button">Spin</button>
|
|
</div>
|
|
|
|
<div class="roulette-card" id="roulette-card">
|
|
<p class="roulette-status muted" id="roulette-status">Press spin to choose a demon.</p>
|
|
<h3 id="roulette-title">No demon selected</h3>
|
|
<p class="roulette-rank" id="roulette-rank">Rank: -</p>
|
|
<p class="roulette-meta" id="roulette-level-id">Level ID: -</p>
|
|
<p class="roulette-note muted" id="roulette-note">Level IDs come from your local file first, then API lookup if needed.</p>
|
|
<a class="btn roulette-open" id="roulette-open" href="#" target="_blank" rel="noopener noreferrer" hidden>Open Video</a>
|
|
</div>
|
|
</section>
|
|
|
|
<aside class="panel roulette-rules-card">
|
|
<p class="roulette-kicker">How It Works</p>
|
|
<h2>Quick rules</h2>
|
|
<div class="roulette-rule-list">
|
|
<article>
|
|
<strong>Pick from a list</strong>
|
|
<p>Use FEDL or any demon list format you want for your roulette session.</p>
|
|
</article>
|
|
<article>
|
|
<strong>Raise the target</strong>
|
|
<p>A common setup starts at 1% and increases by 1% after each new level.</p>
|
|
</article>
|
|
<article>
|
|
<strong>Use your own rules</strong>
|
|
<p>Skips, rerolls, and loss conditions can be adjusted to match your challenge format.</p>
|
|
</article>
|
|
<article>
|
|
<strong>Extra data included</strong>
|
|
<p>This page shows rank and level ID, and it tries API lookup when local info is missing.</p>
|
|
</article>
|
|
</div>
|
|
</aside>
|
|
</section>
|
|
</main>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|