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

967 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 125</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 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>艾丽婕的眼神很认真,带着一丝紧张和期待:"从你救天界的那天开始,我就把你放在心里了。你是我遇到的第一个让我看到希望的人,第一个让我相信天界可以重建的人,第一个...让我想要依靠的人。"</p>
<p>她低下头:"我知道,我是皇女,有很多责任和束缚。我不能像普通人一样自由地追求爱情...但是...我还是想告诉你我的心意。"</p>
<p>她的声音变得轻柔:"至少,让你知道,有人在天界等你。有人愿意放下皇女的身份,只做一个普通女孩等你。"</p>
<p>林克没有说话,只是静静地看着她。</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-124.html" class="nav-btn ">上一章</a>
<a href="../chapters.html" class="nav-btn">目录</a>
<a href="chapter-126.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-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 ">第124章番外·与马琳的骑士之道</a>
<a href="chapter-125.html" class="sidebar-chapter current">第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>
<a href="chapter-155.html" class="sidebar-chapter ">第155章天空之战</a>
</div>
</aside>
<script>
// 记录阅读进度
let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
if (!readChapters.includes(125)) {
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>