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

953 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;
}
.nav-btn.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-color: #667eea;
}
/* 右侧滚动按钮 */
.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-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 2000;
display: none;
align-items: center;
justify-content: center;
}
.tts-overlay.show {
display: flex;
}
.tts-panel {
background: rgba(30,30,50,0.95);
backdrop-filter: blur(10px);
border-radius: 16px;
border: 1px solid var(--border-color);
padding: 24px;
width: 90%;
max-width: 400px;
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}
[data-theme="light"] .tts-panel {
background: rgba(255,255,255,0.95);
}
.tts-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid var(--border-color);
}
.tts-title {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
font-family: 'Noto Sans SC', sans-serif;
}
.tts-close {
width: 32px;
height: 32px;
border-radius: 50%;
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: 18px;
transition: all 0.3s ease;
}
.tts-close:hover {
background: var(--btn-hover);
}
.tts-controls {
display: flex;
justify-content: center;
gap: 16px;
margin-bottom: 20px;
}
.tts-btn {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--btn-bg);
border: 2px solid var(--border-color);
color: var(--text-primary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
transition: all 0.3s ease;
font-family: 'Noto Sans SC', sans-serif;
}
.tts-btn:hover {
background: var(--btn-hover);
transform: scale(1.1);
}
.tts-btn.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-color: #667eea;
transform: scale(1.1);
}
.tts-progress {
margin-bottom: 20px;
}
.tts-progress-bar {
height: 6px;
background: var(--btn-bg);
border-radius: 3px;
overflow: hidden;
margin-bottom: 8px;
}
.tts-progress-fill {
height: 100%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
width: 0%;
transition: width 0.1s ease;
}
.tts-time {
font-size: 13px;
color: var(--text-secondary);
font-family: 'Noto Sans SC', sans-serif;
text-align: center;
}
.tts-speed {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.tts-speed-label {
font-size: 14px;
color: var(--text-secondary);
font-family: 'Noto Sans SC', sans-serif;
}
.tts-speed-select {
padding: 8px 16px;
background: var(--btn-bg);
border: 1px solid var(--border-color);
border-radius: 8px;
color: var(--text-primary);
font-size: 14px;
cursor: pointer;
font-family: 'Noto Sans SC', sans-serif;
}
/* 侧边栏 - 标题固定,内容滚动 */
.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: 8px;
}
.nav-btn {
padding: 10px 12px;
font-size: 12px;
}
.scroll-buttons {
display: none;
}
.tts-panel {
padding: 20px;
width: 95%;
}
.tts-btn {
width: 48px;
height: 48px;
font-size: 18px;
}
.tts-title {
font-size: 16px;
}
}
/* 滚动条样式 */
.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 38</div>
<h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
</header>
<article class="chapter-content">
<p>击败影子剑士刹影后的第三天,克伦特再次找到了林克一行人。</p>
<p>这一次,他的脸色比之前更加凝重。</p>
<p>"熔岩穴出事了。"克伦特开门见山,"那里的火山活动突然加剧,泰坦...那个怪物正在苏醒。"</p>
<p>"泰坦?"赛丽亚皱眉。</p>
<p>"暗精灵王国历史上最危险的囚犯。"克伦特解释道,"百年前,它是一个普通的熔岩巨人,被囚禁在熔岩穴深处。但随着时间的推移,它不断吸收地底的火元素,变得越来越强大。"</p>
<p>"现在它是什么状态?"林克问道。</p>
<p>"根据魔法师公会的监测,它的力量已经超越了斯皮兹。"克伦特深吸一口气,"如果不阻止它,整个暗黑城都会被岩浆吞没。"</p>
<p>林克看向伙伴们。赛丽亚、奥菲利亚、艾伦都点了点头。</p>
<p>"我们走。"</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>"这里到处都是陷阱。"林克握紧晨曦,"大家跟紧我,我走前面探路。"</p>
<p>四人小心翼翼地前进,躲避着不断喷发的岩浆柱和突然开裂的地面。沿途他们还遇到了熔岩怪和火精灵的袭击,但在晨曦的光芒和艾伦的圣光下,这些怪物都被轻松击退。</p>
<p>终于,他们来到了熔岩穴的最深处。</p>
<p>那是一个巨大的地下空洞,穹顶高达数百米,中央是一个巨大的岩浆湖。而在岩浆湖的中央,一个庞大的身影正缓缓站起。</p>
<p>泰坦。</p>
<p>那是一个足有二十米高的熔岩巨人,全身由黑曜石和岩浆构成。它的眼睛是两颗燃烧的火球,每走一步,地面都会震颤,岩浆会从它身上的裂缝中喷涌而出。</p>
<p>"入侵者..."泰坦的声音如同火山喷发,震耳欲聋,"你们...来送死..."</p>
<p>"好强的压迫感..."林克咬紧牙关。这个怪物的力量确实超越了斯皮兹,光是站在那里,就让人感到绝望。</p>
<p>"赛丽亚,奥菲利亚,用水系魔法牵制它!艾伦,保护她们!我来主攻!"</p>
<p>"明白!"三人齐声应道。</p>
<p>赛丽亚和奥菲利亚同时举起法杖,数道水箭射向泰坦。但水箭打在泰坦身上,瞬间就被蒸发成水汽,几乎没有造成任何伤害!</p>
<p>"没用的...我是火焰的主宰..."泰坦狂笑,"水...无法伤害我!"</p>
<p>它举起巨大的熔岩之拳,猛然砸向地面!</p>
<p>"地震!"</p>
<p>轰——!!</p>
<p>整个地下空洞都在颤抖,四人被震得东倒西歪。地面裂开无数缝隙,岩浆从缝隙中喷涌而出!</p>
<p>"散开!"林克大喊,流心·跃发动,整个人跃向空中。</p>
<p>但泰坦的速度比想象中快得多。它张开巨口,一道岩浆喷射直射林克!</p>
<p>"林克!"赛丽亚惊呼。</p>
<p>林克在空中强行变向,但还是被岩浆擦中了左腿。剧痛让他差点握不住晨曦,但他咬牙坚持,破极兵刃全程开启!</p>
<p>"猛龙断空斩!"</p>
<p>金色龙形剑气咆哮着冲向泰坦,正中它的胸口!</p>
<p>但让林克震惊的是,这一剑只在泰坦身上留下了一道浅浅的痕迹,而且那痕迹正在以肉眼可见的速度愈合!</p>
<p>"什么?!"</p>
<p>"熔岩护甲..."泰坦狂笑,"在熔岩穴中...我是不死的!"</p>
<p>它再次发动攻击,这一次是召唤火山爆发!地面上突然隆起数个岩浆柱,然后同时喷发!</p>
<p>"圣光护盾!"艾伦全力催动圣光,在四人周围形成屏障。但火山爆发的威力太大,屏障出现了裂痕!</p>
<p>"这样下去不行!"林克咬牙,"必须找到它的弱点!"</p>
<p>他仔细观察着泰坦,突然注意到它的胸口有一块与众不同的核心——那是一块燃烧着白色火焰的晶石,散发着恐怖的高温。</p>
<p>"那是...它的核心!"林克眼睛一亮,"只要破坏那块晶石,就能击败它!"</p>
<p>"但怎么靠近?"奥菲利亚焦急地问,"它的攻击太密集了!"</p>
<p>林克看向赛丽亚:"赛丽亚,你能制造出足够大的水雾,暂时降低周围的温度吗?"</p>
<p>"可以,但只能维持几秒钟!"</p>
<p>"足够了!"林克深吸一口气,"艾伦,掩护赛丽亚!奥菲利亚,准备冰冻药剂!"</p>
<p>"明白!"</p>
<p>赛丽亚全力催动法杖,一道巨大的水雾笼罩了整个区域。温度骤降,泰坦的动作明显迟缓了一瞬!</p>
<p>"就是现在!"</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>"嗯!"</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-37.html" class="nav-btn ">上一章</a>
<a href="../chapters.html" class="nav-btn">目录</a>
<button class="nav-btn" id="ttsToggleBtn">朗读</button>
<a href="chapter-39.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-overlay" id="ttsOverlay">
<div class="tts-panel">
<div class="tts-header">
<div class="tts-title">🔊 语音朗读</div>
<button class="tts-close" id="ttsClose">×</button>
</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">慢速 (0.5x)</option>
<option value="0.75">较慢 (0.75x)</option>
<option value="1" selected>正常 (1x)</option>
<option value="1.25">较快 (1.25x)</option>
<option value="1.5">快速 (1.5x)</option>
<option value="2">极速 (2x)</option>
</select>
</div>
</div>
</div>
<!-- 侧边栏章节导航 -->
<aside class="sidebar">
<div class="sidebar-title">章节导航</div>
<div class="sidebar-content" id="sidebarContent">
<a href="chapter-8.html" class="sidebar-chapter ">第8章冰霜幽暗密林</a>
<a href="chapter-9.html" class="sidebar-chapter ">第9章转职之路</a>
<a href="chapter-10.html" class="sidebar-chapter ">第10章暗黑雷鸣废墟</a>
<a href="chapter-11.html" class="sidebar-chapter ">第11章剑魂转职仪式</a>
<a href="chapter-12.html" class="sidebar-chapter ">第12章西海岸</a>
<a href="chapter-13.html" class="sidebar-chapter ">第13章龙人之塔</a>
<a href="chapter-14.html" class="sidebar-chapter ">第14章人偶玄关</a>
<a href="chapter-15.html" class="sidebar-chapter ">第15章石巨人塔</a>
<a href="chapter-16.html" class="sidebar-chapter ">第16章黑暗玄廊</a>
<a href="chapter-17.html" class="sidebar-chapter ">第17章城主宫殿</a>
<a href="chapter-18.html" class="sidebar-chapter ">第18章番外·悬空城</a>
<a href="chapter-19.html" class="sidebar-chapter ">第19章天帷巨兽·神殿外围</a>
<a href="chapter-20.html" class="sidebar-chapter ">第20章树精丛林</a>
<a href="chapter-21.html" class="sidebar-chapter ">第21章炼狱</a>
<a href="chapter-22.html" class="sidebar-chapter ">第22章西海岸的闲暇</a>
<a href="chapter-23.html" class="sidebar-chapter ">第23章极昼</a>
<a href="chapter-24.html" class="sidebar-chapter ">第24章第一脊椎</a>
<a href="chapter-25.html" class="sidebar-chapter ">第25章赫顿玛尔的准备</a>
<a href="chapter-26.html" class="sidebar-chapter ">第26章第二脊椎</a>
<a href="chapter-27.html" class="sidebar-chapter ">第27章重逢的温柔</a>
<a href="chapter-28.html" class="sidebar-chapter ">第28章暗精灵的委托</a>
<a href="chapter-29.html" class="sidebar-chapter ">第29章阿法利亚营地</a>
<a href="chapter-30.html" class="sidebar-chapter ">第30章浅栖之地</a>
<a href="chapter-31.html" class="sidebar-chapter ">第31章蜘蛛洞穴</a>
<a href="chapter-32.html" class="sidebar-chapter ">第32章克伦特的委托</a>
<a href="chapter-33.html" class="sidebar-chapter ">第33章暗精灵墓地·左翼守卫</a>
<a href="chapter-34.html" class="sidebar-chapter ">第34章暗精灵墓地·剩余三将军</a>
<a href="chapter-35.html" class="sidebar-chapter ">第35章邪龙斯皮兹</a>
<a href="chapter-36.html" class="sidebar-chapter ">第36章莎兰的探望</a>
<a href="chapter-37.html" class="sidebar-chapter ">第37章暗影迷宫·影子剑士</a>
<a href="chapter-38.html" class="sidebar-chapter current">第38章熔岩穴·泰坦之怒</a>
<a href="chapter-39.html" class="sidebar-chapter ">第39章暗黑城入口·无头骑士</a>
<a href="chapter-40.html" class="sidebar-chapter ">第40章万年雪山·冰心少年</a>
<a href="chapter-41.html" class="sidebar-chapter ">第41章敏泰的加入</a>
<a href="chapter-42.html" class="sidebar-chapter ">第42章山脊·野兽师</a>
<a href="chapter-43.html" class="sidebar-chapter ">第43章番外·雪山温泉</a>
<a href="chapter-44.html" class="sidebar-chapter ">第44章白色废墟</a>
<a href="chapter-45.html" class="sidebar-chapter ">第45章冰雪宫殿</a>
<a href="chapter-46.html" class="sidebar-chapter ">第46章布万加修炼场</a>
<a href="chapter-47.html" class="sidebar-chapter ">第47章斯卡萨之巢·龙威</a>
<a href="chapter-48.html" class="sidebar-chapter ">第48章斯卡萨之巢·龙陨</a>
<a href="chapter-49.html" class="sidebar-chapter ">第49章重返赫顿玛尔</a>
<a href="chapter-50.html" class="sidebar-chapter ">第50章诺斯玛尔·盗贼团</a>
<a href="chapter-51.html" class="sidebar-chapter ">第51章哈穆林·鼠患</a>
<a href="chapter-52.html" class="sidebar-chapter ">第52章月光酒馆·寻找阿甘左</a>
<a href="chapter-53.html" class="sidebar-chapter ">第53章番外·帕丽丝的誓言</a>
<a href="chapter-54.html" class="sidebar-chapter ">第54章觉醒之路·启程</a>
<a href="chapter-55.html" class="sidebar-chapter ">第55章比尔马克帝国试验场</a>
<a href="chapter-56.html" class="sidebar-chapter ">第56章王的遗迹·远古五骑士</a>
<a href="chapter-57.html" class="sidebar-chapter ">第57章心灵试炼·剑圣觉醒</a>
<a href="chapter-58.html" class="sidebar-chapter ">第58章番外·后宫的温馨</a>
<a href="chapter-59.html" class="sidebar-chapter ">第59章敏泰的思念</a>
<a href="chapter-60.html" class="sidebar-chapter ">第60章敏泰加入·前往诺伊佩拉</a>
<a href="chapter-61.html" class="sidebar-chapter ">第61章悲鸣洞穴·阿甘左与卢克西</a>
<a href="chapter-62.html" class="sidebar-chapter ">第62章战前准备·痛苦之村的情报</a>
<a href="chapter-63.html" class="sidebar-chapter ">第63章痛苦之村列瑟芬·狄瑞吉的真身</a>
<a href="chapter-64.html" class="sidebar-chapter ">第64章胜利归来·赫顿玛尔的庆祝</a>
<a href="chapter-65.html" class="sidebar-chapter ">第65章正宫的专属时光·赛丽亚的深情</a>
<a href="chapter-66.html" class="sidebar-chapter ">第66章番外·五人同床·后宫大被同眠</a>
<a href="chapter-67.html" class="sidebar-chapter ">第67章热血八番街·火箭侠的阴谋</a>
<a href="chapter-68.html" class="sidebar-chapter ">第68章绿都格罗兹尼·魔雷者莫纳亨</a>
</div>
</aside>
<script>
// 记录阅读进度
let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
if (!readChapters.includes(38)) {
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弹出面板 ==========
const ttsOverlay = document.getElementById('ttsOverlay');
const ttsToggleBtn = document.getElementById('ttsToggleBtn');
const ttsClose = document.getElementById('ttsClose');
// 打开TTS面板
ttsToggleBtn.addEventListener('click', () => {
ttsOverlay.classList.add('show');
initTTS();
});
// 关闭TTS面板
ttsClose.addEventListener('click', () => {
ttsOverlay.classList.remove('show');
});
// 点击遮罩关闭
ttsOverlay.addEventListener('click', (e) => {
if (e.target === ttsOverlay) {
ttsOverlay.classList.remove('show');
}
});
// ========== 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');
ttsToggleBtn.classList.add('active');
}
// 暂停
function pauseTTS() {
if (ttsIsPlaying) {
ttsSynth.pause();
ttsIsPaused = true;
document.getElementById('ttsPlay').classList.remove('active');
document.getElementById('ttsPause').classList.add('active');
ttsToggleBtn.classList.remove('active');
}
}
// 停止
function stopTTS() {
ttsSynth.cancel();
ttsIsPlaying = false;
ttsIsPaused = false;
ttsCurrentIndex = 0;
updateTTSProgress();
document.getElementById('ttsPlay').classList.remove('active');
document.getElementById('ttsPause').classList.remove('active');
ttsToggleBtn.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('beforeunload', stopTTS);
</script>
</body>
</html>