Spaces:
Running
Running
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CraftBeer - Магазин крафтового пива</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .beer-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); | |
| } | |
| .category-btn.active { | |
| background-color: #f59e0b; | |
| color: white; | |
| } | |
| .hero { | |
| background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1513309914637-65c20a5962e1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .cart-preview { | |
| transition: all 0.3s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <!-- Header --> | |
| <header class="bg-amber-900 text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-beer text-2xl"></i> | |
| <h1 class="text-2xl font-bold">CraftBeer</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-6"> | |
| <a href="#home" class="hover:text-amber-200 transition">Главная</a> | |
| <a href="#craft" class="hover:text-amber-200 transition">Крафтовое</a> | |
| <a href="#non-alc" class="hover:text-amber-200 transition">Безалкогольное</a> | |
| <a href="#import" class="hover:text-amber-200 transition">Импортное</a> | |
| <a href="#about" class="hover:text-amber-200 transition">О нас</a> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <button id="cart-btn" class="hover:text-amber-200 transition"> | |
| <i class="fas fa-shopping-cart text-xl"></i> | |
| <span id="cart-count" class="absolute -top-2 -right-2 bg-amber-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span> | |
| </button> | |
| <div id="cart-preview" class="cart-preview hidden absolute right-0 mt-2 w-64 bg-white text-gray-800 rounded-lg shadow-xl p-4 z-10"> | |
| <h3 class="font-bold mb-2">Ваша корзина</h3> | |
| <div id="cart-items" class="mb-2"> | |
| <!-- Cart items will be added here --> | |
| <p class="text-sm text-gray-500">Корзина пуста</p> | |
| </div> | |
| <div class="flex justify-between items-center border-t pt-2"> | |
| <span class="font-bold">Итого:</span> | |
| <span id="cart-total" class="font-bold">0 ₽</span> | |
| </div> | |
| <button class="mt-2 w-full bg-amber-600 hover:bg-amber-700 text-white py-1 rounded">Оформить</button> | |
| </div> | |
| </div> | |
| <button class="md:hidden" id="mobile-menu-btn"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-amber-800 px-4 py-2"> | |
| <a href="#home" class="block py-2 hover:text-amber-200 transition">Главная</a> | |
| <a href="#craft" class="block py-2 hover:text-amber-200 transition">Крафтовое</a> | |
| <a href="#non-alc" class="block py-2 hover:text-amber-200 transition">Безалкогольное</a> | |
| <a href="#import" class="block py-2 hover:text-amber-200 transition">Импортное</a> | |
| <a href="#about" class="block py-2 hover:text-amber-200 transition">О нас</a> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="home" class="hero text-white py-20"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">Лучшее крафтовое пиво с доставкой</h1> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Откройте для себя уникальные вкусы от лучших пивоварен мира</p> | |
| <div class="flex flex-wrap justify-center gap-4"> | |
| <a href="#craft" class="bg-amber-600 hover:bg-amber-700 px-6 py-3 rounded-lg font-medium transition">Выбрать пиво</a> | |
| <a href="#about" class="bg-white hover:bg-gray-100 text-amber-900 px-6 py-3 rounded-lg font-medium transition">О пивоварне</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Categories --> | |
| <section class="bg-white py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex overflow-x-auto pb-2 space-x-2"> | |
| <button class="category-btn active px-4 py-2 rounded-full whitespace-nowrap" data-category="all">Все</button> | |
| <button class="category-btn px-4 py-2 rounded-full whitespace-nowrap" data-category="craft">Крафтовое</button> | |
| <button class="category-btn px-4 py-2 rounded-full whitespace-nowrap" data-category="non-alc">Безалкогольное</button> | |
| <button class="category-btn px-4 py-2 rounded-full whitespace-nowrap" data-category="import">Импортное</button> | |
| <button class="category-btn px-4 py-2 rounded-full whitespace-nowrap" data-category="wheat">Пшеничное</button> | |
| <button class="category-btn px-4 py-2 rounded-full whitespace-nowrap" data-category="ipa">IPA</button> | |
| <button class="category-btn px-4 py-2 rounded-full whitespace-nowrap" data-category="stout">Стауты</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Craft Beer Section --> | |
| <section id="craft" class="py-12 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-3xl font-bold text-gray-800">Крафтовое пиво</h2> | |
| <a href="#" class="text-amber-700 hover:text-amber-900 font-medium">Смотреть все →</a> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> | |
| <!-- Beer Card 1 --> | |
| <div class="beer-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="craft ipa"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1618888505391-64d0b98c0a85?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="IPA" class="w-full h-48 object-cover"> | |
| <span class="absolute top-2 right-2 bg-amber-500 text-white text-xs px-2 py-1 rounded">IPA</span> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Hop Explosion IPA</h3> | |
| <p class="text-gray-600 text-sm mb-2">7.2% ABV • 0.5L</p> | |
| <p class="text-gray-700 mb-4">Индийский пейл-эль с ярким хмелевым вкусом и цитрусовыми нотами.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-lg">450 ₽</span> | |
| <button class="add-to-cart bg-amber-600 hover:bg-amber-700 text-white px-3 py-1 rounded transition" data-name="Hop Explosion IPA" data-price="450"> | |
| В корзину | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Beer Card 2 --> | |
| <div class="beer-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="craft stout"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1600788886242-5e96f6d9c4ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Stout" class="w-full h-48 object-cover"> | |
| <span class="absolute top-2 right-2 bg-amber-500 text-white text-xs px-2 py-1 rounded">Стаут</span> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Midnight Stout</h3> | |
| <p class="text-gray-600 text-sm mb-2">8.0% ABV • 0.5L</p> | |
| <p class="text-gray-700 mb-4">Имперский стаут с нотами жареного кофе, темного шоколада и карамели.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-lg">520 ₽</span> | |
| <button class="add-to-cart bg-amber-600 hover:bg-amber-700 text-white px-3 py-1 rounded transition" data-name="Midnight Stout" data-price="520"> | |
| В корзину | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Beer Card 3 --> | |
| <div class="beer-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="craft wheat"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1600788886242-5e96f6d9c4ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Wheat" class="w-full h-48 object-cover"> | |
| <span class="absolute top-2 right-2 bg-amber-500 text-white text-xs px-2 py-1 rounded">Пшеничное</span> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Summer Wheat</h3> | |
| <p class="text-gray-600 text-sm mb-2">5.2% ABV • 0.5L</p> | |
| <p class="text-gray-700 mb-4">Освежающее пшеничное пиво с нотами банана и гвоздики.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-lg">380 ₽</span> | |
| <button class="add-to-cart bg-amber-600 hover:bg-amber-700 text-white px-3 py-1 rounded transition" data-name="Summer Wheat" data-price="380"> | |
| В корзину | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Beer Card 4 --> | |
| <div class="beer-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="craft ipa"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1618888505391-64d0b98c0a85?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="IPA" class="w-full h-48 object-cover"> | |
| <span class="absolute top-2 right-2 bg-amber-500 text-white text-xs px-2 py-1 rounded">IPA</span> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Citrus Haze</h3> | |
| <p class="text-gray-600 text-sm mb-2">6.5% ABV • 0.5L</p> | |
| <p class="text-gray-700 mb-4">Хази IPA с насыщенными цитрусовыми ароматами и мягкой горечью.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-lg">490 ₽</span> | |
| <button class="add-to-cart bg-amber-600 hover:bg-amber-700 text-white px-3 py-1 rounded transition" data-name="Citrus Haze" data-price="490"> | |
| В корзину | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Non-Alcoholic Section --> | |
| <section id="non-alc" class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-3xl font-bold text-gray-800">Безалкогольное пиво</h2> | |
| <a href="#" class="text-amber-700 hover:text-amber-900 font-medium">Смотреть все →</a> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> | |
| <!-- Beer Card 1 --> | |
| <div class="beer-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="non-alc"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1618888505391-64d0b98c0a85?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Non-Alc" class="w-full h-48 object-cover"> | |
| <span class="absolute top-2 right-2 bg-green-500 text-white text-xs px-2 py-1 rounded">0%</span> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Drive Safe</h3> | |
| <p class="text-gray-600 text-sm mb-2">0.0% ABV • 0.5L</p> | |
| <p class="text-gray-700 mb-4">Безалкогольный лагер с классическим вкусом и легкой горчинкой.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-lg">280 ₽</span> | |
| <button class="add-to-cart bg-amber-600 hover:bg-amber-700 text-white px-3 py-1 rounded transition" data-name="Drive Safe" data-price="280"> | |
| В корзину | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Beer Card 2 --> | |
| <div class="beer-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="non-alc wheat"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1600788886242-5e96f6d9c4ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Non-Alc Wheat" class="w-full h-48 object-cover"> | |
| <span class="absolute top-2 right-2 bg-green-500 text-white text-xs px-2 py-1 rounded">0%</span> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Sunny Wheat</h3> | |
| <p class="text-gray-600 text-sm mb-2">0.0% ABV • 0.5L</p> | |
| <p class="text-gray-700 mb-4">Безалкогольное пшеничное пиво с освежающим вкусом.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-lg">310 ₽</span> | |
| <button class="add-to-cart bg-amber-600 hover:bg-amber-700 text-white px-3 py-1 rounded transition" data-name="Sunny Wheat" data-price="310"> | |
| В корзину | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Beer Card 3 --> | |
| <div class="beer-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="non-alc"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1618888505391-64d0b98c0a85?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Non-Alc IPA" class="w-full h-48 object-cover"> | |
| <span class="absolute top-2 right-2 bg-green-500 text-white text-xs px-2 py-1 rounded">0%</span> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Hop Water</h3> | |
| <p class="text-gray-600 text-sm mb-2">0.0% ABV • 0.5L</p> | |
| <p class="text-gray-700 mb-4">Безалкогольный IPA с хмелевым вкусом без алкоголя.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-lg">350 ₽</span> | |
| <button class="add-to-cart bg-amber-600 hover:bg-amber-700 text-white px-3 py-1 rounded transition" data-name="Hop Water" data-price="350"> | |
| В корзину | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Beer Card 4 --> | |
| <div class="beer-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="non-alc"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1600788886242-5e96f6d9c4ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Non-Alc" class="w-full h-48 object-cover"> | |
| <span class="absolute top-2 right-2 bg-green-500 text-white text-xs px-2 py-1 rounded">0%</span> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Clear Mind</h3> | |
| <p class="text-gray-600 text-sm mb-2">0.0% ABV • 0.5L</p> | |
| <p class="text-gray-700 mb-4">Легкое безалкогольное пиво с чистым вкусом.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-lg">260 ₽</span> | |
| <button class="add-to-cart bg-amber-600 hover:bg-amber-700 text-white px-3 py-1 rounded transition" data-name="Clear Mind" data-price="260"> | |
| В корзину | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Imported Beer Section --> | |
| <section id="import" class="py-12 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-3xl font-bold text-gray-800">Импортное пиво</h2> | |
| <a href="#" class="text-amber-700 hover:text-amber-900 font-medium">Смотреть все →</a> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> | |
| <!-- Beer Card 1 --> | |
| <div class="beer-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="import"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1618888505391-64d0b98c0a85?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Belgian" class="w-full h-48 object-cover"> | |
| <span class="absolute top-2 right-2 bg-blue-500 text-white text-xs px-2 py-1 rounded">Бельгия</span> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Trappist Gold</h3> | |
| <p class="text-gray-600 text-sm mb-2">8.5% ABV • 0.33L</p> | |
| <p class="text-gray-700 mb-4">Настоящее траппистское пиво из Бельгии с богатым вкусом.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-lg">890 ₽</span> | |
| <button class="add-to-cart bg-amber-600 hover:bg-amber-700 text-white px-3 py-1 rounded transition" data-name="Trappist Gold" data-price="890"> | |
| В корзину | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Beer Card 2 --> | |
| <div class="beer-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="import"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1600788886242-5e96f6d9c4ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="German" class="w-full h-48 object-cover"> | |
| <span class="absolute top-2 right-2 bg-blue-500 text-white text-xs px-2 py-1 rounded">Германия</span> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Bavarian Lager</h3> | |
| <p class="text-gray-600 text-sm mb-2">5.2% ABV • 0.5L</p> | |
| <p class="text-gray-700 mb-4">Классический немецкий лагер по традиционному рецепту.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-lg">650 ₽</span> | |
| <button class="add-to-cart bg-amber-600 hover:bg-amber-700 text-white px-3 py-1 rounded transition" data-name="Bavarian Lager" data-price="650"> | |
| В корзину | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Beer Card 3 --> | |
| <div class="beer-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="import"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1618888505391-64d0b98c0a85?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Czech" class="w-full h-48 object-cover"> | |
| <span class="absolute top-2 right-2 bg-blue-500 text-white text-xs px-2 py-1 rounded">Чехия</span> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Pilsner Original</h3> | |
| <p class="text-gray-600 text-sm mb-2">4.8% ABV • 0.5L</p> | |
| <p class="text-gray-700 mb-4">Оригинальный чешский пилснер с 1842 года.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-lg">720 ₽</span> | |
| <button class="add-to-cart bg-amber-600 hover:bg-amber-700 text-white px-3 py-1 rounded transition" data-name="Pilsner Original" data-price="720"> | |
| В корзину | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Beer Card 4 --> | |
| <div class="beer-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="import"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1600788886242-5e96f6d9c4ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="USA" class="w-full h-48 object-cover"> | |
| <span class="absolute top-2 right-2 bg-blue-500 text-white text-xs px-2 py-1 rounded">США</span> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">West Coast IPA</h3> | |
| <p class="text-gray-600 text-sm mb-2">6.8% ABV • 0.5L</p> | |
| <p class="text-gray-700 mb-4">Американский IPA с интенсивным хмелевым вкусом.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-lg">780 ₽</span> | |
| <button class="add-to-cart bg-amber-600 hover:bg-amber-700 text-white px-3 py-1 rounded transition" data-name="West Coast IPA" data-price="780"> | |
| В корзину | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> | |
| <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Пивоварня" class="rounded-lg shadow-lg w-full"> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">О нашей пивоварне</h2> | |
| <p class="text-gray-600 mb-4">CraftBeer - это семейная пивоварня, основанная в 2010 году. Мы специализируемся на создании уникальных сортов пива с использованием только натуральных ингредиентов.</p> | |
| <p class="text-gray-600 mb-6">Наши пивовары - настоящие мастера своего дела, которые сочетают традиционные рецепты с современными технологиями. Каждая партия пива проходит строгий контроль качества.</p> | |
| <div class="grid grid-cols-2 gap-4 mb-6"> | |
| <div class="flex items-center"> | |
| <div class="bg-amber-100 p-3 rounded-full mr-3"> | |
| <i class="fas fa-award text-amber-600"></i> | |
| </div> | |
| <span class="font-medium">Лучшая пивоварня 2022</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="bg-amber-100 p-3 rounded-full mr-3"> | |
| <i class="fas fa-leaf text-amber-600"></i> | |
| </div> | |
| <span class="font-medium">Натуральные ингредиенты</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="bg-amber-100 p-3 rounded-full mr-3"> | |
| <i class="fas fa-truck text-amber-600"></i> | |
| </div> | |
| <span class="font-medium">Быстрая доставка</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="bg-amber-100 p-3 rounded-full mr-3"> | |
| <i class="fas fa-medal text-amber-600"></i> | |
| </div> | |
| <span class="font-medium">15+ наград</span> | |
| </div> | |
| </div> | |
| <button class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-3 rounded-lg font-medium transition"> | |
| Узнать больше | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Отзывы наших клиентов</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Алексей" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Алексей</h4> | |
| <div class="flex text-amber-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"Hop Explosion IPA - это просто бомба! Такого насыщенного хмелевого вкуса я еще не пробовал. Доставка быстрая, пиво пришло охлажденным."</p> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Елена" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Елена</h4> | |
| <div class="flex text-amber-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"Очень довольна безалкогольным ассортиментом. Drive Safe - отличный вариант для тех, кто за рулем. Вкус почти как у настоящего пива!"</p> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Дмитрий" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Дмитрий</h4> | |
| <div class="flex text-amber-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"Заказал Trappist Gold из Бельгии - это нечто! Настоящее траппистское пиво с богатым вкусом. Цена соответствует качеству. Рекомендую!"</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter --> | |
| <section class="py-16 bg-amber-800 text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl font-bold mb-4">Подпишитесь на нашу рассылку</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Узнавайте первыми о новых сортах пива, специальных предложениях и мероприятиях</p> | |
| <div class="max-w-md mx-auto flex"> | |
| <input type="email" placeholder="Ваш email" class="flex-grow px-4 py-3 rounded-l-lg focus:outline-none text-gray-800"> | |
| <button class="bg-amber-600 hover:bg-amber-700 px-6 py-3 rounded-r-lg font-medium transition"> | |
| Подписаться | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <i class="fas fa-beer text-2xl"></i> | |
| <h3 class="text-xl font-bold">CraftBeer</h3> | |
| </div> | |
| <p class="text-gray-400 mb-4">Лучшее крафтовое пиво с доставкой по всей России.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-vk"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-telegram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Меню</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#home" class="text-gray-400 hover:text-white transition">Главная</a></li> | |
| <li><a href="#craft" class="text-gray-400 hover:text-white transition">Крафтовое пиво</a></li> | |
| <li><a href="#non-alc" class="text-gray-400 hover:text-white transition">Безалкогольное</a></li> | |
| <li><a href="#import" class="text-gray-400 hover:text-white transition">Импортное</a></li> | |
| <li><a href="#about" class="text-gray-400 hover:text-white transition">О нас</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Контакты</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li class="flex items-center"><i class="fas fa-map-marker-alt mr-2"></i> Москва, ул. Пивоваров, 15</li> | |
| <li class="flex items-center"><i class="fas fa-phone mr-2"></i> +7 (495) 123-45-67</li> | |
| <li class="flex items-center"><i class="fas fa-envelope mr-2"></i> info@craftbeer.ru</li> | |
| <li class="flex items-center"><i class="fas fa-clock mr-2"></i> Ежедневно 10:00 - 22:00</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Оплата и доставка</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li class="flex items-center"><i class="fas fa-credit-card mr-2"></i> Онлайн-оплата</li> | |
| <li class="flex items-center"><i class="fas fa-money-bill-wave mr-2"></i> Наличными курьеру</li> | |
| <li class="flex items-center"><i class="fas fa-truck mr-2"></i> Доставка 1-2 дня</li> | |
| <li class="flex items-center"><i class="fas fa-beer mr-2"></i> Самовывоз</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© 2023 CraftBeer. Все права защищены. Лицензия на розничную продажу алкоголя № XXXXXXX</p> | |
| <p class="mt-2 text-sm">Чрезмерное употребление алкоголя вредит вашему здоровью</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| const mobileMenuBtn = document.getElementById('mobile-menu-btn'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuBtn.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Cart functionality | |
| const cartBtn = document.getElementById('cart-btn'); | |
| const cartPreview = document.getElementById('cart-preview'); | |
| const cartCount = document.getElementById('cart-count'); | |
| const cartItems = document.getElementById('cart-items'); | |
| const cartTotal = document.getElementById('cart-total'); | |
| let cart = []; | |
| cartBtn.addEventListener('click', (e) => { | |
| e.stopPropagation(); | |
| cartPreview.classList.toggle('hidden'); | |
| }); | |
| document.addEventListener('click', (e) => { | |
| if (!cartPreview.contains(e.target) && e.target !== cartBtn) { | |
| cartPreview.classList.add('hidden'); | |
| } | |
| }); | |
| // Add to cart buttons | |
| const addToCartButtons = document.querySelectorAll('.add-to-cart'); | |
| addToCartButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| const name = button.getAttribute('data-name'); | |
| const price = parseInt(button.getAttribute('data-price')); | |
| // Add to cart | |
| cart.push({ name, price }); | |
| // Update cart UI | |
| updateCart(); | |
| // Show cart preview | |
| cartPreview.classList.remove('hidden'); | |
| // Button feedback | |
| button.innerHTML = '<i class="fas fa-check"></i> Добавлено'; | |
| button.classList.add('bg-green-500', 'hover:bg-green-600'); | |
| button.classList.remove('bg-amber-600', 'hover:bg-amber-700'); | |
| setTimeout(() => { | |
| button.innerHTML = 'В корзину'; | |
| button.classList.remove('bg-green-500', 'hover:bg-green-600'); | |
| button.classList.add('bg-amber-600', 'hover:bg-amber-700'); | |
| }, 2000); | |
| }); | |
| }); | |
| function updateCart() { | |
| // Update count | |
| cartCount.textContent = cart.length; | |
| // Update items list | |
| if (cart.length === 0) { | |
| cartItems.innerHTML = '<p class="text-sm text-gray-500">Корзина пуста</p>'; | |
| } else { | |
| // Group items by name and count quantity | |
| const itemsMap = {}; | |
| cart.forEach(item => { | |
| if (!itemsMap[item.name]) { | |
| itemsMap[item.name] = { ...item, quantity: 0 }; | |
| } | |
| itemsMap[item.name].quantity++; | |
| }); | |
| const itemsList = Object.values(itemsMap); | |
| cartItems.innerHTML = itemsList.map(item => ` | |
| <div class="flex justify-between items-center py-1 border-b"> | |
| <span>${item.name}</span> | |
| <span>${item.quantity} × ${item.price} ₽</span> | |
| </div> | |
| `).join(''); | |
| } | |
| // Update total | |
| const total = cart.reduce((sum, item) => sum + item.price, 0); | |
| cartTotal.textContent = `${total} ₽`; | |
| } | |
| // Category filtering | |
| const categoryButtons = document.querySelectorAll('.category-btn'); | |
| categoryButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| // Update active button | |
| categoryButtons.forEach(btn => btn.classList.remove('active')); | |
| button.classList.add('active'); | |
| // Get category to filter | |
| const category = button.getAttribute('data-category'); | |
| // Show/hide beer cards | |
| const beerCards = document.querySelectorAll('.beer-card'); | |
| beerCards.forEach(card => { | |
| if (category === 'all' || card.getAttribute('data-category').includes(category)) { | |
| card.style.display = 'block'; | |
| } else { | |
| card.style.display = 'none'; | |
| } | |
| }); | |
| }); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=14zy/test-space" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |