|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Multilingual Paper Database</title> |
|
|
<link rel="stylesheet" href="styles.css"> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> |
|
|
|
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<header class="header"> |
|
|
<div class="header-content"> |
|
|
<h1 class="title"> |
|
|
<i class="fas fa-globe"></i> |
|
|
Multilingual Paper Database |
|
|
</h1> |
|
|
<p class="subtitle">Filter and search through multilingual NLP research papers</p> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<main class="main-content"> |
|
|
<div class="search-section"> |
|
|
<div class="search-container"> |
|
|
<div class="search-stats"> |
|
|
<span id="resultCount">Loading papers...</span> |
|
|
</div> |
|
|
<div class="search-box"> |
|
|
<i class="fas fa-search search-icon"></i> |
|
|
<input |
|
|
type="text" |
|
|
id="searchInput" |
|
|
placeholder="Add keyword to search papers..." |
|
|
class="search-input" |
|
|
> |
|
|
<button id="addSearchKeyword" class="add-keyword-btn search-add-btn" title="Add search keyword"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</button> |
|
|
<button id="clearSearch" class="clear-btn" title="Clear all search keywords"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="search-keywords-container" id="searchKeywordsContainer"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="search-container"> |
|
|
<div class="search-stats"> |
|
|
<span id="removeResultCount">All papers included</span> |
|
|
</div> |
|
|
<div class="search-box remove-search-box"> |
|
|
<i class="fas fa-minus-circle search-icon"></i> |
|
|
<input |
|
|
type="text" |
|
|
id="removeSearchInput" |
|
|
placeholder="Add keyword to remove papers..." |
|
|
class="search-input" |
|
|
> |
|
|
<button id="addRemoveKeyword" class="add-keyword-btn" title="Add removal keyword"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</button> |
|
|
<button id="clearRemoveSearch" class="clear-btn" title="Clear all removal keywords"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="remove-keywords-container" id="removeKeywordsContainer"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="filters-section"> |
|
|
<div class="year-filter"> |
|
|
<label class="filter-label"> |
|
|
<i class="fas fa-calendar-alt"></i> |
|
|
Publication Year: <span id="yearRange">All Years</span> |
|
|
</label> |
|
|
<div class="year-input-container"> |
|
|
<div class="year-input-group"> |
|
|
<label for="yearInputMin">From:</label> |
|
|
<input |
|
|
type="number" |
|
|
id="yearInputMin" |
|
|
class="year-input" |
|
|
min="1960" |
|
|
max="2025" |
|
|
value="1960" |
|
|
placeholder="1960" |
|
|
> |
|
|
</div> |
|
|
<div class="year-input-group"> |
|
|
<label for="yearInputMax">To:</label> |
|
|
<input |
|
|
type="number" |
|
|
id="yearInputMax" |
|
|
class="year-input" |
|
|
min="1960" |
|
|
max="2025" |
|
|
value="2025" |
|
|
placeholder="2025" |
|
|
> |
|
|
</div> |
|
|
</div> |
|
|
<button id="clearYearFilter" class="clear-year-btn" title="Clear year filter"> |
|
|
<i class="fas fa-times"></i> |
|
|
Clear |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="conference-filter"> |
|
|
<label class="filter-label"> |
|
|
<i class="fas fa-building"></i> |
|
|
Conference: <span id="conferenceCount">All Conferences</span> |
|
|
<span class="conference-hint">(Hold Ctrl/Cmd to select multiple conferences)</span> |
|
|
</label> |
|
|
<div class="conference-select-container"> |
|
|
<select id="conferenceSelect" class="conference-select" multiple> |
|
|
|
|
|
</select> |
|
|
<div class="selected-conferences" id="selectedConferences"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<button id="clearConferenceFilter" class="clear-conference-btn" title="Clear conference filter"> |
|
|
<i class="fas fa-times"></i> |
|
|
Clear |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="abstract-filter"> |
|
|
<label class="filter-label"> |
|
|
<i class="fas fa-file-text"></i> |
|
|
Missing Information Filter |
|
|
</label> |
|
|
<div class="abstract-filter-container"> |
|
|
<div class="filter-option"> |
|
|
<label class="checkbox-label"> |
|
|
<input type="checkbox" id="includeNoAbstract" checked> |
|
|
<span class="checkmark"></span> |
|
|
Include papers without abstracts |
|
|
<span class="filter-info" id="abstractFilterInfo">(Showing all papers)</span> |
|
|
</label> |
|
|
</div> |
|
|
<div class="filter-option"> |
|
|
<label class="checkbox-label"> |
|
|
<input type="checkbox" id="includeNoAuthor" checked> |
|
|
<span class="checkmark"></span> |
|
|
Include papers without author information |
|
|
<span class="filter-info" id="authorFilterInfo">(Showing all papers)</span> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="starred-filter"> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="filter-option"> |
|
|
<label class="checkbox-label"> |
|
|
<input type="checkbox" id="showOnlyStarred"> |
|
|
<span class="checkmark"></span> |
|
|
Show only starred papers |
|
|
<span class="filter-info" id="starredFilterInfo">(Showing all papers)</span> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="export-section"> |
|
|
<div class="export-container"> |
|
|
<h3 class="export-title"> |
|
|
<i class="fas fa-save"></i> |
|
|
Save & Load Filters |
|
|
</h3> |
|
|
<div class="export-buttons"> |
|
|
<button id="saveStatus" class="export-btn save-btn" title="Save current filter status and results"> |
|
|
<i class="fas fa-download"></i> |
|
|
Save Status |
|
|
</button> |
|
|
<button id="loadStatus" class="export-btn load-btn" title="Load previously saved filter status"> |
|
|
<i class="fas fa-upload"></i> |
|
|
Load Status |
|
|
</button> |
|
|
<button id="exportBibTeX" class="export-btn export-bib-btn" title="Export current filtered results to BibTeX"> |
|
|
<i class="fas fa-file-export"></i> |
|
|
Export BibTeX |
|
|
</button> |
|
|
<button id="exportStarred" class="export-btn export-starred-btn" title="Export starred papers to BibTeX"> |
|
|
<i class="fas fa-star"></i> |
|
|
Export Starred (0) |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="pagination-section"> |
|
|
<div class="pagination-info"> |
|
|
<span id="paginationInfo">Showing 1-10 of 0 papers</span> |
|
|
</div> |
|
|
<div class="pagination-controls"> |
|
|
<button id="prevPage" class="pagination-btn" disabled> |
|
|
<i class="fas fa-chevron-left"></i> |
|
|
Previous |
|
|
</button> |
|
|
<div class="page-numbers" id="pageNumbers"> |
|
|
|
|
|
</div> |
|
|
<div class="page-input-container"> |
|
|
<label for="pageInput" class="page-input-label">Go to:</label> |
|
|
<input |
|
|
type="number" |
|
|
id="pageInput" |
|
|
class="page-input" |
|
|
min="1" |
|
|
placeholder="Page" |
|
|
title="Enter page number" |
|
|
> |
|
|
<button id="goToPage" class="page-go-btn" title="Go to page"> |
|
|
<i class="fas fa-arrow-right"></i> |
|
|
</button> |
|
|
</div> |
|
|
<button id="nextPage" class="pagination-btn" disabled> |
|
|
Next |
|
|
<i class="fas fa-chevron-right"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="papers-container"> |
|
|
<div id="papersList" class="papers-list"> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div id="loadingIndicator" class="loading"> |
|
|
<div class="spinner"></div> |
|
|
<p>Loading papers...</p> |
|
|
</div> |
|
|
|
|
|
<div id="noResults" class="no-results" style="display: none;"> |
|
|
<i class="fas fa-search"></i> |
|
|
<h3>No papers found</h3> |
|
|
<p>Try adjusting your search terms or filters</p> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
<footer class="footer"> |
|
|
<p>© 2025 Multilingual Paper Database</p> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="paperModal" class="modal"> |
|
|
<div class="modal-content"> |
|
|
<div class="modal-header"> |
|
|
<div class="modal-title-container"> |
|
|
<h2 id="modalTitle"></h2> |
|
|
<button class="star-button" id="modalStarButton" title="Add to starred"> |
|
|
<i class="far fa-star"></i> |
|
|
</button> |
|
|
<button class="find-paper-btn" id="modalFindPaperButton" title="Search for this paper on Google"> |
|
|
<i class="fas fa-search"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="modal-body"> |
|
|
<div class="paper-details"> |
|
|
<div class="detail-section"> |
|
|
<h3><i class="fas fa-users"></i> Authors</h3> |
|
|
<p id="modalAuthors"></p> |
|
|
</div> |
|
|
<div class="detail-section"> |
|
|
<h3><i class="fas fa-book"></i> Abstract</h3> |
|
|
<p id="modalAbstract"></p> |
|
|
</div> |
|
|
<div class="detail-section"> |
|
|
<h3><i class="fas fa-calendar"></i> Year</h3> |
|
|
<p id="modalYear"></p> |
|
|
</div> |
|
|
<div class="detail-section"> |
|
|
<h3><i class="fas fa-building"></i> Conference</h3> |
|
|
<p id="modalConference"></p> |
|
|
</div> |
|
|
<div class="detail-section"> |
|
|
<h3><i class="fas fa-tags"></i> Keywords</h3> |
|
|
<p id="modalKeywords"></p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script src="script.js"></script> |
|
|
</body> |
|
|
</html> |
