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

Basic UI

Browse Source
This commit is contained in:
Aodhan
2025-06-20 22:27:24 +01:00
parent c09461f58f
commit 324a21800a
10 changed files with 1022 additions and 1866 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
index.html
View File

@@ -5,45 +5,70 @@
<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">
<div class="header">
<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>
</div>
</header>
<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>
<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>
<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">Discard</button>
<button id="btn-right" class="action-btn">Keep</button>
<button id="btn-up" class="action-btn">Favorite</button>
<button id="btn-down" class="action-btn">Review</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</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 -->
@@ -59,6 +84,7 @@
</div>
</div>
<script src="script.js"></script>
<div id="toast" class="toast" role="status" aria-live="polite"></div>
<script src="js/main.js" type="module"></script>
</body>
</html>