118 lines
6.9 KiB
HTML
118 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
|
<title>论坛 · 宇森 Yusen</title>
|
|
<link rel="stylesheet" href="assets/fonts/yusen-fonts.css" />
|
|
<link rel="icon" type="image/png" sizes="48x48" href="assets/ui/logo_planet_48.png?v=20260723">
|
|
<link rel="stylesheet" href="assets/common.css" />
|
|
<style>
|
|
.forum-wrap{max-width:1080px;width:100%;margin:0 auto;padding:28px 0;display:flex;flex-direction:column;gap:20px;}
|
|
.f-cats{display:flex;flex-wrap:wrap;gap:10px;}
|
|
.f-cats .ch{font-size:14px;color:var(--text-dim);background:var(--card);border:1px solid var(--card-bd);padding:8px 15px;border-radius:11px;cursor:pointer;transition:.22s;letter-spacing:.5px;text-decoration:none;display:inline-block;}
|
|
.f-cats .ch:hover{color:#fff;background:rgba(139,92,246,.12);}
|
|
.f-cats .ch.active{color:#fff;background:linear-gradient(120deg,rgba(139,92,246,.28),rgba(199,125,255,.16));border-color:var(--magenta);box-shadow:var(--glow);}
|
|
|
|
.threads{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;align-content:start;}
|
|
.th{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--card-bd);border-radius:14px;padding:16px 20px;transition:.22s;cursor:pointer;text-decoration:none;color:inherit;}
|
|
.th:hover{border-color:var(--violet);background:rgba(139,92,246,.12);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.25);}
|
|
.th .pin{font-size:12px;font-weight:700;letter-spacing:1px;color:var(--gold);background:rgba(231,184,92,.16);border:1px solid rgba(231,184,92,.45);border-radius:6px;padding:2px 8px;}
|
|
.th .tt{flex:1;font-size:16.5px;color:#fff;letter-spacing:.3px;}
|
|
.th .meta{font-size:13px;color:var(--text-dim);white-space:nowrap;}
|
|
.th .rp{color:var(--cyan);font-weight:600;}
|
|
|
|
.post-form{display:none;flex-direction:column;gap:10px;background:var(--card);border:1px solid var(--magenta);border-radius:14px;padding:16px;margin-bottom:14px;}
|
|
.post-form.show{display:flex;}
|
|
.post-form input,.post-form textarea{background:rgba(8,12,26,.6);border:1px solid var(--card-bd);border-radius:10px;color:var(--text);padding:10px 14px;font-family:inherit;font-size:14px;outline:none;}
|
|
.post-form textarea{resize:vertical;min-height:72px;}
|
|
.post-form .row{display:flex;gap:10px;justify-content:flex-end;}
|
|
.post-form .row button{font-size:14px;padding:8px 18px;border-radius:10px;cursor:pointer;border:1px solid var(--card-bd);background:var(--card);color:var(--text);}
|
|
.post-form .row .ok{background:linear-gradient(120deg,var(--gold),#f0d49a);color:#0b1020;font-weight:700;border:none;}
|
|
|
|
@media (max-width:768px){ .threads{grid-template-columns:1fr;} }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="app">
|
|
<header class="topbar">
|
|
<a href="index.html" class="logo"><span class="cn">宇森</span></a>
|
|
<nav class="nav">
|
|
<a href="announce.html">公告</a>
|
|
<a href="background.html">背景</a>
|
|
<a href="rules.html">规则</a>
|
|
<a href="codex.html">图鉴</a>
|
|
<a href="story.html">剧情</a>
|
|
<a href="forum.html" class="auth-only">论坛</a>
|
|
<a href="worlddata.html" class="auth-only">世界数据</a>
|
|
</nav>
|
|
<div class="spacer"></div>
|
|
<div class="user-box" id="userBox"></div>
|
|
</header>
|
|
|
|
<main class="page-content hide-scroll">
|
|
<div class="forum-wrap">
|
|
<div style="display:flex;justify-content:space-between;align-items:center;gap:16px;">
|
|
<div class="f-cats" id="fCats">
|
|
<span class="ch active" data-fcat="all">全部</span>
|
|
<span class="ch" data-fcat="lore">背景考据</span>
|
|
<span class="ch" data-fcat="discuss">综合讨论</span>
|
|
<span class="ch" data-fcat="build">共建投稿</span>
|
|
</div>
|
|
<button id="newPost" style="font-family:inherit;font-size:13px;color:#fff;background:linear-gradient(120deg,var(--violet),var(--magenta));border:none;padding:7px 18px;border-radius:20px;cursor:pointer;">+ 发帖</button>
|
|
</div>
|
|
|
|
<div class="post-form" id="postForm">
|
|
<input id="pfTitle" placeholder="标题" />
|
|
<textarea id="pfBody" placeholder="内容..."></textarea>
|
|
<div class="row">
|
|
<button id="pfCancel">取消</button>
|
|
<button id="pfOk" class="ok">发布</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="threads" id="threads">
|
|
<div class="th" data-fcat="discuss"><span class="pin">置顶</span><span class="tt">【公告】宇森官网第一阶段上线，欢迎园丁们入驻</span><span class="meta"><span class="rp">128</span> 回复 · 官方</span></div>
|
|
<div class="th" data-fcat="lore"><span class="tt">五层世界结构考据：星空→天空→大地→地下→地心</span><span class="meta"><span class="rp">43</span> 回复 · 园丁A</span></div>
|
|
<div class="th" data-fcat="discuss"><span class="tt">关于灵气复苏机制的猜想与讨论</span><span class="meta"><span class="rp">27</span> 回复 · 某路人</span></div>
|
|
<div class="th" data-fcat="build"><span class="tt">【共建】半兽人种族条目初稿，请大家提意见</span><span class="meta"><span class="rp">19</span> 回复 · 世界构建者</span></div>
|
|
<div class="th" data-fcat="lore"><span class="tt">从凡墟到溯元：世界阶段跃迁的叙事节奏分析</span><span class="meta"><span class="rp">15</span> 回复 · 剧情组</span></div>
|
|
<div class="th" data-fcat="discuss"><span class="tt">新人报到！刚接触宇森，请问从哪里开始了解？</span><span class="meta"><span class="rp">8</span> 回复 · 新园丁</span></div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="assets/game-api.js"></script>
|
|
<script src="assets/common.js"></script>
|
|
<script>
|
|
// 分类切换
|
|
const fCats=document.querySelectorAll('.f-cats .ch');
|
|
const threads=document.querySelectorAll('#threads .th');
|
|
fCats.forEach(b=>b.addEventListener('click',()=>{
|
|
fCats.forEach(x=>x.classList.remove('active'));
|
|
b.classList.add('active');
|
|
const c=b.dataset.fcat;
|
|
threads.forEach(t=>{ t.style.display=(c==='all'||t.dataset.fcat===c)?'':'none'; });
|
|
}));
|
|
|
|
// 发帖（前端演示）
|
|
const postForm=document.getElementById('postForm');
|
|
const newPostBtn=document.getElementById('newPost');
|
|
if(newPostBtn && postForm) newPostBtn.addEventListener('click',()=>postForm.classList.toggle('show'));
|
|
document.getElementById('pfCancel').addEventListener('click',()=>postForm.classList.remove('show'));
|
|
document.getElementById('pfOk').addEventListener('click',()=>{
|
|
const t=document.getElementById('pfTitle').value.trim();
|
|
if(!t)return;
|
|
const el=document.createElement('div');
|
|
el.className='th';el.dataset.fcat='discuss';
|
|
el.innerHTML='<span class="tt">'+t+'</span><span class="meta"><span class="rp">0</span> 回复 · 我</span>';
|
|
document.getElementById('threads').prepend(el);
|
|
document.getElementById('pfTitle').value='';
|
|
document.getElementById('pfBody').value='';
|
|
postForm.classList.remove('show');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|