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

911 lines
36 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 170</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 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>"皇帝?"卡赞发出一声冷笑,"你真的那么天真吗?皇帝只是恐惧我们的力量!"</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>"从现在开始,你是混沌之神奥兹玛。"那个声音说,"去毁灭这个世界吧。"</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 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 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>
<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-169.html" class="nav-btn ">上一章</a>
<a href="../chapters.html" class="nav-btn">目录</a>
<a href="chapter-171.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-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 ">第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 current">第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(170)) {
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>