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.
42 lines
2.9 KiB
HTML
42 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en"><head><meta charset="UTF-8"><title>ARRFLIX popup — A · Cinematic Strip</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&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root { --arrflix-red:#E50914; --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:'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;height:26%;background:linear-gradient(to top,rgba(0,0,0,0.95) 50%,rgba(0,0,0,0.7) 80%,transparent);padding:28px 56px 32px;display:flex;align-items:center;gap:36px;}
|
|
.ring{position:relative;width:88px;height:88px;flex-shrink:0;}
|
|
.ring svg{transform:rotate(-90deg);}
|
|
.ring circle{fill:none;stroke-width:3;}
|
|
.ring .track{stroke:rgba(255,255,255,0.1);}
|
|
.ring .progress{stroke:var(--arrflix-red);stroke-dasharray:264;stroke-dashoffset:67;stroke-linecap:round;filter:drop-shadow(0 0 8px rgba(229,9,20,0.5));}
|
|
.ring .num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:28px;font-weight:500;}
|
|
.info{flex:1;min-width:0;}
|
|
.label{font-size:10px;letter-spacing:0.32em;text-transform:uppercase;color:var(--arrflix-red);margin-bottom:8px;font-weight:600;}
|
|
.title{font-size:28px;font-weight:600;letter-spacing:-0.02em;margin-bottom:6px;line-height:1.1;}
|
|
.episode-title{font-size:16px;color:var(--ink-dim);margin-bottom:4px;}
|
|
.meta{font-size:12px;color:var(--ink-faint);letter-spacing:0.04em;}
|
|
.actions{display:flex;gap:10px;flex-shrink:0;}
|
|
.btn{border:none;background:white;color:black;padding:14px 28px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:10px;}
|
|
.btn:hover{background:rgba(255,255,255,0.85);}
|
|
.btn-secondary{background:rgba(255,255,255,0.08);color:white;backdrop-filter:blur(10px);}
|
|
.btn-secondary:hover{background:rgba(255,255,255,0.16);}
|
|
</style></head><body>
|
|
<div class="bg"></div>
|
|
<div class="popup">
|
|
<div class="ring"><svg width="88" height="88" viewBox="0 0 88 88"><circle class="track" cx="44" cy="44" r="42"/><circle class="progress" cx="44" cy="44" r="42"/></svg><div class="num">17</div></div>
|
|
<div class="info">
|
|
<div class="label">Up Next</div>
|
|
<div class="title">Star Wars: Maul · Shadow Lord</div>
|
|
<div class="episode-title">S1·E3 — Chapter 3: The Crucible</div>
|
|
<div class="meta">22 min · Ends at 2:49 AM</div>
|
|
</div>
|
|
<div class="actions">
|
|
<button class="btn">▶ Start Now</button>
|
|
<button class="btn btn-secondary">Hide</button>
|
|
</div>
|
|
</div>
|
|
</body></html>
|