From 5c7fb69090bc6c81b51e0e7ce5f25b9ec5d27c57 Mon Sep 17 00:00:00 2001
From: valitovgaziz <valitovgaziz@yandex.ru>
Date: Thu, 2 Oct 2025 12:11:58 +0500
Subject: [PATCH] 	modified:  
 begushiybashkir/bbvue/src/views/Training.vue add trainin page to
 begushiybashkir site

---
 begushiybashkir/bbvue/src/views/Training.vue | 1071 +++++++++++++++++-
 1 file changed, 1035 insertions(+), 36 deletions(-)

diff --git a/begushiybashkir/bbvue/src/views/Training.vue b/begushiybashkir/bbvue/src/views/Training.vue
index 2deb3a1..cbd0724 100644
--- a/begushiybashkir/bbvue/src/views/Training.vue
+++ b/begushiybashkir/bbvue/src/views/Training.vue
@@ -1,68 +1,1067 @@
 <template>
-  <div class="page">
-    <h1>📅 Тренировки</h1>
-    <p>Расписание и программы тренировок</p>
-    
-    <div class="schedule-section">
-      <h2>Расписание на неделю</h2>
-      <div class="schedule-grid">
-        <div v-for="day in schedule" :key="day.name" class="schedule-day">
-          <h4>{{ day.name }}</h4>
-          <p><strong>{{ day.time }}</strong></p>
-          <p>{{ day.activity }}</p>
+  <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>
-    </div>
+    </section>
 
-    <div class="training-actions">
-      <button class="btn">📚 База знаний</button>
-      <button class="btn">💪 Программы тренировок</button>
-      <button class="btn" @click="$router.push('/members')">👥 Найти партнера для тренировок</button>
+    <!-- Расписание -->
+    <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">🏞️</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">🏟️</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>
+      </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: 'Техника бега + ОФП' },
-        { name: 'Вторник', time: '--:--', activity: 'Восстановление' },
-        { name: 'Среда', time: '19:30', activity: 'Техника бега + СБУ' },
-        { name: 'Четверг', time: '--:--', activity: 'Восстановление' },
-        { name: 'Пятница', time: '--:--', activity: 'Восстановление' },
-        { name: 'Суббота', time: '10:00', activity: 'Длительный кросс' },
-        { name: 'Воскресенье', time: '--:--', activity: 'Восстановление' }
+        { 
+          name: 'Понедельник', 
+          time: '19:30', 
+          activity: 'Техника бега + ОФП',
+          location: 'Парк Якутова',
+          features: ['Коррекция техники', 'Силовые упражнения']
+        },
+        { 
+          name: 'Вторник', 
+          time: '--:--', 
+          activity: 'Восстановление',
+          features: ['Самостоятельно', 'Легкий бег']
+        },
+        { 
+          name: 'Среда', 
+          time: '19:30', 
+          activity: 'Техника бега + СБУ',
+          location: 'Стадион Динамо',
+          features: ['Спецупражнения', 'Работа над скоростью']
+        },
+        { 
+          name: 'Четверг', 
+          time: '--:--', 
+          activity: 'Восстановление',
+          features: ['Самостоятельно', 'Растяжка']
+        },
+        { 
+          name: 'Пятница', 
+          time: '--:--', 
+          activity: 'Восстановление',
+          features: ['Самостоятельно', 'Йога/Плавание']
+        },
+        { 
+          name: 'Суббота', 
+          time: '10:00', 
+          activity: 'Длительный кросс',
+          location: 'Лесопарковая зона',
+          features: ['Аэробная выносливость', '15-20 км']
+        },
+        { 
+          name: 'Воскресенье', 
+          time: '--:--', 
+          activity: 'Восстановление',
+          features: ['Полный отдых', 'Восстановительные процедуры']
+        }
       ]
     }
+  },
+  computed: {
+    today() {
+      const days = ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота']
+      return days[new Date().getDay()]
+    }
+  },
+  methods: {
+    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)
+  },
+  beforeUnmount() {
+    document.removeEventListener('keydown', this.handleKeydown)
+    document.body.style.overflow = ''
   }
 }
 </script>
 
 <style scoped>
-.schedule-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  gap: 1rem;
-  margin: 2rem 0;
+.training-page {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #f8fff8 0%, #f0f8f0 100%);
 }
 
-.schedule-day {
-  background: white;
-  padding: 1rem;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+/* Герой-секция */
+.hero-section {
+  background: linear-gradient(135deg, #2e8b57 0%, #26734a 100%);
+  color: white;
+  padding: 100px 0 80px;
   text-align: center;
 }
 
-.training-actions {
+.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;
-  margin-top: 2rem;
+}
+
+/* Основные стили */
+.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;
+}
+
+.location-card:hover {
+  transform: translateY(-5px);
+}
+
+.location-image {
+  height: 200px;
+  background: linear-gradient(135deg, #2e8b57 0%, #26734a 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.image-placeholder {
+  font-size: 4rem;
+  color: white;
+}
+
+.location-info {
+  padding: 2rem;
+}
+
+.location-info h3 {
+  color: #2e8b57;
+  margin-bottom: 0.5rem;
+}
+
+.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;
+}
+
+.location-desc {
+  color: #666;
+  line-height: 1.5;
+}
+
+/* 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 {
+  space-y: 1.5rem;
+}
+
+.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>
\ No newline at end of file