fix: 同步工作区最新index.html/login.html(图片轮播版)

index.html

@@ -68,18 +68,38 @@
   .threads::-webkit-scrollbar,.codex-grid::-webkit-scrollbar,.story-reader::-webkit-scrollbar,
   .panel-scroll::-webkit-scrollbar,.toc-list::-webkit-scrollbar{display:none;width:0;height:0;}
 
-  /* ===== 介绍（视频主页） ===== */
+  /* ===== 介绍（图片轮播主页） ===== */
   #intro{padding:0;}
   .hero{position:relative;flex:1;border-radius:0;overflow:hidden;}
-  .hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
+  .hero .slideshow{position:absolute;inset:0;overflow:hidden;}
-  .hero .veil{position:absolute;inset:0;background:linear-gradient(110deg, rgba(8,12,26,.80) 0%, rgba(14,23,48,.28) 46%, rgba(8,12,26,.5) 100%);}
+  .hero .slide-track{position:absolute;inset:0;display:flex;flex-direction:column;transition:transform 1.25s cubic-bezier(0.4,0,0.2,1);will-change:transform;}
-  .hero .copy{position:absolute;left:56px;bottom:48px;right:56px;}
+  .hero .slide{flex:0 0 100%;width:100%;height:100%;background-size:cover;background-position:center;position:relative;}
-  .hero .copy h1{font-family:"ZCOOL QingKe HuangYou",sans-serif;font-size:64px;letter-spacing:8px;color:#fff;text-shadow:0 0 28px rgba(139,92,246,.8);line-height:1;}
+  .hero .slide::before{content:"";position:absolute;inset:0;
-  .hero .copy .sub2{font-family:"Press Start 2P",monospace;font-size:13px;color:var(--gold);margin:12px 0 16px;letter-spacing:1px;}
+    background:linear-gradient(90deg, rgba(8,12,26,.92) 0%, rgba(8,12,26,.70) 22%, rgba(8,12,26,.40) 40%, transparent 58%),
-  .hero .copy .tag{font-size:22px;font-weight:500;color:#fff;margin-bottom:9px;}
+      linear-gradient(180deg, rgba(8,12,26,.55) 0%, transparent 35%);}
-  .hero .copy .desc{font-size:15px;color:var(--text-dim);max-width:560px;line-height:1.7;}
+  .hero .copy{position:absolute;left:56px;top:56px;z-index:3;pointer-events:none;}
-  .hero .copy{z-index:3;pointer-events:none;}
+  .hero .copy h1{font-family:"ZCOOL QingKe HuangYou",sans-serif;font-size:56px;letter-spacing:10px;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.9),0 0 32px rgba(139,92,246,.7);line-height:1.2;}
-  .hero .enter-wrap{position:absolute;left:0;right:0;bottom:44px;display:flex;justify-content:center;z-index:5;}
+  .hero .copy .sub2{font-family:"Press Start 2P",monospace;font-size:11px;color:var(--gold);margin:6px 0 0;letter-spacing:2px;text-shadow:0 1px 8px rgba(0,0,0,.9);}
+  .hero .copy .tag{font-size:20px;font-weight:500;color:#e8ecf6;margin-top:4px;text-shadow:0 1px 10px rgba(0,0,0,.85);}
+  /* 轮播左下角特色文案 */
+  .slide-label{position:absolute;left:56px;bottom:72px;z-index:4;pointer-events:none;opacity:0;transform:translateY(16px);transition:opacity .8s ease, transform .8s ease;}
+  .slide.active .slide-label{opacity:1;transform:translateY(0);}
+  .slide-label .sl-en{font-family:"Press Start 2P",monospace;font-size:13px;color:var(--cyan);letter-spacing:3px;margin-bottom:10px;display:block;text-shadow:0 1px 8px rgba(0,0,0,.9);}
+  .slide-label .sl-cn{font-family:"ZCOOL QingKe HuangYou",sans-serif;font-size:46px;letter-spacing:7px;color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.95),0 0 30px rgba(139,92,246,.65);line-height:1.25;}
+  .slide-label .sl-desc{font-size:16px;color:#c8d2ec;margin-top:12px;max-width:500px;line-height:1.85;text-shadow:0 1px 8px rgba(0,0,0,.88);}
+  /* 轮播指示器（竖排右侧） */
+  .sl-dots{position:absolute;right:40px;bottom:96px;top:auto;transform:none;z-index:5;display:flex;flex-direction:column;gap:14px;pointer-events:auto;}
+  .sl-dot{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.4);cursor:pointer;transition:.3s;flex:0 0 auto;}
+  .sl-dot:hover{background:rgba(255,255,255,.5);}
+  .sl-dot.active{background:var(--gold);border-color:var(--gold);box-shadow:0 0 12px rgba(231,184,92,.6);transform:scale(1.15);}
+  /* 轮播右上角竖排「起源历史」 */
+  .slide-origin{position:absolute;right:72px;top:48px;z-index:4;pointer-events:none;writing-mode:vertical-rl;text-orientation:upright;
+    font-family:"Noto Sans SC",sans-serif;font-size:16px;font-weight:500;letter-spacing:3px;line-height:1.55;color:rgba(240,244,252,.94);
+    text-shadow:0 1px 3px rgba(0,0,0,.92);max-height:28vh;overflow:hidden;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
+    opacity:0;transform:translateY(-12px);transition:opacity .9s ease .25s, transform .9s ease .25s;}
+  .slide.active .slide-origin{opacity:1;transform:translateY(0);}
+  .slide-origin .so-tag{color:var(--gold);font-family:"ZCOOL QingKe HuangYou",sans-serif;font-size:19px;letter-spacing:5px;margin-bottom:7px;text-shadow:0 1px 4px rgba(0,0,0,.92),0 0 10px rgba(231,184,92,.45);}
+  .hero .enter-wrap{position:absolute;left:0;right:0;bottom:28px;display:flex;justify-content:center;z-index:5;}
   .hero .enter-btn{font-family:"Noto Sans SC",sans-serif;font-size:17px;font-weight:700;color:#0b1020;background:linear-gradient(120deg,var(--gold),#f0d49a);padding:13px 42px;border-radius:30px;cursor:pointer;box-shadow:0 0 26px rgba(231,184,92,.5);letter-spacing:3px;transition:.25s;border:none;}
   .hero .enter-btn:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 0 40px rgba(231,184,92,.75);}
 
@@ -330,9 +350,13 @@
     .nav{order:3;flex:1 0 100%;width:100%;margin-left:0;gap:4px;padding-top:6px;border-top:1px solid var(--card-bd);}
     .nav button{font-size:13px;padding:7px 9px;white-space:nowrap;}
     .hero .copy{left:18px;right:18px;bottom:82px;}
+    .hero .copy{left:18px;top:28px;}
     .hero .copy h1{font-size:32px;letter-spacing:4px;}
     .hero .copy .tag{font-size:16px;}
-    .hero .copy .desc{font-size:13.5px;max-width:100%;}
+    .slide-label{left:18px;bottom:78px;}
+    .slide-label .sl-cn{font-size:24px;letter-spacing:3px;}
+    .slide-label .sl-desc{font-size:13px;max-width:100%;}
+    .sl-dots{right:16px;gap:12px;}
     .hero .enter-wrap{bottom:28px;}
     .hero .enter-btn{font-size:15px;padding:11px 30px;}
     .panel{padding:18px 18px;}
@@ -357,9 +381,13 @@
     .logo .cn{font-size:20px;}
     .nav button{font-size:12px;padding:6px 7px;}
     .user-box .auth-btn{padding:6px 11px;}
-    .hero .copy{left:14px;right:14px;bottom:74px;}
+    .hero .copy{left:14px;top:20px;}
     .hero .copy h1{font-size:26px;letter-spacing:2px;}
     .hero .copy .tag{font-size:14px;}
+    .slide-label{left:14px;bottom:70px;}
+    .slide-label .sl-cn{font-size:20px;}
+    .slide-label .sl-desc{font-size:12.5px;}
+    .sl-dots{right:12px;gap:10px;}
     .grid{grid-template-columns:1fr;}
     .panel{padding:14px 14px;}
     .codex-search{width:118px;flex:1 1 100%;}
@@ -392,18 +420,12 @@
     <!-- ===== 介绍（视频主页） ===== -->
     <section class="panel active" id="intro">
       <div class="hero">
-        <video autoplay muted loop playsinline preload="metadata" poster="assets/bg/bg_sky.jpg">
+        <div class="slideshow" id="slideshow">
-          <source src="assets/yusen-trailer.mp4" type="video/mp4" />
+          <!-- 五层世界轮播，由 JS 渲染 -->
-        </video>
+        </div>
-        <div class="veil"></div>
         <div class="enter-wrap">
           <button class="enter-btn" id="enterGame">进入游戏</button>
         </div>
-        <div class="copy">
-          <h1>宇森</h1>
-          <div class="tag">你不是玩家，你是园丁。</div>
-          <div class="desc">一款活的文明系统模拟——播种一个会自己生长的世界，从地心到陨石星空，见证文明在垂直切面中自发演化。</div>
-        </div>
       </div>
     </section>
 
@@ -642,6 +664,82 @@
     document.getElementById('intro').classList.add('active');
   });
 
+  // ============ 五层世界图片轮播 ============
+  (function(){
+    const slides = [
+      { img:'assets/slides/01_starry_sky.png', en:'STARRY SKY', cn:'星空', desc:'陨石星空带悬浮于世界最外层，是文明触及维度的起点。星轨连通各浮空岛，穹鎏晶体自星尘中凝结。',
+        origin:'世界未形，星尘先于万物浮游于虚无。首缕维度自星隙坍缩成形，穹鎏晶体由尘凝就，文明自此仰望苍穹之始。' },
+      { img:'assets/slides/02_sky.png',        en:'SKY',        cn:'天空', desc:'云朵地基块托起浮空岛群，灵气复苏的第一缕风拂过。各族初代聚落，在此仰望也更在此扎根。',
+        origin:'云基初结，浮空岛群自苍穹垂落凡尘。灵气复苏，初民循风而居，于云上筑城，仰望亦扎根，道统由此萌发。' },
+      { img:'assets/slides/03_earth.png',      en:'EARTH',      cn:'大地', desc:'平原与森林铺展成万物生灵的摇篮，玄荒文明于斯鼎盛。城邦林立，征伐与道统在沃土上并行。',
+        origin:'沃野铺展为万灵摇篮，玄荒先族自林泉走出。城邦并起，征伐与道统并驰沃土之上，文明于此鼎盛绵延。' },
+      { img:'assets/slides/04_underground.png',en:'UNDERGROUND',cn:'地下', desc:'溶洞晶矿与暗河在深处低语，冥玉生于幽暗玉石之中。地心工坊调度浅层资源，灯火不熄。',
+        origin:'溶洞深开，晶矿与暗河在幽处低语。冥玉生于幽玉深心，地心工坊取浅层之资，灯火长明，匠魂不熄。' },
+      { img:'assets/slides/05_core.png',       en:'CORE',       cn:'地心', desc:'熔岩奔流的地心，是世界诞生的本源。元玺在此凝聚，追溯天地初开的那一瞬永恒。',
+        origin:'熔岩奔流处，乃世界本源所钟。元玺于亿载炽火中凝聚成形，溯天地初开一瞬，万物归处，亦是起始。' }
+    ];
+    const container = document.getElementById('slideshow');
+    if(!container) return;
+    let current = 0, timer = null;
+    const INTERVAL = 5500;
+
+    // 竖向轨道：5 张图上下滑动
+    const track = document.createElement('div');
+    track.className='slide-track';
+    container.appendChild(track);
+
+    // 渲染 slide + label
+    slides.forEach((s,i)=>{
+      const el = document.createElement('div');
+      el.className='slide'+(i===0?' active':'');
+      el.style.backgroundImage="url('"+s.img+"')";
+      el.innerHTML='<div class="slide-label"><span class="sl-en">'+s.en+'</span><div class="sl-cn">'+s.cn+'</div><div class="sl-desc">'+s.desc+'</div></div>'
+        +'<div class="slide-origin"><span class="so-tag">起源</span>'+s.origin+'</div>';
+      track.appendChild(el);
+    });
+    const all = track.querySelectorAll('.slide');
+
+    // 指示器
+    const dotsWrap = document.createElement('div');
+    dotsWrap.className='sl-dots';
+    slides.forEach((_,i)=>{
+      const d=document.createElement('div');
+      d.className='sl-dot'+(i===0?' active':'');
+      d.addEventListener('click',()=>go(i));
+      dotsWrap.appendChild(d);
+    });
+    document.querySelector('.hero').appendChild(dotsWrap);
+    const dots = dotsWrap.querySelectorAll('.sl-dot');
+
+    function go(idx){
+      if(idx<0)idx=slides.length-1;if(idx>=slides.length)idx=0;
+      if(idx===current) return;
+      all[current].classList.remove('active');dots[current].classList.remove('active');
+      current=idx;
+      track.style.transform='translateY('+(-current*100)+'%)';
+      all[current].classList.add('active');dots[current].classList.add('active');
+      resetTimer();
+    }
+    function next(){ go((current+1)%slides.length); }
+    function prev(){ go((current-1+slides.length)%slides.length); }
+    function resetTimer(){ clearInterval(timer); timer=setInterval(next,INTERVAL); }
+
+    // 鼠标滚轮上下滑动
+    let lock=false,wAccum=0;
+    document.querySelector('.hero').addEventListener('wheel',function(e){
+      wAccum+=e.deltaY;
+      if(lock)return;
+      if(Math.abs(wAccum)>50){
+        lock=true;
+        if(wAccum>0)next();else prev();
+        wAccum=0;
+        setTimeout(function(){lock=false;},1250);
+      }
+    },{passive:true});
+
+    resetTimer();
+  })();
+
   // ============ 程序化矢量缩略图（零 AI 生图，不消耗积分） ============
   function hashStr(s){let h=2166136261;for(let i=0;i<s.length;i++){h^=s.charCodeAt(i);h=Math.imul(h,16777619);}return h>>>0;}
   function rng(seed){let s=seed>>>0;return function(){s=(Math.imul(s,1664525)+1013904223)>>>0;return s/4294967296;};}

login.html

@@ -4,6 +4,8 @@
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
 <title>宇森 · 登录</title>
+<link rel="icon" type="image/png" sizes="48x48" href="assets/ui/logo_planet_48.png?v=20260723">
+<link rel="icon" type="image/png" sizes="256x256" href="assets/ui/logo_planet_256.png?v=20260723">
 <style>
   :root{
     --bg-0:#080c1a; --bg-1:#0e1730; --bg-2:#15213f;
@@ -16,22 +18,19 @@
   html,body{height:100%;}
   body{
     font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",system-ui,-apple-system,sans-serif;color:var(--text);
-    background:
+    background:#000;
-      radial-gradient(1000px 620px at 82% -8%, rgba(139,92,246,.16), transparent 60%),
-      radial-gradient(820px 560px at 8% 112%, rgba(76,201,240,.12), transparent 55%),
-      linear-gradient(160deg, var(--bg-0), var(--bg-1) 48%, var(--bg-2));
     display:flex;align-items:center;justify-content:center;min-height:100dvh;overflow:hidden;position:relative;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
   }
-  body::before,body::after{content:"";position:fixed;border-radius:50%;filter:blur(80px);z-index:0;pointer-events:none;}
+  /* 关闭装饰光斑，避免遮挡背景轮播 */
-  body::before{width:380px;height:380px;background:rgba(139,92,246,.20);top:-110px;right:-70px;animation:f1 20s ease-in-out infinite;}
+  body::before,body::after{display:none;}
-  body::after{width:340px;height:340px;background:rgba(76,201,240,.12);bottom:-110px;left:-60px;animation:f2 24s ease-in-out infinite;}
+
-  @keyframes f1{0%,100%{transform:translate(0,0)}50%{transform:translate(-36px,36px)}}
+  /* 登录页背景（固定单图 login_bg，原图直出，不加特效） */
-  @keyframes f2{0%,100%{transform:translate(0,0)}50%{transform:translate(36px,-28px)}}
+  .bg-slides{position:fixed;inset:0;z-index:0;background:url('assets/slides/login_bg.png') center/cover no-repeat;}
 
   .wrap{position:relative;z-index:2;width:min(420px,92vw);}
   .brand{text-align:center;margin-bottom:26px;}
   .brand .cn{font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;font-weight:900;font-size:42px;letter-spacing:8px;color:#fff;text-shadow:0 0 18px rgba(139,92,246,.6);}
-  .brand .en{font-size:11px;color:var(--magenta);letter-spacing:3px;margin-top:6px;}
+  .brand .en{font-size:16px;color:var(--magenta);letter-spacing:5px;margin-top:8px;font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,.7);}
   .brand .tag{font-size:13px;color:var(--text-dim);margin-top:10px;}
 
   .card{background:var(--card);border:1px solid var(--card-bd);border-radius:18px;padding:26px 26px 30px;backdrop-filter:blur(10px);box-shadow:var(--glow);}
@@ -72,6 +71,7 @@
 </style>
 </head>
 <body>
+<div class="bg-slides"></div>
 <div class="wrap">
   <div class="brand">
     <div class="cn">宇森</div>

website/login.html

@@ -17,17 +17,11 @@
   html,body{height:100%;}
   body{
     font-family:"Noto Sans SC",system-ui,sans-serif;color:var(--text);
-    background:
+    background:#000;
-      radial-gradient(1000px 620px at 82% -8%, rgba(139,92,246,.16), transparent 60%),
-      radial-gradient(820px 560px at 8% 112%, rgba(76,201,240,.12), transparent 55%),
-      linear-gradient(160deg, var(--bg-0), var(--bg-1) 48%, var(--bg-2));
     display:flex;align-items:center;justify-content:center;min-height:100vh;overflow:hidden;position:relative;
   }
-  body::before,body::after{content:"";position:fixed;border-radius:50%;filter:blur(80px);z-index:0;pointer-events:none;}
+  /* 隐藏原来的光斑动画，改用背景图 */
-  body::before{width:380px;height:380px;background:rgba(139,92,246,.20);top:-110px;right:-70px;animation:f1 20s ease-in-out infinite;}
+  body::before,body::after{display:none;}
-  body::after{width:340px;height:340px;background:rgba(76,201,240,.12);bottom:-110px;left:-60px;animation:f2 24s ease-in-out infinite;}
-  @keyframes f1{0%,100%{transform:translate(0,0)}50%{transform:translate(-36px,36px)}}
-  @keyframes f2{0%,100%{transform:translate(0,0)}50%{transform:translate(36px,-28px)}}
 
   .wrap{position:relative;z-index:2;width:min(420px,92vw);}
   .brand{text-align:center;margin-bottom:26px;}
@@ -60,9 +54,19 @@
   .hint{margin-bottom:16px;font-size:13px;color:var(--cyan);background:rgba(76,201,240,.10);border:1px solid rgba(76,201,240,.30);border-radius:10px;padding:9px 12px;text-align:center;}
 
   .hidden{display:none;}
+
+  /* 登录页背景轮播（竖向滑动） */
+  .bg-slides{position:fixed;inset:0;z-index:0;overflow:hidden;}
+  .bg-track{position:absolute;inset:0;display:flex;flex-direction:column;transition:transform 1.25s cubic-bezier(0.4,0,0.2,1);will-change:transform;}
+  .bg-slide{flex:0 0 100%;width:100%;height:100%;background-size:cover;background-position:center;position:relative;}
+  .bg-overlay{position:fixed;inset:0;z-index:1;pointer-events:none;
+    background:linear-gradient(120deg, rgba(8,12,26,.78), rgba(8,12,26,.48) 55%, rgba(8,12,26,.76)),
+               radial-gradient(900px 600px at 50% 40%, transparent, rgba(8,12,26,.55));}
 </style>
 </head>
 <body>
+<div class="bg-slides" id="bgSlides"></div>
+<div class="bg-overlay"></div>
 <div class="wrap">
   <div class="brand">
     <div class="cn">宇森</div>
@@ -189,5 +193,54 @@
     }
   });
 </script>
+<script>
+  // 登录页背景轮播（竖向滑动 + 滚轮控制）
+  (function(){
+    const imgs=[
+      '../assets/slides/login_bg.png',
+      '../assets/slides/01_starry_sky.png',
+      '../assets/slides/02_sky.png',
+      '../assets/slides/03_earth.png',
+      '../assets/slides/04_underground.png',
+      '../assets/slides/05_core.png'
+    ];
+    const box=document.getElementById('bgSlides');
+    if(!box) return;
+    let cur=0, t=null;
+    const track=document.createElement('div');
+    track.className='bg-track';
+    box.appendChild(track);
+    imgs.forEach((s,i)=>{
+      const d=document.createElement('div');
+      d.className='bg-slide'+(i===0?' active':'');
+      d.style.backgroundImage="url('"+s+"')";
+      track.appendChild(d);
+    });
+    const all=track.querySelectorAll('.bg-slide');
+    function go(n){
+      if(n<0)n=imgs.length-1;if(n>=imgs.length)n=0;
+      if(n===cur)return;
+      all[cur].classList.remove('active');cur=n;
+      track.style.transform='translateY('+(-cur*100)+'%)';
+      all[cur].classList.add('active');resetTimer();
+    }
+    function next(){go(cur+1);}
+    function prev(){go(cur-1);}
+    function resetTimer(){clearInterval(t);t=setInterval(next,6000);}
+    // 鼠标滚轮
+    let lock=false,wheeling=0;
+    document.addEventListener('wheel',function(e){
+      wheeling+=e.deltaY;
+      if(lock)return;
+      if(Math.abs(wheeling)>50){
+        lock=true;
+        if(wheeling>0)next();else prev();
+        wheeling=0;
+        setTimeout(function(){lock=false;},1250);
+      }
+    },{passive:true});
+    resetTimer();
+  })();
+</script>
 </body>
 </html>