99 lines
4.2 KiB
HTML
99 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html><head><meta charset="UTF-8"><title>天道宗 · 系统面板 · 仙侠版</title>
|
|
<style>
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
body{
|
|
display:flex;justify-content:center;align-items:center;
|
|
min-height:100vh;background:radial-gradient(ellipse at center,#1a1a2e 0%,#0a0a15 100%);
|
|
font-family:'STKaiti','KaiTi','SimSun',serif
|
|
}
|
|
.scroll{
|
|
width:480px;padding:40px 44px;
|
|
background:linear-gradient(180deg,
|
|
rgba(30,25,15,0.95) 0%,
|
|
rgba(40,30,20,0.93) 50%,
|
|
rgba(30,25,15,0.95) 100%);
|
|
border:3px solid #3a2a10;
|
|
border-image:linear-gradient(180deg,#c8a050,#5a3a10,#c8a050) 1;
|
|
border-radius:8px;
|
|
box-shadow:
|
|
0 0 80px rgba(180,140,60,0.15),
|
|
0 0 30px rgba(200,160,80,0.08),
|
|
inset 0 0 60px rgba(120,90,30,0.06);
|
|
position:relative
|
|
}
|
|
.scroll::before,.scroll::after{
|
|
content:'';position:absolute;left:50%;transform:translateX(-50%);
|
|
width:80px;height:6px;
|
|
background:linear-gradient(90deg,transparent,#8a6a30,transparent);
|
|
}
|
|
.scroll::before{top:10px}.scroll::after{bottom:10px}
|
|
|
|
.title{
|
|
text-align:center;font-size:36px;letter-spacing:14px;
|
|
color:#d4a840;
|
|
text-shadow:0 0 30px rgba(210,170,60,0.5),0 0 8px rgba(200,150,40,0.3),0 2px 4px rgba(0,0,0,0.8);
|
|
margin-bottom:24px;padding-bottom:18px;
|
|
border-bottom:2px solid rgba(180,140,50,0.3)
|
|
}
|
|
|
|
.stat{display:flex;justify-content:space-between;align-items:center;
|
|
padding:10px 8px;margin:4px 0;
|
|
border-bottom:1px solid rgba(180,140,60,0.1)}
|
|
.stat .k{font-size:20px;color:#b8a070;letter-spacing:2px}
|
|
.stat .v{font-size:22px;color:#f0e0b0;
|
|
text-shadow:0 0 16px rgba(240,220,160,0.4)}
|
|
.stat .v.zero{color:#d4b860}
|
|
|
|
.divider{margin:16px 0;height:2px;
|
|
background:linear-gradient(90deg,transparent,rgba(180,140,60,0.4),transparent)}
|
|
|
|
.mission-title{font-size:16px;color:#c8a860;letter-spacing:3px;margin-bottom:4px}
|
|
.mission{padding:6px 8px;line-height:1.7}
|
|
.mission .row{font-size:22px;padding:4px 0;display:block}
|
|
.mission .gold{color:#ffcc44;text-shadow:0 0 20px rgba(255,200,60,0.5)}
|
|
.mission .red{color:#ff7060;text-shadow:0 0 14px rgba(255,100,80,0.4)}
|
|
.mission .white{color:#eee0c0}
|
|
|
|
.corner{position:absolute;width:24px;height:24px;border-color:#8a6a30}
|
|
.corner.tl{top:12px;left:12px;border-top:2px solid #8a6a30;border-left:2px solid #8a6a30}
|
|
.corner.tr{top:12px;right:12px;border-top:2px solid #8a6a30;border-right:2px solid #8a6a30}
|
|
.corner.bl{bottom:12px;left:12px;border-bottom:2px solid #8a6a30;border-left:2px solid #8a6a30}
|
|
.corner.br{bottom:12px;right:12px;border-bottom:2px solid #8a6a30;border-right:2px solid #8a6a30}
|
|
|
|
.light{position:absolute;width:200px;height:200px;border-radius:50%;
|
|
filter:blur(60px);opacity:0.06;pointer-events:none}
|
|
.light.top{top:-40px;left:50%;transform:translateX(-50%);background:radial-gradient(#ffcc44,transparent)}
|
|
.light.bot{bottom:-40px;left:50%;transform:translateX(-50%);background:radial-gradient(#aaccff,transparent)}
|
|
|
|
@keyframes shimmer{
|
|
0%,100%{opacity:0.08}50%{opacity:0.15}
|
|
}
|
|
.scroll{animation:shimmer 4s ease-in-out infinite}
|
|
</style></head><body>
|
|
<div class="scroll">
|
|
<div class="corner tl"></div><div class="corner tr"></div>
|
|
<div class="corner bl"></div><div class="corner br"></div>
|
|
<div class="light top"></div><div class="light bot"></div>
|
|
|
|
<div class="title">天 道 宗</div>
|
|
|
|
<div class="stat"><span class="k">宗门等级</span><span class="v zero">零 星</span></div>
|
|
<div class="stat"><span class="k">宗门人数</span><span class="v">壹 人</span></div>
|
|
<div class="stat"><span class="k">宗门领地</span><span class="v">方圆百米</span></div>
|
|
<div class="stat"><span class="k">宗门资产</span><span class="v zero">零</span></div>
|
|
<div class="stat"><span class="k">宗门积分</span><span class="v zero">零</span></div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<div class="mission">
|
|
<div class="mission-title">—— 宗 门 任 务 ——</div>
|
|
<div class="row"><span class="gold">▸ 任务：</span><span class="white">尽快升级一星宗门</span></div>
|
|
<div class="row"><span class="gold">▸ 奖励：</span><span class="white">仙法阁一座</span></div>
|
|
<div class="row"><span class="red">▸ 条件：</span><span class="white">招收一名弟子</span></div>
|
|
<div class="row" style="padding-left:24px"><span class="white">（需在大殿前磕头拜师）</span></div>
|
|
</div>
|
|
|
|
</div>
|
|
</body></html>
|