storebound/media/teaser/index.html

285 lines
20 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>storebound teaser</title>
<style>
:root {
--bg: #070b16; --surface: #0f1729; --surface-2: #151f36; --line: #1f2a40; --line-2: #33415a;
--ink: #f4f6fb; --ink-2: #cdd5e3; --muted: #93a0b8; --dim: #64718a;
--accent: #8b93ff; --accent-2: #5b5cf0; --accent-ink: #c7caff;
--red: #ff6b6f; --red-2: #e5484d; --red-bg: rgba(229,72,77,.14);
--green: #3ddc84; --green-2: #22c55e; --green-bg: rgba(34,197,94,.14);
--cyan: #67d4ff; --yellow: #ffd166; --yellow-bg: rgba(255,209,102,.13);
--display: "SF Pro Display", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--text: "SF Pro Text", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #000; overflow: hidden; }
#stage { position: relative; overflow: hidden; background: var(--bg); color: var(--ink); font-family: var(--text);
-webkit-font-smoothing: antialiased; }
#stage > * { position: absolute; }
.scene { inset: 0; opacity: 0; visibility: hidden; overflow: hidden; }
.scene > .cam { position: absolute; inset: 0; transform-origin: 50% 60%; }
.abs { position: absolute; }
/* icons: Phosphor files in icons/ (tools/site-icons.ts), shown as masks in the element's colour */
.pi { display: inline-block; width: 1em; height: 1em; background: currentColor; vertical-align: -0.14em; flex: none;
-webkit-mask: var(--pi) center / contain no-repeat; mask: var(--pi) center / contain no-repeat; }
.i-tray { --pi: url(icons/tray-bold.svg); } .i-x { --pi: url(icons/x-circle-fill.svg); }
.i-ok { --pi: url(icons/check-circle-fill.svg); } .i-check { --pi: url(icons/check-bold.svg); }
.i-stop { --pi: url(icons/warning-octagon-fill.svg); } .i-send { --pi: url(icons/paper-plane-tilt-fill.svg); }
.i-term { --pi: url(icons/terminal-window-bold.svg); } .i-cursor { --pi: url(icons/navigation-arrow-fill.svg); }
/* ---------- background: a calm, slowly drifting glow ---------- */
#bg { inset: 0; }
#bg .glow { position: absolute; border-radius: 50%; }
#bg .g1 { width: 1400px; height: 1400px; background: radial-gradient(circle, rgba(91,92,240,.30), rgba(91,92,240,0) 62%); }
#bg .g2 { width: 1100px; height: 1100px; background: radial-gradient(circle, rgba(103,212,255,.11), rgba(103,212,255,0) 62%); }
#bg .grid { position: absolute; inset: -96px; opacity: .45;
background-image: linear-gradient(rgba(148,163,184,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.05) 1px, transparent 1px);
background-size: 96px 96px; }
#vig { inset: 0; pointer-events: none; z-index: 40; background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 60%, rgba(0,0,0,.45) 100%); }
/* ---------- caption: top, big, clean ---------- */
#capband { left: 0; right: 0; top: 0; height: 250px; z-index: 45; pointer-events: none;
background: linear-gradient(rgba(7,11,22,.9) 0%, rgba(7,11,22,.7) 60%, rgba(7,11,22,0) 100%); }
#cap { z-index: 50; left: 100px; right: 100px; top: 58px; text-align: center; font-family: var(--display); font-weight: 750;
font-size: 72px; letter-spacing: -0.025em; line-height: 1.12; color: #fff; text-shadow: 0 4px 24px rgba(0,0,0,.5); }
#cap .line { display: block; white-space: nowrap; }
#cap .hl { color: var(--accent); } #cap.red .hl { color: var(--red); } #cap.green .hl { color: var(--green); }
/* ---------- shared: cards, terminal, pills ---------- */
.card { position: absolute; background: var(--surface); border: 2px solid var(--line); border-radius: 24px; overflow: hidden;
box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.card .ch { display: flex; align-items: center; gap: 14px; padding: 18px 26px; border-bottom: 2px solid var(--line);
font: 700 26px/1.2 var(--mono); color: #fff; background: rgba(255,255,255,.02); }
.card .ch .dots { display: flex; gap: 9px; margin-right: 8px; } .card .ch .dots i { width: 14px; height: 14px; border-radius: 50%; background: #3a4255; display: block; }
.card .ch .sub { margin-left: auto; font: 600 22px/1 var(--text); color: var(--muted); }
.term { font-family: var(--mono); color: var(--ink-2); }
.term .ln { display: block; white-space: pre; overflow: hidden; text-overflow: ellipsis; opacity: 0; }
.ps { color: var(--green); font-weight: 700; } .cmd { color: #fff; font-weight: 700; }
.caret { display: inline-block; width: .55em; height: 1.05em; background: #e5e7eb; vertical-align: -0.18em; margin-left: 3px; }
.tag { color: var(--dim); } .okk { color: var(--green); font-weight: 800; } .bad { color: var(--red); font-weight: 800; }
.num { color: #fff; font-weight: 800; } .loc { color: var(--cyan); } .warnk { color: var(--yellow); font-weight: 800; }
.pill { position: absolute; display: inline-flex; align-items: center; gap: 12px; border-radius: 99px; background: rgba(13,20,38,.94);
border: 2px solid var(--line-2); box-shadow: 0 20px 50px rgba(0,0,0,.45); font: 800 40px/1 var(--display); color: #fff;
padding: 18px 34px; letter-spacing: -0.015em; white-space: nowrap; opacity: 0; }
.pill b { color: var(--accent); font-weight: 900; } .pill.green b { color: var(--green); }
/* ---------- 1 hook ---------- */
#appcard { left: 230px; top: 330px; width: 520px; text-align: center; }
#appcard img { width: 300px; height: 300px; border-radius: 66px; display: block; margin: 0 auto;
box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 0 2px rgba(255,255,255,.08); }
#appcard .nm { margin-top: 30px; font: 800 46px/1 var(--display); letter-spacing: -0.02em; }
#appcard .done { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; font: 800 30px/1 var(--display); color: #052e16;
background: var(--green); border-radius: 99px; padding: 12px 26px; }
#todo { left: 870px; top: 320px; width: 820px; }
#todo .ch { font-family: var(--display); font-size: 30px; }
#todo .row { display: flex; align-items: center; gap: 24px; padding: 20px 30px; border-bottom: 1px solid var(--line); font: 700 40px/1.1 var(--display);
color: var(--ink); opacity: 0; letter-spacing: -0.01em; }
#todo .row:last-child { border-bottom: 0; }
#todo .box { width: 38px; height: 38px; border-radius: 10px; border: 3px solid var(--line-2); flex: none; }
#mail { left: 230px; width: 1460px; top: 806px; height: 156px; background: #fff; color: #16181d; border-radius: 22px; opacity: 0;
display: grid; grid-template-columns: 50px 1fr auto; column-gap: 8px; padding: 24px 40px 24px 26px; box-shadow: 0 30px 80px rgba(0,0,0,.55); }
#mail .dot { width: 18px; height: 18px; border-radius: 50%; background: #2563eb; margin: 12px 0 0 14px; }
#mail .from { font: 800 32px/1.2 var(--text); color: #101216; }
#mail .date { font: 500 26px/1.3 var(--text); color: #6b7280; text-align: right; }
#mail .subj { grid-column: 2 / 4; font: 700 30px/1.35 var(--text); color: #1d5fe0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mail .prev { grid-column: 2 / 4; font: 400 26px/1.35 var(--text); color: #5d6575; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mail .prev b { color: #b91c1c; font-weight: 800; }
/* ---------- 2 init ---------- */
#folder { left: 150px; top: 300px; width: 540px; height: 680px; }
#folder .ch { font-family: var(--display); }
#folder .empty { position: absolute; left: 0; right: 0; top: 300px; text-align: center; font: 600 30px/1 var(--text); color: var(--dim); }
#folder .files { padding: 18px 0; }
#folder .f { display: flex; align-items: center; gap: 16px; padding: 9px 30px; font: 600 27px/1.2 var(--mono); color: var(--ink); opacity: 0; }
#folder .f .ic { width: 26px; height: 32px; border-radius: 5px; background: var(--surface-2); border: 2px solid var(--line-2); flex: none; }
#folder .f .d { color: var(--dim); }
#initterm { left: 750px; top: 300px; width: 1030px; height: 680px; }
#initterm .body { padding: 22px 30px; font-size: 27px; line-height: 1.55; }
/* ---------- 3 plan ---------- */
#prompt { left: 210px; top: 270px; width: 1500px; padding: 24px 32px; display: flex; align-items: center; gap: 22px;
background: var(--surface-2); border: 2px solid var(--accent-2); border-radius: 22px; box-shadow: 0 20px 60px rgba(0,0,0,.4), 0 0 0 6px rgba(91,92,240,.12); opacity: 0; }
#prompt .who { font: 800 22px/1 var(--text); color: var(--accent-ink); text-transform: uppercase; letter-spacing: .08em; flex: none; }
#prompt .txt { font: 700 40px/1.2 var(--display); color: #fff; letter-spacing: -0.01em; }
#planterm { left: 210px; top: 392px; width: 1500px; opacity: 0; }
#planterm .body { padding: 16px 30px 20px; font-size: 24px; line-height: 1.5; }
#plan-pill { left: 50%; top: 940px; }
/* ---------- 4 store ---------- */
#copy { left: 110px; top: 300px; width: 640px; }
#copy .row { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 18px; padding: 22px 28px; border-bottom: 1px solid var(--line); opacity: 0; }
#copy .row:last-child { border-bottom: 0; }
#copy .lg { font: 800 26px/1 var(--mono); color: var(--accent-ink); background: rgba(91,92,240,.18); border-radius: 10px; padding: 10px 0; text-align: center; }
#copy .tt { font: 800 33px/1.2 var(--display); white-space: nowrap; color: #fff; letter-spacing: -0.01em; }
#copy .tt.rtl { direction: rtl; text-align: right; }
#shots { left: 800px; top: 300px; width: 1020px; height: 700px; }
#shots .lab { position: absolute; font: 700 17px/1.15 var(--text); color: var(--muted); text-align: center; white-space: pre; opacity: 0; }
#shots .lang { position: absolute; font: 800 20px/1 var(--mono); color: var(--accent-ink); opacity: 0; }
#shots .tile { position: absolute; border-radius: 8px; background-size: cover; background-position: center; opacity: 0;
box-shadow: 0 10px 26px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08); }
#store-pill { left: 430px; top: 770px; }
#shotcmd { left: 430px; top: 880px; transform: translateX(-50%); font: 700 26px/1 var(--mono); color: var(--ink-2); opacity: 0; white-space: nowrap; }
/* ---------- 5 products ---------- */
#prodterm { left: 160px; top: 300px; width: 1600px; }
#prodterm .body { padding: 20px 32px; font-size: 26px; line-height: 1.62; }
#prod-pill { left: 50%; top: 900px; }
/* ---------- 6 forms ---------- */
#prop { left: 110px; top: 300px; width: 1010px; }
#prop .ln { display: block; font: 600 25px/1.45 var(--mono); padding: 8px 28px; opacity: 0; white-space: nowrap; position: relative; }
#prop .ln .v1 { display: block; white-space: pre; } #prop .ln .v1 .loc { float: right; }
#prop .ln .v2 { display: block; padding-left: 11ch; color: var(--muted); }
#prop .ln .k { color: var(--green); font-weight: 800; } #prop .ln .w { color: #fff; font-weight: 800; }
#prop .ln.ask { display: block; white-space: normal; margin: 10px 16px 14px; border-radius: 14px; padding: 14px 18px; }
#prop .ln.ask .k { color: var(--yellow); }
#prop .ln.ask .glow { position: absolute; inset: 0; border-radius: 14px; background: var(--yellow-bg); border: 3px solid var(--yellow); opacity: 0; }
#prop .ln.ask > span:not(.glow) { position: relative; }
#prop .askn { display: block; padding: 0 28px 22px; font: 700 26px/1.3 var(--display); color: var(--yellow); opacity: 0; }
#form { left: 1170px; top: 300px; width: 640px; }
#form .ch { font-family: var(--display); }
#form .row { display: flex; align-items: center; gap: 20px; padding: 0 28px; height: 64px; border-bottom: 1px solid var(--line); font: 700 30px/1 var(--text); color: var(--ink-2); }
#form .row:last-child { border-bottom: 0; }
#form .box { width: 38px; height: 38px; border-radius: 10px; border: 3px solid var(--line-2); position: relative; flex: none; }
#form .box .pi { position: absolute; left: 4px; top: 4px; width: 24px; height: 24px; color: #04150b; }
#form .box .fill { position: absolute; inset: -3px; border-radius: 10px; background: var(--green); opacity: 0; }
#form .row .tg { margin-left: auto; font: 700 21px/1 var(--mono); color: var(--green); opacity: 0; }
#forms-pill { left: 1490px; top: 900px; }
/* ---------- 7 consoles ---------- */
#cpterm { left: 160px; top: 290px; width: 1600px; }
#cpterm .body { padding: 18px 30px 22px; font-size: 24px; line-height: 1.5; }
#cpterm .ln.fin { position: relative; display: inline-block; margin: 6px 0 0 -14px; padding: 6px 14px; border-radius: 12px; }
#cpterm .ln.fin .glow { position: absolute; inset: 0; border-radius: 12px; background: var(--yellow-bg); border: 3px solid var(--yellow); opacity: 0; }
#cpterm .ln.fin > span:not(.glow) { position: relative; }
#cpterm .ln.fin .k { color: var(--yellow); font-weight: 800; } #cpterm .ln.fin .w { color: #fff; font-weight: 800; }
#cp-pill { left: 50%; top: 930px; }
.dhost { position: absolute; inset: 0; }
/* ---------- 8 rejections ---------- */
#scanterm { left: 160px; top: 290px; width: 1600px; }
#scanterm .body { padding: 18px 30px 24px; font-size: 26px; line-height: 1.45; }
.fd { position: relative; margin: 10px 0; padding: 14px 22px 16px; border-radius: 16px; opacity: 0; }
.fd .tint { position: absolute; inset: 0; border-radius: 16px; }
.fd .tint.b { background: var(--red-bg); border: 2px solid rgba(255,90,95,.4); }
.fd .tint.g { background: var(--green-bg); border: 2px solid rgba(61,220,132,.55); opacity: 0; }
.fd > *:not(.tint) { position: relative; }
.fd .l1 { display: flex; align-items: center; gap: 14px; white-space: nowrap; overflow: hidden; }
.fd .sev { display: inline-block; font-weight: 800; color: #fff; background: var(--red-2); border-radius: 8px; padding: 1px 12px; }
.fd .sev.high { background: #c2410c; }
.fd .gl { color: #fff; font-weight: 800; } .fd .ttl { color: #ffd6d7; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.fd .why { display: flex; align-items: center; gap: 12px; margin-top: 8px; font: 700 31px/1.2 var(--display); color: #fff; letter-spacing: -0.005em; }
.fd .why .pi { color: var(--red); font-size: 30px; }
.fd .why .at { margin-left: auto; font: 600 24px/1 var(--mono); }
.fd .why .fixed { margin-left: 18px; }
.fd .fixed { font: 800 22px/1 var(--mono); color: #052e16; background: var(--green); border-radius: 8px; padding: 6px 12px; opacity: 0; }
#rescan .ln { display: block; opacity: 0; }
/* ---------- 7, 9-13 desktop window ---------- */
.win { position: absolute; border-radius: 20px; overflow: hidden; background: #0b0f19; border: 1.5px solid rgba(255,255,255,.12);
box-shadow: 0 50px 120px rgba(0,0,0,.65), 0 0 0 1px rgba(0,0,0,.6); }
.win .bar { position: absolute; left: 0; right: 0; top: 0; height: 40px; background: #161b27; border-bottom: 1px solid #222a3a;
display: flex; align-items: center; gap: 10px; padding: 0 16px; z-index: 2; }
.win .bar i { width: 13px; height: 13px; border-radius: 50%; background: #3a4255; display: block; }
.win .bar .tt { position: absolute; left: 0; right: 0; text-align: center; font: 600 17px/1 var(--text); color: #8a93a6; }
.win .view { position: absolute; left: 0; right: 0; top: 40px; bottom: 0; overflow: hidden; }
.win .view .cam2 { position: absolute; left: 0; top: 0; width: 1280px; height: 800px; transform-origin: 0 0; }
.win .view .grp { position: absolute; left: 0; top: 0; width: 1280px; height: 800px; }
.win .view img { position: absolute; left: 0; top: 0; display: block; width: 1280px; height: 800px; }
/* the pointer (Phosphor navigation-arrow, fill): a chart's hover sweep, or resting on a button (it never clicks) */
.dcur { position: absolute; z-index: 6; width: 52px; height: 52px; left: 0; top: 0; opacity: 0;
filter: drop-shadow(0 0 1.5px #000) drop-shadow(0 0 1.5px #000) drop-shadow(0 8px 12px rgba(0,0,0,.55)); }
.dcur .pi { position: absolute; inset: 0; width: 100%; height: 100%; color: #fff; }
.callout { position: absolute; z-index: 5; font: 800 32px/1 var(--display); color: #fff; background: var(--accent-2);
padding: 16px 26px; border-radius: 16px; white-space: nowrap; box-shadow: 0 20px 50px rgba(0,0,0,.55), 0 0 0 3px rgba(255,255,255,.12);
transform-origin: 50% 100%; opacity: 0; }
.callout.green { background: #15803d; }
.ring { position: absolute; z-index: 4; border: 4px solid var(--accent); border-radius: 14px; opacity: 0;
box-shadow: 0 0 0 6px rgba(139,147,255,.22), 0 0 40px rgba(139,147,255,.45); }
.ring.green { border-color: var(--green); box-shadow: 0 0 0 6px rgba(61,220,132,.22), 0 0 40px rgba(61,220,132,.45); }
/* ---------- 13 submit: the end card ---------- */
#brand { left: 0; right: 0; top: 330px; text-align: center; }
#brand > * { opacity: 0; }
#brand .mark { width: 190px; height: 190px; display: block; margin: 0 auto; filter: drop-shadow(0 30px 70px rgba(91,92,240,.6)); }
#brand .word { margin-top: 30px; font: 900 118px/1 var(--display); letter-spacing: -0.05em; color: #fff; }
#brand .url { margin-top: 26px; font: 800 56px/1 var(--display); color: var(--accent); letter-spacing: -0.02em; }
#brand .plat { margin-top: 26px; font: 600 34px/1.3 var(--text); color: var(--ink-2); }
</style>
</head>
<body>
<div id="stage">
<div id="bg"><div class="grid"></div><div class="glow g1"></div><div class="glow g2"></div></div>
<div class="scene" id="s-hook"><div class="cam">
<div id="appcard" class="abs"><img id="appicon" src="examples/demo-game/store/icon/icon.png" alt=""><div class="nm"></div><span class="done"><span class="pi i-check"></span>Done</span></div>
<div class="card" id="todo"><div class="ch">Still to do on the stores</div><div class="rows"></div></div>
<div id="mail" class="abs"><span class="dot"></span><span class="from"></span><span class="date"></span><span class="subj"></span><span class="prev"></span></div>
</div></div>
<div class="scene" id="s-init"><div class="cam">
<div class="card" id="folder"><div class="ch"><span class="dots"><i></i><i></i><i></i></span><span class="fname"></span></div><div class="empty">empty folder</div><div class="files"></div></div>
<div class="card term" id="initterm"><div class="ch"><span class="dots"><i></i><i></i><i></i></span>Terminal</div><div class="body"></div></div>
</div></div>
<div class="scene" id="s-plan"><div class="cam">
<div id="prompt" class="abs"><span class="who">You, to your agent</span><span class="txt"></span></div>
<div class="card term" id="planterm"><div class="ch"><span class="dots"><i></i><i></i><i></i></span>Terminal<span class="sub">read-only</span></div><div class="body"></div></div>
<div class="pill" id="plan-pill"></div>
</div></div>
<div class="scene" id="s-store"><div class="cam">
<div class="card" id="copy"><div class="ch"><span class="dots"><i></i><i></i><i></i></span><span class="fname"></span></div><div class="rows"></div></div>
<div id="shots" class="abs"></div>
<div class="pill" id="store-pill"></div>
<div id="shotcmd" class="abs"><span class="ps">$</span> <span class="cmd"></span></div>
</div></div>
<div class="scene" id="s-products"><div class="cam">
<div class="card term" id="prodterm"><div class="ch"><span class="dots"><i></i><i></i><i></i></span>Terminal<span class="sub">App Store Connect · Google Play</span></div><div class="body"></div></div>
<div class="pill green" id="prod-pill"></div>
</div></div>
<div class="scene" id="s-forms"><div class="cam">
<div class="card" id="prop"><div class="ch"><span class="dots"><i></i><i></i><i></i></span>storebound scan<span class="sub">declarations proposal</span></div><div class="body"></div></div>
<div class="card" id="form"><div class="ch">Data safety<span class="sub">Google Play</span></div><div class="body"></div></div>
<div class="pill green" id="forms-pill"></div>
</div></div>
<div class="scene" id="s-consoles"><div class="cam">
<div class="card term" id="cpterm"><div class="ch"><span class="dots"><i></i><i></i><i></i></span>Terminal<span class="sub">offline · no store access</span></div><div class="body"></div></div>
<div class="pill" id="cp-pill"></div>
<div class="dhost"></div>
</div></div>
<div class="scene" id="s-rejections"><div class="cam">
<div class="card term" id="scanterm"><div class="ch"><span class="dots"><i></i><i></i><i></i></span>Terminal</div><div class="body"></div></div>
</div></div>
<div class="scene" id="s-portfolio"><div class="cam"></div></div>
<div class="scene" id="s-charts"><div class="cam"></div></div>
<div class="scene" id="s-catalog"><div class="cam"></div></div>
<div class="scene" id="s-resubmit"><div class="cam"></div></div>
<div class="scene" id="s-submit"><div class="cam">
<div id="brand" class="abs">
<img class="mark" src="brand/logo-mark-256.png" alt="">
<div class="word">storebound</div>
<div class="url"></div>
<div class="plat"></div>
</div>
</div></div>
<div id="capband"></div>
<div id="cap"></div>
<div id="vig"></div>
</div>
<script type="module" src="teaser.js"></script>
</body>
</html>