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").
146 lines
5.8 KiB
HTML
146 lines
5.8 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<title>GD fedl</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body data-page="index">
|
|
<header>
|
|
<h1>GD fedl</h1>
|
|
<nav>
|
|
<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="admelist.html">Admin</a>
|
|
</nav>
|
|
</header>
|
|
<main>
|
|
<section class="home-hero">
|
|
<div class="home-copy panel">
|
|
<p class="hero-kicker">FEDL Hub</p>
|
|
<h2>Track the list, learn the rules, and jump straight into the chaos.</h2>
|
|
<p class="hero-text">FEDL is your quick home base for browsing ranked demons, checking submission rules, spinning a roulette challenge, and keeping up with the list without digging through a bunch of scattered pages.</p>
|
|
|
|
<div class="hero-actions">
|
|
<a class="btn" href="lists.html">Open The List</a>
|
|
<a class="btn ghost-btn" href="guess.html">Play Guess Game</a>
|
|
<a class="btn ghost-btn" href="run.html">Submit A Run</a>
|
|
<a class="btn ghost-btn" href="rules.html">Submission Rules</a>
|
|
<a class="btn ghost-btn" href="roulette.html">Spin Roulette</a>
|
|
</div>
|
|
|
|
<div class="hero-stats" aria-label="FEDL overview">
|
|
<article class="stat-card">
|
|
<strong id="hero-total-levels">--</strong>
|
|
<span>Ranked levels loaded</span>
|
|
</article>
|
|
<article class="stat-card">
|
|
<strong id="hero-top-entry">--</strong>
|
|
<span>Current #1 entry</span>
|
|
</article>
|
|
<article class="stat-card">
|
|
<strong id="hero-last-slot">--</strong>
|
|
<span>Approved runs</span>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="hero-stage panel">
|
|
<p class="stage-label">Live Snapshot</p>
|
|
<h3>Featured list picks</h3>
|
|
<p class="muted">A fast preview of what is waiting inside the list page right now.</p>
|
|
<div class="featured-list" id="featured-list">
|
|
<article class="featured-card">
|
|
<span class="featured-rank">#--</span>
|
|
<strong>Loading list data...</strong>
|
|
<p>Pulling the latest entries for the homepage preview.</p>
|
|
</article>
|
|
</div>
|
|
</aside>
|
|
</section>
|
|
|
|
<section class="home-section-grid">
|
|
<article class="panel info-panel">
|
|
<p class="status-label">Browse Faster</p>
|
|
<h3>The list page is built for quick checking</h3>
|
|
<p class="muted">Search by title, jump between rank ranges, and open completion videos without leaving the site.</p>
|
|
<a class="text-link" href="lists.html">Go to lists</a>
|
|
</article>
|
|
|
|
<article class="panel info-panel">
|
|
<p class="status-label">Stay Legit</p>
|
|
<h3>The rules page explains what submissions need</h3>
|
|
<p class="muted">Use it to review raw footage requirements, mod rules, skip policies, and approval expectations before you submit.</p>
|
|
<a class="text-link" href="rules.html">Read the rules</a>
|
|
</article>
|
|
|
|
<article class="panel info-panel">
|
|
<p class="status-label">Send Proof</p>
|
|
<h3>The run page sends completions into the live queue</h3>
|
|
<p class="muted">Drop in your video, add raw footage and notes, and let the admin panel pick it up for review.</p>
|
|
<a class="text-link" href="run.html">Open submissions</a>
|
|
</article>
|
|
</section>
|
|
|
|
<section class="panel spotlight-panel">
|
|
<div class="spotlight-copy">
|
|
<p class="status-label">Start Here</p>
|
|
<h2>What you can do on FEDL</h2>
|
|
<p class="spotlight-text">This site is meant to be simple: find ranked demons, watch linked runs, check moderation expectations, and get back to playing without unnecessary clutter.</p>
|
|
</div>
|
|
|
|
<div class="spotlight-grid">
|
|
<article class="spotlight-card">
|
|
<h3>Lists</h3>
|
|
<p>Browse the ranking, filter by placement ranges, and watch linked videos from each entry.</p>
|
|
</article>
|
|
<article class="spotlight-card">
|
|
<h3>Rules</h3>
|
|
<p>Check completion requirements, accepted tools, and what moderators expect from a valid run.</p>
|
|
</article>
|
|
<article class="spotlight-card">
|
|
<h3>Guess Game</h3>
|
|
<p>See a random level name, pick a mode, and guess its rank with higher or lower hints.</p>
|
|
</article>
|
|
<article class="spotlight-card">
|
|
<h3>Roulette</h3>
|
|
<p>Pull a random demon with rank and level ID details for your next roulette attempt.</p>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel discord-panel">
|
|
<div class="discord-copy">
|
|
<div class="discord-badge">
|
|
<span class="discord-logo" aria-hidden="true">
|
|
<img src="https://cdn.prod.website-files.com/6257adef93867e50d84d30e2/66e3d7f4ef6498ac018f2c55_Symbol.svg" alt="Discord logo" />
|
|
</span>
|
|
<div>
|
|
<p class="discord-label">Community</p>
|
|
<h2>Join Our Discord</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="discord-text">Join the FEDL Discord to ask about rules, talk about placements, share progress, report problems, and get help from moderators and other players.</p>
|
|
|
|
<div class="discord-highlights">
|
|
<span>Rule help</span>
|
|
<span>Level discussion</span>
|
|
<span>Moderator support</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="discord-actions">
|
|
<a class="btn discord-btn" href="https://discord.gg/vA8GcdCG" target="_blank" rel="noopener noreferrer">Join Now</a>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|