-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
133 lines (122 loc) · 6.23 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="zh-CN" data-theme="light" scroll>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="theme-color" content="#ffffff">
<meta name="description" content="个人电子书库 - 在线管理和阅读您的电子书">
<link rel="preconnect" href="https://cdn.jsdelivr.net">
<link rel="preconnect" href="https://cdnjs.cloudflare.com">
<title>ShareLand电子书</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/theme.css">
<link rel="stylesheet" href="css/style.css">
<style>
.tag-cloud .tag-item {
display: inline-block;
margin: 0.25rem;
color: #0d6efd;
text-decoration: none;
}
.tag-cloud .tag-item:hover {
text-decoration: underline;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/chart.js" defer></script>
</head>
<body>
<div class="app-container">
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light" role="navigation" aria-label="主导航">
<div class="container-fluid px-4">
<a class="navbar-brand text-primary" href="#" aria-label="ShareLand电子书">
<i class="fas fa-book-reader me-2" aria-hidden="true"></i>ShareLand电子书
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-expanded="false" aria-controls="navbarNav" aria-label="切换导航">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<form class="d-flex search-form" role="search">
<div class="input-group">
<div class="flex-grow-1 d-flex">
<input class="form-control" type="search" placeholder="搜索书籍..." aria-label="搜索书籍">
<button class="btn btn-outline-primary" type="submit" aria-label="搜索">
<i class="fas fa-search" aria-hidden="true"></i>
</button>
<a href="advanced-search.html" class="btn btn-outline-secondary" aria-label="高级搜索">
<i class="fas fa-sliders-h" aria-hidden="true"></i>
</a>
<div class="dropdown">
<button class="btn btn-outline-secondary dropdown-toggle" type="button"
id="sortDropdown" data-bs-toggle="dropdown" aria-expanded="false">
<span class="full-text">按标题排序</span>
<span class="short-text">排序</span>
</button>
<ul class="dropdown-menu" aria-labelledby="sortDropdown">
<li><a class="dropdown-item" href="#" data-sort="title">按标题排序</a></li>
<li><a class="dropdown-item" href="#" data-sort="author">按作者排序</a></li>
<li><a class="dropdown-item" href="#" data-sort="date">按日期排序</a></li>
</ul>
</div>
<button class="btn btn-outline-secondary" id="theme-toggle" aria-label="切换主题"
title="切换主题">
<i class="fas fa-moon" aria-hidden="true"></i>
<span class="visually-hidden">切换主题</span>
</button>
</div>
</div>
</form>
</div>
</div>
</nav>
<!-- 主要内容区域 -->
<div class="main-content">
<!-- 侧边栏 -->
<div class="sidebar">
<div class="categories-section mb-4">
<div class="categories-wrapper">
<div id="categories-list" class="nav flex-column">
<!-- 分类通过JavaScript动态加载 -->
</div>
</div>
</div>
<div class="tags-section mb-4">
<div class="tag-cloud p-2" id="tag-cloud">
<!-- 标签将通过JavaScript动态加载，不显示数量 -->
</div>
</div>
</div>
<!-- 主要内容区 -->
<div class="container-fluid mt-4">
<div id="books-container">
<!-- 书籍卡片将通过JavaScript动态加载 -->
</div>
<div id="loading-more" class="text-center py-4 d-none">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">加载中...</span>
</div>
</div>
<!-- 主内容区添加阅读组件 -->
<div class="reader-container" id="reader">
<div class="reader-content"></div>
</div>
</div>
</div>
</div>
<div class="sidebar-overlay"></div>
<button class="sidebar-toggle d-md-none">
<i class="fas fa-bars"></i>
</button>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="js/main.js" type="module"></script>
<!-- 书籍详情模态框 -->
<div class="modal fade" id="bookDetailsModal">
<div class="modal-dialog modal-lg">
<!-- 模态框内容将通过JavaScript动态加载 -->
</div>
</div>
</body>
</html>