61 lines
3.2 KiB
HTML
61 lines
3.2 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
|
<title>遥控器 · 找到你自己</title>
|
|
<style>
|
|
:root {
|
|
--bg:#ffffff; --surface:#f6f6f3; --surface-warm:#e5e5e0;
|
|
--fg:#211922; --fg-2:#000000; --muted:#62625b; --meta:#91918c;
|
|
--border-soft:#e0e0d9; --accent:#e60023; --success:#103c25;
|
|
--font-body:"Pin Sans",-apple-system,system-ui,Arial,sans-serif;
|
|
--text-xs:12px; --text-sm:14px; --text-base:16px; --text-xl:22px; --text-2xl:28px;
|
|
--leading-body:1.4; --tracking-display:-0.02em;
|
|
--space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px; --space-12:48px;
|
|
--radius-md:16px; --radius-pill:9999px;
|
|
--focus-ring:0 0 0 3px rgba(67,94,229,.35);
|
|
}
|
|
*,*::before,*::after { box-sizing:border-box; }
|
|
html,body { margin:0;padding:0;height:100%; }
|
|
body { background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-body); }
|
|
.scroll { min-height:100dvh;display:grid;justify-items:center;padding:48px 16px 32px; }
|
|
.box { width:min(440px,100%);margin-top:6vh;display:grid;gap:16px;align-content:start; }
|
|
.eyebrow { font-size:var(--text-xs);font-weight:700;letter-spacing:.14em;color:var(--meta);margin:0; }
|
|
h1 { margin:0;font-size:var(--text-2xl);letter-spacing:var(--tracking-display); }
|
|
.lede { margin:0;color:var(--muted); }
|
|
.field { display:grid;gap:8px;margin-top:24px; }
|
|
.field label { font-size:var(--text-sm);font-weight:700; }
|
|
.fake-input { border:1px solid var(--meta);border-radius:var(--radius-md);background:var(--bg);color:var(--meta);padding:12px 15px;min-height:48px;display:flex;align-items:center; }
|
|
.main-btn { background:var(--accent);color:#000;border-radius:var(--radius-md);padding:14px 20px;font-weight:700;font-size:var(--text-sm);text-align:center; }
|
|
.foot { font-size:var(--text-xs);color:var(--meta);text-align:center;margin:0; }
|
|
.success { text-align:center;padding:32px 0;display:grid;gap:12px;justify-items:center;border-top:1px solid var(--border-soft); }
|
|
.mark { width:64px;height:64px;border-radius:var(--radius-pill);background:var(--surface-warm);color:var(--success);display:grid;place-items:center;font-size:28px;font-weight:700; }
|
|
.success h2 { margin:0;font-size:var(--text-xl); }
|
|
.success p { margin:0;color:var(--muted);font-size:var(--text-sm); }
|
|
.static-note { font-size:var(--text-xs);color:var(--meta);text-align:center; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="scroll" aria-label="遥控器静态设计">
|
|
<div class="box">
|
|
<p class="eyebrow">LIVE · 现场互动</p>
|
|
<h1>找到你自己</h1>
|
|
<p class="lede">输入名字，它会出现在大屏幕上。</p>
|
|
<div class="field">
|
|
<label>你的名字</label>
|
|
<div class="fake-input">输入你的名字</div>
|
|
</div>
|
|
<div class="main-btn">在大屏上找到我</div>
|
|
<div class="success" aria-label="成功状态示意">
|
|
<div class="mark">✓</div>
|
|
<h2>找到了 · 抬头看看大屏</h2>
|
|
<p>几秒后大屏会恢复完整词云 · 再找一个名字</p>
|
|
</div>
|
|
<p class="foot">请留意现场大屏</p>
|
|
<p class="static-note">静态设计示意 · 不可交互</p>
|
|
</div>
|
|
</main>
|
|
</body>
|
|
</html>
|