Hugging Face's logo

Spaces:
Greats
/
oppppp
Running

App Files Community
oppppp / index.html
Greats's picture
Greats
Add 3 files
8605e71 verified
raw
history blame contribute delete
54.7 kB
 <!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">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Montserrat', sans-serif;
background-color: #f9f3e9;
color: #333;
}
.russian-header {
background: linear-gradient(135deg, #8b0000 0%, #b22222 100%);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.russian-pattern {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill="%23b22222" fill-opacity="0.05" d="M30,10L50,30L70,10L90,30L70,50L90,70L70,90L50,70L30,90L10,70L30,50L10,30L30,10Z"/></svg>');
}
.russian-card {
background: white;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
border: 1px solid #e0d6c2;
transition: all 0.3s ease;
}
.russian-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(139, 34, 34, 0.2);
}
.russian-title {
font-family: 'Playfair Display', serif;
color: #8b0000;
}
.russian-border {
border: 2px solid #8b0000;
}
.russian-btn {
background: linear-gradient(135deg, #8b0000 0%, #b22222 100%);
color: white;
transition: all 0.3s ease;
}
.russian-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(139, 34, 34, 0.4);
}
.russian-icon {
color: #8b0000;
}
.nav-link {
position: relative;
}
.nav-link:after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -5px;
left: 0;
background-color: #8b0000;
transition: width 0.3s ease;
}
.nav-link:hover:after {
width: 100%;
}
.russian-hero {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1541443137870-883703960a8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80');
background-size: cover;
background-position: center;
}
.russian-divider {
height: 3px;
background: linear-gradient(90deg, #8b0000, #b22222, #8b0000);
}
.russian-footer {
background: linear-gradient(135deg, #8b0000 0%, #b22222 100%);
color: white;
}
.russian-contact-card {
background: white;
border-left: 4px solid #8b0000;
}
</style>
</head>
<body class="russian-pattern">
<!-- Header -->
<header class="russian-header text-white sticky top-0 z-50">
<div class="container mx-auto px-4 py-4">
<div class="flex justify-between items-center">
<div class="flex items-center space-x-3">
<div class="bg-white p-2 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-red-800" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4V20M8 8L12 4L16 8M8 16L12 20L16 16M3 12H21" />
</svg>
</div>
<h1 class="text-2xl font-bold tracking-tight">ОПТИКА "ОПТОН"</h1>
</div>
<nav class="hidden md:flex space-x-8 items-center">
<a href="#services" class="nav-link font-medium">Услуги</a>
<a href="#repair" class="nav-link font-medium">Ремонт</a>
<a href="#manufacturing" class="nav-link font-medium">Изготовление</a>
<a href="#care" class="nav-link font-medium">Уход за очками</a>
<a href="#about" class="nav-link font-medium">О нас</a>
<a href="#contacts" class="nav-link font-medium">Контакты</a>
<a href="tel:+79263236886" class="russian-btn px-4 py-2 rounded-lg font-semibold flex items-center">
<i class="fas fa-phone mr-2"></i>+7 (926) 323-68-86
</a>
</nav>
<div class="md:hidden">
<button id="menu-btn" class="text-2xl focus:outline-none">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden bg-red-900 px-4 py-2">
<div class="flex flex-col space-y-3">
<a href="#services" class="nav-link py-2 text-white">Услуги</a>
<a href="#repair" class="nav-link py-2 text-white">Ремонт</a>
<a href="#manufacturing" class="nav-link py-2 text-white">Изготовление</a>
<a href="#care" class="nav-link py-2 text-white">Уход за очками</a>
<a href="#about" class="nav-link py-2 text-white">О нас</a>
<a href="#contacts" class="nav-link py-2 text-white">Контакты</a>
<a href="tel:+79263236886" class="russian-btn px-4 py-2 rounded-lg font-semibold text-center">
<i class="fas fa-phone mr-2"></i>+7 (926) 323-68-86
</a>
</div>
</div>
</header>
<!-- Hero Section -->
<section class="russian-hero relative overflow-hidden text-white">
<div class="container mx-auto px-4 py-32 relative z-10 text-center">
<h1 class="text-5xl md:text-6xl font-bold mb-6 font-serif">ОПТИКА "ОПТОН"</h1>
<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Превращаем ваши очки в произведение искусства с душой и мастерством</p>
<div class="flex justify-center">
<a href="tel:+79263236886" class="russian-btn px-8 py-4 rounded-full font-semibold flex items-center text-lg shadow-lg">
<i class="fas fa-phone mr-3"></i>+7 (926) 323-68-86
</a>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4 russian-title">Наши услуги</h2>
<div class="russian-divider w-20 h-1 mx-auto rounded-full"></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Service Card 1 -->
<div class="russian-card">
<div class="h-48 overflow-hidden">
<img src="https://images.unsplash.com/photo-1556306535-38febf6782e7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
alt="Ремонт очков"
class="w-full h-full object-cover">
</div>
<div class="p-6">
<h3 class="text-xl font-semibold mb-4 text-center russian-title">Ремонт очков</h3>
<ul class="space-y-3 text-gray-700">
<li class="flex items-start">
<i class="fas fa-check russian-icon mt-1 mr-3"></i>
<span>Замена носовых упоров</span>
</li>
<li class="flex items-start">
<i class="fas fa-check russian-icon mt-1 mr-3"></i>
<span>Замена и подбор заушников</span>
</li>
<li class="flex items-start">
<i class="fas fa-check russian-icon mt-1 mr-3"></i>
<span>Замена винтиков</span>
</li>
<li class="flex items-start">
<i class="fas fa-check russian-icon mt-1 mr-3"></i>
<span>Замена гарпунов</span>
</li>
</ul>
</div>
</div>
<!-- Service Card 2 -->
<div class="russian-card">
<div class="h-48 overflow-hidden">
<img src="https://static.wixstatic.com/media/f84ec4_8abcd0ad160b421e86c61d6fd4f6dfe0~mv2.jpg/v1/fill/w_620,h_400,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/tl.jpg"
alt="Окраска линз"
class="w-full h-full object-cover">
</div>
<div class="p-6">
<h3 class="text-xl font-semibold mb-4 text-center russian-title">Окраска линз</h3>
<ul class="space-y-3 text-gray-700">
<li class="flex items-start">
<i class="fas fa-check russian-icon mt-1 mr-3"></i>
<span>Окраска полимерных линз</span>
</li>
<li class="flex items-start">
<i class="fas fa-check russian-icon mt-1 mr-3"></i>
<span>Любой цвет, включая градиент</span>
</li>
<li class="flex items-start">
<i class="fas fa-check russian-icon mt-1 mr-3"></i>
<span>Мультицветные решения</span>
</li>
<li class="flex items-start">
<i class="fas fa-check russian-icon mt-1 mr-3"></i>
<span>Примерка перед окраской</span>
</li>
</ul>
</div>
</div>
<!-- Service Card 3 -->
<div class="russian-card">
<div class="h-48 overflow-hidden">
<img src="https://static.wixstatic.com/media/11062b_bb306819ebe94806ad697b21dc821887~mv2.jpg/v1/fill/w_620,h_400,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/Примерка%20очков.jpg"
alt="Изготовление очков"
class="w-full h-full object-cover">
</div>
<div class="p-6">
<h3 class="text-xl font-semibold mb-4 text-center russian-title">Изготовление очков</h3>
<ul class="space-y-3 text-gray-700">
<li class="flex items-start">
<i class="fas fa-check russian-icon mt-1 mr-3"></i>
<span>По вашему рецепту</span>
</li>
<li class="flex items-start">
<i class="fas fa-check russian-icon mt-1 mr-3"></i>
<span>Широкий выбор оправ</span>
</li>
<li class="flex items-start">
<i class="fas fa-check russian-icon mt-1 mr-3"></i>
<span>Качественные линзы</span>
</li>
<li class="flex items-start">
<i class="fas fa-check russian-icon mt-1 mr-3"></i>
<span>Индивидуальный подход</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Repair Section -->
<section id="repair" class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4 russian-title">Ремонт очков</h2>
<div class="russian-divider w-20 h-1 mx-auto rounded-full"></div>
</div>
<div class="flex flex-col lg:flex-row items-center">
<div class="lg:w-1/2 mb-8 lg:mb-0 lg:pr-8">
<div class="relative">
<img src="https://images.unsplash.com/photo-1556306535-38febf6782e7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
alt="Ремонт очков"
class="rounded-2xl shadow-xl w-full">
<div class="absolute -bottom-5 -right-5 bg-white p-4 rounded-lg shadow-lg russian-border">
<div class="bg-red-100 p-3 rounded-full">
<i class="fas fa-clock russian-icon text-xl"></i>
</div>
<p class="mt-2 font-semibold">Быстро</p>
<p class="text-sm text-gray-600">15-30 минут</p>
</div>
</div>
</div>
<div class="lg:w-1/2">
<h3 class="text-2xl font-semibold mb-6 russian-title">Быстро, качественно, недорого</h3>
<p class="text-gray-700 mb-6">Мы специализируемся на всех видах ремонта очков, используя только качественные материалы и профессиональное оборудование.</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="russian-card p-4 flex items-start">
<div class="bg-red-100 p-2 rounded-full mr-4">
<i class="fas fa-wrench russian-icon"></i>
</div>
<div>
<h4 class="font-semibold">Замена носовых упоров</h4>
<p class="text-gray-600 text-sm">Комфортные силиконовые или пластиковые упоры</p>
</div>
</div>
<div class="russian-card p-4 flex items-start">
<div class="bg-red-100 p-2 rounded-full mr-4">
<i class="fas fa-exchange-alt russian-icon"></i>
</div>
<div>
<h4 class="font-semibold">Замена заушников</h4>
<p class="text-gray-600 text-sm">Подберем идеально подходящие по форме и размеру</p>
</div>
</div>
<div class="russian-card p-4 flex items-start">
<div class="bg-red-100 p-2 rounded-full mr-4">
<i class="fas fa-screwdriver russian-icon"></i>
</div>
<div>
<h4 class="font-semibold">Замена винтиков</h4>
<p class="text-gray-600 text-sm">Миниатюрные винты для надежной фиксации</p>
</div>
</div>
<div class="russian-card p-4 flex items-start">
<div class="bg-red-100 p-2 rounded-full mr-4">
<i class="fas fa-plug russian-icon"></i>
</div>
<div>
<h4 class="font-semibold">Замена гарпунов</h4>
<p class="text-gray-600 text-sm">Аккуратная работа с пластмассовыми оправами</p>
</div>
</div>
</div>
<div class="mt-8 bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded-r">
<p class="text-yellow-800 font-medium flex items-start">
<i class="fas fa-exclamation-triangle mr-2 mt-1"></i>
<span>Обратите внимание: мы не производим пайку оправ.</span>
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Care Section -->
<section id="care" class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4 russian-title">Правильный уход за очками</h2>
<div class="russian-divider w-20 h-1 mx-auto rounded-full"></div>
<p class="text-gray-600 max-w-3xl mx-auto mt-4">Следуйте этим простым правилам, чтобы ваши очки служили долго и сохраняли идеальное состояние</p>
</div>
<div class="russian-card max-w-4xl mx-auto">
<div class="p-8">
<div class="space-y-8">
<!-- 1. Правильное хранение -->
<div class="flex items-start">
<div class="bg-red-100 p-3 rounded-full mr-4">
<span class="font-bold russian-icon">1</span>
</div>
<div>
<h3 class="text-xl font-semibold mb-3 russian-title">Правильное хранение</h3>
<ul class="space-y-2 text-gray-700">
<li class="flex items-start">
<i class="fas fa-check-circle russian-icon mt-1 mr-2"></i>
<span>Используйте футляр. Всегда храните очки в жестком футляре, чтобы защитить их от повреждений, царапин и пыли.</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle russian-icon mt-1 mr-2"></i>
<span>Кладите очки линзами вверх. Если очки лежат линзами вниз, они могут поцарапаться.</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle russian-icon mt-1 mr-2"></i>
<span>Не оставляйте очки в местах с высокой температурой. Например, в машине в жаркий день или рядом с отопительными приборами. Высокая температура может повредить оправу и линзы.</span>
</li>
</ul>
</div>
</div>
<!-- 2. Как надевать и снимать очки -->
<div class="flex items-start">
<div class="bg-red-100 p-3 rounded-full mr-4">
<span class="font-bold russian-icon">2</span>
</div>
<div>
<h3 class="text-xl font-semibold mb-3 russian-title">Как надевать и снимать очки</h3>
<ul class="space-y-2 text-gray-700">
<li class="flex items-start">
<i class="fas fa-check-circle russian-icon mt-1 mr-2"></i>
<span>Используйте обе руки. Надевайте и снимайте очки, держа их за дужки двумя руками. Это предотвращает деформацию оправы.</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle russian-icon mt-1 mr-2"></i>
<span>Не сдвигайте очки на лоб. Это может растянуть дучки и ослабить крепления.</span>
</li>
</ul>
</div>
</div>
<!-- 3. Очистка линз -->
<div class="flex items-start">
<div class="bg-red-100 p-3 rounded-full mr-4">
<span class="font-bold russian-icon">3</span>
</div>
<div>
<h3 class="text-xl font-semibold mb-3 russian-title">Очистка линз</h3>
<ul class="space-y-2 text-gray-700">
<li class="flex items-start">
<i class="fas fa-check-circle russian-icon mt-1 mr-2"></i>
<span>Используйте специальные салфетки и спреи. Для очистки линз применяйте мягкие салфетки из микрофибры и специальные спреи для очков.</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle russian-icon mt-1 mr-2"></i>
<span>Не используйте одежду или бумажные салфетки. Они могут оставить царапины на линзах.</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle russian-icon mt-1 mr-2"></i>
<span>Промывайте линзы водой. Если на линзах есть пыль или песок, сначала промойте их под проточной водой, чтобы избежать царапин, а затем вытрите салфеткой.</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle russian-icon mt-1 mr-2"></i>
<span>Избегайте агрессивных химикатов. Не используйте средства для стекол, ацетон или спирт — они могут повредить покрытие линз.</span>
</li>
</ul>
</div>
</div>
<!-- 4. Уход за оправой -->
<div class="flex items-start">
<div class="bg-red-100 p-3 rounded-full mr-4">
<span class="font-bold russian-icon">4</span>
</div>
<div>
<h3 class="text-xl font-semibold mb-3 russian-title">Уход за оправой</h3>
<ul class="space-y-2 text-gray-700">
<li class="flex items-start">
<i class="fas fa-check-circle russian-icon mt-1 mr-2"></i>
<span>Регулярно проверяйте винты. Если дучки стали расшатываться, подтяните винты с помощью маленькой отвертки.</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle russian-icon mt-1 mr-2"></i>
<span>Не подвергайте оправу механическим нагрузкам. Не сгибайте дучки слишком сильно и не кладите на очки тяжелые предметы.</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle russian-icon mt-1 mr-2"></i>
<span>Очищайте оправу. Протирайте оправу мягкой тканью, чтобы удалить пот и загрязнения.</span>
</li>
</ul>
</div>
</div>
<!-- 5. Защита от царапин и повреждений -->
<div class="flex items-start">
<div class="bg-red-100 p-3 rounded-full mr-4">
<span class="font-bold russian-icon">5</span>
</div>
<div>
<h3 class="text-xl font-semibold mb-3 russian-title">Защита от царапин и повреждений</h3>
<ul class="space-y-2 text-gray-700">
<li class="flex items-start">
<i class="fas fa-check-circle russian-icon mt-1 mr-2"></i>
<span>Не кладите очки линзами вниз. Это самая частая причина царапин.</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle russian-icon mt-1 mr-2"></i>
<span>Используйте защитную пленку. Если линзы не имеют защитного покрытия, можно нанести специальную пленку.</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle russian-icon mt-1 mr-2"></i>
<span>Избегайте контакта с косметикой и парфюмерией. Косметика и спиртосодержащие средства могут повредить покрытие линз.</span>
</li>
</ul>
</div>
</div>
<!-- 6. Правильное использование в разных условиях -->
<div class="flex items-start">
<div class="bg-red-100 p-3 rounded-full mr-4">
<span class="font-bold russian-icon">6</span>
</div>
<div>
<h3 class="text-xl font-semibold mb-3 russian-title">Правильное использование в разных условиях</h3>
<ul class="space-y-2 text-gray-700">
<li class="flex items-start">
<i class="fas fa-check-circle russian-icon mt-1 mr-2"></i>
<span>На пляже или у бассейна. Не оставляйте очки под прямыми солнечными лучами и избегайте контакта с соленой водой или хлоркой.</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle russian-icon mt-1 mr-2"></i>
<span>В дождь или снег. После попадания под дождь или снег протрите очки мягкой тканью, чтобы удалить влагу.</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle russian-icon mt-1 mr-2"></i>
<span>За рулем. Используйте очки с антибликовым покрытием, чтобы избежать усталости глаз.</span>
</li>
</ul>
</div>
</div>
<!-- 7. Регулярное обслуживание -->
<div class="flex items-start">
<div class="bg-red-100 p-3 rounded-full mr-4">
<span class="font-bold russian-icon">7</span>
</div>
<div>
<h3 class="text-xl font-semibold mb-3 russian-title">Регулярное обслуживание</h3>
<ul class="space-y-2 text-gray-700">
<li class="flex items-start">
<i class="fas fa-check-circle russian-icon mt-1 mr-2"></i>
<span>Проверяйте очки у специалиста. Раз в полгода посещайте оптику, чтобы проверить состояние оправы и линз.</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle russian-icon mt-1 mr-2"></i>
<span>Меняйте линзы при необходимости. Если линзы сильно поцарапаны или повреждены, замените их, чтобы избежать дискомфорта и усталости глаз.</span>
</li>
</ul>
</div>
</div>
<!-- 8. Чего избегать -->
<div class="flex items-start">
<div class="bg-red-100 p-3 rounded-full mr-4">
<span class="font-bold russian-icon">8</span>
</div>
<div>
<h3 class="text-xl font-semibold mb-3 russian-title">Чего избегать</h3>
<ul class="space-y-2 text-gray-700">
<li class="flex items-start">
<i class="fas fa-check-circle russian-icon mt-1 mr-2"></i>
<span>Не носите очки на голове. Это может растянуть дучки и деформировать оправу.</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle russian-icon mt-1 mr-2"></i>
<span>Не используйте очки без необходимости. Например, не надевайте очки для зрения, если вы смотрите вблизи (если это не предписано врачом).</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle russian-icon mt-1 mr-2"></i>
<span>Не оставляйте очки без присмотра. Особенно в местах, где они могут упасть или быть повреждены.</span>
</li>
</ul>
</div>
</div>
<!-- Заключение -->
<div class="bg-red-50 p-6 rounded-lg mt-8 border-l-4 border-red-800">
<h3 class="text-xl font-semibold mb-3 russian-title">Заключение</h3>
<p class="text-gray-700">Соблюдение этих простых правил поможет вам сохранить очки в идеальном состоянии на долгие годы. Помните, что очки — это не только аксессуар, но и важный инструмент для защиты вашего зрения. Ухаживайте за ними правильно, и они прослужат вам верой и правдой!</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Manufacturing Section -->
<section id="manufacturing" class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4 russian-title">Изготовление очков</h2>
<div class="russian-divider w-20 h-1 mx-auto rounded-full"></div>
</div>
<div class="text-center mb-12 max-w-3xl mx-auto">
<p class="text-gray-600 text-lg">Мы изготавливаем очки по вашему рецепту с учетом всех индивидуальных особенностей.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Glasses Type 1 -->
<div class="russian-card">
<div class="h-48 bg-red-100 flex items-center justify-center">
<i class="fas fa-eye russian-icon text-6xl"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-semibold mb-4 text-center russian-title">Диоптрийные очки</h3>
<p class="text-gray-600 mb-4 text-center">Коррекция зрения с учетом ваших индивидуальных параметров</p>
<ul class="space-y-2 text-sm text-gray-600">
<li class="flex items-start">
<i class="fas fa-check-circle russian-icon mt-1 mr-2"></i>
<span>Точное соответствие рецепту</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle russian-icon mt-1 mr-2"></i>
<span>Различные типы линз</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle russian-icon mt-1 mr-2"></i>
<span>Подбор оптимальной оправы</span>
</li>
</ul>
</div>
</div>
<!-- Glasses Type 2 -->
<div class="russian-card">
<div class="h-48 bg-red-100 flex items-center justify-center">
<i class="fas fa-car russian-icon text-6xl"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-semibold mb-4 text-center russian-title">Автомобильные очки</h3>
<p class="text-gray-600 mb-4 text-center">Специальные линзы для комфортного вождения</p>
<ul class="space-y-2 text-sm text-gray-600">
<li class="flex items-start">
<i class="fas fa-check-circle russian-icon mt-1 mr-2"></i>
<span>Антибликовое покрытие</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle russian-icon mt-1 mr-2"></i>
<span>Поляризационные фильтры</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle russian-icon mt-1 mr-2"></i>
<span>Улучшенная контрастность</span>
</li>
</ul>
</div>
</div>
<!-- Glasses Type 3 -->
<div class="russian-card">
<div class="h-48 bg-red-100 flex items-center justify-center">
<i class="fas fa-sun russian-icon text-6xl"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-semibold mb-4 text-center russian-title">Солнцезащитные очки</h3>
<p class="text-gray-600 mb-4 text-center">Стиль и защита от ультрафиолета</p>
<ul class="space-y-2 text-sm text-gray-600">
<li class="flex items-start">
<i class="fas fa-check-circle russian-icon mt-1 mr-2"></i>
<span>100% защита от UV-лучей</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle russian-icon mt-1 mr-2"></i>
<span>Модные оправы</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle russian-icon mt-1 mr-2"></i>
<span>Различные степени затемнения</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4 russian-title">О нашей мастерской</h2>
<div class="russian-divider w-20 h-1 mx-auto rounded-full"></div>
</div>
<div class="flex flex-col lg:flex-row items-center">
<div class="lg:w-1/2 mb-8 lg:mb-0 lg:pr-8">
<img src="https://images.unsplash.com/photo-1581093450021-559792f1d1b3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
alt="Мастерская"
class="rounded-2xl shadow-xl w-full russian-border">
</div>
<div class="lg:w-1/2">
<h3 class="text-2xl font-semibold mb-6 russian-title">Почему выбирают нас?</h3>
<p class="text-gray-700 mb-6">Наша мастерская уже более 20 лет предоставляет услуги по ремонту и изготовлению очков. Мы гордимся своим вниманием к каждому клиенту.</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="russian-card p-4 flex items-start">
<div class="bg-red-100 p-3 rounded-full mr-4">
<i class="fas fa-clock russian-icon"></i>
</div>
<div>
<h4 class="font-semibold">Быстро</h4>
<p class="text-gray-600 text-sm">Большинство ремонтов выполняем в течение 15-30 минут</p>
</div>
</div>
<div class="russian-card p-4 flex items-start">
<div class="bg-red-100 p-3 rounded-full mr-4">
<i class="fas fa-award russian-icon"></i>
</div>
<div>
<h4 class="font-semibold">Качественно</h4>
<p class="text-gray-600 text-sm">Используем только проверенные материалы и оборудование</p>
</div>
</div>
<div class="russian-card p-4 flex items-start">
<div class="bg-red-100 p-3 rounded-full mr-4">
<i class="fas fa-wallet russian-icon"></i>
</div>
<div>
<h4 class="font-semibold">Доступно</h4>
<p class="text-gray-600 text-sm">Демократичные цены при высоком качестве работы</p>
</div>
</div>
<div class="russian-card p-4 flex items-start">
<div class="bg-red-100 p-3 rounded-full mr-4">
<i class="fas fa-shield-alt russian-icon"></i>
</div>
<div>
<h4 class="font-semibold">Гарантия</h4>
<p class="text-gray-600 text-sm">Предоставляем гарантию на все виды работ</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contacts Section -->
<section id="contacts" class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4 russian-title">Контакты</h2>
<div class="russian-divider w-20 h-1 mx-auto rounded-full"></div>
</div>
<div class="flex flex-col lg:flex-row gap-8">
<div class="lg:w-1/2">
<div class="russian-card p-8 h-full">
<h3 class="text-xl font-semibold mb-6 russian-title">Свяжитесь с нами</h3>
<div class="space-y-6">
<div class="russian-contact-card p-4 rounded-lg flex items-start">
<div class="bg-red-100 p-3 rounded-full mr-4">
<i class="fas fa-map-marker-alt russian-icon"></i>
</div>
<div>
<h4 class="font-semibold">Адрес</h4>
<p class="text-gray-600">Москва, ул.Берзарина д.34 стр.12</p>
</div>
</div>
<div class="russian-contact-card p-4 rounded-lg flex items-start">
<div class="bg-red-100 p-3 rounded-full mr-4">
<i class="fas fa-phone russian-icon"></i>
</div>
<div>
<h4 class="font-semibold">Телефон</h4>
<p class="text-gray-600">+7 (926) 323-68-86</p>
<a href="tel:+79263236886" class="text-red-800 text-sm mt-1 inline-block hover:underline">Позвонить</a>
</div>
</div>
<div class="russian-contact-card p-4 rounded-lg flex items-start">
<div class="bg-red-100 p-3 rounded-full mr-4">
<i class="fas fa-envelope russian-icon"></i>
</div>
<div>
<h4 class="font-semibold">Email</h4>
<p class="text-gray-600">[email protected]</p>
<a href="mailto:[email protected]" class="text-red-800 text-sm mt-1 inline-block hover:underline">Написать</a>
</div>
</div>
<div class="russian-contact-card p-4 rounded-lg">
<div class="flex items-start mb-4">
<div class="bg-red-100 p-3 rounded-full mr-4">
<i class="fas fa-clock russian-icon"></i>
</div>
<div>
<h4 class="font-semibold">Время работы</h4>
</div>
</div>
<div class="space-y-3 pl-16">
<div class="relative pl-6">
<div class="absolute left-0 top-2 w-3 h-3 bg-red-800 rounded-full"></div>
<h5 class="font-medium">Понедельник-Четверг</h5>
<p class="text-gray-600 text-sm">с 8:00 до 16:00</p>
</div>
<div class="relative pl-6">
<div class="absolute left-0 top-2 w-3 h-3 bg-red-800 rounded-full"></div>
<h5 class="font-medium">Воскресенье</h5>
<p class="text-gray-600 text-sm">с 9:00 до 14:00</p>
</div>
<div class="relative pl-6">
<div class="absolute left-0 top-2 w-3 h-3 bg-red-800 rounded-full"></div>
<h5 class="font-medium">Пятница-Суббота</h5>
<p class="text-gray-600 text-sm">Выходной</p>
</div>
</div>
</div>
<div class="mt-6 flex space-x-4">
<a href="#" class="bg-blue-600 text-white p-3 rounded-full hover:bg-blue-700 transition transform hover:scale-110">
<i class="fab fa-vk"></i>
</a>
<a href="#" class="bg-blue-400 text-white p-3 rounded-full hover:bg-blue-500 transition transform hover:scale-110">
<i class="fab fa-telegram"></i>
</a>
<a href="#" class="bg-pink-600 text-white p-3 rounded-full hover:bg-pink-700 transition transform hover:scale-110">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="bg-green-600 text-white p-3 rounded-full hover:bg-green-700 transition transform hover:scale-110">
<i class="fab fa-whatsapp"></i>
</a>
</div>
</div>
</div>
</div>
<div class="lg:w-1/2">
<div class="russian-card p-8 h-full">
<h3 class="text-xl font-semibold mb-6 russian-title">Как нас найти</h3>
<div class="h-96 rounded-xl overflow-hidden shadow-lg">
<!-- Яндекс Карта -->
<iframe src="https://yandex.ru/map-widget/v1/?um=constructor%3Ac8fcb6c1bec1d088da7abd2d9ca82929556153fe8e67aea432ef025fb36f1714&amp;width=100%25&amp;height=400&amp;lang=ru_RU&amp;scroll=true" frameborder="0" allowfullscreen="true" style="width: 100%; height: 100%;"></iframe>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="russian-footer py-8">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="flex items-center space-x-3 mb-4 md:mb-0">
<div class="bg-white p-2 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-red-800" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4V20M8 8L12 4L16 8M8 16L12 20L16 16M3 12H21" />
</svg>
</div>
<h1 class="text-xl font-bold tracking-tight text-white">ОПТИКА "ОПТОН"</h1>
</div>
<div class="text-white text-sm text-center md:text-right">
<p>© 2023 Оптика "ОПТОН". Все права защищены.</p>
<p class="mt-1">Москва, ул.Берзарина д.34 стр.12</p>
</div>
</div>
</div>
</footer>
<script>
// Mobile menu toggle
document.getElementById('menu-btn').addEventListener('click', function() {
document.getElementById('mobile-menu').classList.toggle('hidden');
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
// Close mobile menu if open
if (!document.getElementById('mobile-menu').classList.contains('hidden')) {
document.getElementById('mobile-menu').classList.add('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=Greats/oppppp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>