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

913 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: 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 96</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>他按下了几个按钮,容器中的液体开始缓缓排出,连接在贝奇身上的管线也一根根断开。当最后一根管线脱离时,贝奇的身体缓缓降落在容器底部。</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>「这只是开始。」林克轻声说道,「如果你愿意,我可以教你更多。」</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>「没事的...」林克停下来,轻轻抚摸她的头发,「痛的话告诉我。」</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>
</article>
</div>
<!-- 固定底部导航 -->
<nav class="fixed-nav">
<div class="fixed-nav-content">
<a href="chapter-95.html" class="nav-btn ">上一章</a>
<a href="../chapters.html" class="nav-btn">目录</a>
<a href="chapter-97.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-66.html" class="sidebar-chapter ">第66章番外·五人同床·后宫大被同眠</a>
<a href="chapter-67.html" class="sidebar-chapter ">第67章热血八番街·火箭侠的阴谋</a>
<a href="chapter-68.html" class="sidebar-chapter ">第68章绿都格罗兹尼·魔雷者莫纳亨</a>
<a href="chapter-69.html" class="sidebar-chapter ">第69章魔雷者的苏醒·莫纳亨的抉择</a>
<a href="chapter-70.html" class="sidebar-chapter ">第70章天界之门·根特外围的战火</a>
<a href="chapter-71.html" class="sidebar-chapter ">第71章根特北门·泽丁的誓言</a>
<a href="chapter-72.html" class="sidebar-chapter ">第72章根特南门·马琳的效忠</a>
<a href="chapter-73.html" class="sidebar-chapter ">第73章根特防御战·钢铁与血肉的碰撞</a>
<a href="chapter-74.html" class="sidebar-chapter ">第74章夜间袭击战·银勺杂技团的覆灭</a>
<a href="chapter-75.html" class="sidebar-chapter ">第75章补给线阻断战·UM-0终结者</a>
<a href="chapter-76.html" class="sidebar-chapter ">第76章追击歼灭战·机械吉赛尔的末路</a>
<a href="chapter-77.html" class="sidebar-chapter ">第77章海上列车·鲁夫特悬空海港</a>
<a href="chapter-78.html" class="sidebar-chapter ">第78章列车上的海贼·铁鳞团的覆灭</a>
<a href="chapter-79.html" class="sidebar-chapter ">第79章夺回西部线·卡勒特的余孽</a>
<a href="chapter-80.html" class="sidebar-chapter ">第80章雾都赫伊斯·无法地带的阴影</a>
<a href="chapter-81.html" class="sidebar-chapter ">第81章阿登高地·GT-9600</a>
<a href="chapter-82.html" class="sidebar-chapter ">第82章卡勒特指挥部·兰蒂卢斯</a>
<a href="chapter-83.html" class="sidebar-chapter ">第83章皇女的告白·天界的新篇章</a>
<a href="chapter-84.html" class="sidebar-chapter ">第84章幽灵列车·亡者的低语</a>
<a href="chapter-85.html" class="sidebar-chapter ">第85章伊顿工业区·克雷发电站</a>
<a href="chapter-86.html" class="sidebar-chapter ">第86章普鲁兹发电站·闪电之帕特里斯</a>
<a href="chapter-87.html" class="sidebar-chapter ">第87章特伦斯发电站·熔岩之萨姆</a>
<a href="chapter-88.html" class="sidebar-chapter ">第88章格兰迪发电站·虚空之弗曼</a>
<a href="chapter-89.html" class="sidebar-chapter ">第89章安图恩攻坚战·黑雾之源</a>
<a href="chapter-90.html" class="sidebar-chapter ">第90章安图恩攻坚战·震颤的大地</a>
<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 current">第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 ">第125章番外·与皇女的皇家约会</a>
<a href="chapter-126.html" class="sidebar-chapter ">第126章番外·与米娅的工坊时光</a>
</div>
</aside>
<script>
// 记录阅读进度
let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
if (!readChapters.includes(96)) {
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>