c09461f58f
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
445 lines
8.1 KiB
CSS
445 lines
8.1 KiB
CSS
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: 'Arial', sans-serif;
|
|
}
|
|
|
|
html, body {
|
|
background-color: #f5f5f5;
|
|
color: #333;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.container {
|
|
max-width: 500px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.header {
|
|
text-align: center;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.subtitle {
|
|
color: #666;
|
|
margin-top: -10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.history-link {
|
|
display: inline-block;
|
|
margin-bottom: 10px;
|
|
padding: 5px 12px;
|
|
background-color: #333;
|
|
color: white;
|
|
text-decoration: none;
|
|
border-radius: 5px;
|
|
font-size: 0.9rem;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
.history-link:hover {
|
|
background-color: #555;
|
|
}
|
|
|
|
.swipe-container {
|
|
position: relative;
|
|
flex: 1;
|
|
min-height: 400px;
|
|
margin-bottom: 20px;
|
|
perspective: 1000px;
|
|
border-style: solid;
|
|
border-width: 8px;
|
|
border-left-color: #ff4757; /* Red - Left (Discard) */
|
|
border-right-color: #2ed573; /* Green - Right (Keep) */
|
|
border-top-color: #1e90ff; /* Blue - Top (Favorite) */
|
|
border-bottom-color: #ffa502; /* Yellow - Bottom (Review Later) */
|
|
border-radius: 15px;
|
|
}
|
|
|
|
.image-card {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
|
|
transition: transform 0.3s ease-out;
|
|
transform-origin: center center;
|
|
background-color: white;
|
|
touch-action: none; /* Prevents default touch actions like scrolling */
|
|
cursor: grab; /* Indicates the card is draggable */
|
|
}
|
|
|
|
/* Animation for new card sliding in from left (desktop) */
|
|
@keyframes slideInFromLeft {
|
|
0% {
|
|
transform: translateX(-100%) rotate(-5deg);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: translateX(0) rotate(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.image-card.new-card {
|
|
animation: slideInFromLeft 0.25s ease-out forwards;
|
|
will-change: transform, opacity;
|
|
}
|
|
|
|
/* Simple fade-in animation for mobile */
|
|
@keyframes fadeIn {
|
|
0% {
|
|
opacity: 0.4;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.image-card.new-card-mobile {
|
|
animation: fadeIn 0.2s ease-out forwards;
|
|
will-change: opacity;
|
|
}
|
|
|
|
.image-card:active {
|
|
cursor: grabbing; /* Changes cursor when actively dragging */
|
|
}
|
|
|
|
.image-card img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.loading-indicator {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
color: #999;
|
|
font-weight: bold;
|
|
opacity: 0;
|
|
transition: opacity 0.3s;
|
|
}
|
|
|
|
.image-card.loading .loading-indicator {
|
|
opacity: 1;
|
|
}
|
|
|
|
.image-card.swiping {
|
|
transition: none; /* Remove transition during active swiping */
|
|
}
|
|
|
|
.image-card.swipe-left {
|
|
transform: translateX(-350%) rotate(-15deg);
|
|
opacity: 0;
|
|
transition: transform 0.5s ease-out, opacity 0.25s ease-out;
|
|
}
|
|
|
|
.image-card.swipe-right {
|
|
transform: translateX(350%) rotate(15deg);
|
|
opacity: 0;
|
|
transition: transform 0.5s ease-out, opacity 0.25s ease-out;
|
|
}
|
|
|
|
.image-card.swipe-up {
|
|
transform: translateY(-350%) rotate(5deg);
|
|
opacity: 0;
|
|
transition: transform 0.5s ease-out, opacity 0.25s ease-out;
|
|
}
|
|
|
|
.image-card.swipe-down {
|
|
transform: translateY(350%) rotate(-5deg);
|
|
opacity: 0;
|
|
transition: transform 0.5s ease-out, opacity 0.25s ease-out;
|
|
}
|
|
|
|
.action-hint {
|
|
position: absolute;
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|
padding: 8px 15px;
|
|
border-radius: 20px;
|
|
font-weight: bold;
|
|
opacity: 0;
|
|
transition: opacity 0.3s;
|
|
}
|
|
|
|
.left-hint {
|
|
left: 10px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: #ff4757;
|
|
}
|
|
|
|
.right-hint {
|
|
right: 10px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: #2ed573;
|
|
}
|
|
|
|
.up-hint {
|
|
top: 10px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: #1e90ff;
|
|
}
|
|
|
|
.down-hint {
|
|
bottom: 10px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: #ffa502;
|
|
}
|
|
|
|
.action-buttons {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 15px 0 20px;
|
|
width: 100%;
|
|
}
|
|
|
|
.action-btn {
|
|
flex: 1;
|
|
padding: 12px 5px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
transition: all 0.2s;
|
|
margin: 0 5px;
|
|
text-align: center;
|
|
font-size: 0.9rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#btn-left {
|
|
background-color: #ff4757;
|
|
color: white;
|
|
}
|
|
|
|
#btn-right {
|
|
background-color: #2ed573;
|
|
color: white;
|
|
}
|
|
|
|
#btn-up {
|
|
background-color: #1e90ff;
|
|
color: white;
|
|
}
|
|
|
|
#btn-down {
|
|
background-color: #ffa502;
|
|
color: white;
|
|
}
|
|
|
|
.action-btn:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.action-btn:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.status-area {
|
|
text-align: center;
|
|
padding: 15px;
|
|
background-color: white;
|
|
border-radius: 5px;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
#last-action {
|
|
font-weight: bold;
|
|
margin-top: 5px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.swipe-legend {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.legend-color {
|
|
display: inline-block;
|
|
width: 15px;
|
|
height: 15px;
|
|
border-radius: 50%;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.left-color {
|
|
background-color: #ff4757;
|
|
}
|
|
|
|
.right-color {
|
|
background-color: #2ed573;
|
|
}
|
|
|
|
.up-color {
|
|
background-color: #1e90ff;
|
|
}
|
|
|
|
.down-color {
|
|
background-color: #ffa502;
|
|
}
|
|
|
|
/* Mobile-specific styles */
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
padding: 10px;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Override desktop animation for mobile */
|
|
.image-card.new-card {
|
|
animation: none;
|
|
}
|
|
|
|
.swipe-container {
|
|
min-height: 60vh;
|
|
margin: 10px 0 15px;
|
|
}
|
|
|
|
.header {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* Hide action buttons on mobile as swiping is the primary interaction */
|
|
.action-buttons {
|
|
display: none;
|
|
}
|
|
|
|
/* Hide the swipe legend on mobile to save space */
|
|
.swipe-legend {
|
|
display: none;
|
|
}
|
|
|
|
/* Make sure the history link is prominent but compact */
|
|
.history-link {
|
|
display: block;
|
|
text-align: center;
|
|
margin: 8px auto;
|
|
padding: 6px 15px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* Enhance swipe hints for better visibility on mobile */
|
|
.swipe-actions .action-hint {
|
|
font-size: 0.9rem;
|
|
padding: 5px;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
color: white;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Adjust modal for mobile */
|
|
.modal-content {
|
|
width: 90%;
|
|
margin: 20% auto;
|
|
}
|
|
}
|
|
|
|
/* Modal styles */
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 1000;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.9);
|
|
overflow: auto;
|
|
}
|
|
|
|
.modal-content {
|
|
position: relative;
|
|
margin: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 90%;
|
|
height: 90%;
|
|
max-width: 1200px;
|
|
padding: 20px;
|
|
}
|
|
|
|
#fullscreen-image {
|
|
max-width: 100%;
|
|
max-height: 85vh;
|
|
object-fit: contain;
|
|
border: 2px solid white;
|
|
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.close-modal {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 20px;
|
|
color: white;
|
|
font-size: 35px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
z-index: 1001;
|
|
}
|
|
|
|
.close-modal:hover,
|
|
.close-modal:focus {
|
|
color: #bbb;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.modal-info {
|
|
margin-top: 15px;
|
|
color: white;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
padding: 10px 20px;
|
|
border-radius: 5px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Make the card clickable */
|
|
.image-card {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.image-card::after {
|
|
content: '🔍';
|
|
position: absolute;
|
|
bottom: 10px;
|
|
right: 10px;
|
|
background-color: rgba(255, 255, 255, 0.7);
|
|
color: #333;
|
|
padding: 5px 10px;
|
|
border-radius: 50%;
|
|
font-size: 16px;
|
|
opacity: 0.7;
|
|
transition: opacity 0.3s;
|
|
}
|
|
|
|
.image-card:hover::after {
|
|
opacity: 1;
|
|
}
|