add privacy polacy and TermsOfCervice pages and dowcuments for downloads

begushiybashkir/bbvue/src/router/index.js

@@ -52,7 +52,8 @@ const router = createRouter({
     {
       path: '/profile',
       name: 'Profile',
-      component: () => import('../views/Profile.vue')
+      component: () => import('../views/Profile.vue'),
+      meta: { requiresAuth: true }
     },
     {
       path: '/register',
@@ -64,6 +65,16 @@ const router = createRouter({
       name: 'ProfileEdit',
       component: () => import('../views/ProfileEdit.vue'),
       meta: { requiresAuth: true }
+    },
+    {
+      path: '/terms',
+      name: 'TermsOfService',
+      component: () => import('../views/TermsOfService.vue')
+    },
+    {
+      path: '/privacy',
+      name: 'PrivacyPolicy',
+      component: () => import('../views/PrivacyPolicy.vue')
     }
   ]
 })

begushiybashkir/bbvue/src/views/PrivacyPolicy.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="page">
+    <div class="document-container">
+      <div class="document-header">
+        <h1>🔒 Политика конфиденциальности</h1>
+        <div class="document-meta">
+          <p>Дата последнего обновления: {{ lastUpdated }}</p>
+          <button class="btn btn-secondary" @click="downloadPDF">
+            📥 Скачать PDF
+          </button>
+        </div>
+      </div>
+
+      <div class="document-content">
+        <section class="document-section">
+          <h2>1. Общие положения</h2>
+          <p>1.1. Настоящая Политика конфиденциальности регулирует порядок сбора, хранения и использования персональных данных пользователей бегового клуба "Бегущий Башкир".</p>
+          <p>1.2. Используя наш сайт и услуги, вы соглашаетесь с условиями настоящей Политики.</p>
+        </section>
+
+        <section class="document-section">
+          <h2>2. Собираемая информация</h2>
+          <p>2.1. Мы собираем следующую информацию:</p>
+          <ul>
+            <li><strong>Персональные данные:</strong> имя, фамилия, email, телефон</li>
+            <li><strong>Данные для тренировок:</strong> уровень подготовки, цели, спортивные результаты</li>
+            <li><strong>Технические данные:</strong> IP-адрес, данные cookies, информация о браузере</li>
+          </ul>
+        </section>
+
+        <section class="document-section">
+          <h2>3. Цели использования данных</h2>
+          <p>3.1. Собранные данные используются для:</p>
+          <ul>
+            <li>Регистрации и идентификации пользователей</li>
+            <li>Предоставления персонализированных тренировочных программ</li>
+            <li>Организации мероприятий и забегов</li>
+            <li>Отправки информационных материалов (при согласии)</li>
+            <li>Улучшения качества наших услуг</li>
+          </ul>
+        </section>
+
+        <section class="document-section">
+          <h2>4. Защита данных</h2>
+          <p>4.1. Мы принимаем все необходимые меры для защиты ваших персональных данных от несанкционированного доступа.</p>
+          <p>4.2. Данные хранятся на защищенных серверах и передаются в зашифрованном виде.</p>
+        </section>
+
+        <section class="document-section">
+          <h2>5. Передача данных третьим лицам</h2>
+          <p>5.1. Мы не передаем ваши персональные данные третьим лицам, за исключением:</p>
+          <ul>
+            <li>Случаев, предусмотренных законодательством РФ</li>
+            <li>Партнеров по организации мероприятий (только с вашего согласия)</li>
+            <li>Сервисных провайдеров, обеспечивающих работу нашего сайта</li>
+          </ul>
+        </section>
+
+        <section class="document-section">
+          <h2>6. Cookies и аналитика</h2>
+          <p>6.1. Мы используем cookies для улучшения работы сайта и сбора аналитической информации.</p>
+          <p>6.2. Вы можете отключить cookies в настройках браузера.</p>
+        </section>
+
+        <section class="document-section">
+          <h2>7. Ваши права</h2>
+          <p>7.1. Вы имеете право:</p>
+          <ul>
+            <li>На доступ к вашим персональным данным</li>
+            <li>На исправление неточных данных</li>
+            <li>На удаление ваших данных</li>
+            <li>На отзыв согласия на обработку данных</li>
+          </ul>
+        </section>
+
+        <section class="document-section">
+          <h2>8. Контакты</h2>
+          <p>По вопросам, связанным с обработкой персональных данных, обращайтесь:</p>
+          <p>📧 Email: privacy@begushiybashkir.ru<br>
+             📞 Телефон: +7 (XXX) XXX-XX-XX</p>
+        </section>
+      </div>
+
+      <div class="document-actions">
+        <button class="btn btn-primary" @click="$router.back()">
+          ← Назад к регистрации
+        </button>
+        <button class="btn btn-secondary" @click="downloadPDF">
+          📥 Скачать политику
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PrivacyPolicy',
+  data() {
+    return {
+      lastUpdated: '10 октября 2024 года'
+    }
+  },
+  methods: {
+    downloadPDF() {
+      const link = document.createElement('a')
+      link.href = '/documents/privacy-policy.pdf'
+      link.download = 'politika-konfidencialnosti.pdf'
+      link.click()
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* Стили такие же как в TermsOfService.vue */
+.document-container {
+  max-width: 800px;
+  margin: 0 auto;
+  background: white;
+  border-radius: 10px;
+  box-shadow: 0 2px 15px rgba(0,0,0,0.1);
+  overflow: hidden;
+}
+
+.document-header {
+  background: linear-gradient(135deg, #2e8b57, #3da56a);
+  color: white;
+  padding: 2rem;
+  text-align: center;
+}
+
+.document-header h1 {
+  margin: 0 0 1rem 0;
+  font-size: 1.8rem;
+}
+
+.document-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.document-content {
+  padding: 2rem;
+  line-height: 1.6;
+}
+
+.document-section {
+  margin-bottom: 2rem;
+}
+
+.document-section h2 {
+  color: #2e8b57;
+  border-bottom: 2px solid #e8f5e8;
+  padding-bottom: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.document-section ul {
+  padding-left: 1.5rem;
+}
+
+.document-section li {
+  margin-bottom: 0.5rem;
+}
+
+.document-actions {
+  padding: 1.5rem 2rem;
+  background: #f8fff8;
+  border-top: 1px solid #e8f5e8;
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+}
+
+@media (max-width: 768px) {
+  .document-meta {
+    flex-direction: column;
+    text-align: center;
+  }
+  
+  .document-content {
+    padding: 1.5rem;
+  }
+  
+  .document-actions {
+    flex-direction: column;
+  }
+}
+</style>

begushiybashkir/bbvue/src/views/Register.vue

@@ -8,93 +8,46 @@
         <div class="form-row">
           <div class="form-group">
             <label for="firstName">Имя *</label>
-            <input
+            <input id="firstName" v-model="formData.firstName" type="text" class="form-input"
-              id="firstName"
+              placeholder="Введите ваше имя" required :disabled="loading">
-              v-model="formData.firstName"
-              type="text"
-              class="form-input"
-              placeholder="Введите ваше имя"
-              required
-              :disabled="loading"
-            >
           </div>
 
           <div class="form-group">
             <label for="lastName">Фамилия *</label>
-            <input
+            <input id="lastName" v-model="formData.lastName" type="text" class="form-input"
-              id="lastName"
+              placeholder="Введите вашу фамилию" required :disabled="loading">
-              v-model="formData.lastName"
-              type="text"
-              class="form-input"
-              placeholder="Введите вашу фамилию"
-              required
-              :disabled="loading"
-            >
           </div>
         </div>
 
         <div class="form-group">
           <label for="email">Email *</label>
-          <input
+          <input id="email" v-model="formData.email" type="email" class="form-input" placeholder="example@mail.ru"
-            id="email"
+            required :disabled="loading">
-            v-model="formData.email"
-            type="email"
-            class="form-input"
-            placeholder="example@mail.ru"
-            required
-            :disabled="loading"
-          >
         </div>
 
         <div class="form-group">
           <label for="phone">Телефон</label>
-          <input
+          <input id="phone" v-model="formData.phone" type="tel" class="form-input" placeholder="+7 (999) 123-45-67"
-            id="phone"
+            :disabled="loading">
-            v-model="formData.phone"
-            type="tel"
-            class="form-input"
-            placeholder="+7 (999) 123-45-67"
-            :disabled="loading"
-          >
         </div>
 
         <div class="form-row">
           <div class="form-group">
             <label for="password">Пароль *</label>
-            <input
+            <input id="password" v-model="formData.password" type="password" class="form-input"
-              id="password"
+              placeholder="Не менее 6 символов" required minlength="6" :disabled="loading">
-              v-model="formData.password"
-              type="password"
-              class="form-input"
-              placeholder="Не менее 6 символов"
-              required
-              minlength="6"
-              :disabled="loading"
-            >
           </div>
 
           <div class="form-group">
             <label for="confirmPassword">Подтверждение пароля *</label>
-            <input
+            <input id="confirmPassword" v-model="formData.confirmPassword" type="password" class="form-input"
-              id="confirmPassword"
+              placeholder="Повторите пароль" required :disabled="loading">
-              v-model="formData.confirmPassword"
-              type="password"
-              class="form-input"
-              placeholder="Повторите пароль"
-              required
-              :disabled="loading"
-            >
           </div>
         </div>
 
         <div class="form-group">
           <label for="experience">Уровень подготовки</label>
-          <select
+          <select id="experience" v-model="formData.experience" class="form-input" :disabled="loading">
-            id="experience"
-            v-model="formData.experience"
-            class="form-input"
-            :disabled="loading"
-          >
             <option value="">Выберите уровень</option>
             <option value="beginner">Начинающий (0-6 месяцев)</option>
             <option value="intermediate">Любитель (6-24 месяцев)</option>
@@ -105,12 +58,7 @@
 
         <div class="form-group">
           <label for="goals">Цели</label>
-          <select
+          <select id="goals" v-model="formData.goals" class="form-input" :disabled="loading">
-            id="goals"
-            v-model="formData.goals"
-            class="form-input"
-            :disabled="loading"
-          >
             <option value="">Выберите цель</option>
             <option value="health">Улучшить здоровье</option>
             <option value="weight">Сбросить вес</option>
@@ -125,38 +73,24 @@
 
         <div class="form-group checkbox-group">
           <label class="checkbox-label">
-            <input
+            <input v-model="formData.agreeTerms" type="checkbox" class="checkbox" required :disabled="loading">
-              v-model="formData.agreeTerms"
-              type="checkbox"
-              class="checkbox"
-              required
-              :disabled="loading"
-            >
             <span class="checkmark"></span>
             Я соглашаюсь с
-            <a href="#" class="link">правилами клуба</a> и 
+
-            <a href="#" class="link">политикой конфиденциальности</a> *
+            <router-link to="/terms" class="link" target="_blank">правилами клуба</router-link> и
+            <router-link to="/privacy" class="link" target="_blank">политикой конфиденциальности</router-link> *
           </label>
         </div>
 
         <div class="form-group checkbox-group">
           <label class="checkbox-label">
-            <input
+            <input v-model="formData.newsletter" type="checkbox" class="checkbox" :disabled="loading">
-              v-model="formData.newsletter"
-              type="checkbox"
-              class="checkbox"
-              :disabled="loading"
-            >
             <span class="checkmark"></span>
             Хочу получать новости о тренировках и мероприятиях
           </label>
         </div>
 
-        <button 
+        <button type="submit" class="btn btn-primary" :disabled="!formData.agreeTerms || loading">
-          type="submit" 
-          class="btn btn-primary"
-          :disabled="!formData.agreeTerms || loading"
-        >
           {{ loading ? 'Регистрация...' : '🏃 Зарегистрироваться' }}
         </button>
 
@@ -277,7 +211,7 @@ export default {
   background: white;
   padding: 2rem;
   border-radius: 10px;
-  box-shadow: 0 2px 15px rgba(0,0,0,0.1);
+  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
   margin: 2rem 0;
 }
 
@@ -344,12 +278,12 @@ export default {
   flex-shrink: 0;
 }
 
-.checkbox:checked + .checkmark {
+.checkbox:checked+.checkmark {
   background-color: #2e8b57;
   border-color: #2e8b57;
 }
 
-.checkbox:checked + .checkmark::after {
+.checkbox:checked+.checkmark::after {
   content: '✓';
   color: white;
   position: absolute;

begushiybashkir/bbvue/src/views/TermsOfService.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="page">
+    <div class="document-container">
+      <div class="document-header">
+        <h1>📋 Правила бегового клуба "Бегущий Башкир"</h1>
+        <div class="document-meta">
+          <p>Дата последнего обновления: {{ lastUpdated }}</p>
+          <button class="btn btn-secondary" @click="downloadPDF">
+            📥 Скачать PDF
+          </button>
+        </div>
+      </div>
+
+      <div class="document-content">
+        <section class="document-section">
+          <h2>1. Общие положения</h2>
+          <p>1.1. Беговой клуб "Бегущий Башкир" (далее – "Клуб") – это сообщество любителей бега, созданное для популяризации здорового образа жизни и развития беговой культуры в Республике Башкортостан.</p>
+          <p>1.2. Участником Клуба может стать любой желающий, достигший 18 лет и согласившийся с настоящими Правилами.</p>
+        </section>
+
+        <section class="document-section">
+          <h2>2. Членство в Клубе</h2>
+          <p>2.1. Для вступления в Клуб необходимо:</p>
+          <ul>
+            <li>Заполнить регистрационную форму на сайте</li>
+            <li>Ознакомиться и принять настоящие Правила</li>
+            <li>Оплатить членский взнос (при наличии)</li>
+          </ul>
+          
+          <p>2.2. Участники Клуба имеют право:</p>
+          <ul>
+            <li>Участвовать в регулярных тренировках Клуба</li>
+            <li>Получать консультации тренеров</li>
+            <li>Участвовать в клубных мероприятиях и забегах</li>
+            <li>Получать скидки от партнеров Клуба</li>
+          </ul>
+        </section>
+
+        <section class="document-section">
+          <h2>3. Обязанности участников</h2>
+          <p>3.1. Участники обязаны:</p>
+          <ul>
+            <li>Соблюдать технику безопасности во время тренировок</li>
+            <li>Быть пунктуальными</li>
+            <li>Уважительно относиться к другим участникам и тренерам</li>
+            <li>Следовать указаниям тренера</li>
+            <li>Сообщать тренеру о проблемах со здоровьем</li>
+          </ul>
+        </section>
+
+        <section class="document-section">
+          <h2>4. Тренировочный процесс</h2>
+          <p>4.1. Расписание тренировок публикуется на сайте Клуба и в официальных группах в социальных сетях.</p>
+          <p>4.2. Участники обязаны предупреждать тренера о невозможности посетить тренировку.</p>
+        </section>
+
+        <section class="document-section">
+          <h2>5. Безопасность</h2>
+          <p>5.1. Участники несут ответственность за свое здоровье и безопасность во время тренировок.</p>
+          <p>5.2. Клуб не несет ответственности за травмы, полученные в результате несоблюдения техники безопасности.</p>
+        </section>
+
+        <section class="document-section">
+          <h2>6. Конфиденциальность</h2>
+          <p>6.1. Клуб обязуется не передавать персональные данные участников третьим лицам.</p>
+        </section>
+      </div>
+
+      <div class="document-actions">
+        <button class="btn btn-primary" @click="$router.back()">
+          ← Назад к регистрации
+        </button>
+        <button class="btn btn-secondary" @click="downloadPDF">
+          📥 Скачать правила
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TermsOfService',
+  data() {
+    return {
+      lastUpdated: '10 октября 2024 года'
+    }
+  },
+  methods: {
+    downloadPDF() {
+      // Временная реализация - можно заменить на реальный PDF
+      const link = document.createElement('a')
+      link.href = '/documents/terms-of-service.pdf'
+      link.download = 'pravila-begovogo-kluba.pdf'
+      link.click()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.document-container {
+  max-width: 800px;
+  margin: 0 auto;
+  background: white;
+  border-radius: 10px;
+  box-shadow: 0 2px 15px rgba(0,0,0,0.1);
+  overflow: hidden;
+}
+
+.document-header {
+  background: linear-gradient(135deg, #2e8b57, #3da56a);
+  color: white;
+  padding: 2rem;
+  text-align: center;
+}
+
+.document-header h1 {
+  margin: 0 0 1rem 0;
+  font-size: 1.8rem;
+}
+
+.document-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.document-content {
+  padding: 2rem;
+  line-height: 1.6;
+}
+
+.document-section {
+  margin-bottom: 2rem;
+}
+
+.document-section h2 {
+  color: #2e8b57;
+  border-bottom: 2px solid #e8f5e8;
+  padding-bottom: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.document-section ul {
+  padding-left: 1.5rem;
+}
+
+.document-section li {
+  margin-bottom: 0.5rem;
+}
+
+.document-actions {
+  padding: 1.5rem 2rem;
+  background: #f8fff8;
+  border-top: 1px solid #e8f5e8;
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+}
+
+/* Адаптивность */
+@media (max-width: 768px) {
+  .document-meta {
+    flex-direction: column;
+    text-align: center;
+  }
+  
+  .document-content {
+    padding: 1.5rem;
+  }
+  
+  .document-actions {
+    flex-direction: column;
+  }
+}
+</style>