89 lines
4.3 KiB
HTML
89 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Image Selection 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" />
|
|
</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"><i class="fa-solid fa-images"></i> History</h1>
|
|
<a href="/" class="history-link">Back to Swipe</a>
|
|
</header>
|
|
|
|
<div class="filter-container">
|
|
<div class="filter-section">
|
|
<h4>Action</h4>
|
|
<div class="filter-buttons">
|
|
<button class="filter-btn active" data-filter="all">All</button>
|
|
<button class="filter-btn" data-filter="left">Discarded</button>
|
|
<button class="filter-btn" data-filter="right">Kept</button>
|
|
<button class="filter-btn" data-filter="up">Favorited</button>
|
|
<button class="filter-btn" data-filter="down">Review</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>Resolution</h4>
|
|
<select id="resolution-filter" class="resolution-select">
|
|
<option value="all">All Resolutions</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="action-buttons">
|
|
<button id="reset-db" class="action-btn reset-btn"><i class="fa-solid fa-trash"></i><span class="label">Reset</span></button>
|
|
<button id="select-all" class="action-btn select-btn"><i class="fa-solid fa-check-double"></i><span class="label">Select All</span></button>
|
|
<button id="deselect-all" class="action-btn select-btn"><i class="fa-regular fa-square"></i><span class="label">Deselect All</span></button>
|
|
<button id="download-selected" class="action-btn download-btn" disabled><i class="fa-solid fa-download"></i><span class="label">Download</span></button>
|
|
</div>
|
|
|
|
<div id="selection-grid" class="selection-grid">
|
|
<div class="no-selections">Loading selections...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/history.js" type="module"></script>
|
|
</body>
|
|
</html>
|