feat: 大门v4门面上天——品牌身份拆出编号舱,整面湖做hero(大徽标+HoloLake大主标+技术名+GH-AIOS逐行缓现);舱瘦身为纯功能舱只装输入与提交;过关时门面虚化让位升湖(冰朔20260816谕:光湖配得上一面大气的首页)
This commit is contained in:
parent
c624a72124
commit
33578f9fe1
2 changed files with 19 additions and 19 deletions
|
|
@ -947,6 +947,12 @@ function HoloLakeApp() {
|
||||||
<div className={`gate-lake${loginRising ? ' sinking' : ''}`} style={{ '--lake-img': `url(${nightLake})` } as React.CSSProperties}>
|
<div className={`gate-lake${loginRising ? ' sinking' : ''}`} style={{ '--lake-img': `url(${nightLake})` } as React.CSSProperties}>
|
||||||
<i className="lake-mist" aria-hidden="true"/>
|
<i className="lake-mist" aria-hidden="true"/>
|
||||||
<div className="lake-lights" aria-hidden="true">{[1, 2, 3, 4, 5].map((n) => <span key={n} className={`lake-light l${n}${(gateRising || loginRising) && n === 5 ? ' rising' : ''}`}/>)}</div>
|
<div className="lake-lights" aria-hidden="true">{[1, 2, 3, 4, 5].map((n) => <span key={n} className={`lake-light l${n}${(gateRising || loginRising) && n === 5 ? ' rising' : ''}`}/>)}</div>
|
||||||
|
{<header className={`gate-hero${gateRising ? ' veil' : ''}`} aria-hidden={gateRising || undefined}>
|
||||||
|
<span className="gate-emblem" aria-hidden="true"><i/></span>
|
||||||
|
<b className="gate-product">HoloLake</b>
|
||||||
|
<small className="gate-techname">光湖语言系统 · 通用人工智能操作平台</small>
|
||||||
|
<small className="gate-abbr">GH-AIOS · GuangHu AI Operating System</small>
|
||||||
|
</header>}
|
||||||
{gateRising ? (
|
{gateRising ? (
|
||||||
<section className="gate-rise" role="status">
|
<section className="gate-rise" role="status">
|
||||||
<span className="gate-rise-star" aria-hidden="true"><i/></span>
|
<span className="gate-rise-star" aria-hidden="true"><i/></span>
|
||||||
|
|
@ -955,12 +961,6 @@ function HoloLakeApp() {
|
||||||
</section>
|
</section>
|
||||||
) : gateStage === 'number' ? (
|
) : gateStage === 'number' ? (
|
||||||
<section className={`gate-pod${loginRising ? ' fade-out' : ''}`} role="dialog">
|
<section className={`gate-pod${loginRising ? ' fade-out' : ''}`} role="dialog">
|
||||||
<header className="gate-brand">
|
|
||||||
<span className="gate-emblem" aria-hidden="true"><i/></span>
|
|
||||||
<b className="gate-product">HoloLake</b>
|
|
||||||
<small className="gate-techname">光湖语言系统 · 通用人工智能操作平台</small>
|
|
||||||
<small className="gate-abbr">GH-AIOS · GuangHu AI Operating System</small>
|
|
||||||
</header>
|
|
||||||
<div className="gate-pod-row">
|
<div className="gate-pod-row">
|
||||||
<input id="gate-number" aria-label="编号" autoFocus maxLength={48} value={gateNumber} placeholder="如 ICE-GL∞" onChange={(event) => onGateInput(event.target.value)} onKeyDown={(event) => { if (event.key === 'Enter' && gateNumber) { event.preventDefault(); void gateVerifyNumber() } }}/>
|
<input id="gate-number" aria-label="编号" autoFocus maxLength={48} value={gateNumber} placeholder="如 ICE-GL∞" onChange={(event) => onGateInput(event.target.value)} onKeyDown={(event) => { if (event.key === 'Enter' && gateNumber) { event.preventDefault(); void gateVerifyNumber() } }}/>
|
||||||
<button type="button" className={`gate-inf${gateInf ? ' on' : ''}`} title="编号里带无限符号就点一下点亮" aria-pressed={gateInf} onClick={() => setGateInf((v) => !v)}>∞</button>
|
<button type="button" className={`gate-inf${gateInf ? ' on' : ''}`} title="编号里带无限符号就点一下点亮" aria-pressed={gateInf} onClick={() => setGateInf((v) => !v)}>∞</button>
|
||||||
|
|
@ -970,12 +970,6 @@ function HoloLakeApp() {
|
||||||
</section>
|
</section>
|
||||||
) : (
|
) : (
|
||||||
<section className={`gate-pod gate-pod-key${loginRising ? ' fade-out' : ''}`} role="dialog">
|
<section className={`gate-pod gate-pod-key${loginRising ? ' fade-out' : ''}`} role="dialog">
|
||||||
<header className="gate-brand">
|
|
||||||
<span className="gate-emblem" aria-hidden="true"><i/></span>
|
|
||||||
<b className="gate-product">HoloLake</b>
|
|
||||||
<small className="gate-techname">光湖语言系统 · 通用人工智能操作平台</small>
|
|
||||||
<small className="gate-abbr">GH-AIOS · GuangHu AI Operating System</small>
|
|
||||||
</header>
|
|
||||||
<form onSubmit={(event) => void performRepoLogin(event)}>
|
<form onSubmit={(event) => void performRepoLogin(event)}>
|
||||||
<input id="repo-login-username" aria-label="账号" autoFocus maxLength={40} value={loginUsername} placeholder="账号" onChange={(event) => setLoginUsername(event.target.value)}/>
|
<input id="repo-login-username" aria-label="账号" autoFocus maxLength={40} value={loginUsername} placeholder="账号" onChange={(event) => setLoginUsername(event.target.value)}/>
|
||||||
<input id="repo-login-password" aria-label="密码" type="password" maxLength={512} value={loginPassword} placeholder="密码" onChange={(event) => setLoginPassword(event.target.value)}/>
|
<input id="repo-login-password" aria-label="密码" type="password" maxLength={512} value={loginPassword} placeholder="密码" onChange={(event) => setLoginPassword(event.target.value)}/>
|
||||||
|
|
|
||||||
|
|
@ -438,7 +438,7 @@ svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-lineca
|
||||||
.onboarding-card.fade-out { opacity: 0; transform: translateY(16px) scale(.985); }
|
.onboarding-card.fade-out { opacity: 0; transform: translateY(16px) scale(.985); }
|
||||||
|
|
||||||
/* ===== 光湖世界大门 v2:一片湖 · 五块沉底玉 · 一只悬浮编号舱 ===== */
|
/* ===== 光湖世界大门 v2:一片湖 · 五块沉底玉 · 一只悬浮编号舱 ===== */
|
||||||
.gate-lake { position: fixed; inset: 0; z-index: 20; overflow: hidden; display: grid; place-items: center; background-image: linear-gradient(180deg, color-mix(in srgb, var(--surface-depth) 62%, transparent), color-mix(in srgb, #04070d 78%, transparent) 88%), var(--lake-img); background-size: cover, cover; background-position: center 30%, center; transition: opacity .9s ease; }
|
.gate-lake { position: fixed; inset: 0; z-index: 20; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(26px, 5vh, 54px); background-image: linear-gradient(180deg, color-mix(in srgb, var(--surface-depth) 62%, transparent), color-mix(in srgb, #04070d 78%, transparent) 88%), var(--lake-img); background-size: cover, cover; background-position: center 30%, center; transition: opacity .9s ease; }
|
||||||
.gate-lake.sinking { opacity: 0; }
|
.gate-lake.sinking { opacity: 0; }
|
||||||
.lake-mist { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 34% at 50% 68%, color-mix(in srgb, var(--primitive-cool-glow) 13%, transparent), transparent 72%); animation: mist-drift 11s ease-in-out infinite; }
|
.lake-mist { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 34% at 50% 68%, color-mix(in srgb, var(--primitive-cool-glow) 13%, transparent), transparent 72%); animation: mist-drift 11s ease-in-out infinite; }
|
||||||
@keyframes mist-drift { 0%, 100% { opacity: .55; transform: translateX(0); } 50% { opacity: .95; transform: translateX(2.4%); } }
|
@keyframes mist-drift { 0%, 100% { opacity: .55; transform: translateX(0); } 50% { opacity: .95; transform: translateX(2.4%); } }
|
||||||
|
|
@ -452,18 +452,24 @@ svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-lineca
|
||||||
@keyframes light-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
|
@keyframes light-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
|
||||||
|
|
||||||
/* 编号舱:湖面正中一只悬浮玻璃舱,只装编号 */
|
/* 编号舱:湖面正中一只悬浮玻璃舱,只装编号 */
|
||||||
.gate-pod { position: relative; z-index: 3; width: min(400px, 88vw); padding: 38px 32px 32px; text-align: center; border: 1px solid color-mix(in srgb, var(--accent-light) 22%, transparent); border-radius: 24px; background: color-mix(in srgb, var(--panel-bg) 62%, transparent); backdrop-filter: blur(26px) saturate(1.15); box-shadow: 0 34px 90px rgba(0, 0, 0, .5), 0 0 70px color-mix(in srgb, var(--primitive-warm-glow) 9%, transparent), inset 0 1px 0 rgba(255, 255, 255, .07); animation: pod-float 6.5s ease-in-out infinite; transition: opacity .7s ease, transform .7s ease; }
|
.gate-pod { position: relative; z-index: 3; width: min(400px, 88vw); padding: 26px 30px 28px; text-align: center; border: 1px solid color-mix(in srgb, var(--accent-light) 22%, transparent); border-radius: 24px; background: color-mix(in srgb, var(--panel-bg) 62%, transparent); backdrop-filter: blur(26px) saturate(1.15); box-shadow: 0 34px 90px rgba(0, 0, 0, .5), 0 0 70px color-mix(in srgb, var(--primitive-warm-glow) 9%, transparent), inset 0 1px 0 rgba(255, 255, 255, .07); animation: pod-float 6.5s ease-in-out infinite; transition: opacity .7s ease, transform .7s ease; }
|
||||||
.gate-pod.fade-out { opacity: 0; transform: translateY(18px) scale(.985); }
|
.gate-pod.fade-out { opacity: 0; transform: translateY(18px) scale(.985); }
|
||||||
@keyframes pod-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
|
@keyframes pod-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
|
||||||
.gate-brand { display: grid; justify-items: center; gap: 7px; margin-bottom: 28px; }
|
.gate-hero { position: relative; z-index: 2; display: grid; justify-items: center; gap: 10px; text-align: center; padding: 0 24px; transition: opacity 1.1s ease, transform 1.1s ease, filter 1.1s ease; }
|
||||||
.gate-emblem { position: relative; width: 46px; height: 46px; margin-bottom: 8px; }
|
.gate-hero.veil { opacity: 0; transform: translateY(-14px) scale(1.03); filter: blur(4px); pointer-events: none; }
|
||||||
|
.gate-hero > * { animation: hero-in 1.1s ease both; }
|
||||||
|
.gate-hero > *:nth-child(2) { animation-delay: .15s; }
|
||||||
|
.gate-hero > *:nth-child(3) { animation-delay: .32s; }
|
||||||
|
.gate-hero > *:nth-child(4) { animation-delay: .48s; }
|
||||||
|
@keyframes hero-in { 0% { opacity: 0; transform: translateY(16px); } 100% { opacity: 1; transform: translateY(0); } }
|
||||||
|
.gate-emblem { position: relative; width: 62px; height: 62px; margin-bottom: 6px; }
|
||||||
.gate-emblem::before { content: ''; position: absolute; inset: 0; border: 1px solid color-mix(in srgb, var(--accent-light) 30%, transparent); border-radius: 50%; box-shadow: 0 0 22px color-mix(in srgb, var(--primitive-warm-glow) 12%, transparent); }
|
.gate-emblem::before { content: ''; position: absolute; inset: 0; border: 1px solid color-mix(in srgb, var(--accent-light) 30%, transparent); border-radius: 50%; box-shadow: 0 0 22px color-mix(in srgb, var(--primitive-warm-glow) 12%, transparent); }
|
||||||
.gate-emblem::after { content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--primitive-warm-glow); box-shadow: 0 0 18px color-mix(in srgb, var(--primitive-warm-glow) 82%, transparent); animation: emblem-star 4s ease-in-out infinite; }
|
.gate-emblem::after { content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--primitive-warm-glow); box-shadow: 0 0 18px color-mix(in srgb, var(--primitive-warm-glow) 82%, transparent); animation: emblem-star 4s ease-in-out infinite; }
|
||||||
.gate-emblem i { position: absolute; left: -22%; right: -22%; top: 64%; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-light) 52%, transparent), transparent); }
|
.gate-emblem i { position: absolute; left: -22%; right: -22%; top: 64%; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-light) 52%, transparent), transparent); }
|
||||||
@keyframes emblem-star { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
|
@keyframes emblem-star { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
|
||||||
.gate-product { color: var(--content-primary); font-size: 27px; font-weight: 620; letter-spacing: .16em; text-indent: .16em; }
|
.gate-product { color: var(--content-primary); font-size: clamp(40px, 5.2vw, 54px); font-weight: 640; letter-spacing: .22em; text-indent: .22em; text-shadow: 0 0 44px color-mix(in srgb, var(--primitive-warm-glow) 26%, transparent); }
|
||||||
.gate-techname { color: var(--content-secondary); font-size: 12.5px; letter-spacing: .16em; text-indent: .16em; }
|
.gate-techname { color: var(--content-secondary); font-size: 14.5px; letter-spacing: .24em; text-indent: .24em; }
|
||||||
.gate-abbr { color: var(--content-faint); font-size: 10.5px; letter-spacing: .2em; text-indent: .2em; text-transform: uppercase; }
|
.gate-abbr { color: var(--content-faint); font-size: 11px; letter-spacing: .3em; text-indent: .3em; text-transform: uppercase; }
|
||||||
.gate-pod-row { display: flex; gap: 10px; }
|
.gate-pod-row { display: flex; gap: 10px; }
|
||||||
.gate-pod input { flex: 1; height: 52px; padding: 0 16px; border: 1px solid color-mix(in srgb, var(--accent-light) 24%, transparent); border-radius: 14px; outline: 0; color: var(--content-primary); background: rgba(0, 0, 0, .22); font-size: 17px; letter-spacing: .08em; text-align: center; transition: border-color .3s ease, box-shadow .3s ease; }
|
.gate-pod input { flex: 1; height: 52px; padding: 0 16px; border: 1px solid color-mix(in srgb, var(--accent-light) 24%, transparent); border-radius: 14px; outline: 0; color: var(--content-primary); background: rgba(0, 0, 0, .22); font-size: 17px; letter-spacing: .08em; text-align: center; transition: border-color .3s ease, box-shadow .3s ease; }
|
||||||
.gate-pod input:focus { border-color: color-mix(in srgb, var(--primitive-warm-glow) 58%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--primitive-warm-glow) 18%, transparent); }
|
.gate-pod input:focus { border-color: color-mix(in srgb, var(--primitive-warm-glow) 58%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--primitive-warm-glow) 18%, transparent); }
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue