91 lines
4.7 KiB
HTML
91 lines
4.7 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 Swipe App</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
<!-- Font Awesome for button icons -->
|
|
<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 class="container">
|
|
<header class="header">
|
|
<h1 class="app-title"><i class="fa-solid fa-images"></i> Swiper</h1>
|
|
<a href="/history.html" class="history-link">View History</a>
|
|
</header>
|
|
|
|
<main class="main-section">
|
|
<div class="swipe-container">
|
|
<div class="image-card" id="current-card" role="img" aria-label="Image to be swiped">
|
|
<img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22400%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%22400%22%20height%3D%22400%22%20fill%3D%22%23e0e0e0%22%2F%3E%3Ctext%20x%3D%22200%22%20y%3D%22200%22%20font-size%3D%2220%22%20text-anchor%3D%22middle%22%20alignment-baseline%3D%22middle%22%20fill%3D%22%23999%22%3ELoading...%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Image">
|
|
<div class="loading-indicator">Loading...</div>
|
|
</div>
|
|
|
|
<div class="swipe-actions">
|
|
<div class="action-hint left-hint">Discard</div>
|
|
<div class="action-hint right-hint">Keep</div>
|
|
<div class="action-hint up-hint">Favorite</div>
|
|
<div class="action-hint down-hint">Review</div>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="side-panel">
|
|
<div class="filter-controls">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="action-buttons">
|
|
<h4>Actions</h4>
|
|
<button id="btn-left" class="action-btn" aria-label="Discard">
|
|
<i class="fa-solid fa-trash"></i><span class="label">Discard</span>
|
|
</button>
|
|
<button id="btn-right" class="action-btn" aria-label="Keep">
|
|
<i class="fa-solid fa-folder-plus"></i><span class="label">Keep</span>
|
|
</button>
|
|
<button id="btn-up" class="action-btn" aria-label="Favorite">
|
|
<i class="fa-solid fa-star"></i><span class="label">Favorite</span>
|
|
</button>
|
|
<button id="btn-down" class="action-btn" aria-label="Review">
|
|
<i class="fa-solid fa-clock"></i><span class="label">Review</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="status-area" aria-live="polite">
|
|
<h4>Status</h4>
|
|
<p id="image-resolution">Resolution: Loading...</p>
|
|
<p id="last-action">Last action: None</p>
|
|
<div class="swipe-legend">
|
|
<div class="legend-item"><span class="legend-color left-color"></span>Discard</div>
|
|
<div class="legend-item"><span class="legend-color right-color"></span>Keep</div>
|
|
<div class="legend-item"><span class="legend-color up-color"></span>Favorite</div>
|
|
<div class="legend-item"><span class="legend-color down-color"></span>Review</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Full-resolution image modal -->
|
|
<div id="fullscreen-modal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close-modal">×</span>
|
|
<img id="fullscreen-image" src="" alt="Full resolution image">
|
|
<div class="modal-info">
|
|
<p id="modal-resolution">Resolution: </p>
|
|
<p id="modal-filename">Filename: </p>
|
|
<p id="modal-creation-date">Creation Date: </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="toast" class="toast" role="status" aria-live="polite"></div>
|
|
<script src="js/main.js" type="module"></script>
|
|
</body>
|
|
</html>
|