67 lines
3.0 KiB
HTML
67 lines
3.0 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">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>Image Swiper</h1>
|
|
<p class="subtitle">Swipe to sort your images</p>
|
|
<a href="/history.html" class="history-link">View History</a>
|
|
</div>
|
|
|
|
<div class="swipe-container">
|
|
<div class="image-card" id="current-card">
|
|
<!-- Image will be loaded here dynamically -->
|
|
<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">← Swipe Left</div>
|
|
<div class="action-hint right-hint">Swipe Right →</div>
|
|
<div class="action-hint up-hint">↑ Swipe Up</div>
|
|
<div class="action-hint down-hint">Swipe Down ↓</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="action-buttons">
|
|
<button id="btn-left" class="action-btn">Left</button>
|
|
<button id="btn-right" class="action-btn">Right</button>
|
|
<button id="btn-up" class="action-btn">Up</button>
|
|
<button id="btn-down" class="action-btn">Down</button>
|
|
</div>
|
|
|
|
<div class="status-area">
|
|
<p>Current 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> Left: Discard</div>
|
|
<div class="legend-item"><span class="legend-color right-color"></span> Right: Keep</div>
|
|
<div class="legend-item"><span class="legend-color up-color"></span> Up: Favorite</div>
|
|
<div class="legend-item"><span class="legend-color down-color"></span> Down: Review Later</div>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|