jianzhihuixiang/alacarte-novel-website/chapters/chapter-71.html

1002 lines
42 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>根特北门·泽丁的誓言 - 阿拉德:剑之回响</title>
<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=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
:root {
--bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
--text-primary: #e0e0e0;
--text-secondary: #888;
--accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--border-color: rgba(255,255,255,0.1);
--btn-bg: rgba(255,255,255,0.1);
--btn-hover: rgba(255,255,255,0.2);
}
[data-theme="light"] {
--bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
--text-primary: #333;
--text-secondary: #666;
--border-color: rgba(0,0,0,0.1);
--btn-bg: rgba(0,0,0,0.05);
--btn-hover: rgba(0,0,0,0.1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Noto Serif SC', serif;
background: var(--bg-primary);
color: var(--text-primary);
line-height: 1.8;
min-height: 100vh;
transition: all 0.3s ease;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
padding-bottom: 120px;
}
/* 顶部导航 */
.top-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.3);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border-color);
z-index: 1000;
padding: 10px 20px;
}
.top-nav-content {
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-link {
color: var(--text-primary);
text-decoration: none;
font-family: 'Noto Sans SC', sans-serif;
font-size: 14px;
padding: 8px 16px;
background: var(--btn-bg);
border: 1px solid var(--border-color);
border-radius: 8px;
transition: all 0.3s ease;
}
.nav-link:hover {
background: var(--btn-hover);
}
.chapter-header {
text-align: center;
padding: 80px 0 40px;
border-bottom: 1px solid var(--border-color);
margin-bottom: 40px;
}
.chapter-number {
font-size: 14px;
color: var(--text-secondary);
letter-spacing: 4px;
text-transform: uppercase;
margin-bottom: 10px;
}
.chapter-title {
font-size: 32px;
font-weight: 700;
background: var(--accent-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 20px;
}
.chapter-meta {
font-size: 14px;
color: var(--text-secondary);
}
.chapter-content {
font-size: 18px;
line-height: 2;
text-align: justify;
}
.chapter-content p {
margin-bottom: 1.5em;
text-indent: 2em;
}
.chapter-content p:first-of-type::first-letter {
font-size: 3em;
float: left;
line-height: 1;
margin-right: 8px;
margin-top: -5px;
background: var(--accent-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
}
/* 固定底部导航 */
.fixed-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.3);
backdrop-filter: blur(10px);
border-top: 1px solid var(--border-color);
z-index: 1000;
padding: 15px 20px;
}
.fixed-nav-content {
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-btn {
padding: 12px 24px;
background: var(--btn-bg);
border: 1px solid var(--border-color);
border-radius: 8px;
color: var(--text-primary);
text-decoration: none;
transition: all 0.3s ease;
font-family: 'Noto Sans SC', sans-serif;
font-size: 14px;
cursor: pointer;
}
.nav-btn:hover {
background: var(--btn-hover);
transform: translateY(-2px);
}
.nav-btn.disabled {
opacity: 0.3;
cursor: not-allowed;
pointer-events: none;
}
.nav-btn.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-color: #667eea;
}
/* 右侧滚动按钮 */
.scroll-buttons {
position: fixed;
right: 20px;
bottom: 90px;
display: flex;
flex-direction: column;
gap: 10px;
z-index: 1001;
}
.scroll-btn {
width: 40px;
height: 40px;
border-radius: 8px;
background: var(--btn-bg);
border: 1px solid var(--border-color);
color: var(--text-primary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
transition: all 0.3s ease;
font-family: 'Noto Sans SC', sans-serif;
}
.scroll-btn:hover {
background: var(--btn-hover);
}
/* TTS弹出面板 */
.tts-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 2000;
display: none;
align-items: center;
justify-content: center;
}
.tts-overlay.show {
display: flex;
}
.tts-panel {
background: rgba(30,30,50,0.95);
backdrop-filter: blur(10px);
border-radius: 16px;
border: 1px solid var(--border-color);
padding: 24px;
width: 90%;
max-width: 400px;
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}
[data-theme="light"] .tts-panel {
background: rgba(255,255,255,0.95);
}
.tts-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid var(--border-color);
}
.tts-title {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
font-family: 'Noto Sans SC', sans-serif;
}
.tts-close {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--btn-bg);
border: 1px solid var(--border-color);
color: var(--text-primary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
transition: all 0.3s ease;
}
.tts-close:hover {
background: var(--btn-hover);
}
.tts-controls {
display: flex;
justify-content: center;
gap: 16px;
margin-bottom: 20px;
}
.tts-btn {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--btn-bg);
border: 2px solid var(--border-color);
color: var(--text-primary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
transition: all 0.3s ease;
font-family: 'Noto Sans SC', sans-serif;
}
.tts-btn:hover {
background: var(--btn-hover);
transform: scale(1.1);
}
.tts-btn.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-color: #667eea;
transform: scale(1.1);
}
.tts-progress {
margin-bottom: 20px;
}
.tts-progress-bar {
height: 6px;
background: var(--btn-bg);
border-radius: 3px;
overflow: hidden;
margin-bottom: 8px;
}
.tts-progress-fill {
height: 100%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
width: 0%;
transition: width 0.1s ease;
}
.tts-time {
font-size: 13px;
color: var(--text-secondary);
font-family: 'Noto Sans SC', sans-serif;
text-align: center;
}
.tts-speed {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.tts-speed-label {
font-size: 14px;
color: var(--text-secondary);
font-family: 'Noto Sans SC', sans-serif;
}
.tts-speed-select {
padding: 8px 16px;
background: var(--btn-bg);
border: 1px solid var(--border-color);
border-radius: 8px;
color: var(--text-primary);
font-size: 14px;
cursor: pointer;
font-family: 'Noto Sans SC', sans-serif;
}
/* 侧边栏 - 标题固定,内容滚动 */
.sidebar {
position: fixed;
right: 20px;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,0.5);
backdrop-filter: blur(10px);
border-radius: 12px;
border: 1px solid var(--border-color);
width: 200px;
max-height: 70vh;
z-index: 999;
display: flex;
flex-direction: column;
}
.sidebar-title {
font-size: 14px;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 2px;
padding: 15px 20px;
border-bottom: 1px solid var(--border-color);
flex-shrink: 0;
}
.sidebar-content {
overflow-y: auto;
padding: 10px 20px 20px;
flex: 1;
scrollbar-width: thin;
scrollbar-color: transparent transparent;
transition: scrollbar-color 0.3s ease;
}
.sidebar-content:hover {
scrollbar-color: rgba(255,255,255,0.3) transparent;
}
.sidebar-content::-webkit-scrollbar {
width: 6px;
}
.sidebar-content::-webkit-scrollbar-track {
background: transparent;
}
.sidebar-content::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 3px;
transition: background 0.3s ease;
}
.sidebar-content:hover::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.3);
}
.sidebar-content:hover::-webkit-scrollbar-thumb:hover {
background: rgba(255,255,255,0.5);
}
[data-theme="light"] .sidebar-content:hover {
scrollbar-color: rgba(0,0,0,0.3) transparent;
}
[data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.3);
}
[data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
background: rgba(0,0,0,0.5);
}
.sidebar-chapter {
display: block;
padding: 8px 0;
color: #aaa;
text-decoration: none;
font-size: 13px;
border-bottom: 1px solid rgba(255,255,255,0.05);
transition: all 0.3s ease;
line-height: 1.5;
}
.sidebar-chapter:hover {
color: #667eea;
}
.sidebar-chapter.current {
color: #667eea;
font-weight: 600;
}
@media (max-width: 1200px) {
.sidebar {
display: none;
}
}
@media (max-width: 600px) {
.chapter-title {
font-size: 24px;
}
.chapter-content {
font-size: 16px;
}
.fixed-nav-content {
gap: 8px;
}
.nav-btn {
padding: 10px 12px;
font-size: 12px;
}
.scroll-buttons {
display: none;
}
.tts-panel {
padding: 20px;
width: 95%;
}
.tts-btn {
width: 48px;
height: 48px;
font-size: 18px;
}
.tts-title {
font-size: 16px;
}
}
/* 滚动条样式 */
.sidebar::-webkit-scrollbar {
width: 4px;
}
.sidebar::-webkit-scrollbar-track {
background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.2);
border-radius: 2px;
}
</style>
</head>
<body>
<!-- 顶部导航 -->
<nav class="top-nav">
<div class="top-nav-content">
<a href="../index.html" class="nav-link">返回首页</a>
<button class="nav-link" id="themeToggle">切换主题</button>
</div>
</nav>
<div class="container">
<header class="chapter-header">
<div class="chapter-number">Chapter 71</div>
<h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
</header>
<article class="chapter-content">
<p>根特北门,战火纷飞。</p>
<p>林克站在临时指挥所内,看着地图上密密麻麻的红点——那是卡勒特的兵力部署。与根特外围的小股部队不同,这里聚集的是卡勒特的主力大军。</p>
<p>"情况比想象的更糟。"泽丁·施奈德皱眉说道,她的独臂撑在地图上,"北门是根特最重要的防线,一旦被突破,整个城市都将沦陷。"</p>
<p>"我们的兵力呢?"林克问道。</p>
<p>"不足对方的三分之一。"泽丁苦笑,"而且...我们的AT-5T步行者机甲大部分都被摧毁了。"</p>
<p>林克看着眼前这位女军官。泽丁穿着一身略显破旧的军装,短发凌乱,脸上带着硝烟的痕迹。她的右臂是机械义肢,装着手炮——那是她在某次战役中失去的。</p>
<p>"让我去吧。"林克说道,"我一个人突破防线,摧毁他们的指挥所。"</p>
<p>"你疯了?"泽丁瞪大眼睛,"那是自杀!"</p>
<p>"相信我。"林克握住她的手,"在阿拉德,我面对过比这更危险的敌人。"</p>
<p>泽丁看着他的眼睛,那里面没有恐惧,只有坚定。</p>
<p>"...好吧。"她最终点头,"我会亲自带队掩护你。"</p>
<p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
<p>根特北门的战场,是一片废墟与钢铁的丛林。</p>
<p>卡勒特的士兵如潮水般涌来,枪声、爆炸声、喊杀声交织在一起。林克身形如电,在枪林弹雨中穿梭,光剑所过之处敌人纷纷倒下。</p>
<p>"掩护林克!"泽丁在后方指挥,手炮不断发射,为林克清扫障碍。</p>
<p>林克冲破了第一道防线但卡勒特的援军源源不断地涌来。更麻烦的是敌方出动了大型机动兵器——AT-5T步行者。</p>
<p>"该死..."林克看着那台钢铁巨兽,"这东西不好对付。"</p>
<p>就在此时,一道身影从他身边掠过。</p>
<p>"我来对付它!"泽丁竟然跟了上来,独臂举起手炮,对准步行者的关节处连续射击。</p>
<p>"泽丁?你怎么..."</p>
<p>"别废话!"泽丁喊道,"它的关节是弱点,我吸引火力,你找机会攻击!"</p>
<p>泽丁灵活地在战场上移动,虽然只有一只手,但她的动作依然敏捷。手炮的火力精准地打击着步行者的关节,成功吸引了它的注意力。</p>
<p>林克抓住机会,施展猛龙断空斩,剑气如龙般穿透步行者的装甲,将其核心摧毁。</p>
<p>"轰!"</p>
<p>步行者轰然倒地,泽丁却因为躲避不及,被爆炸的冲击波掀翻。</p>
<p>"泽丁!"</p>
<p>林克冲过去,在千钧一发之际抱住了她,两人一起滚到了掩体后面。</p>
<p>"你没事吧?"林克紧张地问。</p>
<p>泽丁躺在他怀里,愣愣地看着他。</p>
<p>"你...为什么要救我?"</p>
<p>"因为你是我重要的伙伴。"林克认真地说。</p>
<p>泽丁的脸微微泛红,她别过脸去:"谁...谁要你做这种危险的事..."</p>
<p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
<p>战斗持续到深夜。</p>
<p>在林克和泽丁的配合下,皇都军终于击退了卡勒特的进攻,守住了北门。但付出的代价也是惨重的——无数士兵牺牲,防线千疮百孔。</p>
<p>临时医疗所内,泽丁坐在床边,让军医处理她手臂上的伤口。</p>
<p>"只是擦伤,不碍事。"泽丁淡淡地说。</p>
<p>"让我看看。"林克走过来,接过军医手中的绷带。</p>
<p>"你..."</p>
<p>"别动。"林克轻声说,小心地为她包扎。</p>
<p>泽丁看着他专注的侧脸,心跳不由自主地加快。</p>
<p>"林克..."她轻声说,"今天...谢谢你。"</p>
<p>"不用谢。"</p>
<p>"不只是今天..."泽丁低下头,"自从你来到天界,帮了我们这么多...我不知道该怎么报答你。"</p>
<p>林克停下手中的动作,看着她:"泽丁,你为什么要这么拼命?"</p>
<p>"因为..."泽丁的眼中闪过一丝痛苦,"我哥哥...就是死在与卡勒特的战斗中。我发誓要为他报仇,保护天界..."</p>
<p>她的声音有些哽咽:"但我一个人的力量太弱了...直到你出现。"</p>
<p>林克轻轻握住她的手:"你不是一个人。"</p>
<p>泽丁抬起头,眼中含着泪光:"林克...我..."</p>
<p>她没有说完,但林克明白她的意思。</p>
<p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
<p>深夜,泽丁的私人宿舍。</p>
<p>这是位于工坊街深处的一间小屋,简陋但整洁。墙上挂着泽丁哥哥的照片,还有她获得的各种勋章。</p>
<p>"这里...有点乱。"泽丁有些不好意思。</p>
<p>"很温馨。"林克看着墙上的照片,"你哥哥...一定很为你骄傲。"</p>
<p>"嗯..."泽丁走到照片前,"他是皇都军的英雄,在一次战役中为了掩护战友撤退,独自面对卡勒特的大军..."</p>
<p>林克走到她身后,轻轻搂住她的腰。</p>
<p>"泽丁,你也是一个英雄。"</p>
<p>"我?"泽丁苦笑,"我只是一个失去手臂的残废..."</p>
<p>"不。"林克将她转过身,认真地看着她,"你是我见过最勇敢、最坚强的女人。你的独臂比任何人的双手都更有力量。"</p>
<p>泽丁看着他,眼中的泪水终于滑落:"林克...为什么...为什么对我这么好?"</p>
<p>"因为我喜欢你。"林克直接说道。</p>
<p>泽丁愣住了,然后脸瞬间红透:"你...你说什么?"</p>
<p>"我喜欢你,泽丁。"林克重复道,"从第一次见到你,我就被你的坚强和勇敢吸引了。"</p>
<p>"可是..."泽丁低下头,"我只有一只手...而且我粗鲁、不懂温柔..."</p>
<p>"那又怎样?"林克抬起她的下巴,"在我眼里,你是最美的。"</p>
<p>他低下头,吻上了她的唇。</p>
<p>泽丁的身体僵硬了一瞬,但很快就软化下来。她的独臂环住林克的脖子,笨拙地回应着他的吻。</p>
<p>"林克..."她喘息着,"我...我也喜欢你...从你在战场上救我的那一刻起..."</p>
<p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
<p>床铺上,两人紧紧相拥。</p>
<p>泽丁躺在林克怀里,脸上还带着红晕。她的军装已经被解开,露出小麦色的肌肤和紧致的身材。常年的军旅生涯让她的身体充满了力量感,但此刻却显得格外柔软。</p>
<p>"我...我是第一次..."她羞涩地说,"而且我只有一只手...可能...可能做不好..."</p>
<p>"没关系。"林克温柔地吻着她,"让我来引导你。"</p>
<p>他的手缓缓滑过她的身体,从肩膀到腰际,再到大腿。每一次触碰都让泽丁轻轻颤抖。</p>
<p>"嗯..."她轻声呻吟,"那里...好敏感..."</p>
<p>"哪里?"林克故意问道,手指在她腰侧画着圈。</p>
<p>"别...别欺负我..."泽丁红着脸,"你知道的..."</p>
<p>林克轻笑,吻上了她的脖颈。泽丁的呼吸变得急促,独臂紧紧抓着他的衣角。</p>
<p>"林克..."她轻声唤道,"我想要你...给我..."</p>
<p>林克不再犹豫,缓缓进入了她的身体。</p>
<p>"啊——!"泽丁痛呼一声,指甲嵌入林克的后背,"痛...好痛..."</p>
<p>"忍一忍。"林克停下动作,温柔地吻去她眼角的泪珠,"第一次都会痛的...等一会儿就好了。"</p>
<p>他耐心地等待着,一只手轻抚着她的头发,另一只手与她独臂十指相扣。泽丁的呼吸渐渐平稳,身体的紧绷也慢慢放松。</p>
<p>"好...好多了..."她轻声说,"可以...动了..."</p>
<p>林克开始缓慢地动作,每一次都小心翼翼。泽丁起初只是咬着嘴唇忍耐,但渐渐地,一种奇妙的感觉从身体深处涌起。</p>
<p>"嗯...啊..."她开始发出细碎的呻吟,"好奇怪...不痛了...好舒服..."</p>
<p>"舒服吗?"林克轻笑,"那我...加快速度了?"</p>
<p>"嗯..."泽丁点头,"给我...更多..."</p>
<p>林克加快了速度,动作也越来越深。泽丁的呻吟声越来越大,身体不受控制地扭动着,迎合着他的节奏。</p>
<p>"林克...林克..."她不停地呼唤着他的名字,"我爱你...我爱你..."</p>
<p>"我也爱你。"林克温柔地回应,动作更加用力。</p>
<p>窗外的炮火声渐渐远去,房间里只剩下两人的喘息和呻吟。</p>
<p>"要...要去了..."泽丁突然抓紧了林克,"林克...我...我..."</p>
<p>"一起..."林克低吼一声,加快了最后的冲刺。</p>
<p>"啊——!!!"</p>
<p>泽丁发出一声高亢的尖叫,身体剧烈地颤抖着,达到了顶峰。林克也在同一时间释放,两人的身体紧紧贴在一起,感受着彼此最亲密的时刻。</p>
<p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
<p>不知过了多久,一切归于平静。</p>
<p>泽丁躺在林克的怀里,脸上带着满足的红晕。她的独臂紧紧搂着林克,像是怕他会消失。</p>
<p>"开心吗?"林克问道。</p>
<p>"嗯。"泽丁点点头,"我终于...真正成为你的女人了。"</p>
<p>她抬起头,认真地看着林克:"林克...我发誓,不管以后发生什么,我都会陪在你身边。"</p>
<p>"即使是面对卡勒特的大军?"</p>
<p>"即使是面对死亡。"泽丁坚定地说,"从今以后,我的剑...我的手炮...我的身体...都是你的。"</p>
<p>林克紧紧地抱着她:"泽丁...谢谢你。"</p>
<p>"谢什么?"</p>
<p>"谢谢你...愿意接受我。"林克轻声说,"我知道你有你的使命,你的责任...但请让我陪你一起承担。"</p>
<p>泽丁的眼中又泛起泪光,她将脸埋进林克的胸口:"嗯...我们一起..."</p>
<p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
<p>第二天清晨,马琳来到泽丁的宿舍汇报军情,却看到泽丁正依偎在林克怀里,两人都在沉睡。</p>
<p>马琳愣了一下,然后微微一笑,轻轻关上门离开了。</p>
<p>当泽丁醒来时,看到林克温柔的笑容,心中涌起一股幸福。</p>
<p>"早安。"林克吻了吻她的额头。</p>
<p>"早安..."泽丁红着脸,"昨晚..."</p>
<p>"很美。"林克笑道。</p>
<p>泽丁把脸埋进他的胸口,声音闷闷的:"坏家伙..."</p>
<p>"泽丁。"林克突然正色道,"等战争结束...跟我回阿拉德吧。"</p>
<p>泽丁抬起头,眼中闪烁着光芒:"真的可以吗?"</p>
<p>"当然。"林克点头,"那里有很多关心我的人...我想让你也成为她们的一员。"</p>
<p>"她们?"泽丁疑惑。</p>
<p>"嗯..."林克有些不好意思,"我在阿拉德...有一些重要的女性..."</p>
<p>泽丁愣了一下,然后笑了:"我早就猜到了。像你这么优秀的男人,不可能只属于一个人。"</p>
<p>"你不介意?"</p>
<p>"介意。"泽丁诚实地说,"但...我更介意失去你。"</p>
<p>她紧紧握住林克的手:"不管有多少人分享你,只要你心里有我...就够了。"</p>
<p>林克感动地吻住她:"泽丁...我爱你。"</p>
<p>"我也爱你。"</p>
<p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
<p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">(第七十一章完)</p>
</article>
</div>
<!-- 固定底部导航 -->
<nav class="fixed-nav">
<div class="fixed-nav-content">
<a href="chapter-70.html" class="nav-btn ">上一章</a>
<a href="../chapters.html" class="nav-btn">目录</a>
<button class="nav-btn" id="ttsToggleBtn">朗读</button>
<a href="chapter-72.html" class="nav-btn ">下一章</a>
</div>
</nav>
<!-- 右侧滚动按钮 -->
<div class="scroll-buttons">
<button class="scroll-btn" id="scrollTop" title="回到顶部"></button>
<button class="scroll-btn" id="scrollBottom" title="回到底部"></button>
</div>
<!-- TTS弹出面板 -->
<div class="tts-overlay" id="ttsOverlay">
<div class="tts-panel">
<div class="tts-header">
<div class="tts-title">🔊 语音朗读</div>
<button class="tts-close" id="ttsClose">×</button>
</div>
<div class="tts-controls">
<button class="tts-btn" id="ttsPlay" title="播放"></button>
<button class="tts-btn" id="ttsPause" title="暂停"></button>
<button class="tts-btn" id="ttsStop" title="停止"></button>
</div>
<div class="tts-progress">
<div class="tts-progress-bar">
<div class="tts-progress-fill" id="ttsProgressFill"></div>
</div>
<div class="tts-time" id="ttsTime">0 / 0 句</div>
</div>
<div class="tts-speed">
<span class="tts-speed-label">朗读速度:</span>
<select class="tts-speed-select" id="ttsSpeed">
<option value="0.5">慢速 (0.5x)</option>
<option value="0.75">较慢 (0.75x)</option>
<option value="1" selected>正常 (1x)</option>
<option value="1.25">较快 (1.25x)</option>
<option value="1.5">快速 (1.5x)</option>
<option value="2">极速 (2x)</option>
</select>
</div>
</div>
</div>
<!-- 侧边栏章节导航 -->
<aside class="sidebar">
<div class="sidebar-title">章节导航</div>
<div class="sidebar-content" id="sidebarContent">
<a href="chapter-41.html" class="sidebar-chapter ">第41章敏泰的加入</a>
<a href="chapter-42.html" class="sidebar-chapter ">第42章山脊·野兽师</a>
<a href="chapter-43.html" class="sidebar-chapter ">第43章番外·雪山温泉</a>
<a href="chapter-44.html" class="sidebar-chapter ">第44章白色废墟</a>
<a href="chapter-45.html" class="sidebar-chapter ">第45章冰雪宫殿</a>
<a href="chapter-46.html" class="sidebar-chapter ">第46章布万加修炼场</a>
<a href="chapter-47.html" class="sidebar-chapter ">第47章斯卡萨之巢·龙威</a>
<a href="chapter-48.html" class="sidebar-chapter ">第48章斯卡萨之巢·龙陨</a>
<a href="chapter-49.html" class="sidebar-chapter ">第49章重返赫顿玛尔</a>
<a href="chapter-50.html" class="sidebar-chapter ">第50章诺斯玛尔·盗贼团</a>
<a href="chapter-51.html" class="sidebar-chapter ">第51章哈穆林·鼠患</a>
<a href="chapter-52.html" class="sidebar-chapter ">第52章月光酒馆·寻找阿甘左</a>
<a href="chapter-53.html" class="sidebar-chapter ">第53章番外·帕丽丝的誓言</a>
<a href="chapter-54.html" class="sidebar-chapter ">第54章觉醒之路·启程</a>
<a href="chapter-55.html" class="sidebar-chapter ">第55章比尔马克帝国试验场</a>
<a href="chapter-56.html" class="sidebar-chapter ">第56章王的遗迹·远古五骑士</a>
<a href="chapter-57.html" class="sidebar-chapter ">第57章心灵试炼·剑圣觉醒</a>
<a href="chapter-58.html" class="sidebar-chapter ">第58章番外·后宫的温馨</a>
<a href="chapter-59.html" class="sidebar-chapter ">第59章敏泰的思念</a>
<a href="chapter-60.html" class="sidebar-chapter ">第60章敏泰加入·前往诺伊佩拉</a>
<a href="chapter-61.html" class="sidebar-chapter ">第61章悲鸣洞穴·阿甘左与卢克西</a>
<a href="chapter-62.html" class="sidebar-chapter ">第62章战前准备·痛苦之村的情报</a>
<a href="chapter-63.html" class="sidebar-chapter ">第63章痛苦之村列瑟芬·狄瑞吉的真身</a>
<a href="chapter-64.html" class="sidebar-chapter ">第64章胜利归来·赫顿玛尔的庆祝</a>
<a href="chapter-65.html" class="sidebar-chapter ">第65章正宫的专属时光·赛丽亚的深情</a>
<a href="chapter-66.html" class="sidebar-chapter ">第66章番外·五人同床·后宫大被同眠</a>
<a href="chapter-67.html" class="sidebar-chapter ">第67章热血八番街·火箭侠的阴谋</a>
<a href="chapter-68.html" class="sidebar-chapter ">第68章绿都格罗兹尼·魔雷者莫纳亨</a>
<a href="chapter-69.html" class="sidebar-chapter ">第69章魔雷者的苏醒·莫纳亨的抉择</a>
<a href="chapter-70.html" class="sidebar-chapter ">第70章天界之门·根特外围的战火</a>
<a href="chapter-71.html" class="sidebar-chapter current">第71章根特北门·泽丁的誓言</a>
<a href="chapter-72.html" class="sidebar-chapter ">第72章根特南门·马琳的效忠</a>
<a href="chapter-73.html" class="sidebar-chapter ">第73章根特防御战·钢铁与血肉的碰撞</a>
<a href="chapter-74.html" class="sidebar-chapter ">第74章夜间袭击战·银勺杂技团的覆灭</a>
<a href="chapter-75.html" class="sidebar-chapter ">第75章补给线阻断战·UM-0终结者</a>
<a href="chapter-76.html" class="sidebar-chapter ">第76章追击歼灭战·机械吉赛尔的末路</a>
<a href="chapter-77.html" class="sidebar-chapter ">第77章海上列车·鲁夫特悬空海港</a>
<a href="chapter-78.html" class="sidebar-chapter ">第78章列车上的海贼·铁鳞团的覆灭</a>
<a href="chapter-79.html" class="sidebar-chapter ">第79章夺回西部线·卡勒特的余孽</a>
<a href="chapter-80.html" class="sidebar-chapter ">第80章雾都赫伊斯·无法地带的阴影</a>
<a href="chapter-81.html" class="sidebar-chapter ">第81章阿登高地·GT-9600</a>
<a href="chapter-82.html" class="sidebar-chapter ">第82章卡勒特指挥部·兰蒂卢斯</a>
<a href="chapter-83.html" class="sidebar-chapter ">第83章皇女的告白·天界的新篇章</a>
<a href="chapter-84.html" class="sidebar-chapter ">第84章幽灵列车·亡者的低语</a>
<a href="chapter-85.html" class="sidebar-chapter ">第85章伊顿工业区·克雷发电站</a>
<a href="chapter-86.html" class="sidebar-chapter ">第86章普鲁兹发电站·闪电之帕特里斯</a>
<a href="chapter-87.html" class="sidebar-chapter ">第87章特伦斯发电站·熔岩之萨姆</a>
<a href="chapter-88.html" class="sidebar-chapter ">第88章格兰迪发电站·虚空之弗曼</a>
<a href="chapter-89.html" class="sidebar-chapter ">第89章安图恩攻坚战·黑雾之源</a>
<a href="chapter-90.html" class="sidebar-chapter ">第90章安图恩攻坚战·震颤的大地</a>
<a href="chapter-91.html" class="sidebar-chapter ">第91章安图恩攻坚战·擎天之柱</a>
<a href="chapter-92.html" class="sidebar-chapter ">第92章安图恩攻坚战·黑色火山</a>
<a href="chapter-93.html" class="sidebar-chapter ">第93章安图恩攻坚战·使徒陨落</a>
<a href="chapter-94.html" class="sidebar-chapter ">第94章克洛诺斯岛·寂静城的召唤</a>
<a href="chapter-95.html" class="sidebar-chapter ">第95章寂静城的秘密</a>
<a href="chapter-96.html" class="sidebar-chapter ">第96章番外·贝奇的献身</a>
<a href="chapter-97.html" class="sidebar-chapter ">第97章光之舞会</a>
<a href="chapter-98.html" class="sidebar-chapter ">第98章钢铁之臂</a>
<a href="chapter-99.html" class="sidebar-chapter ">第99章能源熔炉</a>
<a href="chapter-100.html" class="sidebar-chapter ">第100章王之书库</a>
<a href="chapter-101.html" class="sidebar-chapter ">第101章不灭回廊</a>
</div>
</aside>
<script>
// 记录阅读进度
let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
if (!readChapters.includes(71)) {
readChapters.push({{CHAPTER_ID}});
localStorage.setItem('readChapters', JSON.stringify(readChapters));
}
// 主题切换
const themeToggle = document.getElementById('themeToggle');
const savedTheme = localStorage.getItem('theme') || 'dark';
document.documentElement.setAttribute('data-theme', savedTheme);
themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
themeToggle.addEventListener('click', () => {
const currentTheme = document.documentElement.getAttribute('data-theme');
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme);
themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
});
// 滚动到顶部
document.getElementById('scrollTop').addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
// 滚动到底部
document.getElementById('scrollBottom').addEventListener('click', () => {
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
});
// 页面加载时,侧边栏自动滚动到当前章节
window.addEventListener('load', () => {
const sidebarContent = document.getElementById('sidebarContent');
const currentChapter = sidebarContent.querySelector('.current');
if (currentChapter) {
currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
});
// ========== TTS弹出面板 ==========
const ttsOverlay = document.getElementById('ttsOverlay');
const ttsToggleBtn = document.getElementById('ttsToggleBtn');
const ttsClose = document.getElementById('ttsClose');
// 打开TTS面板
ttsToggleBtn.addEventListener('click', () => {
ttsOverlay.classList.add('show');
initTTS();
});
// 关闭TTS面板
ttsClose.addEventListener('click', () => {
ttsOverlay.classList.remove('show');
});
// 点击遮罩关闭
ttsOverlay.addEventListener('click', (e) => {
if (e.target === ttsOverlay) {
ttsOverlay.classList.remove('show');
}
});
// ========== TTS语音朗读功能 ==========
let ttsSynth = window.speechSynthesis;
let ttsUtterance = null;
let ttsText = '';
let ttsSentences = [];
let ttsCurrentIndex = 0;
let ttsIsPlaying = false;
let ttsIsPaused = false;
let ttsSpeed = 1;
// 初始化:提取章节内容
function initTTS() {
const contentEl = document.querySelector('.chapter-content');
if (!contentEl) return;
// 获取所有段落文本清理HTML标签
ttsText = contentEl.innerText || contentEl.textContent;
// 分割成句子(中文按句号、问号、感叹号分割)
ttsSentences = ttsText.match(/[^。!?\n]+[。!?\n]+|[^。!?\n]+$/g) || [ttsText];
ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
updateTTSProgress();
}
// 更新进度显示
function updateTTSProgress() {
const total = ttsSentences.length;
const current = ttsCurrentIndex;
document.getElementById('ttsTime').textContent = `${current} / ${total}`;
const percent = total > 0 ? (current / total * 100) : 0;
document.getElementById('ttsProgressFill').style.width = `${percent}%`;
}
// 播放当前句子
function playCurrentSentence() {
if (ttsCurrentIndex >= ttsSentences.length) {
stopTTS();
return;
}
const text = ttsSentences[ttsCurrentIndex].trim();
ttsUtterance = new SpeechSynthesisUtterance(text);
ttsUtterance.lang = 'zh-CN';
ttsUtterance.rate = ttsSpeed;
// 尝试选择中文语音
const voices = ttsSynth.getVoices();
const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
if (zhVoice) {
ttsUtterance.voice = zhVoice;
}
ttsUtterance.onend = () => {
if (ttsIsPlaying && !ttsIsPaused) {
ttsCurrentIndex++;
updateTTSProgress();
playCurrentSentence();
}
};
ttsUtterance.onerror = (e) => {
console.error('TTS error:', e);
if (ttsIsPlaying) {
ttsCurrentIndex++;
updateTTSProgress();
playCurrentSentence();
}
};
ttsSynth.speak(ttsUtterance);
}
// 播放
function playTTS() {
if (ttsSentences.length === 0) {
initTTS();
}
if (ttsIsPaused) {
ttsSynth.resume();
ttsIsPaused = false;
} else {
ttsIsPlaying = true;
playCurrentSentence();
}
document.getElementById('ttsPlay').classList.add('active');
document.getElementById('ttsPause').classList.remove('active');
ttsToggleBtn.classList.add('active');
}
// 暂停
function pauseTTS() {
if (ttsIsPlaying) {
ttsSynth.pause();
ttsIsPaused = true;
document.getElementById('ttsPlay').classList.remove('active');
document.getElementById('ttsPause').classList.add('active');
ttsToggleBtn.classList.remove('active');
}
}
// 停止
function stopTTS() {
ttsSynth.cancel();
ttsIsPlaying = false;
ttsIsPaused = false;
ttsCurrentIndex = 0;
updateTTSProgress();
document.getElementById('ttsPlay').classList.remove('active');
document.getElementById('ttsPause').classList.remove('active');
ttsToggleBtn.classList.remove('active');
}
// 设置速度
function setTTSSpeed(speed) {
ttsSpeed = parseFloat(speed);
// 如果正在播放,需要重新开始当前句子
if (ttsIsPlaying && !ttsIsPaused) {
ttsSynth.cancel();
playCurrentSentence();
}
}
// 绑定事件
document.getElementById('ttsPlay').addEventListener('click', playTTS);
document.getElementById('ttsPause').addEventListener('click', pauseTTS);
document.getElementById('ttsStop').addEventListener('click', stopTTS);
document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
// 加载语音列表(某些浏览器需要异步加载)
if (speechSynthesis.onvoiceschanged !== undefined) {
speechSynthesis.onvoiceschanged = initTTS;
}
// 页面离开时停止播放
window.addEventListener('beforeunload', stopTTS);
</script>
</body>
</html>