This commit is contained in:
2026-03-21 19:30:13 +08:00
parent 7520b7e2a0
commit 557e25d187
100 changed files with 16990 additions and 18914 deletions

View File

@@ -118,7 +118,7 @@
position: relative; animation: slideIn 0.3s ease;
}
.modal-header { font-size: 20px; font-weight: bold; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; }
.modal-close { cursor: pointer; font-size: 24px; color: #999; }
.modal-close { cursor: pointer; font-size: 24px; color: #999; background: none; border: none; }
.modal-close:hover { color: #333; }
@keyframes slideIn { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@@ -153,157 +153,159 @@
<body>
<!-- Modals HTML Structure -->
<div id="modal-confirm" class="modal-overlay">
<div class="modal-content" style="width: 400px; padding: 20px;">
<div class="modal-header">
<div id="modal-confirm" class="modal-overlay" role="presentation" aria-hidden="true">
<div class="modal-content" style="width: 400px; padding: 20px;" role="dialog" aria-modal="true" aria-labelledby="confirm-modal-title">
<div class="modal-header" id="confirm-modal-title">
<span>Confirmation</span>
<span class="modal-close" onclick="closeModal('modal-confirm')">&times;</span>
<button class="modal-close" onclick="closeModal('modal-confirm')" aria-label="Close confirmation dialog">&times;</button>
</div>
<div style="margin-bottom: 20px;" id="confirm-message">
Are you sure you want to perform this action?
</div>
<div style="text-align:right;">
<button onclick="closeModal('modal-confirm')" style="padding:8px 20px; cursor:pointer;">Cancel</button>
<button id="confirm-btn-action" style="background:var(--primary); color:white; border:none; padding:8px 20px; cursor:pointer; border-radius:4px; margin-left: 10px;">Confirm</button>
<button onclick="closeModal('modal-confirm')" style="padding:8px 20px; cursor:pointer;" aria-label="Cancel">Cancel</button>
<button id="confirm-btn-action" style="background:var(--primary); color:white; border:none; padding:8px 20px; cursor:pointer; border-radius:4px; margin-left: 10px;" aria-label="Confirm action">Confirm</button>
</div>
</div>
</div>
<div id="modal-alert" class="modal-overlay">
<div class="modal-content" style="width: 400px; padding: 20px;">
<div class="modal-header">
<div id="modal-alert" class="modal-overlay" role="presentation" aria-hidden="true">
<div class="modal-content" style="width: 400px; padding: 20px;" role="dialog" aria-modal="true" aria-labelledby="alert-modal-title">
<div class="modal-header" id="alert-modal-title">
<span>Notice</span>
<span class="modal-close" onclick="closeModal('modal-alert')">&times;</span>
<button class="modal-close" onclick="closeModal('modal-alert')" aria-label="Close notice dialog">&times;</button>
</div>
<div style="margin-bottom: 20px;" id="alert-message">
Information
</div>
<div style="text-align:right;">
<button onclick="closeModal('modal-alert')" style="background:var(--primary); color:white; border:none; padding:8px 20px; cursor:pointer; border-radius:4px;">Got it</button>
<button onclick="closeModal('modal-alert')" style="background:var(--primary); color:white; border:none; padding:8px 20px; cursor:pointer; border-radius:4px;" aria-label="Close notice">Got it</button>
</div>
</div>
</div>
<div id="modal-citation" class="modal-overlay">
<div class="modal-content">
<div class="modal-header">
<div id="modal-citation" class="modal-overlay" role="presentation" aria-hidden="true">
<div class="modal-content" role="dialog" aria-modal="true" aria-labelledby="citation-modal-title">
<div class="modal-header" id="citation-modal-title">
<span>Generate Citation</span>
<span class="modal-close" onclick="closeModal('modal-citation')">&times;</span>
<button class="modal-close" onclick="closeModal('modal-citation')" aria-label="Close citation dialog">&times;</button>
</div>
<div id="citation-body">
<!-- Dynamic Content -->
</div>
<div style="margin-top:20px; text-align:right;">
<button onclick="closeModal('modal-citation')" style="padding:8px 20px; cursor:pointer;">Close</button>
<button onclick="closeModal('modal-citation')" style="padding:8px 20px; cursor:pointer;" aria-label="Close">Close</button>
</div>
</div>
</div>
<div id="modal-advanced-search" class="modal-overlay">
<div class="modal-content">
<div class="modal-header">
<div id="modal-advanced-search" class="modal-overlay" role="presentation" aria-hidden="true">
<div class="modal-content" role="dialog" aria-modal="true" aria-labelledby="adv-search-title">
<div class="modal-header" id="adv-search-title">
<span>Advanced Search</span>
<span class="modal-close" onclick="closeModal('modal-advanced-search')">&times;</span>
<button class="modal-close" onclick="closeModal('modal-advanced-search')" aria-label="Close advanced search dialog">&times;</button>
</div>
<div class="adv-search-row">
<label>Keywords</label>
<input type="text" id="adv-kw" placeholder="Enter keywords...">
<select style="max-width:100px;">
<fieldset class="adv-search-row">
<legend style="display:none;">Advanced search filters</legend>
<label for="adv-kw">Keywords</label>
<input type="text" id="adv-kw" placeholder="Enter keywords..." aria-label="Search keywords">
<label for="adv-logic" style="max-width:100px;">Logic</label>
<select id="adv-logic" style="max-width:100px;" aria-label="Keyword logic operator">
<option>AND</option>
<option>OR</option>
<option>NOT</option>
</select>
</div>
<div class="adv-search-row">
<label>Author</label>
<input type="text" id="adv-author" placeholder="Enter author name...">
</div>
<div class="adv-search-row">
<label>Publication</label>
<input type="text" id="adv-pub" placeholder="Journal or Conference name...">
</div>
<div class="adv-search-row">
<label>Year Range</label>
<input type="number" id="adv-year-start" placeholder="1990" style="max-width:80px;">
</fieldset>
<fieldset class="adv-search-row">
<legend style="display:none;">Author filter</legend>
<label for="adv-author">Author</label>
<input type="text" id="adv-author" placeholder="Enter author name..." aria-label="Author name">
</fieldset>
<fieldset class="adv-search-row">
<legend style="display:none;">Publication filter</legend>
<label for="adv-pub">Publication</label>
<input type="text" id="adv-pub" placeholder="Journal or Conference name..." aria-label="Publication name">
</fieldset>
<fieldset class="adv-search-row">
<legend style="display:none;">Year range filter</legend>
<label for="adv-year-start">Year Range</label>
<input type="number" id="adv-year-start" placeholder="1990" style="max-width:80px;" aria-label="Start year">
<span>-</span>
<input type="number" id="adv-year-end" placeholder="2025" style="max-width:80px;">
</div>
<input type="number" id="adv-year-end" placeholder="2025" style="max-width:80px;" aria-label="End year">
</fieldset>
<div style="margin-top:20px; text-align:right;">
<button onclick="handleAdvancedSearch()" style="background:var(--primary); color:white; border:none; padding:10px 25px; cursor:pointer; border-radius:4px;">Search</button>
<button onclick="handleAdvancedSearch()" style="background:var(--primary); color:white; border:none; padding:10px 25px; cursor:pointer; border-radius:4px;" aria-label="Execute advanced search">Search</button>
</div>
</div>
</div>
<div id="modal-myshelf" class="modal-overlay">
<div class="modal-content" style="width:800px;">
<div class="modal-header">
<div id="modal-myshelf" class="modal-overlay" role="presentation" aria-hidden="true">
<div class="modal-content" style="width:800px;" role="dialog" aria-modal="true" aria-labelledby="shelf-modal-title">
<div class="modal-header" id="shelf-modal-title">
<span>My Shelf</span>
<span class="modal-close" onclick="closeModal('modal-myshelf')">&times;</span>
<button class="modal-close" onclick="closeModal('modal-myshelf')" aria-label="Close my shelf dialog">&times;</button>
</div>
<div id="shelf-body" class="shelf-grid">
<div id="shelf-body" class="shelf-grid" role="region" aria-label="Saved resources">
<!-- Dynamic Content -->
</div>
<div style="margin-top:20px; text-align:right;">
<p style="float:left; font-size:12px; color:#666; margin-top:10px;">* Shelf data is saved in current session only</p>
<button onclick="closeModal('modal-myshelf')" style="padding:8px 20px; cursor:pointer;">Close</button>
<button onclick="closeModal('modal-myshelf')" style="padding:8px 20px; cursor:pointer;" aria-label="Close">Close</button>
</div>
</div>
</div>
<div class="app-container">
<div class="header">
<header class="header" role="banner">
<div style="display: flex; justify-content: space-between; align-items: center;">
<h1>Central Library Digital Archive | Academic Resource Discovery System</h1>
<p class="header-info">
<div class="header-info">
<span>Welcome, <strong>Student_2024</strong> (Card Status: <span style="color:#aeffae">Normal</span>)</span>
<span>
<a href="javascript:void(0)" onclick="openShelf()">My Shelf <span id="shelf-count" style="background:#b3a369; color:black; padding:0 4px; border-radius:10px; font-size:10px;">0</span></a> | <a href="#">Borrowing History</a> | <a href="#" onclick="showCustomAlert('Logout Successful')">Logout</a>
<button onclick="openShelf()" style="background:none; border:none; color:white; cursor:pointer; text-decoration:underline;" aria-label="Open my shelf">My Shelf <span id="shelf-count" style="background:#b3a369; color:black; padding:0 4px; border-radius:10px; font-size:10px;">0</span></button> | <a href="#">Borrowing History</a> | <button onclick="showCustomAlert('Logout Successful')" style="background:none; border:none; color:white; cursor:pointer; text-decoration:underline;" aria-label="Logout">Logout</button>
</span>
</p>
</div>
</div>
</div>
<div class="nav-bar">
<nav>
<a href="#">Home</a>
<a href="#">Journals</a>
<a href="#">Theses & Dissertations</a>
<a href="#">Conference Papers</a>
<a href="#">Multimedia</a>
<a href="#">Off-campus VPN</a>
</nav>
</div>
</header>
<nav class="nav-bar" aria-label="Main navigation">
<a href="#">Home</a>
<a href="#">Journals</a>
<a href="#">Theses & Dissertations</a>
<a href="#">Conference Papers</a>
<a href="#">Multimedia</a>
<a href="#">Off-campus VPN</a>
</nav>
<div class="system-alert">
<div class="system-alert" role="region" aria-live="polite" aria-label="System notifications">
<div>
<p><strong>[System Notice]</strong> ProQuest database maintenance scheduled for this Saturday 00:00-04:00. Full text download will be unavailable.</p>
<p style="opacity:0.6; font-size:12px;"><strong>[Promo]</strong> 2025 'Scholarly Campus' Essay Contest registration is open! Click for details.</p>
</div>
<button style="background:none; border:none; cursor:pointer;">×</button>
<button style="background:none; border:none; cursor:pointer;" aria-label="Close notification">×</button>
<p style="display:none;"><strong>[Urgent]</strong> Please return overdue books to avoid affecting your final grade.</p>
</div>
<div class="main-layout">
<div class="sidebar">
<h3>Resource Type</h3>
<ul id="filter-type">
<li><a href="javascript:void(0)" onclick="setFilter('type', 'all')" class="active-filter" style="font-weight:bold;">All Resources</a></li>
<li><a href="javascript:void(0)" onclick="setFilter('type', 'Conference Paper')">Conference Papers</a></li>
<li><a href="javascript:void(0)" onclick="setFilter('type', 'Book')">Books</a></li>
<li><a href="javascript:void(0)" onclick="setFilter('type', 'Journal Article')">Journal Articles</a></li>
<li><a href="javascript:void(0)" onclick="setFilter('type', 'Book Chapter')">Book Chapters</a></li>
<aside class="sidebar" role="navigation" aria-label="Search filters">
<h2 class="sidebar-heading" style="font-size: 16px; border-bottom: 2px solid var(--accent); padding-bottom: 5px; margin-top: 0; color: var(--primary);">Resource Type</h2>
<ul id="filter-type" role="list">
<li><button onclick="setFilter('type', 'all')" class="active-filter" style="font-weight:bold; background:none; border:none; cursor:pointer; text-align:left; padding:4px 8px; border-radius:4px; width:100%;" aria-label="Show all resources">All Resources</button></li>
<li><button onclick="setFilter('type', 'Conference Paper')" style="background:none; border:none; cursor:pointer; text-align:left; padding:4px 8px; border-radius:4px; width:100%;" aria-label="Filter by conference papers">Conference Papers</button></li>
<li><button onclick="setFilter('type', 'Book')" style="background:none; border:none; cursor:pointer; text-align:left; padding:4px 8px; border-radius:4px; width:100%;" aria-label="Filter by books">Books</button></li>
<li><button onclick="setFilter('type', 'Journal Article')" style="background:none; border:none; cursor:pointer; text-align:left; padding:4px 8px; border-radius:4px; width:100%;" aria-label="Filter by journal articles">Journal Articles</button></li>
<li><button onclick="setFilter('type', 'Book Chapter')" style="background:none; border:none; cursor:pointer; text-align:left; padding:4px 8px; border-radius:4px; width:100%;" aria-label="Filter by book chapters">Book Chapters</button></li>
</ul>
<h3 style="margin-top:20px;">Publication Year</h3>
<ul id="filter-year">
<li><a href="javascript:void(0)" onclick="setFilter('year', 'all')" class="active-filter" style="font-weight:bold;">All Years</a></li>
<li><a href="javascript:void(0)" onclick="setFilter('year', '2024')">2024</a></li>
<li><a href="javascript:void(0)" onclick="setFilter('year', '2020+')">2020-2024</a></li>
<li><a href="javascript:void(0)" onclick="setFilter('year', 'old')">Before 2020</a></li>
<h2 class="sidebar-heading" style="margin-top:20px; font-size: 16px; border-bottom: 2px solid var(--accent); padding-bottom: 5px; color: var(--primary);">Publication Year</h2>
<ul id="filter-year" role="list">
<li><button onclick="setFilter('year', 'all')" class="active-filter" style="font-weight:bold; background:none; border:none; cursor:pointer; text-align:left; padding:4px 8px; border-radius:4px; width:100%;" aria-label="Show all years">All Years</button></li>
<li><button onclick="setFilter('year', '2024')" style="background:none; border:none; cursor:pointer; text-align:left; padding:4px 8px; border-radius:4px; width:100%;" aria-label="Filter by 2024">2024</button></li>
<li><button onclick="setFilter('year', '2020+')" style="background:none; border:none; cursor:pointer; text-align:left; padding:4px 8px; border-radius:4px; width:100%;" aria-label="Filter by 2020-2024">2020-2024</button></li>
<li><button onclick="setFilter('year', 'old')" style="background:none; border:none; cursor:pointer; text-align:left; padding:4px 8px; border-radius:4px; width:100%;" aria-label="Filter by before 2020">Before 2020</button></li>
</ul>
<h3 style="margin-top:20px;">Subject Categories</h3>
<ul>
<h2 class="sidebar-heading" style="margin-top:20px; font-size: 16px; border-bottom: 2px solid var(--accent); padding-bottom: 5px; color: var(--primary);">Subject Categories</h2>
<ul role="list">
<li><a href="#">Computer Science</a></li>
<li><a href="#">Artificial Intelligence</a></li>
<li><a href="#">Software Engineering</a></li>
@@ -316,37 +318,40 @@
<p>Printing/Copying - Only 0.1 RMB/page</p>
<p>Study Room Reservation</p>
</div>
</div>
</aside>
<div class="content-area">
<form class="search-panel" onsubmit="event.preventDefault(); handleSearch();">
<input type="text" id="searchInput" value="" placeholder="Enter keywords (e.g., Neural, History...)">
<select id="searchField">
<form class="search-panel" onsubmit="event.preventDefault(); handleSearch();" role="search">
<label for="searchInput" style="display:none;">Search keywords</label>
<input type="text" id="searchInput" value="" placeholder="Enter keywords (e.g., Neural, History...)" aria-label="Search keywords">
<label for="searchField" style="display:none;">Search field</label>
<select id="searchField" aria-label="Search in specific field">
<option value="all">All Fields</option>
<option value="title">Title</option>
<option value="author">Author</option>
</select>
<button type="submit">Search</button>
<button type="submit" aria-label="Submit search">Search</button>
<div style="margin-top:10px; font-size:14px; display:flex; justify-content:space-between;">
<div>
<label><input type="checkbox" id="chkFullText" onchange="handleSearch()"> Full Text Only</label>
<label style="margin-left:15px;"><input type="checkbox"> Peer Reviewed</label>
<span id="loading-spinner" style="display:none; margin-left:15px; color:var(--primary);">
<label><input type="checkbox" id="chkFullText" onchange="handleSearch()" aria-label="Full text only"> Full Text Only</label>
<label style="margin-left:15px;"><input type="checkbox" aria-label="Peer reviewed only"> Peer Reviewed</label>
<span id="loading-spinner" style="display:none; margin-left:15px; color:var(--primary);" role="status" aria-live="polite">
<span style="display:inline-block; animation: spin 1s linear infinite;"></span> Searching...
</span>
</div>
<div>
<a href="javascript:void(0)" onclick="openModal('modal-advanced-search')" style="color:var(--primary); text-decoration:underline;">Advanced Search</a>
<button onclick="openModal('modal-advanced-search')" style="background:none; border:none; color:var(--primary); text-decoration:underline; cursor:pointer;" aria-label="Open advanced search">Advanced Search</button>
</div>
</div>
</form>
<style>@keyframes spin { 100% { transform: rotate(360deg); } }</style>
<div style="display:flex; justify-content:space-between; align-items:center;">
<p id="result-status" style="color:#666; font-size:13px; margin-bottom:15px;">Found approx 0 results (0.35s)</p>
<p id="result-status" style="color:#666; font-size:13px; margin-bottom:15px;" role="status" aria-live="polite">Found approx 0 results (0.35s)</p>
<div style="font-size:13px;">
Sort:
<select id="sortSelect" onchange="handleSort(this.value)" style="padding:2px;">
<label for="sortSelect" style="display:none;">Sort results by</label>
<select id="sortSelect" onchange="handleSort(this.value)" style="padding:2px;" aria-label="Sort results by">
<option value="relevance">Relevance</option>
<option value="year_desc">Year (Newest)</option>
<option value="year_asc">Year (Oldest)</option>
@@ -355,18 +360,18 @@
</div>
</div>
<div id="app-view-list" class="results-list">
<div id="app-view-list" class="results-list" role="region" aria-label="Search results">
<!-- Content generated by JS -->
</div>
<div id="app-view-detail" style="display:none;">
<button onclick="switchView('list')" style="margin-bottom:20px; padding:5px 15px; cursor:pointer;">&larr; Back to Results</button>
<div id="app-view-detail" style="display:none;" role="region" aria-label="Resource details">
<button onclick="switchView('list')" style="margin-bottom:20px; padding:5px 15px; cursor:pointer;" aria-label="Back to search results">&larr; Back to Results</button>
<div id="detail-content" style="background:white; padding:30px; border:1px solid #ddd; border-radius:4px;">
<!-- Detail content generated by JS -->
</div>
</div>
<div class="pagination" id="pagination-controls" style="display:none;">
<div class="pagination" id="pagination-controls" style="display:none;" role="navigation" aria-label="Search results pagination">
<!-- Generated by JS -->
</div>
@@ -952,11 +957,12 @@
// Update UI highlights
const listId = type === 'type' ? 'filter-type' : 'filter-year';
document.querySelectorAll(`#${listId} a`).forEach(el => {
document.querySelectorAll(`#${listId} button`).forEach(el => {
el.style.fontWeight = 'normal';
el.classList.remove('active-filter');
});
event.target.style.fontWeight = 'bold';
event.target.classList.add('active-filter');
handleSearch(); // Trigger search (or just applyFilters)
}