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

1032 lines
39 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: 1002;
background: rgba(0,0,0,0.6);
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;
right: 10px;
bottom: auto;
top: 60px;
min-width: auto;
padding: 12px;
width: auto;
z-index: 1003;
}
.tts-btn {
width: 32px;
height: 32px;
font-size: 12px;
}
.tts-title {
font-size: 11px;
}
.tts-speed-label {
font-size: 11px;
}
.tts-speed-select {
padding: 3px 6px;
font-size: 11px;
}
.tts-time {
font-size: 11px;
min-width: 60px;
}
/* 手机端隐藏滚动按钮给TTS腾空间 */
.scroll-buttons {
display: none;
}
}
@media (max-width: 400px) {
.tts-panel {
top: 55px;
padding: 10px;
}
.tts-controls {
gap: 6px;
}
.tts-btn {
width: 28px;
height: 28px;
font-size: 11px;
}
}
/* 侧边栏 - 标题固定,内容滚动 */
.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 176</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 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>"奥兹玛怎么样了?"</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>"你会成为超越使徒的存在。"</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 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>"无论你去哪里,我都会和你在一起。"</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>奥菲利亚说:"GBL教团会提供情报支援。"</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 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>林克点头:"我拥有创世之力碎片...应该可以进入。"</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>"奥兹玛的灵魂也去了神界。"</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 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>
<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-175.html" class="nav-btn ">上一章</a>
<a href="../chapters.html" class="nav-btn">目录</a>
<a href="chapter-177.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-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 ">第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 current">第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(176)) {
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>