f8a39d55c7
Phase A: index.css 完全重写 [data-theme="light"] block
- 玻璃方向修正: bg-card 从 rgba(0,0,0,0.05) 黑透明 → 双 token 拆分
--color-bg-card: #ffffff 实体白 (admin 卡)
--color-bg-glass: rgba(255,255,255,0.65) 透明白玻璃 (sidebar/modal/banner)
- Aurora 浅色不再 display:none, 改 pastel 紫蓝桃 0.20-0.32 alpha
- Inset highlight 方向反转: 浅色用 rgba(255,255,255,0.50) 白高光 (玻璃顶边标志)
- Backdrop-filter 五档标准: --bf-glass-sm/md/lg/xl (12-40px + saturate 140-180%)
- Multi-layer shadow: --shadow-card-light (2 stops) + --shadow-glass-light (3 stops + inset)
- 暖调 chip: --color-chip-warm-* GitBook 公告风格
- 文字主色: #171823 微紫 → #171717 Vercel Black
Phase B: LandingPage + AuroraCanvas 浅色化
- 移除 LandingPage 的 data-theme="dark" 强制 (V1 的回避)
- LandingPage.module.css 21 处颜色全 var 化
- AuroraCanvas: 订阅 useThemeStore, 新 LIGHT_ORBS 数组 pastel 紫蓝桃,
vignette 浅色用白色, grain opacity 减半
Phase C: 13 个玻璃面升级 (3 sub-agent 并行)
- Modal 类 (Login/ForceChange/VideoDetail.infoPanel/RecordDetail/AssetLibrary/
Announcement/Confirm/TeamsPage.detailModal): 接入 bg-modal-glass +
bf-glass-lg/xl + shadow-glass-light (含 inset highlight)
- Bar/Dropdown/Toast (AnnouncementBanner/Toast/Dropdown/Select/DatePicker):
bg-glass-strong + bf-glass-md + inset-highlight
- Sidebar + 生成页 (Sidebar/PromptInput/GenerationCard): glass + 顶边白高光
- AnnouncementBanner 写双套独立 [data-theme] 规则 (CSS gradient 内不能 var alpha)
Phase D: admin 实体卡 multi-layer shadow (13 处, 1 sub-agent)
- DashboardPage / TeamsPage / UsersPage / RecordsPage / AdminAssetsPage /
LoginRecordsPage / AuditLogsPage / ProfilePage / SettingsPage
的 .statCard / .tableWrapper / .chartWrapper / .accordionItem 等
加 var(--shadow-card-light) 双层柔阴影
AdminLayout 修复 (V1 漏的):
- .layout 改 transparent, 让 AmbientBackground pastel aurora 在主区透出
- .sidebar 加 bf-glass-md + inset highlight + 立体阴影
LoginModal / ForceChangePassword 残留 mint 清理:
- submitBtn bg/border/color 用 mint-accent var, 字重 500→600 + 字距 0.04em
- input:focus border 用 var(--color-mint-accent)
- 加 bf-glass-sm + inset highlight
验证:
- TS 编译过
- vitest 71 fail / 162 pass 与 V1 基线完全一致, 无新增回归
- 24 张 V2 截图位于 docs/screenshots/v2/ (本地, .gitignore 排除 png)
完成报告: docs/todo/亮色主题切换V2-完成报告.md
V2 plan: docs/todo/亮色主题切换V2.md
视觉对齐稿: docs/todo/showcase.html
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1361 lines
50 KiB
HTML
1361 lines
50 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN" data-theme="light">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>AirDrama 主题 V2 — 风格对齐 Showcase</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600&display=swap" rel="stylesheet">
|
||
<style>
|
||
/* ════════════════════════════════════════════════════════════
|
||
AIRDRAMA THEME V2 — DESIGN TOKENS
|
||
════════════════════════════════════════════════════════════ */
|
||
:root {
|
||
--radius-card: 12px;
|
||
--radius-glass: 20px;
|
||
--radius-chip: 9999px;
|
||
--radius-btn: 8px;
|
||
--font-sans: 'Inter', 'Noto Sans SC', system-ui, sans-serif;
|
||
|
||
/* ───────── DEFAULT = DARK ───────── */
|
||
--color-bg-page: #07070f;
|
||
--color-bg-glass: rgba(255, 255, 255, 0.06);
|
||
--color-bg-glass-strong: rgba(255, 255, 255, 0.10);
|
||
--color-bg-card: rgba(255, 255, 255, 0.04);
|
||
--color-bg-modal-glass: rgba(22, 22, 30, 0.85);
|
||
--color-bg-sidebar: rgba(7, 7, 15, 0.80);
|
||
|
||
--color-text-primary: #f1f0ff;
|
||
--color-text-secondary: #8b8ea8;
|
||
--color-text-tertiary: #6b6e85;
|
||
--color-text-on-glass: rgba(255, 255, 255, 0.85);
|
||
|
||
--color-border-card: rgba(255, 255, 255, 0.10);
|
||
--color-border-glass-edge: rgba(255, 255, 255, 0.12);
|
||
|
||
--color-primary: #6c63ff;
|
||
--color-primary-bg: rgba(108, 99, 255, 0.12);
|
||
|
||
--color-chip-warm-bg: rgba(255, 200, 130, 0.10);
|
||
--color-chip-warm-border: rgba(255, 200, 130, 0.25);
|
||
--color-chip-warm-text: #f1f0ff;
|
||
|
||
--color-chip-info-bg: rgba(108, 99, 255, 0.10);
|
||
--color-chip-info-border: rgba(108, 99, 255, 0.25);
|
||
|
||
--color-success: #00b894;
|
||
--color-danger: #e74c3c;
|
||
|
||
/* Aurora orbs (装饰层) */
|
||
--color-aurora-1: rgba(108, 99, 255, 0.55);
|
||
--color-aurora-2: rgba(59, 130, 246, 0.45);
|
||
--color-aurora-3: rgba(139, 92, 246, 0.40);
|
||
--color-aurora-peach: rgba(255, 130, 100, 0.20);
|
||
|
||
/* Shadows */
|
||
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.30), 0 4px 16px rgba(0, 0, 0, 0.40);
|
||
--shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.30),
|
||
0 1px 2px rgba(0, 0, 0, 0.40),
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
||
|
||
/* Backdrop filters — 标准化五档 */
|
||
--bf-glass-sm: blur(12px) saturate(140%);
|
||
--bf-glass-md: blur(16px) saturate(160%);
|
||
--bf-glass-lg: blur(24px) saturate(180%);
|
||
--bf-glass-xl: blur(40px) saturate(180%);
|
||
}
|
||
|
||
[data-theme="light"] {
|
||
/* ───────── LIGHT OVERRIDES ───────── */
|
||
--color-bg-page: #fafafa;
|
||
--color-bg-glass: rgba(255, 255, 255, 0.65);
|
||
--color-bg-glass-strong: rgba(255, 255, 255, 0.85);
|
||
--color-bg-card: #ffffff;
|
||
--color-bg-modal-glass: rgba(255, 255, 255, 0.85);
|
||
--color-bg-sidebar: rgba(255, 255, 255, 0.70);
|
||
|
||
--color-text-primary: #171717;
|
||
--color-text-secondary: #525252;
|
||
--color-text-tertiary: #888888;
|
||
--color-text-on-glass: rgba(23, 23, 23, 0.85);
|
||
|
||
--color-border-card: rgba(0, 0, 0, 0.08);
|
||
--color-border-glass-edge: rgba(255, 255, 255, 0.70);
|
||
|
||
--color-primary: #5048cc;
|
||
--color-primary-bg: rgba(80, 72, 204, 0.08);
|
||
|
||
--color-chip-warm-bg: #fff5eb;
|
||
--color-chip-warm-border: rgba(255, 180, 130, 0.40);
|
||
--color-chip-warm-text: #1a1a1a;
|
||
|
||
--color-chip-info-bg: rgba(80, 72, 204, 0.08);
|
||
--color-chip-info-border: rgba(80, 72, 204, 0.20);
|
||
|
||
--color-success: #00a37e;
|
||
--color-danger: #d63a2a;
|
||
|
||
/* Aurora 浅色 pastel — 给玻璃面提供穿透色源 */
|
||
--color-aurora-1: rgba(180, 167, 255, 0.30);
|
||
--color-aurora-2: rgba(167, 200, 255, 0.28);
|
||
--color-aurora-3: rgba(220, 167, 255, 0.22);
|
||
--color-aurora-peach: rgba(255, 180, 130, 0.25);
|
||
|
||
/* Shadows — 浅色减弱 */
|
||
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04),
|
||
0 4px 16px rgba(0, 0, 0, 0.06);
|
||
--shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.06),
|
||
0 1px 2px rgba(0, 0, 0, 0.08),
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.60);
|
||
}
|
||
|
||
/* ════════════════════════════════════════════════════════════
|
||
GLOBAL
|
||
════════════════════════════════════════════════════════════ */
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
html, body {
|
||
height: 100%;
|
||
font-family: var(--font-sans);
|
||
font-feature-settings: 'cv01', 'ss03';
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
body {
|
||
background: var(--color-bg-page);
|
||
color: var(--color-text-primary);
|
||
position: relative;
|
||
overflow-x: hidden;
|
||
transition: background 0.3s, color 0.3s;
|
||
padding-bottom: 80px;
|
||
}
|
||
|
||
/* ════════════════════════════════════════════════════════════
|
||
AURORA — 浅色 pastel / 深色 vivid
|
||
════════════════════════════════════════════════════════════ */
|
||
.aurora-bg {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 0;
|
||
overflow: hidden;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.aurora-orb {
|
||
position: absolute;
|
||
border-radius: 50%;
|
||
filter: blur(100px);
|
||
will-change: transform;
|
||
animation: drift 30s ease-in-out infinite alternate;
|
||
}
|
||
.aurora-orb.one { width: 520px; height: 520px; top: -8%; right: 10%; background: var(--color-aurora-1); animation-duration: 22s; }
|
||
.aurora-orb.two { width: 440px; height: 440px; bottom: 20%; left: -5%; background: var(--color-aurora-2); animation-duration: 28s; }
|
||
.aurora-orb.three { width: 380px; height: 380px; top: 40%; left: 45%; background: var(--color-aurora-3); animation-duration: 26s; }
|
||
.aurora-orb.four { width: 320px; height: 320px; top: 12%; left: 8%; background: var(--color-aurora-peach); animation-duration: 32s; }
|
||
|
||
@keyframes drift {
|
||
0% { transform: translate(0, 0) scale(1); }
|
||
50% { transform: translate(-6vw, 5vh) scale(1.10); }
|
||
100% { transform: translate(8vw, -4vh) scale(0.95); }
|
||
}
|
||
|
||
/* ════════════════════════════════════════════════════════════
|
||
TOP BAR
|
||
════════════════════════════════════════════════════════════ */
|
||
.topbar {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 50;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 16px 40px;
|
||
background: var(--color-bg-glass);
|
||
backdrop-filter: var(--bf-glass-md);
|
||
-webkit-backdrop-filter: var(--bf-glass-md);
|
||
border-bottom: 1px solid var(--color-border-card);
|
||
}
|
||
|
||
.topbar .brand {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.02em;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
.brand-mark {
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: 8px;
|
||
background: linear-gradient(135deg, var(--color-primary), #00b8e6);
|
||
display: inline-block;
|
||
}
|
||
|
||
.topbar .right { display: flex; align-items: center; gap: 12px; }
|
||
|
||
.theme-toggle {
|
||
width: 36px; height: 36px;
|
||
border-radius: 8px;
|
||
border: 1px solid var(--color-border-card);
|
||
background: var(--color-bg-glass-strong);
|
||
color: var(--color-text-secondary);
|
||
cursor: pointer;
|
||
display: flex; align-items: center; justify-content: center;
|
||
transition: all 0.15s;
|
||
}
|
||
.theme-toggle:hover { color: var(--color-primary); }
|
||
|
||
.theme-label {
|
||
font-size: 12px;
|
||
color: var(--color-text-tertiary);
|
||
padding-right: 4px;
|
||
}
|
||
|
||
/* ════════════════════════════════════════════════════════════
|
||
LAYOUT
|
||
════════════════════════════════════════════════════════════ */
|
||
main {
|
||
position: relative;
|
||
z-index: 1;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 60px 40px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 96px;
|
||
}
|
||
|
||
.section-label {
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.10em;
|
||
text-transform: uppercase;
|
||
color: var(--color-text-tertiary);
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 32px;
|
||
font-weight: 600;
|
||
letter-spacing: -0.020em;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.section-desc {
|
||
font-size: 15px;
|
||
color: var(--color-text-secondary);
|
||
margin-bottom: 28px;
|
||
max-width: 600px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* ════════════════════════════════════════════════════════════
|
||
SECTION 1 — HERO (GitBook 风格首页 mockup)
|
||
════════════════════════════════════════════════════════════ */
|
||
.hero {
|
||
text-align: center;
|
||
padding: 40px 0 20px;
|
||
}
|
||
|
||
.hero-chip {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 6px 14px 6px 8px;
|
||
background: var(--color-chip-warm-bg);
|
||
border: 1px solid var(--color-chip-warm-border);
|
||
border-radius: var(--radius-chip);
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: var(--color-chip-warm-text);
|
||
margin-bottom: 32px;
|
||
}
|
||
.hero-chip .badge {
|
||
background: rgba(255, 100, 50, 0.12);
|
||
color: #c2410c;
|
||
padding: 2px 8px;
|
||
border-radius: var(--radius-chip);
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
}
|
||
[data-theme="dark"] .hero-chip .badge {
|
||
background: rgba(255, 150, 100, 0.20);
|
||
color: #ffb589;
|
||
}
|
||
|
||
.hero h1 {
|
||
font-size: 64px;
|
||
font-weight: 600;
|
||
letter-spacing: -0.030em;
|
||
line-height: 1.05;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.hero p {
|
||
font-size: 18px;
|
||
color: var(--color-text-secondary);
|
||
line-height: 1.6;
|
||
max-width: 580px;
|
||
margin: 0 auto 36px;
|
||
}
|
||
|
||
.hero-cta {
|
||
display: flex;
|
||
gap: 12px;
|
||
justify-content: center;
|
||
margin-bottom: 60px;
|
||
}
|
||
|
||
/* ════════════════════════════════════════════════════════════
|
||
GLASS WINDOW MOCKUP — 浅色玻璃在 aurora 上的效果
|
||
════════════════════════════════════════════════════════════ */
|
||
.glass-window-frame {
|
||
position: relative;
|
||
max-width: 920px;
|
||
margin: 0 auto;
|
||
border-radius: var(--radius-glass);
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 装饰块（橙/紫渐变环），故意从左上溢出，给玻璃提供穿透色 */
|
||
.deco-blob {
|
||
position: absolute;
|
||
top: -100px;
|
||
left: -120px;
|
||
width: 380px;
|
||
height: 380px;
|
||
background: radial-gradient(circle at 30% 30%,
|
||
rgba(255, 130, 80, 0.85),
|
||
rgba(255, 120, 180, 0.45) 40%,
|
||
transparent 70%);
|
||
filter: blur(20px);
|
||
border-radius: 50%;
|
||
z-index: 1;
|
||
pointer-events: none;
|
||
}
|
||
[data-theme="dark"] .deco-blob {
|
||
background: radial-gradient(circle at 30% 30%,
|
||
rgba(108, 99, 255, 0.85),
|
||
rgba(0, 184, 230, 0.45) 40%,
|
||
transparent 70%);
|
||
}
|
||
|
||
.glass-window {
|
||
position: relative;
|
||
z-index: 2;
|
||
background: var(--color-bg-glass);
|
||
backdrop-filter: var(--bf-glass-xl);
|
||
-webkit-backdrop-filter: var(--bf-glass-xl);
|
||
border: 1px solid var(--color-border-card);
|
||
border-radius: var(--radius-glass);
|
||
box-shadow: var(--shadow-glass);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.glass-window-titlebar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 12px 16px;
|
||
border-bottom: 1px solid var(--color-border-card);
|
||
}
|
||
.win-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
|
||
.win-dot.r { background: #ff5f57; }
|
||
.win-dot.y { background: #febc2e; }
|
||
.win-dot.g { background: #28c840; }
|
||
.glass-window-title {
|
||
margin-left: 12px;
|
||
font-size: 13px;
|
||
color: var(--color-text-tertiary);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.glass-window-body {
|
||
padding: 40px;
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 16px;
|
||
min-height: 280px;
|
||
}
|
||
|
||
.glass-mini-card {
|
||
background: var(--color-bg-card);
|
||
border: 1px solid var(--color-border-card);
|
||
border-radius: 12px;
|
||
padding: 24px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 12px;
|
||
text-align: center;
|
||
/* 实体白卡风格 — 不透明、shadow border */
|
||
}
|
||
.glass-mini-card .icon {
|
||
width: 36px;
|
||
height: 36px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--color-text-primary);
|
||
}
|
||
.glass-mini-card h4 {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
}
|
||
.glass-mini-card p {
|
||
font-size: 12px;
|
||
color: var(--color-text-tertiary);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* ════════════════════════════════════════════════════════════
|
||
SECTION 2 — GLASS DEMO (Framer 风格特写)
|
||
════════════════════════════════════════════════════════════ */
|
||
.glass-demo {
|
||
position: relative;
|
||
height: 460px;
|
||
border-radius: var(--radius-glass);
|
||
background: var(--color-bg-card);
|
||
border: 1px solid var(--color-border-card);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.glass-demo-swirl {
|
||
position: absolute;
|
||
top: -80px;
|
||
left: -80px;
|
||
width: 480px;
|
||
height: 480px;
|
||
background:
|
||
radial-gradient(circle at 30% 30%, rgba(255, 110, 50, 0.95), transparent 50%),
|
||
radial-gradient(circle at 70% 70%, rgba(255, 180, 130, 0.85), transparent 50%);
|
||
filter: blur(8px);
|
||
border-radius: 50%;
|
||
z-index: 0;
|
||
}
|
||
[data-theme="dark"] .glass-demo-swirl {
|
||
background:
|
||
radial-gradient(circle at 30% 30%, rgba(108, 99, 255, 0.95), transparent 50%),
|
||
radial-gradient(circle at 70% 70%, rgba(0, 184, 230, 0.85), transparent 50%);
|
||
}
|
||
|
||
.glass-demo-card {
|
||
position: absolute;
|
||
top: 60px;
|
||
left: 100px;
|
||
width: 540px;
|
||
padding: 28px;
|
||
border-radius: var(--radius-glass);
|
||
background: var(--color-bg-glass);
|
||
backdrop-filter: var(--bf-glass-xl);
|
||
-webkit-backdrop-filter: var(--bf-glass-xl);
|
||
border: 1px solid var(--color-border-card);
|
||
box-shadow: var(--shadow-glass);
|
||
z-index: 2;
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 12px;
|
||
}
|
||
.glass-demo-card .tile {
|
||
background: var(--color-bg-card);
|
||
border: 1px solid var(--color-border-card);
|
||
border-radius: 14px;
|
||
padding: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 12px;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
.glass-demo-card .tile.center {
|
||
grid-column: 2;
|
||
grid-row: 1 / span 2;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.glass-demo-card .tile.center .icon { width: 48px; height: 48px; }
|
||
.glass-demo-card .tile .icon { width: 28px; height: 28px; color: var(--color-text-primary); }
|
||
|
||
.glass-demo-suggest {
|
||
position: absolute;
|
||
bottom: 50px;
|
||
left: 100px;
|
||
width: 540px;
|
||
padding: 14px 18px;
|
||
border-radius: 14px;
|
||
background: var(--color-bg-glass);
|
||
backdrop-filter: var(--bf-glass-xl);
|
||
-webkit-backdrop-filter: var(--bf-glass-xl);
|
||
border: 1px solid var(--color-border-card);
|
||
box-shadow: var(--shadow-glass);
|
||
z-index: 2;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
font-size: 13px;
|
||
color: var(--color-text-tertiary);
|
||
}
|
||
|
||
.glass-demo-annot {
|
||
position: absolute;
|
||
right: 24px;
|
||
top: 24px;
|
||
max-width: 220px;
|
||
font-size: 12px;
|
||
color: var(--color-text-tertiary);
|
||
line-height: 1.6;
|
||
z-index: 3;
|
||
}
|
||
.glass-demo-annot strong { color: var(--color-text-primary); display: block; margin-bottom: 4px; }
|
||
|
||
/* ════════════════════════════════════════════════════════════
|
||
SECTION 3 — LOGIN MODAL MOCKUP
|
||
════════════════════════════════════════════════════════════ */
|
||
.login-demo {
|
||
position: relative;
|
||
height: 480px;
|
||
border-radius: var(--radius-glass);
|
||
overflow: hidden;
|
||
background: linear-gradient(135deg, #1a1a2e 0%, #07070f 100%);
|
||
}
|
||
[data-theme="light"] .login-demo {
|
||
background: #fafafa;
|
||
}
|
||
.login-demo .aurora-orb {
|
||
position: absolute;
|
||
filter: blur(80px);
|
||
border-radius: 50%;
|
||
}
|
||
.login-demo .aurora-orb.one { width: 380px; height: 380px; top: -10%; left: -8%; background: var(--color-aurora-1); }
|
||
.login-demo .aurora-orb.two { width: 320px; height: 320px; bottom: -10%; right: -5%; background: var(--color-aurora-3); }
|
||
|
||
.login-modal {
|
||
position: absolute;
|
||
top: 50%; left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 380px;
|
||
padding: 36px;
|
||
background: var(--color-bg-modal-glass);
|
||
backdrop-filter: var(--bf-glass-lg);
|
||
-webkit-backdrop-filter: var(--bf-glass-lg);
|
||
border: 1px solid var(--color-border-card);
|
||
border-radius: var(--radius-glass);
|
||
box-shadow: var(--shadow-glass);
|
||
}
|
||
|
||
.login-modal-logo {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
margin-bottom: 24px;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
}
|
||
.login-modal label {
|
||
display: block;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
color: var(--color-text-secondary);
|
||
margin-bottom: 6px;
|
||
margin-top: 16px;
|
||
}
|
||
.login-modal input {
|
||
width: 100%;
|
||
padding: 10px 12px;
|
||
background: var(--color-bg-card);
|
||
border: 1px solid var(--color-border-card);
|
||
border-radius: 8px;
|
||
font-size: 14px;
|
||
color: var(--color-text-primary);
|
||
font-family: inherit;
|
||
outline: none;
|
||
transition: border-color 0.15s;
|
||
}
|
||
.login-modal input:focus { border-color: var(--color-primary); }
|
||
.login-modal .btn-mint {
|
||
width: 100%;
|
||
padding: 12px;
|
||
margin-top: 24px;
|
||
background: rgba(126, 220, 200, 0.12);
|
||
border: 1px solid rgba(126, 220, 200, 0.30);
|
||
color: #7edcc8;
|
||
border-radius: 10px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
font-family: inherit;
|
||
transition: all 0.15s;
|
||
}
|
||
[data-theme="light"] .login-modal .btn-mint {
|
||
background: rgba(13, 148, 136, 0.08);
|
||
border-color: rgba(13, 148, 136, 0.30);
|
||
color: #0d9488;
|
||
}
|
||
.login-modal .btn-mint:hover { transform: translateY(-1px); }
|
||
|
||
.login-modal .hint {
|
||
font-size: 12px;
|
||
color: var(--color-text-tertiary);
|
||
text-align: center;
|
||
margin-top: 16px;
|
||
}
|
||
|
||
/* ════════════════════════════════════════════════════════════
|
||
SECTION 4 — ADMIN MOCKUP (Vercel 风格平面)
|
||
════════════════════════════════════════════════════════════ */
|
||
.admin-demo {
|
||
display: grid;
|
||
grid-template-columns: 220px 1fr;
|
||
gap: 0;
|
||
border-radius: var(--radius-card);
|
||
overflow: hidden;
|
||
border: 1px solid var(--color-border-card);
|
||
background: var(--color-bg-page);
|
||
min-height: 480px;
|
||
}
|
||
|
||
.admin-sidebar {
|
||
background: var(--color-bg-sidebar);
|
||
backdrop-filter: var(--bf-glass-md);
|
||
-webkit-backdrop-filter: var(--bf-glass-md);
|
||
border-right: 1px solid var(--color-border-card);
|
||
padding: 24px 12px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
.admin-workspace {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 6px 10px;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
margin-bottom: 16px;
|
||
}
|
||
.admin-workspace .brand-mark { width: 24px; height: 24px; border-radius: 6px; }
|
||
|
||
.admin-nav-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 8px 12px;
|
||
border-radius: 8px;
|
||
font-size: 13px;
|
||
color: var(--color-text-secondary);
|
||
cursor: pointer;
|
||
transition: background 0.15s;
|
||
}
|
||
.admin-nav-item:hover { background: rgba(0, 0, 0, 0.04); }
|
||
[data-theme="dark"] .admin-nav-item:hover { background: rgba(255, 255, 255, 0.04); }
|
||
.admin-nav-item.active {
|
||
background: var(--color-primary-bg);
|
||
color: var(--color-primary);
|
||
font-weight: 500;
|
||
}
|
||
.admin-nav-item svg { width: 16px; height: 16px; opacity: 0.8; }
|
||
|
||
.admin-content {
|
||
padding: 32px;
|
||
}
|
||
.admin-content h3 {
|
||
font-size: 22px;
|
||
font-weight: 600;
|
||
letter-spacing: -0.015em;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 12px;
|
||
margin-bottom: 28px;
|
||
}
|
||
.stat-card {
|
||
background: var(--color-bg-card);
|
||
border: 1px solid var(--color-border-card);
|
||
border-radius: var(--radius-card);
|
||
padding: 18px;
|
||
box-shadow: var(--shadow-card);
|
||
}
|
||
.stat-card .label {
|
||
font-size: 12px;
|
||
color: var(--color-text-tertiary);
|
||
margin-bottom: 6px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
font-weight: 500;
|
||
}
|
||
.stat-card .value {
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
letter-spacing: -0.015em;
|
||
}
|
||
.stat-card .delta {
|
||
font-size: 11px;
|
||
margin-top: 4px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 2px;
|
||
}
|
||
.stat-card .delta.up { color: var(--color-success); }
|
||
.stat-card .delta.down { color: var(--color-danger); }
|
||
|
||
/* Mini table */
|
||
.mini-table {
|
||
background: var(--color-bg-card);
|
||
border: 1px solid var(--color-border-card);
|
||
border-radius: var(--radius-card);
|
||
box-shadow: var(--shadow-card);
|
||
overflow: hidden;
|
||
}
|
||
.mini-table-header {
|
||
display: grid;
|
||
grid-template-columns: 1.5fr 1fr 1fr 0.8fr;
|
||
padding: 12px 16px;
|
||
border-bottom: 1px solid var(--color-border-card);
|
||
font-size: 11px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
color: var(--color-text-tertiary);
|
||
font-weight: 600;
|
||
}
|
||
.mini-table-row {
|
||
display: grid;
|
||
grid-template-columns: 1.5fr 1fr 1fr 0.8fr;
|
||
padding: 12px 16px;
|
||
border-bottom: 1px solid var(--color-border-card);
|
||
font-size: 13px;
|
||
align-items: center;
|
||
}
|
||
.mini-table-row:last-child { border-bottom: none; }
|
||
.mini-table-row:hover { background: rgba(0, 0, 0, 0.02); }
|
||
[data-theme="dark"] .mini-table-row:hover { background: rgba(255, 255, 255, 0.02); }
|
||
|
||
.status-pill {
|
||
display: inline-block;
|
||
padding: 2px 10px;
|
||
border-radius: var(--radius-chip);
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
}
|
||
.status-pill.ok {
|
||
background: rgba(0, 163, 126, 0.10);
|
||
color: var(--color-success);
|
||
}
|
||
.status-pill.warn {
|
||
background: rgba(212, 134, 10, 0.10);
|
||
color: #d4860a;
|
||
}
|
||
[data-theme="dark"] .status-pill.warn { background: rgba(243, 156, 18, 0.15); color: #f39c12; }
|
||
|
||
/* ════════════════════════════════════════════════════════════
|
||
SECTION 5 — COLOR TOKENS
|
||
════════════════════════════════════════════════════════════ */
|
||
.tokens-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 12px;
|
||
}
|
||
.swatch {
|
||
background: var(--color-bg-card);
|
||
border: 1px solid var(--color-border-card);
|
||
border-radius: var(--radius-card);
|
||
padding: 14px;
|
||
font-size: 11px;
|
||
}
|
||
.swatch-color {
|
||
height: 56px;
|
||
border-radius: 8px;
|
||
margin-bottom: 8px;
|
||
border: 1px solid var(--color-border-card);
|
||
}
|
||
.swatch-name {
|
||
font-family: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
|
||
color: var(--color-text-secondary);
|
||
font-size: 11px;
|
||
margin-bottom: 2px;
|
||
word-break: break-all;
|
||
}
|
||
.swatch-hex {
|
||
font-family: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
|
||
color: var(--color-text-tertiary);
|
||
font-size: 10px;
|
||
}
|
||
|
||
/* ════════════════════════════════════════════════════════════
|
||
SECTION 6 — TYPOGRAPHY
|
||
════════════════════════════════════════════════════════════ */
|
||
.type-row {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 24px;
|
||
padding: 12px 0;
|
||
border-bottom: 1px solid var(--color-border-card);
|
||
}
|
||
.type-row .label {
|
||
width: 120px;
|
||
font-size: 11px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
color: var(--color-text-tertiary);
|
||
font-weight: 600;
|
||
}
|
||
.type-row .sample { flex: 1; }
|
||
.type-row .spec {
|
||
font-family: ui-monospace, monospace;
|
||
font-size: 11px;
|
||
color: var(--color-text-tertiary);
|
||
width: 200px;
|
||
text-align: right;
|
||
}
|
||
|
||
/* ════════════════════════════════════════════════════════════
|
||
SECTION 7 — BUTTONS
|
||
════════════════════════════════════════════════════════════ */
|
||
.btn-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
align-items: center;
|
||
padding: 24px;
|
||
background: var(--color-bg-card);
|
||
border: 1px solid var(--color-border-card);
|
||
border-radius: var(--radius-card);
|
||
margin-bottom: 16px;
|
||
box-shadow: var(--shadow-card);
|
||
}
|
||
.btn-row + .btn-row-label {
|
||
font-size: 12px;
|
||
color: var(--color-text-tertiary);
|
||
margin-top: -8px;
|
||
margin-bottom: 16px;
|
||
padding-left: 8px;
|
||
}
|
||
|
||
.btn {
|
||
padding: 10px 18px;
|
||
border-radius: var(--radius-btn);
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
font-family: inherit;
|
||
cursor: pointer;
|
||
border: 1px solid transparent;
|
||
transition: all 0.15s;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
.btn-primary {
|
||
background: var(--color-primary);
|
||
color: #ffffff;
|
||
}
|
||
.btn-primary:hover { transform: translateY(-1px); }
|
||
|
||
.btn-black {
|
||
background: #171717;
|
||
color: #ffffff;
|
||
}
|
||
[data-theme="dark"] .btn-black {
|
||
background: #ffffff;
|
||
color: #171717;
|
||
}
|
||
|
||
.btn-ghost {
|
||
background: var(--color-bg-glass-strong);
|
||
border-color: var(--color-border-card);
|
||
color: var(--color-text-primary);
|
||
backdrop-filter: var(--bf-glass-sm);
|
||
-webkit-backdrop-filter: var(--bf-glass-sm);
|
||
}
|
||
.btn-ghost:hover {
|
||
background: var(--color-bg-glass);
|
||
}
|
||
|
||
.btn-pill {
|
||
border-radius: 9999px;
|
||
padding: 10px 22px;
|
||
}
|
||
|
||
.chip-warm {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 6px 12px;
|
||
background: var(--color-chip-warm-bg);
|
||
border: 1px solid var(--color-chip-warm-border);
|
||
border-radius: var(--radius-chip);
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
color: var(--color-chip-warm-text);
|
||
}
|
||
.chip-info {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 4px 10px;
|
||
background: var(--color-chip-info-bg);
|
||
border: 1px solid var(--color-chip-info-border);
|
||
border-radius: var(--radius-chip);
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
color: var(--color-primary);
|
||
}
|
||
|
||
/* ════════════════════════════════════════════════════════════
|
||
ANNOTATIONS
|
||
════════════════════════════════════════════════════════════ */
|
||
.note {
|
||
font-size: 12px;
|
||
color: var(--color-text-tertiary);
|
||
line-height: 1.7;
|
||
background: var(--color-bg-card);
|
||
border: 1px dashed var(--color-border-card);
|
||
border-radius: 8px;
|
||
padding: 14px 16px;
|
||
margin-top: 16px;
|
||
}
|
||
.note strong { color: var(--color-text-primary); }
|
||
|
||
/* ════════════════════════════════════════════════════════════
|
||
RESPONSIVE
|
||
════════════════════════════════════════════════════════════ */
|
||
@media (max-width: 900px) {
|
||
.hero h1 { font-size: 40px; }
|
||
.glass-window-body { grid-template-columns: 1fr 1fr; }
|
||
.stats-grid { grid-template-columns: 1fr 1fr; }
|
||
.tokens-grid { grid-template-columns: 1fr 1fr; }
|
||
.admin-demo { grid-template-columns: 1fr; }
|
||
main { padding: 40px 20px; gap: 60px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Aurora decorative layer (visible in both themes, pastel in light) -->
|
||
<div class="aurora-bg">
|
||
<div class="aurora-orb one"></div>
|
||
<div class="aurora-orb two"></div>
|
||
<div class="aurora-orb three"></div>
|
||
<div class="aurora-orb four"></div>
|
||
</div>
|
||
|
||
<header class="topbar">
|
||
<div class="brand">
|
||
<span class="brand-mark"></span>
|
||
<span>AirDrama 主题 V2 · Style Alignment</span>
|
||
</div>
|
||
<div class="right">
|
||
<span class="theme-label" id="theme-label">浅色 LIGHT</span>
|
||
<button class="theme-toggle" id="toggle" title="切换主题">
|
||
<svg id="icon-moon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
|
||
<svg id="icon-sun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
|
||
<!-- ═══════════════════════════════════════════
|
||
SECTION 1 — HERO (GitBook-style marketing)
|
||
═══════════════════════════════════════════ -->
|
||
<section class="hero">
|
||
<span class="hero-chip">
|
||
<span class="badge">NEW</span>
|
||
AirDrama V2 主题切换上线 — 浅色玻璃质感重做
|
||
</span>
|
||
<h1>逐帧造梦,<br/>晨光也能开始</h1>
|
||
<p>同一个 AirDrama,深色保留专业影视气场,浅色继承 Vercel × GitBook 的玻璃语言 —— 强光环境 / 投资人 demo / 白天工作都更舒服。</p>
|
||
<div class="hero-cta">
|
||
<button class="btn btn-primary btn-pill">立即体验</button>
|
||
<button class="btn btn-ghost btn-pill">查看 V2 plan</button>
|
||
</div>
|
||
|
||
<!-- Glass window mockup 模拟 GitBook 首页 hero image -->
|
||
<div class="glass-window-frame">
|
||
<div class="deco-blob"></div>
|
||
<div class="glass-window">
|
||
<div class="glass-window-titlebar">
|
||
<span class="win-dot r"></span>
|
||
<span class="win-dot y"></span>
|
||
<span class="win-dot g"></span>
|
||
<span class="glass-window-title">AirDrama · 生成工作台</span>
|
||
</div>
|
||
<div class="glass-window-body">
|
||
<div class="glass-mini-card">
|
||
<div class="icon">
|
||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M8 12l3 3 5-6"/></svg>
|
||
</div>
|
||
<h4>素材管理</h4>
|
||
<p>统一管理参考视频 / 图像 / 音频,@提示词即可调用</p>
|
||
</div>
|
||
<div class="glass-mini-card">
|
||
<div class="icon">
|
||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
|
||
</div>
|
||
<h4>一键生成</h4>
|
||
<p>Seedance 2.0 高质量 / Fast 快速,首尾帧或全能参考</p>
|
||
</div>
|
||
<div class="glass-mini-card">
|
||
<div class="icon">
|
||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3v18h18"/><path d="M7 14l4-4 4 4 5-5"/></svg>
|
||
</div>
|
||
<h4>消费分析</h4>
|
||
<p>团队消费、用户排行、趋势图,精确到 token</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════════════════════════════════════
|
||
SECTION 2 — GLASS DEMO (Framer 风格特写)
|
||
═══════════════════════════════════════════ -->
|
||
<section>
|
||
<div class="section-label">02 — 玻璃质感拆解</div>
|
||
<h2 class="section-title">Frosted Glass · 配方</h2>
|
||
<p class="section-desc">参考 Framer / GitBook hero card 的"半透明白 + backdrop-blur + saturate + inset highlight"标准实现。深色下白卡浮在彩色 aurora 上 / 浅色下白卡浮在 pastel 装饰上 —— 不变的是穿透与微高光。</p>
|
||
<div class="glass-demo">
|
||
<div class="glass-demo-swirl"></div>
|
||
<div class="glass-demo-card">
|
||
<div class="tile">
|
||
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
|
||
编辑
|
||
</div>
|
||
<div class="tile center">
|
||
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
|
||
</div>
|
||
<div class="tile">
|
||
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
|
||
导出
|
||
</div>
|
||
<div class="tile">
|
||
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><line x1="4" y1="9" x2="20" y2="9"/><line x1="4" y1="15" x2="20" y2="15"/><line x1="10" y1="3" x2="8" y2="21"/><line x1="16" y1="3" x2="14" y2="21"/></svg>
|
||
模式
|
||
</div>
|
||
<div class="tile">
|
||
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
|
||
历史
|
||
</div>
|
||
</div>
|
||
<div class="glass-demo-suggest">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
|
||
<span>下一步建议:试试用首尾帧模式快速生成转场镜头...</span>
|
||
</div>
|
||
<div class="glass-demo-annot">
|
||
<strong>玻璃配方</strong>
|
||
bg: rgba(255,255,255,0.65)<br/>
|
||
backdrop-filter: blur(40px) saturate(180%)<br/>
|
||
border: 1px solid rgba(255,255,255,0.7)<br/>
|
||
inset 0 1px 0 rgba(255,255,255,0.5)<br/>
|
||
shadow: 0 8px 32px rgba(0,0,0,0.06)
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════════════════════════════════════
|
||
SECTION 3 — LOGIN MODAL MOCKUP
|
||
═══════════════════════════════════════════ -->
|
||
<section>
|
||
<div class="section-label">03 — 登录页玻璃 modal</div>
|
||
<h2 class="section-title">Login · 浅色玻璃化</h2>
|
||
<p class="section-desc">V1 错:LandingPage 强制 dark,登录卡始终深色。V2:LandingPage 跟随主题切换,浅色下 LoginModal 是透明白玻璃,后面 pastel aurora 透过来。薄荷绿在浅色下加深为 teal 保证对比度。</p>
|
||
<div class="login-demo">
|
||
<div class="aurora-orb one"></div>
|
||
<div class="aurora-orb two"></div>
|
||
<div class="login-modal">
|
||
<div class="login-modal-logo">
|
||
<span class="brand-mark" style="width:24px;height:24px;border-radius:6px"></span>
|
||
<span>Air Drama</span>
|
||
</div>
|
||
<label>用户名 / 邮箱</label>
|
||
<input type="text" placeholder="请输入用户名或邮箱"/>
|
||
<label>密码</label>
|
||
<input type="password" placeholder="请输入密码"/>
|
||
<button class="btn-mint">登 录</button>
|
||
<div class="hint">目前仅限受邀创作者体验</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════════════════════════════════════
|
||
SECTION 4 — ADMIN DASHBOARD (Vercel flat)
|
||
═══════════════════════════════════════════ -->
|
||
<section>
|
||
<div class="section-label">04 — 后台仪表盘</div>
|
||
<h2 class="section-title">App · 平面 + 阴影边</h2>
|
||
<p class="section-desc">后台 / 生成页主区不要全玻璃 —— 数据要专注。Vercel 风格:纯白实体卡 + 1px 阴影边 + 多层柔阴影。Sidebar 例外,继续玻璃。</p>
|
||
<div class="admin-demo">
|
||
<aside class="admin-sidebar">
|
||
<div class="admin-workspace">
|
||
<span class="brand-mark"></span>
|
||
<span>AirDrama Admin</span>
|
||
</div>
|
||
<div class="admin-nav-item active">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
|
||
仪表盘
|
||
</div>
|
||
<div class="admin-nav-item">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
|
||
用户管理
|
||
</div>
|
||
<div class="admin-nav-item">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
|
||
消费记录
|
||
</div>
|
||
<div class="admin-nav-item">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09a1.65 1.65 0 0 0 1.51-1z"/></svg>
|
||
系统设置
|
||
</div>
|
||
</aside>
|
||
<div class="admin-content">
|
||
<h3>仪表盘</h3>
|
||
<div class="stats-grid">
|
||
<div class="stat-card">
|
||
<div class="label">总团队数</div>
|
||
<div class="value">12</div>
|
||
<div class="delta up">↑ 8.3%</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="label">总用户数</div>
|
||
<div class="value">347</div>
|
||
<div class="delta up">↑ 12.4%</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="label">今日消费</div>
|
||
<div class="value">¥1,284</div>
|
||
<div class="delta down">↓ 2.1%</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="label">本月消费</div>
|
||
<div class="value">¥42.6k</div>
|
||
<div class="delta up">↑ 23.7%</div>
|
||
</div>
|
||
</div>
|
||
<div class="mini-table">
|
||
<div class="mini-table-header">
|
||
<div>用户</div>
|
||
<div>团队</div>
|
||
<div>消费 (本月)</div>
|
||
<div>状态</div>
|
||
</div>
|
||
<div class="mini-table-row">
|
||
<div>screenshot_user</div>
|
||
<div>默认团队</div>
|
||
<div>¥1,284.50</div>
|
||
<div><span class="status-pill ok">启用</span></div>
|
||
</div>
|
||
<div class="mini-table-row">
|
||
<div>huhaonan</div>
|
||
<div>影视组</div>
|
||
<div>¥3,920.10</div>
|
||
<div><span class="status-pill ok">启用</span></div>
|
||
</div>
|
||
<div class="mini-table-row">
|
||
<div>maruoqing</div>
|
||
<div>影视组</div>
|
||
<div>¥520.00</div>
|
||
<div><span class="status-pill warn">配额满</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════════════════════════════════════
|
||
SECTION 5 — COLOR TOKENS
|
||
═══════════════════════════════════════════ -->
|
||
<section>
|
||
<div class="section-label">05 — 色板</div>
|
||
<h2 class="section-title">Token · 浅色映射</h2>
|
||
<p class="section-desc">切换主题观察色板差异。深色 → 浅色不是简单反色,而是按"语义"重新映射 —— 玻璃面用透明白、状态色加深 18% (WCAG AA)、文字走 Vercel 灰阶。</p>
|
||
<div class="tokens-grid">
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background: var(--color-bg-page);"></div>
|
||
<div class="swatch-name">--color-bg-page</div>
|
||
<div class="swatch-hex" id="hex-bg-page">—</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background: var(--color-bg-glass); backdrop-filter: var(--bf-glass-md); -webkit-backdrop-filter: var(--bf-glass-md);"></div>
|
||
<div class="swatch-name">--color-bg-glass</div>
|
||
<div class="swatch-hex" id="hex-bg-glass">—</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background: var(--color-bg-card);"></div>
|
||
<div class="swatch-name">--color-bg-card</div>
|
||
<div class="swatch-hex" id="hex-bg-card">—</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background: var(--color-bg-sidebar); backdrop-filter: var(--bf-glass-md); -webkit-backdrop-filter: var(--bf-glass-md);"></div>
|
||
<div class="swatch-name">--color-bg-sidebar</div>
|
||
<div class="swatch-hex" id="hex-bg-sidebar">—</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background: var(--color-primary);"></div>
|
||
<div class="swatch-name">--color-primary</div>
|
||
<div class="swatch-hex" id="hex-primary">—</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background: var(--color-success);"></div>
|
||
<div class="swatch-name">--color-success</div>
|
||
<div class="swatch-hex" id="hex-success">—</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background: var(--color-danger);"></div>
|
||
<div class="swatch-name">--color-danger</div>
|
||
<div class="swatch-hex" id="hex-danger">—</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background: var(--color-text-primary);"></div>
|
||
<div class="swatch-name">--color-text-primary</div>
|
||
<div class="swatch-hex" id="hex-text">—</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════════════════════════════════════
|
||
SECTION 6 — TYPOGRAPHY
|
||
═══════════════════════════════════════════ -->
|
||
<section>
|
||
<div class="section-label">06 — 字体层级</div>
|
||
<h2 class="section-title">Typography · Inter + Noto Sans SC</h2>
|
||
<p class="section-desc">Inter 做拉丁字 + Noto Sans SC 做中文,开启 OpenType cv01 / ss03 让字形更几何。深浅模式字号 / 字重不变,只换颜色。</p>
|
||
<div class="type-row">
|
||
<span class="label">Display</span>
|
||
<span class="sample" style="font-size:48px;font-weight:600;letter-spacing:-0.02em;">逐帧造梦,晨光开始</span>
|
||
<span class="spec">48px · 600 · -0.02em</span>
|
||
</div>
|
||
<div class="type-row">
|
||
<span class="label">Heading</span>
|
||
<span class="sample" style="font-size:24px;font-weight:600;letter-spacing:-0.015em;">影视专业 / 投资人 demo / 白天工作</span>
|
||
<span class="spec">24px · 600 · -0.015em</span>
|
||
</div>
|
||
<div class="type-row">
|
||
<span class="label">Body</span>
|
||
<span class="sample" style="font-size:16px;font-weight:400;line-height:1.6;">AirDrama 把生成 / 编辑 / 资产管理 / 团队配额一站打通,目标是工业级影视协作工具。</span>
|
||
<span class="spec">16px · 400 · 1.6</span>
|
||
</div>
|
||
<div class="type-row">
|
||
<span class="label">Small</span>
|
||
<span class="sample" style="font-size:14px;color:var(--color-text-secondary);">支持火山 Seedance 2.0 / 2.0 Fast,token 实时计费,失败自动重试。</span>
|
||
<span class="spec">14px · 400 · secondary</span>
|
||
</div>
|
||
<div class="type-row">
|
||
<span class="label">Caption</span>
|
||
<span class="sample" style="font-size:12px;color:var(--color-text-tertiary);">最后更新于 2026-05-11 · 主题切换 V2 alignment showcase</span>
|
||
<span class="spec">12px · 400 · tertiary</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════════════════════════════════════
|
||
SECTION 7 — BUTTONS & CHIPS
|
||
═══════════════════════════════════════════ -->
|
||
<section>
|
||
<div class="section-label">07 — 按钮 / Chip</div>
|
||
<h2 class="section-title">Actions</h2>
|
||
<p class="section-desc">主要决策:CTA 用品牌主色还是 GitBook 黑?Chip 风格?这一节展示备选,你挑。</p>
|
||
|
||
<div class="btn-row">
|
||
<button class="btn btn-primary">立即体验</button>
|
||
<button class="btn btn-primary btn-pill">立即体验 (Pill)</button>
|
||
<button class="btn btn-black">Start for free</button>
|
||
<button class="btn btn-black btn-pill">Start for free (Pill)</button>
|
||
<button class="btn btn-ghost">Talk to us</button>
|
||
<button class="btn btn-ghost btn-pill">Talk to us (Pill)</button>
|
||
</div>
|
||
<div class="btn-row-label">主 CTA 三选:品牌紫 / GitBook 黑 / Ghost · 矩形 vs Pill</div>
|
||
|
||
<div class="btn-row">
|
||
<span class="chip-warm">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>
|
||
新版 AirDrama V2 主题切换上线
|
||
</span>
|
||
<span class="chip-info">
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
|
||
Beta
|
||
</span>
|
||
<span class="status-pill ok">启用</span>
|
||
<span class="status-pill warn">配额满</span>
|
||
</div>
|
||
<div class="btn-row-label">Chip / Status pill — 暖米色公告 chip / 信息 chip / 状态 pill</div>
|
||
</section>
|
||
|
||
<!-- ═══════════════════════════════════════════
|
||
SECTION 8 — NOTE
|
||
═══════════════════════════════════════════ -->
|
||
<section>
|
||
<div class="section-label">08 — 设计决策待定</div>
|
||
<h2 class="section-title">Open Questions</h2>
|
||
<div class="note">
|
||
<strong>1. CTA 主按钮:品牌紫 #5048cc / GitBook 黑 #171717 / 双轨?</strong>
|
||
建议:营销页主 CTA 用 GitBook 黑加冲击力,产品内用品牌紫保持识别。<br/><br/>
|
||
|
||
<strong>2. AuroraCanvas 浅色处理:保留 / pastel / 完全隐藏?</strong>
|
||
Showcase 用了 pastel 紫蓝桃方案。如果觉得花,可以浅色直接 `opacity: 0.5` 压一档。<br/><br/>
|
||
|
||
<strong>3. 整体气质偏向:GitBook (橙暖) / Linear (中性冷) / Vercel (纯净灰)?</strong>
|
||
Showcase 默认 Vercel 灰 + Linear pastel aurora 混合。GitBook 那种橙是品牌色不抄,但暖 chip 我们留着用在公告。<br/><br/>
|
||
|
||
<strong>4. Modal overlay 强度:浅色下保留多少黑?</strong>
|
||
V2 plan 是 `rgba(0,0,0,0.20)` 较弱。如果想"重要弹窗更突出",可以 0.35。<br/><br/>
|
||
|
||
<strong>5. 字体:继续 Noto Sans SC(目前) / 切换到 Inter + 中文混排?</strong>
|
||
Inter 字面更紧凑现代,Noto Sans SC 更"温和"。Showcase 用了 Inter 拉丁 + Noto 中文。
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<script>
|
||
// Theme toggle
|
||
const html = document.documentElement;
|
||
const toggle = document.getElementById('toggle');
|
||
const moon = document.getElementById('icon-moon');
|
||
const sun = document.getElementById('icon-sun');
|
||
const label = document.getElementById('theme-label');
|
||
|
||
function setIcon(theme) {
|
||
if (theme === 'dark') {
|
||
moon.style.display = 'none';
|
||
sun.style.display = 'block';
|
||
label.textContent = '深色 DARK';
|
||
} else {
|
||
moon.style.display = 'block';
|
||
sun.style.display = 'none';
|
||
label.textContent = '浅色 LIGHT';
|
||
}
|
||
}
|
||
setIcon(html.dataset.theme);
|
||
|
||
toggle.addEventListener('click', () => {
|
||
const next = html.dataset.theme === 'dark' ? 'light' : 'dark';
|
||
html.dataset.theme = next;
|
||
setIcon(next);
|
||
updateHex();
|
||
});
|
||
|
||
// Live hex display
|
||
function readVar(name) {
|
||
return getComputedStyle(html).getPropertyValue(name).trim();
|
||
}
|
||
function updateHex() {
|
||
document.getElementById('hex-bg-page').textContent = readVar('--color-bg-page');
|
||
document.getElementById('hex-bg-glass').textContent = readVar('--color-bg-glass');
|
||
document.getElementById('hex-bg-card').textContent = readVar('--color-bg-card');
|
||
document.getElementById('hex-bg-sidebar').textContent = readVar('--color-bg-sidebar');
|
||
document.getElementById('hex-primary').textContent = readVar('--color-primary');
|
||
document.getElementById('hex-success').textContent = readVar('--color-success');
|
||
document.getElementById('hex-danger').textContent = readVar('--color-danger');
|
||
document.getElementById('hex-text').textContent = readVar('--color-text-primary');
|
||
}
|
||
updateHex();
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|