133 lines
6.8 KiB
HTML
133 lines
6.8 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6951907799659255"
|
|
crossorigin="anonymous"></script>
|
|
<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">
|
|
<link rel="icon" type="image/png" href="pageicon.png">
|
|
</head>
|
|
<body data-page="roulette">
|
|
<header>
|
|
<h1>Demon Roulette</h1>
|
|
<nav>
|
|
<a href="index.html">Home</a>
|
|
<a href="guess.html">Guess Game</a>
|
|
<a href="players.html">Players</a>
|
|
<a href="lists.html">Lists</a>
|
|
<a href="run.html">Submit Run</a>
|
|
<a href="rules.html">Rules</a>
|
|
<a href="roulette.html">Roulette</a>
|
|
<a href="post.html">Posts</a>
|
|
<a href="messages.html">Messages</a>
|
|
<a href="contact.html">Contact</a>
|
|
</nav>
|
|
</header>
|
|
<main>
|
|
<section class="roulette-shell">
|
|
<div class="roulette-main-stack">
|
|
<section class="panel roulette-account-panel">
|
|
<p class="roulette-kicker">Your profile</p>
|
|
<h2 class="roulette-account-heading">Save roulette & progress</h2>
|
|
<p class="muted small roulette-account-intro">Profiles are stored only in this browser. Each profile remembers your last roulette demon and a progress % per level (also shown on the list page).</p>
|
|
<p class="muted small roulette-login-sync-hint" id="roulette-login-sync-hint" hidden>
|
|
<a href="login.html">Log in</a> or <a href="signup.html">sign up</a> to sync roulette, save slots, and % across browsers.
|
|
</p>
|
|
<div class="roulette-slots-block" id="roulette-slots-block">
|
|
<p class="roulette-slots-heading">Roulette save slots</p>
|
|
<p class="muted small" id="roulette-slots-hint">Use three slots to park different demons. Requires an active profile or a signed-in account.</p>
|
|
<div class="roulette-slot-rows">
|
|
<div class="roulette-slot-row">
|
|
<span class="roulette-slot-title">Slot 1</span>
|
|
<span class="roulette-slot-label muted" id="roulette-slot-label-1">Empty</span>
|
|
<button type="button" class="btn ghost-btn small-btn" id="roulette-slot-save-1">Save</button>
|
|
<button type="button" class="btn ghost-btn small-btn" id="roulette-slot-load-1">Load</button>
|
|
</div>
|
|
<div class="roulette-slot-row">
|
|
<span class="roulette-slot-title">Slot 2</span>
|
|
<span class="roulette-slot-label muted" id="roulette-slot-label-2">Empty</span>
|
|
<button type="button" class="btn ghost-btn small-btn" id="roulette-slot-save-2">Save</button>
|
|
<button type="button" class="btn ghost-btn small-btn" id="roulette-slot-load-2">Load</button>
|
|
</div>
|
|
<div class="roulette-slot-row">
|
|
<span class="roulette-slot-title">Slot 3</span>
|
|
<span class="roulette-slot-label muted" id="roulette-slot-label-3">Empty</span>
|
|
<button type="button" class="btn ghost-btn small-btn" id="roulette-slot-save-3">Save</button>
|
|
<button type="button" class="btn ghost-btn small-btn" id="roulette-slot-load-3">Load</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="roulette-account-controls">
|
|
<label class="roulette-account-label" for="roulette-account-select">Active profile</label>
|
|
<select id="roulette-account-select" class="roulette-account-select"></select>
|
|
<div class="roulette-account-create-row">
|
|
<input id="roulette-account-new" type="text" placeholder="New profile name" autocomplete="username" />
|
|
<button type="button" class="btn ghost-btn" id="roulette-account-create">Create</button>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="btn ghost-btn roulette-restore-btn" id="roulette-restore" hidden>Restore last spin</button>
|
|
</section>
|
|
<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>
|
|
<div class="roulette-progress-block" id="roulette-progress-row" hidden>
|
|
<label class="roulette-progress-label" for="roulette-percent">Your % on this level</label>
|
|
<div class="roulette-progress-input-row">
|
|
<input id="roulette-percent" type="text" inputmode="decimal" placeholder="e.g. 47" autocomplete="off" />
|
|
<span class="muted">%</span>
|
|
<button type="button" class="btn small-btn" id="roulette-percent-submit">Submit %</button>
|
|
</div>
|
|
<p id="roulette-percent-hint" class="muted small roulette-percent-hint"></p>
|
|
</div>
|
|
<a class="btn roulette-open" id="roulette-open" href="#" target="_blank" rel="noopener noreferrer" hidden>View Video</a>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<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>
|
|
<article>
|
|
<strong>Want another mode?</strong>
|
|
<p>Open the separate Guess Game page if you want to figure out a level's rank with higher or lower hints.</p>
|
|
</article>
|
|
</div>
|
|
</aside>
|
|
</section>
|
|
</main>
|
|
<script src="app.js" defer></script>
|
|
</body>
|
|
</html>
|