Nine scenes of 6-7 s, one slow camera move each, soft dissolves, one plain-English caption per scene at the top (on screen at least 4 s): the stores' to-do list and one rejection mail, `init` in an empty folder, the agent prompt and `release plan` (25 steps), store text and renders in 7 sizes x 4 languages, `play products --dry` and `catalog diff`, the scan's declarations proposal with the ask-owner line, three findings with plain reasons turning green, the desktop release timeline and Store readiness "No blockers", Submit and the end card. Every CLI line is real output: tests/teaser.test.ts runs each command (store answers from tests/helpers/teaser-store-mock.ts, preloaded through bunfig.toml, never the network) and checks scene lengths, caption holds, the 55-65 s total and 16:9 only. The vertical output is gone; the web version targets 4.5 MB. Calmer music (D major pads, soft pluck, bells on scene changes). desktop.ts adds the Store readiness frame.
273 lines
20 KiB
HTML
273 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 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; }
|
|
|
|
/* ---------- 8 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 img { position: absolute; left: 0; top: 0; display: block; width: 1280px; height: 800px; }
|
|
.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); }
|
|
|
|
/* ---------- cursor (Phosphor navigation-arrow, fill) ---------- */
|
|
#cursor { z-index: 55; width: 60px; height: 60px; 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)); }
|
|
#cursor .pi { position: absolute; inset: 0; width: 100%; height: 100%; color: #fff; }
|
|
|
|
/* ---------- 9 submit + brand ---------- */
|
|
#sbtn { position: absolute; left: 50%; top: 520px; display: flex; align-items: center; gap: 22px; font: 800 60px/1 var(--display);
|
|
color: #fff; background: linear-gradient(#3b82f6, #2563eb); border-radius: 28px; padding: 42px 68px; letter-spacing: -0.01em;
|
|
box-shadow: 0 30px 80px rgba(37,99,235,.45), inset 0 2px 0 rgba(255,255,255,.25); white-space: nowrap; }
|
|
#sbtn .pi { font-size: 56px; }
|
|
#sbtn .hov { position: absolute; inset: 0; border-radius: 28px; background: rgba(255,255,255,.12); opacity: 0; }
|
|
#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-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-desktop"><div class="cam"></div></div>
|
|
|
|
<div class="scene" id="s-submit"><div class="cam">
|
|
<div id="sbtn"><span class="pi i-send"></span>Submit for Review<span class="hov"></span></div>
|
|
<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>
|
|
<span id="cursor" aria-hidden="true"><span class="pi i-cursor"></span></span>
|
|
<div id="vig"></div>
|
|
</div>
|
|
<script type="module" src="teaser.js"></script>
|
|
</body>
|
|
</html>
|