jianzhihuixiang/alacarte-novel-website/chapters/chapter-153.html
2026-03-29 13:57:51 +08:00

922 lines
38 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;
}
/* 右侧滚动按钮 */
.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-panel {
position: fixed;
left: 20px;
bottom: 90px;
display: flex;
flex-direction: column;
gap: 10px;
z-index: 1001;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(10px);
border-radius: 12px;
border: 1px solid var(--border-color);
padding: 15px;
min-width: 180px;
}
.tts-title {
font-size: 12px;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 5px;
}
.tts-controls {
display: flex;
gap: 8px;
margin-bottom: 10px;
}
.tts-btn {
width: 36px;
height: 36px;
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: 14px;
transition: all 0.3s ease;
font-family: 'Noto Sans SC', sans-serif;
}
.tts-btn:hover {
background: var(--btn-hover);
}
.tts-btn.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-color: #667eea;
}
.tts-progress {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.tts-progress-bar {
flex: 1;
height: 4px;
background: var(--btn-bg);
border-radius: 2px;
overflow: hidden;
}
.tts-progress-fill {
height: 100%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
width: 0%;
transition: width 0.1s ease;
}
.tts-time {
font-size: 12px;
color: var(--text-secondary);
font-family: 'Noto Sans SC', sans-serif;
min-width: 80px;
}
.tts-speed {
display: flex;
align-items: center;
gap: 8px;
}
.tts-speed-label {
font-size: 12px;
color: var(--text-secondary);
font-family: 'Noto Sans SC', sans-serif;
}
.tts-speed-select {
padding: 4px 8px;
background: var(--btn-bg);
border: 1px solid var(--border-color);
border-radius: 4px;
color: var(--text-primary);
font-size: 12px;
cursor: pointer;
font-family: 'Noto Sans SC', sans-serif;
}
@media (max-width: 600px) {
.tts-panel {
left: 10px;
bottom: 80px;
min-width: 150px;
padding: 10px;
}
.tts-btn {
width: 32px;
height: 32px;
font-size: 12px;
}
}
/* 侧边栏 - 标题固定,内容滚动 */
.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: 10px;
}
.nav-btn {
padding: 10px 15px;
font-size: 12px;
}
.scroll-buttons {
right: 10px;
bottom: 80px;
}
.scroll-btn {
width: 36px;
height: 36px;
}
}
/* 滚动条样式 */
.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 153</div>
<h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
</header>
<article class="chapter-content">
<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 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 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 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 style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</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 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 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 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 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 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 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 style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</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 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-152.html" class="nav-btn ">上一章</a>
<a href="../chapters.html" class="nav-btn">目录</a>
<a href="chapter-154.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-panel" id="ttsPanel">
<div class="tts-title">语音朗读</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">慢速</option>
<option value="0.75">较慢</option>
<option value="1" selected>正常</option>
<option value="1.25">较快</option>
<option value="1.5">快速</option>
<option value="2">极速</option>
</select>
</div>
</div>
<!-- 侧边栏章节导航 -->
<aside class="sidebar">
<div class="sidebar-title">章节导航</div>
<div class="sidebar-content" id="sidebarContent">
<a href="chapter-123.html" class="sidebar-chapter ">第123章番外·与泽丁的天界巡逻</a>
<a href="chapter-124.html" class="sidebar-chapter ">第124章番外·与马琳的骑士之道</a>
<a href="chapter-125.html" class="sidebar-chapter ">第125章番外·与皇女的皇家约会</a>
<a href="chapter-126.html" class="sidebar-chapter ">第126章番外·与米娅的工坊时光</a>
<a href="chapter-127.html" class="sidebar-chapter ">第127章番外·与贝奇的人造之心</a>
<a href="chapter-128.html" class="sidebar-chapter ">第128章番外·与艾泽拉的守护誓言</a>
<a href="chapter-129.html" class="sidebar-chapter ">第129章魔界的召唤</a>
<a href="chapter-130.html" class="sidebar-chapter ">第130章魔界营地</a>
<a href="chapter-131.html" class="sidebar-chapter ">第131章凯蒂的指引</a>
<a href="chapter-132.html" class="sidebar-chapter ">第132章营地危机</a>
<a href="chapter-133.html" class="sidebar-chapter ">第133章尼梅尔的心意</a>
<a href="chapter-134.html" class="sidebar-chapter ">第134章中央公园</a>
<a href="chapter-135.html" class="sidebar-chapter ">第135章剑圣的试炼</a>
<a href="chapter-136.html" class="sidebar-chapter ">第136章地轨中心</a>
<a href="chapter-137.html" class="sidebar-chapter ">第137章魔剑士阿斯兰</a>
<a href="chapter-138.html" class="sidebar-chapter ">第138章泪目之眼</a>
<a href="chapter-139.html" class="sidebar-chapter ">第139章使徒会晤</a>
<a href="chapter-140.html" class="sidebar-chapter ">第140章复仇之剑</a>
<a href="chapter-141.html" class="sidebar-chapter ">第141章寂静城再访</a>
<a href="chapter-142.html" class="sidebar-chapter ">第142章时间之钥</a>
<a href="chapter-143.html" class="sidebar-chapter ">第143章翡翠梦魇</a>
<a href="chapter-144.html" class="sidebar-chapter ">第144章诅咒的守护者</a>
<a href="chapter-145.html" class="sidebar-chapter ">第145章精灵的誓言</a>
<a href="chapter-146.html" class="sidebar-chapter ">第146章深渊之眼</a>
<a href="chapter-147.html" class="sidebar-chapter ">第147章赫尔德的仪式</a>
<a href="chapter-148.html" class="sidebar-chapter ">第148章战后余晖</a>
<a href="chapter-149.html" class="sidebar-chapter ">第149章泰波尔斯的召唤</a>
<a href="chapter-150.html" class="sidebar-chapter ">第150章天空之城</a>
<a href="chapter-151.html" class="sidebar-chapter ">第151章风暴试炼</a>
<a href="chapter-152.html" class="sidebar-chapter ">第152章光芒与暗影</a>
<a href="chapter-153.html" class="sidebar-chapter current">第153章天空之战</a>
<a href="chapter-154.html" class="sidebar-chapter ">第154章天空之战</a>
<a href="chapter-155.html" class="sidebar-chapter ">第155章天空之战</a>
<a href="chapter-156.html" class="sidebar-chapter ">第156章格兰之森异象</a>
<a href="chapter-157.html" class="sidebar-chapter ">第157章魔界深处</a>
<a href="chapter-158.html" class="sidebar-chapter ">第158章幻象迷宫</a>
<a href="chapter-159.html" class="sidebar-chapter ">第159章无形之战</a>
<a href="chapter-160.html" class="sidebar-chapter ">第160章无形者的秘密</a>
<a href="chapter-161.html" class="sidebar-chapter ">第161章光之试炼</a>
<a href="chapter-162.html" class="sidebar-chapter ">第162章希洛克的陷阱</a>
<a href="chapter-163.html" class="sidebar-chapter ">第163章无形之战</a>
<a href="chapter-164.html" class="sidebar-chapter ">第164章日常的温馨</a>
<a href="chapter-165.html" class="sidebar-chapter ">第165章莎莎的信</a>
<a href="chapter-166.html" class="sidebar-chapter ">第166章圣者之鸣号</a>
<a href="chapter-167.html" class="sidebar-chapter ">第167章黑色大地入口</a>
<a href="chapter-168.html" class="sidebar-chapter ">第168章焦黑之地深入</a>
<a href="chapter-169.html" class="sidebar-chapter ">第169章暗黑骑士团</a>
<a href="chapter-170.html" class="sidebar-chapter ">第170章黑暗中的记忆</a>
<a href="chapter-171.html" class="sidebar-chapter ">第171章混沌王座</a>
<a href="chapter-172.html" class="sidebar-chapter ">第172章混沌之神的力量</a>
<a href="chapter-173.html" class="sidebar-chapter ">第173章米歇尔的羁绊</a>
<a href="chapter-174.html" class="sidebar-chapter ">第174章创世之光的净化</a>
<a href="chapter-175.html" class="sidebar-chapter ">第175章混沌的终结</a>
<a href="chapter-176.html" class="sidebar-chapter ">第176章篇章落幕</a>
<a href="chapter-177.html" class="sidebar-chapter ">第177章番外·米歇尔的最后祝福</a>
<a href="chapter-178.html" class="sidebar-chapter ">第178章番外·奥兹玛的遗言</a>
</div>
</aside>
<script>
// 记录阅读进度
let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
if (!readChapters.includes(153)) {
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语音朗读功能 ==========
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');
}
// 暂停
function pauseTTS() {
if (ttsIsPlaying) {
ttsSynth.pause();
ttsIsPaused = true;
document.getElementById('ttsPlay').classList.remove('active');
document.getElementById('ttsPause').classList.add('active');
}
}
// 停止
function stopTTS() {
ttsSynth.cancel();
ttsIsPlaying = false;
ttsIsPaused = false;
ttsCurrentIndex = 0;
updateTTSProgress();
document.getElementById('ttsPlay').classList.remove('active');
document.getElementById('ttsPause').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('load', () => {
initTTS();
});
// 页面离开时停止播放
window.addEventListener('beforeunload', stopTTS);
</script>
</body>
</html>