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.
40 lines
2.9 KiB
HTML
40 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en"><head><meta charset="UTF-8"><title>ARRFLIX popup — B · Terminal Card</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&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root{--arrflix-red:#E50914;--arrflix-red-dark:#B00710;--ink:#fff;--ink-dim:rgba(255,255,255,0.55);--ink-faint:rgba(255,255,255,0.3);}
|
|
*{box-sizing:border-box;margin:0;padding:0;}
|
|
body{background:#000;color:#fff;font-family:'JetBrains Mono',monospace;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:32px;right:32px;width:380px;background:rgba(5,5,5,0.92);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,0.12);border-left:2px solid var(--arrflix-red);padding:20px 22px;}
|
|
.top-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;}
|
|
.tag{color:var(--arrflix-red);font-weight:700;}
|
|
.countdown{color:var(--ink-dim);}
|
|
.countdown strong{color:var(--ink);font-weight:700;}
|
|
hr{border:none;border-top:1px dashed rgba(255,255,255,0.1);margin:12px 0;}
|
|
.show{font-family:'Geist',sans-serif;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:4px;}
|
|
.ep{font-family:'Geist',sans-serif;font-size:15px;font-weight:500;margin-bottom:4px;color:var(--ink);}
|
|
.ep-meta{font-size:11px;color:var(--ink-faint);letter-spacing:0.06em;margin-bottom:16px;}
|
|
.progress-bar{height:2px;background:rgba(255,255,255,0.08);margin-bottom:18px;position:relative;}
|
|
.progress-bar::after{content:'';position:absolute;top:0;left:0;height:100%;width:75%;background:var(--arrflix-red);box-shadow:0 0 8px rgba(229,9,20,0.6);}
|
|
.actions{display:flex;gap:8px;}
|
|
.btn{flex:1;background:transparent;border:1px solid rgba(255,255,255,0.18);color:white;padding:9px 14px;font-family:inherit;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;cursor:pointer;}
|
|
.btn-primary{background:var(--arrflix-red);border-color:var(--arrflix-red);}
|
|
.btn-primary:hover{background:var(--arrflix-red-dark);}
|
|
.btn:hover{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.3);}
|
|
</style></head><body>
|
|
<div class="bg"></div>
|
|
<div class="popup">
|
|
<div class="top-row"><span class="tag">▎ Up Next</span><span class="countdown"><strong>17</strong>s</span></div>
|
|
<hr>
|
|
<div class="show">Star Wars: Maul · Shadow Lord · S1E3</div>
|
|
<div class="ep">Chapter 3: The Crucible</div>
|
|
<div class="ep-meta">22m / ends 02:49</div>
|
|
<div class="progress-bar"></div>
|
|
<div class="actions">
|
|
<button class="btn btn-primary">▶ Start now</button>
|
|
<button class="btn">Hide</button>
|
|
</div>
|
|
</div>
|
|
</body></html>
|