tp/begushiybashkir/bbvue/src/views/Gallery.vue

<template>
  <div class="gallery-page">
    <!-- Герой-секция -->
    <section class="hero-section">
      <div class="container">
        <h1 class="hero-title">📸 Наша галерея</h1>
        <p class="hero-subtitle">Запечатленные моменты тренировок, соревнований и дружеских встреч</p>
        <div class="hero-stats">
          <div class="stat">
            <div class="stat-number">24+</div>
            <div class="stat-label">Фотографий</div>
          </div>
          <div class="stat">
            <div class="stat-number">12+</div>
            <div class="stat-label">Мероприятий</div>
          </div>
          <div class="stat">
            <div class="stat-number">100%</div>
            <div class="stat-label">Эмоций</div>
          </div>
        </div>
      </div>
    </section>

    <!-- Основной слайдер -->
    <section class="slider-section">
      <div class="container">
        <h2 class="section-title">Лучшие моменты</h2>
        <div class="slider-container">
          <div class="slider" :style="{ transform: `translateX(-${currentSlide * 100}%)` }">
            <div 
              v-for="(slide, index) in slides" 
              :key="index"
              class="slide"
              :class="{ 'active': currentSlide === index }"
            >
              <img 
                :src="getImageUrl(slide.src)" 
                :alt="slide.alt"
                class="slide-image"
                @load="imageLoaded(index)"
              >
              <div class="slide-overlay">
                <div class="slide-content">
                  <h3>{{ slide.title }}</h3>
                  <p>{{ slide.description }}</p>
                  <span class="slide-date">{{ slide.date }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- Навигация слайдера -->
          <button class="slider-nav prev" @click="prevSlide" aria-label="Предыдущее фото">
            ‹
          </button>
          <button class="slider-nav next" @click="nextSlide" aria-label="Следующее фото">
            ›
          </button>

          <!-- Индикаторы -->
          <div class="slider-indicators">
            <button 
              v-for="(slide, index) in slides" 
              :key="index"
              :class="['indicator', { 'active': currentSlide === index }]"
              @click="goToSlide(index)"
              :aria-label="`Перейти к фото ${index + 1}`"
            ></button>
          </div>

          <!-- Счетчик -->
          <div class="slider-counter">
            {{ currentSlide + 1 }} / {{ slides.length }}
          </div>
        </div>
      </div>
    </section>

    <!-- Мини-галерея -->
    <section class="gallery-section">
      <div class="container">
        <h2 class="section-title">Все фотографии</h2>
        
        <!-- Фильтры -->
        <div class="gallery-filters">
          <button 
            v-for="filter in filters" 
            :key="filter.value"
            :class="['filter-btn', { 'active': activeFilter === filter.value }]"
            @click="setFilter(filter.value)"
          >
            {{ filter.label }}
          </button>
        </div>

        <!-- Сетка фотографий -->
        <div class="gallery-grid">
          <div 
            v-for="(image, index) in filteredImages" 
            :key="index"
            class="gallery-item"
            @click="openLightbox(index)"
          >
            <img 
              :src="getImageUrl(image.src)" 
              :alt="image.alt"
              class="gallery-image"
              loading="lazy"
            >
            <div class="gallery-overlay">
              <div class="overlay-content">
                <span class="image-date">{{ image.date }}</span>
                <button class="zoom-btn" aria-label="Увеличить фото">
                  🔍
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- Кнопка загрузки еще -->
        <div class="load-more" v-if="visibleImages < allImages.length">
          <button class="btn btn-outline" @click="loadMore">
            📁 Загрузить еще фото
          </button>
        </div>
      </div>
    </section>

    <!-- Лайтбокс -->
    <div class="lightbox" :class="{ 'active': lightboxActive }" v-if="lightboxActive">
      <div class="lightbox-content">
        <button class="lightbox-close" @click="closeLightbox" aria-label="Закрыть">
          ✕
        </button>
        <button class="lightbox-nav prev" @click="prevLightbox" aria-label="Предыдущее фото">
          ‹
        </button>
        
        <div class="lightbox-image-container">
          <img 
            :src="getImageUrl(currentLightboxImage.src)" 
            :alt="currentLightboxImage.alt"
            class="lightbox-image"
          >
          <div class="lightbox-info">
            <h3>{{ currentLightboxImage.title }}</h3>
            <p>{{ currentLightboxImage.description }}</p>
            <span class="lightbox-date">{{ currentLightboxImage.date }}</span>
          </div>
        </div>

        <button class="lightbox-nav next" @click="nextLightbox" aria-label="Следующее фото">
          ›
        </button>
      </div>
      <div class="lightbox-overlay" @click="closeLightbox"></div>
    </div>

    <!-- Призыв к действию -->
    <section class="cta-section">
      <div class="container">
        <div class="cta-content">
          <h2>Хочешь попасть в нашу галерею?</h2>
          <p>Присоединяйся к нашей беговой семье и стань частью этих ярких моментов!</p>
          <div class="cta-buttons">
            <router-link to="/training" class="btn btn-primary">
              📅 Посмотреть расписание
            </router-link>
            <router-link to="/register" class="btn btn-secondary">
              🏃 Вступить в клуб
            </router-link>
          </div>
          <div class="cta-features">
            <div class="feature">✅ Бесплатная первая тренировка</div>
            <div class="feature">✅ Профессиональный тренер</div>
            <div class="feature">✅ Дружеская атмосфера</div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Gallery',
  data() {
    return {
      currentSlide: 0,
      lightboxActive: false,
      currentLightboxIndex: 0,
      activeFilter: 'all',
      visibleImages: 12,
      slides: [
        {
          src: 'slider/slider24.jpg',
          alt: 'Беговой клуб Бегущий Башкир, РосХим Стерлитамак Забег 2025',
          title: 'РосХим Стерлитамак 2025',
          description: 'Наши участники на крупном забеге',
          date: 'Январь 2025'
        },
        {
          src: 'slider/slider23.png',
          alt: 'Беговой клуб, общее фото УММ 2025',
          title: 'Уфимский марафон 2025',
          description: 'Командное фото после успешного забега',
          date: 'Январь 2025'
        },
        {
          src: 'slider/slider1.jpg',
          alt: 'Беговой клуб, общее фото',
          title: 'Тренировка в парке',
          description: 'Регулярные занятия на свежем воздухе',
          date: 'Декабрь 2024'
        },
        {
          src: 'slider/slider2.jpg',
          alt: 'Беговой клуб, общее фото',
          title: 'Техника бега',
          description: 'Работа над правильной техникой',
          date: 'Декабрь 2024'
        },
        {
          src: 'slider/slider4.jpg',
          alt: 'Беговой клуб, общее фото',
          title: 'Групповая тренировка',
          description: 'Поддержка и мотивация в команде',
          date: 'Ноябрь 2024'
        },
        {
          src: 'slider/slider5.jpg',
          alt: 'Беговой клуб, общее фото',
          title: 'Соревнования',
          description: 'Участие в городских забегах',
          date: 'Ноябрь 2024'
        }
      ],
      allImages: [
        // Первые 6 - это слайды, остальные - дополнительные фото
        { src: 'slider/slider1.jpg', alt: 'Тренировка в парке', date: 'Декабрь 2024', category: 'training' },
        { src: 'slider/slider2.jpg', alt: 'Техника бега', date: 'Декабрь 2024', category: 'training' },
        { src: 'slider/slider4.jpg', alt: 'Групповая тренировка', date: 'Ноябрь 2024', category: 'training' },
        { src: 'slider/slider5.jpg', alt: 'Соревнования', date: 'Ноябрь 2024', category: 'events' },
        { src: 'slider/slider6.jpg', alt: 'Награждение', date: 'Ноябрь 2024', category: 'events' },
        { src: 'slider/slider7.jpg', alt: 'Командный дух', date: 'Октябрь 2024', category: 'community' },
        { src: 'slider/slider8.jpg', alt: 'Вечерняя пробежка', date: 'Октябрь 2024', category: 'training' },
        { src: 'slider/slider9.jpg', alt: 'Растяжка после бега', date: 'Октябрь 2024', category: 'training' },
        { src: 'slider/slider10.jpg', alt: 'Общение после тренировки', date: 'Сентябрь 2024', category: 'community' },
        { src: 'slider/slider11.jpg', alt: 'Индивидуальные занятия', date: 'Сентябрь 2024', category: 'training' },
        { src: 'slider/slider12.jpg', alt: 'Подготовка к старту', date: 'Сентябрь 2024', category: 'events' },
        { src: 'slider/slider13.jpg', alt: 'Победа!', date: 'Август 2024', category: 'events' },
        { src: 'slider/slider14.jpg', alt: 'Трейл раннинг', date: 'Август 2024', category: 'training' },
        { src: 'slider/slider15.jpg', alt: 'Горные маршруты', date: 'Июль 2024', category: 'training' },
        { src: 'slider/slider16.jpg', alt: 'Летние тренировки', date: 'Июль 2024', category: 'training' },
        { src: 'slider/slider17.jpg', alt: 'Восстановление', date: 'Июнь 2024', category: 'training' },
        { src: 'slider/slider18.jpg', alt: 'Мастер-класс', date: 'Июнь 2024', category: 'events' },
        { src: 'slider/slider19.jpg', alt: 'Новички клуба', date: 'Май 2024', category: 'community' },
        { src: 'slider/slider20.jpg', alt: 'Весенний забег', date: 'Май 2024', category: 'events' },
        { src: 'slider/slider21.jpg', alt: 'Работа в группе', date: 'Апрель 2024', category: 'training' },
        { src: 'slider/slider22.jpg', alt: 'Совместный отдых', date: 'Апрель 2024', category: 'community' },
        { src: 'slider/slider23.png', alt: 'Уфимский марафон', date: 'Март 2024', category: 'events' },
        { src: 'slider/slider24.jpg', alt: 'РосХим Стерлитамак', date: 'Январь 2025', category: 'events' }
      ],
      filters: [
        { value: 'all', label: 'Все фото' },
        { value: 'training', label: 'Тренировки' },
        { value: 'events', label: 'Соревнования' },
        { value: 'community', label: 'Мероприятия' }
      ],
      slideInterval: null
    }
  },
  computed: {
    filteredImages() {
      let filtered = this.allImages
      
      if (this.activeFilter !== 'all') {
        filtered = filtered.filter(image => image.category === this.activeFilter)
      }
      
      return filtered.slice(0, this.visibleImages)
    },
    currentLightboxImage() {
      return this.allImages[this.currentLightboxIndex] || {}
    }
  },
  methods: {
    getImageUrl(path) {
      // В продакшене замените на правильный путь
      return `./src/assets/images/${path}`
    },
    nextSlide() {
      this.currentSlide = (this.currentSlide + 1) % this.slides.length
    },
    prevSlide() {
      this.currentSlide = (this.currentSlide - 1 + this.slides.length) % this.slides.length
    },
    goToSlide(index) {
      this.currentSlide = index
    },
    openLightbox(index) {
      this.currentLightboxIndex = index
      this.lightboxActive = true
      document.body.style.overflow = 'hidden'
    },
    closeLightbox() {
      this.lightboxActive = false
      document.body.style.overflow = ''
    },
    nextLightbox() {
      this.currentLightboxIndex = (this.currentLightboxIndex + 1) % this.allImages.length
    },
    prevLightbox() {
      this.currentLightboxIndex = (this.currentLightboxIndex - 1 + this.allImages.length) % this.allImages.length
    },
    setFilter(filter) {
      this.activeFilter = filter
      this.visibleImages = 12
    },
    loadMore() {
      this.visibleImages += 6
    },
    startAutoSlide() {
      this.slideInterval = setInterval(() => {
        this.nextSlide()
      }, 5000)
    },
    stopAutoSlide() {
      if (this.slideInterval) {
        clearInterval(this.slideInterval)
        this.slideInterval = null
      }
    },
    imageLoaded(index) {
      console.log(`Image ${index} loaded successfully`)
    },
    handleKeydown(event) {
      if (!this.lightboxActive) return
      
      switch(event.key) {
        case 'Escape':
          this.closeLightbox()
          break
        case 'ArrowLeft':
          this.prevLightbox()
          break
        case 'ArrowRight':
          this.nextLightbox()
          break
      }
    }
  },
  mounted() {
    this.startAutoSlide()
    document.addEventListener('keydown', this.handleKeydown)
  },
  beforeUnmount() {
    this.stopAutoSlide()
    document.removeEventListener('keydown', this.handleKeydown)
    document.body.style.overflow = ''
  }
}
</script>

<style scoped>
.gallery-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8fff8 0%, #f0f8f0 100%);
}

/* Герой-секция */
.hero-section {
  background: linear-gradient(135deg, #2e8b57 0%, #26734a 100%);
  color: white;
  padding: 80px 0 60px;
  text-align: center;
}

.hero-title {
  font-size: 3rem;
  margin-bottom: 1rem;
  font-weight: 800;
}

.hero-subtitle {
  font-size: 1.3rem;
  opacity: 0.9;
  margin-bottom: 2rem;
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.stat {
  text-align: center;
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 800;
  color: #ffd700;
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 0.9rem;
  opacity: 0.8;
}

/* Основные стили */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.section-title {
  text-align: center;
  font-size: 2.5rem;
  color: #2e8b57;
  margin-bottom: 3rem;
  font-weight: 700;
}

/* Слайдер */
.slider-section {
  padding: 4rem 0;
}

.slider-container {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.slider {
  display: flex;
  transition: transform 0.5s ease;
  height: 500px;
}

.slide {
  flex: 0 0 100%;
  position: relative;
  height: 100%;
}

.slide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: white;
  padding: 2rem;
}

.slide-content h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.slide-content p {
  opacity: 0.9;
  margin-bottom: 0.5rem;
}

.slide-date {
  font-size: 0.9rem;
  opacity: 0.7;
}

/* Навигация слайдера */
.slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9);
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
}

.slider-nav:hover {
  background: white;
  transform: translateY(-50%) scale(1.1);
}

.slider-nav.prev {
  left: 20px;
}

.slider-nav.next {
  right: 20px;
}

/* Индикаторы */
.slider-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

.indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid white;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator.active {
  background: white;
  transform: scale(1.2);
}

.slider-counter {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.9rem;
  z-index: 10;
}

/* Галерея */
.gallery-section {
  padding: 4rem 0;
  background: white;
}

.gallery-filters {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 12px 24px;
  border: 2px solid #e9ecef;
  background: white;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
}

.filter-btn:hover {
  border-color: #2e8b57;
}

.filter-btn.active {
  background: #2e8b57;
  color: white;
  border-color: #2e8b57;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.gallery-item {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 4/3;
  transition: all 0.3s ease;
}

.gallery-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gallery-item:hover .gallery-image {
  transform: scale(1.05);
}

.gallery-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: flex-end;
  padding: 1rem;
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}

.overlay-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  color: white;
}

.image-date {
  font-size: 0.9rem;
  opacity: 0.9;
}

.zoom-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  padding: 8px;
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.zoom-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.load-more {
  text-align: center;
}

/* Лайтбокс */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.lightbox.active {
  opacity: 1;
  visibility: visible;
}

.lightbox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(5px);
}

.lightbox-content {
  position: relative;
  z-index: 1001;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  font-size: 2rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1002;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  font-size: 2rem;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1002;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-50%) scale(1.1);
}

.lightbox-nav.prev {
  left: 20px;
}

.lightbox-nav.next {
  right: 20px;
}

.lightbox-image-container {
  max-width: 90%;
  max-height: 90%;
  position: relative;
}

.lightbox-image {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 10px;
}

.lightbox-info {
  background: rgba(255, 255, 255, 0.95);
  padding: 1.5rem;
  border-radius: 0 0 10px 10px;
  margin-top: -5px;
}

.lightbox-info h3 {
  color: #2e8b57;
  margin-bottom: 0.5rem;
}

.lightbox-info p {
  color: #666;
  margin-bottom: 0.5rem;
}

.lightbox-date {
  color: #999;
  font-size: 0.9rem;
}

/* CTA секция */
.cta-section {
  background: linear-gradient(135deg, #2e8b57 0%, #26734a 100%);
  color: white;
  padding: 4rem 0;
  text-align: center;
}

.cta-content h2 {
  font-size: 2.2rem;
  margin-bottom: 1rem;
}

.cta-content p {
  font-size: 1.2rem;
  opacity: 0.9;
  margin-bottom: 2rem;
}

.cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.cta-features {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.feature {
  font-size: 1.1rem;
  opacity: 0.9;
}

/* Кнопки */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  gap: 0.5rem;
  font-size: 1.1rem;
  cursor: pointer;
}

.btn-primary {
  background: #ffd700;
  color: #333;
}

.btn-primary:hover {
  background: #e6c200;
  transform: translateY(-2px);
}

.btn-secondary {
  background: transparent;
  color: white;
  border-color: white;
}

.btn-secondary:hover {
  background: white;
  color: #2e8b57;
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: #2e8b57;
  border-color: #2e8b57;
}

.btn-outline:hover {
  background: #2e8b57;
  color: white;
  transform: translateY(-2px);
}

/* Адаптивность */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.2rem;
  }
  
  .hero-stats {
    gap: 2rem;
  }
  
  .stat-number {
    font-size: 2rem;
  }
  
  .slider {
    height: 300px;
  }
  
  .slider-nav {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
  
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
  }
  
  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .btn {
    width: 100%;
    max-width: 300px;
  }
  
  .lightbox-nav {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
  }
  
  .lightbox-content {
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  .hero-section {
    padding: 60px 0 40px;
  }
  
  .hero-title {
    font-size: 1.8rem;
  }
  
  .section-title {
    font-size: 2rem;
  }
  
  .gallery-grid {
    grid-template-columns: 1fr;
  }
  
  .gallery-filters {
    flex-direction: column;
    align-items: center;
  }
  
  .filter-btn {
    width: 100%;
    max-width: 200px;
  }
  
  .cta-features {
    flex-direction: column;
    gap: 1rem;
  }
}

/* Анимации */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gallery-item {
  animation: fadeIn 0.6s ease;
}
</style>