| <!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> |
| @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Montserrat', sans-serif; |
| scroll-behavior: smooth; |
| } |
| |
| .hero-gradient { |
| background: linear-gradient(135deg, #6b73ff 0%, #000dff 100%); |
| } |
| |
| .price-card:hover { |
| transform: translateY(-10px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| |
| .service-icon { |
| transition: all 0.3s ease; |
| } |
| |
| .service-card:hover .service-icon { |
| transform: scale(1.1); |
| color: #4f46e5; |
| } |
| |
| .logo-text { |
| text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50"> |
| |
| <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"> |
| <div class="flex items-center"> |
| <div class="w-12 h-12 rounded-full bg-blue-600 flex items-center justify-center text-white font-bold text-xl mr-3"> |
| МО |
| </div> |
| <h1 class="text-xl font-bold text-gray-800 logo-text">Мастер Оптик <span class="text-blue-600">Дмитрий</span></h1> |
| </div> |
| <nav class="hidden md:flex space-x-8"> |
| <a href="#services" class="text-gray-600 hover:text-blue-600 font-medium transition">Услуги</a> |
| <a href="#prices" class="text-gray-600 hover:text-blue-600 font-medium transition">Цены</a> |
| <a href="#about" class="text-gray-600 hover:text-blue-600 font-medium transition">О нас</a> |
| <a href="#reviews" class="text-gray-600 hover:text-blue-600 font-medium transition">Отзывы</a> |
| <a href="#contacts" class="text-gray-600 hover:text-blue-600 font-medium transition">Контакты</a> |
| </nav> |
| <div class="flex items-center space-x-4"> |
| <a href="tel:+79991234567" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-full font-medium transition hidden md:block"> |
| <i class="fas fa-phone-alt mr-2"></i>+7 (999) 123-45-67 |
| </a> |
| <button class="md:hidden text-gray-600" id="menu-toggle"> |
| <i class="fas fa-bars text-2xl"></i> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="md:hidden hidden bg-white w-full py-4 px-4 shadow-md" id="mobile-menu"> |
| <div class="flex flex-col space-y-4"> |
| <a href="#services" class="text-gray-600 hover:text-blue-600 font-medium transition">Услуги</a> |
| <a href="#prices" class="text-gray-600 hover:text-blue-600 font-medium transition">Цены</a> |
| <a href="#about" class="text-gray-600 hover:text-blue-600 font-medium transition">О нас</a> |
| <a href="#reviews" class="text-gray-600 hover:text-blue-600 font-medium transition">Отзывы</a> |
| <a href="#contacts" class="text-gray-600 hover:text-blue-600 font-medium transition">Контакты</a> |
| <a href="tel:+79991234567" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-full font-medium transition text-center"> |
| <i class="fas fa-phone-alt mr-2"></i>Позвонить |
| </a> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section class="hero-gradient text-white py-20"> |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-10 md:mb-0"> |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Профессиональное изготовление и ремонт очков</h1> |
| <p class="text-xl mb-8">Качественные услуги по подбору, изготовлению и ремонту очков любой сложности от опытного мастера с 15-летним стажем.</p> |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
| <a href="#contacts" class="bg-white text-blue-600 hover:bg-gray-100 px-6 py-3 rounded-full font-bold text-center transition">Записаться на прием</a> |
| <a href="#services" class="border-2 border-white text-white hover:bg-white hover:text-blue-600 px-6 py-3 rounded-full font-bold text-center transition">Наши услуги</a> |
| </div> |
| </div> |
| <div class="md:w-1/2 flex justify-center"> |
| <img src="https://images.unsplash.com/photo-1556306535-38febf6782e7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Очки" class="rounded-lg shadow-2xl max-w-full h-auto" style="max-height: 400px;"> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="services" class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-4 text-gray-800">Наши услуги</h2> |
| <p class="text-xl text-center text-gray-600 mb-12 max-w-3xl mx-auto">Мы предлагаем полный спектр услуг по изготовлению, ремонту и обслуживанию очков</p> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="service-card bg-gray-50 rounded-xl p-6 hover:shadow-lg transition cursor-pointer"> |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4"> |
| <i class="fas fa-glasses service-icon text-3xl text-blue-600"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3 text-gray-800">Изготовление очков на заказ</h3> |
| <p class="text-gray-600">Профессиональное изготовление очков по вашим параметрам с учетом всех особенностей зрения и предпочтений.</p> |
| </div> |
| |
| |
| <div class="service-card bg-gray-50 rounded-xl p-6 hover:shadow-lg transition cursor-pointer"> |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4"> |
| <i class="fas fa-eye service-icon text-3xl text-blue-600"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3 text-gray-800">Вставка линз в оправу</h3> |
| <p class="text-gray-600">Аккуратная и точная вставка любых линз (минеральных, полимерных, фотохромных) в вашу оправу.</p> |
| </div> |
| |
| |
| <div class="service-card bg-gray-50 rounded-xl p-6 hover:shadow-lg transition cursor-pointer"> |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4"> |
| <i class="fas fa-tools service-icon text-3xl text-blue-600"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3 text-gray-800">Ремонт очков</h3> |
| <p class="text-gray-600">Качественный ремонт: замена носоупоров, дужек, шарниров, пайка металлических оправ, выпрямление оправ.</p> |
| </div> |
| |
| |
| <div class="service-card bg-gray-50 rounded-xl p-6 hover:shadow-lg transition cursor-pointer"> |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4"> |
| <i class="fas fa-ruler-combined service-icon text-3xl text-blue-600"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3 text-gray-800">Подгонка оправы</h3> |
| <p class="text-gray-600">Профессиональная подгонка оправы по форме лица для максимального комфорта при ношении.</p> |
| </div> |
| |
| |
| <div class="service-card bg-gray-50 rounded-xl p-6 hover:shadow-lg transition cursor-pointer"> |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4"> |
| <i class="fas fa-sun service-icon text-3xl text-blue-600"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3 text-gray-800">Изготовление солнцезащитных очков</h3> |
| <p class="text-gray-600">Изготовление качественных солнцезащитных очков с диоптриями и без, с различными типами затемнения.</p> |
| </div> |
| |
| |
| <div class="service-card bg-gray-50 rounded-xl p-6 hover:shadow-lg transition cursor-pointer"> |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4"> |
| <i class="fas fa-prescription-bottle-alt service-icon text-3xl text-blue-600"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3 text-gray-800">Чистка и уход</h3> |
| <p class="text-gray-600">Профессиональная чистка очков, полировка линз, удаление царапин (где возможно), консультация по уходу.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="prices" class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-4 text-gray-800">Наши цены</h2> |
| <p class="text-xl text-center text-gray-600 mb-12 max-w-3xl mx-auto">Доступные цены при гарантированном качестве работы</p> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| |
| <div class="price-card bg-white rounded-xl p-8 shadow-md hover:shadow-xl transition cursor-pointer border-t-4 border-blue-500"> |
| <h3 class="text-xl font-bold mb-4 text-gray-800">Вставка линз</h3> |
| <div class="mb-6"> |
| <span class="text-4xl font-bold text-blue-600">от 500₽</span> |
| </div> |
| <ul class="space-y-3 mb-8"> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-green-500 mr-2"></i> |
| <span>Простые линзы</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-green-500 mr-2"></i> |
| <span>Прогрессивные линзы</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-green-500 mr-2"></i> |
| <span>Фотохромные линзы</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-green-500 mr-2"></i> |
| <span>Поляризационные линзы</span> |
| </li> |
| </ul> |
| <a href="#contacts" class="block w-full bg-blue-600 hover:bg-blue-700 text-white text-center py-3 rounded-lg font-medium transition">Заказать</a> |
| </div> |
| |
| |
| <div class="price-card bg-white rounded-xl p-8 shadow-md hover:shadow-xl transition cursor-pointer border-t-4 border-purple-500"> |
| <h3 class="text-xl font-bold mb-4 text-gray-800">Ремонт очков</h3> |
| <div class="mb-6"> |
| <span class="text-4xl font-bold text-purple-600">от 300₽</span> |
| </div> |
| <ul class="space-y-3 mb-8"> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-green-500 mr-2"></i> |
| <span>Замена носоупоров</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-green-500 mr-2"></i> |
| <span>Ремонт дужек</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-green-500 mr-2"></i> |
| <span>Замена шарниров</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-green-500 mr-2"></i> |
| <span>Пайка металлических оправ</span> |
| </li> |
| </ul> |
| <a href="#contacts" class="block w-full bg-purple-600 hover:bg-purple-700 text-white text-center py-3 rounded-lg font-medium transition">Заказать</a> |
| </div> |
| |
| |
| <div class="price-card bg-white rounded-xl p-8 shadow-md hover:shadow-xl transition cursor-pointer border-t-4 border-green-500"> |
| <h3 class="text-xl font-bold mb-4 text-gray-800">Полный комплект</h3> |
| <div class="mb-6"> |
| <span class="text-4xl font-bold text-green-600">от 3000₽</span> |
| </div> |
| <ul class="space-y-3 mb-8"> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-green-500 mr-2"></i> |
| <span>Оправы на выбор</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-green-500 mr-2"></i> |
| <span>Линзы с диоптриями</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-green-500 mr-2"></i> |
| <span>Антибликовое покрытие</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-green-500 mr-2"></i> |
| <span>Гарантия 1 год</span> |
| </li> |
| </ul> |
| <a href="#contacts" class="block w-full bg-green-600 hover:bg-green-700 text-white text-center py-3 rounded-lg font-medium transition">Заказать</a> |
| </div> |
| </div> |
| |
| <div class="mt-12 bg-white rounded-xl p-8 shadow-md"> |
| <h3 class="text-xl font-bold mb-6 text-gray-800">Дополнительные услуги</h3> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> |
| <div class="border-l-4 border-blue-500 pl-4"> |
| <h4 class="font-medium text-gray-800">Полировка линз</h4> |
| <p class="text-gray-600">от 400₽</p> |
| </div> |
| <div class="border-l-4 border-blue-500 pl-4"> |
| <h4 class="font-medium text-gray-800">Удаление царапин</h4> |
| <p class="text-gray-600">от 600₽</p> |
| </div> |
| <div class="border-l-4 border-blue-500 pl-4"> |
| <h4 class="font-medium text-gray-800">Замена винтов</h4> |
| <p class="text-gray-600">от 150₽</p> |
| </div> |
| <div class="border-l-4 border-blue-500 pl-4"> |
| <h4 class="font-medium text-gray-800">Подгонка оправы</h4> |
| <p class="text-gray-600">300₽</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="about" class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> |
| <h2 class="text-3xl font-bold mb-6 text-gray-800">Мастер Оптик Дмитрий</h2> |
| <p class="text-gray-600 mb-4">С 2008 года я профессионально занимаюсь изготовлением и ремонтом очков, помогая людям видеть мир четко и комфортно.</p> |
| <p class="text-gray-600 mb-4">За годы работы я собрал команду настоящих профессионалов и оснастил мастерскую современным оборудованием, что позволяет нам выполнять работы любой сложности с гарантией качества.</p> |
| <p class="text-gray-600 mb-6">Мы ценим каждого клиента и подходим индивидуально к каждому заказу, ведь очки — это не только коррекция зрения, но и важный аксессуар.</p> |
| <div class="flex flex-wrap gap-4"> |
| <div class="bg-blue-100 text-blue-800 px-4 py-2 rounded-full font-medium"> |
| <i class="fas fa-award mr-2"></i>15 лет опыта |
| </div> |
| <div class="bg-blue-100 text-blue-800 px-4 py-2 rounded-full font-medium"> |
| <i class="fas fa-users mr-2"></i>5000+ клиентов |
| </div> |
| <div class="bg-blue-100 text-blue-800 px-4 py-2 rounded-full font-medium"> |
| <i class="fas fa-medal mr-2"></i>Гарантия качества |
| </div> |
| </div> |
| </div> |
| <div class="md:w-1/2 flex justify-center"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=761&q=80" alt="Мастер Оптик Дмитрий" class="rounded-lg shadow-xl w-full max-w-md"> |
| <div class="absolute -bottom-5 -right-5 bg-blue-600 text-white p-4 rounded-lg shadow-lg"> |
| <div class="text-2xl font-bold">15+</div> |
| <div class="text-sm">лет в оптике</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="reviews" class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-4 text-gray-800">Отзывы наших клиентов</h2> |
| <p class="text-xl text-center text-gray-600 mb-12 max-w-3xl mx-auto">Что говорят люди о нашей работе</p> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="bg-white p-6 rounded-xl shadow-md"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold mr-4">АН</div> |
| <div> |
| <h4 class="font-bold text-gray-800">Анна Николаева</h4> |
| <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> |
| </div> |
| <p class="text-gray-600">"Делала очки с прогрессивными линзами. Мастер очень внимательно отнесся к моим пожеланиям, все объяснил и подобрал оптимальный вариант. Очки сидят идеально, зрение четкое на всех расстояниях. Спасибо!"</p> |
| </div> |
| |
| |
| <div class="bg-white p-6 rounded-xl shadow-md"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold mr-4">ИП</div> |
| <div> |
| <h4 class="font-bold text-gray-800">Игорь Петров</h4> |
| <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> |
| </div> |
| <p class="text-gray-600">"Сломал дужку у дорогих очков, думал, что придется покупать новые. Но Дмитрий смог аккуратно спаять и восстановить оправу. Работа выполнена безупречно, даже не видно, что был ремонт. Рекомендую!"</p> |
| </div> |
| |
| |
| <div class="bg-white p-6 rounded-xl shadow-md"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold mr-4">ЕС</div> |
| <div> |
| <h4 class="font-bold text-gray-800">Елена Смирнова</h4> |
| <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> |
| </div> |
| <p class="text-gray-600">"Заказывала солнцезащитные очки с диоптриями. Очень довольна результатом! Линзы качественные, оправа удобная. Мастер дал подробные рекомендации по уходу. Буду обращаться еще и рекомендовать знакомым."</p> |
| </div> |
| </div> |
| |
| <div class="mt-12 text-center"> |
| <a href="#contacts" class="inline-block bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-full font-bold transition">Оставить отзыв</a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contacts" class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-4 text-gray-800">Как нас найти</h2> |
| <p class="text-xl text-center text-gray-600 mb-12 max-w-3xl mx-auto">Мы всегда рады помочь вам с выбором и ремонтом очков</p> |
| |
| <div class="flex flex-col lg:flex-row gap-12"> |
| <div class="lg:w-1/2"> |
| <div class="bg-gray-50 p-8 rounded-xl shadow-md"> |
| <h3 class="text-xl font-bold mb-6 text-gray-800">Контактная информация</h3> |
| |
| <div class="space-y-6"> |
| <div class="flex items-start"> |
| <div class="bg-blue-100 text-blue-600 p-3 rounded-full mr-4"> |
| <i class="fas fa-map-marker-alt"></i> |
| </div> |
| <div> |
| <h4 class="font-medium text-gray-800">Адрес</h4> |
| <p class="text-gray-600">г. Москва, ул. Оптическая, д. 15, офис 42</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="bg-blue-100 text-blue-600 p-3 rounded-full mr-4"> |
| <i class="fas fa-phone-alt"></i> |
| </div> |
| <div> |
| <h4 class="font-medium text-gray-800">Телефон</h4> |
| <p class="text-gray-600">+7 (999) 123-45-67</p> |
| <p class="text-gray-600">+7 (495) 765-43-21</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="bg-blue-100 text-blue-600 p-3 rounded-full mr-4"> |
| <i class="fas fa-envelope"></i> |
| </div> |
| <div> |
| <h4 class="font-medium text-gray-800">Email</h4> |
| <p class="text-gray-600">optik-dmitriy@example.com</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="bg-blue-100 text-blue-600 p-3 rounded-full mr-4"> |
| <i class="fas fa-clock"></i> |
| </div> |
| <div> |
| <h4 class="font-medium text-gray-800">Часы работы</h4> |
| <p class="text-gray-600">Пн-Пт: 10:00 - 20:00</p> |
| <p class="text-gray-600">Сб: 11:00 - 18:00</p> |
| <p class="text-gray-600">Вс: выходной</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-8"> |
| <h4 class="font-medium text-gray-800 mb-4">Мы в соцсетях</h4> |
| <div class="flex space-x-4"> |
| <a href="#" class="bg-blue-100 text-blue-600 hover:bg-blue-200 w-10 h-10 rounded-full flex items-center justify-center transition"> |
| <i class="fab fa-vk"></i> |
| </a> |
| <a href="#" class="bg-blue-100 text-blue-600 hover:bg-blue-200 w-10 h-10 rounded-full flex items-center justify-center transition"> |
| <i class="fab fa-telegram"></i> |
| </a> |
| <a href="#" class="bg-blue-100 text-blue-600 hover:bg-blue-200 w-10 h-10 rounded-full flex items-center justify-center transition"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| <a href="#" class="bg-blue-100 text-blue-600 hover:bg-blue-200 w-10 h-10 rounded-full flex items-center justify-center transition"> |
| <i class="fab fa-whatsapp"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="lg:w-1/2"> |
| <div class="bg-gray-50 p-8 rounded-xl shadow-md h-full"> |
| <h3 class="text-xl font-bold mb-6 text-gray-800">Записаться на прием</h3> |
| <form class="space-y-4"> |
| <div> |
| <label for="name" class="block text-gray-700 font-medium mb-2">Ваше имя</label> |
| <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Иван Иванов"> |
| </div> |
| <div> |
| <label for="phone" class="block text-gray-700 font-medium mb-2">Телефон</label> |
| <input type="tel" id="phone" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="+7 (999) 123-45-67"> |
| </div> |
| <div> |
| <label for="service" class="block text-gray-700 font-medium mb-2">Услуга</label> |
| <select id="service" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> |
| <option value="">Выберите услугу</option> |
| <option value="insert">Вставка линз</option> |
| <option value="repair">Ремонт очков</option> |
| <option value="new">Новые очки</option> |
| <option value="other">Другое</option> |
| </select> |
| </div> |
| <div> |
| <label for="date" class="block text-gray-700 font-medium |
| </html> |
