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

962 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: 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 58</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>"林克!"</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>"才不是呢!"奥菲利亚凑过来,"莎兰姐姐每天都在担心你,连魔法研究都顾不上!"</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 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>"莎兰..."</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>新的冒险还在等待,但此刻,林克只想享受这难得的宁静时光。</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-57.html" class="nav-btn ">上一章</a>
<a href="../chapters.html" class="nav-btn">目录</a>
<a href="chapter-59.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-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 ">第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 current">第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>
<a href="chapter-69.html" class="sidebar-chapter ">第69章魔雷者的苏醒·莫纳亨的抉择</a>
<a href="chapter-70.html" class="sidebar-chapter ">第70章天界之门·根特外围的战火</a>
<a href="chapter-71.html" class="sidebar-chapter ">第71章根特北门·泽丁的誓言</a>
<a href="chapter-72.html" class="sidebar-chapter ">第72章根特南门·马琳的效忠</a>
<a href="chapter-73.html" class="sidebar-chapter ">第73章根特防御战·钢铁与血肉的碰撞</a>
<a href="chapter-74.html" class="sidebar-chapter ">第74章夜间袭击战·银勺杂技团的覆灭</a>
<a href="chapter-75.html" class="sidebar-chapter ">第75章补给线阻断战·UM-0终结者</a>
<a href="chapter-76.html" class="sidebar-chapter ">第76章追击歼灭战·机械吉赛尔的末路</a>
<a href="chapter-77.html" class="sidebar-chapter ">第77章海上列车·鲁夫特悬空海港</a>
<a href="chapter-78.html" class="sidebar-chapter ">第78章列车上的海贼·铁鳞团的覆灭</a>
<a href="chapter-79.html" class="sidebar-chapter ">第79章夺回西部线·卡勒特的余孽</a>
<a href="chapter-80.html" class="sidebar-chapter ">第80章雾都赫伊斯·无法地带的阴影</a>
<a href="chapter-81.html" class="sidebar-chapter ">第81章阿登高地·GT-9600</a>
<a href="chapter-82.html" class="sidebar-chapter ">第82章卡勒特指挥部·兰蒂卢斯</a>
<a href="chapter-83.html" class="sidebar-chapter ">第83章皇女的告白·天界的新篇章</a>
<a href="chapter-84.html" class="sidebar-chapter ">第84章幽灵列车·亡者的低语</a>
<a href="chapter-85.html" class="sidebar-chapter ">第85章伊顿工业区·克雷发电站</a>
<a href="chapter-86.html" class="sidebar-chapter ">第86章普鲁兹发电站·闪电之帕特里斯</a>
<a href="chapter-87.html" class="sidebar-chapter ">第87章特伦斯发电站·熔岩之萨姆</a>
<a href="chapter-88.html" class="sidebar-chapter ">第88章格兰迪发电站·虚空之弗曼</a>
</div>
</aside>
<script>
// 记录阅读进度
let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
if (!readChapters.includes(58)) {
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>