1528 lines
36 KiB
Vue
1528 lines
36 KiB
Vue
<template>
|
||
<div class="modern-swipe-view">
|
||
<!-- Header Section -->
|
||
<div class="swipe-header">
|
||
<div class="container">
|
||
<h2 class="section-title">Поиск</h2>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Loading State -->
|
||
<div v-if="loading" class="loading-section">
|
||
<div class="loading-spinner">
|
||
<div class="spinner"></div>
|
||
<p>Загрузка анкет...</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Error State -->
|
||
<div v-if="error" class="error-section">
|
||
<div class="container">
|
||
<div class="error-card">
|
||
<i class="bi-exclamation-triangle"></i>
|
||
<h3>Ошибка загрузки</h3>
|
||
<p>{{ error }}</p>
|
||
<button class="retry-btn" @click="fetchSuggestions">Попробовать снова</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- No Suggestions State -->
|
||
<div v-if="!loading && suggestions.length === 0 && !error" class="empty-section">
|
||
<div class="container">
|
||
<div class="empty-card">
|
||
<i class="bi-person-x"></i>
|
||
<h3>Нет анкет</h3>
|
||
<p>Пока нет доступных анкет. Попробуй зайти позже!</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Main Content with Swipeable Cards -->
|
||
<div v-if="!loading && suggestions.length > 0 && !error" class="swipe-content">
|
||
<div class="container">
|
||
<div class="swipe-area" ref="swipeArea">
|
||
<transition-group name="card-stack" tag="div" class="card-stack-container">
|
||
<div
|
||
v-for="(user, index) in visibleUsers"
|
||
:key="user._id"
|
||
class="swipe-card"
|
||
:class="{
|
||
'active': index === 0,
|
||
'next': index === 1,
|
||
'swiping-left': swipeDirection === 'left' && index === 0,
|
||
'swiping-right': swipeDirection === 'right' && index === 0
|
||
}"
|
||
:style="index === 0 ? cardStyle : {}"
|
||
@touchstart="startTouch"
|
||
@touchmove="moveTouch"
|
||
@touchend="endTouch"
|
||
@mousedown="startDrag"
|
||
@mousemove="moveDrag"
|
||
@mouseup="endDrag"
|
||
@mouseleave="cancelDrag"
|
||
>
|
||
<!-- Photo Section -->
|
||
<div class="card-photo-section">
|
||
<!-- Photo Carousel -->
|
||
<div class="photo-carousel">
|
||
<!-- Option 1: Photos Array -->
|
||
<div
|
||
v-if="user.photos && user.photos.length > 0"
|
||
class="carousel-wrapper"
|
||
>
|
||
<div class="carousel-inner">
|
||
<div
|
||
v-for="(photo, photoIndex) in user.photos"
|
||
:key="photo.public_id || photo._id"
|
||
class="carousel-slide"
|
||
:class="{ 'active': currentPhotoIndex[user._id] === photoIndex }"
|
||
>
|
||
<img
|
||
:src="photo.url"
|
||
class="photo-image"
|
||
:alt="'Фото ' + user.name"
|
||
@error="onImageError($event, user, photo, 'carousel')"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Photo Navigation Dots -->
|
||
<div class="carousel-dots" v-if="user.photos.length > 1">
|
||
<span
|
||
v-for="(photo, photoIndex) in user.photos"
|
||
:key="`dot-${photo._id}`"
|
||
class="dot"
|
||
:class="{ 'active': currentPhotoIndex[user._id] === photoIndex }"
|
||
@click.stop="changePhoto(user._id, photoIndex)"
|
||
></span>
|
||
</div>
|
||
|
||
<!-- Previous/Next buttons -->
|
||
<button
|
||
v-if="user.photos.length > 1"
|
||
class="carousel-nav prev"
|
||
@click.stop="prevPhoto(user._id)"
|
||
>
|
||
<i class="bi-chevron-left"></i>
|
||
</button>
|
||
<button
|
||
v-if="user.photos.length > 1"
|
||
class="carousel-nav next"
|
||
@click.stop="nextPhoto(user._id)"
|
||
>
|
||
<i class="bi-chevron-right"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Option 2: Single Photo -->
|
||
<div v-else-if="user.mainPhotoUrl" class="single-photo">
|
||
<img
|
||
:src="user.mainPhotoUrl"
|
||
class="photo-image"
|
||
:alt="'Фото ' + user.name"
|
||
@error="onImageError($event, user, { url: user.mainPhotoUrl }, 'mainPhoto')"
|
||
/>
|
||
</div>
|
||
|
||
<!-- Option 3: No Photo Placeholder -->
|
||
<div v-else class="no-photo">
|
||
<i class="bi-person"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Action Indicators -->
|
||
<div class="swipe-indicators">
|
||
<div
|
||
class="like-indicator"
|
||
:class="{ 'visible': swipeDirection === 'right' && index === 0 }"
|
||
>
|
||
<i class="bi-heart-fill"></i>
|
||
</div>
|
||
<div
|
||
class="pass-indicator"
|
||
:class="{ 'visible': swipeDirection === 'left' && index === 0 }"
|
||
>
|
||
<i class="bi-x-lg"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- User Info Overlay -->
|
||
<div class="user-info-overlay">
|
||
<h3 class="user-name">{{ user.name }}<span class="user-age">, {{ user.age || '?' }}</span></h3>
|
||
<p class="user-gender">{{ formatGender(user.gender) }}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- User Details Section -->
|
||
<div class="card-details-section">
|
||
<div class="bio-container">
|
||
<p class="bio-text">{{ user.bio || 'Нет описания.' }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</transition-group>
|
||
</div>
|
||
|
||
<!-- Action Buttons -->
|
||
<div class="action-buttons">
|
||
<button
|
||
class="action-btn pass-btn"
|
||
:disabled="actionLoading"
|
||
@click="handlePass"
|
||
>
|
||
<div class="btn-icon">
|
||
<i class="bi-x-lg"></i>
|
||
</div>
|
||
</button>
|
||
<button
|
||
class="action-btn like-btn"
|
||
:disabled="actionLoading"
|
||
@click="handleLike"
|
||
>
|
||
<div class="btn-icon">
|
||
<i class="bi-heart-fill"></i>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Match Notification -->
|
||
<transition name="match-popup">
|
||
<div v-if="matchOccurred" class="match-popup">
|
||
<div class="match-content">
|
||
<div class="match-header">
|
||
<i class="bi-stars"></i>
|
||
<h3>Вы понравились друг другу!</h3>
|
||
</div>
|
||
<div class="match-actions">
|
||
<button class="match-btn secondary" @click="continueSearching">
|
||
Продолжить поиск
|
||
</button>
|
||
<button class="match-btn primary" @click="goToChats">
|
||
Начать общение
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</transition>
|
||
|
||
<!-- Background Overlay for Match -->
|
||
<div
|
||
v-if="matchOccurred"
|
||
class="overlay"
|
||
@click="continueSearching"
|
||
></div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, computed, reactive, watch, onUnmounted, nextTick } from 'vue';
|
||
import api from '@/services/api';
|
||
import { useAuth } from '@/auth';
|
||
import router from '@/router';
|
||
|
||
const { isAuthenticated, logout } = useAuth();
|
||
|
||
// Основные данные
|
||
const suggestions = ref([]);
|
||
const currentIndex = ref(0);
|
||
const loading = ref(true);
|
||
const actionLoading = ref(false);
|
||
const error = ref('');
|
||
const matchOccurred = ref(false);
|
||
const matchedUserId = ref(null);
|
||
const swipeArea = ref(null);
|
||
|
||
// Для карусели фото
|
||
const currentPhotoIndex = reactive({});
|
||
|
||
// Для свайпа
|
||
const swipeDirection = ref(null);
|
||
const touchStartX = ref(0);
|
||
const touchStartY = ref(0);
|
||
const touchEndX = ref(0);
|
||
const touchEndY = ref(0);
|
||
const swipeThreshold = 100; // Минимальное расстояние для срабатывания свайпа
|
||
const isDragging = ref(false);
|
||
const dragStartX = ref(0);
|
||
const dragStartY = ref(0);
|
||
const dragOffset = ref({ x: 0, y: 0 });
|
||
const cardStyle = ref({});
|
||
const swipeAngle = 12; // Угол наклона карты при свайпе (в градусах)
|
||
|
||
// Вычисляемые свойства
|
||
const currentUserToSwipe = computed(() => {
|
||
if (suggestions.value.length > 0 && currentIndex.value < suggestions.value.length) {
|
||
return suggestions.value[currentIndex.value];
|
||
}
|
||
return null;
|
||
});
|
||
|
||
const visibleUsers = computed(() => {
|
||
// Показываем текущего пользователя и следующего (для эффекта стека)
|
||
const users = [];
|
||
if (currentUserToSwipe.value) {
|
||
users.push(currentUserToSwipe.value);
|
||
|
||
if (currentIndex.value + 1 < suggestions.value.length) {
|
||
users.push(suggestions.value[currentIndex.value + 1]);
|
||
}
|
||
}
|
||
return users;
|
||
});
|
||
|
||
// Методы управления каруселью фото
|
||
const initPhotoIndices = () => {
|
||
suggestions.value.forEach(user => {
|
||
if (user && user._id) {
|
||
if (!currentPhotoIndex[user._id]) {
|
||
// Определяем начальное фото (основное или первое в списке)
|
||
if (user.photos && user.photos.length > 0) {
|
||
const profilePhotoIndex = user.photos.findIndex(p => p.isProfilePhoto);
|
||
currentPhotoIndex[user._id] = profilePhotoIndex >= 0 ? profilePhotoIndex : 0;
|
||
} else {
|
||
currentPhotoIndex[user._id] = 0;
|
||
}
|
||
}
|
||
}
|
||
});
|
||
};
|
||
|
||
const changePhoto = (userId, index) => {
|
||
if (isDragging.value) return; // Не меняем фото во время свайпа
|
||
currentPhotoIndex[userId] = index;
|
||
};
|
||
|
||
const nextPhoto = (userId) => {
|
||
if (isDragging.value) return;
|
||
const user = suggestions.value.find(u => u._id === userId);
|
||
if (user && user.photos && user.photos.length > 0) {
|
||
currentPhotoIndex[userId] = (currentPhotoIndex[userId] + 1) % user.photos.length;
|
||
}
|
||
};
|
||
|
||
const prevPhoto = (userId) => {
|
||
if (isDragging.value) return;
|
||
const user = suggestions.value.find(u => u._id === userId);
|
||
if (user && user.photos && user.photos.length > 0) {
|
||
currentPhotoIndex[userId] = (currentPhotoIndex[userId] - 1 + user.photos.length) % user.photos.length;
|
||
}
|
||
};
|
||
|
||
// Методы для свайпа на мобильных
|
||
const startTouch = (event) => {
|
||
touchStartX.value = event.touches[0].clientX;
|
||
touchStartY.value = event.touches[0].clientY;
|
||
swipeDirection.value = null;
|
||
};
|
||
|
||
const moveTouch = (event) => {
|
||
if (!touchStartX.value) return;
|
||
|
||
const currentX = event.touches[0].clientX;
|
||
const currentY = event.touches[0].clientY;
|
||
|
||
// Сохраняем текущую позицию для использования в endTouch
|
||
touchEndX.value = currentX;
|
||
touchEndY.value = currentY;
|
||
|
||
const diffX = currentX - touchStartX.value;
|
||
const diffY = currentY - touchStartY.value;
|
||
|
||
// Применяем точное смещение к карточке, чтобы она следовала за пальцем
|
||
// Нет дополнительных коэффициентов, карточка перемещается точно на то же расстояние, что и палец
|
||
if (Math.abs(diffX) > Math.abs(diffY)) {
|
||
// Определяем направление свайпа для индикаторов
|
||
if (diffX > 20) {
|
||
swipeDirection.value = 'right';
|
||
} else if (diffX < -20) {
|
||
swipeDirection.value = 'left';
|
||
} else {
|
||
swipeDirection.value = null;
|
||
}
|
||
|
||
// Применяем небольшой поворот для естественности, но меньший чем был
|
||
// 0.05 вместо 0.1, чтобы эффект был легче
|
||
const rotate = diffX * 0.05;
|
||
|
||
cardStyle.value = {
|
||
transform: `translateX(${diffX}px) rotate(${rotate}deg)`,
|
||
transition: 'none'
|
||
};
|
||
|
||
// Блокируем скролл страницы
|
||
event.preventDefault();
|
||
}
|
||
};
|
||
|
||
const endTouch = () => {
|
||
const diffX = touchEndX.value - touchStartX.value;
|
||
|
||
if (Math.abs(diffX) > swipeThreshold) {
|
||
// Если свайп был достаточно длинный, анимируем к краю экрана
|
||
if (diffX > 0) {
|
||
cardStyle.value = {
|
||
transform: `translateX(120%) rotate(${swipeAngle}deg)`,
|
||
transition: 'transform 0.3s ease'
|
||
};
|
||
// Плавная анимация уходящей карточки
|
||
setTimeout(() => handleLike(), 300);
|
||
} else {
|
||
cardStyle.value = {
|
||
transform: `translateX(-120%) rotate(-${swipeAngle}deg)`,
|
||
transition: 'transform 0.3s ease'
|
||
};
|
||
// Плавная анимация уходящей карточки
|
||
setTimeout(() => handlePass(), 300);
|
||
}
|
||
} else {
|
||
// Если свайп недостаточный, возвращаем карточку в исходное положение с анимацией
|
||
cardStyle.value = {
|
||
transform: 'none',
|
||
transition: 'transform 0.3s ease'
|
||
};
|
||
swipeDirection.value = null;
|
||
}
|
||
|
||
// Сбрасываем значения
|
||
touchStartX.value = 0;
|
||
touchStartY.value = 0;
|
||
touchEndX.value = 0;
|
||
touchEndY.value = 0;
|
||
};
|
||
|
||
// Методы для свайпа на десктопе (drag)
|
||
const startDrag = (event) => {
|
||
isDragging.value = true;
|
||
dragStartX.value = event.clientX;
|
||
dragStartY.value = event.clientY;
|
||
dragOffset.value = { x: 0, y: 0 };
|
||
swipeDirection.value = null;
|
||
|
||
// Предотвращаем выделение текста
|
||
event.preventDefault();
|
||
};
|
||
|
||
const moveDrag = (event) => {
|
||
if (!isDragging.value) return;
|
||
|
||
dragOffset.value = {
|
||
x: event.clientX - dragStartX.value,
|
||
y: event.clientY - dragStartY.value
|
||
};
|
||
|
||
// Определяем направление свайпа для индикаторов
|
||
if (Math.abs(dragOffset.value.x) > Math.abs(dragOffset.value.y)) {
|
||
if (dragOffset.value.x > 20) {
|
||
swipeDirection.value = 'right';
|
||
} else if (dragOffset.value.x < -20) {
|
||
swipeDirection.value = 'left';
|
||
} else {
|
||
swipeDirection.value = null;
|
||
}
|
||
|
||
// Применяем небольшой поворот для естественности (уменьшен)
|
||
const rotate = dragOffset.value.x * 0.05;
|
||
|
||
// Карточка следует точно за курсором, без дополнительных коэффициентов
|
||
cardStyle.value = {
|
||
transform: `translateX(${dragOffset.value.x}px) rotate(${rotate}deg)`,
|
||
transition: 'none'
|
||
};
|
||
}
|
||
|
||
event.preventDefault();
|
||
};
|
||
|
||
const endDrag = () => {
|
||
if (!isDragging.value) return;
|
||
|
||
if (Math.abs(dragOffset.value.x) > swipeThreshold) {
|
||
// Если перетаскивание было достаточно большим, выполняем действие лайка/пропуска с анимацией
|
||
if (dragOffset.value.x > 0) {
|
||
cardStyle.value = {
|
||
transform: `translateX(120%) rotate(${swipeAngle}deg)`,
|
||
transition: 'transform 0.3s ease'
|
||
};
|
||
// Плавная анимация уходящей карточки
|
||
setTimeout(() => handleLike(), 300);
|
||
} else {
|
||
cardStyle.value = {
|
||
transform: `translateX(-120%) rotate(-${swipeAngle}deg)`,
|
||
transition: 'transform 0.3s ease'
|
||
};
|
||
// Плавная анимация уходящей карточки
|
||
setTimeout(() => handlePass(), 300);
|
||
}
|
||
} else {
|
||
// Если перетаскивание небольшое, плавно возвращаем карточку в исходное положение
|
||
cardStyle.value = {
|
||
transform: 'none',
|
||
transition: 'transform 0.3s ease'
|
||
};
|
||
swipeDirection.value = null;
|
||
}
|
||
|
||
isDragging.value = false;
|
||
};
|
||
|
||
const cancelDrag = () => {
|
||
if (isDragging.value) {
|
||
cardStyle.value = {
|
||
transform: 'none',
|
||
transition: 'transform 0.3s ease'
|
||
};
|
||
swipeDirection.value = null;
|
||
isDragging.value = false;
|
||
}
|
||
};
|
||
|
||
// Основные функции
|
||
const fetchSuggestions = async () => {
|
||
loading.value = true;
|
||
error.value = '';
|
||
matchOccurred.value = false;
|
||
|
||
try {
|
||
console.log('[SwipeView] Запрос предложений...');
|
||
const response = await api.getSuggestions();
|
||
suggestions.value = response.data;
|
||
currentIndex.value = 0;
|
||
|
||
console.log('[SwipeView] Предложения загружены:', suggestions.value);
|
||
|
||
// Инициализируем индексы фото для карусели
|
||
nextTick(() => {
|
||
initPhotoIndices();
|
||
});
|
||
|
||
} catch (err) {
|
||
console.error('[SwipeView] Ошибка при загрузке предложений:', err.response ? err.response.data : err.message);
|
||
error.value = (err.response && err.response.data && err.response.data.message)
|
||
? err.response.data.message
|
||
: 'Не удалось загрузить анкеты. Попробуйте позже.';
|
||
|
||
if (err.response && err.response.status === 401) {
|
||
await logout();
|
||
}
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
};
|
||
|
||
const handleAction = async (actionType) => {
|
||
if (!currentUserToSwipe.value || actionLoading.value) return;
|
||
|
||
actionLoading.value = true;
|
||
error.value = '';
|
||
|
||
if (actionType !== 'like') {
|
||
matchOccurred.value = false;
|
||
}
|
||
|
||
const targetUserId = currentUserToSwipe.value._id;
|
||
|
||
try {
|
||
let response;
|
||
if (actionType === 'like') {
|
||
console.log(`[SwipeView] Лайк пользователя: ${targetUserId}`);
|
||
response = await api.likeUser(targetUserId);
|
||
} else {
|
||
console.log(`[SwipeView] Пропуск пользователя: ${targetUserId}`);
|
||
response = await api.passUser(targetUserId);
|
||
}
|
||
|
||
console.log(`[SwipeView] Ответ на ${actionType}:`, response.data);
|
||
|
||
if (response.data.isMatch) {
|
||
matchOccurred.value = true;
|
||
matchedUserId.value = targetUserId;
|
||
} else {
|
||
moveToNextUser();
|
||
}
|
||
|
||
} catch (err) {
|
||
console.error(`[SwipeView] Ошибка при ${actionType}:`, err.response ? err.response.data : err.message);
|
||
error.value = `Ошибка при ${actionType === 'like' ? 'лайке' : 'пропуске'}. ${err.response?.data?.message || 'Попробуйте снова.'}`;
|
||
|
||
if (err.response && err.response.status === 401) {
|
||
await logout();
|
||
} else {
|
||
setTimeout(() => { error.value = ''; }, 3000);
|
||
}
|
||
} finally {
|
||
actionLoading.value = false;
|
||
}
|
||
};
|
||
|
||
const handleLike = () => {
|
||
// Анимация свайпа вправо
|
||
swipeDirection.value = 'right';
|
||
cardStyle.value = {
|
||
transform: `translateX(120%) rotate(${swipeAngle}deg)`,
|
||
transition: 'transform 0.5s ease'
|
||
};
|
||
|
||
// Задержка перед вызовом API
|
||
setTimeout(() => {
|
||
handleAction('like');
|
||
}, 300);
|
||
};
|
||
|
||
const handlePass = () => {
|
||
// Анимация свайпа влево
|
||
swipeDirection.value = 'left';
|
||
cardStyle.value = {
|
||
transform: `translateX(-120%) rotate(-${swipeAngle}deg)`,
|
||
transition: 'transform 0.5s ease'
|
||
};
|
||
|
||
// Задержка перед вызовом API
|
||
setTimeout(() => {
|
||
handleAction('pass');
|
||
}, 300);
|
||
};
|
||
|
||
const moveToNextUser = () => {
|
||
// Сбрасываем стили карточки
|
||
cardStyle.value = {
|
||
transform: 'none',
|
||
transition: 'none'
|
||
};
|
||
swipeDirection.value = null;
|
||
|
||
if (currentIndex.value < suggestions.value.length - 1) {
|
||
currentIndex.value++;
|
||
} else {
|
||
console.log('[SwipeView] Предложения закончились, перезагружаем...');
|
||
fetchSuggestions();
|
||
}
|
||
};
|
||
|
||
const continueSearching = () => {
|
||
matchOccurred.value = false;
|
||
moveToNextUser();
|
||
};
|
||
|
||
const goToChats = () => {
|
||
matchOccurred.value = false;
|
||
router.push('/chats');
|
||
};
|
||
|
||
const formatGender = (gender) => {
|
||
if (gender === 'male') return 'Мужчина';
|
||
if (gender === 'female') return 'Женщина';
|
||
if (gender === 'other') return 'Другой';
|
||
return '';
|
||
};
|
||
|
||
const onImageError = (event, userOnError, photoInfo, sourceType) => {
|
||
console.warn(
|
||
`SwipeView: Не удалось загрузить изображение (Источник: ${sourceType}).`,
|
||
{
|
||
src: event.target.src,
|
||
user: userOnError.name,
|
||
userId: userOnError._id,
|
||
photo_id: photoInfo._id,
|
||
photo_url: photoInfo.url,
|
||
isProfilePhotoFlag: photoInfo.isProfilePhoto,
|
||
event_type: event.type
|
||
}
|
||
);
|
||
};
|
||
|
||
// Обработчики событий жизненного цикла
|
||
onMounted(() => {
|
||
if (isAuthenticated.value) {
|
||
fetchSuggestions();
|
||
} else {
|
||
error.value = "Пожалуйста, войдите в систему, чтобы просматривать анкеты.";
|
||
loading.value = false;
|
||
}
|
||
|
||
// Предотвращаем скролл страницы при свайпе
|
||
if (swipeArea.value) {
|
||
swipeArea.value.addEventListener('touchmove', (e) => {
|
||
if (isDragging.value) {
|
||
e.preventDefault();
|
||
}
|
||
}, { passive: false });
|
||
}
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
// Удаляем слушатели событий
|
||
if (swipeArea.value) {
|
||
swipeArea.value.removeEventListener('touchmove', null);
|
||
}
|
||
});
|
||
|
||
// Следим за изменениями в списке предложений
|
||
watch(suggestions, () => {
|
||
initPhotoIndices();
|
||
}, { deep: true });
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* Global Reset and Base Styles */
|
||
.modern-swipe-view {
|
||
min-height: 100vh;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
background-attachment: fixed;
|
||
background-size: cover;
|
||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
margin: 0;
|
||
padding: 0;
|
||
width: 100%;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.container {
|
||
max-width: 640px;
|
||
margin: 0 auto;
|
||
width: 100%;
|
||
padding: 0 15px;
|
||
}
|
||
|
||
/* Header Section */
|
||
.swipe-header {
|
||
background: rgba(33, 33, 60, 0.8);
|
||
backdrop-filter: blur(10px);
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||
padding: 1rem 0;
|
||
color: white;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 10;
|
||
}
|
||
|
||
.section-title {
|
||
margin: 0;
|
||
font-size: 1.5rem;
|
||
text-align: center;
|
||
font-weight: 600;
|
||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
/* Loading State */
|
||
.loading-section {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
min-height: 400px;
|
||
flex-grow: 1;
|
||
color: white;
|
||
}
|
||
|
||
.loading-spinner {
|
||
text-align: center;
|
||
}
|
||
|
||
.spinner {
|
||
width: 50px;
|
||
height: 50px;
|
||
border: 4px solid rgba(255, 255, 255, 0.3);
|
||
border-left: 4px solid white;
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
margin: 0 auto 1rem;
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
|
||
/* Error and Empty States */
|
||
.error-section, .empty-section {
|
||
padding: 4rem 0;
|
||
flex-grow: 1;
|
||
}
|
||
|
||
.error-card, .empty-card {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
backdrop-filter: blur(10px);
|
||
border-radius: 20px;
|
||
padding: 3rem;
|
||
text-align: center;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.error-card i, .empty-card i {
|
||
font-size: 3rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.error-card i {
|
||
color: #dc3545;
|
||
}
|
||
|
||
.empty-card i {
|
||
color: #6c757d;
|
||
}
|
||
|
||
.error-card h3, .empty-card h3 {
|
||
color: #495057;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.retry-btn {
|
||
background: linear-gradient(45deg, #667eea, #764ba2);
|
||
color: white;
|
||
border: none;
|
||
padding: 0.75rem 2rem;
|
||
border-radius: 50px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.retry-btn:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
|
||
}
|
||
|
||
/* Main Content */
|
||
.swipe-content {
|
||
flex-grow: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 1rem 0;
|
||
}
|
||
|
||
/* Swipe Area */
|
||
.swipe-area {
|
||
position: relative;
|
||
height: 68vh;
|
||
max-height: 680px;
|
||
min-height: 450px;
|
||
margin: 0 auto;
|
||
width: 100%;
|
||
perspective: 1000px;
|
||
touch-action: none;
|
||
user-select: none;
|
||
}
|
||
|
||
/* Card Stack */
|
||
.card-stack-container {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
perspective: 1000px;
|
||
}
|
||
|
||
/* Swipe Card */
|
||
.swipe-card {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 20px;
|
||
background-color: white;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
|
||
overflow: hidden;
|
||
transition: transform 0.3s ease, opacity 0.3s ease, scale 0.3s ease;
|
||
cursor: grab;
|
||
will-change: transform;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.swipe-card.active {
|
||
z-index: 10;
|
||
}
|
||
|
||
.swipe-card.next {
|
||
z-index: 5;
|
||
transform: scale(0.95) translateY(15px);
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* Card Animations */
|
||
.swipe-card.swiping-left {
|
||
animation: swipeLeft 0.5s forwards;
|
||
}
|
||
|
||
.swipe-card.swiping-right {
|
||
animation: swipeRight 0.5s forwards;
|
||
}
|
||
|
||
@keyframes swipeLeft {
|
||
to {
|
||
transform: translateX(-120%) rotate(-12deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@keyframes swipeRight {
|
||
to {
|
||
transform: translateX(120%) rotate(12deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
/* Card-Stack Transitions */
|
||
.card-stack-enter-active, .card-stack-leave-active {
|
||
transition: transform 0.5s ease, opacity 0.5s ease;
|
||
}
|
||
|
||
.card-stack-enter-from, .card-stack-leave-to {
|
||
opacity: 0;
|
||
transform: translateX(100%) rotate(5deg);
|
||
}
|
||
|
||
/* Photo Section */
|
||
.card-photo-section {
|
||
flex: 1;
|
||
position: relative;
|
||
min-height: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* Photo Carousel */
|
||
.photo-carousel {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
}
|
||
|
||
.carousel-wrapper {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.carousel-inner {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
}
|
||
|
||
.carousel-slide {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
opacity: 0;
|
||
transition: opacity 0.5s ease;
|
||
}
|
||
|
||
.carousel-slide.active {
|
||
opacity: 1;
|
||
}
|
||
|
||
.photo-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
/* Carousel Navigation */
|
||
.carousel-nav {
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
background: rgba(255, 255, 255, 0.7);
|
||
border: none;
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
z-index: 5;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.carousel-nav:hover {
|
||
background: rgba(255, 255, 255, 0.9);
|
||
transform: translateY(-50%) scale(1.1);
|
||
}
|
||
|
||
.carousel-nav.prev {
|
||
left: 10px;
|
||
}
|
||
|
||
.carousel-nav.next {
|
||
right: 10px;
|
||
}
|
||
|
||
/* Carousel Dots */
|
||
.carousel-dots {
|
||
position: absolute;
|
||
bottom: 15px;
|
||
left: 0;
|
||
right: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
z-index: 5;
|
||
}
|
||
|
||
.dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background-color: rgba(255, 255, 255, 0.5);
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.dot.active {
|
||
background-color: white;
|
||
transform: scale(1.3);
|
||
}
|
||
|
||
/* Single Photo */
|
||
.single-photo {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
/* No Photo Placeholder */
|
||
.no-photo {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: #e9ecef;
|
||
}
|
||
|
||
.no-photo i {
|
||
font-size: 5rem;
|
||
color: #adb5bd;
|
||
}
|
||
|
||
/* Swipe Indicators */
|
||
.swipe-indicators {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.like-indicator, .pass-indicator {
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%) scale(0);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100px;
|
||
height: 100px;
|
||
border-radius: 50%;
|
||
font-size: 3rem;
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||
}
|
||
|
||
.like-indicator {
|
||
right: 20%;
|
||
background-color: rgba(40, 167, 69, 0.8);
|
||
color: white;
|
||
}
|
||
|
||
.pass-indicator {
|
||
left: 20%;
|
||
background-color: rgba(220, 53, 69, 0.8);
|
||
color: white;
|
||
}
|
||
|
||
.like-indicator.visible, .pass-indicator.visible {
|
||
opacity: 1;
|
||
transform: translateY(-50%) scale(1);
|
||
}
|
||
|
||
/* User Info Overlay */
|
||
.user-info-overlay {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
|
||
color: white;
|
||
padding: 20px;
|
||
text-align: left;
|
||
}
|
||
|
||
.user-name {
|
||
font-size: 1.8rem;
|
||
margin: 0;
|
||
font-weight: 600;
|
||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.user-age {
|
||
font-weight: normal;
|
||
}
|
||
|
||
.user-gender {
|
||
margin: 5px 0 0;
|
||
opacity: 0.9;
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
/* Card Details */
|
||
.card-details-section {
|
||
padding: 15px;
|
||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.bio-container {
|
||
max-height: 80px;
|
||
overflow-y: auto;
|
||
scrollbar-width: thin;
|
||
scrollbar-color: rgba(102, 126, 234, 0.5) rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.bio-container::-webkit-scrollbar {
|
||
width: 4px;
|
||
}
|
||
|
||
.bio-container::-webkit-scrollbar-track {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.bio-container::-webkit-scrollbar-thumb {
|
||
background-color: rgba(102, 126, 234, 0.5);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.bio-text {
|
||
margin: 0;
|
||
font-size: 0.95rem;
|
||
line-height: 1.5;
|
||
color: #333;
|
||
}
|
||
|
||
/* Action Buttons */
|
||
.action-buttons {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 20px;
|
||
margin-top: 20px;
|
||
padding-bottom: 20px;
|
||
}
|
||
|
||
.action-btn {
|
||
width: 70px;
|
||
height: 70px;
|
||
border-radius: 50%;
|
||
border: none;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.btn-icon {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 50%;
|
||
font-size: 1.8rem;
|
||
}
|
||
|
||
.pass-btn {
|
||
background-color: white;
|
||
color: #dc3545;
|
||
}
|
||
|
||
.pass-btn:hover:not(:disabled) {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 8px 15px rgba(220, 53, 69, 0.3);
|
||
}
|
||
|
||
.like-btn {
|
||
background-color: white;
|
||
color: #28a745;
|
||
}
|
||
|
||
.like-btn:hover:not(:disabled) {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 8px 15px rgba(40, 167, 69, 0.3);
|
||
}
|
||
|
||
.action-btn:disabled {
|
||
opacity: 0.6;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
/* Match Popup */
|
||
.match-popup {
|
||
position: fixed;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
background: white;
|
||
border-radius: 20px;
|
||
padding: 2rem;
|
||
width: 90%;
|
||
max-width: 400px;
|
||
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
|
||
text-align: center;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.match-header {
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.match-header i {
|
||
font-size: 3rem;
|
||
color: #ff6b6b;
|
||
display: block;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.match-header h3 {
|
||
font-size: 1.5rem;
|
||
color: #333;
|
||
margin: 0;
|
||
}
|
||
|
||
.match-actions {
|
||
display: flex;
|
||
gap: 1rem;
|
||
justify-content: center;
|
||
}
|
||
|
||
.match-btn {
|
||
flex: 1;
|
||
padding: 0.8rem 1rem;
|
||
border-radius: 50px;
|
||
font-weight: 600;
|
||
border: none;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.match-btn.primary {
|
||
background: linear-gradient(45deg, #667eea, #764ba2);
|
||
color: white;
|
||
}
|
||
|
||
.match-btn.secondary {
|
||
background: #f1f3f5;
|
||
color: #495057;
|
||
}
|
||
|
||
.match-btn:hover {
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.match-btn.primary:hover {
|
||
box-shadow: 0 6px 15px rgba(102, 126, 234, 0.4);
|
||
}
|
||
|
||
/* Overlay */
|
||
.overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
backdrop-filter: blur(4px);
|
||
z-index: 999;
|
||
}
|
||
|
||
/* Match Popup Animation */
|
||
.match-popup-enter-active, .match-popup-leave-active {
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.match-popup-enter-from, .match-popup-leave-to {
|
||
transform: translate(-50%, -50%) scale(0.9);
|
||
opacity: 0;
|
||
}
|
||
|
||
/* Responsive Adjustments */
|
||
@media (max-width: 576px) {
|
||
.swipe-area {
|
||
height: 60vh;
|
||
min-height: 400px;
|
||
}
|
||
|
||
.action-btn {
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
|
||
.user-name {
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.card-details-section {
|
||
padding: 10px;
|
||
}
|
||
|
||
.bio-container {
|
||
max-height: 60px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 1.3rem;
|
||
}
|
||
|
||
.like-indicator, .pass-indicator {
|
||
width: 80px;
|
||
height: 80px;
|
||
font-size: 2.5rem;
|
||
}
|
||
|
||
.carousel-nav {
|
||
width: 32px;
|
||
height: 32px;
|
||
}
|
||
|
||
/* Match Popup адаптация для мобильных */
|
||
.match-popup {
|
||
width: 95%;
|
||
max-width: 340px;
|
||
padding: 1.5rem 1rem;
|
||
}
|
||
|
||
.match-header i {
|
||
font-size: 2.5rem;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.match-header h3 {
|
||
font-size: 1.3rem;
|
||
}
|
||
|
||
.match-actions {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.match-btn {
|
||
padding: 0.7rem 0.8rem;
|
||
font-size: 0.95rem;
|
||
}
|
||
}
|
||
|
||
/* Small phones */
|
||
@media (max-width: 375px) {
|
||
.swipe-area {
|
||
height: 55vh;
|
||
min-height: 350px;
|
||
}
|
||
|
||
.action-btn {
|
||
width: 50px;
|
||
height: 50px;
|
||
}
|
||
|
||
.user-name {
|
||
font-size: 1.3rem;
|
||
}
|
||
|
||
.user-gender {
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.bio-text {
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.action-buttons {
|
||
gap: 15px;
|
||
}
|
||
|
||
.like-indicator, .pass-indicator {
|
||
width: 70px;
|
||
height: 70px;
|
||
font-size: 2rem;
|
||
}
|
||
|
||
/* Match Popup адаптация для малых экранов */
|
||
.match-popup {
|
||
width: 100%;
|
||
max-width: 300px;
|
||
padding: 1.25rem 0.75rem;
|
||
border-radius: 15px;
|
||
}
|
||
|
||
.match-header i {
|
||
font-size: 2.2rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.match-header h3 {
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.match-btn {
|
||
padding: 0.6rem 0.75rem;
|
||
font-size: 0.9rem;
|
||
}
|
||
}
|
||
|
||
/* Large phones and small tablets */
|
||
@media (min-width: 577px) and (max-width: 767px) {
|
||
.swipe-area {
|
||
height: 65vh;
|
||
max-height: 600px;
|
||
}
|
||
|
||
.action-buttons {
|
||
margin-top: 15px;
|
||
}
|
||
|
||
/* Match Popup адаптация для средних экранов */
|
||
.match-popup {
|
||
width: 85%;
|
||
max-width: 380px;
|
||
padding: 1.75rem;
|
||
}
|
||
|
||
.match-header i {
|
||
font-size: 2.8rem;
|
||
}
|
||
}
|
||
|
||
/* Tablets */
|
||
@media (min-width: 768px) and (max-width: 991px) {
|
||
.container {
|
||
max-width: 700px;
|
||
}
|
||
|
||
.swipe-area {
|
||
height: 70vh;
|
||
max-height: 700px;
|
||
}
|
||
|
||
.action-btn {
|
||
width: 75px;
|
||
height: 75px;
|
||
}
|
||
|
||
.btn-icon {
|
||
font-size: 2rem;
|
||
}
|
||
|
||
/* Match Popup адаптация для планшетов */
|
||
.match-popup {
|
||
width: 80%;
|
||
max-width: 450px;
|
||
}
|
||
|
||
.match-header i {
|
||
font-size: 3.2rem;
|
||
}
|
||
|
||
.match-btn {
|
||
padding: 0.9rem 1.2rem;
|
||
font-size: 1rem;
|
||
}
|
||
}
|
||
|
||
/* Small desktops */
|
||
@media (min-width: 992px) and (max-width: 1199px) {
|
||
.container {
|
||
max-width: 800px;
|
||
}
|
||
|
||
.swipe-area {
|
||
max-height: 750px;
|
||
}
|
||
|
||
/* Match Popup адаптация для настольных */
|
||
.match-popup {
|
||
max-width: 480px;
|
||
padding: 2.25rem;
|
||
}
|
||
}
|
||
|
||
/* Large desktops */
|
||
@media (min-width: 1200px) {
|
||
.container {
|
||
max-width: 850px;
|
||
}
|
||
|
||
.swipe-area {
|
||
max-height: 800px;
|
||
}
|
||
}
|
||
|
||
/* Landscape orientation on mobile */
|
||
@media (max-height: 576px) and (orientation: landscape) {
|
||
.swipe-area {
|
||
height: 80vh;
|
||
min-height: 280px;
|
||
}
|
||
|
||
.action-buttons {
|
||
margin-top: 10px;
|
||
padding-bottom: 10px;
|
||
}
|
||
|
||
.action-btn {
|
||
width: 50px;
|
||
height: 50px;
|
||
}
|
||
|
||
.bio-container {
|
||
max-height: 40px;
|
||
}
|
||
|
||
.card-details-section {
|
||
padding: 8px;
|
||
}
|
||
|
||
.user-info-overlay {
|
||
padding: 10px;
|
||
}
|
||
|
||
.user-name {
|
||
font-size: 1.3rem;
|
||
}
|
||
|
||
/* Match Popup адаптация для ландшафтной ориентации */
|
||
.match-popup {
|
||
width: 70%;
|
||
max-width: 450px;
|
||
padding: 1rem 1.5rem;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
text-align: left;
|
||
}
|
||
|
||
.match-content {
|
||
display: flex;
|
||
width: 100%;
|
||
align-items: center;
|
||
}
|
||
|
||
.match-header {
|
||
margin-bottom: 0;
|
||
margin-right: 1.5rem;
|
||
flex: 1;
|
||
}
|
||
|
||
.match-actions {
|
||
flex-direction: column;
|
||
flex: 1;
|
||
gap: 0.7rem;
|
||
}
|
||
|
||
.match-btn {
|
||
padding: 0.6rem 0.8rem;
|
||
}
|
||
}
|
||
</style> |