feat: 园区大屏前端（React+Vite+Tailwind+three.js+MQTT）
- 路由：数据大屏/数字孪生/AI/媒体轮播/语音/企业墙 - 多园区通用，园区账号登录显示本园区
This commit is contained in:
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,16 @@
|
||||
/* =========================================================
|
||||
Appica UI · Tailwind v4 全局入口
|
||||
安装规范：https://appica.dev/ui/docs/react/installation
|
||||
========================================================= */
|
||||
@import 'tailwindcss';
|
||||
@import '@appica/ui-react/styles.css';
|
||||
|
||||
/* 让 Tailwind 扫描编译后的组件类名（相对本文件：src/styles/ → ../../node_modules） */
|
||||
@source '../../node_modules/@appica/ui-react/dist';
|
||||
|
||||
/* 基础重置（保持与项目一致） */
|
||||
*, *::before, *::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -0,0 +1,266 @@
|
||||
/* =========================================================
|
||||
MediaScreen —— 大屏媒体轮播（与数据大屏统一浅色科技风）
|
||||
配色沿用 datascreen 的 bd- 变量体系
|
||||
========================================================= */
|
||||
.ms-page {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: var(--bd-ink, #1d2c44);
|
||||
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
/* 背景网格（与主体一致） */
|
||||
.ms-page::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
background-image:
|
||||
repeating-linear-gradient(to right, rgba(47, 107, 255, 0.045) 0 1px, transparent 1px 52px),
|
||||
repeating-linear-gradient(to bottom, rgba(47, 107, 255, 0.045) 0 1px, transparent 1px 52px);
|
||||
}
|
||||
.ms-orb {
|
||||
position: fixed;
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
filter: blur(90px);
|
||||
}
|
||||
.ms-orb.orb-1 {
|
||||
width: 420px; height: 420px;
|
||||
top: -120px; right: -100px;
|
||||
background: rgba(76, 194, 255, 0.14);
|
||||
}
|
||||
.ms-orb.orb-2 {
|
||||
width: 380px; height: 380px;
|
||||
bottom: -120px; left: -80px;
|
||||
background: rgba(47, 107, 255, 0.10);
|
||||
}
|
||||
|
||||
/* 顶栏与页脚沿用 datascreen 的 bd-header / bd-strip */
|
||||
.ms-page .bd-header { z-index: 10; }
|
||||
|
||||
/* 主体：媒体区 */
|
||||
.ms-main {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
z-index: 3;
|
||||
margin: clamp(10px, 1.4vw, 20px);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border: 1px solid rgba(120, 160, 220, 0.14);
|
||||
box-shadow:
|
||||
0 10px 30px rgba(56, 100, 170, 0.07),
|
||||
0 1px 0 rgba(255, 255, 255, 0.9) inset;
|
||||
backdrop-filter: blur(14px);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
}
|
||||
|
||||
/* 左下角：版权/开发 玻璃质感芯片 */
|
||||
.ms-credit-chip {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
bottom: 14px;
|
||||
z-index: 8;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 5px 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
border-radius: 20px;
|
||||
background: rgba(29, 44, 68, 0.32);
|
||||
border: 1px solid rgba(255, 255, 255, 0.22);
|
||||
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
|
||||
backdrop-filter: blur(10px) saturate(140%);
|
||||
-webkit-backdrop-filter: blur(10px) saturate(140%);
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.ms-credit-chip .appica-ico { color: rgba(255, 255, 255, 0.85); }
|
||||
|
||||
/* 媒体播放器（填满整个媒体区，等比裁切铺满） */
|
||||
.ms-media {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* 加载中 */
|
||||
.ms-loader {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 26px;
|
||||
background: rgba(247, 251, 255, 0.6);
|
||||
}
|
||||
.ms-loader-ring {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(47, 107, 255, 0.2);
|
||||
border-top-color: var(--bd-blue, #2f6bff);
|
||||
animation: msSpin 1s linear infinite;
|
||||
box-shadow: 0 0 30px rgba(47, 107, 255, 0.15);
|
||||
}
|
||||
@keyframes msSpin { to { transform: rotate(360deg); } }
|
||||
.ms-loader-text {
|
||||
font-size: 13px;
|
||||
color: var(--bd-sub, #7d8fa9);
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
.ms-loader-text a {
|
||||
color: var(--bd-blue, #2f6bff);
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid rgba(47, 107, 255, 0.3);
|
||||
}
|
||||
|
||||
/* 播放控制已上移页眉（见 datascreen.css .bd-hd-media） */
|
||||
|
||||
/* 页脚 */
|
||||
.ms-page .bd-strip { z-index: 10; position: relative; }
|
||||
|
||||
/* ============ 登录弹窗（浅色） ============ */
|
||||
.ms-login-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 200;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(29, 44, 68, 0.55);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.3s, visibility 0.3s;
|
||||
}
|
||||
.ms-login-overlay.visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
.ms-login-modal {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 380px;
|
||||
padding: 38px 34px 32px;
|
||||
background: linear-gradient(180deg, #ffffff, #f4f8fd);
|
||||
border: 1px solid rgba(120, 160, 220, 0.25);
|
||||
border-radius: 18px;
|
||||
text-align: center;
|
||||
box-shadow: 0 24px 80px rgba(29, 44, 68, 0.25);
|
||||
}
|
||||
.ms-login-close {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 14px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(120, 160, 220, 0.2);
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
color: #7d8fa9;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.ms-login-close:hover {
|
||||
background: rgba(47, 107, 255, 0.08);
|
||||
color: #2f6bff;
|
||||
}
|
||||
.ms-login-brand { margin-bottom: 26px; }
|
||||
.ms-login-brand h2 {
|
||||
font-size: 21px;
|
||||
font-weight: 700;
|
||||
color: #1d2c44;
|
||||
letter-spacing: 0.04em;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.ms-login-brand p {
|
||||
font-size: 12.5px;
|
||||
color: #7d8fa9;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
.ms-login-field {
|
||||
margin-bottom: 16px;
|
||||
text-align: left;
|
||||
}
|
||||
.ms-login-field label {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #7d8fa9;
|
||||
margin-bottom: 7px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.ms-login-field input {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid rgba(47, 107, 255, 0.2);
|
||||
border-radius: 10px;
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
color: #1d2c44;
|
||||
outline: none;
|
||||
transition: all 0.2s;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.ms-login-field input::placeholder {
|
||||
color: rgba(125, 147, 169, 0.5);
|
||||
}
|
||||
.ms-login-field input:focus {
|
||||
border-color: rgba(47, 107, 255, 0.6);
|
||||
box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.12);
|
||||
}
|
||||
.ms-login-error {
|
||||
font-size: 12.5px;
|
||||
color: #f04438;
|
||||
margin-bottom: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
.ms-login-btn {
|
||||
width: 100%;
|
||||
padding: 13px;
|
||||
background: linear-gradient(140deg, #2f6bff, #4cc2ff);
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
font-family: inherit;
|
||||
letter-spacing: 0.08em;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
box-shadow: 0 6px 20px rgba(47, 107, 255, 0.35);
|
||||
}
|
||||
.ms-login-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 10px 28px rgba(47, 107, 255, 0.45);
|
||||
}
|
||||
.ms-login-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
@@ -0,0 +1,668 @@
|
||||
/* =========================================================
|
||||
Screen Page Theme — 大屏媒体轮播
|
||||
基于 screen.html CSS 移植
|
||||
========================================================= */
|
||||
.screen-page {
|
||||
--space-deep: #060d1a;
|
||||
--space-mid: #0b1530;
|
||||
--surface-glass: rgba(255,255,255,0.04);
|
||||
--surface-glass-warm: rgba(255,248,240,0.05);
|
||||
--text-dim: rgba(255,255,255,0.38);
|
||||
--text-soft: rgba(255,255,255,0.55);
|
||||
--text-bright: rgba(255,255,255,0.88);
|
||||
--accent-cyan: #06b6d4;
|
||||
--accent-warm: #f59e0b;
|
||||
--accent-rose: #f472b6;
|
||||
--glow-cyan: rgba(6, 182, 212, 0.25);
|
||||
--glow-warm: rgba(245, 158, 11, 0.2);
|
||||
--glow-rose: rgba(244, 114, 182, 0.15);
|
||||
|
||||
background: var(--space-deep);
|
||||
color: #fff;
|
||||
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
overflow: hidden;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* ============ Spatial Depth Layers ============ */
|
||||
|
||||
/* Layer 0 — Deep space background */
|
||||
.screen-page::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
background:
|
||||
radial-gradient(ellipse 60% 50% at 75% 25%, rgba(245, 158, 11, 0.07) 0%, transparent 60%),
|
||||
radial-gradient(ellipse 50% 45% at 20% 20%, rgba(6, 182, 212, 0.05) 0%, transparent 55%),
|
||||
radial-gradient(ellipse 40% 35% at 15% 85%, rgba(244, 114, 182, 0.04) 0%, transparent 50%),
|
||||
radial-gradient(ellipse 80% 80% at 50% 50%, rgba(6, 13, 26, 0) 0%, var(--space-deep) 100%);
|
||||
}
|
||||
|
||||
/* Layer 1 — Perspective grid */
|
||||
.perspective-grid {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
opacity: 0.06;
|
||||
background-image:
|
||||
repeating-linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
transparent calc(2px + 0.5vh),
|
||||
rgba(255,255,255,0.3) calc(2px + 0.5vh),
|
||||
rgba(255,255,255,0.3) calc(2.5px + 0.5vh)
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
transparent calc(2px + 0.5vw),
|
||||
rgba(255,255,255,0.3) calc(2px + 0.5vw),
|
||||
rgba(255,255,255,0.3) calc(2.5px + 0.5vw)
|
||||
);
|
||||
mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, transparent 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.15) 70%, transparent 100%);
|
||||
-webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, transparent 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.15) 70%, transparent 100%);
|
||||
}
|
||||
|
||||
/* Layer 2 — Ambient orbs */
|
||||
.ambient-orb {
|
||||
position: fixed;
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
filter: blur(80px);
|
||||
animation: orbDrift 12s ease-in-out infinite;
|
||||
}
|
||||
.ambient-orb.orb-1 {
|
||||
width: 400px; height: 400px;
|
||||
top: -100px; right: -80px;
|
||||
background: rgba(6, 182, 212, 0.06);
|
||||
animation-delay: 0s;
|
||||
}
|
||||
.ambient-orb.orb-2 {
|
||||
width: 350px; height: 350px;
|
||||
bottom: -120px; left: -60px;
|
||||
background: rgba(245, 158, 11, 0.05);
|
||||
animation-delay: -4s;
|
||||
}
|
||||
.ambient-orb.orb-3 {
|
||||
width: 250px; height: 250px;
|
||||
top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: rgba(244, 114, 182, 0.03);
|
||||
animation-delay: -8s;
|
||||
}
|
||||
@keyframes orbDrift {
|
||||
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||
25% { transform: translate(30px, -20px) scale(1.08); }
|
||||
50% { transform: translate(-15px, 25px) scale(0.94); }
|
||||
75% { transform: translate(-25px, -10px) scale(1.04); }
|
||||
}
|
||||
|
||||
/* Layer 3 — Vignette */
|
||||
.screen-page::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 50;
|
||||
background:
|
||||
radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(6, 13, 26, 0.55) 90%, rgba(4, 8, 16, 0.8) 100%);
|
||||
}
|
||||
|
||||
/* ============ Media Players ============ */
|
||||
#player {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
object-fit: cover;
|
||||
background: transparent;
|
||||
z-index: 3;
|
||||
}
|
||||
#imgPlayer {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
object-fit: cover;
|
||||
background: transparent;
|
||||
z-index: 3;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ============ Loader ============ */
|
||||
.loader {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 100;
|
||||
background: var(--space-deep);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 48px;
|
||||
transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
|
||||
|
||||
.loader-brand {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
.loader-brand .mark {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
position: relative;
|
||||
}
|
||||
.loader-brand .mark::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) rotate(45deg);
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: rgba(255,255,255,0.06);
|
||||
border: 1px solid rgba(255,255,255,0.12);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.loader-brand .mark::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
left: 4px;
|
||||
width: 24px;
|
||||
height: 28px;
|
||||
background: rgba(255,255,255,0.03);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 3px;
|
||||
transform: skewY(25deg);
|
||||
}
|
||||
.loader-brand .mark .iso-right {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
right: 4px;
|
||||
width: 24px;
|
||||
height: 28px;
|
||||
background: rgba(6, 182, 212, 0.08);
|
||||
border: 1px solid rgba(6, 182, 212, 0.15);
|
||||
border-radius: 3px;
|
||||
transform: skewY(-25deg);
|
||||
}
|
||||
.loader-brand .mark .iso-dot {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: var(--accent-cyan);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 16px var(--glow-cyan), 0 0 32px rgba(6, 182, 212, 0.15);
|
||||
animation: isoPulse 2.4s ease-in-out infinite;
|
||||
z-index: 2;
|
||||
}
|
||||
@keyframes isoPulse {
|
||||
0%, 100% { opacity: 0.5; box-shadow: 0 0 12px var(--glow-cyan); }
|
||||
50% { opacity: 1; box-shadow: 0 0 24px var(--glow-cyan), 0 0 48px rgba(6, 182, 212, 0.2); }
|
||||
}
|
||||
.loader-brand .label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.4em;
|
||||
color: rgba(255,255,255,0.35);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.loader-ring {
|
||||
position: relative;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
perspective: 200px;
|
||||
}
|
||||
.loader-ring .ring {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
border: 1.5px solid transparent;
|
||||
}
|
||||
.loader-ring .ring:nth-child(1) {
|
||||
inset: 0;
|
||||
border-top-color: rgba(6, 182, 212, 0.5);
|
||||
border-right-color: rgba(6, 182, 212, 0.2);
|
||||
animation: spin3d 1.4s linear infinite;
|
||||
box-shadow: 0 0 20px rgba(6, 182, 212, 0.1);
|
||||
}
|
||||
.loader-ring .ring:nth-child(2) {
|
||||
inset: 8px;
|
||||
border-bottom-color: rgba(245, 158, 11, 0.35);
|
||||
border-left-color: rgba(245, 158, 11, 0.12);
|
||||
animation: spin3d 2s linear infinite reverse;
|
||||
transform: rotateX(30deg);
|
||||
}
|
||||
.loader-ring .ring:nth-child(3) {
|
||||
inset: 16px;
|
||||
border-top-color: rgba(244, 114, 182, 0.25);
|
||||
border-right-color: rgba(244, 114, 182, 0.08);
|
||||
animation: spin3d 2.6s linear infinite;
|
||||
transform: rotateX(-25deg);
|
||||
}
|
||||
@keyframes spin3d { to { transform: rotate(360deg); } }
|
||||
|
||||
.loader-hint {
|
||||
font-size: 13px;
|
||||
color: var(--text-dim);
|
||||
letter-spacing: 0.15em;
|
||||
}
|
||||
.loader-hint a {
|
||||
color: rgba(255,255,255,0.6);
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.15);
|
||||
padding-bottom: 2px;
|
||||
transition: color 0.3s, border-color 0.3s;
|
||||
}
|
||||
.loader-hint a:hover {
|
||||
color: rgba(255,255,255,0.9);
|
||||
border-color: rgba(255,255,255,0.4);
|
||||
}
|
||||
|
||||
/* ============ Sound Hint ============ */
|
||||
#soundHint {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 100;
|
||||
background: rgba(255,255,255,0.05);
|
||||
backdrop-filter: blur(24px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(24px) saturate(180%);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.04);
|
||||
color: rgba(255,255,255,0.8);
|
||||
padding: 14px 32px;
|
||||
border-radius: 40px;
|
||||
font-size: 14px;
|
||||
font-weight: 450;
|
||||
letter-spacing: 0.05em;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow:
|
||||
0 4px 24px rgba(0,0,0,0.3),
|
||||
0 0 0 1px rgba(255,255,255,0.03) inset,
|
||||
0 1px 0 rgba(255,255,255,0.04) inset;
|
||||
animation: hintFloat 4s ease-in-out infinite;
|
||||
}
|
||||
#soundHint:hover {
|
||||
background: rgba(255,255,255,0.08);
|
||||
border-color: rgba(255,255,255,0.18);
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0,0,0,0.4),
|
||||
0 0 0 1px rgba(255,255,255,0.05) inset,
|
||||
0 1px 0 rgba(255,255,255,0.06) inset,
|
||||
0 0 40px rgba(6, 182, 212, 0.08);
|
||||
transform: translateX(-50%) translateY(-2px);
|
||||
}
|
||||
@keyframes hintFloat {
|
||||
0%, 100% { box-shadow: 0 4px 24px rgba(0,0,0,0.3), 0 0 0 0 rgba(6, 182, 212, 0); }
|
||||
50% { box-shadow: 0 4px 24px rgba(0,0,0,0.3), 0 0 32px 2px rgba(6, 182, 212, 0.06); }
|
||||
}
|
||||
|
||||
/* ============ Status Elements ============ */
|
||||
.corner-info {
|
||||
position: fixed;
|
||||
top: 28px;
|
||||
left: 28px;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background: rgba(255,255,255,0.03);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255,255,255,0.06);
|
||||
border-radius: 12px;
|
||||
padding: 8px 16px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.6s ease;
|
||||
box-shadow:
|
||||
0 2px 12px rgba(0,0,0,0.2),
|
||||
0 0 0 1px rgba(255,255,255,0.02) inset;
|
||||
}
|
||||
.corner-info.visible { opacity: 1; }
|
||||
.corner-info .ci-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent-cyan);
|
||||
box-shadow: 0 0 10px var(--glow-cyan);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.corner-info .ci-text {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: var(--text-soft);
|
||||
letter-spacing: 0.04em;
|
||||
white-space: nowrap;
|
||||
max-width: 300px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.conn-indicator {
|
||||
position: fixed;
|
||||
top: 28px;
|
||||
right: 28px;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.6s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
.conn-indicator.visible { opacity: 1; }
|
||||
.conn-rings { position: relative; width: 8px; height: 8px; }
|
||||
.conn-rings .cr-inner {
|
||||
position: absolute;
|
||||
inset: 1px;
|
||||
border-radius: 50%;
|
||||
background: rgba(52, 211, 153, 0.6);
|
||||
box-shadow: 0 0 6px rgba(52, 211, 153, 0.3);
|
||||
transition: all 0.6s ease;
|
||||
}
|
||||
.conn-rings .cr-inner.paused {
|
||||
background: rgba(255,255,255,0.2);
|
||||
box-shadow: none;
|
||||
}
|
||||
.conn-rings .cr-outer {
|
||||
position: absolute;
|
||||
inset: -3px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(52, 211, 153, 0.2);
|
||||
animation: connPulse 2.5s ease-in-out infinite;
|
||||
}
|
||||
@keyframes connPulse {
|
||||
0%, 100% { transform: scale(1); opacity: 0.3; }
|
||||
50% { transform: scale(1.6); opacity: 0; }
|
||||
}
|
||||
.conn-label { font-size: 10px; font-weight: 500; color: var(--text-dim); letter-spacing: 0.06em; text-transform: uppercase; }
|
||||
|
||||
.status-bar {
|
||||
position: fixed;
|
||||
bottom: 28px;
|
||||
right: 28px;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: rgba(255,255,255,0.03);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
border-radius: 10px;
|
||||
padding: 6px 14px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.6s ease;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.15);
|
||||
}
|
||||
.status-bar.visible { opacity: 1; }
|
||||
.status-bar .sb-prev,
|
||||
.status-bar .sb-next {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
padding: 2px 4px;
|
||||
border-radius: 6px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.status-bar .sb-prev:hover,
|
||||
.status-bar .sb-next:hover {
|
||||
background: rgba(255,255,255,0.06);
|
||||
}
|
||||
.status-bar .sb-sep {
|
||||
font-size: 10px;
|
||||
color: var(--text-dim);
|
||||
opacity: 0.4;
|
||||
pointer-events: none;
|
||||
}
|
||||
.status-bar .sb-dot {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent-warm);
|
||||
box-shadow: 0 0 8px var(--glow-warm);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.status-bar .sb-dot.idle { background: rgba(255,255,255,0.25); box-shadow: none; }
|
||||
.status-bar .sb-text {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
color: var(--text-dim);
|
||||
letter-spacing: 0.04em;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-family: "SF Mono", "JetBrains Mono", "Consolas", monospace;
|
||||
}
|
||||
|
||||
/* ============ Watermark ============ */
|
||||
.watermark {
|
||||
position: fixed;
|
||||
bottom: 28px;
|
||||
left: 28px;
|
||||
z-index: 100;
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
color: rgba(255,255,255,0.2);
|
||||
letter-spacing: 0.08em;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
.admin-btn-primary {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background: rgba(6, 182, 212, 0.15);
|
||||
border: 1px solid rgba(6, 182, 212, 0.25);
|
||||
border-radius: 10px;
|
||||
color: rgba(255,255,255,0.9);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.admin-btn-primary:hover {
|
||||
background: rgba(6, 182, 212, 0.25);
|
||||
border-color: rgba(6, 182, 212, 0.4);
|
||||
}
|
||||
|
||||
.admin-control-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.04);
|
||||
}
|
||||
.admin-control-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.admin-control-label {
|
||||
font-size: 14px;
|
||||
font-weight: 450;
|
||||
color: rgba(255,255,255,0.7);
|
||||
}
|
||||
|
||||
.admin-btn-toggle,
|
||||
.admin-btn-action {
|
||||
padding: 8px 16px;
|
||||
background: rgba(255,255,255,0.06);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: 8px;
|
||||
color: rgba(255,255,255,0.8);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.admin-btn-toggle:hover,
|
||||
.admin-btn-action:hover {
|
||||
background: rgba(255,255,255,0.1);
|
||||
border-color: rgba(255,255,255,0.18);
|
||||
}
|
||||
.admin-btn-toggle.active {
|
||||
background: rgba(52, 211, 153, 0.12);
|
||||
border-color: rgba(52, 211, 153, 0.3);
|
||||
color: rgba(52, 211, 153, 0.9);
|
||||
}
|
||||
|
||||
/* ============ Screen Login Modal ============ */
|
||||
.login-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 200;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(4, 8, 16, 0.7);
|
||||
backdrop-filter: blur(12px) saturate(120%);
|
||||
-webkit-backdrop-filter: blur(12px) saturate(120%);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.35s ease, visibility 0.35s ease;
|
||||
}
|
||||
.login-overlay.visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
.login-modal {
|
||||
position: relative;
|
||||
background: rgba(16, 24, 40, 0.92);
|
||||
backdrop-filter: blur(32px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(32px) saturate(180%);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.03);
|
||||
border-radius: 20px;
|
||||
padding: 40px 36px 36px;
|
||||
width: 100%;
|
||||
max-width: 380px;
|
||||
text-align: center;
|
||||
box-shadow:
|
||||
0 24px 80px rgba(0,0,0,0.5),
|
||||
0 0 0 1px rgba(255,255,255,0.03) inset,
|
||||
0 1px 0 rgba(255,255,255,0.04) inset;
|
||||
animation: loginModalIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
transform: perspective(800px) rotateX(0.5deg);
|
||||
}
|
||||
@keyframes loginModalIn {
|
||||
from { opacity: 0; transform: perspective(800px) rotateX(3deg) translateY(24px) scale(0.92); }
|
||||
to { opacity: 1; transform: perspective(800px) rotateX(0.5deg) translateY(0) scale(1); }
|
||||
}
|
||||
.login-modal-close {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 14px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
background: rgba(255,255,255,0.04);
|
||||
color: rgba(255,255,255,0.45);
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.login-modal-close:hover {
|
||||
background: rgba(255,255,255,0.08);
|
||||
border-color: rgba(255,255,255,0.15);
|
||||
color: rgba(255,255,255,0.8);
|
||||
}
|
||||
.login-modal-brand { margin-bottom: 28px; }
|
||||
.login-modal-brand h2 {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: rgba(255,255,255,0.92);
|
||||
letter-spacing: 0.03em;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.login-modal-brand p {
|
||||
font-size: 13px;
|
||||
color: rgba(255,255,255,0.38);
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.login-modal-field {
|
||||
margin-bottom: 16px;
|
||||
text-align: left;
|
||||
}
|
||||
.login-modal-field label {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: rgba(255,255,255,0.4);
|
||||
margin-bottom: 6px;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.login-modal-field input {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
background: rgba(255,255,255,0.06);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: 10px;
|
||||
font-size: 15px;
|
||||
font-family: inherit;
|
||||
font-weight: 400;
|
||||
color: rgba(255,255,255,0.88);
|
||||
outline: none;
|
||||
transition: all 0.2s;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.login-modal-field input::placeholder {
|
||||
color: rgba(255,255,255,0.22);
|
||||
}
|
||||
.login-modal-field input:focus {
|
||||
border-color: rgba(6, 182, 212, 0.5);
|
||||
box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
|
||||
background: rgba(255,255,255,0.08);
|
||||
}
|
||||
.login-modal-error {
|
||||
font-size: 13px;
|
||||
color: #f87171;
|
||||
margin-bottom: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
.login-modal-btn {
|
||||
width: 100%;
|
||||
padding: 13px;
|
||||
background: rgba(6, 182, 212, 0.15);
|
||||
border: 1px solid rgba(6, 182, 212, 0.25);
|
||||
border-radius: 10px;
|
||||
color: rgba(255,255,255,0.9);
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
letter-spacing: 0.06em;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.login-modal-btn:hover {
|
||||
background: rgba(6, 182, 212, 0.25);
|
||||
border-color: rgba(6, 182, 212, 0.4);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.login-modal-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
/* ============ Base Reset ============ */
|
||||
*, *::before, *::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Admin and Screen pages define their own :root variables */
|
||||
Reference in New Issue
Block a user