| <!DOCTYPE html> |
| <html lang="ru"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Комплект "Минские узоры" | Белорусское постельное бельё</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <style> |
| .product-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
| } |
| .transition-slow { |
| transition: all 0.5s ease; |
| } |
| .thumbnail:hover { |
| border-color: #3B82F6; |
| } |
| .active-thumbnail { |
| border-color: #3B82F6; |
| border-width: 2px; |
| } |
| </style> |
| </head> |
| <body class="font-sans bg-gray-50"> |
| |
| <header class="bg-white shadow-md"> |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i data-feather="home" class="text-blue-600"></i> |
| <a href="index.html" class="text-2xl font-bold text-blue-600">БелПостель</a> |
| </div> |
| <nav class="hidden md:flex space-x-8"> |
| <a href="index.html" class="text-gray-700 hover:text-blue-600 transition-slow">Главная</a> |
| <a href="catalog.html" class="text-gray-700 hover:text-blue-600 transition-slow">Каталог</a> |
| <a href="about.html" class="text-gray-700 hover:text-blue-600 transition-slow">О нас</a> |
| <a href="contact.html" class="text-gray-700 hover:text-blue-600 transition-slow">Контакты</a> |
| </nav> |
| <div class="flex items-center space-x-4"> |
| <a href="cart.html" class="relative"> |
| <i data-feather="shopping-cart" class="text-gray-700 hover:text-blue-600"></i> |
| <span 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> |
| <a href="login.html" class="hidden md:block bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition-slow">Войти</a> |
| <button class="md:hidden" id="mobile-menu-button"> |
| <i data-feather="menu" class="text-gray-700"></i> |
| </button> |
| </div> |
| </div> |
| |
| <div class="md:hidden hidden bg-white py-2 px-4 shadow-md" id="mobile-menu"> |
| <a href="index.html" class="block py-2 text-gray-700 hover:text-blue-600">Главная</a> |
| <a href="catalog.html" class="block py-2 text-gray-700 hover:text-blue-600">Каталог</a> |
| <a href="about.html" class="block py-2 text-gray-700 hover:text-blue-600">О нас</a> |
| <a href="contact.html" class="block py-2 text-gray-700 hover:text-blue-600">Контакты</a> |
| <a href="login.html" class="block py-2 text-gray-700 hover:text-blue-600">Войти</a> |
| </div> |
| </header> |
|
|
| |
| <div class="bg-gray-100 py-3"> |
| <div class="container mx-auto px-4"> |
| <nav class="flex" aria-label="Breadcrumb"> |
| <ol class="inline-flex items-center space-x-1 md:space-x-3"> |
| <li class="inline-flex items-center"> |
| <a href="index.html" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600"> |
| <i data-feather="home" class="w-4 h-4 mr-2"></i> |
| Главная |
| </a> |
| </li> |
| <li> |
| <div class="flex items-center"> |
| <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i> |
| <a href="catalog.html" class="ml-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:ml-2">Каталог</a> |
| </div> |
| </li> |
| <li aria-current="page"> |
| <div class="flex items-center"> |
| <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i> |
| <span class="ml-1 text-sm font-medium text-gray-500 md:ml-2">Комплект "Минские узоры"</span> |
| </div> |
| </li> |
| </ol> |
| </nav> |
| </div> |
| </div> |
|
|
| |
| <main class="py-8"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col lg:flex-row gap-8"> |
| |
| <div class="lg:w-1/2"> |
| <div class="bg-white p-4 rounded-lg shadow-md mb-4"> |
| <img id="main-image" src="http://static.photos/textiles/1200x630/1" alt="Комплект 'Минские узоры'" class="w-full h-auto rounded-lg"> |
| </div> |
| <div class="grid grid-cols-4 gap-2"> |
| <div class="cursor-pointer thumbnail border border-gray-200 rounded p-1 transition-slow active-thumbnail" onclick="changeImage('http://static.photos/textiles/1200x630/1')"> |
| <img src="http://static.photos/textiles/1200x630/1" alt="Комплект 'Минские узоры'" class="w-full h-20 object-cover rounded"> |
| </div> |
| <div class="cursor-pointer thumbnail border border-gray-200 rounded p-1 transition-slow" onclick="changeImage('http://static.photos/textiles/1200x630/11')"> |
| <img src="http://static.photos/textiles/1200x630/11" alt="Комплект 'Минские узоры'" class="w-full h-20 object-cover rounded"> |
| </div> |
| <div class="cursor-pointer thumbnail border border-gray-200 rounded p-1 transition-slow" onclick="changeImage('http://static.photos/textiles/1200x630/12')"> |
| <img src="http://static.photos/textiles/1200x630/12" alt="Комплект 'Минские узоры'" class="w-full h-20 object-cover rounded"> |
| </div> |
| <div class="cursor-pointer thumbnail border border-gray-200 rounded p-1 transition-slow" onclick="changeImage('http://static.photos/textiles/1200x630/13')"> |
| <img src="http://static.photos/textiles/1200x630/13" alt="Комплект 'Минские узоры'" class="w-full h-20 object-cover rounded"> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="lg:w-1/2"> |
| <div class="bg-white p-6 rounded-lg shadow-md"> |
| <h1 class="text-2xl font-bold mb-2">Комплект постельного белья "Минские узоры"</h1> |
| <div class="flex items-center mb-4"> |
| <div class="flex text-yellow-400"> |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| </div> |
| <span class="text-gray-500 text-sm ml-2">(12 отзывов)</span> |
| <span class="ml-4 text-green-600 text-sm font-medium">В наличии</span> |
| </div> |
| |
| <div class="mb-6"> |
| <span class="text-3xl font-bold text-gray-800">89.90 руб</span> |
| <span class="ml-2 text-gray-500 line-through">109.90 руб</span> |
| <span class="ml-2 bg-red-100 text-red-800 text-sm font-medium px-2 py-0.5 rounded">-18%</span> |
| </div> |
| |
| <div class="mb-6"> |
| <h3 class="font-semibold mb-2">Описание:</h3> |
| <p class="text-gray-600">Элегантный комплект постельного белья с традиционными белорусскими узорами. Изготовлен из 100% хлопка высшего качества, выращенного на белорусских полях. Мягкий, дышащий материал обеспечивает комфортный сон в любое время года.</p> |
| </div> |
| |
| <div class="mb-6"> |
| <h3 class="font-semibold mb-2">Характеристики:</h3> |
| <ul class="space-y-2 text-gray-600"> |
| <li class="flex"><span class="w-32 font-medium">Состав:</span> 100% хлопок</li> |
| <li class="flex"><span class="w-32 font-medium">Плотность:</span> 140 г/м²</li> |
| <li class="flex"><span class="w-32 font-medium">Размер:</span> 2-спальный (175×215 см)</li> |
| <li class="flex"><span class="w-32 font-medium">Комплектация:</span> Пододеяльник, простыня, 2 наволочки</li> |
| <li class="flex"><span class="w-32 font-medium">Страна:</span> Беларусь</li> |
| <li class="flex"><span class="w-32 font-medium">Артикул:</span> BP-2023-015</li> |
| </ul> |
| </div> |
| |
| <div class="mb-6"> |
| <h3 class="font-semibold mb-2">Цвет:</h3> |
| <div class="flex space-x-2"> |
| <button class="w-8 h-8 rounded-full bg-blue-500 border-2 border-white shadow"></button> |
| <button class="w-8 h-8 rounded-full bg-red-500 border-2 border-gray-300 shadow"></button> |
| <button class="w-8 h-8 rounded-full bg-green-500 border-2 border-gray-300 shadow"></button> |
| </div> |
| </div> |
| |
| <div class="mb-6"> |
| <h3 class="font-semibold mb-2">Размер:</h3> |
| <div class="flex flex-wrap gap-2"> |
| <button class="px-4 py-2 border border-gray-300 rounded hover:bg-blue-600 hover:text-white hover:border-blue-600 transition-slow">1.5 спальный</button> |
| <button class="px-4 py-2 border border-blue-600 bg-blue-600 text-white rounded">2 спальный</button> |
| <button class="px-4 py-2 border border-gray-300 rounded hover:bg-blue-600 hover:text-white hover:border-blue-600 transition-slow">Евро</button> |
| <button class="px-4 py-2 border border-gray-300 rounded hover:bg-blue-600 hover:text-white hover:border-blue-600 transition-slow">Семейный</button> |
| </div> |
| </div> |
| |
| <div class="flex items-center mb-6"> |
| <div class="flex items-center border border-gray-300 rounded"> |
| <button class="px-3 py-1 text-xl" onclick="decreaseQuantity()">-</button> |
| <input type="number" value="1" min="1" max="10" class="w-12 text-center border-x border-gray-300 py-1" id="quantity"> |
| <button class="px-3 py-1 text-xl" onclick="increaseQuantity()">+</button> |
| </div> |
| <button class="ml-4 bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition-slow flex items-center"> |
| <i data-feather="shopping-cart" class="w-5 h-5 mr-2"></i> |
| В корзину |
| </button> |
| <button class="ml-4 p-3 border border-gray-300 rounded hover:bg-gray-100 transition-slow"> |
| <i data-feather="heart" class="w-5 h-5 text-gray-600"></i> |
| </button> |
| </div> |
| |
| <div class="border-t border-gray-200 pt-4"> |
| <div class="flex items-center text-gray-600 mb-2"> |
| <i data-feather="truck" class="w-5 h-5 mr-2"></i> |
| <span>Бесплатная доставка по Минску от 100 руб</span> |
| </div> |
| <div class="flex items-center text-gray-600"> |
| <i data-feather="shield" class="w-5 h-5 mr-2"></i> |
| <span>Гарантия возврата в течение 14 дней</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mt-8"> |
| <div class="border-b border-gray-200"> |
| <nav class="flex -mb-px"> |
| <button id="description-tab" class="py-4 px-6 border-b-2 font-medium text-sm border-blue-500 text-blue-600">Описание</button> |
| <button id="specs-tab" class="py-4 px-6 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">Характеристики</button> |
| <button id="reviews-tab" class="py-4 px-6 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">Отзывы (12)</button> |
| <button id="delivery-tab" class="py-4 px-6 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">Доставка и оплата</button> |
| </nav> |
| </div> |
| |
| <div class="bg-white p-6 rounded-b-lg shadow-md"> |
| <div id="description-content"> |
| <h3 class="font-semibold text-lg mb-4">Подробное описание</h3> |
| <p class="text-gray-600 mb-4">Комплект постельного белья "Минские узоры" - это воплощение белорусских традиций в современном интерьере. Уникальный дизайн разработан белорусскими художниками и вдохновлён народными орнаментами.</p> |
| <p class="text-gray-600 mb-4">Изготовлен из высококачественного хлопка, который отличается мягкостью, прочностью и гипоаллергенными свойствами. Материал приятен на ощупь и обеспечивает комфортный температурный режим во время сна.</p> |
| <p class="text-gray-600 mb-4">Все швы выполнены с особой тщательностью, что гарантирует долговечность изделия даже после многократных стирок. Красители экологически безопасны и сертифицированы.</p> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6"> |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> |
| <i data-feather="check" class="w-5 h-5 text-blue-600"></i> |
| </div> |
| <div> |
| <h4 class="font-medium mb-1">Натуральные материалы</h4> |
| <p class="text-gray-600 text-sm">100% хлопок, выращенный в Беларуси</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> |
| <i data-feather="check" class="w-5 h-5 text-blue-600"></i> |
| </div> |
| <div> |
| <h4 class="font-medium mb-1">Ручная работа</h4> |
| <p class="text-gray-600 text-sm">Каждое изделие проверяется мастером</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> |
| <i data-feather="check" class="w-5 h-5 text-blue-600"></i> |
| </div> |
| <div> |
| <h4 class="font |
| </body> |
| </html> |
