s8n
508fc42a1e
Adds web-overrides/popup-designs/ with the 4-up preview (preview.html) and three standalone candidate designs (a-strip.html / b-terminal.html / c-minimal.html) so we can revisit the alternates later without re-running the design generator. Owner picked A. Design A is wired into Jellyfin's stock .upNextDialog by overriding its CSS to a full-bleed bottom 26 % strip with white 'Start Now' CTA and a custom SVG countdown ring that mirrors .upNextDialog-countdownText. The DOM stays intact so Jellyfin's own countdown timer and click handlers on .btnStartNow / .btnHide keep working untouched. Shim is bracketed by NEXT-EP-POPUP-BEGIN / NEXT-EP-POPUP-END markers inside the existing ARRFLIX-SHIM block in web-overrides/index-dev.html. Only deployed to dev (dev.arrflix.s8n.ru) for spot-check; promote to prod once verified by editing prod's index.html the same way and redeploying via the nsenter trick. Adds bin/revert-next-ep-popup.sh — sed-deletes between markers, defaults to dev with --prod flag for prod target. Saves a timestamped backup and prints the redeploy command.
36 lines
2.4 KiB
HTML
36 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en"><head><meta charset="UTF-8"><title>ARRFLIX popup — C · Minimal Bar</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=JetBrains+Mono:wght@500&family=Bebas+Neue&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root{--arrflix-red:#E50914;--ink:#fff;--ink-dim:rgba(255,255,255,0.55);}
|
|
*{box-sizing:border-box;margin:0;padding:0;}
|
|
body{background:#000;color:#fff;font-family:'Geist',system-ui,sans-serif;height:100vh;overflow:hidden;position:relative;}
|
|
.bg{position:absolute;inset:0;background:radial-gradient(ellipse 60% 40% at 50% 50%,rgba(20,20,40,0.4) 0%,transparent 70%),black;}
|
|
.popup{position:absolute;bottom:0;left:0;right:0;}
|
|
.progress-line{height:3px;background:rgba(255,255,255,0.1);position:relative;}
|
|
.progress-line::after{content:'';position:absolute;top:0;left:0;height:100%;width:75%;background:var(--arrflix-red);}
|
|
.row{background:linear-gradient(to bottom,transparent,rgba(0,0,0,0.85) 30%);padding:24px 56px 22px;display:flex;align-items:center;gap:24px;}
|
|
.label{font-family:'Bebas Neue',sans-serif;font-size:13px;letter-spacing:0.32em;color:var(--arrflix-red);flex-shrink:0;}
|
|
.text{flex:1;font-size:14px;color:var(--ink-dim);letter-spacing:0.02em;}
|
|
.text strong{color:var(--ink);font-weight:500;margin-right:8px;}
|
|
.text .countdown{color:var(--arrflix-red);font-family:'JetBrains Mono',monospace;font-weight:500;margin-left:8px;}
|
|
.actions{display:flex;gap:16px;}
|
|
.btn{background:transparent;border:none;color:white;font-family:inherit;font-size:12px;letter-spacing:0.2em;text-transform:uppercase;font-weight:600;cursor:pointer;padding:8px 0;position:relative;}
|
|
.btn::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;opacity:0.3;}
|
|
.btn:hover::after{opacity:1;}
|
|
.btn-primary{color:var(--arrflix-red);}
|
|
</style></head><body>
|
|
<div class="bg"></div>
|
|
<div class="popup">
|
|
<div class="progress-line"></div>
|
|
<div class="row">
|
|
<div class="label">UP NEXT</div>
|
|
<div class="text"><strong>Star Wars: Maul · Shadow Lord</strong>S1·E3 — Chapter 3: The Crucible<span class="countdown">00:17</span></div>
|
|
<div class="actions">
|
|
<button class="btn btn-primary">Start now ▶</button>
|
|
<button class="btn">Hide</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body></html>
|