283 lines
15 KiB
HTML
283 lines
15 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>观云川 | K1350 合纵阵线</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@300;400;500;700;900&family=ZCOOL+XiaoWei&display=swap" rel="stylesheet">
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
battle: '#12100E',
|
||
parchment: '#E2D9C8',
|
||
gold: '#D4B88C',
|
||
darkgold: '#947648',
|
||
blood: '#A8341F',
|
||
},
|
||
fontFamily: {
|
||
song: ['"Noto Serif SC"', 'SimSun', 'STSong', 'serif'],
|
||
brush: ['"Ma Shan Zheng"', '"ZCOOL XiaoWei"', 'serif'],
|
||
xiaowei: ['"ZCOOL XiaoWei"', '"Noto Serif SC"', 'serif'],
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style type="text/tailwindcss">
|
||
@layer utilities {
|
||
.text-shadow {
|
||
text-shadow: 0 2px 8px rgba(0,0,0,0.85);
|
||
}
|
||
.bg-mask {
|
||
background: linear-gradient(to top, rgba(18,16,14,0.95) 0%, rgba(18,16,14,0.55) 50%, rgba(18,16,14,0.2) 100%);
|
||
}
|
||
.border-wen {
|
||
border: 1px solid rgba(212,184,140,0.3);
|
||
}
|
||
.bg-parchment-texture {
|
||
background-color: #E2D9C8;
|
||
background-image:
|
||
radial-gradient(at 20% 30%, rgba(149,118,72,0.08) 0px, transparent 50%),
|
||
radial-gradient(at 80% 70%, rgba(149,118,72,0.06) 0px, transparent 50%),
|
||
radial-gradient(at 50% 50%, rgba(149,118,72,0.04) 0px, transparent 70%);
|
||
}
|
||
.bg-battle-fallback {
|
||
background:
|
||
radial-gradient(ellipse at 30% 40%, rgba(168,52,31,0.25) 0%, transparent 50%),
|
||
radial-gradient(ellipse at 70% 60%, rgba(212,184,140,0.15) 0%, transparent 50%),
|
||
linear-gradient(135deg, #1a1612 0%, #2a1f15 50%, #0a0806 100%);
|
||
}
|
||
.noise::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.4'/%3E%3C/svg%3E");
|
||
opacity: 0.15;
|
||
pointer-events: none;
|
||
mix-blend-mode: overlay;
|
||
}
|
||
.drop-cap::first-letter {
|
||
font-family: "Ma Shan Zheng", serif;
|
||
font-size: 4.2em;
|
||
line-height: 0.9;
|
||
float: left;
|
||
margin: 0.15em 0.15em 0 0;
|
||
color: #D4B88C;
|
||
text-shadow: 0 2px 6px rgba(0,0,0,0.6);
|
||
}
|
||
.fade-up {
|
||
animation: fadeUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
|
||
}
|
||
.fade-up-delay-1 { animation-delay: 0.2s; }
|
||
.fade-up-delay-2 { animation-delay: 0.5s; }
|
||
.fade-up-delay-3 { animation-delay: 0.8s; }
|
||
@keyframes fadeUp {
|
||
from { opacity: 0; transform: translateY(24px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
.brush-in {
|
||
animation: brushIn 1.5s cubic-bezier(0.22, 1, 0.36, 1) both;
|
||
}
|
||
@keyframes brushIn {
|
||
from { opacity: 0; transform: scale(0.95); letter-spacing: 0.3em; }
|
||
to { opacity: 1; transform: scale(1); letter-spacing: normal; }
|
||
}
|
||
.parallax-slow {
|
||
transform: translateZ(0);
|
||
will-change: transform;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-battle text-parchment font-song antialiased">
|
||
<!-- Hero 横幅区域（用 battle.png 作背景） -->
|
||
<header class="relative h-[70vh] min-h-[480px] w-full overflow-hidden noise">
|
||
<div class="absolute inset-0 bg-battle-fallback parallax-slow"></div>
|
||
<img
|
||
class="absolute w-full h-full object-cover object-center parallax-slow"
|
||
src="./battle.png"
|
||
alt="战场"
|
||
onerror="this.style.display='none'"
|
||
>
|
||
<div class="absolute inset-0 bg-mask"></div>
|
||
|
||
<div class="relative z-10 h-full flex flex-col justify-end px-6 md:px-16 pb-12 md:pb-20 max-w-6xl mx-auto">
|
||
<div class="flex items-center gap-3 mb-4 fade-up">
|
||
<span class="h-px w-12 bg-gold/70"></span>
|
||
<p class="text-gold text-base md:text-lg tracking-[0.4em] font-xiaowei">观云川使节 · 晓谕诸盟</p>
|
||
</div>
|
||
<h1 class="text-[clamp(2rem,5.5vw,3.5rem)] font-brush text-white text-shadow leading-tight brush-in">
|
||
K1350 · 合纵阵线檄文
|
||
</h1>
|
||
<p class="mt-5 text-parchment/90 max-w-3xl text-[clamp(1rem,2vw,1.2rem)] text-shadow fade-up fade-up-delay-1">
|
||
同一出争霸戏，已演至千三百五十回。寄人篱下终成空，联袂自立方为真章。
|
||
</p>
|
||
<div class="mt-6 flex items-center gap-2 text-gold/70 text-sm fade-up fade-up-delay-2">
|
||
<i class="fa fa-chevron-down animate-bounce"></i>
|
||
<span class="tracking-widest">展卷详阅</span>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 正文内容区域 -->
|
||
<main class="max-w-4xl mx-auto px-5 md:px-10 py-12 md:py-20">
|
||
|
||
<!-- 文首题署 -->
|
||
<div class="text-center mb-12 md:mb-16 fade-up">
|
||
<div class="inline-flex items-center gap-3 text-gold/60">
|
||
<span class="h-px w-10 bg-gold/40"></span>
|
||
<i class="fa fa-balance-scale"></i>
|
||
<span class="h-px w-10 bg-gold/40"></span>
|
||
</div>
|
||
<h2 class="font-brush text-3xl md:text-4xl text-gold mt-4">晓 谕 诸 盟 书</h2>
|
||
<p class="text-parchment/60 text-sm mt-2 tracking-[0.3em]">A LETTER TO ALL ALLIANCES</p>
|
||
</div>
|
||
|
||
<!-- 缘起章节 -->
|
||
<section class="space-y-6 text-lg leading-loose fade-up">
|
||
<p class="drop-cap">方今 K1350 王国一省大势已明，<span class="text-blood font-semibold tracking-wider px-1.5 py-0.5 bg-blood/10 border border-blood/30 rounded">TL00、TL11、TL22</span>三盟结为一气，分头游说诸方，志在全境独尊。一旦其根基坐定，则区内要道、矿脉、城池皆由其裁断，诸盟进退维谷，再无置喙之地。</p>
|
||
|
||
<p>若任其势力扩张，则疆土关隘、资源据点尽入其掌，诸盟虽欲偏安亦不可得。<span class="text-gold font-medium">唇亡齿寒，此之谓也。</span></p>
|
||
</section>
|
||
|
||
<!-- 古语引文 -->
|
||
<div class="relative my-12 py-8 px-6 md:px-10 fade-up">
|
||
<p class="font-brush text-2xl md:text-3xl text-gold text-center leading-relaxed">
|
||
「以众小攻一强，众小犹不可得，<br>况以三小攻一强乎？」
|
||
</p>
|
||
<p class="text-base text-parchment/60 font-song tracking-widest text-center mt-3">——《合纵论》引</p>
|
||
</div>
|
||
|
||
<!-- 战略形势图章节 -->
|
||
<section class="my-14 md:my-20 fade-up">
|
||
<div class="text-center mb-8">
|
||
<div class="inline-flex items-center gap-3 text-gold/60">
|
||
<span class="h-px w-10 bg-gold/40"></span>
|
||
<i class="fa fa-map-o"></i>
|
||
<span class="h-px w-10 bg-gold/40"></span>
|
||
</div>
|
||
<h3 class="font-brush text-2xl md:text-3xl text-gold mt-3">战略形势一览</h3>
|
||
<p class="text-parchment/60 text-sm mt-2 tracking-widest">CURRENT STRATEGIC POSITION</p>
|
||
</div>
|
||
|
||
<!-- war.png 展示卡片 -->
|
||
<div class="relative border-wen p-3 md:p-4 bg-battle/50 rounded shadow-2xl shadow-black/60">
|
||
<div class="absolute -top-3 left-6 px-3 py-0.5 bg-battle border border-gold/30 text-gold text-xs font-xiaowei tracking-widest">
|
||
附图 · STRATEGIC MAP
|
||
</div>
|
||
<div class="absolute top-3 right-6 text-parchment/50 text-xs font-xiaowei tracking-widest z-10">
|
||
K1350 · 第 1350 赛季
|
||
</div>
|
||
<img
|
||
src="./war.png"
|
||
alt="K1350 合纵阵线战略形势图"
|
||
class="w-full h-auto rounded border border-gold/10"
|
||
>
|
||
<p class="text-center text-parchment/60 text-sm mt-4 leading-relaxed">
|
||
<i class="fa fa-caret-up text-gold/50"></i>
|
||
图中<span class="text-blood font-medium">红色方框</span>为 TL 三盟盘踞之地；
|
||
<span class="text-gold font-medium">金色大营</span>为观云川合纵中枢；
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 剖白章节 -->
|
||
<section class="space-y-6 text-lg leading-loose fade-up">
|
||
<p>然诸盟之中，亦有误判形势者，以为暂附 TL 阵营可保无虞。殊不知赛季终将落幕，本区众人终须离去，<span class="text-gold font-medium">眼前所换得的安稳，无非泡影</span>。</p>
|
||
|
||
<p>摆在诸盟面前的，仅余二途：</p>
|
||
|
||
<p class="text-center font-brush text-xl md:text-2xl text-gold py-4 leading-relaxed">
|
||
一曰：<span class="text-blood">俯首受制，长久仰人鼻息</span>；<br>
|
||
二曰：<span class="text-gold">合众自立，共抗一方豪强</span>。
|
||
</p>
|
||
|
||
<p>与其坐待他人刀俎，不如联袂而起一战。合纵之义，自古皆然。</p>
|
||
</section>
|
||
|
||
<!-- 合作准则 -->
|
||
<section class="my-14 md:my-20 fade-up">
|
||
<div class="border-wen p-6 md:p-8 bg-parchment-texture text-battle rounded shadow-2xl shadow-black/40 relative overflow-hidden">
|
||
<div class="absolute top-0 right-0 w-20 h-20 border-l-2 border-b-2 border-darkgold/30"></div>
|
||
<div class="absolute bottom-0 left-0 w-20 h-20 border-r-2 border-t-2 border-darkgold/30"></div>
|
||
<div class="flex items-center gap-3 mb-5 pb-3 border-b border-darkgold/30">
|
||
<i class="fa fa-handshake-o text-darkgold text-2xl"></i>
|
||
<h3 class="font-brush text-2xl md:text-3xl text-darkgold">合纵阵线合作准则</h3>
|
||
</div>
|
||
<ul class="space-y-3 list-none">
|
||
<li class="flex gap-3"><span class="text-darkgold font-brush text-xl shrink-0">壹、</span><span>主盟分盟配套成体系，诸盟互为犄角，互通军情，遇袭必援；</span></li>
|
||
<li class="flex gap-3"><span class="text-darkgold font-brush text-xl shrink-0">贰、</span><span>疆土、资源皆由诸盟公议分配，遇争则坐而论道；</span></li>
|
||
<li class="flex gap-3"><span class="text-darkgold font-brush text-xl shrink-0">叁、</span><span>加盟诸盟原盟主管理权限一概保留；</span></li>
|
||
<li class="flex gap-3"><span class="text-darkgold font-brush text-xl shrink-0">肆、</span><span>我方仅外派人员统辖战事调度，绝不干涉各盟内务；</span></li>
|
||
<li class="flex gap-3"><span class="text-darkgold font-brush text-xl shrink-0">伍、</span><span>尊重各盟原有游戏节奏，绝不强加所难。</span></li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 结尾章节 -->
|
||
<section class="space-y-6 text-lg leading-loose fade-up">
|
||
<p>是俯首而久居人下，还是合众而共抗强梁，<span class="text-gold font-brush text-xl">诸盟主其善自权衡</span>。</p>
|
||
|
||
<p class="text-center text-gold/80 font-xiaowei tracking-widest py-4">
|
||
静候同道 · 共谋大业
|
||
</p>
|
||
</section>
|
||
|
||
<!-- 分割线 -->
|
||
<div class="flex items-center justify-center gap-4 my-12 opacity-60">
|
||
<span class="h-px flex-1 bg-gradient-to-r from-transparent to-gold/50"></span>
|
||
<i class="fa fa-diamond text-gold text-sm"></i>
|
||
<span class="h-px flex-1 bg-gradient-to-l from-transparent to-gold/50"></span>
|
||
</div>
|
||
|
||
<!-- 落款 + 朱印 -->
|
||
<div class="flex items-end justify-between gap-6 fade-up">
|
||
<div class="text-left">
|
||
<p class="text-gold font-brush text-2xl md:text-3xl">观云川 使节</p>
|
||
<p class="text-parchment mt-1">TermiNexus</p>
|
||
<p class="text-sm opacity-60 mt-1 tracking-wider">丙午年 六月廿九 · 2026/07/23</p>
|
||
</div>
|
||
<!-- SVG 朱印 -->
|
||
<div class="shrink-0">
|
||
<svg width="88" height="88" viewBox="0 0 100 100" class="text-blood opacity-90 hover:opacity-100 hover:scale-105 transition-transform duration-300 drop-shadow-[0_2px_8px_rgba(168,52,31,0.4)]">
|
||
<rect x="4" y="4" width="92" height="92" fill="none" stroke="currentColor" stroke-width="5" rx="2"/>
|
||
<rect x="10" y="10" width="80" height="80" fill="none" stroke="currentColor" stroke-width="1.5" rx="1"/>
|
||
<text x="50" y="38" text-anchor="middle" fill="currentColor" font-family="Ma Shan Zheng, serif" font-size="22" font-weight="bold">观云</text>
|
||
<text x="50" y="68" text-anchor="middle" fill="currentColor" font-family="Ma Shan Zheng, serif" font-size="22" font-weight="bold">合纵</text>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- 底部页脚 -->
|
||
<footer class="py-8 text-center opacity-60 text-sm border-t border-gold/20">
|
||
<p>万国觉醒 K1350 | 观云川外交宣传页</p>
|
||
<p class="mt-1 text-xs opacity-50">本页面为游戏内政治宣传材料，仅供同好交流</p>
|
||
</footer>
|
||
|
||
<script>
|
||
// 滚动视差
|
||
const parallax = document.querySelectorAll('.parallax-slow');
|
||
let ticking = false;
|
||
window.addEventListener('scroll', () => {
|
||
if (!ticking) {
|
||
window.requestAnimationFrame(() => {
|
||
const scrolled = window.pageYOffset;
|
||
parallax.forEach(el => {
|
||
el.style.transform = `translateY(${scrolled * 0.3}px)`;
|
||
});
|
||
ticking = false;
|
||
});
|
||
ticking = true;
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|