185 lines
12 KiB
HTML
185 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>浮岛陷落 - 阿拉德：剑之回响</title>
|
||
<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; }
|
||
.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; }
|
||
.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; margin-bottom: 10px; }
|
||
.chapter-title { font-size: 32px; font-weight: 700; background: var(--accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 20px; }
|
||
.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; 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; font-family: 'Noto Sans SC', sans-serif; font-size: 14px; cursor: pointer; }
|
||
.nav-btn:hover { background: var(--btn-hover); }
|
||
.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; }
|
||
.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); padding: 15px 20px; border-bottom: 1px solid var(--border-color); }
|
||
.sidebar-content { overflow-y: auto; padding: 10px 20px 20px; flex: 1; }
|
||
.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); }
|
||
.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; } .scroll-buttons { display: none; } }
|
||
</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 184</div>
|
||
<h1 class="chapter-title">浮岛陷落</h1>
|
||
</header>
|
||
<article class="chapter-content">
|
||
<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 style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</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 style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
|
||
<p>林克感受到对方的巨力。</p>
|
||
<p>这暗影剑士的力量，比他想象的还要强。</p>
|
||
<p>"破极兵刃！"</p>
|
||
<p>林克开启BUFF，力量暴涨。</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 style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</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 style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</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 style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</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 style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</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 style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</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 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>
|
||
</article>
|
||
</div>
|
||
<nav class="fixed-nav">
|
||
<div class="fixed-nav-content">
|
||
<a href="chapter-183.html" class="nav-btn">上一章</a>
|
||
<a href="../chapters.html" class="nav-btn">目录</a>
|
||
<button class="nav-btn" id="themeToggle">切换主题</button>
|
||
<a href="chapter-185.html" class="nav-btn">下一章</a>
|
||
</div>
|
||
</nav>
|
||
<div class="scroll-buttons">
|
||
<button class="scroll-btn" id="scrollTop">顶</button>
|
||
<button class="scroll-btn" id="scrollBottom">底</button>
|
||
</div>
|
||
<aside class="sidebar">
|
||
<div class="sidebar-title">章节导航</div>
|
||
<div class="sidebar-content">
|
||
<a href="chapter-179.html" class="sidebar-chapter">第179章：神之召唤</a>
|
||
<a href="chapter-180.html" class="sidebar-chapter">第180章：通往神界之路</a>
|
||
<a href="chapter-181.html" class="sidebar-chapter">第181章：云端之城</a>
|
||
<a href="chapter-182.html" class="sidebar-chapter">第182章：神界议会</a>
|
||
<a href="chapter-183.html" class="sidebar-chapter">第183章：暗影初现</a>
|
||
<a href="chapter-184.html" class="sidebar-chapter current">第184章：浮岛陷落</a>
|
||
</div>
|
||
</aside>
|
||
<script>
|
||
const savedTheme = localStorage.getItem('theme') || 'dark';
|
||
document.documentElement.setAttribute('data-theme', savedTheme);
|
||
document.getElementById('themeToggle').textContent = savedTheme === 'dark' ? '浅色' : '深色';
|
||
document.getElementById('themeToggle').addEventListener('click', () => {
|
||
const newTheme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
|
||
document.documentElement.setAttribute('data-theme', newTheme);
|
||
localStorage.setItem('theme', newTheme);
|
||
document.getElementById('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' }));
|
||
</script>
|
||
</body>
|
||
</html> |