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

966 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 163</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 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>他的力量不仅仅来自他自己,还来自那些爱他的人。</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 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>艾拉看着他:"你刚才...融合了三股力量。那是创世之力的碎片。"</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>艾丽丝沉默了片刻:"也许不会结束。但只要我们在一起,就能面对一切。"</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 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-162.html" class="nav-btn ">上一章</a>
<a href="../chapters.html" class="nav-btn">目录</a>
<a href="chapter-164.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-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 ">第161章光之试炼</a>
<a href="chapter-162.html" class="sidebar-chapter ">第162章希洛克的陷阱</a>
<a href="chapter-163.html" class="sidebar-chapter current">第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(163)) {
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>