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

958 lines
41 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 122</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>莫纳亨摇头:"不,你做的远比应该做的多。你不只是救了我,还让我学会了如何面对自己的力量,如何用它来保护别人。"</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 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>她深吸一口气:"是你让我重新找到了活下去的意义,林克。"</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 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-121.html" class="nav-btn ">上一章</a>
<a href="../chapters.html" class="nav-btn">目录</a>
<a href="chapter-123.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-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 ">第121章番外·与帕丽丝的格斗训练</a>
<a href="chapter-122.html" class="sidebar-chapter current">第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>
<a href="chapter-152.html" class="sidebar-chapter ">第152章光芒与暗影</a>
</div>
</aside>
<script>
// 记录阅读进度
let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
if (!readChapters.includes(122)) {
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>