|
|
@@ -0,0 +1,1001 @@
|
|
|
+<!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="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
+ <style>
|
|
|
+ :root {
|
|
|
+ --primary-color: #4f46e5;
|
|
|
+ --primary-hover: #4338ca;
|
|
|
+ --secondary-color: #f1f5f9;
|
|
|
+ --secondary-hover: #e2e8f0;
|
|
|
+ --text-primary: #1e293b;
|
|
|
+ --text-secondary: #64748b;
|
|
|
+ --text-light: #94a3b8;
|
|
|
+ --bg-white: #ffffff;
|
|
|
+ --bg-light: #f8fafc;
|
|
|
+ --bg-dark: #1e293b;
|
|
|
+ --border-color: #e2e8f0;
|
|
|
+ --shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
|
|
+ --shadow-hover: 0 10px 20px rgba(0, 0, 0, 0.1);
|
|
|
+ --radius: 8px;
|
|
|
+ --radius-lg: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ * {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-family: 'Segoe UI', 'Microsoft YaHei', 'Noto Serif SC', serif;
|
|
|
+ }
|
|
|
+
|
|
|
+ body {
|
|
|
+ background-color: var(--bg-light);
|
|
|
+ color: var(--text-primary);
|
|
|
+ line-height: 1.8;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ body.dark-mode {
|
|
|
+ background-color: #0f172a;
|
|
|
+ color: #e2e8f0;
|
|
|
+ --bg-white: #1e293b;
|
|
|
+ --text-primary: #e2e8f0;
|
|
|
+ --text-secondary: #94a3b8;
|
|
|
+ --border-color: #334155;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container {
|
|
|
+ max-width: 100%;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: flex;
|
|
|
+ min-height: 100vh;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 侧边栏样式 */
|
|
|
+ .sidebar {
|
|
|
+ width: 300px;
|
|
|
+ background-color: var(--bg-white);
|
|
|
+ border-right: 1px solid var(--border-color);
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ overflow-y: auto;
|
|
|
+ height: 100vh;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ z-index: 100;
|
|
|
+ box-shadow: var(--shadow);
|
|
|
+ }
|
|
|
+
|
|
|
+ .sidebar.collapsed {
|
|
|
+ transform: translateX(-100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .book-info {
|
|
|
+ padding: 25px;
|
|
|
+ border-bottom: 1px solid var(--border-color);
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .book-cover {
|
|
|
+ width: 120px;
|
|
|
+ height: 160px;
|
|
|
+ background: linear-gradient(135deg, #4f46e5, #7c3aed);
|
|
|
+ border-radius: 8px;
|
|
|
+ margin: 0 auto 15px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: white;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 1.5rem;
|
|
|
+ box-shadow: var(--shadow);
|
|
|
+ }
|
|
|
+
|
|
|
+ .book-title {
|
|
|
+ font-size: 1.4rem;
|
|
|
+ font-weight: 700;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ color: var(--text-primary);
|
|
|
+ }
|
|
|
+
|
|
|
+ .book-author {
|
|
|
+ color: var(--text-secondary);
|
|
|
+ font-size: 1rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chapters-nav {
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chapters-title {
|
|
|
+ font-size: 1.1rem;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ color: var(--text-primary);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chapters-list {
|
|
|
+ max-height: calc(100vh - 300px);
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chapter-item {
|
|
|
+ padding: 12px 15px;
|
|
|
+ border-radius: var(--radius);
|
|
|
+ margin-bottom: 8px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s;
|
|
|
+ border-left: 3px solid transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chapter-item:hover {
|
|
|
+ background-color: var(--secondary-color);
|
|
|
+ }
|
|
|
+
|
|
|
+ .chapter-item.active {
|
|
|
+ background-color: rgba(79, 70, 229, 0.1);
|
|
|
+ border-left-color: var(--primary-color);
|
|
|
+ color: var(--primary-color);
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chapter-number {
|
|
|
+ font-size: 0.85rem;
|
|
|
+ color: var(--text-secondary);
|
|
|
+ margin-bottom: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chapter-title {
|
|
|
+ font-size: 0.95rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sub-chapter {
|
|
|
+ margin-left: 20px;
|
|
|
+ font-size: 0.9rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 主内容区域样式 */
|
|
|
+ .main-content {
|
|
|
+ flex: 1;
|
|
|
+ margin-left: 300px;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ min-height: 100vh;
|
|
|
+ }
|
|
|
+
|
|
|
+ .main-content.expanded {
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 顶部工具栏 */
|
|
|
+ .toolbar {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 15px 25px;
|
|
|
+ background-color: var(--bg-white);
|
|
|
+ border-bottom: 1px solid var(--border-color);
|
|
|
+ box-shadow: var(--shadow);
|
|
|
+ }
|
|
|
+
|
|
|
+ .toolbar-left, .toolbar-right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ padding: 8px 12px;
|
|
|
+ border-radius: var(--radius);
|
|
|
+ font-weight: 500;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s;
|
|
|
+ border: none;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ background-color: var(--secondary-color);
|
|
|
+ color: var(--text-secondary);
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn:hover {
|
|
|
+ background-color: var(--secondary-hover);
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-primary {
|
|
|
+ background-color: var(--primary-color);
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-primary:hover {
|
|
|
+ background-color: var(--primary-hover);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 阅读区域 */
|
|
|
+ .reading-area {
|
|
|
+ flex: 1;
|
|
|
+ padding: 40px;
|
|
|
+ max-width: 800px;
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chapter-header {
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 40px;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ border-bottom: 1px solid var(--border-color);
|
|
|
+ }
|
|
|
+
|
|
|
+ .chapter-number-display {
|
|
|
+ font-size: 1rem;
|
|
|
+ color: var(--text-secondary);
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chapter-title-display {
|
|
|
+ font-size: 2rem;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 1.3;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chapter-meta {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 20px;
|
|
|
+ color: var(--text-secondary);
|
|
|
+ font-size: 0.9rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chapter-content {
|
|
|
+ font-size: 1.1rem;
|
|
|
+ line-height: 1.8;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chapter-content h2 {
|
|
|
+ font-size: 1.5rem;
|
|
|
+ margin: 30px 0 15px;
|
|
|
+ color: var(--text-primary);
|
|
|
+ }
|
|
|
+
|
|
|
+ .chapter-content h3 {
|
|
|
+ font-size: 1.3rem;
|
|
|
+ margin: 25px 0 12px;
|
|
|
+ color: var(--text-primary);
|
|
|
+ }
|
|
|
+
|
|
|
+ .chapter-content p {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ text-align: justify;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chapter-content blockquote {
|
|
|
+ border-left: 4px solid var(--primary-color);
|
|
|
+ padding-left: 20px;
|
|
|
+ margin: 25px 0;
|
|
|
+ font-style: italic;
|
|
|
+ color: var(--text-secondary);
|
|
|
+ }
|
|
|
+
|
|
|
+ .chapter-content pre {
|
|
|
+ background-color: var(--secondary-color);
|
|
|
+ padding: 20px;
|
|
|
+ border-radius: var(--radius);
|
|
|
+ overflow-x: auto;
|
|
|
+ margin: 25px 0;
|
|
|
+ font-family: 'Courier New', monospace;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chapter-content code {
|
|
|
+ background-color: var(--secondary-color);
|
|
|
+ padding: 2px 6px;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-family: 'Courier New', monospace;
|
|
|
+ font-size: 0.9rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 底部导航 */
|
|
|
+ .chapter-nav {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 25px 40px;
|
|
|
+ border-top: 1px solid var(--border-color);
|
|
|
+ background-color: var(--bg-white);
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-btn {
|
|
|
+ padding: 12px 20px;
|
|
|
+ border-radius: var(--radius);
|
|
|
+ font-weight: 500;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s;
|
|
|
+ border: none;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ background-color: var(--secondary-color);
|
|
|
+ color: var(--text-secondary);
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-btn:hover {
|
|
|
+ background-color: var(--secondary-hover);
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-btn:disabled {
|
|
|
+ opacity: 0.5;
|
|
|
+ cursor: not-allowed;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 阅读设置面板 */
|
|
|
+ .settings-panel {
|
|
|
+ position: fixed;
|
|
|
+ right: -300px;
|
|
|
+ top: 0;
|
|
|
+ width: 300px;
|
|
|
+ height: 100vh;
|
|
|
+ background-color: var(--bg-white);
|
|
|
+ box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
|
|
|
+ transition: right 0.3s ease;
|
|
|
+ z-index: 200;
|
|
|
+ padding: 25px;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .settings-panel.open {
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .settings-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 25px;
|
|
|
+ padding-bottom: 15px;
|
|
|
+ border-bottom: 1px solid var(--border-color);
|
|
|
+ }
|
|
|
+
|
|
|
+ .settings-title {
|
|
|
+ font-size: 1.2rem;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .close-settings {
|
|
|
+ background: none;
|
|
|
+ border: none;
|
|
|
+ font-size: 1.2rem;
|
|
|
+ cursor: pointer;
|
|
|
+ color: var(--text-secondary);
|
|
|
+ }
|
|
|
+
|
|
|
+ .setting-group {
|
|
|
+ margin-bottom: 25px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .setting-label {
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: var(--text-primary);
|
|
|
+ }
|
|
|
+
|
|
|
+ .font-size-controls {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .font-size-btn {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background-color: var(--secondary-color);
|
|
|
+ border: none;
|
|
|
+ cursor: pointer;
|
|
|
+ font-weight: bold;
|
|
|
+ transition: all 0.2s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .font-size-btn.active {
|
|
|
+ background-color: var(--primary-color);
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .theme-options {
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .theme-btn {
|
|
|
+ flex: 1;
|
|
|
+ padding: 12px;
|
|
|
+ border-radius: var(--radius);
|
|
|
+ border: 2px solid var(--border-color);
|
|
|
+ background-color: var(--bg-white);
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .theme-btn.active {
|
|
|
+ border-color: var(--primary-color);
|
|
|
+ }
|
|
|
+
|
|
|
+ .theme-light {
|
|
|
+ background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .theme-dark {
|
|
|
+ background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .theme-sepia {
|
|
|
+ background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 响应式设计 */
|
|
|
+ @media (max-width: 992px) {
|
|
|
+ .sidebar {
|
|
|
+ width: 250px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .main-content {
|
|
|
+ margin-left: 250px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .reading-area {
|
|
|
+ padding: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ .sidebar {
|
|
|
+ width: 100%;
|
|
|
+ transform: translateX(-100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .sidebar.open {
|
|
|
+ transform: translateX(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ .main-content {
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .reading-area {
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chapter-title-display {
|
|
|
+ font-size: 1.6rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .toolbar {
|
|
|
+ padding: 12px 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chapter-nav {
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 576px) {
|
|
|
+ .reading-area {
|
|
|
+ padding: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chapter-title-display {
|
|
|
+ font-size: 1.4rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chapter-content {
|
|
|
+ font-size: 1rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .toolbar-left, .toolbar-right {
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn span {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-btn span {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<div class="container">
|
|
|
+ <!-- 侧边栏 -->
|
|
|
+ <div class="sidebar" id="sidebar">
|
|
|
+ <div class="book-info">
|
|
|
+ <div class="book-cover">设计</div>
|
|
|
+ <h1 class="book-title">网页设计与开发实战</h1>
|
|
|
+ <p class="book-author">作者：张明</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="chapters-nav">
|
|
|
+ <div class="chapters-title">
|
|
|
+ <span>章节列表</span>
|
|
|
+ <span id="chaptersCount">12章</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="chapters-list" id="chaptersList">
|
|
|
+ <!-- 章节列表将通过JavaScript动态生成 -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 主内容区域 -->
|
|
|
+ <div class="main-content" id="mainContent">
|
|
|
+ <!-- 顶部工具栏 -->
|
|
|
+ <div class="toolbar">
|
|
|
+ <div class="toolbar-left">
|
|
|
+ <button class="btn" id="toggleSidebar">
|
|
|
+ <i class="fas fa-bars"></i>
|
|
|
+ <span>目录</span>
|
|
|
+ </button>
|
|
|
+ <button class="btn" id="prevChapter">
|
|
|
+ <i class="fas fa-chevron-left"></i>
|
|
|
+ <span>上一章</span>
|
|
|
+ </button>
|
|
|
+ <button class="btn" id="nextChapter">
|
|
|
+ <span>下一章</span>
|
|
|
+ <i class="fas fa-chevron-right"></i>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="toolbar-right">
|
|
|
+ <button class="btn" id="bookmarkBtn">
|
|
|
+ <i class="far fa-bookmark"></i>
|
|
|
+ <span>书签</span>
|
|
|
+ </button>
|
|
|
+ <button class="btn" id="searchBtn">
|
|
|
+ <i class="fas fa-search"></i>
|
|
|
+ <span>搜索</span>
|
|
|
+ </button>
|
|
|
+ <button class="btn" id="settingsBtn">
|
|
|
+ <i class="fas fa-cog"></i>
|
|
|
+ <span>设置</span>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 阅读区域 -->
|
|
|
+ <div class="reading-area" id="readingArea">
|
|
|
+ <div class="chapter-header">
|
|
|
+ <div class="chapter-number-display" id="chapterNumberDisplay">第一章</div>
|
|
|
+ <h1 class="chapter-title-display" id="chapterTitleDisplay">HTML基础</h1>
|
|
|
+ <div class="chapter-meta">
|
|
|
+ <span>字数：5200</span>
|
|
|
+ <span>阅读时间：约15分钟</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="chapter-content" id="chapterContent">
|
|
|
+ <!-- 章节内容将通过JavaScript动态生成 -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 底部导航 -->
|
|
|
+ <div class="chapter-nav">
|
|
|
+ <button class="nav-btn" id="prevNavBtn">
|
|
|
+ <i class="fas fa-chevron-left"></i>
|
|
|
+ <span>上一章：无</span>
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <div class="progress">
|
|
|
+ <span>阅读进度：<span id="progressPercent">0%</span></span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <button class="nav-btn" id="nextNavBtn">
|
|
|
+ <span>下一章：CSS样式</span>
|
|
|
+ <i class="fas fa-chevron-right"></i>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 阅读设置面板 -->
|
|
|
+ <div class="settings-panel" id="settingsPanel">
|
|
|
+ <div class="settings-header">
|
|
|
+ <h3 class="settings-title">阅读设置</h3>
|
|
|
+ <button class="close-settings" id="closeSettings">
|
|
|
+ <i class="fas fa-times"></i>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="setting-group">
|
|
|
+ <label class="setting-label">字体大小</label>
|
|
|
+ <div class="font-size-controls">
|
|
|
+ <button class="font-size-btn" data-size="small">小</button>
|
|
|
+ <button class="font-size-btn active" data-size="medium">中</button>
|
|
|
+ <button class="font-size-btn" data-size="large">大</button>
|
|
|
+ <button class="font-size-btn" data-size="xlarge">特大</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="setting-group">
|
|
|
+ <label class="setting-label">阅读主题</label>
|
|
|
+ <div class="theme-options">
|
|
|
+ <button class="theme-btn theme-light active" data-theme="light">
|
|
|
+ 浅色
|
|
|
+ </button>
|
|
|
+ <button class="theme-btn theme-dark" data-theme="dark">
|
|
|
+ 深色
|
|
|
+ </button>
|
|
|
+ <button class="theme-btn theme-sepia" data-theme="sepia">
|
|
|
+ 护眼
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="setting-group">
|
|
|
+ <label class="setting-label">行高</label>
|
|
|
+ <div class="font-size-controls">
|
|
|
+ <button class="font-size-btn" data-lineheight="tight">紧凑</button>
|
|
|
+ <button class="font-size-btn active" data-lineheight="normal">标准</button>
|
|
|
+ <button class="font-size-btn" data-lineheight="loose">宽松</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="setting-group">
|
|
|
+ <label class="setting-label">字体</label>
|
|
|
+ <select class="font-select" id="fontSelect" style="width: 100%; padding: 10px; border-radius: var(--radius); border: 1px solid var(--border-color); background-color: var(--bg-white); color: var(--text-primary);">
|
|
|
+ <option value="system">系统默认</option>
|
|
|
+ <option value="serif">衬线字体</option>
|
|
|
+ <option value="sans-serif">无衬线字体</option>
|
|
|
+ <option value="monospace">等宽字体</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<script>
|
|
|
+ // 示例章节数据
|
|
|
+ const chapters = [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ number: "第一章",
|
|
|
+ title: "HTML基础",
|
|
|
+ content: `
|
|
|
+ <h2>什么是HTML</h2>
|
|
|
+ <p>HTML（HyperText Markup Language）是用于创建网页的标准标记语言。它描述了网页的结构，由一系列元素组成，这些元素告诉浏览器如何显示内容。</p>
|
|
|
+
|
|
|
+ <h2>HTML文档结构</h2>
|
|
|
+ <p>一个基本的HTML文档包含以下结构：</p>
|
|
|
+ <pre><code><!DOCTYPE html>
|
|
|
+<html>
|
|
|
+<head>
|
|
|
+ <title>页面标题</title>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <h1>我的第一个标题</h1>
|
|
|
+ <p>我的第一个段落</p>
|
|
|
+</body>
|
|
|
+</html></code></pre>
|
|
|
+
|
|
|
+ <h2>常用HTML标签</h2>
|
|
|
+ <p>HTML提供了多种标签来定义不同类型的内容：</p>
|
|
|
+ <ul>
|
|
|
+ <li><code><h1> - <h6></code>：标题标签</li>
|
|
|
+ <li><code><p></code>：段落标签</li>
|
|
|
+ <li><code><a></code>：链接标签</li>
|
|
|
+ <li><code><img></code>：图像标签</li>
|
|
|
+ <li><code><div></code>：分区标签</li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ <blockquote>
|
|
|
+ <p>HTML是Web的基石，所有网页都建立在HTML之上。掌握HTML是学习Web开发的第一步。</p>
|
|
|
+ </blockquote>
|
|
|
+
|
|
|
+ <h2>HTML5新特性</h2>
|
|
|
+ <p>HTML5引入了许多新元素和API，使Web开发更加强大：</p>
|
|
|
+ <ul>
|
|
|
+ <li>语义化元素：<code><header></code>, <code><footer></code>, <code><article></code>, <code><section></code></li>
|
|
|
+ <li>多媒体支持：<code><audio></code>, <code><video></code></li>
|
|
|
+ <li>Canvas绘图</li>
|
|
|
+ <li>本地存储</li>
|
|
|
+ <li>地理位置API</li>
|
|
|
+ </ul>
|
|
|
+ `
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ number: "第二章",
|
|
|
+ title: "CSS样式",
|
|
|
+ content: `
|
|
|
+ <h2>CSS简介</h2>
|
|
|
+ <p>CSS（Cascading Style Sheets）用于描述HTML元素的显示方式，它可以控制网页的布局、颜色、字体等外观特性。</p>
|
|
|
+
|
|
|
+ <h2>CSS语法</h2>
|
|
|
+ <p>CSS规则由选择器和声明块组成：</p>
|
|
|
+ <pre><code>选择器 {
|
|
|
+ 属性: 值;
|
|
|
+ 属性: 值;
|
|
|
+}</code></pre>
|
|
|
+
|
|
|
+ <h2>CSS选择器</h2>
|
|
|
+ <p>CSS选择器用于选择要样式化的HTML元素：</p>
|
|
|
+ <ul>
|
|
|
+ <li>元素选择器：<code>p { color: blue; }</code></li>
|
|
|
+ <li>类选择器：<code>.className { font-size: 16px; }</code></li>
|
|
|
+ <li>ID选择器：<code>#idName { margin: 0; }</code></li>
|
|
|
+ <li>后代选择器：<code>div p { line-height: 1.5; }</code></li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ <h2>盒模型</h2>
|
|
|
+ <p>CSS盒模型是Web布局的基础概念，每个元素都被视为一个矩形盒子，包含内容、内边距、边框和外边距。</p>
|
|
|
+
|
|
|
+ <blockquote>
|
|
|
+ <p>CSS让网页从简单的文档转变为视觉上吸引人的用户体验。</p>
|
|
|
+ </blockquote>
|
|
|
+ `
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ number: "第三章",
|
|
|
+ title: "JavaScript编程",
|
|
|
+ content: `
|
|
|
+ <h2>JavaScript概述</h2>
|
|
|
+ <p>JavaScript是一种轻量级的解释型编程语言，主要用于Web开发，可以为网页添加交互功能。</p>
|
|
|
+
|
|
|
+ <h2>变量和数据类型</h2>
|
|
|
+ <p>JavaScript中的变量使用<code>var</code>, <code>let</code>或<code>const</code>声明：</p>
|
|
|
+ <pre><code>let name = "张三";
|
|
|
+const age = 25;
|
|
|
+var isStudent = true;</code></pre>
|
|
|
+
|
|
|
+ <h2>函数</h2>
|
|
|
+ <p>函数是JavaScript中的基本构建块，用于执行特定任务：</p>
|
|
|
+ <pre><code>function greet(name) {
|
|
|
+ return "Hello, " + name + "!";
|
|
|
+}
|
|
|
+
|
|
|
+// 箭头函数
|
|
|
+const add = (a, b) => a + b;</code></pre>
|
|
|
+
|
|
|
+ <h2>DOM操作</h2>
|
|
|
+ <p>JavaScript可以通过DOM（文档对象模型）与HTML元素交互：</p>
|
|
|
+ <pre><code>// 获取元素
|
|
|
+const element = document.getElementById("myElement");
|
|
|
+
|
|
|
+// 修改内容
|
|
|
+element.innerHTML = "新内容";
|
|
|
+
|
|
|
+// 添加事件监听器
|
|
|
+element.addEventListener("click", function() {
|
|
|
+ alert("元素被点击了！");
|
|
|
+});</code></pre>
|
|
|
+ `
|
|
|
+ }
|
|
|
+ ];
|
|
|
+
|
|
|
+ let currentChapterIndex = 0;
|
|
|
+ let fontSize = 'medium';
|
|
|
+ let theme = 'light';
|
|
|
+ let lineHeight = 'normal';
|
|
|
+ let fontFamily = 'system';
|
|
|
+
|
|
|
+ // 生成章节列表
|
|
|
+ function renderChaptersList() {
|
|
|
+ const chaptersList = document.getElementById('chaptersList');
|
|
|
+ chaptersList.innerHTML = chapters.map((chapter, index) => `
|
|
|
+ <div class="chapter-item ${index === currentChapterIndex ? 'active' : ''}" data-index="${index}">
|
|
|
+ <div class="chapter-number">${chapter.number}</div>
|
|
|
+ <div class="chapter-title">${chapter.title}</div>
|
|
|
+ </div>
|
|
|
+ `).join('');
|
|
|
+ }
|
|
|
+
|
|
|
+ // 显示章节内容
|
|
|
+ function showChapter(index) {
|
|
|
+ if (index < 0 || index >= chapters.length) return;
|
|
|
+
|
|
|
+ currentChapterIndex = index;
|
|
|
+ const chapter = chapters[index];
|
|
|
+
|
|
|
+ document.getElementById('chapterNumberDisplay').textContent = chapter.number;
|
|
|
+ document.getElementById('chapterTitleDisplay').textContent = chapter.title;
|
|
|
+ document.getElementById('chapterContent').innerHTML = chapter.content;
|
|
|
+
|
|
|
+ // 更新导航按钮状态
|
|
|
+ document.getElementById('prevNavBtn').disabled = index === 0;
|
|
|
+ document.getElementById('nextNavBtn').disabled = index === chapters.length - 1;
|
|
|
+
|
|
|
+ // 更新章节列表激活状态
|
|
|
+ renderChaptersList();
|
|
|
+
|
|
|
+ // 更新阅读进度
|
|
|
+ updateProgress();
|
|
|
+ }
|
|
|
+
|
|
|
+ // 更新阅读进度
|
|
|
+ function updateProgress() {
|
|
|
+ const progress = ((currentChapterIndex + 1) / chapters.length * 100).toFixed(0);
|
|
|
+ document.getElementById('progressPercent').textContent = `${progress}%`;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 应用阅读设置
|
|
|
+ function applyReadingSettings() {
|
|
|
+ const readingArea = document.getElementById('readingArea');
|
|
|
+
|
|
|
+ // 字体大小
|
|
|
+ readingArea.className = readingArea.className.replace(/\bfont-\w+\b/g, '');
|
|
|
+ readingArea.classList.add(`font-${fontSize}`);
|
|
|
+
|
|
|
+ // 主题
|
|
|
+ document.body.className = document.body.className.replace(/\btheme-\w+\b/g, '');
|
|
|
+ document.body.classList.add(`theme-${theme}`);
|
|
|
+ if (theme === 'dark') {
|
|
|
+ document.body.classList.add('dark-mode');
|
|
|
+ } else {
|
|
|
+ document.body.classList.remove('dark-mode');
|
|
|
+ }
|
|
|
+
|
|
|
+ // 行高
|
|
|
+ readingArea.className = readingArea.className.replace(/\bline-\w+\b/g, '');
|
|
|
+ readingArea.classList.add(`line-${lineHeight}`);
|
|
|
+
|
|
|
+ // 字体
|
|
|
+ const content = document.getElementById('chapterContent');
|
|
|
+ content.style.fontFamily = getFontFamily(fontFamily);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 获取字体族
|
|
|
+ function getFontFamily(font) {
|
|
|
+ switch(font) {
|
|
|
+ case 'serif': return "'Noto Serif SC', 'Times New Roman', serif";
|
|
|
+ case 'sans-serif': return "'Segoe UI', 'Microsoft YaHei', sans-serif";
|
|
|
+ case 'monospace': return "'Courier New', monospace";
|
|
|
+ default: return "system-ui, -apple-system, sans-serif";
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 初始化页面
|
|
|
+ document.addEventListener('DOMContentLoaded', function() {
|
|
|
+ renderChaptersList();
|
|
|
+ showChapter(currentChapterIndex);
|
|
|
+ applyReadingSettings();
|
|
|
+
|
|
|
+ // 切换侧边栏
|
|
|
+ document.getElementById('toggleSidebar').addEventListener('click', function() {
|
|
|
+ const sidebar = document.getElementById('sidebar');
|
|
|
+ const mainContent = document.getElementById('mainContent');
|
|
|
+
|
|
|
+ sidebar.classList.toggle('collapsed');
|
|
|
+ mainContent.classList.toggle('expanded');
|
|
|
+ });
|
|
|
+
|
|
|
+ // 章节导航
|
|
|
+ document.getElementById('prevChapter').addEventListener('click', function() {
|
|
|
+ if (currentChapterIndex > 0) {
|
|
|
+ showChapter(currentChapterIndex - 1);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ document.getElementById('nextChapter').addEventListener('click', function() {
|
|
|
+ if (currentChapterIndex < chapters.length - 1) {
|
|
|
+ showChapter(currentChapterIndex + 1);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ document.getElementById('prevNavBtn').addEventListener('click', function() {
|
|
|
+ if (currentChapterIndex > 0) {
|
|
|
+ showChapter(currentChapterIndex - 1);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ document.getElementById('nextNavBtn').addEventListener('click', function() {
|
|
|
+ if (currentChapterIndex < chapters.length - 1) {
|
|
|
+ showChapter(currentChapterIndex + 1);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 章节列表点击事件
|
|
|
+ document.getElementById('chaptersList').addEventListener('click', function(e) {
|
|
|
+ const chapterItem = e.target.closest('.chapter-item');
|
|
|
+ if (chapterItem) {
|
|
|
+ const index = parseInt(chapterItem.getAttribute('data-index'));
|
|
|
+ showChapter(index);
|
|
|
+
|
|
|
+ // 在移动端点击章节后自动关闭侧边栏
|
|
|
+ if (window.innerWidth <= 768) {
|
|
|
+ document.getElementById('sidebar').classList.remove('open');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 设置面板
|
|
|
+ document.getElementById('settingsBtn').addEventListener('click', function() {
|
|
|
+ document.getElementById('settingsPanel').classList.add('open');
|
|
|
+ });
|
|
|
+
|
|
|
+ document.getElementById('closeSettings').addEventListener('click', function() {
|
|
|
+ document.getElementById('settingsPanel').classList.remove('open');
|
|
|
+ });
|
|
|
+
|
|
|
+ // 字体大小设置
|
|
|
+ document.querySelectorAll('.font-size-btn').forEach(btn => {
|
|
|
+ btn.addEventListener('click', function() {
|
|
|
+ document.querySelectorAll('.font-size-btn').forEach(b => b.classList.remove('active'));
|
|
|
+ this.classList.add('active');
|
|
|
+ fontSize = this.getAttribute('data-size');
|
|
|
+ applyReadingSettings();
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 主题设置
|
|
|
+ document.querySelectorAll('.theme-btn').forEach(btn => {
|
|
|
+ btn.addEventListener('click', function() {
|
|
|
+ document.querySelectorAll('.theme-btn').forEach(b => b.classList.remove('active'));
|
|
|
+ this.classList.add('active');
|
|
|
+ theme = this.getAttribute('data-theme');
|
|
|
+ applyReadingSettings();
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 行高设置
|
|
|
+ document.querySelectorAll('[data-lineheight]').forEach(btn => {
|
|
|
+ btn.addEventListener('click', function() {
|
|
|
+ document.querySelectorAll('[data-lineheight]').forEach(b => b.classList.remove('active'));
|
|
|
+ this.classList.add('active');
|
|
|
+ lineHeight = this.getAttribute('data-lineheight');
|
|
|
+ applyReadingSettings();
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 字体设置
|
|
|
+ document.getElementById('fontSelect').addEventListener('change', function() {
|
|
|
+ fontFamily = this.value;
|
|
|
+ applyReadingSettings();
|
|
|
+ });
|
|
|
+
|
|
|
+ // 书签功能
|
|
|
+ document.getElementById('bookmarkBtn').addEventListener('click', function() {
|
|
|
+ const chapter = chapters[currentChapterIndex];
|
|
|
+ alert(`已将 "${chapter.number} ${chapter.title}" 添加到书签`);
|
|
|
+ });
|
|
|
+
|
|
|
+ // 搜索功能
|
|
|
+ document.getElementById('searchBtn').addEventListener('click', function() {
|
|
|
+ alert('搜索功能即将推出');
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 添加CSS类来处理字体大小和行高
|
|
|
+ const style = document.createElement('style');
|
|
|
+ style.textContent = `
|
|
|
+ .font-small { font-size: 0.9rem; }
|
|
|
+ .font-medium { font-size: 1.1rem; }
|
|
|
+ .font-large { font-size: 1.3rem; }
|
|
|
+ .font-xlarge { font-size: 1.5rem; }
|
|
|
+
|
|
|
+ .line-tight { line-height: 1.5; }
|
|
|
+ .line-normal { line-height: 1.8; }
|
|
|
+ .line-loose { line-height: 2.2; }
|
|
|
+
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ .font-small { font-size: 0.85rem; }
|
|
|
+ .font-medium { font-size: 1rem; }
|
|
|
+ .font-large { font-size: 1.15rem; }
|
|
|
+ .font-xlarge { font-size: 1.3rem; }
|
|
|
+ }
|
|
|
+ `;
|
|
|
+ document.head.appendChild(style);
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|
1