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

956 lines
42 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 121</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 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 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 style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
<p>第二轮训练更加激烈。</p>
<p>帕丽丝的速度更快了,她的身影如同鬼魅,在林克周围不断闪烁。每一拳都带着凌厉的风声,每一脚都蕴含着巨大的力量。她的毒雾也越来越浓,几乎笼罩了整个战斗区域。</p>
<p>林克不得不认真起来。他开启流心状态,剑气变得更加锋利。每一次挥剑都带着流心的加持,威力倍增。</p>
<p>两人的战斗持续了很久,从下午打到了黄昏。夕阳西下,金色的光芒洒在废墟上,为这场激烈的对决增添了一层浪漫的色彩。</p>
<p>终于,帕丽丝停下了动作,大口喘着气。汗水浸透了她的衣服,勾勒出她健美的身材。</p>
<p>"够了...够了..."她摆手,"我认输了..."</p>
<p>林克也收起细雪之舞,走到她身边:"你很强,帕丽丝。如果是我刚成为剑神那会儿,说不定真的会输给你。"</p>
<p>帕丽丝瞪了他一眼:"你是在夸我还是在夸你自己?"</p>
<p>林克笑了:"都是在夸。你真的很厉害,帕丽丝。"</p>
<p>帕丽丝的脸微微泛红,她别过头:"哼,油嘴滑舌..."</p>
<p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
<p>傍晚,两人并肩坐在废墟的高处,看着夕阳慢慢沉入地平线。</p>
<p>天边的云霞被染成了橙红色,美得像一幅画。风吹过废墟,带起一阵沙尘,却没有破坏这份宁静。</p>
<p>帕丽丝靠在林克肩上,身体有些疲惫,但心情很放松。</p>
<p>"林克。"她轻声说。</p>
<p>"嗯?"</p>
<p>"谢谢你陪我来这里。"她的声音很轻,"我以为回到诺斯玛尔会很痛苦,但...和你在一起,我发现自己可以平静地面对这些回忆了。"</p>
<p>林克握住她的手:"过去的已经过去了,帕丽丝。你现在有了新的生活,新的方向,还有...我在你身边。"</p>
<p>帕丽丝沉默了片刻,然后深吸一口气。</p>
<p>"林克,我有话想对你说。"</p>
<p>林克转向她,看着她的眼睛。</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 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 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 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-120.html" class="nav-btn ">上一章</a>
<a href="../chapters.html" class="nav-btn">目录</a>
<a href="chapter-122.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-91.html" class="sidebar-chapter ">第91章安图恩攻坚战·擎天之柱</a>
<a href="chapter-92.html" class="sidebar-chapter ">第92章安图恩攻坚战·黑色火山</a>
<a href="chapter-93.html" class="sidebar-chapter ">第93章安图恩攻坚战·使徒陨落</a>
<a href="chapter-94.html" class="sidebar-chapter ">第94章克洛诺斯岛·寂静城的召唤</a>
<a href="chapter-95.html" class="sidebar-chapter ">第95章寂静城的秘密</a>
<a href="chapter-96.html" class="sidebar-chapter ">第96章番外·贝奇的献身</a>
<a href="chapter-97.html" class="sidebar-chapter ">第97章光之舞会</a>
<a href="chapter-98.html" class="sidebar-chapter ">第98章钢铁之臂</a>
<a href="chapter-99.html" class="sidebar-chapter ">第99章能源熔炉</a>
<a href="chapter-100.html" class="sidebar-chapter ">第100章王之书库</a>
<a href="chapter-101.html" class="sidebar-chapter ">第101章不灭回廊</a>
<a href="chapter-102.html" class="sidebar-chapter ">第102章机械王座</a>
<a href="chapter-103.html" class="sidebar-chapter ">第103章番外·寂静城的早晨</a>
<a href="chapter-104.html" class="sidebar-chapter ">第104章番外·贝奇与艾泽拉</a>
<a href="chapter-105.html" class="sidebar-chapter ">第105章番外·卢克的嘱托</a>
<a href="chapter-106.html" class="sidebar-chapter ">第106章时空之门的召唤</a>
<a href="chapter-107.html" class="sidebar-chapter ">第107章格兰之火</a>
<a href="chapter-108.html" class="sidebar-chapter ">第108章瘟疫之源</a>
<a href="chapter-109.html" class="sidebar-chapter ">第109章卡勒特之初</a>
<a href="chapter-110.html" class="sidebar-chapter ">第110章无法地带</a>
<a href="chapter-111.html" class="sidebar-chapter ">第111章暗黑圣战</a>
<a href="chapter-112.html" class="sidebar-chapter ">第112章昔日悲鸣</a>
<a href="chapter-113.html" class="sidebar-chapter ">第113章凛冬</a>
<a href="chapter-114.html" class="sidebar-chapter ">第114章迷之觉悟</a>
<a href="chapter-115.html" class="sidebar-chapter ">第115章番外·艾丽丝的抉择</a>
<a href="chapter-116.html" class="sidebar-chapter ">第116章番外·后宫的日常</a>
<a href="chapter-117.html" class="sidebar-chapter ">第117章番外·与赛丽亚的约会</a>
<a href="chapter-118.html" class="sidebar-chapter ">第118章番外·与奥菲利亚的重逢</a>
<a href="chapter-119.html" class="sidebar-chapter ">第119章番外·与敏泰的雪山之行</a>
<a href="chapter-120.html" class="sidebar-chapter ">第120章番外·与莎兰的魔法时光</a>
<a href="chapter-121.html" class="sidebar-chapter current">第121章番外·与帕丽丝的格斗训练</a>
<a href="chapter-122.html" class="sidebar-chapter ">第122章番外·与莫纳亨的念动力</a>
<a href="chapter-123.html" class="sidebar-chapter ">第123章番外·与泽丁的天界巡逻</a>
<a href="chapter-124.html" class="sidebar-chapter ">第124章番外·与马琳的骑士之道</a>
<a href="chapter-125.html" class="sidebar-chapter ">第125章番外·与皇女的皇家约会</a>
<a href="chapter-126.html" class="sidebar-chapter ">第126章番外·与米娅的工坊时光</a>
<a href="chapter-127.html" class="sidebar-chapter ">第127章番外·与贝奇的人造之心</a>
<a href="chapter-128.html" class="sidebar-chapter ">第128章番外·与艾泽拉的守护誓言</a>
<a href="chapter-129.html" class="sidebar-chapter ">第129章魔界的召唤</a>
<a href="chapter-130.html" class="sidebar-chapter ">第130章魔界营地</a>
<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>
</div>
</aside>
<script>
// 记录阅读进度
let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
if (!readChapters.includes(121)) {
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>