Spaces:
Running
Running
| <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> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Noto Serif SC', 'SimSun', serif; | |
| } | |
| :root { | |
| --primary-color: #8B4513; | |
| --secondary-color: #D2B48C; | |
| --accent-color: #A0522D; | |
| --light-color: #F5F5DC; | |
| --dark-color: #3E2723; | |
| --text-color: #333; | |
| --shadow: 0 4px 12px rgba(0, 0, 0, 0.1); | |
| } | |
| body { | |
| background: linear-gradient(135deg, #fdf6e3 0%, #f5e8c8 100%); | |
| color: var(--text-color); | |
| min-height: 100vh; | |
| position: relative; | |
| } | |
| body::before { | |
| content: ""; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| 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>'); | |
| z-index: -1; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| header { | |
| background-color: var(--primary-color); | |
| color: var(--light-color); | |
| padding: 1.5rem 0; | |
| box-shadow: var(--shadow); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| header::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| 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>'); | |
| } | |
| .header-content { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| } | |
| .logo i { | |
| font-size: 2.5rem; | |
| } | |
| .logo h1 { | |
| font-size: 2rem; | |
| letter-spacing: 2px; | |
| text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); | |
| } | |
| .built-with { | |
| font-size: 0.9rem; | |
| opacity: 0.8; | |
| } | |
| .built-with a { | |
| color: var(--light-color); | |
| text-decoration: none; | |
| transition: opacity 0.3s; | |
| } | |
| .built-with a:hover { | |
| opacity: 1; | |
| text-decoration: underline; | |
| } | |
| .search-section { | |
| padding: 3rem 0; | |
| text-align: center; | |
| } | |
| .search-section h2 { | |
| font-size: 2.2rem; | |
| margin-bottom: 2rem; | |
| color: var(--dark-color); | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .search-section h2::after { | |
| content: ""; | |
| position: absolute; | |
| bottom: -10px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 100px; | |
| height: 3px; | |
| background-color: var(--accent-color); | |
| } | |
| .search-box { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| background: white; | |
| border-radius: 12px; | |
| padding: 2rem; | |
| box-shadow: var(--shadow); | |
| border: 1px solid var(--secondary-color); | |
| } | |
| .search-input-group { | |
| display: flex; | |
| margin-bottom: 1.5rem; | |
| } | |
| .search-input { | |
| flex: 1; | |
| padding: 1rem 1.5rem; | |
| border: 2px solid var(--secondary-color); | |
| border-radius: 8px 0 0 8px; | |
| font-size: 1.1rem; | |
| outline: none; | |
| transition: all 0.3s; | |
| } | |
| .search-input:focus { | |
| border-color: var(--primary-color); | |
| box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.2); | |
| } | |
| .search-btn { | |
| background-color: var(--primary-color); | |
| color: white; | |
| border: none; | |
| padding: 0 1.8rem; | |
| border-radius: 0 8px 8px 0; | |
| cursor: pointer; | |
| font-size: 1.1rem; | |
| transition: all 0.3s; | |
| } | |
| .search-btn:hover { | |
| background-color: var(--accent-color); | |
| } | |
| .filter-options { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 1rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .filter-group { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .filter-group label { | |
| margin-bottom: 0.5rem; | |
| font-weight: bold; | |
| color: var(--dark-color); | |
| } | |
| .filter-select { | |
| padding: 0.8rem; | |
| border: 1px solid var(--secondary-color); | |
| border-radius: 6px; | |
| background-color: white; | |
| font-size: 1rem; | |
| } | |
| .advanced-options { | |
| margin-top: 1.5rem; | |
| text-align: left; | |
| } | |
| .advanced-toggle { | |
| background: none; | |
| border: none; | |
| color: var(--primary-color); | |
| font-size: 1rem; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .advanced-content { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 1rem; | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.5s ease; | |
| } | |
| .advanced-content.active { | |
| max-height: 300px; | |
| } | |
| .results-section { | |
| padding: 2rem 0; | |
| display: none; | |
| } | |
| .results-section.active { | |
| display: block; | |
| } | |
| .results-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1.5rem; | |
| } | |
| .results-count { | |
| font-size: 1.2rem; | |
| color: var(--dark-color); | |
| } | |
| .sort-options { | |
| display: flex; | |
| gap: 1rem; | |
| align-items: center; | |
| } | |
| .sort-select { | |
| padding: 0.5rem; | |
| border: 1px solid var(--secondary-color); | |
| border-radius: 4px; | |
| } | |
| .results-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| .result-card { | |
| background: white; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| box-shadow: var(--shadow); | |
| transition: transform 0.3s, box-shadow 0.3s; | |
| border: 1px solid var(--secondary-color); | |
| } | |
| .result-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); | |
| } | |
| .card-header { | |
| background-color: var(--primary-color); | |
| color: white; | |
| padding: 1rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .card-title { | |
| font-size: 1.2rem; | |
| font-weight: bold; | |
| } | |
| .card-dynasty { | |
| background-color: var(--accent-color); | |
| padding: 0.3rem 0.8rem; | |
| border-radius: 20px; | |
| font-size: 0.9rem; | |
| } | |
| .card-body { | |
| padding: 1.5rem; | |
| } | |
| .card-info { | |
| margin-bottom: 1rem; | |
| } | |
| .card-info p { | |
| margin-bottom: 0.5rem; | |
| display: flex; | |
| } | |
| .card-info span { | |
| font-weight: bold; | |
| min-width: 80px; | |
| color: var(--dark-color); | |
| } | |
| .card-actions { | |
| display: flex; | |
| gap: 0.5rem; | |
| } | |
| .card-btn { | |
| flex: 1; | |
| padding: 0.6rem; | |
| border: 1px solid var(--secondary-color); | |
| background: white; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.5rem; | |
| } | |
| .card-btn.primary { | |
| background-color: var(--primary-color); | |
| color: white; | |
| border-color: var(--primary-color); | |
| } | |
| .card-btn:hover { | |
| background-color: var(--secondary-color); | |
| } | |
| .card-btn.primary:hover { | |
| background-color: var(--accent-color); | |
| } | |
| .pagination { | |
| display: flex; | |
| justify-content: center; | |
| gap: 0.5rem; | |
| margin-top: 2rem; | |
| } | |
| .page-btn { | |
| width: 40px; | |
| height: 40px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border: 1px solid var(--secondary-color); | |
| background: white; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .page-btn.active { | |
| background-color: var(--primary-color); | |
| color: white; | |
| border-color: var(--primary-color); | |
| } | |
| .page-btn:hover:not(.active) { | |
| background-color: var(--secondary-color); | |
| } | |
| footer { | |
| background-color: var(--dark-color); | |
| color: var(--light-color); | |
| padding: 2rem 0; | |
| margin-top: 3rem; | |
| text-align: center; | |
| } | |
| .footer-content { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .footer-links { | |
| display: flex; | |
| justify-content: center; | |
| gap: 2rem; | |
| flex-wrap: wrap; | |
| } | |
| .footer-links a { | |
| color: var(--light-color); | |
| text-decoration: none; | |
| transition: opacity 0.3s; | |
| } | |
| .footer-links a:hover { | |
| opacity: 0.8; | |
| } | |
| .copyright { | |
| font-size: 0.9rem; | |
| opacity: 0.7; | |
| } | |
| @media (max-width: 768px) { | |
| .header-content { | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .search-input-group { | |
| flex-direction: column; | |
| } | |
| .search-input { | |
| border-radius: 8px; | |
| margin-bottom: 0.5rem; | |
| } | |
| .search-btn { | |
| border-radius: 8px; | |
| padding: 1rem; | |
| } | |
| .filter-options { | |
| grid-template-columns: 1fr; | |
| } | |
| .results-header { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 1rem; | |
| } | |
| .results-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| .loading { | |
| display: none; | |
| text-align: center; | |
| padding: 2rem; | |
| } | |
| .loading.active { | |
| display: block; | |
| } | |
| .spinner { | |
| border: 4px solid rgba(139, 69, 19, 0.2); | |
| border-left: 4px solid var(--primary-color); | |
| border-radius: 50%; | |
| width: 40px; | |
| height: 40px; | |
| animation: spin 1s linear infinite; | |
| margin: 0 auto 1rem; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="container"> | |
| <div class="header-content"> | |
| <div class="logo"> | |
| <i class="fas fa-scroll"></i> | |
| <h1>古籍检索系统</h1> | |
| </div> | |
| <div class="built-with"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="container"> | |
| <section class="search-section"> | |
| <h2>探索千年智慧</h2> | |
| <div class="search-box"> | |
| <div class="search-input-group"> | |
| <input type="text" class="search-input" placeholder="输入书名、作者或关键词..."> | |
| <button class="search-btn"><i class="fas fa-search"></i> 检索</button> | |
| </div> | |
| <div class="filter-options"> | |
| <div class="filter-group"> | |
| <label for="dynasty">朝代</label> | |
| <select id="dynasty" class="filter-select"> | |
| <option value="">全部朝代</option> | |
| <option value="先秦">先秦</option> | |
| <option value="秦汉">秦汉</option> | |
| <option value="魏晋">魏晋南北朝</option> | |
| <option value="隋唐">隋唐</option> | |
| <option value="宋元">宋元</option> | |
| <option value="明清">明清</option> | |
| </select> | |
| </div> | |
| <div class="filter-group"> | |
| <label for="category">分类</label> | |
| <select id="category" class="filter-select"> | |
| <option value="">全部分类</option> | |
| <option value="经">经部</option> | |
| <option value="史">史部</option> | |
| <option value="子">子部</option> | |
| <option value="集">集部</option> | |
| </select> | |
| </div> | |
| <div class="filter-group"> | |
| <label for="language">语言</label> | |
| <select id="language" class="filter-select"> | |
| <option value="">全部语言</option> | |
| <option value="文言文">文言文</option> | |
| <option value="白话文">白话文</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="advanced-options"> | |
| <button class="advanced-toggle"> | |
| <i class="fas fa-caret-down"></i> 高级检索选项 | |
| </button> | |
| <div class="advanced-content"> | |
| <div class="filter-group"> | |
| <label for="year-range">成书年代</label> | |
| <select id="year-range" class="filter-select"> | |
| <option value="">全部年代</option> | |
| <option value="先秦">先秦(公元前221年前)</option> | |
| <option value="秦汉">秦汉(公元前221年-220年)</option> | |
| <option value="魏晋">魏晋南北朝(220年-589年)</option> | |
| <option value="隋唐">隋唐(581年-907年)</option> | |
| <option value="宋元">宋元(960年-1368年)</option> | |
| <option value="明清">明清(1368年-1912年)</option> | |
| </select> | |
| </div> | |
| <div class="filter-group"> | |
| <label for="preservation">保存状态</label> | |
| <select id="preservation" class="filter-select"> | |
| <option value="">全部状态</option> | |
| <option value="完整">完整</option> | |
| <option value="残缺">残缺</option> | |
| <option value="辑佚">辑佚</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="loading"> | |
| <div class="spinner"></div> | |
| <p>正在检索古籍数据...</p> | |
| </div> | |
| <section class="results-section"> | |
| <div class="results-header"> | |
| <div class="results-count">找到 <span id="result-count">0</span> 条结果</div> | |
| <div class="sort-options"> | |
| <label for="sort">排序方式:</label> | |
| <select id="sort" class="sort-select"> | |
| <option value="relevance">相关性</option> | |
| <option value="title">书名</option> | |
| <option value="dynasty">朝代</option> | |
| <option value="year">年代</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="results-grid" id="results-container"> | |
| <!-- 结果将通过JavaScript动态生成 --> | |
| </div> | |
| <div class="pagination"> | |
| <button class="page-btn active">1</button> | |
| <button class="page-btn">2</button> | |
| <button class="page-btn">3</button> | |
| <button class="page-btn">4</button> | |
| <button class="page-btn">5</button> | |
| <button class="page-btn"><i class="fas fa-chevron-right"></i></button> | |
| </div> | |
| </section> | |
| </main> | |
| <footer> | |
| <div class="container"> | |
| <div class="footer-content"> | |
| <div class="footer-links"> | |
| <a href="#">关于我们</a> | |
| <a href="#">使用帮助</a> | |
| <a href="#">古籍捐赠</a> | |
| <a href="#">联系我们</a> | |
| </div> | |
| <div class="copyright"> | |
| © 2023 古籍检索系统 - 传承中华文明，弘扬传统文化 | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // 高级选项切换 | |
| const advancedToggle = document.querySelector('.advanced-toggle'); | |
| const advancedContent = document.querySelector('.advanced-content'); | |
| advancedToggle.addEventListener('click', function() { | |
| advancedContent.classList.toggle('active'); | |
| const icon = this.querySelector('i'); | |
| if (advancedContent.classList.contains('active')) { | |
| icon.className = 'fas fa-caret-up'; | |
| } else { | |
| icon.className = 'fas fa-caret-down'; | |
| } | |
| }); | |
| // 搜索功能 | |
| const searchBtn = document.querySelector('.search-btn'); | |
| const searchInput = document.querySelector('.search-input'); | |
| const loading = document.querySelector('.loading'); | |
| const resultsSection = document.querySelector('.results-section'); | |
| const resultsContainer = document.getElementById('results-container'); | |
| const resultCount = document.getElementById('result-count'); | |
| searchBtn.addEventListener('click', performSearch); | |
| searchInput.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| performSearch(); | |
| } | |
| }); | |
| // 模拟数据 | |
| const mockData = [ | |
| { | |
| id: 1, | |
| title: "论语", | |
| author: "孔子弟子及再传弟子", | |
| dynasty: "春秋", | |
| year: "约公元前479年", | |
| category: "经部", | |
| language: "文言文", | |
| description: "儒家经典之一，记录了孔子及其弟子的言行。" | |
| }, | |
| { | |
| id: 2, | |
| title: "史记", | |
| author: "司马迁", | |
| dynasty: "西汉", | |
| year: "公元前91年", | |
| category: "史部", | |
| language: "文言文", | |
| description: "中国第一部纪传体通史，记载了从黄帝到汉武帝时期的历史。" | |
| }, | |
| { | |
| id: 3, | |
| title: "诗经", | |
| author: "多人", | |
| dynasty: "西周至春秋", | |
| year: "公元前11世纪-前6世纪", | |
| category: "经部", | |
| language: "文言文", | |
| description: "中国最早的诗歌总集，收录了305篇诗歌。" | |
| }, | |
| { | |
| id: 4, | |
| title: "道德经", | |
| author: "老子", | |
| dynasty: "春秋", | |
| year: "约公元前6世纪", | |
| category: "子部", | |
| language: "文言文", | |
| description: "道家哲学经典，阐述了"道"的哲学思想。" | |
| }, | |
| { | |
| id: 5, | |
| title: "红楼梦", | |
| author: "曹雪芹", | |
| dynasty: "清", | |
| year: "18世纪中叶", | |
| category: "集部", | |
| language: "白话文", | |
| description: "中国古典四大名著之一，描写了贾、史、王、薛四大家族的兴衰。" | |
| }, | |
| { | |
| id: 6, | |
| title: "资治通鉴", | |
| author: "司马光", | |
| dynasty: "北宋", | |
| year: "1084年", | |
| category: "史部", | |
| language: "文言文", | |
| description: "编年体通史，记载了从周威烈王到五代后周世宗的历史。" | |
| } | |
| ]; | |
| function performSearch() { | |
| const query = searchInput.value.trim(); | |
| const dynasty = document.getElementById('dynasty').value; | |
| const category = document.getElementById('category').value; | |
| const language = document.getElementById('language').value; | |
| // 显示加载状态 | |
| loading.classList.add('active'); | |
| resultsSection.classList.remove('active'); | |
| // 模拟网络延迟 | |
| setTimeout(() => { | |
| // 过滤数据 | |
| let filteredData = mockData.filter(item => { | |
| let match = true; | |
| if (query) { | |
| match = match && ( | |
| item.title.includes(query) || | |
| item.author.includes(query) || | |
| item.description.includes(query) | |
| ); | |
| } | |
| if (dynasty) { | |
| match = match && item.dynasty === dynasty; | |
| } | |
| if (category) { | |
| match = match && item.category.includes(category); | |
| } | |
| if (language) { | |
| match = match && item.language === language; | |
| } | |
| return match; | |
| }); | |
| // 更新结果数量 | |
| resultCount.textContent = filteredData.length; | |
| // 渲染结果 | |
| renderResults(filteredData); | |
| // 隐藏加载状态，显示结果 | |
| loading.classList.remove('active'); | |
| resultsSection.classList.add('active'); | |
| }, 1500); | |
| } | |
| function renderResults(data) { | |
| resultsContainer.innerHTML = ''; | |
| if (data.length === 0) { | |
| resultsContainer.innerHTML = ` | |
| <div style="grid-column: 1 / -1; text-align: center; padding: 3rem; color: var(--dark-color);"> | |
| <i class="fas fa-book-open" style="font-size: 3rem; margin-bottom: 1rem; opacity: 0.5;"></i> | |
| <h3>未找到相关古籍</h3> | |
| <p>请尝试调整搜索条件或关键词</p> | |
| </div> | |
| `; | |
| return; | |
| } | |
| data.forEach(item => { | |
| const resultCard = document.createElement('div'); | |
| resultCard.className = 'result-card'; | |
| resultCard.innerHTML = ` | |
| <div class="card-header"> | |
| <div class="card-title">${item.title}</div> | |
| <div class="card-dynasty">${item.dynasty}</div> | |
| </div> | |
| <div class="card-body"> | |
| <div class="card-info"> | |
| <p><span>作者:</span> ${item.author}</p> | |
| <p><span>成书年代:</span> ${item.year}</p> | |
| <p><span>分类:</span> ${item.category}</p> | |
| <p><span>语言:</span> ${item.language}</p> | |
| </div> | |
| <p style="margin-bottom: 1rem;">${item.description}</p> | |
| <div class="card-actions"> | |
| <button class="card-btn primary"><i class="fas fa-book-open"></i> 阅读</button> | |
| <button class="card-btn"><i class="fas fa-download"></i> 下载</button> | |
| </div> | |
| </div> | |
| `; | |
| resultsContainer.appendChild(resultCard); | |
| }); | |
| } | |
| // 分页功能 | |
| const pageBtns = document.querySelectorAll('.page-btn'); | |
| pageBtns.forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| pageBtns.forEach(b => b.classList.remove('active')); | |
| this.classList.add('active'); | |
| }); | |
| }); | |
| // 初始加载时显示一些结果 | |
| setTimeout(() => { | |
| resultCount.textContent = mockData.length; | |
| renderResults(mockData); | |
| resultsSection.classList.add('active'); | |
| }, 500); | |
| }); | |
| </script> | |
| </body> | |
| </html> |