127 lines
7.2 KiB
HTML
127 lines
7.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>
|
|
@layer od-layout {
|
|
:where(.od-stack,.od-row) > :where(*) { min-width: 0; }
|
|
.od-stack { display:flex;flex-direction:column;gap:var(--od-gap,8px); }
|
|
.od-row { display:flex;align-items:center;gap:var(--od-gap,8px); }
|
|
.od-nowrap { white-space:nowrap; }
|
|
}
|
|
</style>
|
|
<style>
|
|
:root {
|
|
--bg:#ffffff; --surface:#f6f6f3; --surface-warm:#e5e5e0;
|
|
--fg:#211922; --fg-2:#000000; --muted:#62625b; --meta:#91918c;
|
|
--border:#c8c8c1; --border-soft:#e0e0d9;
|
|
--accent:#e60023;
|
|
--font-body:"Pin Sans",-apple-system,system-ui,"Segoe UI",Roboto,Arial,sans-serif;
|
|
--font-art:"Pin Sans",-apple-system,"PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;
|
|
--text-xs:12px; --text-sm:14px; --text-base:16px; --text-lg:18px; --text-2xl:28px;
|
|
--leading-body:1.4; --tracking-display:-0.02em;
|
|
--space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px;
|
|
--radius-md:16px; --radius-pill:9999px;
|
|
--elev-raised:0 4px 16px rgba(33,25,34,0.06);
|
|
}
|
|
*,*::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); }
|
|
.page { height:100dvh;position:relative;overflow:hidden; }
|
|
.cloud { position:absolute;inset:0; }
|
|
.cloud span { position:absolute;transform:translate(-50%,-50%);white-space:nowrap;font-family:var(--font-art);color:var(--fg); }
|
|
.t1 { font-size:15px;opacity:.55;font-weight:500; }
|
|
.t2 { font-size:22px;opacity:.7;font-weight:600; }
|
|
.t3 { font-size:34px;opacity:.85;font-weight:700; }
|
|
.t4 { font-size:52px;opacity:.94;font-weight:700;letter-spacing:var(--tracking-display); }
|
|
.eye { position:absolute;left:16px;top:max(16px,env(safe-area-inset-top));font-size:var(--text-xs);letter-spacing:.14em;color:var(--meta);font-weight:700;margin:0;z-index:3; }
|
|
.art-title { position:absolute;left:50%;top:max(44px,calc(env(safe-area-inset-top) + 36px));transform:translateX(-50%);text-align:center;pointer-events:none;margin:0;max-width:min(88vw,640px);z-index:2;width:max-content; }
|
|
.art-title h1 { margin:0;font-size:clamp(22px,6vw,32px);font-weight:700;letter-spacing:var(--tracking-display);line-height:1.2;text-wrap:balance; }
|
|
.art-title p { margin:6px 0 0;font-size:var(--text-xs);letter-spacing:.2em;color:var(--meta);font-weight:700;white-space:nowrap; }
|
|
.art-title::after { content:"";display:block;width:32px;height:2px;background:var(--accent);border-radius:2px;margin:10px auto 0;opacity:.9; }
|
|
.dock-wrap { position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;padding:0 16px calc(16px + env(safe-area-inset-bottom)); }
|
|
.dock { width:min(520px,100%);background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-md);box-shadow:var(--elev-raised);padding:12px;display:grid;gap:8px; }
|
|
.row { display:flex;gap:8px; }
|
|
.fake-input { flex:1;border:1px solid var(--meta);border-radius:var(--radius-md);background:var(--bg);color:var(--meta);padding:12px 15px;font-size:var(--text-base); }
|
|
.fake-btn { background:var(--accent);color:#000;border-radius:var(--radius-md);padding:12px 20px;font-weight:700;font-size:var(--text-sm);display:grid;place-items:center; }
|
|
.found { background:var(--bg);border:1px dashed var(--border);border-radius:var(--radius-md);padding:10px 12px; }
|
|
.found strong { display:block;font-size:var(--text-base); }
|
|
.found small { color:var(--muted);font-size:var(--text-sm); }
|
|
.found-row { display:flex;gap:8px;align-items:center;margin-top:8px; }
|
|
.ghost-btn { background:var(--surface-warm);color:var(--fg-2);border-radius:var(--radius-md);padding:10px 16px;font-size:var(--text-sm);font-weight:700; }
|
|
.dock-note { font-size:var(--text-xs);color:var(--meta);text-align:center;margin:0; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="page" aria-label="个人查找静态设计">
|
|
<p class="eye">LIVE ARCHIVE · 2026</p>
|
|
<div class="art-title">
|
|
<h1>2026 毕业典礼 · 全体名单</h1>
|
|
<p>CLASS OF 2026 · WORD CLOUD</p>
|
|
</div>
|
|
<div class="cloud" aria-hidden="true">
|
|
<span class="t4" style="left:50%;top:44%">王小明</span>
|
|
<span class="t3" style="left:32%;top:30%">林嘉怡</span>
|
|
<span class="t3" style="left:68%;top:30%">Sophia</span>
|
|
<span class="t3" style="left:24%;top:58%">李欣</span>
|
|
<span class="t3" style="left:76%;top:60%">Kevin</span>
|
|
<span class="t3" style="left:50%;top:66%">陈晨</span>
|
|
<span class="t2" style="left:38%;top:52%">Alex</span>
|
|
<span class="t2" style="left:62%;top:52%">Lily</span>
|
|
<span class="t2" style="left:44%;top:24%">张雨</span>
|
|
<span class="t2" style="left:58%;top:76%">Daniel</span>
|
|
<span class="t2" style="left:18%;top:40%">赵天宇</span>
|
|
<span class="t2" style="left:82%;top:42%">Emma</span>
|
|
<span class="t2" style="left:30%;top:76%">苏晚晴</span>
|
|
<span class="t2" style="left:70%;top:78%">周子墨</span>
|
|
<span class="t2" style="left:50%;top:14%">Olivia</span>
|
|
<span class="t2" style="left:50%;top:88%">沈知遥</span>
|
|
<span class="t1" style="left:14%;top:66%">王梓涵</span>
|
|
<span class="t1" style="left:86%;top:66%">李雨桐</span>
|
|
<span class="t1" style="left:22%;top:22%">张浩然</span>
|
|
<span class="t1" style="left:78%;top:20%">刘亦菲</span>
|
|
<span class="t1" style="left:12%;top:52%">陈子豪</span>
|
|
<span class="t1" style="left:88%;top:52%">杨晨曦</span>
|
|
<span class="t1" style="left:36%;top:84%">黄俊杰</span>
|
|
<span class="t1" style="left:64%;top:84%">吴思远</span>
|
|
<span class="t1" style="left:26%;top:44%">徐若瑄</span>
|
|
<span class="t1" style="left:74%;top:46%">孙浩宇</span>
|
|
<span class="t1" style="left:42%;top:38%">马晓彤</span>
|
|
<span class="t1" style="left:58%;top:38%">朱子睿</span>
|
|
<span class="t1" style="left:34%;top:64%">胡文轩</span>
|
|
<span class="t1" style="left:66%;top:64%">郭美玲</span>
|
|
<span class="t1" style="left:46%;top:58%">何佳怡</span>
|
|
<span class="t1" style="left:55%;top:59%">罗子涵</span>
|
|
<span class="t1" style="left:20%;top:82%">James</span>
|
|
<span class="t1" style="left:80%;top:82%">Mary</span>
|
|
<span class="t1" style="left:16%;top:30%">John</span>
|
|
<span class="t1" style="left:84%;top:30%">Grace</span>
|
|
<span class="t1" style="left:40%;top:10%">Noah</span>
|
|
<span class="t1" style="left:60%;top:10%">Mia</span>
|
|
<span class="t1" style="left:50%;top:94%">艾</span>
|
|
<span class="t2" style="left:68%;top:14%">Alexandrina</span>
|
|
<span class="t2" style="left:30%;top:90%">欧阳雨桐溪</span>
|
|
</div>
|
|
<div class="dock-wrap">
|
|
<div class="dock">
|
|
<div class="row">
|
|
<div class="fake-input">输入你的名字</div>
|
|
<div class="fake-btn">查找</div>
|
|
</div>
|
|
<div class="found">
|
|
<strong>找到你了 · 王小明</strong>
|
|
<small>你在这里 · 静态示意，不可点击</small>
|
|
<div class="found-row">
|
|
<span class="ghost-btn">查看全图</span>
|
|
<small>找到 2 处 · 1 / 2</small>
|
|
</div>
|
|
</div>
|
|
<p class="dock-note">静态设计示意 · 不可交互</p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</body>
|
|
</html>
|