229 lines
17 KiB
HTML
229 lines
17 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% 55%; }
|
|
.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-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; the veil darkens the picture (rejection, request) ---------- */
|
|
#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; }
|
|
#veil { inset: 0; pointer-events: none; opacity: 0; background: #020308; }
|
|
#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%); }
|
|
|
|
/* ---------- captions: the story line at the top (big, calm); the montage word at the bottom left edge ---------- */
|
|
#capband { left: 0; right: 0; top: 0; height: 260px; z-index: 45; pointer-events: none; opacity: 0;
|
|
background: linear-gradient(rgba(7,11,22,.88) 0%, rgba(7,11,22,.65) 60%, rgba(7,11,22,0) 100%); }
|
|
#cap { z-index: 50; left: 80px; right: 80px; top: 64px; text-align: center; font-family: var(--display); font-weight: 750;
|
|
font-size: 88px; letter-spacing: -0.03em; line-height: 1.1; color: #fff; white-space: nowrap; text-shadow: 0 4px 30px rgba(0,0,0,.55); opacity: 0; }
|
|
#cap .hl { color: var(--accent); } #cap.red .hl { color: var(--red); } #cap.green .hl { color: var(--green); }
|
|
#edgeband { left: 0; right: 0; bottom: 0; height: 300px; z-index: 45; pointer-events: none; opacity: 0;
|
|
background: linear-gradient(rgba(7,11,22,0) 0%, rgba(7,11,22,.75) 55%, rgba(7,11,22,.92) 100%); }
|
|
#edge { z-index: 50; left: 96px; bottom: 70px; font-family: var(--display); font-weight: 850; font-size: 108px; letter-spacing: -0.035em;
|
|
line-height: 1; color: #fff; white-space: nowrap; text-shadow: 0 6px 30px rgba(0,0,0,.6); opacity: 0; }
|
|
|
|
/* ---------- shared: cards, terminal ---------- */
|
|
.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); white-space: nowrap; }
|
|
.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: .5em; height: 1.05em; background: #e5e7eb; vertical-align: -0.18em; margin-left: 4px; }
|
|
.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; }
|
|
|
|
/* ---------- 1 game: the game's own screens ---------- */
|
|
.phone { position: absolute; top: 290px; width: 330px; height: 676px; border-radius: 46px; overflow: hidden; opacity: 0;
|
|
background: #000 center / cover no-repeat; box-shadow: 0 40px 90px rgba(0,0,0,.6), 0 0 0 6px #0b0e16, 0 0 0 8px rgba(255,255,255,.12); }
|
|
|
|
/* ---------- 2 pile ---------- */
|
|
.pcard { opacity: 0; transform-origin: 50% 50%; }
|
|
.pcard .body { position: relative; height: 330px; overflow: hidden; }
|
|
.pcard .rows { position: absolute; left: 0; right: 0; top: 0; padding: 14px 26px; font: 500 21px/1.6 var(--mono); color: var(--ink-2); }
|
|
.pcard .rows div { white-space: pre; overflow: hidden; text-overflow: ellipsis; }
|
|
.pcard .rows .okk { font-weight: 800; }
|
|
.pcard .shade { position: absolute; inset: 0; background: #04060c; opacity: 0; pointer-events: none; }
|
|
.pcard .grid { position: absolute; inset: 16px 22px; }
|
|
.pcard .tile { position: absolute; border-radius: 6px; background: center / cover no-repeat; box-shadow: 0 6px 16px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08); }
|
|
|
|
/* ---------- 3 reject: the finding ---------- */
|
|
#finding { left: 50%; top: 52%; width: max-content; padding: 34px 44px 38px; border-radius: 26px; background: #1a0d12;
|
|
border: 3px solid rgba(255,90,95,.65); box-shadow: 0 0 0 10px rgba(229,72,77,.12), 0 0 160px rgba(229,72,77,.35), 0 50px 120px rgba(0,0,0,.7);
|
|
font-family: var(--mono); opacity: 0; transform-origin: 30% 50%; }
|
|
#finding .l1 { display: flex; align-items: center; gap: 18px; white-space: nowrap; font-size: 31px; font-weight: 700; color: #ffd6d7; }
|
|
#finding .sev { color: #fff; background: var(--red-2); border-radius: 9px; padding: 3px 14px; font-weight: 800; }
|
|
#finding .gl { color: #fff; font-weight: 800; }
|
|
#finding .l2 { margin-top: 18px; white-space: nowrap; font-size: 26px; color: var(--ink-2); }
|
|
#finding .l2 .loc { font-weight: 700; }
|
|
|
|
/* ---------- 4 ask: the request ---------- */
|
|
#prompt { left: 260px; top: 470px; width: 1400px; padding: 30px 38px; display: flex; flex-direction: column; gap: 16px;
|
|
background: rgba(21,31,54,.92); border: 2px solid var(--accent-2); border-radius: 26px; box-shadow: 0 30px 90px rgba(0,0,0,.6), 0 0 0 8px rgba(91,92,240,.12); opacity: 0; }
|
|
#prompt .who { display: flex; align-items: center; gap: 12px; font: 800 22px/1 var(--text); color: var(--accent-ink); text-transform: uppercase; letter-spacing: .1em; }
|
|
#prompt .txt { font: 700 50px/1.2 var(--display); color: #fff; letter-spacing: -0.015em; white-space: nowrap; }
|
|
#prompt .sent { position: absolute; right: 30px; bottom: 30px; width: 58px; height: 58px; border-radius: 50%; background: var(--accent-2);
|
|
display: flex; align-items: center; justify-content: center; color: #fff; font-size: 28px; opacity: .35; }
|
|
|
|
/* ---------- 5 montage ---------- */
|
|
.mterm { left: 120px; top: 110px; width: 1680px; }
|
|
.mterm .body { padding: 22px 34px 26px; font-size: 30px; line-height: 1.6; }
|
|
#shots { left: 110px; top: 90px; width: 1700px; height: 760px; }
|
|
#shots .lab { position: absolute; font: 700 20px/1.15 var(--text); color: var(--muted); text-align: center; white-space: nowrap; opacity: 0; }
|
|
#shots .lang { position: absolute; font: 800 22px/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); }
|
|
#prop { left: 110px; top: 110px; 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 18px; 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; }
|
|
#form { left: 1170px; top: 110px; width: 640px; }
|
|
#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 .count { padding: 18px 28px 22px; font: 800 44px/1 var(--display); color: #fff; border-top: 2px solid var(--line); opacity: 0; }
|
|
#form .count b { color: var(--green); }
|
|
#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; }
|
|
#cpterm .body { font-size: 26px; line-height: 1.55; }
|
|
.dhost { position: absolute; inset: 0; }
|
|
|
|
/* ---------- 6 scan ---------- */
|
|
#scanterm { left: 120px; top: 290px; width: 1680px; }
|
|
#scanterm .body { padding: 20px 32px 26px; font-size: 27px; line-height: 1.5; }
|
|
.fd { position: relative; display: flex; align-items: center; gap: 16px; margin: 8px 0; padding: 10px 18px; border-radius: 14px; white-space: nowrap; opacity: 0; }
|
|
.fd .tint { position: absolute; inset: 0; border-radius: 14px; }
|
|
.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 .pi { font-size: 30px; }
|
|
.fd .tx { overflow: hidden; text-overflow: ellipsis; color: #ffd6d7; font-weight: 600; }
|
|
.fd .sev { font-weight: 800; color: #fff; }
|
|
|
|
/* ---------- 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) */
|
|
.dcur { position: absolute; z-index: 6; width: 56px; height: 56px; 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; }
|
|
.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); }
|
|
|
|
/* ---------- 9 end card ---------- */
|
|
#brand { left: 0; right: 0; top: 150px; text-align: center; }
|
|
#brand > * { opacity: 0; }
|
|
#brand .mark { width: 200px; height: 200px; display: block; margin: 0 auto; filter: drop-shadow(0 30px 70px rgba(91,92,240,.6)); }
|
|
#brand .word { margin-top: 20px; font: 900 120px/1 var(--display); letter-spacing: -0.05em; color: #fff; }
|
|
#brand .cmdl { display: inline-block; margin-top: 44px; padding: 26px 48px; min-width: 1040px; text-align: left; border-radius: 22px;
|
|
background: #0b1222; border: 2px solid var(--line-2); box-shadow: 0 30px 80px rgba(0,0,0,.5); font: 800 76px/1.1 var(--mono); color: #fff; white-space: pre; }
|
|
#brand .cmdl .caret { width: .55em; height: 1em; vertical-align: -0.12em; margin-left: 6px; }
|
|
#brand .url { margin-top: 40px; font: 750 56px/1 var(--display); color: var(--accent); letter-spacing: -0.01em; }
|
|
</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 id="veil"></div>
|
|
|
|
<div class="scene" id="s-game"><div class="cam" id="game"></div></div>
|
|
<div class="scene" id="s-pile"><div class="cam" id="pile"></div></div>
|
|
<div class="scene" id="s-reject"><div class="cam">
|
|
<div id="finding" class="abs"><div class="l1"></div><div class="l2"></div></div>
|
|
</div></div>
|
|
<div class="scene" id="s-ask"><div class="cam">
|
|
<div id="prompt" class="abs"><span class="who"><span class="pi i-term"></span>You, to your AI agent</span><span class="txt"></span><span class="sent"><span class="pi i-send"></span></span></div>
|
|
</div></div>
|
|
|
|
<div class="scene" id="s-builds"><div class="cam">
|
|
<div class="card term mterm" id="buildterm"><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-shots"><div class="cam"><div id="shots" class="abs"></div></div></div>
|
|
<div class="scene" id="s-products"><div class="cam">
|
|
<div class="card term mterm" 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></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 class="count"></div></div>
|
|
</div></div>
|
|
<div class="scene" id="s-consoles"><div class="cam">
|
|
<div class="card term mterm" 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="dhost"></div>
|
|
</div></div>
|
|
|
|
<div class="scene" id="s-scan"><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-button"><div class="cam"></div></div>
|
|
<div class="scene" id="s-waiting"><div class="cam"></div></div>
|
|
<div class="scene" id="s-end"><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="cmdl"><span class="ps">$</span> <span class="t"></span><span class="caret"></span></div>
|
|
<div class="url"></div>
|
|
</div>
|
|
</div></div>
|
|
|
|
<div id="capband"></div>
|
|
<div id="cap"></div>
|
|
<div id="edgeband"></div>
|
|
<div id="edge"></div>
|
|
<div id="vig"></div>
|
|
</div>
|
|
<script type="module" src="teaser.js"></script>
|
|
</body>
|
|
</html>
|