171 lines
8.1 KiB
HTML
171 lines
8.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Swaipu History</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-KfkFx7UiO/8VdM4DJ8GIzQ3pObu7q9gP/yu1ZPTM0u88Z+cIXtA8nKg9ePC60zY+XvKw5xpbIX8zahPszp5C8w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
<style>
|
|
/* Hide headers above filters */
|
|
.filter-section h4 { display: none; }
|
|
/* History page action buttons layout */
|
|
.history-actions {
|
|
display: flex;
|
|
flex-direction: row; /* force horizontal layout */
|
|
display: flex;
|
|
gap: 10px;
|
|
justify-content: center;
|
|
margin: 12px 0;
|
|
}
|
|
@media (max-width: 992px) {
|
|
.history-actions {
|
|
order: 0; /* keep above images */
|
|
}
|
|
|
|
}
|
|
.history-actions .action-btn {
|
|
flex: 1 1 0;
|
|
padding: 10px;
|
|
font-size: 0.9rem;
|
|
}
|
|
/* Sort section */
|
|
.sort-section {
|
|
margin-bottom: 15px;
|
|
margin-top: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.sort-select {
|
|
padding: 6px 10px;
|
|
border-radius: var(--border-radius);
|
|
}
|
|
.sort-dir-btn {
|
|
background: var(--primary-color);
|
|
color: white;
|
|
border: none;
|
|
border-radius: var(--border-radius);
|
|
padding: 6px 10px;
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="action-modal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close-modal" id="close-action-modal">×</span>
|
|
<h2>Change Action</h2>
|
|
<div id="modal-image-preview">
|
|
<img id="modal-preview-img" src="" alt="Image preview">
|
|
</div>
|
|
<div class="action-buttons">
|
|
<button class="action-btn" data-action="left">Discard</button>
|
|
<button class="action-btn" data-action="right">Keep</button>
|
|
<button class="action-btn" data-action="up">Favorite</button>
|
|
<button class="action-btn" data-action="down">Review</button>
|
|
</div>
|
|
<div id="modal-message"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="reset-modal" class="modal">
|
|
<div class="modal-content">
|
|
<h2>Reset Database</h2>
|
|
<p>Are you sure you want to delete all selections? This cannot be undone.</p>
|
|
<div class="reset-modal-buttons">
|
|
<button id="confirm-reset" class="danger-button">Yes, Delete All</button>
|
|
<button id="cancel-reset" class="cancel-button">Cancel</button>
|
|
</div>
|
|
<div id="reset-message"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<header class="header">
|
|
<h1 class="app-title"><a href="/" aria-label="Home"><img src="static/logo.png" alt="Swaipu logo" class="logo logo-wide"></a></h1>
|
|
</header>
|
|
|
|
<div class="search-section" style="display:flex;gap:8px;align-items:center;margin-bottom:15px;">
|
|
<input type="text" id="search-input" placeholder="Add keywords..." class="search-input">
|
|
<button id="search-button" class="action-btn search-btn" title="Add keyword"><img src="static/icons/add.svg" alt="Add" class="btn-icon"></button>
|
|
<div class="keyword-pills-container"></div>
|
|
</div>
|
|
|
|
<div class="filter-container">
|
|
<div class="filter-section">
|
|
<h4>Action</h4>
|
|
<div class="filter-buttons">
|
|
<button class="filter-btn active" data-filter="all"><img src="/static/icons/all.svg" alt="All" class="action-filter"></button>
|
|
<button class="filter-btn" data-filter="Discarded"><img src="/static/icons/discard.svg" alt="Discarded" class="action-filter"></button>
|
|
<button class="filter-btn" data-filter="Kept"><img src="/static/icons/keep.svg" alt="Kept" class="action-filter"></button>
|
|
<button class="filter-btn" data-filter="Favourited"><img src="/static/icons/fav.svg" alt="Favourited" class="action-filter"></button>
|
|
<button class="filter-btn" data-filter="Reviewing"><img src="/static/icons/review.svg" alt="Reviewing" class="action-filter"></button>
|
|
</div>
|
|
</div>
|
|
<div class="filter-section">
|
|
<h4>Orientation</h4>
|
|
<div class="filter-buttons orientation-filters">
|
|
<button class="filter-btn active" data-orientation="all">All</button>
|
|
<button class="filter-btn" data-orientation="portrait">Portrait</button>
|
|
<button class="filter-btn" data-orientation="landscape">Landscape</button>
|
|
<button class="filter-btn" data-orientation="square">Square</button>
|
|
</div>
|
|
</div>
|
|
<div class="filter-section">
|
|
<h4>NSFW</h4>
|
|
<div class="filter-buttons nsfw-filters">
|
|
<button class="filter-btn active" data-nsfw="all">All</button>
|
|
<button class="filter-btn" data-nsfw="sfw">SFW</button>
|
|
<button class="filter-btn" data-nsfw="nsfw">NSFW</button>
|
|
</div>
|
|
</div>
|
|
<div class="filter-section">
|
|
<h4>Resolution</h4>
|
|
<select id="resolution-select" class="resolution-select sort-select">
|
|
<option value="all" selected>All Resolutions</option>
|
|
</select>
|
|
<div class="resolution-pills keyword-pills-container"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sort controls -->
|
|
<div class="sort-section">
|
|
<label for="sort-field">Sort by:</label>
|
|
<select id="sort-field" class="sort-select">
|
|
<option value="swipe" selected>Swipe Date</option>
|
|
<option value="created">Created Date</option>
|
|
<option value="width">Width</option>
|
|
<option value="height">Height</option>
|
|
</select>
|
|
<button id="sort-direction" class="sort-dir-btn" title="Toggle sort direction">▼</button>
|
|
|
|
<!-- action buttons beside sort -->
|
|
<button id="toggle-blur" class="action-btn compact" title="Toggle NSFW Blur"><img src="static/icons/18.svg" class="btn-icon nsfw-icon" alt="Blur"></button>
|
|
<button id="reset-db" class="action-btn reset-btn compact"><img src="static/icons/db-clear.svg" class="btn-icon" alt="Reset DB"></button>
|
|
<button id="select-all" class="action-btn select-btn compact"><img src="static/icons/select-all.svg" class="btn-icon" alt="Select All"></button>
|
|
<button id="deselect-all" class="action-btn select-btn compact"><img src="static/icons/select-none.svg" class="btn-icon" alt="Deselect"></button>
|
|
<button id="download-selected" class="action-btn download-btn compact" disabled><img src="static/icons/zip.svg" class="btn-icon" alt="Download"><span class="count">0</span></button>
|
|
</div>
|
|
|
|
<div id="selection-grid" class="selection-grid">
|
|
<div class="no-selections">Loading selections...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="view-modal" class="modal">
|
|
<div class="modal-content">
|
|
<img id="view-image" src="" alt="Full view" style="max-width:100%;height:auto;">
|
|
<p id="view-filename"></p>
|
|
<p id="view-resolution"></p>
|
|
<p id="view-created"></p>
|
|
<pre id="view-prompt" style="white-space:pre-wrap"></pre>
|
|
<button id="close-view-modal" class="cancel-button">Close</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/history.js" type="module"></script>
|
|
</body>
|
|
</html>
|