398 lines
17 KiB
HTML
398 lines
17 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" />
|
|
<meta name="description" content="FEDL - Browse ranked demons, check demon list rules, play demon games, and submit demon runs. Your hub for the Geometry Dash demon list.">
|
|
<meta name="keywords" content="demon list, ranked demons, geometry dash, demon ranking, challenge demon">
|
|
<title>FEDL - Ranked Demon List Hub for Geometry Dash</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
<link rel="icon" type="image/png" href="pageicon.png">
|
|
</head>
|
|
<body data-page="onepage">
|
|
<header role="banner">
|
|
<h1>FEDL</h1>
|
|
<nav role="navigation" aria-label="Main navigation">
|
|
<a href="#" data-nav="home">Home</a>
|
|
<a href="#" data-nav="lists">Lists</a>
|
|
<a href="#" data-nav="players">Players</a>
|
|
<a href="#" data-nav="run">Submit Run</a>
|
|
<a href="#" data-nav="roulette">Roulette</a>
|
|
<a href="#" data-nav="guess">Guess Game</a>
|
|
<a href="#" data-nav="rules">Rules</a>
|
|
<a href="#" data-nav="messages">Messages</a>
|
|
<a href="#" data-nav="contact">Contact</a>
|
|
<a href="#" data-nav="about">About</a>
|
|
</nav>
|
|
</header>
|
|
<main>
|
|
<section id="page-home" class="spa-page">
|
|
<section class="home-hero">
|
|
<div class="home-copy panel">
|
|
<p class="hero-kicker">FEDL Hub</p>
|
|
<h2>Track ranked demons, learn submission rules, and master the challenge.</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="#" data-nav="lists">Open The List</a>
|
|
<a class="btn" href="signup.html">Sign up</a>
|
|
<a class="btn ghost-btn" href="#" data-nav="guess">Play Guess Game</a>
|
|
<a class="btn ghost-btn" href="#" data-nav="run">Submit A Run</a>
|
|
<a class="btn ghost-btn" href="#" data-nav="rules">Submission Rules</a>
|
|
<a class="btn ghost-btn" href="#" data-nav="roulette">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</span>
|
|
</article>
|
|
<article class="stat-card">
|
|
<strong id="hero-top-entry">--</strong>
|
|
<span>#1 Demon</span>
|
|
</article>
|
|
<article class="stat-card">
|
|
<strong id="hero-last-slot">--</strong>
|
|
<span>Verified Runs</span>
|
|
</article>
|
|
<article class="stat-card">
|
|
<strong id="hero-total-players">--</strong>
|
|
<span>Top Player</span>
|
|
</article>
|
|
<article class="stat-card">
|
|
<strong id="hero-recent-runs">--</strong>
|
|
<span>Levels Added This Week</span>
|
|
</article>
|
|
<article class="stat-card">
|
|
<strong id="hero-list-updated">--</strong>
|
|
<span>Last Updated</span>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="hero-stage panel">
|
|
<p class="stage-label">Live Snapshot</p>
|
|
<h3>Top 10 levels</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 skeleton-card">
|
|
<span class="featured-rank skeleton" style="width:40px;height:24px"></span>
|
|
<strong class="skeleton skeleton-title"></strong>
|
|
<p class="skeleton skeleton-text"></p>
|
|
</article>
|
|
<article class="featured-card skeleton-card">
|
|
<span class="featured-rank skeleton" style="width:40px;height:24px"></span>
|
|
<strong class="skeleton skeleton-title"></strong>
|
|
<p class="skeleton skeleton-text"></p>
|
|
</article>
|
|
<article class="featured-card skeleton-card">
|
|
<span class="featured-rank skeleton" style="width:40px;height:24px"></span>
|
|
<strong class="skeleton skeleton-title"></strong>
|
|
<p class="skeleton skeleton-text"></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="#" data-nav="lists">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="#" data-nav="rules">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="#" data-nav="run">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 download-panel">
|
|
<div class="discord-copy">
|
|
<div class="discord-badge">
|
|
<span class="discord-logo" aria-hidden="true">📱</span>
|
|
<div>
|
|
<p class="discord-label">Download</p>
|
|
<h2>Geode Mod (Coming Soon)</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="discord-text">Geode Mod is a dedicated FEDL companion mod for Geometry Dash demon players with quick list access, roulette tools, queue tracking, and built-in validation help.</p>
|
|
<ul class="feature-bullet-list">
|
|
<li>Fast access to the full ranked demon list with real-time updates</li>
|
|
<li>Roulette generator with saved pick history</li>
|
|
<li>Submission queue tracking with status markers and moderator notes</li>
|
|
<li>Integrated rules checklist and run validation tips</li>
|
|
</ul>
|
|
<p class="discord-text discord-footnote">Launching soon for Geode, mobile, and desktop.</p>
|
|
</div>
|
|
<div class="discord-actions">
|
|
<button class="btn discord-btn" disabled>Coming soon</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel discord-panel">
|
|
<div class="discord-copy">
|
|
<div class="discord-badge">
|
|
<span class="discord-logo" aria-hidden="true">📱</span>
|
|
<div>
|
|
<p class="discord-label">Update</p>
|
|
<h2>App Coming Soon</h2>
|
|
</div>
|
|
</div>
|
|
<p class="discord-text">A dedicated FEDL app is on the way. Stay tuned for updates.</p>
|
|
</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" loading="lazy" />
|
|
</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/5HyUKQrN" target="_blank" rel="noopener noreferrer">Join Now</a>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
|
|
<section id="page-lists" class="spa-page" hidden>
|
|
<section class="panel">
|
|
<div class="list-controls">
|
|
<div class="search-row">
|
|
<input id="list-search" type="text" placeholder="Search by title..." aria-label="Search list" />
|
|
<button id="list-add-row" type="button" class="btn ghost-btn" hidden>Add Level</button>
|
|
<button id="list-save-btn" type="button" class="btn" hidden>Save</button>
|
|
</div>
|
|
<div class="list-jump">
|
|
<button type="button" class="btn ghost-btn small-btn" data-jump="1">1-25</button>
|
|
<button type="button" class="btn ghost-btn small-btn" data-jump="26">26-50</button>
|
|
<button type="button" class="btn ghost-btn small-btn" data-jump="51">51-75</button>
|
|
<button type="button" class="btn ghost-btn small-btn" data-jump="76">76-100</button>
|
|
<button type="button" class="btn ghost-btn small-btn" data-jump="100">100+</button>
|
|
</div>
|
|
</div>
|
|
<div class="table-wrap">
|
|
<table class="levels-table" id="list-table">
|
|
<thead>
|
|
<tr>
|
|
<th style="width:80px">Rank</th>
|
|
<th style="width:180px">ID</th>
|
|
<th>Title</th>
|
|
<th style="width:200px">Video</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="list-body"></tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
|
|
<section id="page-players" class="spa-page" hidden>
|
|
<section class="panel">
|
|
<div class="list-controls">
|
|
<div class="search-row">
|
|
<input id="player-search" type="text" placeholder="Search players..." aria-label="Search players" />
|
|
<select id="player-filter">
|
|
<option value="all">All players</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="table-wrap">
|
|
<table class="levels-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th style="width:100px">Runs</th>
|
|
<th style="width:120px">Best</th>
|
|
<th style="width:100px">Points</th>
|
|
<th>Top Levels</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="players-body"></tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
|
|
<section id="page-run" class="spa-page" hidden>
|
|
<section class="panel">
|
|
<h2>Submit a Run</h2>
|
|
<p class="muted">Submit your completion to be reviewed by a moderator.</p>
|
|
<form id="run-form" class="run-form">
|
|
<label class="admin-password-field">
|
|
<span>Player Name</span>
|
|
<input id="run-player-name" type="text" placeholder="Who completed this?" required />
|
|
</label>
|
|
<label class="admin-password-field">
|
|
<span>Level Name</span>
|
|
<input id="run-level-title" type="text" placeholder="Exact name from the list" required />
|
|
</label>
|
|
<label class="admin-password-field">
|
|
<span>Video URL</span>
|
|
<input id="run-video-url" type="url" placeholder="YouTube or video link" required />
|
|
</label>
|
|
<label class="admin-password-field">
|
|
<span>Percent</span>
|
|
<input id="run-percent" type="number" min="1" max="100" value="100" required />
|
|
<span class="muted small">% (100 for 100%, 80 for 80%)</span>
|
|
</label>
|
|
<label class="admin-password-field">
|
|
<span>Raw Footage URL (optional)</span>
|
|
<input id="run-raw-url" type="url" placeholder="Link to raw gameplay if different" />
|
|
</label>
|
|
<label class="admin-password-field">
|
|
<span>Notes (optional)</span>
|
|
<textarea id="run-notes" placeholder="Any additional info for moderators"></textarea>
|
|
</label>
|
|
<p id="run-form-status" class="muted"></p>
|
|
<button type="submit" class="btn">Submit Run</button>
|
|
</form>
|
|
<div id="run-list-section">
|
|
<h3>Your Submissions</h3>
|
|
<div id="run-list"></div>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
|
|
<section id="page-roulette" class="spa-page" hidden>
|
|
<section class="panel roulette-panel">
|
|
<h2>Roulette</h2>
|
|
<p class="muted">Spin the wheel for a random demon challenge.</p>
|
|
<div id="roulette-result" class="roulette-result">
|
|
<p class="muted">Click spin to get a random demon.</p>
|
|
</div>
|
|
<button id="roulette-spin" type="button" class="btn">Spin</button>
|
|
</section>
|
|
</section>
|
|
|
|
<section id="page-guess" class="spa-page" hidden>
|
|
<section class="panel">
|
|
<h2>Guess the Rank</h2>
|
|
<p class="muted">A random level name will appear. Guess if it's ranked higher or lower!</p>
|
|
<div id="guess-game">
|
|
<p id="guess-level" class="guess-level">???</p>
|
|
<div class="guess-buttons">
|
|
<button id="guess-higher" class="btn">Higher ▲</button>
|
|
<button id="guess-lower" class="btn">Lower ▼</button>
|
|
</div>
|
|
<p id="guess-result" class="muted"></p>
|
|
<p id="guess-score">Score: 0</p>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
|
|
<section id="page-rules" class="spa-page" hidden>
|
|
<section class="panel">
|
|
<h2>Submission Rules</h2>
|
|
<div class="rules-content">
|
|
<h3>Requirements</h3>
|
|
<ul>
|
|
<li>Video must show full completion from start to finish</li>
|
|
<li>Raw footage must be available upon request</li>
|
|
<li>No cheats, hacks, or glitches allowed</li>
|
|
<li>Level must be on the ranked list</li>
|
|
</ul>
|
|
<h3>Verification Process</h3>
|
|
<ol>
|
|
<li>Submit your run with video link</li>
|
|
<li>Wait for moderator review</li>
|
|
<li>Provide raw footage if requested</li>
|
|
<li>Run gets approved or rejected with notes</li>
|
|
</ol>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
|
|
<section id="page-messages" class="spa-page" hidden>
|
|
<section class="panel">
|
|
<h2>Messages</h2>
|
|
<p class="muted">Password resets and system messages appear here.</p>
|
|
<div id="messages-list">
|
|
<p class="muted">No messages.</p>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
|
|
<section id="page-contact" class="spa-page" hidden>
|
|
<section class="panel">
|
|
<h2>Contact</h2>
|
|
<form id="contact-form">
|
|
<label class="admin-password-field">
|
|
<span>Subject</span>
|
|
<input id="contact-subject" type="text" required />
|
|
</label>
|
|
<label class="admin-password-field">
|
|
<span>Message</span>
|
|
<textarea id="contact-message" required></textarea>
|
|
</label>
|
|
<button type="submit" class="btn">Send</button>
|
|
</form>
|
|
</section>
|
|
</section>
|
|
|
|
<section id="page-about" class="spa-page" hidden>
|
|
<section class="panel">
|
|
<h2>About FEDL</h2>
|
|
<p>FEDL is a Geometry Dash demon list hub. Browse ranked demons, submit runs, and track your progress.</p>
|
|
<p class="muted">Version 1.0</p>
|
|
</section>
|
|
</section>
|
|
</main>
|
|
<script src="onepage.js"></script>
|
|
</body>
|
|
</html> |