create and moove into new directories for BegushiyBashkir and

yalarbacreate and moove into new directories for BegushiyBashkir and yalarbacreate and moove into new directories for BegushiyBashkir and yalarbacreate and moove into new directories for BegushiyBashkir and yalarbacreate and moove into new directories for BegushiyBashkir and yalarbacreate and moove into new directories for BegushiyBashkir and yalarbacreate and moove into new directories for BegushiyBashkir and yalarbacreate and moove into new directories for BegushiyBashkir and yalarbacreate and moove into new directories for BegushiyBashkir and yalarba
2025-10-24 05:22:44 +05:00
parent 358c14428f
commit 15357fd3c0
211 changed files with 3 additions and 3 deletions
@@ -0,0 +1,262 @@
+<template>
+  <div id="app">
+    <header v-if="showHeader" :class="['app-header', { 'header-visible': headerVisible }]">
+      <div class="container header-container">
+        <!-- Логотип -->
+        <router-link to="/" class="logo-link">
+          <div class="logo">
+            <div class="logo-box">
+              <img src="./assets/logo/Logo.png" alt="Little logo begushiy bashkir" class="little-logo">
+            </div>
+            <div class="logo-box">
+              <span><i>Бегущий Башкир</i></span>
+            </div>
+            <div class="logo-box team">
+              <span>team</span>
+            </div>
+          </div>
+        </router-link>
+
+        <!-- Используем компонент меню -->
+        <NavigationMenu />
+      </div>
+    </header>
+
+    <main class="main-content">
+      <router-view @show-header="handleShowHeader" />
+    </main>
+
+    <footer class="app-footer">
+      <div class="container">
+        <p>© 2025 Беговой клуб "Бегущий Башкир". Все права защищены.</p>
+        <p>Уфа, Республика Башкортостан</p>
+      </div>
+    </footer>
+  </div>
+</template>
+
+<script>
+import NavigationMenu from './components/NavigationMenu.vue'
+
+export default {
+  name: 'App',
+  components: {
+    NavigationMenu
+  },
+  data() {
+    return {
+      showHeader: false,
+      headerVisible: false
+    }
+  },
+  methods: {
+    handleShowHeader() {
+      this.showHeader = true
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.headerVisible = true
+        }, 50)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* Остальные стили остаются без изменений */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+.hero-section {
+  opacity: 0;
+  transform: translateY(50px);
+  transition: all 1s ease-out;
+}
+
+.hero-section.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+body {
+  line-height: 1.6;
+  color: #333;
+  overflow-x: hidden;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 10px;
+}
+
+/* Header Styles */
+.app-header {
+  color: white;
+  padding: 0;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  transform: translateY(-100%);
+  opacity: 0;
+  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.app-header.header-visible {
+  transform: translateY(0);
+  opacity: 1;
+}
+
+.header-container {
+  max-width: 1200px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  font-size: 2em;
+}
+
+/* Logo Styles */
+.logo-link {
+  text-decoration: none;
+  color: inherit;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+  z-index: 1002;
+}
+
+.logo-box {
+  display: flex;
+  align-items: center;
+  text-shadow: 2px 2px 5px #132016d0;
+}
+
+.little-logo {
+  width: 2.5rem;
+  height: 2.5rem;
+  object-fit: contain;
+  filter: drop-shadow(2px 2px 4px rgb(160, 178, 152));
+}
+
+.team {
+  font-size: 0.8rem;
+  opacity: 0.8;
+  align-self: flex-end;
+  margin-bottom: 0.2rem;
+}
+
+/* Main Content */
+.main-content {
+  min-height: calc(100vh);
+  padding: 0;
+}
+
+/* Footer */
+.app-footer {
+  background-color: #1a3e23;
+  color: white;
+  text-align: center;
+  padding: 1.5rem 0;
+  margin-top: 2rem;
+}
+
+.app-footer p {
+  margin-bottom: 0.5rem;
+}
+
+/* Responsive Design */
+@media (max-width: 1023px) and (min-width: 768px) {
+  .team {
+    display: none;
+  }
+}
+
+@media (max-width: 767px) {
+  .logo {
+    font-size: 1.1rem;
+  }
+
+  .team {
+    display: none;
+  }
+
+  .little-logo {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  .container {
+    padding: 0 15px;
+  }
+}
+
+@media (max-width: 360px) {
+  .logo-box:nth-child(2) {
+    display: none;
+  }
+}
+
+/* Button Styles */
+.btn {
+  display: inline-block;
+  background-color: #ffd700;
+  color: #333;
+  padding: 12px 30px;
+  border-radius: 5px;
+  text-decoration: none;
+  font-weight: bold;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.3s;
+  margin: 0.5rem;
+}
+
+.btn:hover {
+  background-color: #e6c200;
+}
+
+.btn-secondary {
+  background-color: #6c757d;
+  color: white;
+}
+
+.btn-secondary:hover {
+  background-color: #545b62;
+}
+
+/* Page Styles */
+.page {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.page h1 {
+  color: #2e8b57;
+  margin-bottom: 1rem;
+  font-size: 2.5rem;
+}
+
+.page p {
+  font-size: 1.1rem;
+  margin-bottom: 1.5rem;
+  color: #666;
+}
+</style>