CRT/storebound
1
0
Fork 0
Code Issues Pull requests Releases 1 Packages 1 Activity Actions

teaser v7: 62 s, two new scenes (consoles: the real console plan of apple-app-privacy, then the app's plan panel stopping at Publish; resubmit: back from App Review, Resubmit), submit renewed as the app's own send-for-review (dry-run plan with Continue, then Waiting for review); v6's desktop scene folded into it; console plan lines checked against real output, cuts on the beat, image decodes batched with retries

Browse source
This commit is contained in:
CRTkafa 2026-10-13 03:49:39 +08:00
parent 710c3a53d0
commit 614c32bcba
8 changed files with 391 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

38
media/teaser/index.html
View file

@ -152,7 +152,17 @@ html, body { margin: 0; padding: 0; background: #000; overflow: hidden; }
#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 ---------- */
/* ---------- 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; }
@ -171,7 +181,7 @@ html, body { margin: 0; padding: 0; background: #000; overflow: hidden; }
.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-11 desktop window ---------- */
/* ---------- 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;
@ -182,7 +192,7 @@ html, body { margin: 0; padding: 0; background: #000; 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 of a chart's hover sweep (same arrow as #cursor) */
/* 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; }
@ -194,17 +204,7 @@ html, body { margin: 0; padding: 0; background: #000; overflow: hidden; }
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; }
/* ---------- 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)); }
@ -252,6 +252,12 @@ html, body { margin: 0; padding: 0; background: #000; overflow: hidden; }
<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>
@ -259,10 +265,9 @@ html, body { margin: 0; padding: 0; background: #000; overflow: hidden; }
<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-desktop"><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="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>
@ -273,7 +278,6 @@ html, body { margin: 0; padding: 0; background: #000; overflow: hidden; }
<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>