147 lines
6.5 KiB
HTML
147 lines
6.5 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="reader-page">
|
||
|
|
<!-- 阅读器头部 -->
|
||
|
|
<header class="reader-header" id="readerHeader">
|
||
|
|
<div class="reader-header-content">
|
||
|
|
<a href="index.html" class="reader-back">
|
||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<path d="M19 12H5M12 19l-7-7 7-7"/>
|
||
|
|
</svg>
|
||
|
|
</a>
|
||
|
|
<div class="reader-info">
|
||
|
|
<h1 class="reader-title" id="chapterTitle">第一章</h1>
|
||
|
|
<span class="reader-book">阿拉德：剑之回响</span>
|
||
|
|
</div>
|
||
|
|
<button class="reader-menu-toggle" id="readerMenuToggle">
|
||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<circle cx="12" cy="12" r="1"/>
|
||
|
|
<circle cx="19" cy="12" r="1"/>
|
||
|
|
<circle cx="5" cy="12" r="1"/>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="reader-progress-bar">
|
||
|
|
<div class="reader-progress-fill" id="readerProgress"></div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<!-- 阅读器设置面板 -->
|
||
|
|
<div class="reader-settings" id="readerSettings">
|
||
|
|
<div class="settings-panel">
|
||
|
|
<div class="settings-section">
|
||
|
|
<h3>字体大小</h3>
|
||
|
|
<div class="font-size-control">
|
||
|
|
<button class="size-btn" data-size="small">小</button>
|
||
|
|
<button class="size-btn active" data-size="normal">中</button>
|
||
|
|
<button class="size-btn" data-size="large">大</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="settings-section">
|
||
|
|
<h3>主题</h3>
|
||
|
|
<div class="theme-options">
|
||
|
|
<button class="theme-option active" data-theme="dark">
|
||
|
|
<span class="theme-preview dark"></span>
|
||
|
|
<span>深色</span>
|
||
|
|
</button>
|
||
|
|
<button class="theme-option" data-theme="light">
|
||
|
|
<span class="theme-preview light"></span>
|
||
|
|
<span>浅色</span>
|
||
|
|
</button>
|
||
|
|
<button class="theme-option" data-theme="sepia">
|
||
|
|
<span class="theme-preview sepia"></span>
|
||
|
|
<span>护眼</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="settings-section">
|
||
|
|
<h3>行间距</h3>
|
||
|
|
<div class="line-height-control">
|
||
|
|
<button class="lh-btn" data-lh="compact">紧凑</button>
|
||
|
|
<button class="lh-btn active" data-lh="normal">标准</button>
|
||
|
|
<button class="lh-btn" data-lh="loose">宽松</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 目录侧边栏 -->
|
||
|
|
<aside class="reader-sidebar" id="readerSidebar">
|
||
|
|
<div class="sidebar-header">
|
||
|
|
<h2>章节目录</h2>
|
||
|
|
<button class="sidebar-close" id="sidebarClose">
|
||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<path d="M18 6L6 18M6 6l12 12"/>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="sidebar-content" id="sidebarChapters">
|
||
|
|
<!-- 章节列表将通过JS动态生成 -->
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
|
||
|
|
<!-- 阅读内容区域 -->
|
||
|
|
<main class="reader-content" id="readerContent">
|
||
|
|
<article class="chapter-content" id="chapterContent">
|
||
|
|
<!-- 章节内容将通过JS动态加载 -->
|
||
|
|
<div class="chapter-loading">
|
||
|
|
<div class="loading-spinner"></div>
|
||
|
|
<p>正在加载章节内容...</p>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<!-- 阅读器底部导航 -->
|
||
|
|
<footer class="reader-footer" id="readerFooter">
|
||
|
|
<div class="reader-nav">
|
||
|
|
<button class="nav-btn" id="prevChapter" disabled>
|
||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<path d="M15 18l-6-6 6-6"/>
|
||
|
|
</svg>
|
||
|
|
<span>上一章</span>
|
||
|
|
</button>
|
||
|
|
<button class="nav-btn nav-center" id="openSidebar">
|
||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<path d="M4 6h16M4 12h16M4 18h16"/>
|
||
|
|
</svg>
|
||
|
|
<span>目录</span>
|
||
|
|
</button>
|
||
|
|
<button class="nav-btn" id="nextChapter">
|
||
|
|
<span>下一章</span>
|
||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<path d="M9 18l6-6-6-6"/>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
<!-- 阅读设置浮动按钮 -->
|
||
|
|
<button class="reader-settings-toggle" id="settingsToggle" title="阅读设置">
|
||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<circle cx="12" cy="12" r="3"/>
|
||
|
|
<path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"/>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<!-- 遮罩层 -->
|
||
|
|
<div class="overlay" id="overlay"></div>
|
||
|
|
|
||
|
|
<script src="js/app.js"></script>
|
||
|
|
<script>
|
||
|
|
// 阅读页面特定逻辑
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
initReader();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|