| <!DOCTYPE html> |
| <html lang="ru"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>GreenGarden - Экологичные товары для дома</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> |
| .hero-gradient { |
| background: linear-gradient(135deg, rgba(16, 185, 129, 0.9) 0%, rgba(5, 150, 105, 0.9) 100%); |
| } |
| .product-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
| } |
| .nav-link::after { |
| content: ''; |
| display: block; |
| width: 0; |
| height: 2px; |
| background: #10b981; |
| transition: width .3s; |
| } |
| .nav-link:hover::after { |
| width: 100%; |
| } |
| .dropdown:hover .dropdown-menu { |
| display: block; |
| } |
| </style> |
| </head> |
| <body class="font-sans bg-gray-50"> |
| |
| <header class="bg-white shadow-sm sticky top-0 z-50"> |
| <div class="container mx-auto px-4 py-3"> |
| <div class="flex justify-between items-center"> |
| |
| <div class="flex items-center"> |
| <a href="#" class="text-2xl font-bold text-green-600 flex items-center"> |
| <i class="fas fa-leaf mr-2"></i> |
| GreenGarden |
| </a> |
| </div> |
|
|
| |
| <nav class="hidden md:flex space-x-8"> |
| <div class="dropdown relative"> |
| <a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium flex items-center"> |
| Каталог <i class="fas fa-chevron-down ml-1 text-xs"></i> |
| </a> |
| <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded-md mt-2 py-2 w-48"> |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-green-50 hover:text-green-600">Эко-продукты</a> |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-green-50 hover:text-green-600">Бытовая химия</a> |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-green-50 hover:text-green-600">Косметика</a> |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-green-50 hover:text-green-600">Текстиль</a> |
| </div> |
| </div> |
| <a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium">О нас</a> |
| <a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium">Доставка</a> |
| <a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium">Контакты</a> |
| <a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium">Блог</a> |
| </nav> |
|
|
| |
| <div class="flex items-center space-x-4"> |
| <a href="#" class="text-gray-600 hover:text-green-600"> |
| <i class="fas fa-search"></i> |
| </a> |
| <a href="#" class="text-gray-600 hover:text-green-600"> |
| <i class="fas fa-user"></i> |
| </a> |
| <a href="#" class="text-gray-600 hover:text-green-600 relative"> |
| <i class="fas fa-shopping-cart"></i> |
| <span class="absolute -top-2 -right-2 bg-green-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span> |
| </a> |
| <button class="md:hidden text-gray-600" id="mobile-menu-button"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="md:hidden hidden bg-white py-2" id="mobile-menu"> |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-green-50 hover:text-green-600">Каталог</a> |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-green-50 hover:text-green-600">О нас</a> |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-green-50 hover:text-green-600">Доставка</a> |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-green-50 hover:text-green-600">Контакты</a> |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-green-50 hover:text-green-600">Блог</a> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section class="hero-gradient text-white py-16 md:py-24"> |
| <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"> |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">Экологичные товары для вашего дома</h1> |
| <p class="text-xl mb-6">Натуральные, безопасные и экологически чистые продукты для всей семьи</p> |
| <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4"> |
| <a href="#" class="bg-white text-green-600 font-bold py-3 px-6 rounded-lg hover:bg-gray-100 transition duration-300 text-center">В каталог</a> |
| <a href="#" class="border-2 border-white text-white font-bold py-3 px-6 rounded-lg hover:bg-white hover:text-green-600 transition duration-300 text-center">О нас</a> |
| </div> |
| </div> |
| <div class="md:w-1/2 flex justify-center"> |
| <img src="https://images.unsplash.com/photo-1606787366850-de6330128bfc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Экологичные продукты" class="rounded-lg shadow-xl w-full max-w-md"> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-12 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-6"> |
| <div class="flex flex-col items-center text-center p-4"> |
| <div class="bg-green-100 rounded-full p-4 mb-3"> |
| <i class="fas fa-leaf text-green-600 text-2xl"></i> |
| </div> |
| <h3 class="font-bold text-lg mb-2">100% Натурально</h3> |
| <p class="text-gray-600">Только экологически чистые материалы и ингредиенты</p> |
| </div> |
| <div class="flex flex-col items-center text-center p-4"> |
| <div class="bg-green-100 rounded-full p-4 mb-3"> |
| <i class="fas fa-truck text-green-600 text-2xl"></i> |
| </div> |
| <h3 class="font-bold text-lg mb-2">Быстрая доставка</h3> |
| <p class="text-gray-600">Доставка по всей стране за 1-3 дня</p> |
| </div> |
| <div class="flex flex-col items-center text-center p-4"> |
| <div class="bg-green-100 rounded-full p-4 mb-3"> |
| <i class="fas fa-recycle text-green-600 text-2xl"></i> |
| </div> |
| <h3 class="font-bold text-lg mb-2">Эко-упаковка</h3> |
| <p class="text-gray-600">Биоразлагаемая упаковка без пластика</p> |
| </div> |
| <div class="flex flex-col items-center text-center p-4"> |
| <div class="bg-green-100 rounded-full p-4 mb-3"> |
| <i class="fas fa-heart text-green-600 text-2xl"></i> |
| </div> |
| <h3 class="font-bold text-lg mb-2">Гарантия качества</h3> |
| <p class="text-gray-600">Все товары проходят строгий контроль</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-12 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-8">Популярные категории</h2> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> |
| <a href="#" class="bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition duration-300"> |
| <div class="h-40 bg-green-100 flex items-center justify-center"> |
| <i class="fas fa-utensils text-4xl text-green-600"></i> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-bold text-center">Эко-продукты</h3> |
| </div> |
| </a> |
| <a href="#" class="bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition duration-300"> |
| <div class="h-40 bg-green-100 flex items-center justify-center"> |
| <i class="fas fa-pump-soap text-4xl text-green-600"></i> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-bold text-center">Бытовая химия</h3> |
| </div> |
| </a> |
| <a href="#" class="bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition duration-300"> |
| <div class="h-40 bg-green-100 flex items-center justify-center"> |
| <i class="fas fa-spa text-4xl text-green-600"></i> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-bold text-center">Косметика</h3> |
| </div> |
| </a> |
| <a href="#" class="bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition duration-300"> |
| <div class="h-40 bg-green-100 flex items-center justify-center"> |
| <i class="fas fa-tshirt text-4xl text-green-600"></i> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-bold text-center">Текстиль</h3> |
| </div> |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section 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">Популярные товары</h2> |
| <a href="#" class="text-green-600 font-medium hover:underline">Смотреть все</a> |
| </div> |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> |
| |
| <div class="bg-white rounded-lg shadow-md overflow-hidden product-card transition duration-300"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1550583724-b2692b85b150?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Эко-мыло" class="w-full h-48 object-cover"> |
| <div class="absolute top-2 right-2 bg-green-600 text-white text-xs px-2 py-1 rounded-full">NEW</div> |
| </div> |
| <div class="p-4"> |
| <div class="flex justify-between items-start mb-2"> |
| <h3 class="font-bold">Натуральное мыло</h3> |
| <span class="text-green-600 font-bold">350 ₽</span> |
| </div> |
| <p class="text-gray-600 text-sm mb-3">Мыло ручной работы с маслом лаванды</p> |
| <button class="w-full bg-green-600 text-white py-2 rounded hover:bg-green-700 transition duration-300">В корзину</button> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-lg shadow-md overflow-hidden product-card transition duration-300"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1607619056574-7b8d3ee536b2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Бамбуковая щетка" class="w-full h-48 object-cover"> |
| <div class="absolute top-2 right-2 bg-green-600 text-white text-xs px-2 py-1 rounded-full">ХИТ</div> |
| </div> |
| <div class="p-4"> |
| <div class="flex justify-between items-start mb-2"> |
| <h3 class="font-bold">Бамбуковая зубная щетка</h3> |
| <span class="text-green-600 font-bold">290 ₽</span> |
| </div> |
| <p class="text-gray-600 text-sm mb-3">Экологичная альтернатива пластиковым щеткам</p> |
| <button class="w-full bg-green-600 text-white py-2 rounded hover:bg-green-700 transition duration-300">В корзину</button> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-lg shadow-md overflow-hidden product-card transition duration-300"> |
| <img src="https://images.unsplash.com/photo-1596755094514-c87b4cdafa97?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1480&q=80" alt="Эко-сумка" class="w-full h-48 object-cover"> |
| <div class="p-4"> |
| <div class="flex justify-between items-start mb-2"> |
| <h3 class="font-bold">Хлопковая сумка</h3> |
| <span class="text-green-600 font-bold">590 ₽</span> |
| </div> |
| <p class="text-gray-600 text-sm mb-3">Многоразовая сумка для покупок</p> |
| <button class="w-full bg-green-600 text-white py-2 rounded hover:bg-green-700 transition duration-300">В корзину</button> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-lg shadow-md overflow-hidden product-card transition duration-300"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1625772452859-1c03015a8a9b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Эко-стиральный порошок" class="w-full h-48 object-cover"> |
| <div class="absolute top-2 right-2 bg-green-600 text-white text-xs px-2 py-1 rounded-full">-20%</div> |
| </div> |
| <div class="p-4"> |
| <div class="flex justify-between items-start mb-2"> |
| <h3 class="font-bold">Стиральный порошок</h3> |
| <div> |
| <span class="text-gray-400 text-sm line-through mr-2">790 ₽</span> |
| <span class="text-green-600 font-bold">630 ₽</span> |
| </div> |
| </div> |
| <p class="text-gray-600 text-sm mb-3">Экологичный порошок для стирки</p> |
| <button class="w-full bg-green-600 text-white py-2 rounded hover:bg-green-700 transition duration-300">В корзину</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-green-50"> |
| <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-1527525443983-6e60c75fff46?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1402&q=80" alt="О нас" class="rounded-lg shadow-lg w-full"> |
| </div> |
| <div class="md:w-1/2"> |
| <h2 class="text-3xl font-bold mb-4">О GreenGarden</h2> |
| <p class="text-gray-700 mb-4">Мы - команда энтузиастов, которые верят, что забота о природе начинается с малого. Наша миссия - сделать экологичный образ жизни доступным и удобным для каждого.</p> |
| <p class="text-gray-700 mb-6">В нашем ассортименте только проверенные товары, которые соответствуют самым строгим экологическим стандартам. Мы тщательно отбираем поставщиков и тестируем каждую позицию перед тем, как предложить ее вам.</p> |
| <div class="flex space-x-4"> |
| <div class="bg-white p-4 rounded-lg shadow-sm flex-1 text-center"> |
| <div class="text-green-600 text-3xl font-bold mb-2">5+</div> |
| <div class="text-gray-600">Лет на рынке</div> |
| </div> |
| <div class="bg-white p-4 rounded-lg shadow-sm flex-1 text-center"> |
| <div class="text-green-600 text-3xl font-bold mb-2">1000+</div> |
| <div class="text-gray-600">Довольных клиентов</div> |
| </div> |
| <div class="bg-white p-4 rounded-lg shadow-sm flex-1 text-center"> |
| <div class="text-green-600 text-3xl font-bold mb-2">200+</div> |
| <div class="text-gray-600">Товаров в ассортименте</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-12">Отзывы наших клиентов</h2> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> |
| <div class="flex items-center mb-4"> |
| <div class="bg-green-100 text-green-600 rounded-full h-10 w-10 flex items-center justify-center mr-3"> |
| <i class="fas fa-user"></i> |
| </div> |
| <div> |
| <h4 class="font-bold">Анна К.</h4> |
| <div class="flex text-yellow-400 text-sm"> |
| <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">"Перешла на экологичную бытовую химию от GreenGarden и очень довольна! Вещи стали мягче, а кожа рук перестала сохнуть. Рекомендую!"</p> |
| </div> |
|
|
| |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> |
| <div class="flex items-center mb-4"> |
| <div class="bg-green-100 text-green-600 rounded-full h-10 w-10 flex items-center justify-center mr-3"> |
| <i class="fas fa-user"></i> |
| </div> |
| <div> |
| <h4 class="font-bold">Михаил С.</h4> |
| <div class="flex text-yellow-400 text-sm"> |
| <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">"Заказываю здесь уже третий год. Качество товаров на высоте, доставка быстрая, а главное - чувствую, что вношу вклад в сохранение природы."</p> |
| </div> |
|
|
| |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> |
| <div class="flex items-center mb-4"> |
| <div class="bg-green-100 text-green-600 rounded-full h-10 w-10 flex items-center justify-center mr-3"> |
| <i class="fas fa-user"></i> |
| </div> |
| <div> |
| <h4 class="font-bold">Елена П.</h4> |
| <div class="flex text-yellow-400 text-sm"> |
| <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">"Очень понравился сервис! Консультанты помогли подобрать средства для аллергика, все пришло в биоразлагаемой упаковке. Буду заказывать еще!"</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-green-600 text-white"> |
| <div class="container mx-auto px-4 text-center"> |
| <h2 class="text-3xl font-bold mb-4">Подпишитесь на рассылку</h2> |
| <p class="max-w-2xl mx-auto mb-8">Получайте эксклюзивные предложения, новости об акциях и полезные советы по экологичному образу жизни</p> |
| <form 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 type="submit" class="bg-green-800 hover:bg-green-900 px-6 py-3 rounded-r-lg font-medium transition duration-300">Подписаться</button> |
| </form> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-800 text-white pt-12 pb-6"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> |
| |
| <div> |
| <h3 class="text-xl font-bold mb-4 flex items-center"> |
| <i class="fas fa-leaf mr-2 text-green-400"></i> |
| GreenGarden |
| </h3> |
| <p class="text-gray-400 mb-4">Экологичные товары для дома и повседневной жизни</p> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-400 hover:text-green-400"><i class="fab fa-vk"></i></a> |
| <a href="#" class="text-gray-400 hover:text-green-400"><i class="fab fa-telegram"></i></a> |
| <a href="#" class="text-gray-400 hover:text-green-400"><i class="fab fa-instagram"></i></a> |
| </div> |
| </div> |
|
|
| |
| <div> |
| <h3 class="text-lg font-bold mb-4">Каталог</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-green-400">Эко-продукты</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-green-400">Бытовая химия</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-green-400">Косметика</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-green-400">Текстиль</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-green-400">Новинки</a></li> |
| </ul> |
| </div> |
|
|
| |
| <div> |
| <h3 class="text-lg font-bold mb-4">Компания</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-green-400">О нас</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-green-400">Доставка и оплата</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-green-400">Возврат</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-green-400">Контакты</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-green-400">Блог</a></li> |
| </ul> |
| </div> |
|
|
| |
| <div> |
| <h3 class="text-lg font-bold mb-4">Контакты</h3> |
| <ul class="space-y-2 text-gray-400"> |
| <li class="flex items-start"> |
| <i class="fas fa-map-marker-alt mr-2 mt-1 text-green-400"></i> |
| <span>г. Москва, ул. Экологичная, 15</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-phone-alt mr-2 text-green-400"></i> |
| <span>+7 (999) 123-45-67</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-envelope mr-2 text-green-400"></i> |
| <span>info@greengarden.ru</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-clock mr-2 text-green-400"></i> |
| <span>Пн-Пт: 9:00-20:00</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
|
|
| <div class="border-t border-gray-700 pt-6 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 GreenGarden. Все права защищены.</p> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-green-400 text-sm">Политика конфиденциальности</a> |
| <a href="#" class="text-gray-400 hover:text-green-400 text-sm">Пользовательское соглашение</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { |
| const menu = document.getElementById('mobile-menu'); |
| menu.classList.toggle('hidden'); |
| }); |
| |
| |
| const cartCounter = document.querySelector('.fa-shopping-cart').nextElementSibling; |
| if (cartCounter) { |
| cartCounter.addEventListener('click', function(e) { |
| e.preventDefault(); |
| this.classList.add('animate-bounce'); |
| setTimeout(() => { |
| this.classList.remove('animate-bounce'); |
| }, 1000); |
| }); |
| } |
| |
| |
| const addToCartButtons = document.querySelectorAll('button:contains("В корзину")'); |
| addToCartButtons.forEach(button => { |
| button.addEventListener('click', function() { |
| this.textContent = 'Добавлено!'; |
| this.classList.remove('bg-green-600', 'hover:bg-green-700'); |
| this.classList.add('bg-green-800'); |
| |
| setTimeout(() => { |
| this.textContent = 'В корзину'; |
| this.classList.remove('bg-green-800'); |
| this.classList.add('bg-green-600', 'hover:bg-green-700'); |
| }, 2000); |
| }); |
| }); |
| </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=x2wdfvfd/s" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
