|
|
<!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> |
|
|
.modal { |
|
|
transition: opacity 0.3s ease; |
|
|
} |
|
|
.product-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.fade-in { |
|
|
animation: fadeIn 0.5s ease-in; |
|
|
} |
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; } |
|
|
to { opacity: 1; } |
|
|
} |
|
|
.filter-panel { |
|
|
max-height: 0; |
|
|
overflow: hidden; |
|
|
transition: max-height 0.3s ease-out; |
|
|
} |
|
|
.filter-panel.open { |
|
|
max-height: 1000px; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 font-sans"> |
|
|
|
|
|
<header class="bg-white shadow-sm sticky top-0 z-50"> |
|
|
<div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
|
|
<h1 class="text-2xl font-bold text-blue-800">Оборудование Росхолод</h1> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="text-gray-600 hover:text-blue-800"> |
|
|
<i class="fas fa-history text-xl"></i> |
|
|
</button> |
|
|
<button class="text-gray-600 hover:text-blue-800"> |
|
|
<i class="fas fa-user text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div id="rulesModal" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 px-4"> |
|
|
<div class="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-xl font-bold text-blue-800">Правила использования сайта</h2> |
|
|
<button id="closeRules" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="space-y-4 text-gray-700"> |
|
|
<p>Данный информационный ресурс предоставляет информацию о товарах, их характеристиках и стоимости, но не гарантирует их достоверность.</p> |
|
|
<p>Все товары на сайте могут иметь визуальные, технические или функциональные дефекты, которые не были обнаружены при проверке.</p> |
|
|
<p>Покупатель обязан самостоятельно изучить описание, фото и характеристики товара, убедиться в соответствии заявленным данным.</p> |
|
|
<p>Ответственность за достоверность информации сайт не несёт. Мы делаем всё возможное для точности информации, но не гарантируем её полную точность.</p> |
|
|
<p>При оформлении заказа или использовании формы обратной связи вы предоставляете персональные данные: имя, телефон, адрес электронной почты и другие, необходимые для связи и выполнения заказа. Также соглашаетесь на обработку этих данных и использования их для связи с вами.</p> |
|
|
<p>Эти данные используются:</p> |
|
|
<ul class="list-disc pl-5 space-y-2"> |
|
|
<li>Для связи с вами;</li> |
|
|
<li>Для выполнения обязательств по сделке;</li> |
|
|
<li>Для информирования вас о новых товарах, акциях и специальных предложениях (при согласии).</li> |
|
|
</ul> |
|
|
<p>Мы не передаём ваши данные третьим лицам, кроме случаев, предусмотренных законодательством.</p> |
|
|
<p>Ваши персональные данные хранятся в закрытых системах, защищённых от несанкционированного доступа.</p> |
|
|
<p>Вы имеете право:</p> |
|
|
<ul class="list-disc pl-5 space-y-2"> |
|
|
<li>Запросить доступ к своим данным;</li> |
|
|
<li>Исправить или удалить их;</li> |
|
|
<li>Остановить распространение ваших данных.</li> |
|
|
</ul> |
|
|
<p>Политика возврата и обмена товаров с дефектами может быть ограничена. Условия возврата зависят от конкретного товара и указываются в описании.</p> |
|
|
<p>Сайт не несёт ответственности за неполное или неправильное описание товара, технические сбои в работе сайта или потери данных при использовании сторонних сервисов.</p> |
|
|
<p>Мы оставляем за собой право вносить изменения в настоящие правила без предварительного уведомления.</p> |
|
|
</div> |
|
|
<div class="mt-6 flex justify-center"> |
|
|
<button id="acceptRules" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md transition-colors"> |
|
|
Принимаю правила |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<main class="container mx-auto px-4 py-6"> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-4"> |
|
|
<div class="relative flex-grow"> |
|
|
<input type="text" placeholder="Поиск оборудования..." class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
|
|
</div> |
|
|
<button id="toggleFilters" class="bg-white border border-gray-300 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-50 flex items-center gap-2"> |
|
|
<i class="fas fa-sliders-h"></i> |
|
|
<span>Показать фильтры</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="filtersPanel" class="filter-panel bg-white p-4 rounded-md shadow-sm mb-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Сортировка:</label> |
|
|
<select class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<option>По популярности</option> |
|
|
<option>По цене (сначала дешевые)</option> |
|
|
<option>По цене (сначала дорогие)</option> |
|
|
<option>По новизне</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Склад:</label> |
|
|
<select class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<option>Все склады</option> |
|
|
<option>Москва</option> |
|
|
<option>Санкт-Петербург</option> |
|
|
<option>Новосибирск</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Выберите сегмент:</label> |
|
|
<select class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<option>Все сегменты</option> |
|
|
<option>Холодильное оборудование</option> |
|
|
<option>Посудомоечное оборудование</option> |
|
|
<option>Кофейное оборудование</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 flex justify-end"> |
|
|
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md transition-colors"> |
|
|
Применить фильтры |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> |
|
|
|
|
|
<div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300"> |
|
|
<div class="relative"> |
|
|
<img src="https://sales.rosholod.org/media/17525565819610.1422724479937123" alt="Купольная посудомоечная машина Rosso HDW-80 PRO" class="w-full h-48 object-cover"> |
|
|
<div class="absolute top-2 right-2 flex items-center bg-black bg-opacity-50 text-white px-2 py-1 rounded-full text-xs"> |
|
|
<i class="fas fa-eye mr-1"></i> |
|
|
<span>322</span> |
|
|
</div> |
|
|
<button class="absolute top-2 left-2 text-gray-300 hover:text-red-500"> |
|
|
<i class="far fa-heart text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-bold text-lg mb-2">Купольная посудомоечная машина Rosso HDW-80 PRO</h3> |
|
|
<div class="mb-4"> |
|
|
<a href="https://sales.rosholod.org/login-form" class="text-blue-600 hover:text-blue-800 font-medium">Авторизуйтесь для просмотра цен</a> |
|
|
</div> |
|
|
<div class="text-sm text-gray-600 space-y-1"> |
|
|
<p><span class="font-medium">Гарантия:</span> 12 мес</p> |
|
|
<p><span class="font-medium">Страна:</span> Китай</p> |
|
|
<p><span class="font-medium">Производительность:</span> 60 кассет/ч</p> |
|
|
</div> |
|
|
<button class="mt-4 w-full bg-gray-100 hover:bg-gray-200 text-gray-800 py-2 rounded-md transition-colors flex items-center justify-center"> |
|
|
<i class="fas fa-info-circle mr-2"></i> |
|
|
Подробнее |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300"> |
|
|
<div class="relative"> |
|
|
<img src="https://sales.rosholod.org/media/17525565598080.5003900471411056" alt="Моноблок Intercold ММСМ-110 FTT" class="w-full h-48 object-cover"> |
|
|
<div class="absolute top-2 right-2 flex items-center bg-black bg-opacity-50 text-white px-2 py-1 rounded-full text-xs"> |
|
|
<i class="fas fa-eye mr-1"></i> |
|
|
<span>84</span> |
|
|
</div> |
|
|
<button class="absolute top-2 left-2 text-gray-300 hover:text-red-500"> |
|
|
<i class="far fa-heart text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-bold text-lg mb-2">Моноблок Intercold ММСМ-110 FTT</h3> |
|
|
<div class="mb-4"> |
|
|
<a href="https://sales.rosholod.org/login-form" class="text-blue-600 hover:text-blue-800 font-medium">Авторизуйтесь для просмотра цен</a> |
|
|
</div> |
|
|
<div class="text-sm text-gray-600 space-y-1"> |
|
|
<p><span class="font-medium">Температура:</span> от -5 до +5 °C</p> |
|
|
<p><span class="font-medium">Напряжение:</span> 220В</p> |
|
|
<p><span class="font-medium">Мощность:</span> 0.63 кВт</p> |
|
|
</div> |
|
|
<button class="mt-4 w-full bg-gray-100 hover:bg-gray-200 text-gray-800 py-2 rounded-md transition-colors flex items-center justify-center"> |
|
|
<i class="fas fa-info-circle mr-2"></i> |
|
|
Подробнее |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300"> |
|
|
<div class="relative"> |
|
|
<img src="https://sales.rosholod.org/media/17525565299330.29972002134351206" alt="HFR-2-140/100/К Зонт вентиляционный Кобор" class="w-full h-48 object-cover"> |
|
|
<div class="absolute top-2 right-2 flex items-center bg-black bg-opacity-50 text-white px-2 py-1 rounded-full text-xs"> |
|
|
<i class="fas fa-eye mr-1"></i> |
|
|
<span>50</span> |
|
|
</div> |
|
|
<button class="absolute top-2 left-2 text-gray-300 hover:text-red-500"> |
|
|
<i class="far fa-heart text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-bold text-lg mb-2">HFR-2-140/100/К Зонт вентиляционный Кобор</h3> |
|
|
<div class="mb-4"> |
|
|
<a href="https://sales.rosholod.org/login-form" class="text-blue-600 hover:text-blue-800 font-medium">Авторизуйтесь для просмотра цен</a> |
|
|
</div> |
|
|
<div class="text-sm text-gray-600"> |
|
|
<p>Вытяжные зонты c гидрозатвором широко применяются на промышленных предприятиях и в точках общественного питания, которые оснащены мангалами, печами и другим тепловым оборудованием.</p> |
|
|
</div> |
|
|
<button class="mt-4 w-full bg-gray-100 hover:bg-gray-200 text-gray-800 py-2 rounded-md transition-colors flex items-center justify-center"> |
|
|
<i class="fas fa-info-circle mr-2"></i> |
|
|
Подробнее |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300"> |
|
|
<div class="relative"> |
|
|
<img src="https://sales.rosholod.org/media/17526417931100.9526324184516755" alt="Кофемашина La Pavoni LPLENQ01EU" class="w-full h-48 object-cover"> |
|
|
<div class="absolute top-2 right-2 flex items-center bg-black bg-opacity-50 text-white px-2 py-1 rounded-full text-xs"> |
|
|
<i class="fas fa-eye mr-1"></i> |
|
|
<span>19</span> |
|
|
</div> |
|
|
<button class="absolute top-2 left-2 text-gray-300 hover:text-red-500"> |
|
|
<i class="far fa-heart text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-bold text-lg mb-2">Кофемашина La Pavoni LPLENQ01EU</h3> |
|
|
<div class="mb-4"> |
|
|
<a href="https://sales.rosholod.org/login-form" class="text-blue-600 hover:text-blue-800 font-medium">Авторизуйтесь для просмотра цен</a> |
|
|
</div> |
|
|
<div class="text-sm text-gray-600 space-y-1"> |
|
|
<p><span class="font-medium">Страна:</span> Италия</p> |
|
|
<p><span class="font-medium">Гарантия:</span> 24 мес</p> |
|
|
<p><span class="font-medium">Мощность:</span> 0.95 кВт</p> |
|
|
</div> |
|
|
<button class="mt-4 w-full bg-gray-100 hover:bg-gray-200 text-gray-800 py-2 rounded-md transition-colors flex items-center justify-center"> |
|
|
<i class="fas fa-info-circle mr-2"></i> |
|
|
Подробнее |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800 text-white py-8 mt-12"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4">Оборудование Росхолод</h3> |
|
|
<p class="text-gray-300">Мы предлагаем широкий ассортимент профессионального оборудования для предприятий общественного питания и торговли.</p> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4">Контакты</h3> |
|
|
<ul class="space-y-2 text-gray-300"> |
|
|
<li><i class="fas fa-phone-alt mr-2"></i> +7 (XXX) XXX-XX-XX</li> |
|
|
<li><i class="fas fa-envelope mr-2"></i> [email protected]</li> |
|
|
<li><i class="fas fa-map-marker-alt mr-2"></i> г. Москва, ул. Примерная, д. 123</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4">Полезные ссылки</h3> |
|
|
<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> |
|
|
<div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400"> |
|
|
<p>© 2023 Оборудование Росхолод. Все права защищены.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
const rulesModal = document.getElementById('rulesModal'); |
|
|
const closeRules = document.getElementById('closeRules'); |
|
|
const acceptRules = document.getElementById('acceptRules'); |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
rulesModal.classList.add('flex'); |
|
|
rulesModal.classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
closeRules.addEventListener('click', () => { |
|
|
rulesModal.classList.remove('flex'); |
|
|
rulesModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
acceptRules.addEventListener('click', () => { |
|
|
rulesModal.classList.remove('flex'); |
|
|
rulesModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
const toggleFilters = document.getElementById('toggleFilters'); |
|
|
const filtersPanel = document.getElementById('filtersPanel'); |
|
|
|
|
|
toggleFilters.addEventListener('click', () => { |
|
|
filtersPanel.classList.toggle('open'); |
|
|
if (filtersPanel.classList.contains('open')) { |
|
|
toggleFilters.innerHTML = '<i class="fas fa-sliders-h"></i><span>Скрыть фильтры</span>'; |
|
|
} else { |
|
|
toggleFilters.innerHTML = '<i class="fas fa-sliders-h"></i><span>Показать фильтры</span>'; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.fa-heart').forEach(button => { |
|
|
button.addEventListener('click', function() { |
|
|
if (this.classList.contains('far')) { |
|
|
this.classList.remove('far'); |
|
|
this.classList.remove('text-gray-300'); |
|
|
this.classList.add('fas'); |
|
|
this.classList.add('text-red-500'); |
|
|
} else { |
|
|
this.classList.remove('fas'); |
|
|
this.classList.remove('text-red-500'); |
|
|
this.classList.add('far'); |
|
|
this.classList.add('text-gray-300'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.product-card').forEach(card => { |
|
|
card.addEventListener('mouseenter', function() { |
|
|
this.classList.add('fade-in'); |
|
|
}); |
|
|
}); |
|
|
</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/idea-for-main-page-01" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
