jianzhihuixiang/alacarte-novel-website/chapters/chapter-124.html
2026-03-29 13:57:51 +08:00

936 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: 1001;
background: rgba(0,0,0,0.5);
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;
bottom: 80px;
min-width: 150px;
padding: 10px;
}
.tts-btn {
width: 32px;
height: 32px;
font-size: 12px;
}
}
/* 侧边栏 - 标题固定,内容滚动 */
.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 124</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>马琳的脸微微泛红:"谢谢...我一直都在努力训练。"</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>她的眼神变得坚定:"是你给了我勇气,林克。是你让我知道,普通人也可以变强。"</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>"你想在这里?"他问。</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 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-123.html" class="nav-btn ">上一章</a>
<a href="../chapters.html" class="nav-btn">目录</a>
<a href="chapter-125.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-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 ">第122章番外·与莫纳亨的念动力</a>
<a href="chapter-123.html" class="sidebar-chapter ">第123章番外·与泽丁的天界巡逻</a>
<a href="chapter-124.html" class="sidebar-chapter current">第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>
<a href="chapter-153.html" class="sidebar-chapter ">第153章天空之战</a>
<a href="chapter-154.html" class="sidebar-chapter ">第154章天空之战</a>
</div>
</aside>
<script>
// 记录阅读进度
let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
if (!readChapters.includes(124)) {
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>