diff --git a/index.html b/index.html index f4f291a..01492da 100644 --- a/index.html +++ b/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 .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 .copy{position:absolute;left:56px;bottom:48px;right:56px;} - .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 .copy .sub2{font-family:"Press Start 2P",monospace;font-size:13px;color:var(--gold);margin:12px 0 16px;letter-spacing:1px;} - .hero .copy .tag{font-size:22px;font-weight:500;color:#fff;margin-bottom:9px;} - .hero .copy .desc{font-size:15px;color:var(--text-dim);max-width:560px;line-height:1.7;} - .hero .copy{z-index:3;pointer-events:none;} - .hero .enter-wrap{position:absolute;left:0;right:0;bottom:44px;display:flex;justify-content:center;z-index:5;} + .hero .slideshow{position:absolute;inset:0;overflow:hidden;} + .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 .slide{flex:0 0 100%;width:100%;height:100%;background-size:cover;background-position:center;position:relative;} + .hero .slide::before{content:"";position:absolute;inset:0; + background:linear-gradient(90deg, rgba(8,12,26,.92) 0%, rgba(8,12,26,.70) 22%, rgba(8,12,26,.40) 40%, transparent 58%), + linear-gradient(180deg, rgba(8,12,26,.55) 0%, transparent 35%);} + .hero .copy{position:absolute;left:56px;top:56px;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 .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 @@
- -
+
+ +
-
-

宇森

-
你不是玩家，你是园丁。
-
一款活的文明系统模拟——播种一个会自己生长的世界，从地心到陨石星空，见证文明在垂直切面中自发演化。
-
@@ -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='
'+s.en+'
'+s.cn+'
'+s.desc+'
' + +'
起源'+s.origin+'
'; + 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>>0;} function rng(seed){let s=seed>>>0;return function(){s=(Math.imul(s,1664525)+1013904223)>>>0;return s/4294967296;};} diff --git a/login.html b/login.html index 83304f6..1d9b1e9 100644 --- a/login.html +++ b/login.html @@ -4,6 +4,8 @@ 宇森 · 登录 + + +
宇森
diff --git a/website/login.html b/website/login.html index d4b84dc..cf26d6d 100644 --- a/website/login.html +++ b/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: - 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)); + background:#000; 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::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)}} + /* 隐藏原来的光斑动画，改用背景图 */ + body::before,body::after{display:none;} .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));} +
+
宇森
@@ -189,5 +193,54 @@ } }); +