bingshuo/hololake-system-architecture
Watch
1
0
Fork
You've already forked hololake-system-architecture
 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity

feat: 首页重造为光湖世界大门——编号门(灯塔查号只答有效/无效)→域浮起(欢迎语+湖湾升起)→钥匙门(账号密码)，复用zero_point校验器官（冰朔20260816谕：先校验编号再路由到域）

Browse source
This commit is contained in:
冰朔 2026-08-16 01:12:54 +08:00
commit ff10aaaea8
2 changed files with 94 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

23
product-source/hololake-native-desktop/src/styles.css
View file

@ -436,3 +436,26 @@ svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-lineca
@keyframes bay-rise { 0% { transform: translateY(0) scale(1); } 55% { transform: translateY(-52px) scale(1.2); } 100% { transform: translateY(-150px) scale(1.9); } }
.onboarding-card { position: relative; z-index: 1; transition: opacity .7s ease, transform .7s ease; }
.onboarding-card.fade-out { opacity: 0; transform: translateY(16px) scale(.985); }
/* ===== 光湖世界大门（编号门→域浮起→钥匙门）===== */
.gate-card { width: min(520px, 100%); text-align: center; }
.gate-card form { text-align: left; }
.gate-mark { width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 22px; font-size: 22px; border-color: color-mix(in srgb, var(--primitive-warm-glow) 46%, transparent); color: var(--accent-light); box-shadow: 0 0 42px color-mix(in srgb, var(--primitive-warm-glow) 30%, transparent), inset 0 0 22px color-mix(in srgb, var(--primitive-warm-glow) 14%, transparent); animation: gate-mark-breathe 4.5s ease-in-out infinite; }
@keyframes gate-mark-breathe { 0%, 100% { box-shadow: 0 0 30px color-mix(in srgb, var(--primitive-warm-glow) 22%, transparent), inset 0 0 18px color-mix(in srgb, var(--primitive-warm-glow) 10%, transparent); } 50% { box-shadow: 0 0 58px color-mix(in srgb, var(--primitive-warm-glow) 40%, transparent), inset 0 0 26px color-mix(in srgb, var(--primitive-warm-glow) 18%, transparent); } }
.gate-card h1 { font-size: 30px; letter-spacing: .04em; }
.gate-card .kicker { letter-spacing: .3em; color: color-mix(in srgb, var(--primitive-warm-glow) 78%, var(--content-muted)); }
.gate-steps { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 22px; }
.gate-steps span { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; border: 1px solid var(--panel-edge); border-radius: 999px; color: var(--content-faint); font-size: 12px; letter-spacing: .12em; transition: all .4s ease; }
.gate-steps span i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid currentColor; font-style: normal; font-size: 10px; }
.gate-steps span.active { color: var(--accent-light); border-color: color-mix(in srgb, var(--primitive-warm-glow) 52%, transparent); background: color-mix(in srgb, var(--primitive-warm-glow) 9%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--primitive-warm-glow) 18%, transparent); }
.gate-steps span.done { color: var(--content-secondary); border-color: color-mix(in srgb, var(--accent-light) 34%, transparent); }
.gate-steps em { width: 34px; height: 1px; background: linear-gradient(90deg, var(--panel-edge), color-mix(in srgb, var(--primitive-warm-glow) 42%, transparent)); }
.gate-number-chip { padding: 1px 8px; border: 1px solid color-mix(in srgb, var(--primitive-warm-glow) 44%, transparent); border-radius: 7px; color: var(--accent-light); font-weight: 600; letter-spacing: .03em; }
.gate-back { margin-top: 16px; border: 0; background: none; color: var(--content-faint); font-size: 12.5px; letter-spacing: .08em; cursor: pointer; transition: color .25s ease; }
.gate-back:hover { color: var(--accent-light); }
.gate-message { margin-top: 14px; color: var(--content-muted); font-size: 13px; }
.gate-welcome { position: relative; z-index: 2; text-align: center; animation: gate-welcome-in 1s cubic-bezier(.3, .7, .35, 1) both; }
.gate-welcome-kicker { display: inline-block; padding: 6px 16px; border: 1px solid color-mix(in srgb, var(--primitive-warm-glow) 40%, transparent); border-radius: 999px; color: var(--accent-light); font-size: 12px; letter-spacing: .26em; text-indent: .26em; background: color-mix(in srgb, var(--primitive-warm-glow) 8%, transparent); }
.gate-welcome h1 { margin: 20px 0 12px; color: var(--content-primary); font-size: clamp(30px, 4.6vw, 44px); font-weight: 650; letter-spacing: .06em; text-shadow: 0 0 46px color-mix(in srgb, var(--primitive-warm-glow) 34%, transparent); }
.gate-welcome p { color: var(--content-muted); font-size: 14.5px; line-height: 1.7; }
@keyframes gate-welcome-in { 0% { opacity: 0; transform: translateY(26px) scale(.97); } 100% { opacity: 1; transform: translateY(0) scale(1); } }