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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

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)
}