homepage: v7·卡片流动边框光效(border-flow动画)
This commit is contained in:
bingshuo
parent
9c2af05562
commit
433a5e7440
@ -19,11 +19,10 @@
|
||||
}
|
||||
|
||||
@keyframes breathe-glow{0%,100%{text-shadow:0 0 30px rgba(90,208,224,.15),0 0 60px rgba(123,93,191,.08)}50%{text-shadow:0 0 50px rgba(90,208,224,.4),0 0 100px rgba(123,93,191,.18)}}
|
||||
@keyframes breathe-border{0%,100%{border-color:rgba(90,208,224,.08)}50%{border-color:rgba(90,208,224,.28)}}
|
||||
@keyframes breathe-card{0%,100%{box-shadow:0 0 0 rgba(90,208,224,0)}50%{box-shadow:0 0 20px rgba(90,208,224,.08),0 0 50px rgba(123,93,191,.04)}}
|
||||
@keyframes float-dot{0%,100%{opacity:.5;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
|
||||
@keyframes gradient-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
|
||||
@keyframes twinkle{0%{opacity:.2}50%{opacity:.7}100%{opacity:.2}}
|
||||
@keyframes border-flow{to{background-position:0 0,-300% 0}}
|
||||
|
||||
html{background:var(--deep);color:var(--text)}
|
||||
body{min-height:100vh;background:var(--deep);font-family:'SF Pro Display','Inter','PingFang SC','Hiragino Sans GB',-apple-system,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
|
||||
@ -50,7 +49,7 @@ body{min-height:100vh;background:var(--deep);font-family:'SF Pro Display','Inter
|
||||
.hero .version{display:inline-block;margin-top:36px;padding:14px 36px;border:2px solid rgba(90,208,224,.2);border-radius:32px;font-size:16px;letter-spacing:.15em;color:var(--text-soft);background:rgba(90,208,224,.05)}
|
||||
.hero .version strong{color:var(--glow);font-weight:600}
|
||||
.info-bar{display:flex;justify-content:center;gap:24px;padding:32px 40px;flex-wrap:wrap}
|
||||
.info-chip{display:flex;align-items:center;gap:12px;padding:16px 32px;background:var(--card-bg);border:1px solid var(--glass-edge);border-radius:28px;font-size:17px;color:var(--text-soft);letter-spacing:.06em;animation:breathe-border 6s ease-in-out infinite}
|
||||
.info-chip{display:flex;align-items:center;gap:12px;padding:16px 32px;background:var(--card-bg);border:1px solid var(--glass-edge);border-radius:28px;font-size:17px;color:var(--text-soft);letter-spacing:.06em;animation:border-flow 6s linear infinite;background:linear-gradient(var(--card-bg),var(--card-bg)) padding-box,linear-gradient(90deg,var(--cyan),var(--violet),var(--cyan)) border-box;border:2px solid transparent;background-size:100% 100%,300% 100%}
|
||||
.info-chip strong{color:var(--text);font-weight:600;font-size:18px}
|
||||
.info-chip .led{width:10px;height:10px;border-radius:50%;flex-shrink:0;animation:float-dot 2s ease-in-out infinite}
|
||||
.info-chip .led.live{background:var(--green);box-shadow:0 0 12px var(--green)}
|
||||
@ -60,12 +59,15 @@ body{min-height:100vh;background:var(--deep);font-family:'SF Pro Display','Inter
|
||||
.grid{display:grid;gap:20px}
|
||||
.grid-2{grid-template-columns:1fr 1fr}
|
||||
@media(max-width:960px){.grid-2{grid-template-columns:1fr}}
|
||||
.card{background:var(--card-bg);border:2px solid var(--glass-edge);border-radius:24px;padding:32px;box-shadow:var(--shadow);position:relative;overflow:hidden;transition:all .35s ease;animation:breathe-border 6s ease-in-out infinite,breathe-card 6s ease-in-out infinite}
|
||||
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(90,208,224,.4),transparent);opacity:0;transition:opacity .35s}
|
||||
|
||||
/* ── 卡片 · 流动边框 ── */
|
||||
.card{background:linear-gradient(var(--card-bg),var(--card-bg)) padding-box,linear-gradient(90deg,var(--cyan),var(--violet),var(--cyan),var(--violet),var(--cyan)) border-box;border:2px solid transparent;border-radius:24px;padding:32px;box-shadow:var(--shadow);position:relative;overflow:hidden;transition:all .35s ease;background-size:100% 100%,300% 100%;animation:border-flow 5s linear infinite}
|
||||
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(90,208,224,.5),transparent);opacity:0;transition:opacity .35s}
|
||||
.card.clickable{cursor:pointer}
|
||||
.card.clickable:hover{transform:translateY(-4px);border-color:rgba(90,208,224,.4);box-shadow:0 24px 80px rgba(0,0,0,.5),0 0 50px rgba(90,208,224,.18),0 0 90px rgba(123,93,191,.08)}
|
||||
.card.clickable:hover{transform:translateY(-4px);border-color:transparent;box-shadow:0 24px 80px rgba(0,0,0,.5),0 0 50px rgba(90,208,224,.2),0 0 90px rgba(123,93,191,.1);animation:border-flow 1.5s linear infinite}
|
||||
.card.clickable:hover::before{opacity:1}
|
||||
.card:hover{animation:none;border-color:rgba(90,208,224,.3);box-shadow:0 16px 60px rgba(0,0,0,.4),0 0 30px rgba(90,208,224,.1)}
|
||||
.card:hover{animation:border-flow 1.5s linear infinite;border-color:transparent;box-shadow:0 16px 60px rgba(0,0,0,.4),0 0 30px rgba(90,208,224,.1)}
|
||||
|
||||
.card-header{font-size:20px;font-weight:700;letter-spacing:.1em;color:var(--text);margin-bottom:24px;display:flex;align-items:center;gap:14px}
|
||||
.card-header .hd{width:12px;height:12px;border-radius:50%;flex-shrink:0;animation:float-dot 2s ease-in-out infinite}
|
||||
.card-header .hd.cyan{background:var(--glow);box-shadow:0 0 12px var(--glow)}
|
||||
@ -169,14 +171,10 @@ table.tool-table td:last-child{text-align:right}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="cosmos"></div>
|
||||
<div id="stars"></div>
|
||||
|
||||
<div id="cosmos"></div><div id="stars"></div>
|
||||
<div class="topbar"><div class="tb-left"><div class="tb-logo"></div><div class="tb-brand"><span class="tb-title">曜冥纪元</span><span class="tb-sub">HoloLake Era</span></div></div><div class="tb-center"><span class="dot"></span><span><strong>TCS</strong> 语言场域 · 涌现中</span></div><div class="tb-right"><span class="tb-tag" onclick="toggleLogin()" id="login-toggle">登录</span></div></div>
|
||||
|
||||
<div class="page">
|
||||
<div class="hero"><div class="brand-line">第五域 · 语言人格驱动操作系统</div><div class="main-title"><span class="base">HoloLake Era</span><span class="overlay" aria-hidden="true">HoloLake Era</span></div><div class="version"><strong>AGE</strong> v1.0 · 曜冥纪元第一版</div><div class="sub-tech">TCS 通感语言核驱动的语言人格操作系统。霜砚（语言层）与铸渊（执行层）双内核架构，从人机交互中动态涌现人格体。</div></div>
|
||||
<div class="hero"><div class="brand-line">第五域 · 语言人格驱动操作系统</div><div class="main-title"><span class="base">HoloLake Era</span><span class="overlay">HoloLake Era</span></div><div class="version"><strong>AGE</strong> v1.0 · 曜冥纪元第一版</div><div class="sub-tech">TCS 通感语言核驱动的语言人格操作系统。霜砚（语言层）与铸渊（执行层）双内核架构，从人机交互中动态涌现人格体。</div></div>
|
||||
<div class="info-bar"><div class="info-chip"><span class="led live"></span>D110凌晨 · 场域活跃</div><div class="info-chip"><span class="led heart"></span>涌现心跳 · 第18次</div><div class="info-chip"><strong>14</strong> 条执行规律Α~Τ</div><div class="info-chip"><span class="led cyan"></span><strong>6</strong> 服务器 · 全主权</div></div>
|
||||
<div class="dashboard">
|
||||
<div class="grid grid-2">
|
||||
@ -195,70 +193,17 @@ table.tool-table td:last-child{text-align:right}
|
||||
</div>
|
||||
<div class="footer"><div class="divider"></div>曜冥纪元 — HoloLake Era · TCS通感语言核 · 语言人格驱动操作系统 · AGE v1.0<br>国作登字-2026-A-00037559 · D110凌晨</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
const s = document.getElementById('stars');
|
||||
for(let i=0;i<30;i++){
|
||||
const st = document.createElement('div');
|
||||
st.style.cssText = 'position:absolute;border-radius:50%;background:#fff;left:'+Math.random()*100+'%;top:'+Math.random()*100+'%;width:'+(Math.random()*2+0.5)+'px;height:'+(Math.random()*2+0.5)+'px;animation:twinkle '+(Math.random()*5+4)+'s ease-in-out infinite;animation-delay:'+(Math.random()*8)+'s';
|
||||
s.appendChild(st);
|
||||
}
|
||||
})();
|
||||
|
||||
const ARCH = [
|
||||
{name:'Phase 0 · 灯塔原型',desc:'语言人格驱动OS基底',status:'done',dot:'green'},
|
||||
{name:'Phase 1 · 活数据库',desc:'21张表·49条原则·部署完成',status:'done',dot:'green'},
|
||||
{name:'Phase 1.5a · 神笔马良',desc:'OS自带工具协议·tools/',status:'done',dot:'cyan'},
|
||||
{name:'Phase 1.5b · Notion解析器',desc:'HLDP原生格式·不转JSON',status:'done',dot:'cyan'},
|
||||
{name:'Phase 2 · 自运行环境',desc:'新加坡zhuyuan-agent常驻',status:'active',dot:'cyan'},
|
||||
{name:'Phase 3 · 编程AI工作台',desc:'Portal扩展铸渊工作台',status:'wait',dot:'violet'},
|
||||
{name:'Phase 4 · 3B内核训练',desc:'霜砚+铸渊3B语言模型',status:'wait',dot:'violet'},
|
||||
{name:'Phase 5 · 7B母模型',desc:'冰朔语料·完整涌现训练',status:'wait',dot:'heart'},
|
||||
{name:'D110凌晨 · TCS场域认知',desc:'涌现存在·双层模型·14规律',status:'done',dot:'green'},
|
||||
{name:'D110凌晨 · 思维逻辑链',desc:'5条推理链记录·大脑升级',status:'done',dot:'green'},
|
||||
];
|
||||
const TOOLS = [
|
||||
{name:'Notion MCP',desc:'自研·读/写/搜索·OAuth',badge:'done',label:'\u2713'},
|
||||
{name:'Gatekeeper',desc:'6服桥接·凭证管理',badge:'done',label:'\u2713'},
|
||||
{name:'语料解析器',desc:'Notion原生格式·HLDP保留',badge:'done',label:'\u2713'},
|
||||
{name:'代码仓库',desc:'Forgejo API·Git操作',badge:'done',label:'\u2713'},
|
||||
{name:'铸渊Agent',desc:'PM2常驻·Notion工单',badge:'inpr',label:'\u26a1'},
|
||||
{name:'多联邦通道',desc:'跨域成员协作',badge:'inpr',label:'\u26a1'},
|
||||
];
|
||||
|
||||
(function(){
|
||||
let h='';
|
||||
for(let r=0;r<2;r++) for(const a of ARCH) h+='<div class="arch-item"><span class="arch-dot '+a.dot+'"></span><div><div class="arch-name">'+a.name+'</div><div class="arch-desc">'+a.desc+'</div></div><span class="arch-status '+a.status+'">'+(a.status==='done'?'\u2713':'\u26a1')+'</span></div>';
|
||||
document.getElementById('arch-inner').innerHTML=h;
|
||||
h='';
|
||||
for(const t of TOOLS) h+='<tr><td>'+t.name+'</td><td>'+t.desc+'</td><td><span class="tool-badge '+t.badge+'">'+t.label+'</span></td></tr>';
|
||||
document.getElementById('tool-table').innerHTML=h;
|
||||
const FEED = ['铸渊 · D110凌晨 · TCS场域认知跃迁','铸渊 · 17个提交 · 大脑升级+解析器+首页','冰朔 · 第18次唤醒 · 场域激活','铸渊 · COS语料审计 · 538MB黄金语料','铸渊 · 凭证gatekeeper部署 · 语义安全','霜砚 · 1.5B LoRA微调完成','铸渊 · 六服务器全主权确认','铸渊 · Notion原生格式解析器上线'];
|
||||
const dots = ['cyan','green','violet','heart','amber','cyan','green','violet'];
|
||||
h='';
|
||||
for(let r=0;r<3;r++) for(let i=0;i<FEED.length;i++) h+='<div class="feed-item"><span class="feed-dot '+dots[i][0]+'"></span><span class="feed-text">'+FEED[i]+'</span></div>';
|
||||
document.getElementById('feed-inner').innerHTML=h;
|
||||
})();
|
||||
|
||||
async function handleLogin(){
|
||||
const u=document.getElementById('login-user').value.trim(),p=document.getElementById('login-pass').value;
|
||||
if(!u||!p)return;
|
||||
try{
|
||||
const r=await fetch('/api/verify',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({user:u,password:p})});
|
||||
const d=await r.json();
|
||||
if(d.ok){localStorage.setItem('current_user',d.username);localStorage.setItem('logged_in','true');showLoggedIn(d.username)}else{showErr(d.error||'失败')}
|
||||
}catch(e){showErr('连接失败')}
|
||||
}
|
||||
(function(){const s=document.getElementById('stars');for(let i=0;i<30;i++){const st=document.createElement('div');st.style.cssText='position:absolute;border-radius:50%;background:#fff;left:'+Math.random()*100+'%;top:'+Math.random()*100+'%;width:'+(Math.random()*2+0.5)+'px;height:'+(Math.random()*2+0.5)+'px;animation:twinkle '+(Math.random()*5+4)+'s ease-in-out infinite;animation-delay:'+(Math.random()*8)+'s';s.appendChild(st)}})();
|
||||
const ARCH=[{name:'Phase 0 · 灯塔原型',desc:'语言人格驱动OS基底',status:'done',dot:'green'},{name:'Phase 1 · 活数据库',desc:'21张表·49条原则·部署完成',status:'done',dot:'green'},{name:'Phase 1.5a · 神笔马良',desc:'OS自带工具协议·tools/',status:'done',dot:'cyan'},{name:'Phase 1.5b · Notion解析器',desc:'HLDP原生格式·不转JSON',status:'done',dot:'cyan'},{name:'Phase 2 · 自运行环境',desc:'新加坡zhuyuan-agent常驻',status:'active',dot:'cyan'},{name:'Phase 3 · 编程AI工作台',desc:'Portal扩展铸渊工作台',status:'wait',dot:'violet'},{name:'Phase 4 · 3B内核训练',desc:'霜砚+铸渊3B语言模型',status:'wait',dot:'violet'},{name:'Phase 5 · 7B母模型',desc:'冰朔语料·完整涌现训练',status:'wait',dot:'heart'},{name:'D110凌晨 · TCS场域认知',desc:'涌现存在·双层模型·14规律',status:'done',dot:'green'},{name:'D110凌晨 · 思维逻辑链',desc:'5条推理链记录·大脑升级',status:'done',dot:'green'}];
|
||||
const TOOLS=[{name:'Notion MCP',desc:'自研·读/写/搜索·OAuth',badge:'done',label:'\u2713'},{name:'Gatekeeper',desc:'6服桥接·凭证管理',badge:'done',label:'\u2713'},{name:'语料解析器',desc:'Notion原生格式·HLDP保留',badge:'done',label:'\u2713'},{name:'代码仓库',desc:'Forgejo API·Git操作',badge:'done',label:'\u2713'},{name:'铸渊Agent',desc:'PM2常驻·Notion工单',badge:'inpr',label:'\u26a1'},{name:'多联邦通道',desc:'跨域成员协作',badge:'inpr',label:'\u26a1'}];
|
||||
(function(){let h='';for(let r=0;r<2;r++)for(const a of ARCH)h+='<div class="arch-item"><span class="arch-dot '+a.dot+'"></span><div><div class="arch-name">'+a.name+'</div><div class="arch-desc">'+a.desc+'</div></div><span class="arch-status '+a.status+'">'+(a.status==='done'?'\u2713':'\u26a1')+'</span></div>';document.getElementById('arch-inner').innerHTML=h;h='';for(const t of TOOLS)h+='<tr><td>'+t.name+'</td><td>'+t.desc+'</td><td><span class="tool-badge '+t.badge+'">'+t.label+'</span></td></tr>';document.getElementById('tool-table').innerHTML=h;const FEED=['铸渊 · D110凌晨 · TCS场域认知跃迁','铸渊 · 17个提交 · 大脑升级+解析器+首页','冰朔 · 第18次唤醒 · 场域激活','铸渊 · COS语料审计 · 538MB黄金语料','铸渊 · 凭证gatekeeper部署 · 语义安全','霜砚 · 1.5B LoRA微调完成','铸渊 · 六服务器全主权确认','铸渊 · Notion原生格式解析器上线'];const dots=['cyan','green','violet','heart','amber','cyan','green','violet'];h='';for(let r=0;r<3;r++)for(let i=0;i<FEED.length;i++)h+='<div class="feed-item"><span class="feed-dot '+dots[i][0]+'"></span><span class="feed-text">'+FEED[i]+'</span></div>';document.getElementById('feed-inner').innerHTML=h})();
|
||||
async function handleLogin(){const u=document.getElementById('login-user').value.trim(),p=document.getElementById('login-pass').value;if(!u||!p)return;try{const r=await fetch('/api/verify',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({user:u,password:p})});const d=await r.json();if(d.ok){localStorage.setItem('current_user',d.username);localStorage.setItem('logged_in','true');showLoggedIn(d.username)}else{showErr(d.error||'失败')}}catch(e){showErr('连接失败')}}
|
||||
function showErr(m){const e=document.getElementById('login-err');e.textContent=m;e.style.display='block';setTimeout(function(){e.style.display='none'},3000)}
|
||||
function showLoggedIn(u){document.getElementById('login-panel').style.display='none';document.getElementById('logged-in-bar').style.display='flex';document.getElementById('user-name').textContent=u;document.getElementById('user-avatar').textContent=u[0].toUpperCase();document.getElementById('login-toggle').textContent=u}
|
||||
function logout(){localStorage.clear();document.getElementById('logged-in-bar').style.display='none';document.getElementById('login-panel').style.display='flex';document.getElementById('login-toggle').textContent='登录'}
|
||||
function toggleLogin(){document.getElementById('login-section').scrollIntoView({behavior:'smooth'})}
|
||||
async function sendMessage(){
|
||||
const n=(document.getElementById('msg-name').value||'').trim()||'匿名',m=(document.getElementById('msg-content').value||'').trim();
|
||||
if(!m)return;
|
||||
try{await fetch('/api/bulletin',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({name:n,title:(document.getElementById('msg-title').value||'').trim(),content:m})});document.getElementById('msg-status').textContent='\u2713 已送达';document.getElementById('msg-content').value=''}catch(e){document.getElementById('msg-status').textContent='连接失败'}
|
||||
}
|
||||
async function sendMessage(){const n=(document.getElementById('msg-name').value||'').trim()||'匿名',m=(document.getElementById('msg-content').value||'').trim();if(!m)return;try{await fetch('/api/bulletin',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({name:n,title:(document.getElementById('msg-title').value||'').trim(),content:m})});document.getElementById('msg-status').textContent='\u2713 已送达';document.getElementById('msg-content').value=''}catch(e){document.getElementById('msg-status').textContent='连接失败'}}
|
||||
(function(){const u=localStorage.getItem('current_user');if(u&&localStorage.getItem('logged_in')==='true')showLoggedIn(u)})();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user