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

989 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 158</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>林克回头看她:"怎么了?"</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>他看向其中一面镜子,镜中是赛丽亚被怪物杀死的画面。</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>"不...这不可能..."</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 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 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 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-157.html" class="nav-btn ">上一章</a>
<a href="../chapters.html" class="nav-btn">目录</a>
<button class="nav-btn" id="ttsToggleBtn">朗读</button>
<a href="chapter-159.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-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 ">第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 current">第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(158)) {
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>