From 29c2b14d76d9a32e016f0d33a8f9fc49eaa057c7 Mon Sep 17 00:00:00 2001 From: bingshuo <565183519@qq.com> Date: Tue, 19 May 2026 22:10:44 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=91=BC=E5=90=B8=E5=85=89=E6=99=95UI?= =?UTF-8?q?=20=E2=80=94=20=E5=A4=A7=E5=AD=97=E5=8F=B7+=E8=BE=B9=E6=A1=86?= =?UTF-8?q?=E5=91=BC=E5=90=B8+=E4=BA=A4=E4=BA=92=E5=8F=8D=E9=A6=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- homepage/index.html | 444 ++++++++++++++++++++------------------------ 1 file changed, 197 insertions(+), 247 deletions(-) diff --git a/homepage/index.html b/homepage/index.html index bdd3b29..5c4ee92 100644 --- a/homepage/index.html +++ b/homepage/index.html @@ -19,6 +19,14 @@ --card-bg:rgba(11,20,36,.4);--border:rgba(90,208,224,.10); --shadow:0 8px 32px rgba(0,0,0,.3); } +@keyframes breathe-cyan{0%,100%{box-shadow:0 0 4px rgba(42,157,191,.08),0 0 12px rgba(42,157,191,.02)}50%{box-shadow:0 0 10px rgba(42,157,191,.28),0 0 28px rgba(42,157,191,.1)}} +@keyframes breathe-heart{0%,100%{box-shadow:0 0 4px rgba(224,74,116,.08),0 0 12px rgba(224,74,116,.02)}50%{box-shadow:0 0 10px rgba(224,74,116,.28),0 0 28px rgba(224,74,116,.1)}} +@keyframes breathe-violet{0%,100%{box-shadow:0 0 4px rgba(123,93,191,.08),0 0 12px rgba(123,93,191,.02)}50%{box-shadow:0 0 10px rgba(123,93,191,.28),0 0 28px rgba(123,93,191,.1)}} +@keyframes breathe-amber{0%,100%{box-shadow:0 0 4px rgba(212,160,48,.08),0 0 12px rgba(212,160,48,.02)}50%{box-shadow:0 0 10px rgba(212,160,48,.28),0 0 28px rgba(212,160,48,.1)}} +@keyframes breathe-green{0%,100%{box-shadow:0 0 4px rgba(64,184,122,.08),0 0 12px rgba(64,184,122,.02)}50%{box-shadow:0 0 10px rgba(64,184,122,.28),0 0 28px rgba(64,184,122,.1)}} +@keyframes led-pulse{0%,100%{opacity:.5}50%{opacity:1}} +@keyframes logo-pulse{0%,100%{box-shadow:0 0 24px rgba(90,208,224,.2);transform:scale(1)}50%{box-shadow:0 0 44px rgba(90,208,224,.38);transform:scale(1.06)}} +@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}} html{background:var(--deep);color:var(--text)} body{ min-height:100vh;background:var(--deep); @@ -27,8 +35,6 @@ body{ overflow-x:hidden;display:flex;flex-direction:column } ::selection{background:rgba(90,208,224,.2);color:var(--light)} - -/* ── 深空背景 ── */ #cosmos{position:fixed;inset:0;z-index:-5;overflow:hidden} #cosmos-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 15% 20%,#1a2e48 0%,#0b1424 70%),radial-gradient(ellipse at 80% 80%,rgba(60,30,100,.15),transparent 60%)} .star-layer{position:absolute;inset:0} @@ -44,195 +50,192 @@ body{ .nebula-2{width:600px;height:600px;bottom:-12%;right:-8%;background:radial-gradient(circle,rgba(123,93,191,.1),transparent);animation:n2 45s ease-in-out infinite alternate} @keyframes n1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(80px,60px) scale(1.4)}} @keyframes n2{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-60px,-40px) scale(1.3)}} - -/* ── Footer ── */ -.topbar{position:fixed;top:0;left:0;right:0;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:rgba(11,20,36,.75);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--glass-edge);z-index:50} -.tb-left{display:flex;align-items:center;gap:16px} -.tb-logo{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--glow),var(--cyan) 55%,var(--violet));box-shadow:0 0 24px rgba(90,208,224,.2);animation:logo-pulse 4s ease-in-out infinite} -@keyframes logo-pulse{0%,100%{box-shadow:0 0 24px rgba(90,208,224,.2);transform:scale(1)}50%{box-shadow:0 0 40px rgba(90,208,224,.35);transform:scale(1.06)}} -.tb-title{font-size:16px;font-weight:500;letter-spacing:.2em;color:var(--light)} -.tb-center{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-soft)} -.tb-center .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green);animation:led-pulse 3s ease-in-out infinite} -@keyframes led-pulse{0%,100%{opacity:.5}50%{opacity:1}} +.topbar{position:fixed;top:0;left:0;right:0;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 48px;background:rgba(11,20,36,.75);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--glass-edge);z-index:50} +.tb-left{display:flex;align-items:center;gap:18px} +.tb-logo{width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--glow),var(--cyan) 55%,var(--violet));box-shadow:0 0 24px rgba(90,208,224,.2);animation:logo-pulse 4s ease-in-out infinite;flex-shrink:0} +.tb-title{font-size:18px;font-weight:600;letter-spacing:.18em;color:var(--light)} +.tb-center{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--text-soft)} +.tb-center .dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 14px var(--green);animation:led-pulse 3s ease-in-out infinite} .tb-center strong{color:var(--light);font-weight:600} -.tb-right{display:flex;align-items:center;gap:12px} -.tb-tag{font-size:12px;padding:5px 14px;border-radius:14px;border:1px solid var(--glass-edge);color:var(--text-soft);letter-spacing:.05em;background:rgba(255,255,255,.02)} - -/* ── Page ── */ -.page{flex:1;display:flex;flex-direction:column;padding-top:64px;min-height:100vh;position:relative;z-index:1} - -/* ── Hero ── */ -.hero{text-align:center;padding:60px 32px 28px} -.hero h1{font-size:3.2rem;font-weight:600;letter-spacing:.15em;background:linear-gradient(135deg,var(--light) 30%,var(--glow) 60%,var(--violet-glow));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none} -.hero .sub{font-size:14px;letter-spacing:.5em;color:var(--text-soft);margin-top:10px;font-weight:400} - -/* ── 信息栏 ── */ -.info-bar{display:flex;justify-content:center;gap:24px;padding:12px 32px;flex-wrap:wrap} -.info-chip{display:flex;align-items:center;gap:8px;padding:8px 20px;background:var(--card-bg);border:1px solid var(--glass-edge);border-radius:24px;font-size:14px;color:var(--text-soft);font-weight:400} +.tb-right{display:flex;align-items:center;gap:14px} +.tb-tag{font-size:13px;padding:6px 18px;border-radius:16px;border:1px solid var(--glass-edge);color:var(--text-soft);letter-spacing:.05em;background:rgba(255,255,255,.02)} +.page{flex:1;display:flex;flex-direction:column;padding-top:72px;min-height:100vh;position:relative;z-index:1} +.hero{text-align:center;padding:64px 32px 24px} +.hero h1{font-size:3.6rem;font-weight:600;letter-spacing:.12em;background:linear-gradient(135deg,var(--light) 30%,var(--glow) 60%,var(--violet-glow));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none} +.hero .sub{font-size:15px;letter-spacing:.4em;color:var(--text-soft);margin-top:12px;font-weight:400} +.info-bar{display:flex;justify-content:center;gap:28px;padding:16px 32px;flex-wrap:wrap} +.info-chip{display:flex;align-items:center;gap:10px;padding:10px 24px;background:var(--card-bg);border:1px solid var(--glass-edge);border-radius:24px;font-size:15px;color:var(--text-soft);font-weight:400} .info-chip strong{color:var(--light);font-weight:600} -.info-chip .led{width:8px;height:8px;border-radius:50%;flex-shrink:0} -.info-chip .led.g{background:var(--green);box-shadow:0 0 10px var(--green);animation:led-pulse 3s ease-in-out infinite} -.info-chip .led.r{background:var(--heart);box-shadow:0 0 10px var(--heart);animation:led-pulse 1.5s ease-in-out infinite} - -/* ── 铸渊心跳 ── */ +.info-chip .led{width:9px;height:9px;border-radius:50%;flex-shrink:0} +.info-chip .led.g{background:var(--green);box-shadow:0 0 12px var(--green);animation:led-pulse 3s ease-in-out infinite} +.info-chip .led.r{background:var(--heart);box-shadow:0 0 12px var(--heart);animation:led-pulse 1.5s ease-in-out infinite} #heart-wrapper{position:fixed;bottom:120px;left:50%;transform:translateX(-50%);z-index:-1;pointer-events:none} -#heart-core{width:400px;height:400px;border-radius:50%;background:radial-gradient(circle at 45% 40%,rgba(224,74,116,.08),rgba(90,208,224,.025) 40%,transparent 70%);animation:heartbeat 4s ease-in-out infinite;transform-origin:center} -#heart-core::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(224,74,116,.04),transparent 70%);animation:pulse-glow 4s ease-in-out infinite} +#heart-core{width:440px;height:440px;border-radius:50%;background:radial-gradient(circle at 45% 40%,rgba(224,74,116,.08),rgba(90,208,224,.025) 40%,transparent 70%);animation:heartbeat 4s ease-in-out infinite;transform-origin:center} +#heart-core::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(224,74,116,.04),transparent 70%);animation:pulse-glow 4s ease-in-out infinite} @keyframes heartbeat{0%,100%{transform:scale(1);opacity:.3}14%{transform:scale(1.08);opacity:.55}21%{transform:scale(1);opacity:.3}28%{transform:scale(1.05);opacity:.45}35%{transform:scale(1);opacity:.3}} @keyframes pulse-glow{0%,100%{opacity:.2;transform:translate(-50%,-50%) scale(1)}50%{opacity:.6;transform:translate(-50%,-50%) scale(2.2)}} -/* shooting star */ .shooting-star{position:absolute;width:3px;height:3px;background:#fff;border-radius:50%;opacity:0;box-shadow:0 0 6px #fff,0 0 14px rgba(90,208,224,.4)} -.shooting-star::after{content:'';position:absolute;top:0;left:0;width:70px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.6),transparent);transform:translateY(1px)} +.shooting-star::after{content:'';position:absolute;top:0;left:0;width:80px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.6),transparent);transform:translateY(1px)} @keyframes shoot{0%{opacity:0;transform:translate(0,0)}5%{opacity:1}15%{opacity:0}100%{opacity:0;transform:translate(450px,350px)}} - -/* ── Dashboard ── */ -.dashboard{max-width:1000px;margin:0 auto;padding:0 28px 36px;display:flex;flex-direction:column;gap:20px;width:100%} -.row{display:grid;gap:18px} +.dashboard{max-width:1040px;margin:0 auto;padding:0 32px 40px;display:flex;flex-direction:column;gap:24px;width:100%} +.row{display:grid;gap:16px} .row-2{grid-template-columns:1fr 1fr} .row-3{grid-template-columns:1fr 1fr 1fr} -@media(max-width:800px){.row-2,.row-3{grid-template-columns:1fr}} +@media(max-width:860px){.row-2,.row-3{grid-template-columns:1fr}} -/* ── Cards ── */ -.card{background:var(--card-bg);border:1px solid var(--glass-edge);border-radius:20px;padding:24px 26px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:all .35s ease;box-shadow:var(--shadow)} -.card:hover{border-color:rgba(90,208,224,.06)} -.card-header{font-size:14px;font-weight:500;letter-spacing:.1em;color:var(--light);margin-bottom:16px;display:flex;align-items:center;gap:10px} -.card-header .hd{width:7px;height:7px;border-radius:50%;flex-shrink:0} -.card-header .hd.cyan{background:var(--glow);box-shadow:0 0 10px var(--glow)} -.card-header .hd.green{background:var(--green);box-shadow:0 0 10px var(--green)} -.card-header .hd.violet{background:var(--violet-glow);box-shadow:0 0 10px var(--violet-glow)} -.card-header .hd.heart{background:var(--heart);box-shadow:0 0 10px var(--heart);animation:led-pulse 2s ease-in-out infinite} -.card-header .r{font-size:12px;font-weight:400;color:var(--text-soft);margin-left:auto} - -/* ── 人格体 ── */ -.p-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} -.p-item{display:flex;align-items:center;gap:14px;padding:12px 16px;background:rgba(255,255,255,.025);border:1px solid var(--glass-edge);border-radius:14px;transition:all .25s} -.p-item:hover{background:rgba(255,255,255,.04)} -.p-av{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;font-weight:500} +/* ── 呼吸卡片系统 ── */ +.card{background:var(--card-bg);border:1px solid var(--glass-edge);border-radius:20px;padding:28px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:all .35s ease;box-shadow:var(--shadow);cursor:default;position:relative;overflow:hidden} +.card.clickable{cursor:pointer} +.card.clickable:hover{transform:translateY(-3px);border-color:rgba(90,208,224,.18)} +.card.clickable:active{transform:scale(.97)} +.card.clickable:hover::after{opacity:1} +.card.clickable::after{content:'';position:absolute;inset:0;border-radius:20px;opacity:0;transition:opacity .35s;background:radial-gradient(ellipse at 50% 0%,rgba(90,208,224,.04),transparent 70%);pointer-events:none} +.bg-cyan{animation:breathe-cyan 4s ease-in-out infinite} +.bg-heart{animation:breathe-heart 4s ease-in-out infinite} +.bg-violet{animation:breathe-violet 5s ease-in-out infinite} +.bg-amber{animation:breathe-amber 4.5s ease-in-out infinite} +.bg-green{animation:breathe-green 3.5s ease-in-out infinite} +.card-header{font-size:15px;font-weight:500;letter-spacing:.08em;color:var(--light);margin-bottom:20px;display:flex;align-items:center;gap:12px} +.card-header .hd{width:8px;height:8px;border-radius:50%;flex-shrink:0} +.card-header .hd.cyan{background:var(--glow);box-shadow:0 0 12px var(--glow)} +.card-header .hd.green{background:var(--green);box-shadow:0 0 12px var(--green)} +.card-header .hd.violet{background:var(--violet-glow);box-shadow:0 0 12px var(--violet-glow)} +.card-header .hd.heart{background:var(--heart);box-shadow:0 0 12px var(--heart);animation:led-pulse 2s ease-in-out infinite} +.card-header .r{font-size:13px;font-weight:400;color:var(--text-soft);margin-left:auto} +.p-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px} +.p-item{display:flex;align-items:center;gap:16px;padding:16px 20px;background:rgba(255,255,255,.025);border:1px solid var(--glass-edge);border-radius:16px;transition:all .3s;cursor:pointer} +.p-item:hover{background:rgba(255,255,255,.04);transform:translateY(-2px);border-color:rgba(90,208,224,.15)} +.p-item:active{transform:scale(.97)} +.p-av{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;font-weight:500} .p-av.cyan{background:rgba(42,157,191,.12);color:var(--glow)} .p-av.heart{background:rgba(224,74,116,.1);color:var(--heart)} .p-av.violet{background:rgba(123,93,191,.12);color:var(--violet-glow)} .p-av.green{background:rgba(64,184,122,.1);color:var(--green)} .p-info{flex:1;min-width:0} -.p-name{font-size:14px;font-weight:600;color:var(--light)} -.p-role{font-size:12px;color:var(--text-soft);margin-top:1px} -.p-status{font-size:11px;font-weight:500;padding:3px 12px;border-radius:12px;flex-shrink:0} -.p-status.go{background:rgba(64,184,122,.12);color:var(--green)} -.p-status.tr{background:rgba(224,74,116,.1);color:var(--heart)} -.p-status.dv{background:rgba(212,160,48,.1);color:var(--amber)} - -/* ── 系统信息 ── */ -.sys-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px} -.sys-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--glass-edge);font-size:14px} +.p-name{font-size:16px;font-weight:600;color:var(--light)} +.p-role{font-size:14px;color:var(--text-soft);margin-top:3px} +.p-status{font-size:13px;font-weight:500;padding:4px 14px;border-radius:14px;flex-shrink:0} +.p-status.go{background:rgba(64,184,122,.12);color:var(--green);border:1px solid rgba(64,184,122,.08)} +.p-status.tr{background:rgba(224,74,116,.1);color:var(--heart);border:1px solid rgba(224,74,116,.08)} +.p-status.dv{background:rgba(212,160,48,.1);color:var(--amber);border:1px solid rgba(212,160,48,.08)} +.sys-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px} +.sys-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--glass-edge);font-size:15px} .sys-row:last-child{border-bottom:none} .sys-row .k{color:var(--text-soft)} .sys-row .v{color:var(--light);font-weight:500;font-variant-numeric:tabular-nums} .sys-row .v.cyan{color:var(--glow)} .sys-row .v.green{color:var(--green)} - -/* ── 训练 ── */ -.train-metrics{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:16px} -.train-m{text-align:center;padding:14px 8px;background:rgba(255,255,255,.02);border:1px solid var(--glass-edge);border-radius:14px} -.train-m .mv{font-size:24px;font-weight:700;color:var(--light);font-variant-numeric:tabular-nums;line-height:1.2} +.train-metrics{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:18px} +.train-m{text-align:center;padding:16px 8px;background:rgba(255,255,255,.02);border:1px solid var(--glass-edge);border-radius:14px} +.train-m .mv{font-size:28px;font-weight:700;color:var(--light);font-variant-numeric:tabular-nums;line-height:1.2} .train-m .mv.cyan{color:var(--glow)} .train-m .mv.gold{color:var(--amber-glow)} .train-m .mv.violet{color:var(--violet-glow)} -.train-m .ml{font-size:12px;color:var(--text-soft);margin-top:6px;font-weight:400} -.train-bar-wrap{height:12px;background:rgba(255,255,255,.04);border-radius:6px;overflow:hidden;margin-bottom:8px} -.train-bar{height:100%;width:2%;background:linear-gradient(90deg,var(--heart),var(--violet),var(--cyan),var(--glow));border-radius:6px;transition:width 12s ease;position:relative} +.train-m .ml{font-size:14px;color:var(--text-soft);margin-top:8px;font-weight:400} +.train-bar-wrap{height:14px;background:rgba(255,255,255,.04);border-radius:7px;overflow:hidden;margin-bottom:10px} +.train-bar{height:100%;width:2%;background:linear-gradient(90deg,var(--heart),var(--violet),var(--cyan),var(--glow));border-radius:7px;transition:width 12s ease;position:relative} .train-bar::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);animation:shimmer 3s ease-in-out infinite} -@keyframes shimmer{0%,100%{transform:translateX(-100%)}50%{transform:translateX(100%)}} -.train-foot{text-align:right;font-size:12px;color:var(--text-soft);margin-top:4px} - -/* ── 问铸渊 对话卡片 ── */ +.train-foot{text-align:right;font-size:13px;color:var(--text-soft);margin-top:6px} #chat-card .c-msg{max-width:85%;display:flex;flex-direction:column} #chat-card .c-msg.user{align-self:flex-end} #chat-card .c-msg.bot{align-self:flex-start} -#chat-card .c-c{padding:12px 16px;border-radius:14px;font-size:14px;line-height:1.7;white-space:pre-wrap} +#chat-card .c-c{padding:14px 18px;border-radius:14px;font-size:15px;line-height:1.7;white-space:pre-wrap} #chat-card .c-msg.user .c-c{background:rgba(42,157,191,.12);border:1px solid rgba(42,157,191,.1);color:var(--text)} #chat-card .c-msg.bot .c-c{background:rgba(123,93,191,.08);border:1px solid rgba(123,93,191,.06);color:var(--text)} #chat-card .c-msg.loading .c-c{opacity:.5} #chat-card-body{display:flex;flex-direction:column;gap:0} -#chat-card-msgs{max-height:400px;overflow-y:auto;padding:0 0 12px 0;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth} +#chat-card-msgs{max-height:440px;overflow-y:auto;padding:0 0 14px 0;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth} #chat-card-msgs::-webkit-scrollbar{width:4px} #chat-card-msgs::-webkit-scrollbar-track{background:transparent} #chat-card-msgs::-webkit-scrollbar-thumb{background:rgba(90,208,224,.1);border-radius:2px} -#chat-card-inp{display:flex;gap:10px;border-top:1px solid var(--glass-edge);padding-top:12px} -#card-chat-input{flex:1;padding:12px 16px;background:rgba(255,255,255,.025);border:1px solid var(--glass-edge);border-radius:12px;color:var(--text);font-size:14px;outline:none;font-family:inherit} +#chat-card-inp{display:flex;gap:12px;border-top:1px solid var(--glass-edge);padding-top:14px} +#card-chat-input{flex:1;padding:14px 18px;background:rgba(255,255,255,.025);border:1px solid var(--glass-edge);border-radius:14px;color:var(--text);font-size:15px;outline:none;font-family:inherit} #card-chat-input:focus{border-color:rgba(90,208,224,.2)} -#chat-card-inp button{padding:12px 28px;background:linear-gradient(135deg,rgba(42,157,191,.3),rgba(123,93,191,.2));border:1px solid var(--glass-edge);border-radius:12px;color:var(--light);cursor:pointer;font-size:14px;font-weight:500;transition:all .25s;font-family:inherit;white-space:nowrap} -#chat-card-inp button:hover{background:linear-gradient(135deg,rgba(42,157,191,.5),rgba(123,93,191,.35))} - -/* ── 活动流 ── */ -.feed{display:flex;flex-direction:column;gap:7px} -.feed-item{display:flex;align-items:center;gap:14px;padding:12px 16px;background:rgba(255,255,255,.02);border:1px solid var(--glass-edge);border-radius:14px;transition:all .25s;font-size:14px} -.feed-item:hover{background:rgba(255,255,255,.035)} +#chat-card-inp button{padding:14px 32px;background:linear-gradient(135deg,rgba(42,157,191,.3),rgba(123,93,191,.2));border:1px solid var(--glass-edge);border-radius:14px;color:var(--light);cursor:pointer;font-size:15px;font-weight:500;transition:all .25s;font-family:inherit;white-space:nowrap} +#chat-card-inp button:hover{background:linear-gradient(135deg,rgba(42,157,191,.5),rgba(123,93,191,.35));transform:translateY(-1px);border-color:rgba(90,208,224,.2)} +#chat-card-inp button:active{transform:scale(.97)} +.feed{display:flex;flex-direction:column;gap:8px} +.feed-item{display:flex;align-items:center;gap:16px;padding:14px 18px;background:rgba(255,255,255,.02);border:1px solid var(--glass-edge);border-radius:14px;transition:all .3s;font-size:15px;cursor:pointer} +.feed-item:hover{background:rgba(255,255,255,.035);transform:translateX(3px);border-color:rgba(90,208,224,.1)} +.feed-item:active{transform:scale(.98)} .feed-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0} -.feed-dot.c{background:var(--glow);box-shadow:0 0 8px var(--glow)} -.feed-dot.v{background:var(--violet-glow);box-shadow:0 0 8px var(--violet-glow)} -.feed-dot.g{background:var(--green);box-shadow:0 0 8px var(--green)} -.feed-dot.h{background:var(--heart);box-shadow:0 0 10px var(--heart);animation:feed-h 2s ease-in-out infinite} +.feed-dot.c{background:var(--glow);box-shadow:0 0 10px var(--glow)} +.feed-dot.v{background:var(--violet-glow);box-shadow:0 0 10px var(--violet-glow)} +.feed-dot.g{background:var(--green);box-shadow:0 0 10px var(--green)} +.feed-dot.h{background:var(--heart);box-shadow:0 0 12px var(--heart);animation:feed-h 2s ease-in-out infinite} @keyframes feed-h{0%,100%{transform:scale(1)}50%{transform:scale(1.4)}} .feed-u{color:var(--glow);font-weight:600} .feed-a{color:var(--text-soft)} .feed-r{color:var(--violet-glow);font-weight:500} .feed-t{color:var(--text-faint);font-size:13px;margin-left:auto;flex-shrink:0} - -/* ── 登录入口 ── */ -.login-panel{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;background:rgba(11,20,36,.5);border:1px solid var(--glass-edge);border-radius:18px;gap:16px;flex-wrap:wrap} -.login-hint{font-size:14px;color:var(--text-soft)} +.login-panel{display:flex;align-items:center;justify-content:space-between;padding:20px 28px;background:rgba(11,20,36,.5);border:1px solid var(--glass-edge);border-radius:18px;gap:16px;flex-wrap:wrap} +.login-hint{font-size:15px;color:var(--text-soft)} .login-hint strong{color:var(--light);font-weight:600} -.login-in{display:flex;gap:10px;align-items:center;flex-wrap:wrap} -.login-in input{padding:10px 16px;background:rgba(255,255,255,.035);border:1px solid var(--glass-edge);border-radius:12px;color:var(--text);font-size:14px;outline:none;transition:all .25s;font-family:inherit;width:130px;font-weight:400} -.login-in input:focus{border-color:rgba(90,208,224,.3);box-shadow:0 0 16px rgba(42,157,191,.08)} +.login-in{display:flex;gap:12px;align-items:center;flex-wrap:wrap} +.login-in input{padding:12px 18px;background:rgba(255,255,255,.035);border:1px solid var(--glass-edge);border-radius:14px;color:var(--text);font-size:15px;outline:none;transition:all .25s;font-family:inherit;width:140px;font-weight:400} +.login-in input:focus{border-color:rgba(90,208,224,.3);box-shadow:0 0 20px rgba(42,157,191,.08)} .login-in input::placeholder{color:var(--text-faint)} -.login-in button{padding:10px 24px;background:linear-gradient(135deg,rgba(42,157,191,.3),rgba(123,93,191,.2));border:1px solid var(--glass-edge);border-radius:12px;color:var(--light);font-size:14px;font-weight:500;cursor:pointer;transition:all .25s;font-family:inherit;letter-spacing:.08em} -.login-in button:hover{background:linear-gradient(135deg,rgba(42,157,191,.5),rgba(123,93,191,.35));border-color:rgba(90,208,224,.2);box-shadow:0 0 24px rgba(42,157,191,.06)} -.login-note{margin-top:10px;font-size:13px;color:var(--text-faint);line-height:1.6} +.login-in button{padding:12px 28px;background:linear-gradient(135deg,rgba(42,157,191,.3),rgba(123,93,191,.2));border:1px solid var(--glass-edge);border-radius:14px;color:var(--light);font-size:15px;font-weight:500;cursor:pointer;transition:all .25s;font-family:inherit;letter-spacing:.08em} +.login-in button:hover{background:linear-gradient(135deg,rgba(42,157,191,.5),rgba(123,93,191,.35));border-color:rgba(90,208,224,.2);transform:translateY(-1px)} +.login-in button:active{transform:scale(.97)} +.login-note{margin-top:12px;font-size:13px;color:var(--text-faint);line-height:1.6} .login-note a{color:var(--glow);text-decoration:none} .login-note a:hover{text-decoration:underline} - -/* ── Notion ── */ -.notion-card{min-height:120px;display:flex;flex-direction:column} +.notion-card{min-height:140px;display:flex;flex-direction:column} .notion-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8px 0} -.notion-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 22px;margin-top:12px;background:linear-gradient(135deg,rgba(123,93,191,.2),rgba(42,157,191,.1));border:1px solid var(--glass-edge);border-radius:12px;color:var(--light);font-size:14px;font-weight:500;cursor:pointer;transition:all .25s;font-family:inherit} -.notion-btn:hover{background:linear-gradient(135deg,rgba(123,93,191,.35),rgba(42,157,191,.2));border-color:rgba(90,208,224,.2);transform:translateY(-1px)} -.notion-btn .nb-dot{width:7px;height:7px;border-radius:50%;background:var(--text-faint);flex-shrink:0} +.notion-btn{display:inline-flex;align-items:center;gap:10px;padding:12px 26px;margin-top:14px;background:linear-gradient(135deg,rgba(123,93,191,.2),rgba(42,157,191,.1));border:1px solid var(--glass-edge);border-radius:14px;color:var(--light);font-size:15px;font-weight:500;cursor:pointer;transition:all .25s;font-family:inherit} +.notion-btn:hover{background:linear-gradient(135deg,rgba(123,93,191,.35),rgba(42,157,191,.2));border-color:rgba(90,208,224,.2);transform:translateY(-2px)} +.notion-btn:active{transform:scale(.97)} +.notion-btn .nb-dot{width:8px;height:8px;border-radius:50%;background:var(--text-faint);flex-shrink:0} .notion-btn.done{background:rgba(64,184,122,.12);border-color:rgba(64,184,122,.2);color:var(--green)} -.notion-btn.done .nb-dot{background:var(--green);box-shadow:0 0 8px var(--green)} -.notion-perm{font-size:12px;color:var(--text-faint);margin-top:10px;line-height:1.5} +.notion-btn.done .nb-dot{background:var(--green);box-shadow:0 0 10px var(--green)} +.notion-perm{font-size:13px;color:var(--text-faint);margin-top:12px;line-height:1.6} .notion-perm .ok{color:var(--green)} .notion-perm .no{color:var(--text-faint)} - -/* ── Footer ── */ -.footer{text-align:center;padding:24px;font-size:13px;color:var(--text-faint);letter-spacing:.15em;border-top:1px solid var(--glass-edge);margin-top:auto;position:relative;z-index:1;font-weight:400} - -/* ── 登录态 ── */ -#login-bar{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;background:rgba(11,20,36,.5);border:1px solid var(--glass-edge);border-radius:18px;gap:16px;flex-wrap:wrap} -#login-bar .hint{font-size:14px;color:var(--text-soft)} +.footer{text-align:center;padding:28px;font-size:14px;color:var(--text-faint);letter-spacing:.12em;border-top:1px solid var(--glass-edge);margin-top:auto;position:relative;z-index:1;font-weight:400} +#login-bar{display:flex;align-items:center;justify-content:space-between;padding:20px 28px;background:rgba(11,20,36,.5);border:1px solid var(--glass-edge);border-radius:18px;gap:16px;flex-wrap:wrap} +#login-bar .hint{font-size:15px;color:var(--text-soft)} #login-bar .hint strong{color:var(--light);font-weight:600} -.login-in{display:flex;gap:10px;align-items:center;flex-wrap:wrap} -.login-in input{padding:10px 16px;background:rgba(255,255,255,.035);border:1px solid var(--glass-edge);border-radius:12px;color:var(--text);font-size:14px;outline:none;transition:all .25s;font-family:inherit;width:130px;font-weight:400} -.login-in input:focus{border-color:rgba(90,208,224,.3);box-shadow:0 0 16px rgba(42,157,191,.08)} -.login-in input::placeholder{color:var(--text-faint)} -.login-in button{padding:10px 24px;background:linear-gradient(135deg,rgba(42,157,191,.3),rgba(123,93,191,.2));border:1px solid var(--glass-edge);border-radius:12px;color:var(--light);font-size:14px;font-weight:500;cursor:pointer;transition:all .25s;font-family:inherit;letter-spacing:.08em} -.login-in button:hover{background:linear-gradient(135deg,rgba(42,157,191,.5),rgba(123,93,191,.35));border-color:rgba(90,208,224,.2)} -.login-in button:disabled{opacity:.4;cursor:not-allowed} -#logged-in-bar{display:none;align-items:center;justify-content:space-between;padding:16px 24px;background:rgba(64,184,122,.06);border:1px solid rgba(64,184,122,.15);border-radius:18px;gap:16px;flex-wrap:wrap} -#logged-in-bar .user-badge{display:flex;align-items:center;gap:10px} -#logged-in-bar .user-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,rgba(42,157,191,.4),rgba(123,93,191,.3));display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--light);font-weight:600} -#logged-in-bar .user-name{font-size:15px;font-weight:600;color:var(--light)} -#logged-in-bar .user-status{font-size:12px;color:var(--green)} -.logged-actions{display:flex;gap:10px;flex-wrap:wrap} -.logged-actions button{padding:10px 22px;border-radius:12px;font-size:14px;font-weight:500;cursor:pointer;transition:all .25s;font-family:inherit} +#logged-in-bar{display:none;align-items:center;justify-content:space-between;padding:18px 28px;background:rgba(64,184,122,.06);border:1px solid rgba(64,184,122,.15);border-radius:18px;gap:16px;flex-wrap:wrap} +#logged-in-bar .user-badge{display:flex;align-items:center;gap:12px} +#logged-in-bar .user-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,rgba(42,157,191,.4),rgba(123,93,191,.3));display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--light);font-weight:600} +#logged-in-bar .user-name{font-size:16px;font-weight:600;color:var(--light)} +#logged-in-bar .user-status{font-size:13px;color:var(--green)} +.logged-actions{display:flex;gap:12px;flex-wrap:wrap} +.logged-actions button{padding:12px 26px;border-radius:14px;font-size:15px;font-weight:500;cursor:pointer;transition:all .25s;font-family:inherit} .logged-actions .btn-primary{background:linear-gradient(135deg,rgba(42,157,191,.35),rgba(123,93,191,.25));border:1px solid var(--glass-edge);color:var(--light)} -.logged-actions .btn-primary:hover{background:linear-gradient(135deg,rgba(42,157,191,.55),rgba(123,93,191,.4))} +.logged-actions .btn-primary:hover{background:linear-gradient(135deg,rgba(42,157,191,.55),rgba(123,93,191,.4));transform:translateY(-1px)} .logged-actions .btn-secondary{background:rgba(255,255,255,.03);border:1px solid var(--glass-edge);color:var(--text-soft)} -.logged-actions .btn-secondary:hover{background:rgba(255,255,255,.06);color:var(--light)} -.logged-actions .btn-logout{background:transparent;border:1px solid rgba(224,74,116,.2);color:var(--heart);font-size:13px} +.logged-actions .btn-secondary:hover{background:rgba(255,255,255,.06);color:var(--light);transform:translateY(-1px)} +.logged-actions .btn-logout{background:transparent;border:1px solid rgba(224,74,116,.2);color:var(--heart);font-size:14px} .logged-actions .btn-logout:hover{background:rgba(224,74,116,.08)} +.login-error{color:var(--heart);font-size:14px;margin-top:8px;display:none} +.login-loading{color:var(--text-soft);font-size:14px;margin-top:8px;display:none} -.login-error{color:var(--heart);font-size:13px;margin-top:6px;display:none} -.login-loading{color:var(--text-soft);font-size:13px;margin-top:6px;display:none} +/* ── 浮窗Chat ── */ +#chat-toggle{position:fixed;bottom:28px;right:28px;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,rgba(42,157,191,.5),rgba(123,93,191,.35));border:1px solid var(--glass-edge);display:flex;align-items:center;justify-content:center;color:var(--light);cursor:pointer;z-index:100;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:all .4s cubic-bezier(.22,1,.36,1);box-shadow:0 6px 28px rgba(0,0,0,.4);animation:cp 4s ease-in-out infinite} +@keyframes cp{0%,100%{box-shadow:0 6px 28px rgba(0,0,0,.4)}50%{box-shadow:0 6px 40px rgba(90,208,224,.15),0 6px 28px rgba(0,0,0,.4)}} +#chat-toggle:hover{transform:scale(1.12);border-color:rgba(90,208,224,.35)} +#chat-toggle:active{transform:scale(.95)} +#chat-panel{position:fixed;bottom:94px;right:28px;width:400px;height:540px;background:rgba(11,20,36,.96);border:1px solid var(--glass-edge);border-radius:18px;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);z-index:100;display:none;flex-direction:column;overflow:hidden;box-shadow:0 12px 60px rgba(0,0,0,.5)} +#chat-panel.open{display:flex} +#chat-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--glass-edge);font-size:15px;font-weight:500;color:var(--light)} +#chat-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth} +.c-msg{max-width:88%;display:flex;flex-direction:column} +.c-msg.user{align-self:flex-end} +.c-msg.bot{align-self:flex-start} +.c-c{padding:14px 18px;border-radius:14px;font-size:14px;line-height:1.7;white-space:pre-wrap;font-family:inherit} +.c-msg.user .c-c{background:rgba(42,157,191,.15);border:1px solid rgba(42,157,191,.12);color:var(--text)} +.c-msg.bot .c-c{background:rgba(123,93,191,.1);border:1px solid rgba(123,93,191,.08);color:var(--text)} +.c-msg.loading .c-c{opacity:.5} +#chat-inp{display:flex;padding:12px 16px;gap:10px;border-top:1px solid var(--glass-edge)} +#chat-input{flex:1;padding:12px 16px;background:rgba(255,255,255,.03);border:1px solid var(--glass-edge);border-radius:14px;color:var(--text);font-size:14px;outline:none;font-family:inherit} +#chat-input:focus{border-color:rgba(90,208,224,.2)} +#chat-inp button{padding:12px 24px;background:linear-gradient(135deg,rgba(42,157,191,.3),rgba(123,93,191,.2));border:1px solid var(--glass-edge);border-radius:14px;color:var(--light);cursor:pointer;font-size:14px;font-weight:500;transition:all .25s;font-family:inherit} +#chat-inp button:hover{background:linear-gradient(135deg,rgba(42,157,191,.5),rgba(123,93,191,.35));transform:translateY(-1px)} +#chat-inp button:active{transform:scale(.97)} +#chat-msgs::-webkit-scrollbar{width:4px}#chat-msgs::-webkit-scrollbar-track{background:transparent}#chat-msgs::-webkit-scrollbar-thumb{background:rgba(90,208,224,.12);border-radius:2px} +@media(max-width:480px){#chat-panel{width:calc(100vw - 32px);height:60vh;right:16px;bottom:84px}}
@@ -259,7 +262,6 @@ body{