-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathadvanced-search.html
146 lines (134 loc) · 7.21 KB
/
advanced-search.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
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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 href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand text-primary" href="index.html">
<i class="fas fa-arrow-left me-2"></i>返回书库
</a>
</div>
</nav>
<div class="container mt-4">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">高级搜索</h5>
</div>
<div class="card-body">
<form id="advanced-search-form">
<div class="row mb-3">
<div class="col-md-6">
<label class="form-label">标题</label>
<input type="text" class="form-control" name="title" placeholder="输入书籍标题">
</div>
<div class="col-md-6">
<label class="form-label">作者</label>
<input type="text" class="form-control" name="author" placeholder="输入作者名">
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<label class="form-label">ISBN</label>
<input type="text" class="form-control" name="isbn" placeholder="输入ISBN">
</div>
<div class="col-md-6">
<label class="form-label">出版社</label>
<input type="text" class="form-control" name="publisher" placeholder="输入出版社">
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<label class="form-label">分类</label>
<select class="form-select" name="category" id="category-select">
<option value="">选择分类</option>
</select>
</div>
<div class="col-md-6">
<label class="form-label">语言</label>
<select class="form-select" name="language">
<option value="">选择语言</option>
<option value="简体中文">简体中文</option>
<option value="繁体中文">繁体中文</option>
<option value="英语">英语</option>
</select>
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<label class="form-label">出版年份</label>
<div class="row">
<div class="col">
<input type="number" class="form-control" name="yearFrom" placeholder="从">
</div>
<div class="col-auto">
<span class="form-text">至</span>
</div>
<div class="col">
<input type="number" class="form-control" name="yearTo" placeholder="至">
</div>
</div>
</div>
<div class="col-md-6">
<label class="form-label">文件格式</label>
<select class="form-select" name="format">
<option value="">选择格式</option>
<option value="PDF">PDF</option>
<option value="EPUB">EPUB</option>
<option value="MOBI">MOBI</option>
</select>
</div>
</div>
<div class="mb-3">
<label class="form-label">标签</label>
<div id="tags-container" class="border rounded p-2">
<!-- 标签将通过JavaScript动态加载 -->
</div>
</div>
<div class="text-end">
<button type="reset" class="btn btn-outline-secondary me-2">重置</button>
<button type="submit" class="btn btn-primary">搜索</button>
</div>
</form>
</div>
</div>
<!-- 搜索结果 -->
<div class="mt-4">
<h5 class="mb-3">搜索结果 <small class="text-muted" id="result-count"></small></h5>
<div id="search-results" class="row row-cols-1 row-cols-md-2 g-4">
<!-- 搜索结果将通过JavaScript动态加载 -->
</div>
</div>
</div>
<!-- 搜索历史 -->
<div class="col-md-4">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="card-title mb-0">搜索历史</h5>
<button class="btn btn-sm btn-outline-danger" id="clear-history">
<i class="fas fa-trash-alt"></i>
</button>
</div>
<div class="card-body">
<div id="search-history">
<!-- 搜索历史将通过JavaScript动态加载 -->
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="js/storage.js"></script>
<script src="js/advanced-search.js"></script>
</body>
</html>