modify
This commit is contained in:
198
005/all.html
198
005/all.html
@@ -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')">×</span>
|
||||
<button class="modal-close" onclick="closeModal('modal-confirm')" aria-label="Close confirmation dialog">×</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')">×</span>
|
||||
<button class="modal-close" onclick="closeModal('modal-alert')" aria-label="Close notice dialog">×</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')">×</span>
|
||||
<button class="modal-close" onclick="closeModal('modal-citation')" aria-label="Close citation dialog">×</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')">×</span>
|
||||
<button class="modal-close" onclick="closeModal('modal-advanced-search')" aria-label="Close advanced search dialog">×</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')">×</span>
|
||||
<button class="modal-close" onclick="closeModal('modal-myshelf')" aria-label="Close my shelf dialog">×</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;">← 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">← 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)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user