99 lines
6.3 KiB
HTML
99 lines
6.3 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<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;
|
|
--font-body:"Pin Sans",-apple-system,system-ui,Arial,sans-serif;
|
|
--font-art:"Pin Sans",-apple-system,"PingFang SC","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;
|
|
--text-xs:12px; --text-sm:14px; --text-lg:18px;
|
|
--radius-md:16px; --radius-sm:12px;
|
|
--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); }
|
|
.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:18px;opacity:.55;font-weight:500; }
|
|
.t2 { font-size:28px;opacity:.7;font-weight:600; }
|
|
.t3 { font-size:44px;opacity:.85;font-weight:700; }
|
|
.t4 { font-size:72px;opacity:.94;font-weight:700; }
|
|
.eye { position:absolute;left:48px;top:48px;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:48px;transform:translateX(-50%);text-align:center;pointer-events:none;margin:0;max-width:min(80vw,900px);z-index:2;width:max-content; }
|
|
.art-title h1 { margin:0;font-size:clamp(38px,4.2vw,62px);font-weight:700;letter-spacing:-0.02em;line-height:1.1;text-wrap:balance; }
|
|
.art-title p { margin:10px 0 0;font-size:var(--text-sm);letter-spacing:.24em;color:var(--meta);font-weight:700;white-space:nowrap; }
|
|
.art-title::after { content:"";display:block;width:48px;height:3px;background:var(--accent);border-radius:3px;margin:14px auto 0;opacity:.9; }
|
|
.cloud { position:absolute;inset:0;z-index:1; }
|
|
.caption { position:absolute;left:48px;bottom:48px;margin:0;font-size:var(--text-sm);letter-spacing:.12em;color:var(--meta); }
|
|
.qr { position:absolute;right:48px;bottom:48px;background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-md);box-shadow:var(--elev-raised);padding:16px;display:flex;gap:16px;align-items:center;max-width:360px; }
|
|
.qr-code { width:168px;height:168px;flex:none;background:#fff;border-radius:var(--radius-sm);display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);gap:1px;padding:10px;border:1px solid var(--border-soft); }
|
|
.qr-code i { background:#fff;display:block; }
|
|
.qr-code i.b { background:var(--fg); }
|
|
.qr h2 { margin:0 0 4px;font-size:var(--text-lg); }
|
|
.qr p { margin:0;font-size:var(--text-sm);color:var(--muted); }
|
|
.screen-note { position:absolute;left:48px;top:76px;font-size:var(--text-xs);color:var(--meta); }
|
|
@media (max-width:760px) {
|
|
.eye { left:16px;top:16px; }
|
|
.caption { display:none; }
|
|
.screen-note { left:16px;top:40px; }
|
|
.qr { right:16px;left:16px;bottom:16px;max-width:none; }
|
|
.qr-code { width:120px;height:120px; }
|
|
}
|
|
</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>
|
|
<p class="screen-note">静态设计示意 · 不可交互</p>
|
|
<div class="cloud" aria-hidden="true">
|
|
<span class="t4" style="left:50%;top:44%">王小明</span>
|
|
<span class="t3" style="left:32%;top:28%">林嘉怡</span>
|
|
<span class="t3" style="left:68%;top:28%">Sophia</span>
|
|
<span class="t3" style="left:24%;top:56%">李欣</span>
|
|
<span class="t3" style="left:76%;top:58%">Kevin</span>
|
|
<span class="t3" style="left:50%;top:66%">陈晨</span>
|
|
<span class="t2" style="left:38%;top:50%">Alex</span>
|
|
<span class="t2" style="left:62%;top:50%">Lily</span>
|
|
<span class="t2" style="left:44%;top:20%">张雨</span>
|
|
<span class="t2" style="left:58%;top:78%">Daniel</span>
|
|
<span class="t2" style="left:16%;top:40%">赵天宇</span>
|
|
<span class="t2" style="left:84%;top:42%">Emma</span>
|
|
<span class="t2" style="left:30%;top:78%">苏晚晴</span>
|
|
<span class="t2" style="left:70%;top:80%">周子墨</span>
|
|
<span class="t1" style="left:14%;top:64%">王梓涵</span>
|
|
<span class="t1" style="left:86%;top:64%">李雨桐</span>
|
|
<span class="t1" style="left:22%;top:20%">张浩然</span>
|
|
<span class="t1" style="left:78%;top:18%">刘亦菲</span>
|
|
<span class="t1" style="left:36%;top:84%">黄俊杰</span>
|
|
<span class="t1" style="left:64%;top:84%">吴思远</span>
|
|
<span class="t1" style="left:42%;top:36%">马晓彤</span>
|
|
<span class="t1" style="left:58%;top:36%">朱子睿</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:50%;top:12%">Olivia</span>
|
|
<span class="t1" style="left:50%;top:90%">沈知遥</span>
|
|
</div>
|
|
<p class="caption">THIS WALL IS MADE OF EVERYONE HERE</p>
|
|
<aside class="qr" aria-label="扫码互动静态示意">
|
|
<div class="qr-code" aria-hidden="true"><i class="b"></i><i class="b"></i><i class="b"></i><i></i><i class="b"></i><i></i><i class="b"></i><i class="b"></i><i class="b"></i><i class="b"></i><i></i><i></i><i></i><i></i><i class="b"></i><i></i><i></i><i class="b"></i><i class="b"></i><i></i><i class="b"></i><i></i><i></i><i></i><i class="b"></i><i></i><i class="b"></i><i></i><i></i><i></i><i class="b"></i><i></i><i class="b"></i><i></i><i></i><i></i><i></i><i class="b"></i><i class="b"></i><i></i><i></i><i class="b"></i><i></i><i class="b"></i><i></i><i></i><i class="b"></i><i></i><i></i><i class="b"></i><i></i><i class="b"></i><i></i><i class="b"></i><i class="b"></i><i class="b"></i><i></i><i></i><i class="b"></i><i></i><i></i><i class="b"></i><i></i><i class="b"></i><i class="b"></i><i></i><i class="b"></i><i></i><i></i><i></i><i></i><i class="b"></i><i></i><i></i><i class="b"></i><i></i><i class="b"></i><i class="b"></i><i class="b"></i><i></i><i></i><i class="b"></i></div>
|
|
<div>
|
|
<h2>找到你的名字</h2>
|
|
<p>扫码输入名字</p>
|
|
<p>静态占位 · 不可扫码</p>
|
|
</div>
|
|
</aside>
|
|
</main>
|
|
</body>
|
|
</html>
|