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

976 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 177</div>
<h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
</header>
<article class="chapter-content">
<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 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 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 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 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>亚历克斯说:"我会继承米歇尔大人的遗志。"</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>一个恢复的人类跪在亚历克斯面前:"圣者大人...我做了什么?"</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>救助工作持续了很久。</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>米歇尔点头:"莉兹...我对不起你们。"</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 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-176.html" class="nav-btn ">上一章</a>
<a href="../chapters.html" class="nav-btn">目录</a>
<a href="chapter-178.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-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 ">第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 current">第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(177)) {
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>