97 lines
5.1 KiB
HTML
97 lines
5.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</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"><img src="static/logo.png" alt="Swaipu logo" class="logo logo-wide"></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">
|
|
|
|
<div class="filter-buttons orientation-filters">
|
|
<button class="filter-btn active" data-orientation="all"><img src="static/icons/all-icon.png" alt="All" class="orientation-icon"></button>
|
|
<button class="filter-btn" data-orientation="portrait"><img src="static/icons/portrait-icon.png" alt="Portrait" class="orientation-icon"></button>
|
|
<button class="filter-btn" data-orientation="landscape"><img src="static/icons/landscape-icon.svg" alt="Landscape" class="orientation-icon"></button>
|
|
<button class="filter-btn" data-orientation="square"><img src="static/icons/square-icon.png" alt="Square" class="orientation-icon"></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="action-buttons">
|
|
|
|
<button id="btn-left" class="action-btn" aria-label="Discard">
|
|
<img src="static/icons/discard-icon.svg" alt="Discard" class="action-icon">
|
|
</button>
|
|
<button id="btn-right" class="action-btn" aria-label="Keep">
|
|
<img src="static/icons/keep-icon.svg" alt="Keep" class="action-icon">
|
|
</button>
|
|
<button id="btn-up" class="action-btn" aria-label="Favorite">
|
|
<img src="static/icons/fav-icon.svg" alt="Favorite" class="action-icon">
|
|
</button>
|
|
<button id="btn-down" class="action-btn" aria-label="Review">
|
|
<img src="static/icons/review-icon.svg" alt="Review" class="action-icon">
|
|
</button>
|
|
</div>
|
|
|
|
<div class="status-area" aria-live="polite">
|
|
|
|
<p id="image-resolution">Resolution: Loading...</p>
|
|
<p id="last-action">Last action: None</p>
|
|
<p id="image-filename">Filename: </p>
|
|
<p id="image-creation-date">Created: </p>
|
|
<details id="prompt-section" class="prompt-section"><summary>Prompt</summary>
|
|
<textarea id="image-prompt" readonly class="prompt-text"></textarea>
|
|
</details>
|
|
<!-- swipe legend removed -->
|
|
|
|
|
|
|
|
|
|
</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>
|