jianzhihuixiang/alacarte-novel-website/chapters/chapter-161.html
2026-03-29 14:08:36 +08:00

945 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;
}
/* 右侧滚动按钮 */
.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;
right: 10px;
bottom: 75px;
min-width: auto;
padding: 12px;
width: auto;
}
.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;
}
}
@media (max-width: 400px) {
.tts-panel {
bottom: 70px;
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 161</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 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 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 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 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 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 style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
<p>艾拉走上前:"林克,你获得光之结晶了吗?"</p>
<p>林克点头,伸出手。一颗金色的水晶出现在他掌心,散发着神圣的光芒。</p>
<p>"这就是光之结晶。"艾拉说,"有了它,我们就能封印希洛克了。"</p>
<p>艾丽丝看着光之结晶,神色凝重:"但希洛克已经恢复了不少力量。要封印她,我们需要找到她的本体。"</p>
<p>林克收起光之结晶:"那就去找。在我们的力量耗尽之前,一定要封印她。"</p>
<p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
<p>四人离开光之圣殿,踏上了寻找希洛克本体的旅程。</p>
<p>但她们不知道的是,在圣殿之外,一双红色的眼睛正在注视着她们。</p>
<p>"光之结晶...果然被他拿到了。"希洛克的声音在空中回荡,"有趣...太有趣了..."</p>
<p>"让我看看,你能否找到我的本体...在我完全复苏之前。"</p>
<p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
<p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">(第一百六十一章完)</p>
</article>
</div>
<!-- 固定底部导航 -->
<nav class="fixed-nav">
<div class="fixed-nav-content">
<a href="chapter-160.html" class="nav-btn ">上一章</a>
<a href="../chapters.html" class="nav-btn">目录</a>
<a href="chapter-162.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-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 ">第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 current">第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(161)) {
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>