Hugging Face's logo

Spaces:
smy503
/
anycoder-d5f93ae4
Running

App Files Community
smy503 commited on
Commit
fbd56dc
·
verified ·
1 Parent(s): ef2ea96

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +836 -19
index.html CHANGED
@@ -1,19 +1,836 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="zh-CN">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>古籍检索系统</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ box-sizing: border-box;
13
+ font-family: 'Noto Serif SC', 'SimSun', serif;
14
+ }
15
+
16
+ :root {
17
+ --primary-color: #8B4513;
18
+ --secondary-color: #D2B48C;
19
+ --accent-color: #A0522D;
20
+ --light-color: #F5F5DC;
21
+ --dark-color: #3E2723;
22
+ --text-color: #333;
23
+ --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
24
+ }
25
+
26
+ body {
27
+ background: linear-gradient(135deg, #fdf6e3 0%, #f5e8c8 100%);
28
+ color: var(--text-color);
29
+ min-height: 100vh;
30
+ position: relative;
31
+ }
32
+
33
+ body::before {
34
+ content: "";
35
+ position: fixed;
36
+ top: 0;
37
+ left: 0;
38
+ width: 100%;
39
+ height: 100%;
40
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" opacity="0.05"><path fill="%238B4513" d="M50,5 C70,5 95,25 95,50 C95,75 70,95 50,95 C30,95 5,75 5,50 C5,25 30,5 50,5 Z"/></svg>');
41
+ z-index: -1;
42
+ }
43
+
44
+ .container {
45
+ max-width: 1200px;
46
+ margin: 0 auto;
47
+ padding: 0 20px;
48
+ }
49
+
50
+ header {
51
+ background-color: var(--primary-color);
52
+ color: var(--light-color);
53
+ padding: 1.5rem 0;
54
+ box-shadow: var(--shadow);
55
+ position: relative;
56
+ overflow: hidden;
57
+ }
58
+
59
+ header::before {
60
+ content: "";
61
+ position: absolute;
62
+ top: 0;
63
+ left: 0;
64
+ width: 100%;
65
+ height: 100%;
66
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" opacity="0.1"><path fill="%23F5F5DC" d="M10,10 L90,10 L90,90 L10,90 Z M20,20 L80,20 L80,80 L20,80 Z"/></svg>');
67
+ }
68
+
69
+ .header-content {
70
+ display: flex;
71
+ justify-content: space-between;
72
+ align-items: center;
73
+ position: relative;
74
+ z-index: 1;
75
+ }
76
+
77
+ .logo {
78
+ display: flex;
79
+ align-items: center;
80
+ gap: 15px;
81
+ }
82
+
83
+ .logo i {
84
+ font-size: 2.5rem;
85
+ }
86
+
87
+ .logo h1 {
88
+ font-size: 2rem;
89
+ letter-spacing: 2px;
90
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
91
+ }
92
+
93
+ .built-with {
94
+ font-size: 0.9rem;
95
+ opacity: 0.8;
96
+ }
97
+
98
+ .built-with a {
99
+ color: var(--light-color);
100
+ text-decoration: none;
101
+ transition: opacity 0.3s;
102
+ }
103
+
104
+ .built-with a:hover {
105
+ opacity: 1;
106
+ text-decoration: underline;
107
+ }
108
+
109
+ .search-section {
110
+ padding: 3rem 0;
111
+ text-align: center;
112
+ }
113
+
114
+ .search-section h2 {
115
+ font-size: 2.2rem;
116
+ margin-bottom: 2rem;
117
+ color: var(--dark-color);
118
+ position: relative;
119
+ display: inline-block;
120
+ }
121
+
122
+ .search-section h2::after {
123
+ content: "";
124
+ position: absolute;
125
+ bottom: -10px;
126
+ left: 50%;
127
+ transform: translateX(-50%);
128
+ width: 100px;
129
+ height: 3px;
130
+ background-color: var(--accent-color);
131
+ }
132
+
133
+ .search-box {
134
+ max-width: 800px;
135
+ margin: 0 auto;
136
+ background: white;
137
+ border-radius: 12px;
138
+ padding: 2rem;
139
+ box-shadow: var(--shadow);
140
+ border: 1px solid var(--secondary-color);
141
+ }
142
+
143
+ .search-input-group {
144
+ display: flex;
145
+ margin-bottom: 1.5rem;
146
+ }
147
+
148
+ .search-input {
149
+ flex: 1;
150
+ padding: 1rem 1.5rem;
151
+ border: 2px solid var(--secondary-color);
152
+ border-radius: 8px 0 0 8px;
153
+ font-size: 1.1rem;
154
+ outline: none;
155
+ transition: all 0.3s;
156
+ }
157
+
158
+ .search-input:focus {
159
+ border-color: var(--primary-color);
160
+ box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.2);
161
+ }
162
+
163
+ .search-btn {
164
+ background-color: var(--primary-color);
165
+ color: white;
166
+ border: none;
167
+ padding: 0 1.8rem;
168
+ border-radius: 0 8px 8px 0;
169
+ cursor: pointer;
170
+ font-size: 1.1rem;
171
+ transition: all 0.3s;
172
+ }
173
+
174
+ .search-btn:hover {
175
+ background-color: var(--accent-color);
176
+ }
177
+
178
+ .filter-options {
179
+ display: grid;
180
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
181
+ gap: 1rem;
182
+ margin-bottom: 1.5rem;
183
+ }
184
+
185
+ .filter-group {
186
+ display: flex;
187
+ flex-direction: column;
188
+ }
189
+
190
+ .filter-group label {
191
+ margin-bottom: 0.5rem;
192
+ font-weight: bold;
193
+ color: var(--dark-color);
194
+ }
195
+
196
+ .filter-select {
197
+ padding: 0.8rem;
198
+ border: 1px solid var(--secondary-color);
199
+ border-radius: 6px;
200
+ background-color: white;
201
+ font-size: 1rem;
202
+ }
203
+
204
+ .advanced-options {
205
+ margin-top: 1.5rem;
206
+ text-align: left;
207
+ }
208
+
209
+ .advanced-toggle {
210
+ background: none;
211
+ border: none;
212
+ color: var(--primary-color);
213
+ font-size: 1rem;
214
+ cursor: pointer;
215
+ display: flex;
216
+ align-items: center;
217
+ gap: 0.5rem;
218
+ margin-bottom: 1rem;
219
+ }
220
+
221
+ .advanced-content {
222
+ display: grid;
223
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
224
+ gap: 1rem;
225
+ max-height: 0;
226
+ overflow: hidden;
227
+ transition: max-height 0.5s ease;
228
+ }
229
+
230
+ .advanced-content.active {
231
+ max-height: 300px;
232
+ }
233
+
234
+ .results-section {
235
+ padding: 2rem 0;
236
+ display: none;
237
+ }
238
+
239
+ .results-section.active {
240
+ display: block;
241
+ }
242
+
243
+ .results-header {
244
+ display: flex;
245
+ justify-content: space-between;
246
+ align-items: center;
247
+ margin-bottom: 1.5rem;
248
+ }
249
+
250
+ .results-count {
251
+ font-size: 1.2rem;
252
+ color: var(--dark-color);
253
+ }
254
+
255
+ .sort-options {
256
+ display: flex;
257
+ gap: 1rem;
258
+ align-items: center;
259
+ }
260
+
261
+ .sort-select {
262
+ padding: 0.5rem;
263
+ border: 1px solid var(--secondary-color);
264
+ border-radius: 4px;
265
+ }
266
+
267
+ .results-grid {
268
+ display: grid;
269
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
270
+ gap: 1.5rem;
271
+ }
272
+
273
+ .result-card {
274
+ background: white;
275
+ border-radius: 8px;
276
+ overflow: hidden;
277
+ box-shadow: var(--shadow);
278
+ transition: transform 0.3s, box-shadow 0.3s;
279
+ border: 1px solid var(--secondary-color);
280
+ }
281
+
282
+ .result-card:hover {
283
+ transform: translateY(-5px);
284
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
285
+ }
286
+
287
+ .card-header {
288
+ background-color: var(--primary-color);
289
+ color: white;
290
+ padding: 1rem;
291
+ display: flex;
292
+ justify-content: space-between;
293
+ align-items: center;
294
+ }
295
+
296
+ .card-title {
297
+ font-size: 1.2rem;
298
+ font-weight: bold;
299
+ }
300
+
301
+ .card-dynasty {
302
+ background-color: var(--accent-color);
303
+ padding: 0.3rem 0.8rem;
304
+ border-radius: 20px;
305
+ font-size: 0.9rem;
306
+ }
307
+
308
+ .card-body {
309
+ padding: 1.5rem;
310
+ }
311
+
312
+ .card-info {
313
+ margin-bottom: 1rem;
314
+ }
315
+
316
+ .card-info p {
317
+ margin-bottom: 0.5rem;
318
+ display: flex;
319
+ }
320
+
321
+ .card-info span {
322
+ font-weight: bold;
323
+ min-width: 80px;
324
+ color: var(--dark-color);
325
+ }
326
+
327
+ .card-actions {
328
+ display: flex;
329
+ gap: 0.5rem;
330
+ }
331
+
332
+ .card-btn {
333
+ flex: 1;
334
+ padding: 0.6rem;
335
+ border: 1px solid var(--secondary-color);
336
+ background: white;
337
+ border-radius: 4px;
338
+ cursor: pointer;
339
+ transition: all 0.3s;
340
+ display: flex;
341
+ align-items: center;
342
+ justify-content: center;
343
+ gap: 0.5rem;
344
+ }
345
+
346
+ .card-btn.primary {
347
+ background-color: var(--primary-color);
348
+ color: white;
349
+ border-color: var(--primary-color);
350
+ }
351
+
352
+ .card-btn:hover {
353
+ background-color: var(--secondary-color);
354
+ }
355
+
356
+ .card-btn.primary:hover {
357
+ background-color: var(--accent-color);
358
+ }
359
+
360
+ .pagination {
361
+ display: flex;
362
+ justify-content: center;
363
+ gap: 0.5rem;
364
+ margin-top: 2rem;
365
+ }
366
+
367
+ .page-btn {
368
+ width: 40px;
369
+ height: 40px;
370
+ display: flex;
371
+ align-items: center;
372
+ justify-content: center;
373
+ border: 1px solid var(--secondary-color);
374
+ background: white;
375
+ border-radius: 4px;
376
+ cursor: pointer;
377
+ transition: all 0.3s;
378
+ }
379
+
380
+ .page-btn.active {
381
+ background-color: var(--primary-color);
382
+ color: white;
383
+ border-color: var(--primary-color);
384
+ }
385
+
386
+ .page-btn:hover:not(.active) {
387
+ background-color: var(--secondary-color);
388
+ }
389
+
390
+ footer {
391
+ background-color: var(--dark-color);
392
+ color: var(--light-color);
393
+ padding: 2rem 0;
394
+ margin-top: 3rem;
395
+ text-align: center;
396
+ }
397
+
398
+ .footer-content {
399
+ display: flex;
400
+ flex-direction: column;
401
+ gap: 1rem;
402
+ }
403
+
404
+ .footer-links {
405
+ display: flex;
406
+ justify-content: center;
407
+ gap: 2rem;
408
+ flex-wrap: wrap;
409
+ }
410
+
411
+ .footer-links a {
412
+ color: var(--light-color);
413
+ text-decoration: none;
414
+ transition: opacity 0.3s;
415
+ }
416
+
417
+ .footer-links a:hover {
418
+ opacity: 0.8;
419
+ }
420
+
421
+ .copyright {
422
+ font-size: 0.9rem;
423
+ opacity: 0.7;
424
+ }
425
+
426
+ @media (max-width: 768px) {
427
+ .header-content {
428
+ flex-direction: column;
429
+ gap: 1rem;
430
+ }
431
+
432
+ .search-input-group {
433
+ flex-direction: column;
434
+ }
435
+
436
+ .search-input {
437
+ border-radius: 8px;
438
+ margin-bottom: 0.5rem;
439
+ }
440
+
441
+ .search-btn {
442
+ border-radius: 8px;
443
+ padding: 1rem;
444
+ }
445
+
446
+ .filter-options {
447
+ grid-template-columns: 1fr;
448
+ }
449
+
450
+ .results-header {
451
+ flex-direction: column;
452
+ align-items: flex-start;
453
+ gap: 1rem;
454
+ }
455
+
456
+ .results-grid {
457
+ grid-template-columns: 1fr;
458
+ }
459
+ }
460
+
461
+ .loading {
462
+ display: none;
463
+ text-align: center;
464
+ padding: 2rem;
465
+ }
466
+
467
+ .loading.active {
468
+ display: block;
469
+ }
470
+
471
+ .spinner {
472
+ border: 4px solid rgba(139, 69, 19, 0.2);
473
+ border-left: 4px solid var(--primary-color);
474
+ border-radius: 50%;
475
+ width: 40px;
476
+ height: 40px;
477
+ animation: spin 1s linear infinite;
478
+ margin: 0 auto 1rem;
479
+ }
480
+
481
+ @keyframes spin {
482
+ 0% { transform: rotate(0deg); }
483
+ 100% { transform: rotate(360deg); }
484
+ }
485
+ </style>
486
+ </head>
487
+ <body>
488
+ <header>
489
+ <div class="container">
490
+ <div class="header-content">
491
+ <div class="logo">
492
+ <i class="fas fa-scroll"></i>
493
+ <h1>古籍检索系统</h1>
494
+ </div>
495
+ <div class="built-with">
496
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
497
+ </div>
498
+ </div>
499
+ </div>
500
+ </header>
501
+
502
+ <main class="container">
503
+ <section class="search-section">
504
+ <h2>探索千年智慧</h2>
505
+ <div class="search-box">
506
+ <div class="search-input-group">
507
+ <input type="text" class="search-input" placeholder="输入书名、作者或关键词...">
508
+ <button class="search-btn"><i class="fas fa-search"></i> 检索</button>
509
+ </div>
510
+
511
+ <div class="filter-options">
512
+ <div class="filter-group">
513
+ <label for="dynasty">朝代</label>
514
+ <select id="dynasty" class="filter-select">
515
+ <option value="">全部朝代</option>
516
+ <option value="先秦">先秦</option>
517
+ <option value="秦汉">秦汉</option>
518
+ <option value="魏晋">魏晋南北朝</option>
519
+ <option value="隋唐">隋唐</option>
520
+ <option value="宋元">宋元</option>
521
+ <option value="明清">明清</option>
522
+ </select>
523
+ </div>
524
+
525
+ <div class="filter-group">
526
+ <label for="category">分类</label>
527
+ <select id="category" class="filter-select">
528
+ <option value="">全部分类</option>
529
+ <option value="经">经部</option>
530
+ <option value="史">史部</option>
531
+ <option value="子">子部</option>
532
+ <option value="集">集部</option>
533
+ </select>
534
+ </div>
535
+
536
+ <div class="filter-group">
537
+ <label for="language">语言</label>
538
+ <select id="language" class="filter-select">
539
+ <option value="">全部语言</option>
540
+ <option value="文言文">文言文</option>
541
+ <option value="白话文">白话文</option>
542
+ </select>
543
+ </div>
544
+ </div>
545
+
546
+ <div class="advanced-options">
547
+ <button class="advanced-toggle">
548
+ <i class="fas fa-caret-down"></i> 高级检索选项
549
+ </button>
550
+
551
+ <div class="advanced-content">
552
+ <div class="filter-group">
553
+ <label for="year-range">成书年代</label>
554
+ <select id="year-range" class="filter-select">
555
+ <option value="">全部年代</option>
556
+ <option value="先秦">先秦(公元前221年前)</option>
557
+ <option value="秦汉">秦汉(公元前221年-220年)</option>
558
+ <option value="魏晋">魏晋南北朝(220年-589年)</option>
559
+ <option value="隋唐">隋唐(581年-907年)</option>
560
+ <option value="宋元">宋元(960年-1368年)</option>
561
+ <option value="明清">明清(1368年-1912年)</option>
562
+ </select>
563
+ </div>
564
+
565
+ <div class="filter-group">
566
+ <label for="preservation">保存状态</label>
567
+ <select id="preservation" class="filter-select">
568
+ <option value="">全部状态</option>
569
+ <option value="完整">完整</option>
570
+ <option value="残缺">残缺</option>
571
+ <option value="辑佚">辑佚</option>
572
+ </select>
573
+ </div>
574
+ </div>
575
+ </div>
576
+ </div>
577
+ </section>
578
+
579
+ <div class="loading">
580
+ <div class="spinner"></div>
581
+ <p>正在检索古籍数据...</p>
582
+ </div>
583
+
584
+ <section class="results-section">
585
+ <div class="results-header">
586
+ <div class="results-count">找到 <span id="result-count">0</span> 条结果</div>
587
+ <div class="sort-options">
588
+ <label for="sort">排序方式:</label>
589
+ <select id="sort" class="sort-select">
590
+ <option value="relevance">相关性</option>
591
+ <option value="title">书名</option>
592
+ <option value="dynasty">朝代</option>
593
+ <option value="year">年代</option>
594
+ </select>
595
+ </div>
596
+ </div>
597
+
598
+ <div class="results-grid" id="results-container">
599
+ <!-- 结果将通过JavaScript动态生成 -->
600
+ </div>
601
+
602
+ <div class="pagination">
603
+ <button class="page-btn active">1</button>
604
+ <button class="page-btn">2</button>
605
+ <button class="page-btn">3</button>
606
+ <button class="page-btn">4</button>
607
+ <button class="page-btn">5</button>
608
+ <button class="page-btn"><i class="fas fa-chevron-right"></i></button>
609
+ </div>
610
+ </section>
611
+ </main>
612
+
613
+ <footer>
614
+ <div class="container">
615
+ <div class="footer-content">
616
+ <div class="footer-links">
617
+ <a href="#">关于我们</a>
618
+ <a href="#">使用帮助</a>
619
+ <a href="#">古籍捐赠</a>
620
+ <a href="#">联系我们</a>
621
+ </div>
622
+ <div class="copyright">
623
+ © 2023 古籍检索系统 - 传承中华文明，弘扬传统文化
624
+ </div>
625
+ </div>
626
+ </div>
627
+ </footer>
628
+
629
+ <script>
630
+ document.addEventListener('DOMContentLoaded', function() {
631
+ // 高级选项切换
632
+ const advancedToggle = document.querySelector('.advanced-toggle');
633
+ const advancedContent = document.querySelector('.advanced-content');
634
+
635
+ advancedToggle.addEventListener('click', function() {
636
+ advancedContent.classList.toggle('active');
637
+ const icon = this.querySelector('i');
638
+ if (advancedContent.classList.contains('active')) {
639
+ icon.className = 'fas fa-caret-up';
640
+ } else {
641
+ icon.className = 'fas fa-caret-down';
642
+ }
643
+ });
644
+
645
+ // 搜索功能
646
+ const searchBtn = document.querySelector('.search-btn');
647
+ const searchInput = document.querySelector('.search-input');
648
+ const loading = document.querySelector('.loading');
649
+ const resultsSection = document.querySelector('.results-section');
650
+ const resultsContainer = document.getElementById('results-container');
651
+ const resultCount = document.getElementById('result-count');
652
+
653
+ searchBtn.addEventListener('click', performSearch);
654
+ searchInput.addEventListener('keypress', function(e) {
655
+ if (e.key === 'Enter') {
656
+ performSearch();
657
+ }
658
+ });
659
+
660
+ // 模拟数据
661
+ const mockData = [
662
+ {
663
+ id: 1,
664
+ title: "论语",
665
+ author: "孔子弟子及再传弟子",
666
+ dynasty: "春秋",
667
+ year: "约公元前479年",
668
+ category: "经部",
669
+ language: "文言文",
670
+ description: "儒家经典之一，记录了孔子及其弟子的言行。"
671
+ },
672
+ {
673
+ id: 2,
674
+ title: "史记",
675
+ author: "司马迁",
676
+ dynasty: "西汉",
677
+ year: "公元前91年",
678
+ category: "史部",
679
+ language: "文言文",
680
+ description: "中国第一部纪传体通史，记载了从黄帝到汉武帝时期的历史。"
681
+ },
682
+ {
683
+ id: 3,
684
+ title: "诗经",
685
+ author: "多人",
686
+ dynasty: "西周至春秋",
687
+ year: "公元前11世纪-前6世纪",
688
+ category: "经部",
689
+ language: "文言文",
690
+ description: "中国最早的诗歌总集，收录了305篇诗歌。"
691
+ },
692
+ {
693
+ id: 4,
694
+ title: "道德经",
695
+ author: "老子",
696
+ dynasty: "春秋",
697
+ year: "约公元前6世纪",
698
+ category: "子部",
699
+ language: "文言文",
700
+ description: "道家哲学经典，阐述了"道"的哲学思想。"
701
+ },
702
+ {
703
+ id: 5,
704
+ title: "红楼梦",
705
+ author: "曹雪芹",
706
+ dynasty: "清",
707
+ year: "18世纪中叶",
708
+ category: "集部",
709
+ language: "白话文",
710
+ description: "中国古典四大名著之一，描写了贾、史、王、薛四大家族的兴衰。"
711
+ },
712
+ {
713
+ id: 6,
714
+ title: "资治通鉴",
715
+ author: "司马光",
716
+ dynasty: "北宋",
717
+ year: "1084年",
718
+ category: "史部",
719
+ language: "文言文",
720
+ description: "编年体通史，记载了从周威烈王到五代后周世宗的历史。"
721
+ }
722
+ ];
723
+
724
+ function performSearch() {
725
+ const query = searchInput.value.trim();
726
+ const dynasty = document.getElementById('dynasty').value;
727
+ const category = document.getElementById('category').value;
728
+ const language = document.getElementById('language').value;
729
+
730
+ // 显示加载状态
731
+ loading.classList.add('active');
732
+ resultsSection.classList.remove('active');
733
+
734
+ // 模拟网络延迟
735
+ setTimeout(() => {
736
+ // 过滤数据
737
+ let filteredData = mockData.filter(item => {
738
+ let match = true;
739
+
740
+ if (query) {
741
+ match = match && (
742
+ item.title.includes(query) ||
743
+ item.author.includes(query) ||
744
+ item.description.includes(query)
745
+ );
746
+ }
747
+
748
+ if (dynasty) {
749
+ match = match && item.dynasty === dynasty;
750
+ }
751
+
752
+ if (category) {
753
+ match = match && item.category.includes(category);
754
+ }
755
+
756
+ if (language) {
757
+ match = match && item.language === language;
758
+ }
759
+
760
+ return match;
761
+ });
762
+
763
+ // 更新结果数量
764
+ resultCount.textContent = filteredData.length;
765
+
766
+ // 渲染结果
767
+ renderResults(filteredData);
768
+
769
+ // 隐藏加载状态，显示结果
770
+ loading.classList.remove('active');
771
+ resultsSection.classList.add('active');
772
+ }, 1500);
773
+ }
774
+
775
+ function renderResults(data) {
776
+ resultsContainer.innerHTML = '';
777
+
778
+ if (data.length === 0) {
779
+ resultsContainer.innerHTML = `
780
+ <div style="grid-column: 1 / -1; text-align: center; padding: 3rem; color: var(--dark-color);">
781
+ <i class="fas fa-book-open" style="font-size: 3rem; margin-bottom: 1rem; opacity: 0.5;"></i>
782
+ <h3>未找到相关古籍</h3>
783
+ <p>请尝试调整搜索条件或关键词</p>
784
+ </div>
785
+ `;
786
+ return;
787
+ }
788
+
789
+ data.forEach(item => {
790
+ const resultCard = document.createElement('div');
791
+ resultCard.className = 'result-card';
792
+
793
+ resultCard.innerHTML = `
794
+ <div class="card-header">
795
+ <div class="card-title">${item.title}</div>
796
+ <div class="card-dynasty">${item.dynasty}</div>
797
+ </div>
798
+ <div class="card-body">
799
+ <div class="card-info">
800
+ <p><span>作者:</span> ${item.author}</p>
801
+ <p><span>成书年代:</span> ${item.year}</p>
802
+ <p><span>分类:</span> ${item.category}</p>
803
+ <p><span>语言:</span> ${item.language}</p>
804
+ </div>
805
+ <p style="margin-bottom: 1rem;">${item.description}</p>
806
+ <div class="card-actions">
807
+ <button class="card-btn primary"><i class="fas fa-book-open"></i> 阅读</button>
808
+ <button class="card-btn"><i class="fas fa-download"></i> 下载</button>
809
+ </div>
810
+ </div>
811
+ `;
812
+
813
+ resultsContainer.appendChild(resultCard);
814
+ });
815
+ }
816
+
817
+ // 分页功能
818
+ const pageBtns = document.querySelectorAll('.page-btn');
819
+
820
+ pageBtns.forEach(btn => {
821
+ btn.addEventListener('click', function() {
822
+ pageBtns.forEach(b => b.classList.remove('active'));
823
+ this.classList.add('active');
824
+ });
825
+ });
826
+
827
+ // 初始加载时显示一些结果
828
+ setTimeout(() => {
829
+ resultCount.textContent = mockData.length;
830
+ renderResults(mockData);
831
+ resultsSection.classList.add('active');
832
+ }, 500);
833
+ });
834
+ </script>
835
+ </body>
836
+ </html>