From 463fa222fffa8aff45c6d6a73559d69eec3b841a Mon Sep 17 00:00:00 2001 From: mileswa1q22 Date: Tue, 31 Mar 2026 19:54:57 -0500 Subject: [PATCH] Redesign lists and roulette pages UI 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). --- lists.html | 63 +++++++++++++++++++++++++++++++++------------ roulette.html | 71 +++++++++++++++++++++++++++++---------------------- styles.css | 51 +++++++++++++++++++++++++++++------- 3 files changed, 130 insertions(+), 55 deletions(-) diff --git a/lists.html b/lists.html index 9852d27..7054c7c 100644 --- a/lists.html +++ b/lists.html @@ -18,27 +18,58 @@
-
-
-

FEDL List

- - -
+
+
+
+

FEDL Rankings

+

FEDL List

+

Browse the full ranking, search for a level by name, filter by placement range, and open linked videos directly from the table.

+
+
+ Live list + Updates pull from the current FEDL data source when available. +
+
-
- - - - - -
#TitleAction
-
+
+
+ + +
+
+ +
+
+
+

List Table

+

Current placements

+
+

Click Open on any row to watch the linked run.

+
+ +
+ + + + + +
#TitleAction
+
+
diff --git a/roulette.html b/roulette.html index b81f2aa..98db1d1 100644 --- a/roulette.html +++ b/roulette.html @@ -17,38 +17,49 @@
-
-

Rules

-

How Roulette Works

-
    -
  • Extreme Demon Roulette is a community challenge built around a roulette of hard demons from a chosen list.
    • -
  • You can use a main list, extended list, legacy list, or a custom list like this FEDL list.
    • -
  • A common format is to start at 1% and raise the goal by 1% for each new level until you fail or finish the challenge.
    • -
  • Some versions allow skips, rerolls, or custom limits, depending on the rules you want to use.
    • -
  • This page shows the demon name, rank, and level ID for the selected result.
    • -
  • Percent targets are stored in level-ids.txt using the format title|levelId|percent.
    • -
  • If a level ID is missing in that file, this page will try to look it up through the Geometry Dash community API automatically.
    • -
-
- -
-
-
-

Random Challenge

-

Demon Roulette

-

Spin the FEDL list to get a random demon for your roulette run.

+
+
+
+
+

Random Challenge

+

Demon Roulette

+

Spin the FEDL list to get a random demon for your next roulette run, practice grind, or bad decision.

+
+
- -
-
-

Press spin to choose a demon.

-

No demon selected

-

Rank: -

-

Level ID: -

-

Level IDs come from your local file first, then API lookup if needed.

- -
+
+

Press spin to choose a demon.

+

No demon selected

+

Rank: -

+

Level ID: -

+

Level IDs come from your local file first, then API lookup if needed.

+ +
+
+ +
diff --git a/styles.css b/styles.css index 18d8705..71b217a 100644 --- a/styles.css +++ b/styles.css @@ -13,11 +13,12 @@ h1,h2,h3,h4{line-height:1.15} .sidebar h2{margin:0 0 8px 0;font-size:0.95rem} .sidebar ul{list-style:none;padding:0;margin:0} .sidebar li{margin:6px 0} +.sidebar-kicker{margin:0 0 8px 0;text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;font-weight:800;color:var(--accent)} .level-link{display:block;width:100%;text-align:left;padding:8px;border-radius:6px;border:0;background:transparent;color:var(--muted);cursor:pointer;font-weight:600} .level-link.active{background:rgba(92,197,255,0.06);color:var(--accent)} .content{flex:1} .panel{background:var(--panel);padding:14px;border-radius:10px;margin-bottom:12px;box-shadow:0 3px 12px rgba(2,6,23,0.6)} -.search-row{display:flex;gap:8px;align-items:center;margin-bottom:12px} +.search-row{display:flex;gap:14px;align-items:end;margin-bottom:0} .search-row input[type=text]{flex:1;padding:10px 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--text)} .search-row select{padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--text)} .table-wrap{overflow:auto;border-radius:8px} @@ -71,6 +72,30 @@ table.levels-table tr:hover td{background:rgba(255,255,255,0.01)} .spotlight-card{padding:18px;border-radius:18px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08)} .spotlight-card h3{margin:0 0 10px 0;font-size:1.08rem} .spotlight-card p{margin:0;color:#dce8f5;line-height:1.6} +.list-page-shell{display:flex;flex-direction:column;gap:16px} +.list-sidebar-panel{padding:18px 16px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.06)} +.list-sidebar-panel h2{margin:0 0 10px 0;font-size:1.2rem} +.list-sidebar-panel .muted{margin:0 0 16px 0;line-height:1.55} +.list-hero-panel{display:flex;align-items:end;justify-content:space-between;gap:18px;padding:28px;border-radius:28px;background:linear-gradient(135deg,rgba(92,197,255,0.14),rgba(7,19,38,0.95));border:1px solid rgba(92,197,255,0.16)} +.list-hero-copy h2{margin:0 0 10px 0;font-size:clamp(2rem,4vw,3rem)} +.list-hero-text{max-width:60ch;line-height:1.7} +.list-hero-badge{max-width:230px;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08)} +.list-hero-badge strong{display:block;margin-bottom:8px;font-size:1rem} +.list-hero-badge span{display:block;color:#d7e5f4;line-height:1.55;font-size:.92rem} +.list-controls-panel{padding:20px 22px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.03));border:1px solid rgba(255,255,255,0.06)} +.control-block{display:flex;flex:1;flex-direction:column;gap:8px;font-weight:700;color:#f2f7fd} +.control-block span{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} +.control-block input,.control-block select{width:100%;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.03);color:var(--text)} +.control-select{max-width:220px} +.list-table-panel{padding:22px 22px 16px;border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.06)} +.table-header{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:16px} +.table-header h3{margin:0;font-size:1.45rem} +.table-hint{max-width:320px;line-height:1.6;text-align:right} +table.levels-table{border-radius:18px;overflow:hidden} +table.levels-table th{background:rgba(255,255,255,0.03)} +table.levels-table td{font-size:.98rem} +table.levels-table td:last-child{text-align:right} +table.levels-table .btn{padding:9px 14px} .wip-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:22px;align-items:stretch;min-height:calc(100vh - 132px)} .wip-copy,.wip-stage{position:relative} .wip-copy{display:flex;flex-direction:column;justify-content:center;padding:32px;border-radius:26px;background:linear-gradient(145deg,rgba(255,184,77,0.1),rgba(7,19,38,0.96) 40%),radial-gradient(circle at top left,rgba(255,255,255,0.08),transparent 36%);border:1px solid rgba(255,184,77,0.16);overflow:hidden} @@ -117,19 +142,27 @@ table.levels-table tr:hover td{background:rgba(255,255,255,0.01)} /* small helpers reused */ .small{font-size:0.9rem} +.roulette-shell{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:18px;align-items:start} .roulette-rules{margin-bottom:18px} -.roulette-panel{margin-top:18px;padding:24px 26px;background:linear-gradient(135deg,rgba(92,197,255,0.12),rgba(7,19,38,0.96));border:1px solid rgba(92,197,255,0.16)} +.roulette-panel{margin-top:0;padding:28px;border-radius:28px;background:linear-gradient(135deg,rgba(92,197,255,0.14),rgba(7,19,38,0.96));border:1px solid rgba(92,197,255,0.18)} .roulette-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px} .roulette-kicker{margin:0 0 8px 0;text-transform:uppercase;letter-spacing:0.14em;font-size:0.72rem;font-weight:700;color:var(--accent)} -.roulette-head h2{margin:0 0 8px 0;font-size:1.9rem} -.roulette-btn{min-width:110px;font-weight:700} -.roulette-card{padding:22px;border-radius:14px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.05)} +.roulette-head h2{margin:0 0 8px 0;font-size:clamp(2rem,4vw,3rem)} +.roulette-intro{max-width:50ch;line-height:1.7} +.roulette-btn{min-width:120px;font-weight:700} +.roulette-card{padding:24px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,0.08),rgba(255,255,255,0.03));border:1px solid rgba(255,255,255,0.08);box-shadow:0 20px 40px rgba(2,6,23,0.28)} .roulette-status{margin:0 0 8px 0} -.roulette-card h3{margin:0 0 8px 0;font-size:1.5rem} -.roulette-rank{margin:0 0 16px 0;font-size:1rem;color:#dce8f5} +.roulette-card h3{margin:0 0 10px 0;font-size:clamp(1.6rem,3vw,2.3rem)} +.roulette-rank{margin:0 0 16px 0;font-size:1.02rem;color:#dce8f5} .roulette-meta{margin:0 0 10px 0;font-size:1rem;color:#dce8f5} .roulette-note{margin:10px 0 16px 0} .roulette-open{color:#042} +.roulette-rules-card{padding:24px;border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.08)} +.roulette-rules-card h2{margin:0 0 16px 0;font-size:1.8rem} +.roulette-rule-list{display:grid;gap:14px} +.roulette-rule-list article{padding:16px;border-radius:18px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06)} +.roulette-rule-list strong{display:block;margin-bottom:8px;font-size:1rem;color:#fff} +.roulette-rule-list p{margin:0;color:#dce8f5;line-height:1.6} .discord-panel{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:18px;padding:26px 28px;background:linear-gradient(135deg,rgba(88,101,242,0.18),rgba(7,19,38,0.95));border:1px solid rgba(88,101,242,0.22)} .discord-copy{flex:1} .discord-badge{display:flex;align-items:center;gap:16px;margin-bottom:14px} @@ -181,7 +214,7 @@ linear-gradient(180deg,rgba(8,18,32,0.98),rgba(7,19,38,0.94))} .status-card{display:block;padding:18px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.06);text-decoration:none;color:var(--text)} .status-card strong{display:block;margin-bottom:6px;font-size:1.65rem} .status-card span{display:block;color:var(--muted);line-height:1.5} -@media(max-width:900px){.layout{flex-direction:column}.sidebar{width:100%}.video-modal iframe{height:320px}.home-hero{grid-template-columns:1fr;min-height:auto}.home-copy,.hero-stage{padding:24px 22px}.hero-stats,.home-section-grid,.spotlight-grid{grid-template-columns:1fr}.spotlight-panel{grid-template-columns:1fr;padding:24px 22px}.roulette-head{flex-direction:column;align-items:flex-start}.discord-panel{flex-direction:column;align-items:flex-start;padding:22px 20px}.discord-panel h2{font-size:1.55rem}.discord-actions{width:100%;justify-content:flex-start}.rules-view header{padding:16px 18px}.rules-view header h1{font-size:1.55rem}.rules-page{padding:24px 20px}.rules-page h2{font-size:1.65rem}} +@media(max-width:900px){.layout{flex-direction:column}.sidebar{width:100%}.sidebar .panel{height:auto}.video-modal iframe{height:320px}.home-hero{grid-template-columns:1fr;min-height:auto}.home-copy,.hero-stage{padding:24px 22px}.hero-stats,.home-section-grid,.spotlight-grid{grid-template-columns:1fr}.spotlight-panel{grid-template-columns:1fr;padding:24px 22px}.list-hero-panel,.table-header,.search-row,.roulette-head{flex-direction:column;align-items:flex-start}.control-select{max-width:none;width:100%}.roulette-shell{grid-template-columns:1fr}.discord-panel{flex-direction:column;align-items:flex-start;padding:22px 20px}.discord-panel h2{font-size:1.55rem}.discord-actions{width:100%;justify-content:flex-start}.rules-view header{padding:16px 18px}.rules-view header h1{font-size:1.55rem}.rules-page{padding:24px 20px}.rules-page h2{font-size:1.65rem}} @media(max-width:900px){.error-grid{grid-template-columns:1fr}.error-copy,.error-side{padding:24px 20px}.error-copy h2{font-size:2.5rem}} @media(max-width:900px){.admin-toolbar{flex-direction:column;align-items:stretch}.admin-actions{flex-direction:column;align-items:stretch}.admin-actions input[type=text]{min-width:0;width:100%}} -@media(max-width:640px){header{flex-direction:column;align-items:flex-start;gap:12px}nav{display:flex;flex-wrap:wrap;gap:10px}nav a{margin-left:0}.home-copy h2{max-width:none}.hero-actions{flex-direction:column;align-items:stretch}.hero-actions .btn{width:100%;text-align:center}} +@media(max-width:640px){header{flex-direction:column;align-items:flex-start;gap:12px}nav{display:flex;flex-wrap:wrap;gap:10px}nav a{margin-left:0}.home-copy h2{max-width:none}.hero-actions{flex-direction:column;align-items:stretch}.hero-actions .btn,.roulette-btn{width:100%;text-align:center}.list-hero-panel,.list-controls-panel,.list-table-panel,.roulette-panel,.roulette-rules-card{padding:22px 18px}.table-hint{text-align:left}}