1124 lines
28 KiB
Vue
1124 lines
28 KiB
Vue
<template>
|
||
<div class="training-page">
|
||
<!-- Герой-секция -->
|
||
<section class="hero-section">
|
||
<div class="container">
|
||
<div class="hero-content">
|
||
<h1 class="hero-title">📅 Тренировки с нами</h1>
|
||
<p class="hero-subtitle">Профессиональные программы, индивидуальный подход и дружеская атмосфера</p>
|
||
<div class="hero-features">
|
||
<div class="feature">✅ Бесплатная первая тренировка</div>
|
||
<div class="feature">✅ Тренер - мастер спорта</div>
|
||
<div class="feature">✅ Группы для любого уровня</div>
|
||
</div>
|
||
<div class="hero-actions">
|
||
<button class="btn btn-primary" @click="scrollToSchedule">
|
||
🏃 Начать тренироваться
|
||
</button>
|
||
<router-link to="/register" class="btn btn-outline">
|
||
👥 Вступить в клуб
|
||
</router-link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Расписание -->
|
||
<section class="schedule-section" id="schedule" ref="scheduleSection">
|
||
<div class="container">
|
||
<h2 class="section-title">📅 Расписание тренировок</h2>
|
||
<p class="section-subtitle">Регулярные занятия в лучших локациях Уфы</p>
|
||
|
||
<div class="schedule-container">
|
||
<div class="schedule-grid">
|
||
<div v-for="day in schedule" :key="day.name" class="schedule-day" :class="{
|
||
'training-day': day.time !== '--:--',
|
||
'rest-day': day.time === '--:--',
|
||
'today': isToday(day.name)
|
||
}">
|
||
<div class="day-header">
|
||
<h4>{{ day.name }}</h4>
|
||
<span class="day-badge" v-if="isToday(day.name)">Сегодня</span>
|
||
</div>
|
||
<div class="day-time">
|
||
<strong>{{ day.time }}</strong>
|
||
</div>
|
||
<div class="day-activity">
|
||
{{ day.activity }}
|
||
</div>
|
||
<div class="day-location" v-if="day.location">
|
||
📍 {{ day.location }}
|
||
</div>
|
||
<div class="day-features" v-if="day.features">
|
||
<span v-for="feature in day.features" :key="feature" class="feature-tag">
|
||
{{ feature }}
|
||
</span>
|
||
</div>
|
||
<button v-if="day.time !== '--:--'" class="btn-day" @click="openTrainingModal(day)">
|
||
🏃 Записаться
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Статистика тренировок -->
|
||
<div class="stats-section">
|
||
<h3>📊 На этой неделе</h3>
|
||
<div class="stats-grid">
|
||
<div class="stat-card">
|
||
<div class="stat-icon">⏱️</div>
|
||
<div class="stat-content">
|
||
<div class="stat-number">3</div>
|
||
<div class="stat-label">Групповые тренировки</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon">🏃♂️</div>
|
||
<div class="stat-content">
|
||
<div class="stat-number">5+</div>
|
||
<div class="stat-label">Часов бега</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon">👥</div>
|
||
<div class="stat-content">
|
||
<div class="stat-number">20+</div>
|
||
<div class="stat-label">Участников на тренировках</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Типы тренировок -->
|
||
<section class="workouts-section">
|
||
<div class="container">
|
||
<h2 class="section-title">💪 Виды тренировок</h2>
|
||
<div class="workouts-grid">
|
||
<div class="workout-card">
|
||
<div class="workout-icon">🎯</div>
|
||
<h3>Техника бега + ОФП</h3>
|
||
<p>Работа над правильной техникой и общефизической подготовкой</p>
|
||
<ul class="workout-features">
|
||
<li>✅ Коррекция техники бега</li>
|
||
<li>✅ Упражнения на развитие силы</li>
|
||
<li>✅ Профилактика травм</li>
|
||
</ul>
|
||
</div>
|
||
<div class="workout-card">
|
||
<div class="workout-icon">⚡</div>
|
||
<h3>Техника бега + СБУ</h3>
|
||
<p>Специальные беговые упражнения для развития скорости</p>
|
||
<ul class="workout-features">
|
||
<li>✅ СБУ различной сложности</li>
|
||
<li>✅ Работа над каденсом</li>
|
||
<li>✅ Улучшение экономичности бега</li>
|
||
</ul>
|
||
</div>
|
||
<div class="workout-card">
|
||
<div class="workout-icon">🛣️</div>
|
||
<h3>Длительный кросс</h3>
|
||
<p>Развитие выносливости на живописных маршрутах Уфы</p>
|
||
<ul class="workout-features">
|
||
<li>✅ Дистанции 10-20 км</li>
|
||
<li>✅ Работа в аэробной зоне</li>
|
||
<li>✅ Подготовка к марафонам</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Тренировочные локации -->
|
||
<section class="locations-section">
|
||
<div class="container">
|
||
<h2 class="section-title">📍 Наши локации</h2>
|
||
<div class="locations-grid">
|
||
<div class="location-card">
|
||
<div class="location-image">
|
||
<div class="image-placeholder">
|
||
<img :src="getImageUrl('locations/riverSide.jpeg')" alt="Набережная Уфа Монумент">
|
||
</div>
|
||
</div>
|
||
<div class="location-info">
|
||
<h3>Набережная</h3>
|
||
<p class="location-address">Уфа, ост. Монумент дружбы</p>
|
||
<div class="location-features">
|
||
<span class="feature">📏 Круг 2.5 км</span>
|
||
<span class="feature">💡 Освещение</span>
|
||
<span class="feature">🌳 Природа</span>
|
||
</div>
|
||
<p class="location-desc">Идеальное место для технических и длительных тренировок</p>
|
||
</div>
|
||
</div>
|
||
<div class="location-card">
|
||
<div class="location-image">
|
||
<div class="image-placeholder">
|
||
<img :src="getImageUrl('locations/dinamo.jpg')" alt="Стадион Динамо">
|
||
</div>
|
||
</div>
|
||
<div class="location-info">
|
||
<h3>Стадион "Динамо"</h3>
|
||
<p class="location-address">ул. Революционная, Уфа</p>
|
||
<div class="location-features">
|
||
<span class="feature">🎯 Профессиональное покрытие</span>
|
||
<span class="feature">⚡ СБУ и интервалы</span>
|
||
<span class="feature">📊 Точный замер дистанции</span>
|
||
</div>
|
||
<p class="location-desc">Лучшее место для работы над скоростью и техникой</p>
|
||
</div>
|
||
</div>
|
||
<div class="location-card">
|
||
<div class="location-image">
|
||
<div class="image-placeholder">
|
||
<img :src="getImageUrl('locations/1mayPark.webp')" alt="Парк Первомайский ост. ДК УМПО">
|
||
</div>
|
||
</div>
|
||
<div class="location-info">
|
||
<h3>Парк первомайский</h3>
|
||
<p class="location-address">ДК УМПО Калининский р-н</p>
|
||
<div class="location-features">
|
||
<span class="feature">📏 Круг 2.5 км</span>
|
||
<span class="feature">💡 Освещение</span>
|
||
<span class="feature">🌳 Парк</span>
|
||
</div>
|
||
<p class="location-desc">Идеальное место для групповых тренировок и спецбеговых упраждений</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Призыв к действию -->
|
||
<section class="cta-section">
|
||
<div class="container">
|
||
<div class="cta-content">
|
||
<h2>Готовы начать бегать с нами?</h2>
|
||
<p>Присоединяйтесь к 150+ участникам, которые уже улучшили свои результаты</p>
|
||
<div class="cta-features">
|
||
<div class="cta-feature">
|
||
<div class="feature-icon">🎯</div>
|
||
<div class="feature-text">
|
||
<strong>Индивидуальный подход</strong>
|
||
<span>Программа под ваш уровень</span>
|
||
</div>
|
||
</div>
|
||
<div class="cta-feature">
|
||
<div class="feature-icon">👨🏫</div>
|
||
<div class="feature-text">
|
||
<strong>Профессиональный тренер</strong>
|
||
<span>Мастер спорта с опытом 10+ лет</span>
|
||
</div>
|
||
</div>
|
||
<div class="cta-feature">
|
||
<div class="feature-icon">🤝</div>
|
||
<div class="feature-text">
|
||
<strong>Поддержка сообщества</strong>
|
||
<span>Мотивация и новые знакомства</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="cta-actions">
|
||
<router-link to="/register" class="btn btn-primary btn-large">
|
||
🏃 Начать бесплатно
|
||
</router-link>
|
||
<a href="tel:+79273093095" class="btn btn-secondary">
|
||
📞 Позвонить тренеру
|
||
</a>
|
||
</div>
|
||
<div class="cta-note">
|
||
<p>📅 Первая тренировка бесплатно • 💰 Гибкая система оплаты • 👥 Любой уровень подготовки</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Модальное окно записи -->
|
||
<div class="modal-overlay" :class="{ 'active': showModal }" v-if="showModal">
|
||
<div class="modal-content">
|
||
<button class="modal-close" @click="closeModal">×</button>
|
||
<h3>Запись на тренировку</h3>
|
||
<div class="modal-training-info">
|
||
<h4>{{ selectedTraining.name }}</h4>
|
||
<p><strong>Время:</strong> {{ selectedTraining.time }}</p>
|
||
<p><strong>Тип:</strong> {{ selectedTraining.activity }}</p>
|
||
<p><strong>Локация:</strong> {{ selectedTraining.location }}</p>
|
||
</div>
|
||
<form class="signup-form" @submit.prevent="handleSignup">
|
||
<div class="form-group">
|
||
<label for="name">Ваше имя *</label>
|
||
<input id="name" v-model="signupForm.name" type="text" required placeholder="Введите ваше имя">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="phone">Телефон *</label>
|
||
<input id="phone" v-model="signupForm.phone" type="tel" required placeholder="+7 (999) 123-45-67">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="level">Уровень подготовки</label>
|
||
<select id="level" v-model="signupForm.level">
|
||
<option value="">Выберите уровень</option>
|
||
<option value="beginner">Начинающий</option>
|
||
<option value="intermediate">Любитель</option>
|
||
<option value="advanced">Опытный</option>
|
||
</select>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary btn-full">
|
||
📝 Записаться на тренировку
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
// eslint-disable-next-line vue/multi-word-component-names
|
||
name: 'Training', data() {
|
||
return {
|
||
showModal: false,
|
||
selectedTraining: {},
|
||
signupForm: {
|
||
name: '',
|
||
phone: '',
|
||
level: ''
|
||
},
|
||
schedule: [
|
||
{
|
||
name: 'Понедельник',
|
||
time: '19:30',
|
||
activity: 'Клубная тренировка',
|
||
location: 'Набережная',
|
||
features: ['Групповая тренировка', 'Техника бега']
|
||
},
|
||
{
|
||
name: 'Вторник',
|
||
time: '--:--',
|
||
activity: 'Индивидуальный кросс',
|
||
location: 'Свободное',
|
||
features: ['Самостоятельно', '7-12 км']
|
||
},
|
||
{
|
||
name: 'Среда',
|
||
time: '19:30',
|
||
activity: 'Клубная тренировка',
|
||
location: 'Набережная',
|
||
features: ['Групповая тренировка', 'СБУ и интервалы']
|
||
},
|
||
{
|
||
name: 'Четверг',
|
||
time: '--:--',
|
||
activity: 'Индивидуальный кросс',
|
||
location: 'Свободное',
|
||
features: ['Самостоятельно', '7-12 км']
|
||
},
|
||
{
|
||
name: 'Пятница',
|
||
time: '--:--',
|
||
activity: 'Восстановление',
|
||
location: 'Свободное',
|
||
features: ['Самостоятельно', 'Йога/Растяжка']
|
||
},
|
||
{
|
||
name: 'Суббота',
|
||
time: '9:00',
|
||
activity: 'Клубная тренировка',
|
||
location: 'Парк Лесоводов',
|
||
features: ['Групповая тренировка', 'Развитие выносливости']
|
||
},
|
||
{
|
||
name: 'Воскресенье',
|
||
time: '9:00',
|
||
activity: 'Длительная тренировка',
|
||
location: 'Набережная',
|
||
features: ['Аэробная выносливость', '15-20 км']
|
||
}
|
||
]
|
||
}
|
||
},
|
||
computed: {
|
||
today() {
|
||
const days = ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота']
|
||
return days[new Date().getDay()]
|
||
}
|
||
},
|
||
methods: {
|
||
handleFirstInteraction() {
|
||
if (!this.hasInteracted) {
|
||
this.hasInteracted = true
|
||
this.showContent()
|
||
clearTimeout(this.autoShowTimeout)
|
||
}
|
||
},
|
||
showContent() {
|
||
this.isContentVisible = true
|
||
// Эмитим событие для показа хедера
|
||
this.$emit('show-header')
|
||
},
|
||
getImageUrl(path) {
|
||
// В продакшене замените на правильный путь
|
||
const baseUrl = import.meta.env.BASE_URL
|
||
// Путь от корня public/
|
||
console.log(`${baseUrl}images/${path}`)
|
||
return `${baseUrl}images/${path}`
|
||
},
|
||
isToday(dayName) {
|
||
return dayName === this.today
|
||
},
|
||
scrollToSchedule() {
|
||
this.$refs.scheduleSection.scrollIntoView({ behavior: 'smooth' })
|
||
},
|
||
openTrainingModal(day) {
|
||
this.selectedTraining = day
|
||
this.showModal = true
|
||
document.body.style.overflow = 'hidden'
|
||
},
|
||
closeModal() {
|
||
this.showModal = false
|
||
document.body.style.overflow = ''
|
||
this.signupForm = { name: '', phone: '', level: '' }
|
||
},
|
||
handleSignup() {
|
||
// Здесь будет логика отправки формы
|
||
console.log('Запись на тренировку:', {
|
||
training: this.selectedTraining,
|
||
user: this.signupForm
|
||
})
|
||
|
||
// Имитация успешной записи
|
||
alert(`Спасибо, ${this.signupForm.name}! Вы записаны на тренировку. Тренер свяжется с вами для подтверждения.`)
|
||
this.closeModal()
|
||
},
|
||
handleKeydown(event) {
|
||
if (event.key === 'Escape' && this.showModal) {
|
||
this.closeModal()
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
document.addEventListener('keydown', this.handleKeydown)
|
||
window.addEventListener('scroll', this.handleFirstInteraction, { passive: true, once: true })
|
||
window.addEventListener('click', this.handleFirstInteraction, { once: true })
|
||
window.addEventListener('touchstart', this.handleFirstInteraction, { once: true })
|
||
this.autoShowTimeout = setTimeout(() => {
|
||
if (!this.hasInteracted) {
|
||
this.showContent()
|
||
}
|
||
}, 3000)
|
||
},
|
||
beforeUnmount() {
|
||
document.removeEventListener('keydown', this.handleKeydown)
|
||
document.body.style.overflow = ''
|
||
window.removeEventListener('scroll', this.handleFirstInteraction)
|
||
window.removeEventListener('click', this.handleFirstInteraction)
|
||
window.removeEventListener('touchstart', this.handleFirstInteraction)
|
||
clearTimeout(this.autoShowTimeout)
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.training-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: 100px 0 80px;
|
||
text-align: center;
|
||
}
|
||
|
||
.hero-title {
|
||
font-size: 3rem;
|
||
margin-bottom: 1.5rem;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.hero-subtitle {
|
||
font-size: 1.3rem;
|
||
opacity: 0.9;
|
||
margin-bottom: 2rem;
|
||
max-width: 600px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
.hero-features {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 2rem;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
.feature {
|
||
font-size: 1.1rem;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.hero-actions {
|
||
display: flex;
|
||
gap: 1rem;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
/* Основные стили */
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
.section-title {
|
||
text-align: center;
|
||
font-size: 2.5rem;
|
||
color: #2e8b57;
|
||
margin-bottom: 1rem;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.section-subtitle {
|
||
text-align: center;
|
||
font-size: 1.2rem;
|
||
color: #666;
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
/* Расписание */
|
||
.schedule-section {
|
||
padding: 80px 0;
|
||
background: white;
|
||
}
|
||
|
||
.schedule-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 1.5rem;
|
||
margin-bottom: 4rem;
|
||
}
|
||
|
||
.schedule-day {
|
||
background: white;
|
||
border-radius: 15px;
|
||
padding: 2rem;
|
||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
|
||
transition: all 0.3s ease;
|
||
border: 2px solid transparent;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.schedule-day:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.schedule-day.training-day {
|
||
border-color: #2e8b57;
|
||
background: linear-gradient(135deg, #f8fff8 0%, #f0f8f0 100%);
|
||
}
|
||
|
||
.schedule-day.rest-day {
|
||
border-color: #e9ecef;
|
||
background: #f8f9fa;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.schedule-day.today {
|
||
border-color: #ffd700;
|
||
background: linear-gradient(135deg, #fff9e6 0%, #fff3cc 100%);
|
||
}
|
||
|
||
.day-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.day-header h4 {
|
||
color: #2e8b57;
|
||
margin: 0;
|
||
font-size: 1.3rem;
|
||
}
|
||
|
||
.day-badge {
|
||
background: #ffd700;
|
||
color: #333;
|
||
padding: 0.3rem 0.8rem;
|
||
border-radius: 15px;
|
||
font-size: 0.8rem;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.day-time {
|
||
font-size: 1.5rem;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.day-activity {
|
||
color: #666;
|
||
margin-bottom: 1rem;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.day-location {
|
||
color: #2e8b57;
|
||
font-size: 0.9rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.day-features {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.5rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.feature-tag {
|
||
background: rgba(46, 139, 87, 0.1);
|
||
color: #2e8b57;
|
||
padding: 0.3rem 0.8rem;
|
||
border-radius: 15px;
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.btn-day {
|
||
width: 100%;
|
||
padding: 12px;
|
||
background: #2e8b57;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.btn-day:hover {
|
||
background: #26734a;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
/* Статистика */
|
||
.stats-section {
|
||
text-align: center;
|
||
}
|
||
|
||
.stats-section h3 {
|
||
color: #2e8b57;
|
||
margin-bottom: 2rem;
|
||
font-size: 1.8rem;
|
||
}
|
||
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.stat-card {
|
||
background: white;
|
||
padding: 2rem;
|
||
border-radius: 15px;
|
||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.stat-card:hover {
|
||
transform: translateY(-3px);
|
||
}
|
||
|
||
.stat-icon {
|
||
font-size: 2.5rem;
|
||
}
|
||
|
||
.stat-number {
|
||
font-size: 2rem;
|
||
font-weight: 800;
|
||
color: #2e8b57;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.stat-label {
|
||
color: #666;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
/* Виды тренировок */
|
||
.workouts-section {
|
||
padding: 80px 0;
|
||
background: #f8fff8;
|
||
}
|
||
|
||
.workouts-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 2rem;
|
||
}
|
||
|
||
.workout-card {
|
||
background: white;
|
||
padding: 2.5rem 2rem;
|
||
border-radius: 15px;
|
||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
|
||
text-align: center;
|
||
transition: transform 0.3s ease;
|
||
border: 2px solid transparent;
|
||
}
|
||
|
||
.workout-card:hover {
|
||
transform: translateY(-5px);
|
||
border-color: #2e8b57;
|
||
}
|
||
|
||
.workout-icon {
|
||
font-size: 3rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.workout-card h3 {
|
||
color: #2e8b57;
|
||
margin-bottom: 1rem;
|
||
font-size: 1.4rem;
|
||
}
|
||
|
||
.workout-card p {
|
||
color: #666;
|
||
margin-bottom: 1.5rem;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.workout-features {
|
||
list-style: none;
|
||
padding: 0;
|
||
text-align: left;
|
||
}
|
||
|
||
.workout-features li {
|
||
padding: 0.3rem 0;
|
||
color: #555;
|
||
}
|
||
|
||
/* Локации */
|
||
.locations-section {
|
||
padding: 80px 0;
|
||
background: white;
|
||
}
|
||
|
||
.locations-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||
gap: 2rem;
|
||
}
|
||
|
||
.location-card {
|
||
background: white;
|
||
border-radius: 15px;
|
||
overflow: hidden;
|
||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
|
||
transition: transform 0.3s ease;
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
}
|
||
|
||
.location-card:hover {
|
||
transform: translateY(-5px);
|
||
}
|
||
|
||
.location-image {
|
||
height: 200px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.image-placeholder {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.image-placeholder img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
object-position: center;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.location-card:hover .image-placeholder img {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.location-info {
|
||
padding: 2rem;
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.location-info h3 {
|
||
color: #2e8b57;
|
||
margin-bottom: 0.5rem;
|
||
font-size: 1.3rem;
|
||
}
|
||
|
||
.location-address {
|
||
color: #666;
|
||
margin-bottom: 1rem;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.location-features {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.5rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.location-features .feature {
|
||
background: rgba(46, 139, 87, 0.1);
|
||
color: #2e8b57;
|
||
padding: 0.3rem 0.8rem;
|
||
border-radius: 15px;
|
||
font-size: 0.8rem;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.location-desc {
|
||
color: #666;
|
||
line-height: 1.5;
|
||
margin-top: auto;
|
||
}
|
||
|
||
/* CTA секция */
|
||
.cta-section {
|
||
background: linear-gradient(135deg, #2e8b57 0%, #26734a 100%);
|
||
color: white;
|
||
padding: 80px 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.cta-content h2 {
|
||
font-size: 2.5rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.cta-content p {
|
||
font-size: 1.2rem;
|
||
opacity: 0.9;
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
.cta-features {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 2rem;
|
||
margin-bottom: 3rem;
|
||
max-width: 800px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
.cta-feature {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
text-align: left;
|
||
}
|
||
|
||
.feature-icon {
|
||
font-size: 2.5rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.feature-text {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.feature-text strong {
|
||
font-size: 1.1rem;
|
||
margin-bottom: 0.3rem;
|
||
}
|
||
|
||
.feature-text span {
|
||
opacity: 0.8;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.cta-actions {
|
||
display: flex;
|
||
gap: 1rem;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.cta-note {
|
||
opacity: 0.8;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
/* Модальное окно */
|
||
.modal-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.7);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 1000;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition: all 0.3s ease;
|
||
padding: 2rem;
|
||
}
|
||
|
||
.modal-overlay.active {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
|
||
.modal-content {
|
||
background: white;
|
||
border-radius: 20px;
|
||
padding: 2.5rem;
|
||
max-width: 500px;
|
||
width: 100%;
|
||
max-height: 90vh;
|
||
overflow-y: auto;
|
||
position: relative;
|
||
transform: translateY(20px);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.modal-overlay.active .modal-content {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.modal-close {
|
||
position: absolute;
|
||
top: 1rem;
|
||
right: 1rem;
|
||
background: none;
|
||
border: none;
|
||
font-size: 2rem;
|
||
cursor: pointer;
|
||
color: #666;
|
||
transition: color 0.3s ease;
|
||
}
|
||
|
||
.modal-close:hover {
|
||
color: #333;
|
||
}
|
||
|
||
.modal-training-info {
|
||
background: #f8fff8;
|
||
padding: 1.5rem;
|
||
border-radius: 10px;
|
||
margin-bottom: 2rem;
|
||
border-left: 4px solid #2e8b57;
|
||
}
|
||
|
||
.modal-training-info h4 {
|
||
color: #2e8b57;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.signup-form {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1.5rem; /* Современный способ для Flexbox */
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.form-group label {
|
||
display: block;
|
||
margin-bottom: 0.5rem;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
.form-group input,
|
||
.form-group select {
|
||
width: 100%;
|
||
padding: 12px 15px;
|
||
border: 2px solid #e9ecef;
|
||
border-radius: 8px;
|
||
font-size: 1rem;
|
||
transition: border-color 0.3s ease;
|
||
}
|
||
|
||
.form-group input:focus,
|
||
.form-group select:focus {
|
||
outline: none;
|
||
border-color: #2e8b57;
|
||
}
|
||
|
||
.btn-full {
|
||
width: 100%;
|
||
}
|
||
|
||
/* Кнопки */
|
||
.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: white;
|
||
border-color: white;
|
||
}
|
||
|
||
.btn-outline:hover {
|
||
background: white;
|
||
color: #2e8b57;
|
||
}
|
||
|
||
.btn-large {
|
||
padding: 18px 35px;
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
/* Адаптивность */
|
||
@media (max-width: 768px) {
|
||
.hero-title {
|
||
font-size: 2.2rem;
|
||
}
|
||
|
||
.hero-features {
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.hero-actions {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.schedule-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.stats-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.workouts-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.locations-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.cta-features {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.cta-actions {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.btn {
|
||
width: 100%;
|
||
max-width: 300px;
|
||
}
|
||
|
||
.modal-content {
|
||
padding: 2rem 1.5rem;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.hero-section {
|
||
padding: 80px 0 60px;
|
||
}
|
||
|
||
.hero-title {
|
||
font-size: 1.8rem;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.container {
|
||
padding: 0 15px;
|
||
}
|
||
}
|
||
|
||
/* Анимации */
|
||
@keyframes fadeInUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.schedule-day,
|
||
.workout-card,
|
||
.location-card {
|
||
animation: fadeInUp 0.6s ease;
|
||
}
|
||
</style> |