| <!DOCTYPE html> |
| <html lang="ru"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Название товара | Интернет-магазин</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> |
| .swiper-button-disabled { |
| opacity: 0.5; |
| cursor: not-allowed; |
| } |
| .image-active { |
| border: 2px solid #3b82f6; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50"> |
| |
| <header class="bg-white shadow-sm py-4"> |
| <div class="container mx-auto px-4 flex justify-between items-center"> |
| <a href="#" class="text-2xl font-bold text-blue-600">Логотип</a> |
| |
| <div class="flex items-center space-x-4"> |
| <div class="relative"> |
| <button id="searchBtn" class="hover:text-blue-600 focus:outline-none"> |
| <i class="fas fa-search"></i> |
| </button> |
| <div id="searchDropdown" class="hidden absolute right-0 mt-2 w-64 bg-white rounded-md shadow-lg py-1 z-10"> |
| <form class="p-2"> |
| <input type="text" placeholder="Поиск товаров..." class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <button type="submit" class="mt-2 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md"> |
| Найти |
| </button> |
| </form> |
| </div> |
| </div> |
| <div class="relative"> |
| <button id="profileBtn" class="hover:text-blue-600 focus:outline-none"> |
| <i class="fas fa-user"></i> |
| </button> |
| <div id="profileDropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10"> |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Мой профиль</a> |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Заказы</a> |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Избранное</a> |
| <div class="border-t border-gray-200"></div> |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Выйти</a> |
| </div> |
| </div> |
| <a href="#" class="hover:text-blue-600 relative"> |
| <i class="fas fa-shopping-cart"></i> |
| <span id="cartCount" class="absolute -top-2 -right-2 bg-blue-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span> |
| </a> |
| </div> |
| </div> |
| </header> |
|
|
| <main class="container mx-auto px-4 py-8"> |
| |
| <div class="text-sm breadcrumbs mb-6"> |
| <ul> |
| <li><a href="#" class="text-blue-600 hover:underline">Главная</a></li> |
| <li><a href="#" class="text-blue-600 hover:underline">Категория</a></li> |
| <li>Название товара</li> |
| </ul> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> |
| |
| <div> |
| |
| <div class="bg-white rounded-lg shadow overflow-hidden mb-4"> |
| <img id="mainImage" src="https://rostov.pult.ru/upload/iblock/985/985808c94450be5e15554ea5d83e5fb7.jpg" alt="Product Main" class="w-full object-cover aspect-square"> |
| </div> |
| |
| |
| <div class="flex space-x-2 overflow-x-auto pb-2"> |
| <img src="https://avatars.mds.yandex.net/i?id=60e0e04af9216957fbbceef212c72de0_l-7762005-images-thumbs&n=13" alt="Thumbnail 1" class="thumbnail w-20 h-20 object-cover rounded cursor-pointer border border-gray-200 image-active" onclick="changeMainImage(this)"> |
| <img src="https://www.bigtv.ru/storage/goodsImages/103/103776/clear_103776_1.jpg" alt="Thumbnail 2" class="thumbnail w-20 h-20 object-cover rounded cursor-pointer border border-gray-200" onclick="changeMainImage(this)"> |
| <img src="https://www.muztorg.ru/files/1g1/pvx/178/89w/4cc/w40/wkk/o4w/k/1g1pvx17889w4ccw40wkko4wk.jpg" alt="Thumbnail 3" class="thumbnail w-20 h-20 object-cover rounded cursor-pointer border border-gray-200" onclick="changeMainImage(this)"> |
| <img src="https://unishop.s3-minsk-dc2.cloud.mts.by/categories/naushniki.webp" alt="Thumbnail 4" class="thumbnail w-20 h-20 object-cover rounded cursor-pointer border border-gray-200" onclick="changeMainImage(this)"> |
| </div> |
| </div> |
| |
| |
| <div> |
| <h1 class="text-3xl font-bold mb-2">Наушники Premium Pro X500</h1> |
| |
| |
| <div class="flex items-center mb-4"> |
| <div class="flex text-yellow-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> |
| <span class="text-sm text-gray-500 ml-2">4.5 (256 отзывов)</span> |
| <span class="text-sm text-green-600 ml-3">✓ В наличии</span> |
| </div> |
| |
| |
| <div class="mb-6"> |
| <div class="text-3xl font-bold text-blue-600 mb-1">12 990 ₽</div> |
| <div class="text-sm text-gray-500">Бесплатная доставка • Гарантия 2 года</div> |
| </div> |
| |
| <hr class="my-4"> |
| |
| |
| <div class="mb-6"> |
| <h3 class="font-medium mb-2">Цвет:</h3> |
| <div class="flex space-x-2"> |
| <button class="color-btn h-8 w-8 rounded-full bg-black border-2 border-black" data-color="black"></button> |
| <button class="color-btn h-8 w-8 rounded-full bg-gray-300 border-2 border-gray-200" data-color="gray"></button> |
| <button class="color-btn h-8 w-8 rounded-full bg-blue-700 border-2 border-gray-200" data-color="blue"></button> |
| <button class="color-btn h-8 w-8 rounded-full bg-white border-2 border-gray-300" data-color="white"></button> |
| </div> |
| </div> |
| |
| |
| <div class="mb-6"> |
| <h3 class="font-medium mb-2">Вариант:</h3> |
| <div class="flex flex-wrap gap-2"> |
| <button class="variant-btn px-4 py-2 border rounded hover:bg-gray-100" data-variant="standart">Стандарт</button> |
| <button class="variant-btn px-4 py-2 border rounded hover:bg-gray-100" data-variant="pro">Pro (1 990 ₽)</button> |
| <button class="variant-btn px-4 py-2 border rounded hover:bg-gray-100" data-variant="wireless">Беспроводные (3 500 ₽)</button> |
| </div> |
| </div> |
| |
| |
| <div class="mb-8"> |
| <h3 class="font-medium mb-2">Количество:</h3> |
| <div class="flex items-center"> |
| <button id="decrement" class="px-4 py-2 bg-gray-100 rounded-l hover:bg-gray-200"><i class="fas fa-minus"></i></button> |
| <input type="number" id="quantity" value="1" min="1" max="10" class="w-16 py-2 text-center border-t border-b outline-none"> |
| <button id="increment" class="px-4 py-2 bg-gray-100 rounded-r hover:bg-gray-200"><i class="fas fa-plus"></i></button> |
| </div> |
| </div> |
| |
| |
| <div class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-2 mb-8"> |
| <button id="addToCart" class="bg-blue-600 hover:bg-blue-700 text-white py-3 px-6 rounded-lg flex-grow"> |
| <i class="fas fa-shopping-cart mr-2"></i> Добавить в корзину |
| </button> |
| <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-3 px-6 rounded-lg hovered-element"> |
| <i class="far fa-heart mr-2"></i> В избранное |
| </button> |
| </div> |
| |
| |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <div class="flex items-start mb-2"> |
| <i class="fas fa-truck text-blue-600 mt-1 mr-3"></i> |
| <div> |
| <div class="font-medium">Доставка по всему миру</div> |
| <div class="text-sm text-gray-600">Доставим за 3-5 дней или бесплатно при заказе от 5 000 ₽</div> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <i class="fas fa-shield-alt text-blue-600 mt-1 mr-3"></i> |
| <div> |
| <div class="font-medium">Гарантия возврата</div> |
| <div class="text-sm text-gray-600">30 дней на возврат. Подробные условия</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mt-12"> |
| <div class="border-b border-gray-200"> |
| <div class="flex space-x-8"> |
| <button class="tab-btn py-2 px-1 font-medium text-blue-600 border-b-2 border-blue-600">Описание</button> |
| <button class="tab-btn py-2 px-1 font-medium text-gray-500 hover:text-gray-700">Характеристики</button> |
| <button class="tab-btn py-2 px-1 font-medium text-gray-500 hover:text-gray-700">Отзывы (256)</button> |
| <button class="tab-btn py-2 px-1 font-medium text-gray-500 hover:text-gray-700">Доставка и оплата</button> |
| </div> |
| </div> |
| |
| <div class="py-6"> |
| <div id="description-tab" class="tab-content"> |
| <h2 class="text-xl font-bold mb-4">Описание Premium Pro X500</h2> |
| <p class="mb-4"> |
| Наушники Premium Pro X500 — это новый стандарт звука в своём классе. Инновационные динамические излучатели |
| обеспечивают кристально чистый звук с мощными басами и чёткими высокими частотами. |
| </p> |
| <p class="mb-4"> |
| Эргономичная конструкция обеспечивает комфорт даже при длительном использовании, а технология активного |
| шумоподавления позволяет полностью погрузиться в музыку. |
| </p> |
| <ul class="list-disc pl-5 mb-4 space-y-2"> |
| <li>40-мм динамические излучатели с неодимовыми магнитами</li> |
| <li>Частотный диапазон: 20 - 20 000 Гц</li> |
| <li>Активное шумоподавление с 4 микрофонами</li> |
| <li>Время работы: до 30 часов (Bluetooth)</li> |
| <li>Проводное и беспроводное подключение</li> |
| </ul> |
| </div> |
| |
| <div id="specs-tab" class="tab-content hidden"> |
| <h2 class="text-xl font-bold mb-4">Технические характеристики</h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <h3 class="font-medium mb-2">Основные</h3> |
| <ul class="space-y-2"> |
| <li class="flex justify-between border-b border-gray-100 pb-2"> |
| <span class="text-gray-600">Тип</span> |
| <span>Накладные, закрытые</span> |
| </li> |
| <li class="flex justify-between border-b border-gray-100 pb-2"> |
| <span class="text-gray-600">Конструкция</span> |
| <span>С оголовьем</span> |
| </li> |
| <li class="flex justify-between border-b border-gray-100 pb-2"> |
| <span class="text-gray-600">Подключение</span> |
| <span>Проводное + Bluetooth 5.0</span> |
| </li> |
| <li class="flex justify-between border-b border-gray-100 pb-2"> |
| <span class="text-gray-600">Разъем</span> |
| <span>3.5 мм jack</span> |
| </li> |
| <li class="flex justify-between border-b border-gray-100 pb-2"> |
| <span class="text-gray-600">Вес</span> |
| <span>285 г</span> |
| </li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="font-medium mb-2">Звук</h3> |
| <ul class="space-y-2"> |
| <li class="flex justify-between border-b border-gray-100 pb-2"> |
| <span class="text-gray-600">Тип излучателей</span> |
| <span>Динамические, 40 мм</span> |
| </li> |
| <li class="flex justify-between border-b border-gray-100 pb-2"> |
| <span class="text-gray-600">Частотный диапазон</span> |
| <span>20 - 20 000 Гц</span> |
| </li> |
| <li class="flex justify-between border-b border-gray-100 pb-2"> |
| <span class="text-gray-600">Чувствительность</span> |
| <span>105 дБ</span> |
| </li> |
| <li class="flex justify-between border-b border-gray-100 pb-2"> |
| <span class="text-gray-600">Сопротивление</span> |
| <span>32 Ом</span> |
| </li> |
| <li class="flex justify-between border-b border-gray-100 pb-2"> |
| <span class="text-gray-600">Шумоподавление</span> |
| <span>Активное (ANC)</span> |
| </li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="font-medium mb-2">Питание</h3> |
| <ul class="space-y-2"> |
| <li class="flex justify-between border-b border-gray-100 pb-2"> |
| <span class="text-gray-600">Аккумулятор</span> |
| <span>Литий-ионный, 800 мАч</span> |
| </li> |
| <li class="flex justify-between border-b border-gray-100 pb-2"> |
| <span class="text-gray-600">Время работы</span> |
| <span>До 30 часов</span> |
| </li> |
| <li class="flex justify-between border-b border-gray-100 pb-2"> |
| <span class="text-gray-600">Время зарядки</span> |
| <span>2 часа</span> |
| </li> |
| <li class="flex justify-between border-b border-gray-100 pb-2"> |
| <span class="text-gray-600">Интерфейс зарядки</span> |
| <span>USB-C</span> |
| </li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="font-medium mb-2">Дополнительно</h3> |
| <ul class="space-y-2"> |
| <li class="flex justify-between border-b border-gray-100 pb-2"> |
| <span class="text-gray-600">Микрофон</span> |
| <span>Встроенный (4 шт)</span> |
| </li> |
| <li class="flex justify-between border-b border-gray-100 pb-2"> |
| <span class="text-gray-600">Управление</span> |
| <span>Сенсорное + кнопки</span> |
| </li> |
| <li class="flex justify-between border-b border-gray-100 pb-2"> |
| <span class="text-gray-600">Совместимость</span> |
| <span>iOS, Android, Windows</span> |
| </li> |
| <li class="flex justify-between border-b border-gray-100 pb-2"> |
| <span class="text-gray-600">Гарантия</span> |
| <span>2 года</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| |
| <div id="reviews-tab" class="tab-content hidden"> |
| <h2 class="text-xl font-bold mb-6">Отзывы о Premium Pro X500</h2> |
| |
| |
| <div class="bg-gray-50 p-6 rounded-lg mb-8"> |
| <div class="flex flex-col md:flex-row items-center justify-between"> |
| <div class="text-center md:text-left mb-4 md:mb-0"> |
| <div class="text-4xl font-bold">4.5</div> |
| <div class="flex justify-center md:justify-start text-yellow-400 my-2"> |
| <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 class="text-gray-600">256 отзывов</div> |
| </div> |
| <div class="w-full md:w-2/3"> |
| <div class="flex items-center mb-2"> |
| <span class="w-10 text-gray-600">5</span> |
| <div class="w-full bg-gray-200 rounded-full h-2.5 mx-2"> |
| <div class="bg-yellow-400 h-2.5 rounded-full" style="width: 65%"></div> |
| </div> |
| <span class="text-gray-600">65%</span> |
| </div> |
| <div class="flex items-center mb-2"> |
| <span class="w-10 text-gray-600">4</span> |
| <div class="w-full bg-gray-200 rounded-full h-2.5 mx-2"> |
| <div class="bg-yellow-400 h-2.5 rounded-full" style="width: 20%"></div> |
| </div> |
| <span class="text-gray-600">20%</span> |
| </div> |
| <div class="flex items-center mb-2"> |
| <span class="w-10 text-gray-600">3</span> |
| <div class="w-full bg-gray-200 rounded-full h-2.5 mx-2"> |
| <div class="bg-yellow-400 h-2.5 rounded-full" style="width: 8%"></div> |
| </div> |
| <span class="text-gray-600">8%</span> |
| </div> |
| <div class="flex items-center mb-2"> |
| <span class="w-10 text-gray-600">2</span> |
| <div class="w-full bg-gray-200 rounded-full h-2.5 mx-2"> |
| <div class="bg-yellow-400 h-2.5 rounded-full" style="width: 5%"></div> |
| </div> |
| <span class="text-gray-600">5%</span> |
| </div> |
| <div class="flex items-center"> |
| <span class="w-10 text-gray-600">1</span> |
| <div class="w-full bg-gray-200 rounded-full h-2.5 mx-2"> |
| <div class="bg-yellow-400 h-2.5 rounded-full" style="width: 2%"></div> |
| </div> |
| <span class="text-gray-600">2%</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="space-y-6"> |
| |
| <div class="bg-white p-6 rounded-lg shadow-sm"> |
| <div class="flex justify-between items-start mb-4"> |
| <div> |
| <div class="font-bold">Александр К.</div> |
| <div class="text-gray-500 text-sm">15.05.2023</div> |
| </div> |
| <div class="flex text-yellow-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> |
| <h3 class="font-medium mb-2">Лучшие наушники в своей ценовой категории</h3> |
| <p class="text-gray-700 mb-4">Звук просто потрясающий, особенно басы. Шумоподавление работает отлично - в метро вообще не слышно окружающих. Удобно сидят на голове, даже после нескольких часов ношения. Однозначно рекомендую!</p> |
| <div class="flex items-center text-sm text-gray-500"> |
| <i class="fas fa-check-circle text-green-500 mr-1"></i> |
| <span>Покупка подтверждена</span> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white p-6 rounded-lg shadow-sm"> |
| <div class="flex justify-between items-start mb-4"> |
| <div> |
| <div class="font-bold">Марина С.</div> |
| <div class="text-gray-500 text-sm">02.06.2023</div> |
| </div> |
| <div class="flex text-yellow-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> |
| <h3 class="font-medium mb-2">Хорошие, но есть нюансы</h3> |
| <p class="text-gray-700 mb-4">В целом наушники отличные, звук чистый, удобные. Но беспроводное соединение иногда прерывается, если телефон в кармане. В остальном - довольна покупкой. Аккумулятор держит долго, как и заявлено.</p> |
| <div class="flex items-center text-sm text-gray-500"> |
| <i class="fas fa-check-circle text-green-500 mr-1"></i> |
| <span>Покупка подтверждена</span> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white p-6 rounded-lg shadow-sm"> |
| <div class="flex justify-between items-start mb-4"> |
| <div> |
| <div class="font-bold">Дмитрий П.</div> |
| <div class="text-gray-500 text-sm">22.04.2023</div> |
| </div> |
| <div class="flex text-yellow-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="far fa-star"></i> |
| </div> |
| </div> |
| <h3 class="font-medium mb-2">Качественные, но тяжеловаты</h3> |
| <p class="text-gray-700 mb-4">Звук на высоте, особенно для этой цены. Шумодав работает хорошо. Минус - через пару часов ношения начинают давить на уши. Может быть, нужно время чтобы привыкнуть. В целом хороший вариант за эти деньги.</p> |
| <div class="flex items-center text-sm text-gray-500"> |
| <i class="fas fa-check-circle text-green-500 mr-1"></i> |
| <span>Покупка подтверждена</span> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white p-6 rounded-lg shadow-sm"> |
| <div class="flex justify-between items-start mb-4"> |
| <div> |
| <div class="font-bold">Анна М.</div> |
| <div class="text-gray-500 text-sm">10.07.2023</div> |
| </div> |
| <div class="flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="far fa-star"></i> |
| <i class="far fa-star"></i> |
| </div> |
| </div> |
| <h3 class="font-medium mb-2">Не оправдали ожиданий</h3> |
| <p class="text-gray-700 mb-4">Купила по акции, но все равно ожидала большего. Басы есть, но высокие частоты иногда режут ухо. Микрофон средний - собеседники жалуются на шумы. Через месяц использования появился небольшой люфт в креплении.</p> |
| <div class="flex items-center text-sm text-gray-500"> |
| <i class="fas fa-check-circle text-green-500 mr-1"></i> |
| <span>Покупка подтверждена</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flex justify-center mt-8"> |
| <nav class="inline-flex rounded-md shadow"> |
| <a href="#" class="px-3 py-2 rounded-l-md border border-gray-300 bg-white text-gray-500 hover:bg-gray-50">Назад</a> |
| <a href="#" class="px-3 py-2 border-t border-b border-gray-300 bg-white text-blue-600 hover:bg-gray-50">1</a> |
| <a href="#" class="px-3 py-2 border-t border-b border-gray-300 bg-white text-gray-500 hover:bg-gray-50">2</a> |
| <a href="#" class="px-3 py-2 border-t border-b border-gray-300 bg-white text-gray-500 hover:bg-gray-50">3</a> |
| <a href="#" class="px-3 py-2 rounded-r-md border border-gray-300 bg-white text-gray-500 hover:bg-gray-50">Вперед</a> |
| </nav> |
| </div> |
| |
| |
| <div class="mt-8"> |
| <button class="bg-blue-600 hover:bg-blue-700 text-white py-3 px-6 rounded-lg"> |
| <i class="fas fa-pen mr-2"></i> Написать отзыв |
| </button> |
| </div> |
| </div> |
| |
| <div id="delivery-tab" class="tab-content hidden"> |
| |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mt-12"> |
| <h2 class="text-2xl font-bold mb-6">С этим товаром покупают</h2> |
| |
| <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 overflow-hidden hover:shadow-lg transition-shadow"> |
| <div class="relative h-48 bg-gray-100"> |
| <img src="https://via.placeholder.com/300x300/d1d5db/808080?text=Related" alt="Related Product" class="w-full h-full object-cover"> |
| <button class="absolute top-2 right-2 bg-white rounded-full p-2 shadow hover:bg-gray-100"> |
| <i class="far fa-heart text-gray-600"></i> |
| </button> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-medium mb-1">Кейс для наушников</h3> |
| <div class="text-blue-600 font-bold mb-2">1 290 ₽</div> |
| <button class="w-full py-2 bg-blue-600 hover:bg-blue-700 text-white rounded">Добавить</button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow overflow-hidden hover:shadow-lg transition-shadow"> |
| <div class="relative h-48 bg-gray-100"> |
| <img src="https://via.placeholder.com/300x300/d1d5db/808080?text=Related" alt="Related Product" class="w-full h-full object-cover"> |
| <button class="absolute top-2 right-2 bg-white rounded-full p-2 shadow hover:bg-gray-100"> |
| <i class="far fa-heart text-gray-600"></i> |
| </button> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-medium mb-1">Кабель аудио 3.5mm</h3> |
| <div class="text-blue-600 font-bold mb-2">490 ₽</div> |
| <button class="w-full py-2 bg-blue-600 hover:bg-blue-700 text-white rounded">Добавить</button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow overflow-hidden hover:shadow-lg transition-shadow"> |
| <div class="relative h-48 bg-gray-100"> |
| <img src="https://via.placeholder.com/300x300/d1d5db/808080?text=Related" alt="Related Product" class="w-full h-full object-cover"> |
| <button class="absolute top-2 right-2 bg-white rounded-full p-2 shadow hover:bg-gray-100"> |
| <i class="far fa-heart text-gray-600"></i> |
| </button> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-medium mb-1">Адаптер Bluetooth</h3> |
| <div class="text-blue-600 font-bold mb-2">1 890 ₽</div> |
| <button class="w-full py-2 bg-blue-600 hover:bg-blue-700 text-white rounded">Добавить</button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow overflow-hidden hover:shadow-lg transition-shadow"> |
| <div class="relative h-48 bg-gray-100"> |
| <img src="https://via.placeholder.com/300x300/d1d5db/808080?text=Related" alt="Related Product" class="w-full h-full object-cover"> |
| <button class="absolute top-2 right-2 bg-white rounded-full p-2 shadow hover:bg-gray-100"> |
| <i class="far fa-heart text-gray-600"></i> |
| </button> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-medium mb-1">Подставка для наушников</h3> |
| <div class="text-blue-600 font-bold mb-2">2 990 ₽</div> |
| <button class="w-full py-2 bg-blue-600 hover:bg-blue-700 text-white rounded">Добавить</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
| |
| <footer class="bg-gray-100 mt-12 py-8"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div> |
| <h3 class="font-bold mb-4">Магазин</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-600 hover:text-blue-600">О нас</a></li> |
| <li><a href="#" class="text-gray-600 hover:text-blue-600">Каталог</a></li> |
| <li><a href="#" class="text-gray-600 hover:text-blue-600">Акции</a></li> |
| <li><a href="#" class="text-gray-600 hover:text-blue-600">Бренды</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="font-bold mb-4">Помощь</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-600 hover:text-blue-600">Доставка и оплата</a></li> |
| <li><a href="#" class="text-gray-600 hover:text-blue-600">Возврат</a></li> |
| <li><a href="#" class="text-gray-600 hover:text-blue-600">FAQ</a></li> |
| <li><a href="#" class="text-gray-600 hover:text-blue-600">Контакты</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="font-bold mb-4">Контакты</h3> |
| <ul class="space-y-2"> |
| <li class="text-gray-600">8 (800) 555-35-35</li> |
| <li class="text-gray-600">info@shop.com</li> |
| <li class="text-gray-600">Москва, ул. Примерная, 123</li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="font-bold mb-4">Соцсети</h3> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-blue-600 hover:text-blue-800 text-xl"><i class="fab fa-vk"></i></a> |
| <a href="#" class="text-blue-400 hover:text-blue-600 text-xl"><i class="fab fa-telegram"></i></a> |
| <a href="#" class="text-pink-500 hover:text-pink-700 text-xl"><i class="fab fa-instagram"></i></a> |
| <a href="#" class="text-blue-700 hover:text-blue-900 text-xl"><i class="fab fa-facebook"></i></a> |
| </div> |
| <p class="text-gray-600 mt-4 text-sm">Подпишитесь на наши новости и акции</p> |
| </div> |
| </div> |
| <div class="border-t border-gray-200 mt-8 pt-8 text-center text-gray-500 text-sm"> |
| © 2023 Интернет-магазин. Все права защищены. |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| function changeMainImage(element) { |
| const mainImage = document.getElementById('mainImage'); |
| mainImage.src = element.src.replace('100x100', '800x600'); |
| |
| |
| document.querySelectorAll('.thumbnail').forEach(img => { |
| img.classList.remove('image-active'); |
| }); |
| element.classList.add('image-active'); |
| } |
| |
| |
| document.querySelectorAll('.color-btn').forEach(btn => { |
| btn.addEventListener('click', function() { |
| document.querySelectorAll('.color-btn').forEach(b => { |
| b.classList.remove('border-black'); |
| b.classList.add('border-gray-200'); |
| }); |
| this.classList.remove('border-gray-200'); |
| this.classList.add('border-black'); |
| |
| |
| console.log('Selected color:', this.dataset.color); |
| }); |
| }); |
| |
| |
| document.querySelectorAll('.variant-btn').forEach(btn => { |
| btn.addEventListener('click', function() { |
| document.querySelectorAll('.variant-btn').forEach(b => { |
| b.classList.remove('bg-blue-100', 'border-blue-300'); |
| }); |
| this.classList.add('bg-blue-100', 'border-blue-300'); |
| |
| console.log('Selected variant:', this.dataset.variant); |
| }); |
| }); |
| |
| |
| document.getElementById('decrement').addEventListener('click', function() { |
| const quantity = document.getElementById('quantity'); |
| if (quantity.value > 1) { |
| quantity.value--; |
| } |
| }); |
| |
| document.getElementById('increment').addEventListener('click', function() { |
| const quantity = document.getElementById('quantity'); |
| if (quantity.value < 10) { |
| quantity.value++; |
| } |
| }); |
| |
| |
| document.getElementById('addToCart').addEventListener('click', function() { |
| const cartCount = document.getElementById('cartCount'); |
| let count = parseInt(cartCount.textContent); |
| count++; |
| cartCount.textContent = count; |
| |
| |
| const notification = document.createElement('div'); |
| notification.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg flex items-center'; |
| notification.innerHTML = ` |
| <i class="fas fa-check-circle mr-2"></i> |
| Товар добавлен в корзину! |
| `; |
| document.body.appendChild(notification); |
| |
| setTimeout(() => { |
| notification.classList.add('opacity-0', 'transition-opacity', 'duration-300'); |
| setTimeout(() => notification.remove(), 300); |
| }, 2000); |
| |
| console.log('Added to cart!'); |
| }); |
| |
| |
| const searchBtn = document.getElementById('searchBtn'); |
| const searchDropdown = document.getElementById('searchDropdown'); |
| |
| searchBtn.addEventListener('click', function(e) { |
| e.stopPropagation(); |
| searchDropdown.classList.toggle('hidden'); |
| }); |
| |
| |
| const profileBtn = document.getElementById('profileBtn'); |
| const profileDropdown = document.getElementById('profileDropdown'); |
| |
| profileBtn.addEventListener('click', function(e) { |
| e.stopPropagation(); |
| profileDropdown.classList.toggle('hidden'); |
| }); |
| |
| |
| document.addEventListener('click', function() { |
| profileDropdown.classList.add('hidden'); |
| }); |
| |
| |
| document.querySelectorAll('.tab-btn').forEach((btn, index) => { |
| btn.addEventListener('click', function() { |
| |
| document.querySelectorAll('.tab-btn').forEach(b => { |
| b.classList.remove('text-blue-600', 'border-blue-600'); |
| b.classList.add('text-gray-500', 'hover:text-gray-700'); |
| }); |
| this.classList.add('text-blue-600', 'border-blue-600'); |
| this.classList.remove('text-gray-500', 'hover:text-gray-700'); |
| |
| |
| document.querySelectorAll('.tab-content').forEach(content => { |
| content.classList.add('hidden'); |
| }); |
| |
| const tabContents = ['description-tab', 'specs-tab', 'reviews-tab', 'delivery-tab']; |
| document.getElementById(tabContents[index]).classList.remove('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=pcudima/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
