Spaces:

2026casino
/

undefined

Running

App Files Files Community

Aleksandr Sashka commited on Oct 10, 2025

Commit

5644fae

verified ·

1 Parent(s): 08ddb7e

сделай мобильную адаптацию сайту

Browse files

Files changed (1) hide show

index.html +228 -56

index.html CHANGED Viewed

@@ -3,14 +3,14 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Azino 777 – Официальный сайт казино</title>
     <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;
             --dark-red: #8B0000;
             --card-bg: rgba(139, 0, 0, 0.9);
         }
@@ -27,6 +27,150 @@
             width: 100%;
             box-sizing: border-box;
         }
 .bebas {
             font-family: 'Montserrat', sans-serif;
             font-weight: 900;
@@ -137,13 +281,14 @@
 <body class="text-white bg-black" style="width: 1100px; margin: 0 auto;">
 <div class="site-wrapper w-full" style="width: 1100px;">
 <!-- Header -->
-<header class="fixed top-0 z-50 bg-black backdrop-blur-md border-b-2 border-yellow-500 shadow-lg" style="width: 1100px; left: 50%; transform: translateX(-50%);">
-<nav class="w-full px-4 py-3" style="width: 1100px; margin: 0 auto;">
 <div class="flex justify-between items-center">
                 <div class="flex items-center space-x-3">
-                    <img src="http://testsite.casino-ya.ru/azino/images/3.png" alt="Azino 777 Logo" class="h-12 w-auto">
-</div>
-<div class="hidden md:flex items-center space-x-1 bg-black/40 backdrop-blur-sm rounded-full px-2 py-1 border border-yellow-600/30">
                     <a href="#games" class="nav-link px-4 py-2 text-sm font-medium hover:text-yellow-400 transition-colors">ИГРЫ</a>
                     <a href="#bonuses" class="nav-link px-4 py-2 text-sm font-medium hover:text-yellow-400 transition-colors">БОНУСЫ</a>
                     <a href="#mobile" class="nav-link px-4 py-2 text-sm font-medium hover:text-yellow-400 transition-colors">МОБИЛЬНОЕ</a>
@@ -151,17 +296,28 @@
                 </div>
                 <div class="flex items-center space-x-3">
-                    <button class="bg-gradient-to-r from-yellow-500 to-yellow-600 text-black px-5 py-2 rounded-full font-bold text-sm hover:from-yellow-400 hover:to-yellow-500 transition-all shadow-md hover:shadow-yellow-500/30 flex items-center">
-                        <i data-feather="log-in" class="w-4 h-4 mr-1"></i>
                         Вход
                     </button>
-                    <button class="bg-gradient-to-r from-red-600 to-red-800 text-white px-5 py-2 rounded-full font-bold text-sm hover:from-red-700 hover:to-red-900 transition-all shadow-md hover:shadow-red-500/30 flex items-center">
-                        <i data-feather="user-plus" class="w-4 h-4 mr-1"></i>
                         Регистрация
                     </button>
                 </div>
             </div>
         </nav>
     </header>
 <!-- Hero Section -->
     <section class="pt-24 pb-16 relative overflow-hidden">
@@ -171,58 +327,56 @@
             <div class="absolute top-10 left-10 w-32 h-32 border-4 border-yellow-500 rounded-full floating hidden md:block"></div>
 </div>
 <div class="site-wrapper px-4 relative z-10">
-<div class="grid md:grid-cols-2 gap-12 items-center">
                 <div>
-                    <h1 class="bebas text-5xl md:text-7xl gold-text mb-6 relative z-10">
                         АЗИНО 777
                     </h1>
-                    <p class="text-lg md:text-xl mb-8 text-gray-300 relative z-10">
 Официальное казино с бонусами, играми и максимальной безопасностью для вашего удовольствия
                     </p>
                     <div class="flex flex-wrap gap-2 md:gap-4 mb-8 justify-center md:justify-start relative z-10">
 <div class="flex items-center space-x-2">
-                            <i data-feather="shield" class="w-5 h-5 text-yellow-400"></i>
-                            <span>100% Безопасно</span>
                         </div>
                         <div class="flex items-center space-x-2">
-                            <i data-feather="gift" class="w-5 h-5 text-yellow-400"></i>
-                            <span>Щедрые бонусы</span>
                         </div>
                         <div class="flex items-center space-x-2">
-                            <i data-feather="smartphone" class="w-5 h-5 text-yellow-400"></i>
-                            <span>Мобильная версия</span>
                         </div>
                     </div>
-                    <div class="flex flex-wrap gap-2 md:gap-4 justify-center md:justify-start relative z-10">
-<button class="btn-gold text-lg pulse-gold">
                             Играть сейчас
                         </button>
-                        <button class="border-2 border-yellow-500 px-8 py-3 rounded-full font-bold hover:bg-yellow-500 hover:text-black transition-all">
                             Демо игры
                         </button>
                     </div>
 </div>
-                <div class="relative">
                     <img src="https://testsite.casino-ya.ru/azino/images/jp.png"
                          alt="Azino Bonus"
-                         class="rounded-lg shadow-2xl w-3/4 mx-auto relative z-10 mt-8 mb-8">
-<div class="absolute -bottom-6 -right-6 bg-gradient-to-r from-yellow-400 to-yellow-600 text-black px-6 py-3 rounded-lg font-bold transform rotate-3">
                         1.967.678.87 RUB
                     </div>
                 </div>
 </div>
         </div>
     </section>
-    <!-- Games Section -->
 <section id="games" class="py-16 bg-gradient-to-b from-transparent to-black/50">
         <div class="site-wrapper px-4">
 <h2 class="bebas text-5xl text-center gold-text mb-12">
                 ИГРОВАЯ БИБЛИОТЕКА
             </h2>
-            <div class="grid md:grid-cols-3 gap-8 mb-12">
-                <div class="card-gradient rounded-xl p-6 game-card">
                     <div class="flex items-center justify-between mb-4">
                         <i data-feather="zap" class="w-8 h-8 text-yellow-400"></i>
                         <span class="bg-yellow-500 text-black px-3 py-1 rounded-full text-sm font-bold">HOT</span>
@@ -312,9 +466,8 @@
 <h2 class="bebas text-5xl text-center gold-text mb-12">
                 БОНУСЫ И АКЦИИ
             </h2>
-            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-                <div class="text-center">
                     <div class="w-24 h-24 mx-auto mb-4 bg-gradient-to-br from-yellow-400 to-yellow-600 rounded-full flex items-center justify-center">
                         <span class="text-3xl font-bold text-black">200%</span>
                     </div>
@@ -473,9 +626,8 @@
 <h2 class="bebas text-5xl text-center gold-text mb-12">
                 МОБИЛЬНАЯ ВЕРСИЯ
             </h2>
-            <div class="grid md:grid-cols-2 gap-12 items-center">
-                <div>
                     <div class="flex items-center space-x-4 mb-6">
                         <i data-feather="smartphone" class="w-12 h-12 text-yellow-400"></i>
                         <h3 class="text-3xl font-bold">Играйте где угодно</h3>
@@ -548,9 +700,8 @@
 <h2 class="bebas text-5xl text-center gold-text mb-12">
                 БЕЗОПАСНОСТЬ И ЗАЩИТА
             </h2>
-            <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
-                <div class="text-center">
                     <div class="w-20 h-20 mx-auto mb-4 bg-gradient-to-br from-green-400 to-green-600 rounded-full flex items-center justify-center">
                         <i data-feather="shield" class="w-10 h-10 text-white"></i>
                     </div>
@@ -589,9 +740,8 @@
                     <p class="text-center text-xl mb-8">
                         Наша команда поддержки всегда готова помочь вам с любыми вопросами
                     </p>
-                    <div class="grid md:grid-cols-3 gap-6">
-                        <a href="#" class="text-center group">
                             <div class="w-16 h-16 mx-auto mb-3 bg-yellow-500 text-black rounded-full flex items-center justify-center group-hover:scale-110 transition-transform">
                                 <i data-feather="message-circle" class="w-8 h-8"></i>
                             </div>
@@ -641,10 +791,10 @@
     </section>
     <!-- Footer -->
-    <footer class="bg-black py-12 border-t border-yellow-600" style="width: 1100px; margin: 0 auto;">
-        <div class="site-wrapper px-4" style="width: 1100px;">
-<div class="grid md:grid-cols-4 gap-8">
-                <div>
                     <div class="flex items-center space-x-2 mb-4">
                         <img src="http://testsite.casino-ya.ru/azino/images/3.png" alt="Azino 777 Logo" class="h-10 w-auto">
 </div>
@@ -736,18 +886,40 @@ feather.replace();
                 header.classList.remove('bg-black/95');
             }
         });
-        // Add mobile menu toggle
-        const mobileMenuButton = document.createElement('button');
-        mobileMenuButton.innerHTML = '<i data-feather="menu" class="w-6 h-6"></i>';
-        mobileMenuButton.className = 'md:hidden text-yellow-400';
-        feather.replace();
         // Update background to cover full viewport
         document.body.style.minHeight = '100vh';
         document.querySelector('.site-wrapper').style.minHeight = '100vh';
-        // Set header container to fixed width
-        const headerNav = document.querySelector('header nav');
-        headerNav.style.maxWidth = '1200px';
 </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Azino 777 – Официальный сайт казино</title>
     <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;
             --dark-red: #8B0000;
             --card-bg: rgba(139, 0, 0, 0.9);
         }
             width: 100%;
             box-sizing: border-box;
         }
+        /* Mobile Responsive Styles */
+        @media (max-width: 768px) {
+            .site-wrapper {
+                padding: 0 10px;
+            }
+            .bebas {
+                font-size: 2.5rem !important;
+            }
+            .card-gradient {
+                margin: 0 auto;
+                max-width: 100%;
+            }
+            /* Header adjustments */
+            header {
+                padding: 0 10px;
+            }
+            .hidden.md\\:flex {
+                display: none;
+            }
+            /* Mobile menu button */
+            .mobile-menu-btn {
+                display: block !important;
+            }
+            /* Hero section */
+            .hero-grid {
+                grid-template-columns: 1fr !important;
+                text-align: center;
+            }
+            /* Games section */
+            .games-grid {
+                grid-template-columns: 1fr !important;
+            }
+            /* Bonuses section */
+            .bonuses-grid {
+                grid-template-columns: repeat(2, 1fr) !important;
+                gap: 15px;
+            }
+            /* Mobile section */
+            .mobile-grid {
+                grid-template-columns: 1fr !important;
+            }
+            /* Security section */
+            .security-grid {
+                grid-template-columns: 1fr !important;
+            }
+            /* Footer */
+            .footer-grid {
+                grid-template-columns: 1fr !important;
+                gap: 20px;
+            }
+            /* Buttons */
+            .btn-gold {
+                padding: 10px 20px;
+                font-size: 14px;
+            }
+            /* Table adjustments */
+            .payment-table {
+                font-size: 12px;
+            }
+            .payment-table th,
+            .payment-table td {
+                padding: 8px 4px;
+            }
+        }
+        @media (max-width: 480px) {
+            .bebas {
+                font-size: 2rem !important;
+            }
+            .bonuses-grid {
+                grid-template-columns: 1fr !important;
+            }
+            .hero-buttons {
+                flex-direction: column;
+                gap: 10px;
+            }
+            .btn-gold {
+                width: 100%;
+                text-align: center;
+            }
+        }
+        /* Mobile menu */
+        .mobile-menu-btn {
+            display: none;
+            background: none;
+            border: none;
+            color: var(--primary-gold);
+            font-size: 24px;
+            cursor: pointer;
+        }
+        .mobile-menu {
+            display: none;
+            position: fixed;
+            top: 70px;
+            left: 0;
+            right: 0;
+            background: rgba(0, 0, 0, 0.95);
+            backdrop-filter: blur(10px);
+            padding: 20px;
+            z-index: 1000;
+            border-top: 2px solid var(--primary-gold);
+        }
+        .mobile-menu.active {
+            display: block;
+        }
+        .mobile-menu a {
+            display: block;
+            padding: 15px 0;
+            text-align: center;
+            color: white;
+            text-decoration: none;
+            font-weight: 500;
+            border-bottom: 1px solid rgba(255, 215, 0, 0.2);
+        }
+        .mobile-menu a:last-child {
+            border-bottom: none;
+        }
+        .mobile-menu a:hover {
+            color: var(--primary-gold);
+        }
 .bebas {
             font-family: 'Montserrat', sans-serif;
             font-weight: 900;
 <body class="text-white bg-black" style="width: 1100px; margin: 0 auto;">
 <div class="site-wrapper w-full" style="width: 1100px;">
 <!-- Header -->
+<header class="fixed top-0 z-50 bg-black backdrop-blur-md border-b-2 border-yellow-500 shadow-lg w-full">
+<nav class="w-full px-4 py-3 max-w-1200 mx-auto">
 <div class="flex justify-between items-center">
                 <div class="flex items-center space-x-3">
+                    <img src="http://testsite.casino-ya.ru/azino/images/3.png" alt="Azino 777 Logo" class="h-10 md:h-12 w-auto">
+                </div>
+                <div class="hidden md:flex items-center space-x-1 bg-black/40 backdrop-blur-sm rounded-full px-2 py-1 border border-yellow-600/30">
                     <a href="#games" class="nav-link px-4 py-2 text-sm font-medium hover:text-yellow-400 transition-colors">ИГРЫ</a>
                     <a href="#bonuses" class="nav-link px-4 py-2 text-sm font-medium hover:text-yellow-400 transition-colors">БОНУСЫ</a>
                     <a href="#mobile" class="nav-link px-4 py-2 text-sm font-medium hover:text-yellow-400 transition-colors">МОБИЛЬНОЕ</a>
                 </div>
                 <div class="flex items-center space-x-3">
+                    <button class="mobile-menu-btn">
+                        <i data-feather="menu"></i>
+                    </button>
+                    <button class="bg-gradient-to-r from-yellow-500 to-yellow-600 text-black px-3 md:px-5 py-2 rounded-full font-bold text-xs md:text-sm hover:from-yellow-400 hover:to-yellow-500 transition-all shadow-md hover:shadow-yellow-500/30 flex items-center">
+                        <i data-feather="log-in" class="w-3 h-3 md:w-4 md:h-4 mr-1"></i>
                         Вход
                     </button>
+                    <button class="bg-gradient-to-r from-red-600 to-red-800 text-white px-3 md:px-5 py-2 rounded-full font-bold text-xs md:text-sm hover:from-red-700 hover:to-red-900 transition-all shadow-md hover:shadow-red-500/30 flex items-center">
+                        <i data-feather="user-plus" class="w-3 h-3 md:w-4 md:h-4 mr-1"></i>
                         Регистрация
                     </button>
                 </div>
             </div>
         </nav>
+        <!-- Mobile Menu -->
+        <div class="mobile-menu">
+            <a href="#games">ИГРЫ</a>
+            <a href="#bonuses">БОНУСЫ</a>
+            <a href="#mobile">МОБИЛЬНОЕ</a>
+            <a href="#support">ПОДДЕРЖКА</a>
+        </div>
     </header>
 <!-- Hero Section -->
     <section class="pt-24 pb-16 relative overflow-hidden">
             <div class="absolute top-10 left-10 w-32 h-32 border-4 border-yellow-500 rounded-full floating hidden md:block"></div>
 </div>
 <div class="site-wrapper px-4 relative z-10">
+<div class="grid md:grid-cols-2 gap-8 md:gap-12 items-center hero-grid">
                 <div>
+                    <h1 class="bebas text-4xl md:text-7xl gold-text mb-6 relative z-10 text-center md:text-left">
                         АЗИНО 777
                     </h1>
+                    <p class="text-base md:text-lg lg:text-xl mb-8 text-gray-300 relative z-10 text-center md:text-left">
 Официальное казино с бонусами, играми и максимальной безопасностью для вашего удовольствия
                     </p>
                     <div class="flex flex-wrap gap-2 md:gap-4 mb-8 justify-center md:justify-start relative z-10">
 <div class="flex items-center space-x-2">
+                            <i data-feather="shield" class="w-4 h-4 md:w-5 md:h-5 text-yellow-400"></i>
+                            <span class="text-sm md:text-base">100% Безопасно</span>
                         </div>
                         <div class="flex items-center space-x-2">
+                            <i data-feather="gift" class="w-4 h-4 md:w-5 md:h-5 text-yellow-400"></i>
+                            <span class="text-sm md:text-base">Щедрые бонусы</span>
                         </div>
                         <div class="flex items-center space-x-2">
+                            <i data-feather="smartphone" class="w-4 h-4 md:w-5 md:h-5 text-yellow-400"></i>
+                            <span class="text-sm md:text-base">Мобильная версия</span>
                         </div>
                     </div>
+                    <div class="flex flex-wrap gap-3 md:gap-4 justify-center md:justify-start relative z-10 hero-buttons">
+<button class="btn-gold text-base md:text-lg pulse-gold">
                             Играть сейчас
                         </button>
+                        <button class="border-2 border-yellow-500 px-6 md:px-8 py-2 md:py-3 rounded-full font-bold hover:bg-yellow-500 hover:text-black transition-all text-sm md:text-base">
                             Демо игры
                         </button>
                     </div>
 </div>
+                <div class="relative mt-8 md:mt-0">
                     <img src="https://testsite.casino-ya.ru/azino/images/jp.png"
                          alt="Azino Bonus"
+                         class="rounded-lg shadow-2xl w-full md:w-3/4 mx-auto relative z-10">
+<div class="absolute -bottom-4 -right-4 md:-bottom-6 md:-right-6 bg-gradient-to-r from-yellow-400 to-yellow-600 text-black px-4 py-2 md:px-6 md:py-3 rounded-lg font-bold transform rotate-3 text-sm md:text-base">
                         1.967.678.87 RUB
                     </div>
                 </div>
 </div>
         </div>
     </section>
+<!-- Games Section -->
 <section id="games" class="py-16 bg-gradient-to-b from-transparent to-black/50">
         <div class="site-wrapper px-4">
 <h2 class="bebas text-5xl text-center gold-text mb-12">
                 ИГРОВАЯ БИБЛИОТЕКА
             </h2>
+            <div class="grid md:grid-cols-3 gap-6 md:gap-8 mb-12 games-grid">
+<div class="card-gradient rounded-xl p-6 game-card">
                     <div class="flex items-center justify-between mb-4">
                         <i data-feather="zap" class="w-8 h-8 text-yellow-400"></i>
                         <span class="bg-yellow-500 text-black px-3 py-1 rounded-full text-sm font-bold">HOT</span>
 <h2 class="bebas text-5xl text-center gold-text mb-12">
                 БОНУСЫ И АКЦИИ
             </h2>
+            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 bonuses-grid">
+<div class="text-center">
                     <div class="w-24 h-24 mx-auto mb-4 bg-gradient-to-br from-yellow-400 to-yellow-600 rounded-full flex items-center justify-center">
                         <span class="text-3xl font-bold text-black">200%</span>
                     </div>
 <h2 class="bebas text-5xl text-center gold-text mb-12">
                 МОБИЛЬНАЯ ВЕРСИЯ
             </h2>
+            <div class="grid md:grid-cols-2 gap-8 md:gap-12 items-center mobile-grid">
+<div>
                     <div class="flex items-center space-x-4 mb-6">
                         <i data-feather="smartphone" class="w-12 h-12 text-yellow-400"></i>
                         <h3 class="text-3xl font-bold">Играйте где угодно</h3>
 <h2 class="bebas text-5xl text-center gold-text mb-12">
                 БЕЗОПАСНОСТЬ И ЗАЩИТА
             </h2>
+            <div class="grid md:grid-cols-3 gap-6 md:gap-8 max-w-5xl mx-auto security-grid">
+<div class="text-center">
                     <div class="w-20 h-20 mx-auto mb-4 bg-gradient-to-br from-green-400 to-green-600 rounded-full flex items-center justify-center">
                         <i data-feather="shield" class="w-10 h-10 text-white"></i>
                     </div>
                     <p class="text-center text-xl mb-8">
                         Наша команда поддержки всегда готова помочь вам с любыми вопросами
                     </p>
+                    <div class="grid md:grid-cols-3 gap-4 md:gap-6">
+<a href="#" class="text-center group">
                             <div class="w-16 h-16 mx-auto mb-3 bg-yellow-500 text-black rounded-full flex items-center justify-center group-hover:scale-110 transition-transform">
                                 <i data-feather="message-circle" class="w-8 h-8"></i>
                             </div>
     </section>
     <!-- Footer -->
+    <footer class="bg-black py-12 border-t border-yellow-600 w-full">
+        <div class="site-wrapper px-4">
+<div class="grid md:grid-cols-4 gap-6 md:gap-8 footer-grid">
+<div>
                     <div class="flex items-center space-x-2 mb-4">
                         <img src="http://testsite.casino-ya.ru/azino/images/3.png" alt="Azino 777 Logo" class="h-10 w-auto">
 </div>
                 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');
+            });
+        });
         // Update background to cover full viewport
         document.body.style.minHeight = '100vh';
         document.querySelector('.site-wrapper').style.minHeight = '100vh';
+        // Responsive table handling
+        const paymentTable = document.querySelector('.card-gradient table');
+        if (paymentTable && window.innerWidth < 768) {
+            paymentTable.classList.add('payment-table');
+        }
 </script>
 </body>
 </html>