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: gate the language world behind number verification

Browse source
This commit is contained in:
冰朔 2026-08-19 22:52:10 +08:00
commit f8c8db4d48
39 changed files with 1445 additions and 129 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -363,6 +363,42 @@ svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-lineca
.session-projection-list div { display: grid; gap: 3px; min-width: 0; }
.session-projection-list b { overflow: hidden; color: var(--content-primary); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.session-projection-list span, .session-projection-list em { color: var(--content-muted); font-size: 11px; font-style: normal; }
.external-ai-gateway-panel { grid-column: 1 / -1; }
.gateway-exposure-control { position: relative; display: flex; align-items: center; gap: 18px; margin-top: 20px; padding: 16px 18px; border: 1px solid var(--panel-edge); border-radius: 13px; background: var(--primitive-glass); cursor: pointer; }
.gateway-exposure-control > span { display: grid; flex: 1; gap: 5px; min-width: 0; }
.gateway-exposure-control b { color: var(--content-primary); font-size: 14px; }
.gateway-exposure-control small { color: var(--content-muted); font-size: 12px; line-height: 1.55; }
.gateway-exposure-control input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.gateway-exposure-control > i { position: relative; flex: none; width: 44px; height: 24px; border: 1px solid var(--panel-edge); border-radius: 999px; background: var(--primitive-glass-hover); transition: border-color .2s ease, background .2s ease; }
.gateway-exposure-control > i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--content-muted); transition: transform .2s ease, background .2s ease; }
.gateway-exposure-control input:checked + i { border-color: color-mix(in srgb, var(--state-ready) 62%, var(--panel-edge)); background: color-mix(in srgb, var(--state-ready) 18%, var(--primitive-glass)); }
.gateway-exposure-control input:checked + i::after { transform: translateX(20px); background: var(--state-ready); }
.gateway-exposure-control:focus-within { border-color: var(--accent-light); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-light) 20%, transparent); }
.gateway-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 14px 0; }
.gateway-summary div { display: grid; gap: 3px; padding: 13px; border-radius: 11px; background: color-mix(in srgb, var(--primitive-glass) 80%, transparent); text-align: center; }
.gateway-summary b { color: var(--content-primary); font-size: 20px; font-variant-numeric: tabular-nums; }
.gateway-summary span { color: var(--content-muted); font-size: 11px; }
.gateway-catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.gateway-catalog-grid > section { min-width: 0; padding: 15px; border: 1px solid var(--panel-edge); border-radius: 12px; background: color-mix(in srgb, var(--primitive-glass) 68%, transparent); }
.gateway-catalog-grid > section > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.gateway-catalog-grid h3 { margin: 0; color: var(--content-primary); font-size: 14px; }
.gateway-catalog-grid header span { color: var(--content-muted); font-size: 10.5px; }
.gateway-capability-list { display: grid; gap: 3px; margin-top: 10px; }
.gateway-capability-list article { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--panel-edge); }
.gateway-capability-list article:last-child { border-bottom: 0; }
.gateway-capability-list article > i { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: var(--content-muted); }
.gateway-capability-list article > i.live { background: var(--state-ready); box-shadow: 0 0 9px color-mix(in srgb, var(--state-ready) 62%, transparent); }
.gateway-capability-list article div { min-width: 0; }
.gateway-capability-list b { color: var(--content-primary); font-size: 12.5px; }
.gateway-capability-list p { margin: 4px 0 0; color: var(--content-muted); font-size: 11.5px; line-height: 1.5; }
.gateway-capability-list em { color: var(--content-muted); font-size: 10.5px; font-style: normal; white-space: nowrap; }
.gateway-connection-details { margin-top: 14px; border: 1px solid var(--panel-edge); border-radius: 11px; }
.gateway-connection-details summary { padding: 12px 14px; color: var(--content-secondary); font-size: 12px; cursor: pointer; }
.gateway-connection-details dl { display: grid; gap: 8px; margin: 0; padding: 0 14px 14px; }
.gateway-connection-details dl div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; }
.gateway-connection-details dt { color: var(--content-muted); font-size: 11px; }
.gateway-connection-details dd { overflow-wrap: anywhere; margin: 0; color: var(--content-secondary); font: 11px/1.55 ui-monospace, monospace; }
.gateway-message { margin: 12px 0 0; color: var(--accent-light); font-size: 12px; }
.authorization-history, .system-diagnostics { grid-column: 1 / -1; border: 1px solid var(--panel-edge); border-radius: 13px; background: var(--primitive-glass); }
.authorization-history > summary, .system-diagnostics > summary { padding: 14px 17px; color: var(--content-secondary); font-size: 13px; font-weight: 650; cursor: pointer; }
.authorization-history > div { display: grid; gap: 1px; padding: 0 14px 14px; }
@ -559,7 +595,7 @@ svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-lineca
.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::placeholder { color: var(--content-faint); letter-spacing: .2em; }
.gate-pod form { display: grid; gap: 12px; }
.gate-inf { width: 52px; height: 52px; flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--accent-light) 24%, transparent); border-radius: 14px; background: rgba(0, 0, 0, .22); color: var(--content-faint); font-size: 21px; cursor: pointer; transition: all .35s ease; }
.gate-inf { width: 52px; height: 52px; flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--accent-light) 24%, transparent); border-radius: 14px; background: rgba(0, 0, 0, .22); color: var(--content-faint); font-size: 21px; cursor: pointer; transition: border-color .35s ease, background .35s ease, color .35s ease, box-shadow .35s ease; }
.gate-inf:hover { color: var(--content-secondary); border-color: color-mix(in srgb, var(--primitive-warm-glow) 40%, transparent); }
.gate-inf.on { color: #0b0f14; background: linear-gradient(150deg, color-mix(in srgb, var(--primitive-warm-glow) 92%, #fff), var(--primitive-warm-glow)); border-color: transparent; box-shadow: 0 0 30px color-mix(in srgb, var(--primitive-warm-glow) 52%, transparent); }
.gate-submit { height: 48px; margin-top: 16px; border: 0; border-radius: 14px; background: linear-gradient(140deg, color-mix(in srgb, var(--primitive-warm-glow) 78%, #fff) 0%, color-mix(in srgb, var(--primitive-warm-glow) 62%, #7a5a22) 100%); color: #141008; font-size: 15px; font-weight: 650; letter-spacing: .3em; text-indent: .3em; cursor: pointer; transition: filter .3s ease, opacity .3s ease, box-shadow .3s ease; box-shadow: 0 10px 30px color-mix(in srgb, var(--primitive-warm-glow) 22%, transparent); }
@ -597,6 +633,15 @@ svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-lineca
.world-title-actions { position: absolute; right: 16px; display: flex; align-items: center; gap: 15px; }
.world-title-actions span { color: var(--content-muted); font-size: 12px; font-weight: 600; }
.world-title-actions button { font-size: 12.5px; }
.world-theme-menu { position: relative; }
.world-theme-menu > summary { min-width: 118px; padding: 6px 10px; border: 1px solid transparent; border-radius: 8px; color: var(--content-muted); font-size: 11.5px; font-weight: 650; text-align: center; cursor: pointer; list-style: none; }
.world-theme-menu > summary::-webkit-details-marker { display: none; }
.world-theme-menu > summary:hover, .world-theme-menu > summary:focus-visible, .world-theme-menu[open] > summary { border-color: var(--panel-edge); color: var(--content-primary); outline: 0; background: var(--primitive-glass); }
.world-theme-menu > div { position: absolute; z-index: 60; right: 0; top: calc(100% + 8px); display: grid; grid-template-columns: repeat(5, 82px); gap: 5px; padding: 9px; border: 1px solid var(--panel-edge); border-radius: 12px; background: color-mix(in srgb, var(--panel-bg) 96%, transparent); box-shadow: 0 18px 50px var(--primitive-shadow); backdrop-filter: blur(20px); }
.world-theme-menu button { display: grid; justify-items: center; gap: 6px; min-height: 68px; padding: 8px 5px; border: 1px solid transparent; border-radius: 9px; color: var(--content-muted); background: transparent; cursor: pointer; }
.world-theme-menu button:hover, .world-theme-menu button:focus-visible, .world-theme-menu button.active { border-color: var(--panel-edge); color: var(--content-primary); outline: 0; background: var(--primitive-glass-hover); }
.world-theme-menu button i { width: 25px; height: 25px; border: 1px solid var(--panel-edge); border-radius: 50%; background: radial-gradient(circle at 65% 30%, var(--accent-light), var(--surface-horizon) 28%, var(--surface-depth) 70%); }
.world-theme-menu button span { font-size: 10.5px; white-space: nowrap; }
.world-scene { position: absolute; z-index: 5; inset: 44px 0 45px; min-height: 0; }
.world-footer { position: absolute; z-index: 24; inset: auto 0 0; height: 45px; display: flex; align-items: center; justify-content: center; gap: 14px; }
.world-footer b { color: var(--content-muted); font-size: 11.5px; font-weight: 600; letter-spacing: .11em; }
@ -703,6 +748,32 @@ svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-lineca
.gate-dismiss-layer { position: fixed; z-index: -1; inset: 44px 0 45px; width: auto; height: auto; padding: 0; border: 0; background: color-mix(in srgb, var(--primitive-bg-a) 12%, transparent); cursor: default; }
.gate-close { position: absolute; z-index: 3; top: 12px; right: 13px; width: 32px; height: 32px; padding: 0; border: 1px solid color-mix(in srgb, var(--panel-edge) 72%, transparent); border-radius: 50%; color: var(--content-secondary); background: color-mix(in srgb, var(--primitive-glass) 78%, transparent); font-size: 22px; font-weight: 400; line-height: 28px; cursor: pointer; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.gate-close:hover, .gate-close:focus-visible { border-color: var(--accent-light); color: var(--accent-light); background: color-mix(in srgb, var(--primitive-glass) 94%, transparent); outline: 0; }
.star-abyss-dialog { position: fixed; z-index: 52; inset: 44px 0 45px; isolation: isolate; display: grid; place-items: center; padding: 24px; }
.star-abyss-dialog .gate-dismiss-layer { inset: 0; background: rgba(1, 2, 10, .22); backdrop-filter: blur(2px); }
.abyss-panel { position: relative; width: min(640px, calc(100vw - 42px)); display: grid; gap: 17px; padding: 66px 105px 58px; color: var(--content-secondary); text-align: center;
background: radial-gradient(ellipse at center, rgba(10, 14, 34, .94) 0 39%, rgba(11, 15, 35, .76) 56%, rgba(29, 37, 78, .25) 70%, transparent 76%);
filter: drop-shadow(0 0 52px rgba(105, 120, 214, .2)); transform-origin: 50% 50%; animation: abyss-panel-arrive .42s cubic-bezier(.22, 1, .36, 1) both; }
.abyss-panel::before { content: ''; position: absolute; z-index: -1; inset: -32px -52px; border-radius: 50%; pointer-events: none;
background: radial-gradient(ellipse, rgba(92, 107, 199, .12), transparent 68%); filter: blur(14px); }
.abyss-panel > p:first-of-type { margin: 0; color: var(--content-faint); font-size: 10px; font-weight: 680; letter-spacing: .22em; }
.abyss-panel h2 { margin: 0 0 3px; color: var(--content-primary); font-size: 18px; font-weight: 760; letter-spacing: .26em; text-indent: .26em; }
.abyss-panel .gate-close { top: 14px; right: 31px; border-color: transparent; background: transparent; }
.abyss-panel .gate-pod-row { display: grid; grid-template-columns: minmax(0, 1fr) 42px; align-items: end; gap: 10px; }
.abyss-panel input { min-width: 0; width: 100%; height: 44px; padding: 7px 3px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--panel-edge) 86%, transparent); border-radius: 0; outline: 0; color: var(--content-primary); background: transparent; font-size: 17px; font-weight: 720; letter-spacing: .08em; text-align: center; }
.abyss-panel input:focus { border-color: var(--accent-light); }
.abyss-panel .gate-inf { width: 42px; height: 42px; padding: 0; border-radius: 50%; color: var(--content-secondary); background: transparent; }
.abyss-panel .gate-submit { width: 100%; min-height: 42px; border-color: color-mix(in srgb, var(--accent-light) 34%, transparent); border-radius: 999px; color: var(--content-primary); background: color-mix(in srgb, var(--primitive-glass) 66%, transparent); }
.abyss-panel .gate-submit:hover:not(:disabled), .abyss-panel .gate-submit:focus-visible { color: var(--button-primary-text); background: var(--accent-light); outline: 0; }
.abyss-panel .gate-hint { margin: -3px 0 0; color: var(--accent-light); font-size: 11px; line-height: 1.6; }
@keyframes abyss-panel-arrive { from { opacity: 0; transform: perspective(900px) rotateX(28deg) scale(.82); } to { opacity: 1; transform: perspective(900px) rotateX(0) scale(1); } }
@media (max-width: 720px), (max-height: 620px) {
.abyss-panel { width: min(560px, calc(100vw - 28px)); padding: 46px clamp(34px, 10vw, 78px) 40px; }
.abyss-panel .gate-close { right: 22px; }
}
.world-unfolding { position: absolute; z-index: 24; left: 50%; top: 29%; width: min(720px, calc(100% - 60px)); transform: translateX(-50%); text-align: center; pointer-events: none; animation: world-unfolding-message 2.1s ease both; }
.world-unfolding h2 { margin: 0; color: var(--content-primary); font-size: clamp(19px, 2.3vw, 29px); font-weight: 740; letter-spacing: .09em; text-wrap: balance; }
.world-unfolding p { margin: 10px 0 0; color: var(--accent-light); font-size: 11px; font-weight: 700; letter-spacing: .2em; }
@keyframes world-unfolding-message { 0% { opacity: 0; transform: translateX(-50%) translateY(18px); } 24%, 72% { opacity: 1; transform: translateX(-50%) translateY(0); } 100% { opacity: 0; transform: translateX(-50%) translateY(-8px); } }
.nucleus-panel h2 { margin: 0 0 18px; color: var(--accent-light); text-align: center; font-size: 14px; font-weight: 700; letter-spacing: .3em; }
.nucleus-panel input, .domain-credential input { min-width: 0; width: 100%; height: 45px; padding: 7px 2px; border: 0; border-bottom: 2px solid var(--panel-edge); border-radius: 0; outline: 0; color: var(--content-primary); background: transparent; font-size: 18px; font-weight: 700; letter-spacing: .06em; text-align: center; }
.nucleus-panel input:focus, .domain-credential input:focus { border-color: var(--accent-light); box-shadow: none; }
@ -714,6 +785,8 @@ svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-lineca
.world-impression { max-width: min(720px, calc(100% - 80px)); margin: 24px auto 0; padding: 0; border: 0; color: var(--content-secondary); font-size: clamp(14px, 1.45vw, 17px); font-style: normal; font-weight: 650; line-height: 1.7; letter-spacing: .06em; text-wrap: balance; text-shadow: 0 0 28px color-mix(in srgb, var(--primitive-cool-glow) 24%, transparent); }
.resolved-heading { top: 25%; }
.domain-credential { position: absolute; z-index: 21; left: 50%; top: 43%; width: 440px; padding: 25px 36px 21px; transform: translateX(-50%); text-align: center; animation: credential-rise .65s cubic-bezier(.22, 1, .36, 1) both; }
.starlake-credential { z-index: 26; top: 39%; border-color: color-mix(in srgb, var(--accent-light) 20%, var(--panel-edge)); background: color-mix(in srgb, var(--panel-bg) 78%, transparent); }
.credential-purpose { margin: 0; color: var(--accent-light); font-size: 10px; font-weight: 760; letter-spacing: .24em; }
@keyframes credential-rise { from { opacity: 0; transform: translateX(-50%) translateY(30px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.domain-credential.fade-out { opacity: 0; }
.domain-credential form { display: grid; gap: 12px; }
@ -733,6 +806,11 @@ svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-lineca
.world-back { position: absolute; z-index: 18; left: 25px; top: 25px; border: 0; background: transparent; color: var(--content-muted); font-size: 13px; font-weight: 600; cursor: pointer; }
.channel-main { left: 50%; top: 43%; width: 280px; transform: translateX(-50%); }
.channel-main .pool-bay { width: 260px; height: 84px; } .channel-main .pool-label { top: 92px; }
.channel-primary { left: 50%; top: 37%; width: 280px; transform: translateX(-50%); }
.channel-primary .pool-bay, .channel-marketplace .pool-bay { width: 240px; height: 78px; }
.channel-primary .pool-label, .channel-marketplace .pool-label { top: 86px; }
.channel-marketplace { right: 12%; top: 47%; width: 250px; }
.channel-weather { left: 50%; bottom: 3%; width: 220px; transform: translateX(-50%); }
.channel-knowledge { left: 14%; top: 48%; } .channel-code { left: 31%; top: 61%; } .channel-light { right: 31%; top: 61%; } .channel-status { right: 14%; top: 48%; }
.channel-time { left: 50%; bottom: 4%; transform: translateX(-50%); }
.channel-mobile { right: 7%; top: 70%; }
@ -870,13 +948,15 @@ svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-lineca
.domain-info-card.info-main { left: 18px; } .domain-info-card.info-sub { left: calc(22% - 75px); }
.domain-info-card.info-zero { right: calc(22% - 75px); } .domain-info-card.info-zs { right: 18px; }
.world-pool { width: 150px; } .pool-bay { width: 145px; }
.channel-knowledge { left: 4%; } .channel-code { left: 25%; } .channel-light { right: 25%; } .channel-status { right: 4%; }
.channel-knowledge { left: 4%; } .channel-code { left: 25%; } .channel-light { right: 25%; } .channel-status { right: 4%; } .channel-marketplace { right: 3%; }
.broadcast-stream { left: 5%; }
.personal-node-guide ol { grid-template-columns: 1fr; }
.marketplace-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.marketplace-proof > div:nth-child(2) { border-right: 0; }
.marketplace-proof > div:nth-child(-n+2) { border-bottom: 1px solid var(--panel-edge); }
.marketplace-item dl { grid-template-columns: 1fr; }
.world-theme-menu > div { grid-template-columns: repeat(3, 82px); }
.gateway-catalog-grid { grid-template-columns: 1fr; }
}
@media (max-height: 720px) {
.official-hero { top: 14px; } .official-hero h1 { font-size: 24px; }