Spaces:

2026casino
/

undefined

Running

App Files Files Community

Aleksandr Sashka commited on Oct 10, 2025

Commit

f5b6191

verified ·

1 Parent(s): 4b761e8

создай современную шапку сайта с эффектами анимацией и с иконками

Browse files

Files changed (1) hide show

index.html +123 -29

index.html CHANGED Viewed

@@ -7,7 +7,7 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>
-    <style>
         @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700;900&display=swap');
         :root {
 --primary-gold: #FFD700;
@@ -219,14 +219,93 @@ max-width: 1000px;
             0% { transform: translateY(0); }
             100% { transform: translateY(-240px); }
         }
-        /* .nav-link styles removed */
 </style>
 </head>
 <body class="text-white bg-black">
 <div class="site-wrapper w-full max-w-[1200px] mx-auto px-4">
-    <!-- Header removed -->
     <!-- Hero Section -->
-    <section class="pt-12 pb-16 relative overflow-hidden">
         <div class="absolute inset-0 bg-cover bg-center opacity-30 bg-[length:70%]" style="background-image: url('https://testsite.casino-ya.ru/azino/images/59.jpg');"></div>
         <div class="absolute inset-0 overflow-hidden">
 </div>
@@ -781,40 +860,55 @@ feather.replace();
                 this.textContent = 'КРУТИТЬ';
             }, 2000);
         });
-        // Add scroll effect to header
         window.addEventListener('scroll', function() {
-            const header = document.querySelector('header');
-            if (window.scrollY > 50) {
-                header.classList.add('bg-black/95');
             } else {
-                header.classList.remove('bg-black/95');
             }
         });
-        // Mobile menu functionality
-        const mobileMenuButton = document.querySelector('.mobile-menu-btn');
-        const mobileMenu = document.querySelector('.mobile-menu');
-        mobileMenuButton.addEventListener('click', function() {
-            mobileMenu.classList.toggle('active');
             feather.replace();
         });
-        // Close mobile menu when clicking outside
-        document.addEventListener('click', function(event) {
-            if (!event.target.closest('.mobile-menu') &&
-                !event.target.closest('.mobile-menu-btn') &&
-                mobileMenu.classList.contains('active')) {
-                mobileMenu.classList.remove('active');
-            }
         });
-        // Close mobile menu when clicking on links
-        document.querySelectorAll('.mobile-menu a').forEach(link => {
-            link.addEventListener('click', function() {
-                mobileMenu.classList.remove('active');
             });
         });
-        // Responsive viewport handling
         function handleViewport() {
             document.body.style.minHeight = '100vh';
             document.querySelector('.site-wrapper').style.minHeight = 'calc(100vh - 70px)'; // Account for header

     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>
+<style>
         @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700;900&display=swap');
         :root {
 --primary-gold: #FFD700;
             0% { transform: translateY(0); }
             100% { transform: translateY(-240px); }
         }
+        /* Header styles */
+        .nav-link {
+            position: relative;
+            font-weight: 500;
+            transition: color 0.3s ease;
+        }
+        .nav-link::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            bottom: -4px;
+            width: 0;
+            height: 2px;
+            background: var(--primary-gold);
+            transition: width 0.3s ease;
+        }
+        .nav-link:hover::after {
+            width: 100%;
+        }
+        .nav-link-mobile {
+            display: block;
+            padding: 0.75rem 0;
+            font-weight: 500;
+            transition: color 0.3s ease;
+        }
+        .nav-link-mobile:hover {
+            color: var(--primary-gold);
+        }
+        #mobile-menu {
+            transition: max-height 0.5s ease-in-out;
+        }
 </style>
 </head>
 <body class="text-white bg-black">
+<!-- Modern Header -->
+<header id="main-header" class="fixed top-0 left-0 right-0 z-50 bg-black/80 backdrop-blur-lg border-b border-yellow-500/30 shadow-lg">
+  <div class="site-wrapper w-full max-w-[1200px] mx-auto px-4">
+    <div class="flex items-center justify-between h-20">
+      <!-- Logo -->
+      <a href="/" class="flex items-center space-x-3 group">
+        <img src="http://testsite.casino-ya.ru/azino/images/3.png" alt="Azino 777" class="h-10 w-auto transition-transform duration-300 group-hover:scale-110">
+        <span class="bebas text-2xl md:text-3xl gold-text tracking-wide">AZINO 777</span>
+      </a>
+      <!-- Desktop Nav -->
+      <nav class="hidden md:flex items-center space-x-8">
+        <a href="#games" class="nav-link">Игры</a>
+        <a href="#bonuses" class="nav-link">Бонусы</a>
+        <a href="#mobile" class="nav-link">Мобильная</a>
+        <a href="#support" class="nav-link">Поддержка</a>
+      </nav>
+      <!-- Right Side -->
+      <div class="flex items-center space-x-4">
+        <button class="hidden md:inline-flex items-center space-x-2 bg-yellow-500 hover:bg-yellow-400 text-black px-5 py-2 rounded-full font-bold transition-all duration-300 hover:scale-105">
+          <i data-feather="log-in" class="w-4 h-4"></i>
+          <span>Войти</span>
+        </button>
+        <button id="menu-toggle" class="md:hidden p-2 rounded-lg hover:bg-yellow-500/20 transition-colors">
+          <i data-feather="menu" class="w-6 h-6"></i>
+        </button>
+      </div>
+    </div>
+    <!-- Mobile Menu -->
+    <div id="mobile-menu" class="md:hidden overflow-hidden max-h-0 transition-all duration-500 ease-in-out">
+      <nav class="flex flex-col space-y-4 py-6">
+        <a href="#games" class="nav-link-mobile">Игры</a>
+        <a href="#bonuses" class="nav-link-mobile">Бонусы</a>
+        <a href="#mobile" class="nav-link-mobile">Мобильная</a>
+        <a href="#support" class="nav-link-mobile">Поддержка</a>
+        <button class="flex items-center justify-center space-x-2 bg-yellow-500 hover:bg-yellow-400 text-black px-5 py-3 rounded-full font-bold transition-all duration-300 hover:scale-105">
+          <i data-feather="log-in" class="w-4 h-4"></i>
+          <span>Войти</span>
+        </button>
+      </nav>
+    </div>
+  </div>
+</header>
+<!-- Hero offset -->
+<div class="h-20"></div>
 <div class="site-wrapper w-full max-w-[1200px] mx-auto px-4">
     <!-- Hero Section -->
+<section class="pt-12 pb-16 relative overflow-hidden">
         <div class="absolute inset-0 bg-cover bg-center opacity-30 bg-[length:70%]" style="background-image: url('https://testsite.casino-ya.ru/azino/images/59.jpg');"></div>
         <div class="absolute inset-0 overflow-hidden">
 </div>
                 this.textContent = 'КРУТИТЬ';
             }, 2000);
         });
+        // Header scroll effect
         window.addEventListener('scroll', function() {
+            const header = document.getElementById('main-header');
+            if (window.scrollY > 20) {
+                header.classList.add('bg-black/95', 'border-yellow-500/50');
+                header.classList.remove('bg-black/80');
             } else {
+                header.classList.remove('bg-black/95', 'border-yellow-500/50');
+                header.classList.add('bg-black/80');
             }
         });
+        // Mobile menu toggle
+        const menuToggle = document.getElementById('menu-toggle');
+        const mobileMenu = document.getElementById('mobile-menu');
+        let menuOpen = false;
+        menuToggle.addEventListener('click', () => {
+            menuOpen = !menuOpen;
+            if (menuOpen) {
+                mobileMenu.style.maxHeight = mobileMenu.scrollHeight + 'px';
+                menuToggle.innerHTML = '<i data-feather="x" class="w-6 h-6"></i>';
+            } else {
+                mobileMenu.style.maxHeight = '0';
+                menuToggle.innerHTML = '<i data-feather="menu" class="w-6 h-6"></i>';
+            }
             feather.replace();
         });
+        // Close mobile menu on link click
+        document.querySelectorAll('.nav-link-mobile').forEach(link => {
+            link.addEventListener('click', () => {
+                menuOpen = false;
+                mobileMenu.style.maxHeight = '0';
+                menuToggle.innerHTML = '<i data-feather="menu" class="w-6 h-6"></i>';
+                feather.replace();
+            });
         });
+        // Nav-link hover animation
+        document.querySelectorAll('.nav-link').forEach(link => {
+            link.addEventListener('mouseenter', () => {
+                link.classList.add('text-yellow-400');
+            });
+            link.addEventListener('mouseleave', () => {
+                link.classList.remove('text-yellow-400');
             });
         });
+// Responsive viewport handling
         function handleViewport() {
             document.body.style.minHeight = '100vh';
             document.querySelector('.site-wrapper').style.minHeight = 'calc(100vh - 70px)'; // Account for header