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

985 lines
40 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 94</div>
<h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
</header>
<article class="chapter-content">
<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 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 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 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 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 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 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-93.html" class="nav-btn ">上一章</a>
<a href="../chapters.html" class="nav-btn">目录</a>
<button class="nav-btn" id="ttsToggleBtn">朗读</button>
<a href="chapter-95.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-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 ">第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 current">第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>
<a href="chapter-102.html" class="sidebar-chapter ">第102章机械王座</a>
<a href="chapter-103.html" class="sidebar-chapter ">第103章番外·寂静城的早晨</a>
<a href="chapter-104.html" class="sidebar-chapter ">第104章番外·贝奇与艾泽拉</a>
<a href="chapter-105.html" class="sidebar-chapter ">第105章番外·卢克的嘱托</a>
<a href="chapter-106.html" class="sidebar-chapter ">第106章时空之门的召唤</a>
<a href="chapter-107.html" class="sidebar-chapter ">第107章格兰之火</a>
<a href="chapter-108.html" class="sidebar-chapter ">第108章瘟疫之源</a>
<a href="chapter-109.html" class="sidebar-chapter ">第109章卡勒特之初</a>
<a href="chapter-110.html" class="sidebar-chapter ">第110章无法地带</a>
<a href="chapter-111.html" class="sidebar-chapter ">第111章暗黑圣战</a>
<a href="chapter-112.html" class="sidebar-chapter ">第112章昔日悲鸣</a>
<a href="chapter-113.html" class="sidebar-chapter ">第113章凛冬</a>
<a href="chapter-114.html" class="sidebar-chapter ">第114章迷之觉悟</a>
<a href="chapter-115.html" class="sidebar-chapter ">第115章番外·艾丽丝的抉择</a>
<a href="chapter-116.html" class="sidebar-chapter ">第116章番外·后宫的日常</a>
<a href="chapter-117.html" class="sidebar-chapter ">第117章番外·与赛丽亚的约会</a>
<a href="chapter-118.html" class="sidebar-chapter ">第118章番外·与奥菲利亚的重逢</a>
<a href="chapter-119.html" class="sidebar-chapter ">第119章番外·与敏泰的雪山之行</a>
<a href="chapter-120.html" class="sidebar-chapter ">第120章番外·与莎兰的魔法时光</a>
<a href="chapter-121.html" class="sidebar-chapter ">第121章番外·与帕丽丝的格斗训练</a>
<a href="chapter-122.html" class="sidebar-chapter ">第122章番外·与莫纳亨的念动力</a>
<a href="chapter-123.html" class="sidebar-chapter ">第123章番外·与泽丁的天界巡逻</a>
<a href="chapter-124.html" class="sidebar-chapter ">第124章番外·与马琳的骑士之道</a>
</div>
</aside>
<script>
// 记录阅读进度
let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
if (!readChapters.includes(94)) {
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>