Spaces:
Running
Running
нужно адаптировать шрифты в названии похожих товаров под различные ориентации экрана - Initial Deployment
62d86b5
verified
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Купольная посудомоечная машина Rosso HDW-80 PRO | Росхолод</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> | |
| .product-gallery { | |
| scrollbar-width: none; | |
| } | |
| .product-gallery::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .specs-table tr:nth-child(even) { | |
| background-color: #f8fafc; | |
| } | |
| .zoom-effect { | |
| transition: transform 0.3s ease; | |
| } | |
| .zoom-effect:hover { | |
| transform: scale(1.03); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans text-gray-800"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <a href="#" class="text-2xl font-bold text-blue-600">Росхолод</a> | |
| <nav class="hidden md:flex space-x-6"> | |
| <a href="#" class="hover:text-blue-600">Каталог</a> | |
| <a href="#" class="hover:text-blue-600">О компании</a> | |
| <a href="#" class="hover:text-blue-600">Контакты</a> | |
| <a href="#" class="hover:text-blue-600">Доставка</a> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <a href="#" class="hover:text-blue-600"><i class="fas fa-search"></i></a> | |
| <a href="#" class="hover:text-blue-600"><i class="fas fa-user"></i></a> | |
| <a href="#" class="hover:text-blue-600"><i class="fas fa-shopping-cart"></i></a> | |
| <button class="md:hidden"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Breadcrumbs --> | |
| <div class="container mx-auto px-4 py-3 text-sm text-gray-500"> | |
| <a href="#" class="hover:text-blue-600">Главная</a> > | |
| <a href="#" class="hover:text-blue-600">Каталог</a> > | |
| <a href="#" class="hover:text-blue-600">Посудомоечные машины</a> > | |
| <span class="text-gray-700">Rosso HDW-80 PRO</span> | |
| </div> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-6"> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <!-- Product Images --> | |
| <div class="lg:w-1/2"> | |
| <div class="bg-white rounded-lg shadow-md p-4 mb-4"> | |
| <img src="https://sales.rosholod.org/media/17525565819610.1422724479937123" | |
| alt="Купольная посудомоечная машина Rosso HDW-80 PRO" | |
| class="w-full h-auto rounded-lg zoom-effect"> | |
| </div> | |
| <div class="flex space-x-2 overflow-x-auto product-gallery pb-2"> | |
| <img src="https://sales.rosholod.org/media/17525565819610.1422724479937123" | |
| alt="Изображение 1" | |
| class="w-24 h-24 object-cover rounded border border-gray-200 cursor-pointer hover:border-blue-400"> | |
| <img src="https://sales.rosholod.org/media/17525565819620.7316371327141813" | |
| alt="Изображение 2" | |
| class="w-24 h-24 object-cover rounded border border-gray-200 cursor-pointer hover:border-blue-400"> | |
| </div> | |
| </div> | |
| <!-- Product Info --> | |
| <div class="lg:w-1/2"> | |
| <div class="bg-white rounded-lg shadow-md p-6"> | |
| <h1 class="text-2xl font-bold mb-2">Купольная посудомоечная машина Rosso HDW-80 PRO</h1> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex text-yellow-400 mr-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> | |
| <span class="text-sm text-gray-500">5 отзывов</span> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-phone-alt text-blue-500 mr-2"></i> | |
| <span class="font-medium">89567345345</span> | |
| </div> | |
| <button class="bg-blue-100 text-blue-600 px-4 py-2 rounded-lg hover:bg-blue-200 transition"> | |
| <i class="fas fa-question-circle mr-2"></i>Задать вопрос по товару | |
| </button> | |
| </div> | |
| <div class="mb-6 p-4 bg-gray-50 rounded-lg border border-gray-200"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="font-medium">Цена:</span> | |
| <a href="https://sales.rosholod.org/login-form" class="text-blue-600 hover:underline"> | |
| Авторизуйтесь для просмотра цен | |
| </a> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium">Склад:</span> | |
| <span>Волжск</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium">Сегмент:</span> | |
| <span>Посудомоечные машины</span> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="font-bold text-lg mb-2">Краткое описание:</h3> | |
| <p class="text-gray-700"> | |
| Купольная посудомоечная машина Rosso HDW-80 PRO без сливной помпы предназначена для мытья тарелок, | |
| стаканов, столовых приборов, подносов, чашек, салатниц на предприятиях общественного питания. | |
| </p> | |
| </div> | |
| <button class="w-full bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition mb-4"> | |
| <i class="fas fa-shopping-cart mr-2"></i>Добавить в корзину | |
| </button> | |
| <div class="flex justify-center space-x-4"> | |
| <button class="text-gray-500 hover:text-blue-600"> | |
| <i class="far fa-heart text-xl"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-blue-600"> | |
| <i class="fas fa-share-alt text-xl"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-blue-600"> | |
| <i class="fas fa-chart-bar text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Details --> | |
| <div class="mt-8 bg-white rounded-lg shadow-md p-6"> | |
| <h2 class="text-xl font-bold mb-4 border-b pb-2">Описание</h2> | |
| <div class="mb-8"> | |
| <h3 class="font-bold text-lg mb-2">Технические характеристики</h3> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full specs-table"> | |
| <tr> | |
| <td class="p-3 font-medium">Срок гарантии</td> | |
| <td class="p-3">12 мес</td> | |
| </tr> | |
| <tr> | |
| <td class="p-3 font-medium">Страна-производитель</td> | |
| <td class="p-3">Китай</td> | |
| </tr> | |
| <tr> | |
| <td class="p-3 font-medium">Производитель</td> | |
| <td class="p-3">Rosso</td> | |
| </tr> | |
| <tr> | |
| <td class="p-3 font-medium">Количество режимов</td> | |
| <td class="p-3">1</td> | |
| </tr> | |
| <tr> | |
| <td class="p-3 font-medium">Производительность</td> | |
| <td class="p-3">60 кассет/ч</td> | |
| </tr> | |
| <tr> | |
| <td class="p-3 font-medium">Длительность цикла</td> | |
| <td class="p-3">60 сек</td> | |
| </tr> | |
| <tr> | |
| <td class="p-3 font-medium">Управление</td> | |
| <td class="p-3">Механическое</td> | |
| </tr> | |
| <tr> | |
| <td class="p-3 font-medium">Размер кассеты</td> | |
| <td class="p-3">500×500 мм</td> | |
| </tr> | |
| <tr> | |
| <td class="p-3 font-medium">Мощность</td> | |
| <td class="p-3">14750 Вт</td> | |
| </tr> | |
| <tr> | |
| <td class="p-3 font-medium">Напряжение</td> | |
| <td class="p-3">380 В</td> | |
| </tr> | |
| <tr> | |
| <td class="p-3 font-medium">Ширина</td> | |
| <td class="p-3">63.7 см</td> | |
| </tr> | |
| <tr> | |
| <td class="p-3 font-medium">Глубина</td> | |
| <td class="p-3">62.7 см</td> | |
| </tr> | |
| <tr> | |
| <td class="p-3 font-medium">Высота</td> | |
| <td class="p-3">137.8 см</td> | |
| </tr> | |
| <tr> | |
| <td class="p-3 font-medium">Вес без упаковки</td> | |
| <td class="p-3">135 кг</td> | |
| </tr> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="font-bold text-lg mb-2">Особенности</h3> | |
| <ul class="list-disc pl-5 space-y-2"> | |
| <li>Корзина 500×500 мм</li> | |
| <li>Максимально 60 циклов в час</li> | |
| <li>Один цикл — 1 минута</li> | |
| <li>Без помп и дозаторов</li> | |
| <li>Максимальная высота посуды 420мм</li> | |
| <li>В комплекте 2 кассеты и корзина для столовых приборов</li> | |
| </ul> | |
| </div> | |
| <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4"> | |
| <h4 class="font-bold text-yellow-700 mb-2">Внимание!</h4> | |
| <p class="text-yellow-700"> | |
| Данная модель не комплектуется сливной помпой. Установка посудомоечной машины должна быть выше уровня | |
| канализационного отверстия (установка на столе или подставке). В таком случае, вода будет сливаться | |
| самотеком. Если же машина устанавливается на уровне слива, под барную стойку, то рекомендуется | |
| использовать только модели со сливной помпой. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Similar Products --> | |
| <div class="mt-8"> | |
| <h2 class="text-xl font-bold mb-4">Похожие товары</h2> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <img src="https://sales.rosholod.org/media/17538526749380.08352391208012477" | |
| alt="Посудомоечная машина" | |
| class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="font-medium mb-2">Посудомоечная машина</h3> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-blue-600 font-bold">Цена по запросу</span> | |
| <button class="text-gray-400 hover:text-blue-600"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Add more similar products here --> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white mt-12"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Росхолод</h3> | |
| <p class="text-gray-300">Профессиональное оборудование для предприятий общественного питания и торговли.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Каталог</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Посудомоечные машины</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Холодильное оборудование</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Тепловое оборудование</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Мебель для кафе</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Контакты</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone-alt mr-2 text-gray-300"></i> | |
| <span>89567345345</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope mr-2 text-gray-300"></i> | |
| <span>[email protected]</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-map-marker-alt mr-2 text-gray-300"></i> | |
| <span>Волжск</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Подписаться</h4> | |
| <p class="text-gray-300 mb-4">Будьте в курсе новинок и акций</p> | |
| <div class="flex"> | |
| <input type="email" placeholder="Ваш email" class="px-4 py-2 rounded-l-lg w-full"> | |
| <button class="bg-blue-600 px-4 py-2 rounded-r-lg"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| <div class="flex space-x-4 mt-4"> | |
| <a href="#" class="text-gray-300 hover:text-white"><i class="fab fa-vk"></i></a> | |
| <a href="#" class="text-gray-300 hover:text-white"><i class="fab fa-telegram"></i></a> | |
| <a href="#" class="text-gray-300 hover:text-white"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400"> | |
| <p>© 2023 Росхолод. Все права защищены.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple image gallery functionality | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const thumbnails = document.querySelectorAll('.product-gallery img'); | |
| const mainImage = document.querySelector('.zoom-effect'); | |
| thumbnails.forEach(thumb => { | |
| thumb.addEventListener('click', function() { | |
| mainImage.src = this.src; | |
| mainImage.alt = this.alt; | |
| }); | |
| }); | |
| // Add to cart animation | |
| const addToCartBtn = document.querySelector('button.bg-blue-600'); | |
| if (addToCartBtn) { | |
| addToCartBtn.addEventListener('click', function() { | |
| this.innerHTML = '<i class="fas fa-check mr-2"></i>Добавлено'; | |
| this.classList.remove('bg-blue-600', 'hover:bg-blue-700'); | |
| this.classList.add('bg-green-500', 'hover:bg-green-600'); | |
| setTimeout(() => { | |
| this.innerHTML = '<i class="fas fa-shopping-cart mr-2"></i>Добавить в корзину'; | |
| this.classList.remove('bg-green-500', 'hover:bg-green-600'); | |
| this.classList.add('bg-blue-600', 'hover:bg-blue-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=DanilAmpil/postpage" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |