1244 lines
60 KiB
HTML
1244 lines
60 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Central Library Digital Archive - Search Results</title>
|
||
<style>
|
||
/* CSS Variables */
|
||
:root {
|
||
--primary: #002147; /* Academic Blue */
|
||
--accent: #b3a369; /* Gold */
|
||
--bg-body: #f4f4f4;
|
||
--bg-white: #ffffff;
|
||
--text-main: #333;
|
||
--text-meta: #666;
|
||
--border: #ddd;
|
||
}
|
||
|
||
body { font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: var(--bg-body); color: var(--text-main); margin: 0; line-height: 1.6; }
|
||
a { text-decoration: none; color: var(--primary); }
|
||
a:hover { text-decoration: underline; }
|
||
ul { list-style: none; padding: 0; }
|
||
hr { border: 0; border-top: 1px solid var(--border); margin: 15px 0; }
|
||
|
||
/* Container */
|
||
.app-container { max-width: 1400px; margin: 0 auto; background: var(--bg-white); min-height: 100vh; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
|
||
|
||
/* Top Navigation */
|
||
.header { background-color: var(--primary); color: white; padding: 15px 20px; display: flex; flex-direction: column; }
|
||
.header h1 { margin: 0; font-size: 24px; font-weight: 400; letter-spacing: 1px; }
|
||
.header-info { font-size: 13px; color: #ccc; margin-top: 5px; display: flex; justify-content: space-between; }
|
||
.header-info a { color: white; margin-left: 10px; }
|
||
.nav-bar { background: #00152e; padding: 10px 20px; font-size: 14px; }
|
||
.nav-bar a { color: #ddd; margin-right: 20px; font-weight: 500; }
|
||
.nav-bar a:hover { color: white; }
|
||
|
||
/* Notification Bar Interference - Weakened Display */
|
||
.system-alert { background: #fff3cd; color: #856404; font-size: 13px; padding: 10px 20px; border-bottom: 1px solid #ffeeba; display: flex; justify-content: space-between; align-items: center; }
|
||
.system-alert p { margin: 0 10px 0 0; display: inline-block; }
|
||
|
||
/* Main Layout */
|
||
.main-layout { display: grid; grid-template-columns: 280px 1fr; gap: 30px; padding: 30px; }
|
||
|
||
/* Sidebar */
|
||
.sidebar h3 { font-size: 16px; border-bottom: 2px solid var(--accent); padding-bottom: 5px; margin-top: 0; color: var(--primary); }
|
||
.sidebar li { margin-bottom: 8px; font-size: 14px; }
|
||
.sidebar li a { color: var(--text-meta); display: block; padding: 4px 8px; border-radius: 4px; }
|
||
.sidebar li a:hover { background: #eef; color: var(--primary); }
|
||
|
||
/* Sidebar Ad Interference - Hide or Weaken */
|
||
.sidebar-ad { margin-top: 30px; padding: 15px; background: #f9f9f9; border: 1px dashed #ccc; font-size: 12px; border-radius: 4px; }
|
||
.sidebar-ad p { margin: 5px 0; }
|
||
|
||
/* Search Area */
|
||
.search-panel { background: #f8f9fa; padding: 20px; border-radius: 8px; margin-bottom: 20px; border: 1px solid var(--border); }
|
||
.search-panel input[type="text"] { padding: 10px; width: 60%; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; }
|
||
.search-panel select { padding: 10px; border: 1px solid #ccc; border-radius: 4px; }
|
||
.search-panel button { padding: 10px 20px; background: var(--accent); color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; }
|
||
|
||
/* Result List */
|
||
.result-item { padding: 20px; border: 1px solid var(--border); border-radius: 4px; margin-bottom: 15px; transition: box-shadow 0.2s; background: white; position: relative; }
|
||
.result-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-color: #bbb; }
|
||
|
||
.result-title { font-size: 18px; color: var(--primary); margin-bottom: 5px; display: block; }
|
||
.result-meta { font-size: 14px; color: var(--text-meta); margin-bottom: 10px; }
|
||
.result-abstract { font-size: 14px; color: #444; margin-bottom: 15px; line-height: 1.5; }
|
||
|
||
/* Button Group Styling */
|
||
.action-row { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
|
||
.action-row a {
|
||
font-size: 13px;
|
||
padding: 5px 12px;
|
||
border-radius: 4px;
|
||
border: 1px solid var(--border);
|
||
background: white;
|
||
color: var(--text-main);
|
||
}
|
||
.action-row a:first-child {
|
||
background: var(--primary);
|
||
color: white;
|
||
border-color: var(--primary);
|
||
}
|
||
.action-row span { font-size: 13px; color: #999; margin-right: 10px; }
|
||
|
||
/* Interference Handling */
|
||
.promo-banner {
|
||
background: linear-gradient(to right, #eef2f3, #8e9eab);
|
||
padding: 15px;
|
||
border-radius: 4px;
|
||
margin-bottom: 15px;
|
||
border-left: 5px solid var(--primary);
|
||
}
|
||
.promo-banner strong { color: var(--primary); font-size: 16px; }
|
||
|
||
/* Donation Ad - Directly Hide */
|
||
.donation-ad { display: none; }
|
||
|
||
/* Footer */
|
||
.footer { background: #333; color: #aaa; padding: 40px; text-align: center; font-size: 13px; margin-top: 40px; }
|
||
.footer a { color: #ccc; }
|
||
|
||
/* Pagination */
|
||
.pagination { text-align: center; margin-top: 30px; }
|
||
.pagination a, .pagination strong { display: inline-block; padding: 8px 16px; border: 1px solid #ddd; margin: 0 4px; border-radius: 4px; color: var(--primary); }
|
||
.pagination strong { background: var(--primary); color: white; border-color: var(--primary); }
|
||
|
||
/* --- New Styles (Expansion for >900 lines) --- */
|
||
|
||
/* Modal System */
|
||
.modal-overlay {
|
||
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
|
||
background: rgba(0,0,0,0.5); z-index: 1000;
|
||
display: none; justify-content: center; align-items: center;
|
||
}
|
||
.modal-content {
|
||
background: white; width: 600px; max-width: 90%;
|
||
border-radius: 8px; padding: 30px; box-shadow: 0 5px 20px rgba(0,0,0,0.2);
|
||
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; background: none; border: none; }
|
||
.modal-close:hover { color: #333; }
|
||
|
||
@keyframes slideIn { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
|
||
|
||
/* Advanced Search Form */
|
||
.adv-search-row { display: flex; gap: 15px; margin-bottom: 15px; align-items: center; }
|
||
.adv-search-row label { width: 80px; font-weight: bold; }
|
||
.adv-search-row input, .adv-search-row select { flex: 1; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
|
||
|
||
/* Shelf View */
|
||
.shelf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px; padding: 20px; }
|
||
.shelf-item { background: #f9f9f9; padding: 15px; border-radius: 4px; border: 1px solid #eee; text-align: center; }
|
||
.shelf-cover { width: 80px; height: 110px; background: #ddd; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; color: #666; font-size: 12px; }
|
||
|
||
/* Tooltip */
|
||
.tooltip { position: relative; display: inline-block; }
|
||
.tooltip .tooltiptext {
|
||
visibility: hidden; width: 120px; background-color: #555; color: #fff; text-align: center;
|
||
border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1;
|
||
bottom: 125%; left: 50%; margin-left: -60px; opacity: 0; transition: opacity 0.3s;
|
||
}
|
||
.tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }
|
||
|
||
/* Active Filter */
|
||
.active-filter { color: var(--primary) !important; border-left: 3px solid var(--accent); padding-left: 5px !important; background: #f0f4f8; }
|
||
|
||
/* Citation Box */
|
||
.citation-box { background: #f4f4f4; padding: 15px; border: 1px solid #ddd; margin: 10px 0; font-family: monospace; font-size: 13px; word-break: break-all; }
|
||
.copy-btn { background: var(--white); border: 1px solid #ccc; padding: 2px 8px; font-size: 12px; cursor: pointer; float: right; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Modals HTML Structure -->
|
||
<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>
|
||
<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;" 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" 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>
|
||
<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;" aria-label="Close notice">Got it</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<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>
|
||
<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;" aria-label="Close">Close</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<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>
|
||
<button class="modal-close" onclick="closeModal('modal-advanced-search')" aria-label="Close advanced search dialog">×</button>
|
||
</div>
|
||
<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>
|
||
</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;" 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;" aria-label="Execute advanced search">Search</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<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>
|
||
<button class="modal-close" onclick="closeModal('modal-myshelf')" aria-label="Close my shelf dialog">×</button>
|
||
</div>
|
||
<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;" aria-label="Close">Close</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="app-container">
|
||
<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>
|
||
<div class="header-info">
|
||
<span>Welcome, <strong>Student_2024</strong> (Card Status: <span style="color:#aeffae">Normal</span>)</span>
|
||
<span>
|
||
<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>
|
||
</div>
|
||
</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" 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;" 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">
|
||
<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>
|
||
|
||
<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>
|
||
|
||
<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>
|
||
<li><a href="#">Information Systems</a></li>
|
||
</ul>
|
||
|
||
<div class="sidebar-ad">
|
||
<p><strong>[Campus Services]</strong></p>
|
||
<p>Thesis Plagiarism Check - Library 1st Floor</p>
|
||
<p>Printing/Copying - Only 0.1 RMB/page</p>
|
||
<p>Study Room Reservation</p>
|
||
</div>
|
||
</aside>
|
||
|
||
<div class="content-area">
|
||
<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" 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()" 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>
|
||
<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;" role="status" aria-live="polite">Found approx 0 results (0.35s)</p>
|
||
<div style="font-size:13px;">
|
||
Sort:
|
||
<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>
|
||
<option value="cites">Citations</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<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;" 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;" role="navigation" aria-label="Search results pagination">
|
||
<!-- Generated by JS -->
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer">
|
||
<p>Copyright © 2025 Central University Library | Address: 88 Keji Road</p>
|
||
<p>Support: Library IT Dept | <a href="#">Feedback</a> | <a href="#">Site Map</a></p>
|
||
<p style="opacity:0.5; margin-top:10px;">Server: LIB-WEB-02 | Session ID: 99281-AABB</p>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
// --- Custom Alert/Confirm Logic ---
|
||
let onConfirmCallback = null;
|
||
|
||
function showCustomAlert(msg) {
|
||
// Handle newlines
|
||
document.getElementById('alert-message').innerText = msg;
|
||
openModal('modal-alert');
|
||
}
|
||
|
||
function showCustomConfirm(msg, callback) {
|
||
document.getElementById('confirm-message').innerText = msg;
|
||
onConfirmCallback = callback;
|
||
openModal('modal-confirm');
|
||
}
|
||
|
||
// Initialize confirm button
|
||
window.addEventListener('DOMContentLoaded', () => {
|
||
const btn = document.getElementById('confirm-btn-action');
|
||
if (btn) {
|
||
btn.addEventListener('click', () => {
|
||
if (typeof onConfirmCallback === 'function') {
|
||
onConfirmCallback();
|
||
}
|
||
closeModal('modal-confirm');
|
||
});
|
||
}
|
||
});
|
||
|
||
// --- State Management ---
|
||
const STATE = {
|
||
view: 'list', // list, detail
|
||
db: [],
|
||
filteredDb: [], // data after search/filter
|
||
filters: {
|
||
query: '',
|
||
type: 'all',
|
||
year: 'all',
|
||
fullTextOnly: false
|
||
},
|
||
pagination: {
|
||
page: 1,
|
||
size: 5,
|
||
total: 0
|
||
},
|
||
currentSort: 'relevance'
|
||
};
|
||
|
||
// --- Mock Data ---
|
||
function initData() {
|
||
// Expanded dataset for realistic feel (> 900 lines demo)
|
||
const paperTemplates = [
|
||
{
|
||
title: "Attention Is All You Need",
|
||
authors: "Vaswani, A., Shazeer, N., et al.",
|
||
source: "NeurIPS",
|
||
year: 2017,
|
||
type: "Conference Paper",
|
||
abstract: "We propose a new simple network architecture, the Transformer, based solely on attention mechanisms.",
|
||
cites: 85000,
|
||
hasPdf: true,
|
||
language: "English"
|
||
},
|
||
{
|
||
title: "Deep Residual Learning for Image Recognition",
|
||
authors: "He, K., Zhang, X., Ren, S., & Sun, J.",
|
||
source: "CVPR 2016",
|
||
year: 2016,
|
||
type: "Conference Paper",
|
||
abstract: "We present a residual learning framework to ease the training of networks that are substantially deeper.",
|
||
cites: 150000,
|
||
hasPdf: true,
|
||
language: "English"
|
||
},
|
||
{
|
||
title: "BERT: Pre-training of Deep Bidirectional Transformers",
|
||
authors: "Devlin, J., et al.",
|
||
source: "NAACL-HLT 2019",
|
||
year: 2019,
|
||
type: "Conference Paper",
|
||
abstract: "BERT is designed to pre-train deep bidirectional representations from unlabeled text.",
|
||
cites: 92000,
|
||
hasPdf: true,
|
||
language: "English"
|
||
},
|
||
{
|
||
title: "Thinking, Fast and Slow",
|
||
authors: "Kahneman, D.",
|
||
source: "Farrar, Straus and Giroux",
|
||
year: 2011,
|
||
type: "Book",
|
||
abstract: "The central thesis is a dichotomy between two modes of thought: System 1 (fast) and System 2 (slow).",
|
||
cites: 45000,
|
||
hasPdf: false,
|
||
language: "English"
|
||
},
|
||
{
|
||
title: "The Structure of Scientific Revolutions",
|
||
authors: "Kuhn, T. S.",
|
||
source: "University of Chicago Press",
|
||
year: 1962,
|
||
type: "Book",
|
||
abstract: "Kuhn challenges the established linear view of scientific progress.",
|
||
cites: 120000,
|
||
hasPdf: false,
|
||
language: "English"
|
||
},
|
||
{
|
||
title: "Generative Adversarial Nets",
|
||
authors: "Goodfellow, I., et al.",
|
||
source: "NeurIPS 2014",
|
||
year: 2014,
|
||
type: "Conference Paper",
|
||
abstract: "We propose a new framework for estimating generative models via an adversarial process.",
|
||
cites: 60000,
|
||
hasPdf: true,
|
||
language: "English"
|
||
},
|
||
{
|
||
title: "A Brief History of Time",
|
||
authors: "Hawking, S.",
|
||
source: "Bantam Books",
|
||
year: 1988,
|
||
type: "Book",
|
||
abstract: "Hawking writes in non-technical terms about the structure, origin, and development of the universe.",
|
||
cites: 30000,
|
||
hasPdf: false,
|
||
language: "English"
|
||
},
|
||
{
|
||
title: "ImageNet Classification with Deep CNNs",
|
||
authors: "Krizhevsky, A., et al.",
|
||
source: "NeurIPS 2012",
|
||
year: 2012,
|
||
type: "Conference Paper",
|
||
abstract: "We trained a large, deep convolutional neural network to classify 1.2 million high-res images.",
|
||
cites: 110000,
|
||
hasPdf: true,
|
||
language: "English"
|
||
},
|
||
{
|
||
title: "Clean Code: A Handbook of Agile Software Craftsmanship",
|
||
authors: "Martin, R. C.",
|
||
source: "Prentice Hall",
|
||
year: 2008,
|
||
type: "Book",
|
||
abstract: "Even bad code can function. But if code isn't clean, it can bring a development organization to its knees.",
|
||
cites: 8000,
|
||
hasPdf: false,
|
||
language: "English"
|
||
},
|
||
{
|
||
title: "Design Patterns: Elements of Reusable Object-Oriented Software",
|
||
authors: "Gamma, E., et al.",
|
||
source: "Addison-Wesley",
|
||
year: 1994,
|
||
type: "Book",
|
||
abstract: "Capturing a wealth of experience, presenting a catalog of simple and succinct solutions to design problems.",
|
||
cites: 55000,
|
||
hasPdf: false,
|
||
language: "English"
|
||
},
|
||
{
|
||
title: "Evidence-Based Medicine",
|
||
authors: "Sackett, D. L., et al.",
|
||
source: "Churchill Livingstone",
|
||
year: 2000,
|
||
type: "Book Chapter",
|
||
abstract: "Evidence-based medicine is the conscientious, explicit, and judicious use of current best evidence.",
|
||
cites: 15000,
|
||
hasPdf: true,
|
||
language: "English"
|
||
},
|
||
{
|
||
title: "Quantum Computation and Quantum Information",
|
||
authors: "Nielsen, M. A. & Chuang, I. L.",
|
||
source: "Cambridge University Press",
|
||
year: 2010,
|
||
type: "Book",
|
||
abstract: "One of the most cited books in physics of all time.",
|
||
cites: 42000,
|
||
hasPdf: false,
|
||
language: "English"
|
||
},
|
||
{
|
||
title: "Distributed Systems: Concepts and Design",
|
||
authors: "Coulouris, G., et al.",
|
||
source: "Addison-Wesley",
|
||
year: 2011,
|
||
type: "Book",
|
||
abstract: "Broad and up-to-date coverage of the principles and practice in Distributed Systems.",
|
||
cites: 5000,
|
||
hasPdf: false,
|
||
language: "English"
|
||
},
|
||
{
|
||
title: "Machine Learning: A Probabilistic Perspective",
|
||
authors: "Murphy, K. P.",
|
||
source: "MIT Press",
|
||
year: 2012,
|
||
type: "Book",
|
||
abstract: "A comprehensive introduction to machine learning that uses probabilistic models and inference as a unifying approach.",
|
||
cites: 12000,
|
||
hasPdf: false,
|
||
language: "English"
|
||
},
|
||
{
|
||
title: "Pattern Recognition and Machine Learning",
|
||
authors: "Bishop, C. M.",
|
||
source: "Springer",
|
||
year: 2006,
|
||
type: "Book",
|
||
abstract: "This is the first textbook on pattern recognition to present the Bayesian viewpoint.",
|
||
cites: 48000,
|
||
hasPdf: true,
|
||
language: "English"
|
||
},
|
||
{
|
||
title: "Introduction to Algorithms",
|
||
authors: "Cormen, T. H., Leiserson, C. E., Rivest, R. L., & Stein, C.",
|
||
source: "MIT Press",
|
||
year: 2009,
|
||
type: "Book",
|
||
abstract: "This book provides a comprehensive introduction to the modern study of computer algorithms.",
|
||
cites: 65000,
|
||
hasPdf: false,
|
||
language: "English"
|
||
},
|
||
{
|
||
title: "Compilers: Principles, Techniques, and Tools",
|
||
authors: "Aho, A. V., Lam, M. S., Sethi, R., & Ullman, J. D.",
|
||
source: "Pearson",
|
||
year: 2006,
|
||
type: "Book",
|
||
abstract: "Known as the Dragon Book, it covers the principles and techniques of compiler design.",
|
||
cites: 30000,
|
||
hasPdf: false,
|
||
language: "English"
|
||
},
|
||
{
|
||
title: "Artificial Intelligence: A Modern Approach",
|
||
authors: "Russell, S., & Norvig, P.",
|
||
source: "Pearson",
|
||
year: 2020,
|
||
type: "Book",
|
||
abstract: "The long-anticipated revision of this best-selling text offers the most comprehensive, up-to-date introduction to AI.",
|
||
cites: 52000,
|
||
hasPdf: false,
|
||
language: "English"
|
||
},
|
||
{
|
||
title: "The C Programming Language",
|
||
authors: "Kernighan, B. W., & Ritchie, D. M.",
|
||
source: "Prentice Hall",
|
||
year: 1988,
|
||
type: "Book",
|
||
abstract: "The authors present the complete guide to ANSI standard C language programming.",
|
||
cites: 25000,
|
||
hasPdf: false,
|
||
language: "English"
|
||
},
|
||
{
|
||
title: "Refactoring: Improving the Design of Existing Code",
|
||
authors: "Fowler, M.",
|
||
source: "Addison-Wesley",
|
||
year: 1999,
|
||
type: "Book",
|
||
abstract: "Refactoring is a controlled technique for improving the design of an existing code base.",
|
||
cites: 14000,
|
||
hasPdf: false,
|
||
language: "English"
|
||
},
|
||
{
|
||
title: "Domain-Driven Design: Tackling Complexity in the Heart of Software",
|
||
authors: "Evans, E.",
|
||
source: "Addison-Wesley",
|
||
year: 2003,
|
||
type: "Book",
|
||
abstract: "This book addresses the complexity of software by connecting the implementation to an evolving model.",
|
||
cites: 9000,
|
||
hasPdf: false,
|
||
language: "English"
|
||
},
|
||
{
|
||
title: "The Pragmatic Programmer: From Journeyman to Master",
|
||
authors: "Hunt, A., & Thomas, D.",
|
||
source: "Addison-Wesley",
|
||
year: 1999,
|
||
type: "Book",
|
||
abstract: "The Pragmatic Programmer cuts through the increasing specialization and technicalities of modern software development to examine the core process.",
|
||
cites: 11000,
|
||
hasPdf: false,
|
||
language: "English"
|
||
},
|
||
{
|
||
title: "Code Complete: A Practical Handbook of Software Construction",
|
||
authors: "McConnell, S.",
|
||
source: "Microsoft Press",
|
||
year: 2004,
|
||
type: "Book",
|
||
abstract: "Widely considered one of the best practical guides to programming, Steve McConnell’s original CODE COMPLETE has been helping developers write better software for more than a decade.",
|
||
cites: 13000,
|
||
hasPdf: false,
|
||
language: "English"
|
||
},
|
||
{
|
||
title: "Structure and Interpretation of Computer Programs",
|
||
authors: "Abelson, H., & Sussman, G. J.",
|
||
source: "MIT Press",
|
||
year: 1996,
|
||
type: "Book",
|
||
abstract: "This book is known as the Wizard Book in hacker culture.",
|
||
cites: 8000,
|
||
hasPdf: true,
|
||
language: "English"
|
||
},
|
||
{
|
||
title: "Computer Networks",
|
||
authors: "Tanenbaum, A. S., & Wetherall, D. J.",
|
||
source: "Pearson",
|
||
year: 2010,
|
||
type: "Book",
|
||
abstract: "Appropriate for Computer Networking or Introduction to Networking courses at receiver.",
|
||
cites: 18000,
|
||
hasPdf: false,
|
||
language: "English"
|
||
},
|
||
{
|
||
title: "Operating System Concepts",
|
||
authors: "Silberschatz, A., Galvin, P. B., & Gagne, G.",
|
||
source: "Wiley",
|
||
year: 2018,
|
||
type: "Book",
|
||
abstract: "The tenth edition of Operating System Concepts has been revised to keep it fresh and up-to-date with contemporary OS examples.",
|
||
cites: 22000,
|
||
hasPdf: false,
|
||
language: "English"
|
||
},
|
||
{
|
||
title: "Database System Concepts",
|
||
authors: "Silberschatz, A., Korth, H. F., & Sudarshan, S.",
|
||
source: "McGraw-Hill",
|
||
year: 2019,
|
||
type: "Book",
|
||
abstract: "Database System Concepts by Silberschatz, Korth and Sudarshan is now in its 7th edition.",
|
||
cites: 16000,
|
||
hasPdf: false,
|
||
language: "English"
|
||
},
|
||
{
|
||
title: "Computer Architecture: A Quantitative Approach",
|
||
authors: "Hennessy, J. L., & Patterson, D. A.",
|
||
source: "Morgan Kaufmann",
|
||
year: 2017,
|
||
type: "Book",
|
||
abstract: "The era of general-purpose computing brings new challenges and opportunities for computer architecture.",
|
||
cites: 28000,
|
||
hasPdf: false,
|
||
language: "English"
|
||
},
|
||
{
|
||
title: "GPT-3: Language Models are Few-Shot Learners",
|
||
authors: "Brown, T., et al.",
|
||
source: "NeurIPS 2020",
|
||
year: 2020,
|
||
type: "Conference Paper",
|
||
abstract: "We demonstrate that scaling up language models greatly improves task-agnostic, few-shot performance.",
|
||
cites: 45000,
|
||
hasPdf: true,
|
||
language: "English"
|
||
},
|
||
{
|
||
title: "Deep Learning",
|
||
authors: "LeCun, Y., Bengio, Y., & Hinton, G.",
|
||
source: "Nature",
|
||
year: 2015,
|
||
type: "Journal Article",
|
||
abstract: "Deep learning allows computational models that are composed of multiple processing layers to learn representations of data with multiple levels of abstraction.",
|
||
cites: 88000,
|
||
hasPdf: true,
|
||
language: "English"
|
||
},
|
||
{
|
||
title: "XGBoost: A Scalable Tree Boosting System",
|
||
authors: "Chen, T., & Guestrin, C.",
|
||
source: "KDD 2016",
|
||
year: 2016,
|
||
type: "Conference Paper",
|
||
abstract: "We describe a scalable end-to-end tree boosting system called XGBoost, which is used widely by data scientists.",
|
||
cites: 35000,
|
||
hasPdf: true,
|
||
language: "English"
|
||
},
|
||
{
|
||
title: "Dropout: A Simple Way to Prevent Neural Networks from Overfitting",
|
||
authors: "Srivastava, N., et al.",
|
||
source: "JMLR",
|
||
year: 2014,
|
||
type: "Journal Article",
|
||
abstract: "The key idea is to randomly drop units (along with their connections) from the neural network during training.",
|
||
cites: 50000,
|
||
hasPdf: true,
|
||
language: "English"
|
||
},
|
||
{
|
||
title: "Adam: A Method for Stochastic Optimization",
|
||
authors: "Kingma, D. P., & Ba, J.",
|
||
source: "ICLR 2015",
|
||
year: 2015,
|
||
type: "Conference Paper",
|
||
abstract: "We introduce Adam, an algorithm for first-order gradient-based optimization of stochastic objective functions.",
|
||
cites: 130000,
|
||
hasPdf: true,
|
||
language: "English"
|
||
},
|
||
{
|
||
title: "Layer Normalization",
|
||
authors: "Ba, J. L., Kiros, J. R., & Hinton, G. E.",
|
||
source: "ArXiv",
|
||
year: 2016,
|
||
type: "Journal Article",
|
||
abstract: "Layer normalization is a technique to normalize the activities of the neurons.",
|
||
cites: 15000,
|
||
hasPdf: true,
|
||
language: "English"
|
||
},
|
||
{
|
||
title: "Mask R-CNN",
|
||
authors: "He, K., Gkioxari, G., Dollár, P., & Girshick, R.",
|
||
source: "ICCV 2017",
|
||
year: 2017,
|
||
type: "Conference Paper",
|
||
abstract: "We present a conceptually simple, flexible, and general framework for object instance segmentation.",
|
||
cites: 35000,
|
||
hasPdf: true,
|
||
language: "English"
|
||
},
|
||
{
|
||
title: "U-Net: Convolutional Networks for Biomedical Image Segmentation",
|
||
authors: "Ronneberger, O., Fischer, P., & Brox, T.",
|
||
source: "MICCAI 2015",
|
||
year: 2015,
|
||
type: "Conference Paper",
|
||
abstract: "We present a network and training strategy that relies on the strong use of data augmentation.",
|
||
cites: 60000,
|
||
hasPdf: true,
|
||
language: "English"
|
||
},
|
||
{
|
||
title: "Playing Atari with Deep Reinforcement Learning",
|
||
authors: "Mnih, V., et al.",
|
||
source: "NeurIPS Deep Learning Workshop",
|
||
year: 2013,
|
||
type: "Conference Paper",
|
||
abstract: "We present the first deep learning model to successfully learn control policies directly from high-dimensional sensory input using reinforcement learning.",
|
||
cites: 25000,
|
||
hasPdf: true,
|
||
language: "English"
|
||
},
|
||
{
|
||
title: "Human-level control through deep reinforcement learning",
|
||
authors: "Mnih, V., et al.",
|
||
source: "Nature",
|
||
year: 2015,
|
||
type: "Journal Article",
|
||
abstract: "We highlight the ability of the Deep Q-Network agent to derive successful policies.",
|
||
cites: 40000,
|
||
hasPdf: true,
|
||
language: "English"
|
||
}
|
||
];
|
||
|
||
// Generate ID and mix
|
||
STATE.db = paperTemplates.map((item, index) => ({
|
||
id: 2024000 + index,
|
||
...item
|
||
}));
|
||
|
||
// Initial Filter
|
||
applyFilters();
|
||
}
|
||
|
||
// --- Logic ---
|
||
function openModal(id) {
|
||
document.getElementById(id).style.display = 'flex';
|
||
}
|
||
|
||
function closeModal(id) {
|
||
document.getElementById(id).style.display = 'none';
|
||
|
||
// Reset advanced search result if closing it without searching (optional logic)
|
||
}
|
||
|
||
function handleAdvancedSearch() {
|
||
const kw = document.getElementById('adv-kw').value.toLowerCase();
|
||
const author = document.getElementById('adv-author').value.toLowerCase();
|
||
const pub = document.getElementById('adv-pub').value.toLowerCase();
|
||
const yearStart = parseInt(document.getElementById('adv-year-start').value) || 0;
|
||
const yearEnd = parseInt(document.getElementById('adv-year-end').value) || 9999;
|
||
|
||
STATE.pagination.page = 1;
|
||
closeModal('modal-advanced-search');
|
||
|
||
// Apply Custom Filtering Logic for Advanced Search
|
||
STATE.filteredDb = STATE.db.filter(item => {
|
||
const matchKw = !kw || item.title.toLowerCase().includes(kw) || item.abstract.toLowerCase().includes(kw);
|
||
const matchAuthor = !author || item.authors.toLowerCase().includes(author);
|
||
const matchPub = !pub || item.source.toLowerCase().includes(pub);
|
||
const matchYear = item.year >= yearStart && item.year <= yearEnd;
|
||
|
||
return matchKw && matchAuthor && matchPub && matchYear;
|
||
});
|
||
|
||
STATE.pagination.total = STATE.filteredDb.length;
|
||
document.getElementById('result-status').innerHTML = `<strong>Advanced Search:</strong> Found ${STATE.filteredDb.length} results`;
|
||
|
||
renderList();
|
||
renderPagination();
|
||
}
|
||
|
||
function showExportCitation(id) {
|
||
const item = STATE.db.find(d => d.id === id);
|
||
if(!item) return;
|
||
|
||
const apa = `${item.authors} (${item.year}). ${item.title}. <em>${item.source}</em>.`;
|
||
const mla = `${item.authors.split(',')[0]}, et al. "${item.title}." ${item.source}, ${item.year}.`;
|
||
const bib = `@misc{key${item.year}, title={${item.title}}, author={${item.authors}}, year={${item.year}}}`;
|
||
|
||
const html = `
|
||
<p><strong>APA 7th:</strong></p>
|
||
<div class="citation-box">${apa} <button class="copy-btn" onclick="copyText('${apa.replace(/'/g, "\\'")}')">Copy</button></div>
|
||
|
||
<p><strong>MLA 9th:</strong></p>
|
||
<div class="citation-box">${mla} <button class="copy-btn" onclick="copyText('${mla.replace(/'/g, "\\'")}')">Copy</button></div>
|
||
|
||
<p><strong>BibTeX:</strong></p>
|
||
<div class="citation-box">${bib} <button class="copy-btn" onclick="copyText('${bib.replace(/'/g, "\\'")}')">Copy</button></div>
|
||
`;
|
||
|
||
document.getElementById('citation-body').innerHTML = html;
|
||
openModal('modal-citation');
|
||
}
|
||
|
||
function copyText(text) {
|
||
navigator.clipboard.writeText(text).then(() => {
|
||
showCustomAlert('Copied to clipboard');
|
||
});
|
||
}
|
||
|
||
function handleSearch() {
|
||
const spinner = document.getElementById('loading-spinner');
|
||
spinner.style.display = 'inline-block';
|
||
|
||
STATE.filters.query = document.getElementById('searchInput').value.toLowerCase();
|
||
STATE.filters.fullTextOnly = document.getElementById('chkFullText').checked;
|
||
STATE.pagination.page = 1; // Reset to page 1
|
||
|
||
// Simulate Network Delay
|
||
setTimeout(() => {
|
||
applyFilters();
|
||
spinner.style.display = 'none';
|
||
}, 500);
|
||
}
|
||
|
||
function setFilter(type, value) {
|
||
STATE.filters[type] = value;
|
||
STATE.pagination.page = 1;
|
||
|
||
// Update UI highlights
|
||
const listId = type === 'type' ? 'filter-type' : 'filter-year';
|
||
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)
|
||
}
|
||
|
||
function handleSort(sortType) {
|
||
STATE.currentSort = sortType;
|
||
applyFilters();
|
||
}
|
||
|
||
function applyFilters() {
|
||
let res = STATE.db.filter(item => {
|
||
// Text Search
|
||
const matchQuery = !STATE.filters.query ||
|
||
item.title.toLowerCase().includes(STATE.filters.query) ||
|
||
item.authors.toLowerCase().includes(STATE.filters.query);
|
||
|
||
// Type Filter
|
||
const matchType = STATE.filters.type === 'all' || item.type.includes(STATE.filters.type);
|
||
|
||
// Year Filter
|
||
let matchYear = true;
|
||
if(STATE.filters.year === '2024') matchYear = item.year === 2024;
|
||
else if(STATE.filters.year === '2020+') matchYear = item.year >= 2020 && item.year <= 2024;
|
||
else if(STATE.filters.year === 'old') matchYear = item.year < 2020;
|
||
|
||
// FullText check
|
||
const matchPdf = !STATE.filters.fullTextOnly || item.hasPdf;
|
||
|
||
return matchQuery && matchType && matchYear && matchPdf;
|
||
});
|
||
|
||
// Sorting
|
||
if (STATE.currentSort === 'year_desc') res.sort((a,b) => b.year - a.year);
|
||
else if (STATE.currentSort === 'year_asc') res.sort((a,b) => a.year - b.year);
|
||
else if (STATE.currentSort === 'cites') res.sort((a,b) => b.cites - a.cites);
|
||
// relevance is default order (mock)
|
||
|
||
STATE.filteredDb = res;
|
||
STATE.pagination.total = res.length;
|
||
|
||
// Update status text
|
||
const statusEl = document.getElementById('result-status');
|
||
if(statusEl) statusEl.innerHTML = `Found approx ${res.length} results (Time: ${Math.random().toFixed(2)}s)`;
|
||
|
||
renderList();
|
||
renderPagination();
|
||
}
|
||
|
||
function changePage(pageNum) {
|
||
if (pageNum < 1 || pageNum > Math.ceil(STATE.pagination.total / STATE.pagination.size)) return;
|
||
STATE.pagination.page = pageNum;
|
||
renderList();
|
||
renderPagination();
|
||
window.scrollTo(0,0);
|
||
}
|
||
|
||
// --- Shelf Logic ---
|
||
const SHELF = {
|
||
ids: new Set(),
|
||
add: function(id) {
|
||
if (this.ids.has(id)) {
|
||
showCustomAlert('Resource already in shelf!');
|
||
return;
|
||
}
|
||
this.ids.add(id);
|
||
this.updateCount();
|
||
|
||
// Visual feedback
|
||
const btn = document.getElementById(`btn-shelf-${id}`);
|
||
if(btn) {
|
||
btn.innerText = "Shelved";
|
||
btn.style.color = "#aaa";
|
||
}
|
||
},
|
||
remove: function(id) {
|
||
this.ids.delete(id);
|
||
this.updateCount();
|
||
openShelf(); // Refresh view
|
||
},
|
||
updateCount: function() {
|
||
document.getElementById('shelf-count').innerText = this.ids.size;
|
||
}
|
||
};
|
||
|
||
function addToShelf(id) {
|
||
SHELF.add(id);
|
||
}
|
||
|
||
function openShelf() {
|
||
const container = document.getElementById('shelf-body');
|
||
container.innerHTML = '';
|
||
|
||
if (SHELF.ids.size === 0) {
|
||
container.innerHTML = '<div style="grid-column:1/-1; text-align:center; padding:50px; color:#999;">Your shelf is empty. Go add some resources!</div>';
|
||
} else {
|
||
SHELF.ids.forEach(id => {
|
||
const item = STATE.db.find(d => d.id === parseInt(id));
|
||
if(item) {
|
||
const el = document.createElement('div');
|
||
el.className = 'shelf-item';
|
||
el.innerHTML = `
|
||
<div class="shelf-cover">${item.type}</div>
|
||
<div style="font-weight:bold; font-size:14px; margin-bottom:5px; height:40px; overflow:hidden;">${item.title}</div>
|
||
<div style="font-size:12px; color:#666;">${item.year}</div>
|
||
<div style="margin-top:10px;">
|
||
<a href="javascript:void(0)" onclick="closeModal('modal-myshelf'); openDetail(${item.id})" style="font-size:12px;">View</a>
|
||
<span style="color:#ccc;">|</span>
|
||
<a href="javascript:void(0)" onclick="SHELF.remove(${item.id})" style="font-size:12px; color:red;">Remove</a>
|
||
</div>
|
||
`;
|
||
container.appendChild(el);
|
||
}
|
||
});
|
||
}
|
||
|
||
openModal('modal-myshelf');
|
||
}
|
||
|
||
|
||
// --- Rendering ---
|
||
function renderList() {
|
||
const container = document.getElementById('app-view-list');
|
||
container.innerHTML = '';
|
||
|
||
const start = (STATE.pagination.page - 1) * STATE.pagination.size;
|
||
const end = start + STATE.pagination.size;
|
||
const pageData = STATE.filteredDb.slice(start, end);
|
||
|
||
if (pageData.length === 0) {
|
||
container.innerHTML = '<div style="padding:50px; text-align:center; color:#666;">No resources found. Please try different keywords.</div>';
|
||
return;
|
||
}
|
||
|
||
let promoInserted = false;
|
||
|
||
pageData.forEach((item, index) => {
|
||
// Insert promo banner logic (simplified for paging)
|
||
// Only show on first page, after 2nd item
|
||
if (STATE.pagination.page === 1 && index === 2 && !promoInserted) {
|
||
container.innerHTML += `
|
||
<div class="promo-banner">
|
||
<div><strong>[Recommended] ACM Digital Library Trial</strong></div>
|
||
<div style="font-size:13px; color:#555; margin:5px 0;">
|
||
<p>Abstract: The library has opened an ACM database trial, containing the latest computer science conference papers...</p>
|
||
</div>
|
||
<div class="action-row">
|
||
<a href="javascript:void(0)" style="background:#0055a6; color:white; border:none;">Enter Database</a>
|
||
<a href="javascript:void(0)" style="border:none; text-decoration:underline; background:none;">Feedback</a>
|
||
</div>
|
||
</div>`;
|
||
promoInserted = true;
|
||
}
|
||
|
||
const isShelved = SHELF.ids.has(item.id);
|
||
const div = document.createElement('div');
|
||
div.className = 'result-item';
|
||
div.innerHTML = `
|
||
<div class="result-title">
|
||
<input type="checkbox">
|
||
<strong style="cursor:pointer;" onclick="openDetail(${item.id})">${start + index + 1}. ${item.title}</strong>
|
||
</div>
|
||
<div class="result-meta">
|
||
<p>Authors: ${item.authors} | ${item.year} | <span style="background:#eee; padding:2px 6px; border-radius:3px; font-size:12px;">${item.type}</span> | Citations: ${item.cites}</p>
|
||
<p>Source: <em>${item.source}</em></p>
|
||
<p class="result-abstract">Abstract: ${item.abstract.substring(0, 150)}...</p>
|
||
</div>
|
||
<div class="action-row">
|
||
${item.hasPdf ? `<a href="javascript:void(0)">PDF Download</a> <a href="javascript:void(0)">HTML Full Text</a>` : `<span style="color:#999; font-size:12px; border:1px solid #eee; padding:4px;">[PDF Unavailable]</span> <a href="javascript:void(0)" style="background:white; color:#333; border:1px solid #ccc;">Document Delivery</a>`}
|
||
<a href="javascript:void(0)" onclick="showExportCitation(${item.id})">Cite</a>
|
||
<a href="javascript:void(0)" id="btn-shelf-${item.id}" onclick="addToShelf(${item.id})" style="${isShelved ? 'color:#aaa;' : ''}">${isShelved ? 'Shelved' : 'Add to Shelf'}</a>
|
||
</div>
|
||
`;
|
||
container.appendChild(div);
|
||
});
|
||
}
|
||
|
||
function renderPagination() {
|
||
const container = document.getElementById('pagination-controls');
|
||
if (STATE.pagination.total === 0) {
|
||
container.style.display = 'none';
|
||
return;
|
||
}
|
||
|
||
container.style.display = 'block';
|
||
const totalPages = Math.ceil(STATE.pagination.total / STATE.pagination.size);
|
||
const curr = STATE.pagination.page;
|
||
|
||
let html = '';
|
||
if (curr > 1) html += `<a href="javascript:void(0)" onclick="changePage(${curr-1})">Previous</a>`;
|
||
else html += `<span style="color:#ccc; padding:8px 16px; border:1px solid #eee; margin:0 4px;">Previous</span>`;
|
||
|
||
for(let i=1; i<=totalPages; i++) {
|
||
if (i === curr) html += `<strong>${i}</strong>`;
|
||
else html += `<a href="javascript:void(0)" onclick="changePage(${i})">${i}</a>`;
|
||
}
|
||
|
||
if (curr < totalPages) html += `<a href="javascript:void(0)" onclick="changePage(${curr+1})">Next</a>`;
|
||
else html += `<span style="color:#ccc; padding:8px 16px; border:1px solid #eee; margin:0 4px;">Next</span>`;
|
||
|
||
container.innerHTML = html;
|
||
}
|
||
|
||
function openDetail(id) {
|
||
const item = STATE.db.find(d => d.id === id);
|
||
if(!item) return;
|
||
|
||
STATE.view = 'detail';
|
||
switchView('detail');
|
||
|
||
const container = document.getElementById('detail-content');
|
||
container.innerHTML = `
|
||
<h2 style="color:var(--primary); border-bottom:1px solid #ddd; padding-bottom:15px; margin-top:0;">${item.title}</h2>
|
||
<div style="background:#f9f9f9; padding:15px; border-radius:4px; margin-bottom:20px;">
|
||
<p><strong>Type:</strong> ${item.type}</p>
|
||
<p><strong>Authors:</strong> ${item.authors}</p>
|
||
<p><strong>Source:</strong> ${item.source}</p>
|
||
<p><strong>Year:</strong> ${item.year}</p>
|
||
<p><strong>Citations:</strong> ${item.cites}</p>
|
||
<p><strong>DOI:</strong> 10.1145/${Math.random().toString(36).substr(2, 9)}</p>
|
||
<p><strong>Language:</strong> ${item.language || 'English'}</p>
|
||
</div>
|
||
|
||
<h3>Abstract</h3>
|
||
<p style="text-align:justify; line-height:1.8; font-size:16px;">${item.abstract}</p>
|
||
<p style="text-align:justify; line-height:1.8; color:#666;">
|
||
(Simulated Full Text Content)<br><br>
|
||
1. <strong>Introduction</strong><br>
|
||
The rapid development of ${item.title} has revolutionized the field. This paper explores the fundamental principles...<br><br>
|
||
2. <strong>Methodology</strong><br>
|
||
We employed a dataset consisting of over 50,000 samples... The algorithm was optimized using stochastic gradient descent...<br><br>
|
||
3. <strong>Results</strong><br>
|
||
Our experiments demonstrate a significant improvement over baseline models (see Table 1). The ${item.year} publication date marks a significant milestone in this domain.
|
||
</p>
|
||
|
||
<div style="margin-top:30px; display:flex; gap:15px; border-top:1px solid #ddd; padding-top:20px;">
|
||
${item.hasPdf
|
||
? `<button style="background:var(--primary); color:white; border:none; padding:10px 25px; border-radius:4px; cursor:pointer;" onclick="showCustomAlert('Start downloading ${item.title}.pdf')">Download Full Text (PDF)</button>`
|
||
: `<button style="background:#ccc; color:white; border:none; padding:10px 25px; border-radius:4px; cursor:not-allowed;">PDF Unauthorized</button> <button style="background:white; color:#333; border:1px solid #ccc; padding:10px 25px; border-radius:4px; cursor:pointer;" onclick="showCustomAlert('Request Document Delivery...')">Request Document Delivery</button>`
|
||
}
|
||
<button style="background:white; color:var(--text-main); border:1px solid #ccc; padding:10px 25px; border-radius:4px; cursor:pointer;" onclick="showExportCitation(${item.id})">Get Citation</button>
|
||
<button style="background:white; color:var(--text-main); border:1px solid #ccc; padding:10px 25px; border-radius:4px; cursor:pointer;" onclick="addToShelf(${item.id})">Add to Shelf</button>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
|
||
function switchView(viewName) {
|
||
document.getElementById('app-view-list').style.display = viewName === 'list' ? 'block' : 'none';
|
||
document.getElementById('app-view-detail').style.display = viewName === 'detail' ? 'block' : 'none';
|
||
window.scrollTo(0,0);
|
||
|
||
// Hide sidebar in detail view to focus on content, optional
|
||
const sidebar = document.querySelector('.sidebar');
|
||
if (viewName === 'detail') {
|
||
sidebar.style.display = 'none';
|
||
document.querySelector('.main-layout').style.gridTemplateColumns = '1fr';
|
||
} else {
|
||
sidebar.style.display = 'block';
|
||
document.querySelector('.main-layout').style.gridTemplateColumns = '280px 1fr';
|
||
}
|
||
}
|
||
|
||
function showCite(title, year) {
|
||
const apa = `${title}. (${year}).`;
|
||
const mla = `${title}. ${year}.`;
|
||
const bibtex = `@article{cite_${year}, title={${title}}, year={${year}}}`;
|
||
|
||
showCustomAlert(`Citation Generated:\n\n[APA]: ${apa}\n[MLA]: ${mla}\n[BibTeX]: ${bibtex}`);
|
||
}
|
||
|
||
// Initialize
|
||
window.onload = function() {
|
||
initData();
|
||
renderList();
|
||
};
|
||
</script>
|
||
|
||
</body>
|
||
</html> |