152 lines
6.0 KiB
HTML
152 lines
6.0 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 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=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body class="chapters-page">
|
|
<!-- 导航栏 -->
|
|
<nav class="navbar">
|
|
<div class="nav-container">
|
|
<a href="index.html" class="logo">
|
|
<span class="logo-icon">⚔️</span>
|
|
<span class="logo-text">阿拉德文库</span>
|
|
</a>
|
|
<div class="nav-links">
|
|
<a href="index.html">首页</a>
|
|
<a href="chapters.html" class="active">目录</a>
|
|
<a href="wiki.html">设定集</a>
|
|
<a href="index.html#about">关于</a>
|
|
</div>
|
|
<div class="nav-actions">
|
|
<button class="theme-toggle" id="themeToggle">
|
|
<span class="theme-icon">🌙</span>
|
|
</button>
|
|
<button class="menu-toggle" id="menuToggle">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- 章节列表头部 -->
|
|
<section class="chapters-header">
|
|
<div class="container">
|
|
<div class="chapters-header-content">
|
|
<div class="book-mini">
|
|
<div class="mini-cover" style="background: url('images/cover.png') center/cover no-repeat;">
|
|
</div>
|
|
</div>
|
|
<div class="chapters-title">
|
|
<h1>阿拉德：剑之回响</h1>
|
|
<p>共 <span id="totalChapters">39</span> 章 · 连载中</p>
|
|
</div>
|
|
</div>
|
|
<div class="reading-progress">
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="progressFill"></div>
|
|
</div>
|
|
<span class="progress-text" id="progressText">阅读进度 0%</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 章节列表 -->
|
|
<section class="chapters-list">
|
|
<div class="container">
|
|
<div class="chapters-filter">
|
|
<div class="filter-tabs">
|
|
<button class="filter-tab active" data-filter="all">全部章节</button>
|
|
<button class="filter-tab" data-filter="latest">最近更新</button>
|
|
<button class="filter-tab" data-filter="unread">未读章节</button>
|
|
</div>
|
|
<div class="search-box">
|
|
<input type="text" placeholder="搜索章节..." id="searchInput">
|
|
<svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="11" cy="11" r="8"/>
|
|
<path d="M21 21l-4.35-4.35"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chapters-timeline" id="chaptersList">
|
|
<!-- 章节列表将通过JS动态生成 -->
|
|
</div>
|
|
|
|
<div class="chapters-pagination">
|
|
<button class="btn btn-secondary" disabled>上一页</button>
|
|
<div class="page-numbers">
|
|
<span class="page-current">1</span>
|
|
<span class="page-total">/ 1</span>
|
|
</div>
|
|
<button class="btn btn-secondary" disabled>下一页</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 快速操作浮动按钮 -->
|
|
<div class="fab-container">
|
|
<button class="fab" id="scrollTop" title="回到顶部">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M18 15l-6-6-6 6"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 页脚 -->
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="footer-content">
|
|
<div class="footer-brand">
|
|
<span class="logo-icon">⚔️</span>
|
|
<span class="logo-text">阿拉德文库</span>
|
|
</div>
|
|
<p class="footer-desc">为《阿拉德：剑之回响》打造的专属阅读平台</p>
|
|
<div class="footer-links">
|
|
<a href="index.html">首页</a>
|
|
<a href="chapters.html">目录</a>
|
|
<a href="index.html#about">关于</a>
|
|
</div>
|
|
<p class="footer-copyright">© 2026 阿拉德：剑之回响 · 李策 著</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="js/app.js?v=3"></script>
|
|
<script>
|
|
// 动态加载章节数据（禁用缓存）
|
|
async function loadChaptersData() {
|
|
try {
|
|
const response = await fetch('data/chapters.json?t=' + Date.now());
|
|
const data = await response.json();
|
|
window.chaptersData = data.chapters;
|
|
document.getElementById('totalChapters').textContent = data.total;
|
|
renderChaptersList();
|
|
setupFilters();
|
|
setupSearch();
|
|
updateReadingProgress();
|
|
} catch (error) {
|
|
console.error('加载章节数据失败:', error);
|
|
// 降级使用硬编码数据
|
|
renderChaptersList();
|
|
setupFilters();
|
|
setupSearch();
|
|
updateReadingProgress();
|
|
}
|
|
}
|
|
|
|
// 章节页面特定逻辑
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
loadChaptersData();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|