aodhan/swiper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Expanded UI

Browse Source
This commit is contained in:
Aodhan
2025-06-21 21:44:52 +01:00
parent 324a21800a
commit 1ff4a6f6d7
89 changed files with 81619 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
index.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Swipe App</title>
<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" />
@@ -11,7 +11,7 @@
<body>
<div class="container">
<header class="header">
<h1 class="app-title"><i class="fa-solid fa-images"></i> Swiper</h1>
<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>
@@ -32,39 +32,45 @@
<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>
<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">
<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>
<img src="static/icons/discard-icon.svg" alt="Discard" class="action-icon">
</button>
<button id="btn-right" class="action-btn" aria-label="Keep">
<i class="fa-solid fa-folder-plus"></i><span class="label">Keep</span>
<img src="static/icons/keep-icon.svg" alt="Keep" class="action-icon">
</button>
<button id="btn-up" class="action-btn" aria-label="Favorite">
<i class="fa-solid fa-star"></i><span class="label">Favorite</span>
<img src="static/icons/fav-icon.svg" alt="Favorite" class="action-icon">
</button>
<button id="btn-down" class="action-btn" aria-label="Review">
<i class="fa-solid fa-clock"></i><span class="label">Review</span>
<img src="static/icons/review-icon.svg" alt="Review" class="action-icon">
</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>
<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>