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

Enhance image swipe app mobile experience

Browse Source 
Major improvements:
- Added responsive mobile view with optimized touch interactions
- Implemented image caching to preload up to 2 images for faster transitions
- Made images enter consistently from left side regardless of swipe direction
- Enhanced swipe animations with reduced tilt and better fade-out effects
- Reduced swipe sensitivity on mobile for better tap/swipe distinction
- Removed headings and reduced history button height for more screen space
- Added progressive fade effect during manual swipes
- Sped up slide-in animations for snappier experience
- Fixed multiple edge cases for better overall stability
This commit is contained in:
Aodhan
2025-05-29 01:31:26 +01:00
parent ad0e64e000
commit c09461f58f
5 changed files with 1275 additions and 465 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

@@ -9,8 +9,6 @@
<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>
@@ -30,10 +28,10 @@
</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>
<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">
@@ -43,7 +41,7 @@
<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 class="legend-item"><span class="legend-color down-color"></span> Down: Review</div>
</div>
</div>
</div>