Spaces:

ANTIMOLL
/

opvision

Running

App Files Files Community

ANTIMOLL commited on Apr 20, 2025

Commit

878c3fd

verified ·

1 Parent(s): 823b9f1

Add 2 files

Browse files

Files changed (2) hide show

index.html +289 -129
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -3,38 +3,134 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>OptiVision - Ваше зрение в надёжных руках</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>
         .hero-gradient {
-            background: linear-gradient(135deg, rgba(56, 182, 255, 0.8) 0%, rgba(124, 81, 255, 0.8) 100%);
         }
-        .nav-link:hover {
-            color: #4f46e5;
-            transform: translateY(-2px);
         }
         .gallery-item:hover {
-            transform: scale(1.03);
-            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
         }
         .article-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
         }
         .transition-all {
             transition: all 0.3s ease;
         }
     </style>
 </head>
 <body class="font-sans bg-gray-50">
     <!-- Header -->
-    <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 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold text-xl mr-3">
-                    OV
-                </div>
                 <h1 class="text-2xl font-bold text-gray-800">Opti<span class="text-indigo-600">Vision</span></h1>
             </div>
@@ -49,7 +145,7 @@
                 <button class="md:hidden text-gray-700">
                     <i class="fas fa-bars text-xl"></i>
                 </button>
-                <button class="hidden md:block bg-indigo-600 text-white px-4 py-2 rounded-full hover:bg-indigo-700 transition-all">
                     Записаться
                 </button>
             </div>
@@ -57,24 +153,25 @@
     </header>
     <!-- Hero Section -->
-    <section id="home" 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">
-                <h2 class="text-4xl md:text-5xl font-bold mb-6">Современная оптика для вашего комфорта</h2>
                 <p class="text-xl mb-8 opacity-90">Индивидуальный подбор очков и линз с использованием новейших технологий и материалов.</p>
                 <div class="flex space-x-4">
-                    <button class="bg-white text-indigo-600 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition-all">
                         Подобрать очки
                     </button>
-                    <button class="border-2 border-white text-white px-6 py-3 rounded-full font-medium hover:bg-white hover:text-indigo-600 transition-all">
                         Узнать больше
                     </button>
                 </div>
             </div>
-            <div class="md:w-1/2 flex justify-center">
                 <img src="https://images.unsplash.com/photo-1505576399279-565b52d4ac71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
                      alt="Стильные очки"
-                     class="rounded-lg shadow-2xl max-w-md w-full">
             </div>
         </div>
     </section>
@@ -82,105 +179,121 @@
     <!-- Services -->
     <section class="py-16 bg-white">
         <div class="container mx-auto px-4">
-            <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Наши услуги</h2>
             <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-                <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition-all">
-                    <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-6">
                         <i class="fas fa-glasses text-indigo-600 text-2xl"></i>
                     </div>
-                    <h3 class="text-xl font-bold mb-3 text-gray-800">Подбор очков</h3>
-                    <p class="text-gray-600">Профессиональный подбор очков с учётом вашего стиля, формы лица и медицинских показаний.</p>
                 </div>
-                <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition-all">
-                    <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-6">
                         <i class="fas fa-eye text-indigo-600 text-2xl"></i>
                     </div>
-                    <h3 class="text-xl font-bold mb-3 text-gray-800">Диагностика зрения</h3>
-                    <p class="text-gray-600">Точная диагностика зрения с использованием современного оборудования.</p>
                 </div>
-                <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition-all">
-                    <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-6">
                         <i class="fas fa-sun text-indigo-600 text-2xl"></i>
                     </div>
-                    <h3 class="text-xl font-bold mb-3 text-gray-800">Солнцезащитные очки</h3>
-                    <p class="text-gray-600">Широкий выбор солнцезащитных очков от ведущих мировых брендов.</p>
                 </div>
             </div>
         </div>
     </section>
     <!-- Gallery Section -->
-    <section id="gallery" class="py-16 bg-gray-50">
-        <div class="container mx-auto px-4">
-            <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Галерея</h2>
             <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-                <div class="gallery-item overflow-hidden rounded-xl bg-white shadow-md transition-all">
-                    <img src="https://images.unsplash.com/photo-1556306535-0f09a537f0a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
-                         alt="Очки 1"
-                         class="w-full h-64 object-cover">
                     <div class="p-4">
                         <h3 class="font-bold text-lg mb-2">Классическая коллекция</h3>
                         <p class="text-gray-600">Традиционные формы с современными материалами</p>
                     </div>
                 </div>
-                <div class="gallery-item overflow-hidden rounded-xl bg-white shadow-md transition-all">
-                    <img src="https://images.unsplash.com/photo-1559599101-f09722fb4948?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
-                         alt="Очки 2"
-                         class="w-full h-64 object-cover">
                     <div class="p-4">
                         <h3 class="font-bold text-lg mb-2">Спортивные модели</h3>
                         <p class="text-gray-600">Лёгкие и прочные очки для активного образа жизни</p>
                     </div>
                 </div>
-                <div class="gallery-item overflow-hidden rounded-xl bg-white shadow-md transition-all">
-                    <img src="https://images.unsplash.com/photo-1591073113125-e46713c829bc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
-                         alt="Очки 3"
-                         class="w-full h-64 object-cover">
                     <div class="p-4">
                         <h3 class="font-bold text-lg mb-2">Премиум сегмент</h3>
                         <p class="text-gray-600">Эксклюзивные модели ручной работы</p>
-                    </div>
-                </div>
-                <div class="gallery-item overflow-hidden rounded-xl bg-white shadow-md transition-all">
-                    <img src="https://images.unsplash.com/photo-1522312346370-d643d828b925?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
-                         alt="Очки 4"
-                         class="w-full h-64 object-cover">
-                    <div class="p-4">
-                        <h3 class="font-bold text-lg mb-2">Детские коллекции</h3>
-                        <p class="text-gray-600">Яркие и прочные модели для детей</p>
-                    </div>
-                </div>
-                <div class="gallery-item overflow-hidden rounded-xl bg-white shadow-md transition-all">
-                    <img src="https://images.unsplash.com/photo-1572635196237-14b3f281503f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
-                         alt="Очки 5"
-                         class="w-full h-64 object-cover">
-                    <div class="p-4">
-                        <h3 class="font-bold text-lg mb-2">Современные тренды</h3>
-                        <p class="text-gray-600">Актуальные модели этого с��зона</p>
-                    </div>
-                </div>
-                <div class="gallery-item overflow-hidden rounded-xl bg-white shadow-md transition-all">
-                    <img src="https://images.unsplash.com/photo-1556306535-38febf678080?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
-                         alt="Очки 6"
-                         class="w-full h-64 object-cover">
-                    <div class="p-4">
-                        <h3 class="font-bold text-lg mb-2">Виниловые оправы</h3>
-                        <p class="text-gray-600">Гибкие и удобные модели для повседневной носки</p>
                     </div>
                 </div>
             </div>
             <div class="text-center mt-10">
-                <button class="bg-indigo-600 text-white px-6 py-3 rounded-full font-medium hover:bg-indigo-700 transition-all">
                     Посмотреть всю коллекцию
                 </button>
             </div>
@@ -190,60 +303,78 @@
     <!-- Articles Section -->
     <section id="articles" class="py-16 bg-white">
         <div class="container mx-auto px-4">
-            <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Полезные статьи</h2>
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-                <div class="article-card bg-gray-50 rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-all">
-                    <img src="https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
-                         alt="Статья 1"
-                         class="w-full h-48 object-cover">
                     <div class="p-6">
                         <div class="flex items-center text-sm text-gray-500 mb-3">
-                            <span>15 июня 2023</span>
                             <span class="mx-2">•</span>
-                            <span>5 мин чтения</span>
                         </div>
                         <h3 class="text-xl font-bold mb-3 text-gray-800">Как правильно выбрать очки по форме лица</h3>
                         <p class="text-gray-600 mb-4">Полное руководство по подбору оправы, которая подчеркнёт ваши лучшие черты и скроет недостатки.</p>
-                        <a href="#" class="text-indigo-600 font-medium hover:text-indigo-800 transition-all">Читать далее →</a>
                     </div>
                 </div>
-                <div class="article-card bg-gray-50 rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-all">
-                    <img src="https://images.unsplash.com/photo-1508514177221-188e1eaf0883?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
-                         alt="Статья 2"
-                         class="w-full h-48 object-cover">
                     <div class="p-6">
                         <div class="flex items-center text-sm text-gray-500 mb-3">
-                            <span>2 июня 2023</span>
                             <span class="mx-2">•</span>
-                            <span>7 мин чтения</span>
                         </div>
                         <h3 class="text-xl font-bold mb-3 text-gray-800">Линзы нового поколения: что предлагает рынок</h3>
                         <p class="text-gray-600 mb-4">Обзор современных технологий в производстве линз - от фотохромных до мультифокальных.</p>
-                        <a href="#" class="text-indigo-600 font-medium hover:text-indigo-800 transition-all">Читать далее →</a>
                     </div>
                 </div>
-                <div class="article-card bg-gray-50 rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-all">
-                    <img src="https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
-                         alt="Статья 3"
-                         class="w-full h-48 object-cover">
                     <div class="p-6">
                         <div class="flex items-center text-sm text-gray-500 mb-3">
-                            <span>20 мая 2023</span>
                             <span class="mx-2">•</span>
-                            <span>4 мин чтения</span>
                         </div>
                         <h3 class="text-xl font-bold mb-3 text-gray-800">Уход за очками: как продлить срок службы</h3>
                         <p class="text-gray-600 mb-4">Простые правила ухода, которые сохранят ваши очки в идеальном состоянии на долгие годы.</p>
-                        <a href="#" class="text-indigo-600 font-medium hover:text-indigo-800 transition-all">Читать далее →</a>
                     </div>
                 </div>
             </div>
             <div class="text-center mt-10">
-                <button class="border-2 border-indigo-600 text-indigo-600 px-6 py-3 rounded-full font-medium hover:bg-indigo-600 hover:text-white transition-all">
                     Все статьи
                 </button>
             </div>
@@ -253,12 +384,18 @@
     <!-- Testimonials -->
     <section class="py-16 bg-indigo-50">
         <div class="container mx-auto px-4">
-            <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Отзывы наших клиентов</h2>
             <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-                <div class="bg-white p-8 rounded-xl shadow-sm">
                     <div class="flex items-center mb-4">
-                        <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600 font-bold text-xl mr-3">
                             АН
                         </div>
                         <div>
@@ -275,9 +412,9 @@
                     <p class="text-gray-600">"Подобрали идеальные очки с первого раза! Учли все мои пожелания и особенности зрения. Теперь вижу мир чётко и стильно."</p>
                 </div>
-                <div class="bg-white p-8 rounded-xl shadow-sm">
                     <div class="flex items-center mb-4">
-                        <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600 font-bold text-xl mr-3">
                             ИК
                         </div>
                         <div>
@@ -294,9 +431,9 @@
                     <p class="text-gray-600">"Отличный сервис и профессиональный подход. Впервые за 10 лет ношения очков почувствовал настоящий комфорт."</p>
                 </div>
-                <div class="bg-white p-8 rounded-xl shadow-sm">
                     <div class="flex items-center mb-4">
-                        <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600 font-bold text-xl mr-3">
                             ОС
                         </div>
                         <div>
@@ -326,7 +463,9 @@
                     <div class="space-y-4">
                         <div class="flex items-start">
-                            <i class="fas fa-map-marker-alt mt-1 mr-4 text-indigo-400"></i>
                             <div>
                                 <h4 class="font-bold">Адрес</h4>
                                 <p class="text-gray-300">г. Москва, ул. Оптическая, 15</p>
@@ -334,7 +473,9 @@
                         </div>
                         <div class="flex items-start">
-                            <i class="fas fa-phone-alt mt-1 mr-4 text-indigo-400"></i>
                             <div>
                                 <h4 class="font-bold">Телефон</h4>
                                 <p class="text-gray-300">+7 (495) 123-45-67</p>
@@ -342,7 +483,9 @@
                         </div>
                         <div class="flex items-start">
-                            <i class="fas fa-envelope mt-1 mr-4 text-indigo-400"></i>
                             <div>
                                 <h4 class="font-bold">Email</h4>
                                 <p class="text-gray-300">info@optivision.ru</p>
@@ -350,7 +493,9 @@
                         </div>
                         <div class="flex items-start">
-                            <i class="fas fa-clock mt-1 mr-4 text-indigo-400"></i>
                             <div>
                                 <h4 class="font-bold">Часы работы</h4>
                                 <p class="text-gray-300">Пн-Пт: 10:00 - 20:00<br>Сб-Вс: 11:00 - 18:00</p>
@@ -359,46 +504,46 @@
                     </div>
                     <div class="mt-8 flex space-x-4">
-                        <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-indigo-600 transition-all">
                             <i class="fab fa-instagram"></i>
                         </a>
-                        <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-indigo-600 transition-all">
                             <i class="fab fa-facebook-f"></i>
                         </a>
-                        <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-indigo-600 transition-all">
                             <i class="fab fa-vk"></i>
                         </a>
-                        <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-indigo-600 transition-all">
                             <i class="fab fa-telegram-plane"></i>
                         </a>
                     </div>
                 </div>
                 <div class="md:w-1/2 md:pl-10">
-                    <form class="bg-gray-900 p-8 rounded-xl">
                         <h3 class="text-xl font-bold mb-6">Напишите нам</h3>
                         <div class="mb-4">
                             <label for="name" class="block text-gray-300 mb-2">Ваше имя</label>
-                            <input type="text" id="name" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500">
                         </div>
                         <div class="mb-4">
                             <label for="email" class="block text-gray-300 mb-2">Email</label>
-                            <input type="email" id="email" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500">
                         </div>
                         <div class="mb-4">
                             <label for="phone" class="block text-gray-300 mb-2">Телефон</label>
-                            <input type="tel" id="phone" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500">
                         </div>
                         <div class="mb-6">
                             <label for="message" class="block text-gray-300 mb-2">Сообщение</label>
-                            <textarea id="message" rows="4" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea>
                         </div>
-                        <button type="submit" class="w-full bg-indigo-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-indigo-700 transition-all">
                             Отправить сообщение
                         </button>
                     </form>
@@ -412,17 +557,15 @@
         <div class="container mx-auto px-4">
             <div class="flex flex-col md:flex-row justify-between items-center">
                 <div class="flex items-center mb-4 md:mb-0">
-                    <div class="w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold text-lg mr-3">
-                        OV
-                    </div>
                     <h2 class="text-xl font-bold text-white">Opti<span class="text-indigo-400">Vision</span></h2>
                 </div>
-                <div class="text-sm">
                     <p>© 2023 OptiVision. Все права защищены.</p>
                 </div>
-                <div class="flex space-x-6 mt-4 md:mt-0">
                     <a href="#" class="hover:text-white transition-all">Политика конфиденциальности</a>
                     <a href="#" class="hover:text-white transition-all">Условия использования</a>
                 </div>
@@ -453,6 +596,23 @@
         document.querySelector('.md\\:hidden').addEventListener('click', function() {
             alert('Мобильное меню будет реализовано в полной версии сайта');
         });
     </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=ANTIMOLL/opvision" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OptiVision - Премиальная оптика для вашего зрения</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>
+        @keyframes float {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-10px); }
+        }
         .hero-gradient {
+            background: linear-gradient(135deg, rgba(56, 182, 255, 0.9) 0%, rgba(124, 81, 255, 0.9) 100%);
+        }
+        .nav-link {
+            position: relative;
         }
+        .nav-link:after {
+            content: '';
+            position: absolute;
+            width: 0;
+            height: 2px;
+            bottom: -5px;
+            left: 0;
+            background-color: #4f46e5;
+            transition: width 0.3s ease;
         }
+        .nav-link:hover:after {
+            width: 100%;
+        }
+        .gallery-item {
+            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            transform-style: preserve-3d;
+        }
         .gallery-item:hover {
+            transform: scale(1.05) rotateY(5deg);
+            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
         }
+        .article-card {
+            transition: all 0.4s ease;
+            perspective: 1000px;
+        }
         .article-card:hover {
+            transform: translateY(-10px) rotateX(5deg);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+        }
+        .glasses-logo {
+            position: relative;
+            width: 50px;
+            height: 30px;
+        }
+        .glasses-logo:before, .glasses-logo:after {
+            content: '';
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            border: 3px solid #4f46e5;
+            border-radius: 50%;
+            top: 0;
+        }
+        .glasses-logo:before {
+            left: 0;
+        }
+        .glasses-logo:after {
+            right: 0;
         }
+        .glasses-logo span {
+            position: absolute;
+            width: 10px;
+            height: 3px;
+            background: #4f46e5;
+            top: 8px;
+            left: 20px;
+        }
+        .floating {
+            animation: float 6s ease-in-out infinite;
+        }
+        .shine-effect {
+            position: relative;
+            overflow: hidden;
+        }
+        .shine-effect:after {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -60%;
+            width: 40px;
+            height: 200%;
+            background: rgba(255, 255, 255, 0.2);
+            transform: rotate(30deg);
+            transition: all 0.3s ease;
+        }
+        .shine-effect:hover:after {
+            left: 120%;
+        }
         .transition-all {
             transition: all 0.3s ease;
         }
+        .parallax-bg {
+            background-attachment: fixed;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: cover;
+        }
     </style>
 </head>
 <body class="font-sans bg-gray-50">
     <!-- Header -->
+    <header class="bg-white shadow-sm sticky top-0 z-50 backdrop-blur-md bg-opacity-90">
         <div class="container mx-auto px-4 py-3 flex justify-between items-center">
             <div class="flex items-center">
+                <div class="glasses-logo mr-3"></div>
                 <h1 class="text-2xl font-bold text-gray-800">Opti<span class="text-indigo-600">Vision</span></h1>
             </div>
                 <button class="md:hidden text-gray-700">
                     <i class="fas fa-bars text-xl"></i>
                 </button>
+                <button class="hidden md:block bg-gradient-to-r from-indigo-600 to-purple-600 text-white px-6 py-2 rounded-full hover:from-indigo-700 hover:to-purple-700 transition-all shadow-lg shine-effect">
                     Записаться
                 </button>
             </div>
     </header>
     <!-- Hero Section -->
+    <section id="home" class="hero-gradient text-white py-20 relative overflow-hidden">
+        <div class="absolute inset-0 bg-black opacity-20"></div>
+        <div class="container mx-auto px-4 flex flex-col md:flex-row items-center relative z-10">
             <div class="md:w-1/2 mb-10 md:mb-0">
+                <h2 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">Современная оптика <br>для вашего комфорта</h2>
                 <p class="text-xl mb-8 opacity-90">Индивидуальный подбор очков и линз с использованием новейших технологий и материалов.</p>
                 <div class="flex space-x-4">
+                    <button class="bg-white text-indigo-600 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition-all shadow-lg shine-effect">
                         Подобрать очки
                     </button>
+                    <button class="border-2 border-white text-white px-6 py-3 rounded-full font-medium hover:bg-white hover:text-indigo-600 transition-all shadow-lg">
                         Узнать больше
                     </button>
                 </div>
             </div>
+            <div class="md:w-1/2 flex justify-center floating">
                 <img src="https://images.unsplash.com/photo-1505576399279-565b52d4ac71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
                      alt="Стильные очки"
+                     class="rounded-xl shadow-2xl max-w-md w-full transform rotate-3">
             </div>
         </div>
     </section>
     <!-- Services -->
     <section class="py-16 bg-white">
         <div class="container mx-auto px-4">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl font-bold text-center mb-4 text-gray-800 relative inline-block">
+                    <span class="relative z-10">Наши услуги</span>
+                    <span class="absolute bottom-0 left-0 w-full h-2 bg-indigo-100 z-0 opacity-70" style="bottom: 5px;"></span>
+                </h2>
+                <p class="text-gray-600 max-w-2xl mx-auto">Мы предлагаем полный спектр услуг по подбору и изготовлению очков любой сложности</p>
+            </div>
             <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition-all transform hover:-translate-y-2 border border-gray-100">
+                    <div class="w-16 h-16 bg-gradient-to-br from-indigo-100 to-purple-100 rounded-full flex items-center justify-center mb-6 mx-auto">
                         <i class="fas fa-glasses text-indigo-600 text-2xl"></i>
                     </div>
+                    <h3 class="text-xl font-bold mb-3 text-gray-800 text-center">Подбор очков</h3>
+                    <p class="text-gray-600 text-center">Профессиональный подбор очков с учётом вашего стиля, формы лица и медицинских показаний.</p>
+                    <div class="text-center mt-4">
+                        <a href="#" class="text-indigo-600 font-medium inline-flex items-center hover:text-indigo-800 transition-all">
+                            Подробнее <i class="fas fa-arrow-right ml-2"></i>
+                        </a>
+                    </div>
                 </div>
+                <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition-all transform hover:-translate-y-2 border border-gray-100">
+                    <div class="w-16 h-16 bg-gradient-to-br from-indigo-100 to-purple-100 rounded-full flex items-center justify-center mb-6 mx-auto">
                         <i class="fas fa-eye text-indigo-600 text-2xl"></i>
                     </div>
+                    <h3 class="text-xl font-bold mb-3 text-gray-800 text-center">Диагностика зрения</h3>
+                    <p class="text-gray-600 text-center">Точная диагностика зрения с использованием современного оборудования.</p>
+                    <div class="text-center mt-4">
+                        <a href="#" class="text-indigo-600 font-medium inline-flex items-center hover:text-indigo-800 transition-all">
+                            Подробнее <i class="fas fa-arrow-right ml-2"></i>
+                        </a>
+                    </div>
                 </div>
+                <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition-all transform hover:-translate-y-2 border border-gray-100">
+                    <div class="w-16 h-16 bg-gradient-to-br from-indigo-100 to-purple-100 rounded-full flex items-center justify-center mb-6 mx-auto">
                         <i class="fas fa-sun text-indigo-600 text-2xl"></i>
                     </div>
+                    <h3 class="text-xl font-bold mb-3 text-gray-800 text-center">Солнцезащитные очки</h3>
+                    <p class="text-gray-600 text-center">Широкий выбор солнцезащитных очков от ведущих мировых брендов.</p>
+                    <div class="text-center mt-4">
+                        <a href="#" class="text-indigo-600 font-medium inline-flex items-center hover:text-indigo-800 transition-all">
+                            Подробнее <i class="fas fa-arrow-right ml-2"></i>
+                        </a>
+                    </div>
                 </div>
             </div>
         </div>
     </section>
     <!-- Gallery Section -->
+    <section id="gallery" class="py-16 bg-gray-50 parallax-bg" style="background-image: url('https://images.unsplash.com/photo-1559599101-f09722fb4948?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1350&q=80');">
+        <div class="absolute inset-0 bg-indigo-900 opacity-80"></div>
+        <div class="container mx-auto px-4 relative z-10">
+            <h2 class="text-3xl font-bold text-center mb-12 text-white">Наша галерея</h2>
             <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+                <div class="gallery-item overflow-hidden rounded-xl bg-white shadow-md">
+                    <div class="relative overflow-hidden h-64">
+                        <img src="https://images.unsplash.com/photo-1556306535-0f09a537f0a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
+                             alt="Очки 1"
+                             class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
+                    </div>
                     <div class="p-4">
                         <h3 class="font-bold text-lg mb-2">Классическая коллекция</h3>
                         <p class="text-gray-600">Традиционные формы с современными материалами</p>
+                        <div class="mt-3 flex justify-between items-center">
+                            <span class="text-indigo-600 font-medium">от 5 990 ₽</span>
+                            <button class="text-sm bg-indigo-100 text-indigo-700 px-3 py-1 rounded-full hover:bg-indigo-200 transition-all">
+                                Подробнее
+                            </button>
+                        </div>
                     </div>
                 </div>
+                <div class="gallery-item overflow-hidden rounded-xl bg-white shadow-md">
+                    <div class="relative overflow-hidden h-64">
+                        <img src="https://images.unsplash.com/photo-1559599101-f09722fb4948?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
+                             alt="Очки 2"
+                             class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
+                    </div>
                     <div class="p-4">
                         <h3 class="font-bold text-lg mb-2">Спортивные модели</h3>
                         <p class="text-gray-600">Лёгкие и прочные очки для активного образа жизни</p>
+                        <div class="mt-3 flex justify-between items-center">
+                            <span class="text-indigo-600 font-medium">от 7 490 ₽</span>
+                            <button class="text-sm bg-indigo-100 text-indigo-700 px-3 py-1 rounded-full hover:bg-indigo-200 transition-all">
+                                Подробнее
+                            </button>
+                        </div>
                     </div>
                 </div>
+                <div class="gallery-item overflow-hidden rounded-xl bg-white shadow-md">
+                    <div class="relative overflow-hidden h-64">
+                        <img src="https://images.unsplash.com/photo-1591073113125-e46713c829bc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
+                             alt="Очки 3"
+                             class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
+                    </div>
                     <div class="p-4">
                         <h3 class="font-bold text-lg mb-2">Премиум сегмент</h3>
                         <p class="text-gray-600">Эксклюзивные модели ручной работы</p>
+                        <div class="mt-3 flex justify-between items-center">
+                            <span class="text-indigo-600 font-medium">от 15 990 ₽</span>
+                            <button class="text-sm bg-indigo-100 text-indigo-700 px-3 py-1 rounded-full hover:bg-indigo-200 transition-all">
+                                Подробнее
+                            </button>
+                        </div>
                     </div>
                 </div>
             </div>
             <div class="text-center mt-10">
+                <button class="bg-white text-indigo-600 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition-all shadow-lg shine-effect">
                     Посмотреть всю коллекцию
                 </button>
             </div>
     <!-- Articles Section -->
     <section id="articles" class="py-16 bg-white">
         <div class="container mx-auto px-4">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl font-bold text-center mb-4 text-gray-800 relative inline-block">
+                    <span class="relative z-10">Полезные статьи</span>
+                    <span class="absolute bottom-0 left-0 w-full h-2 bg-indigo-100 z-0 opacity-70" style="bottom: 5px;"></span>
+                </h2>
+                <p class="text-gray-600 max-w-2xl mx-auto">Актуальная информация о здоровье глаз и последних тенденциях в мире оптики</p>
+            </div>
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <div class="article-card bg-gray-50 rounded-xl overflow-hidden shadow-md border border-gray-100">
+                    <div class="relative overflow-hidden h-48">
+                        <img src="https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
+                             alt="Статья 1"
+                             class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
+                    </div>
                     <div class="p-6">
                         <div class="flex items-center text-sm text-gray-500 mb-3">
+                            <span><i class="far fa-calendar mr-1"></i> 15 июня 2023</span>
                             <span class="mx-2">•</span>
+                            <span><i class="far fa-clock mr-1"></i> 5 мин</span>
                         </div>
                         <h3 class="text-xl font-bold mb-3 text-gray-800">Как правильно выбрать очки по форме лица</h3>
                         <p class="text-gray-600 mb-4">Полное руководство по подбору оправы, которая подчеркнёт ваши лучшие черты и скроет недостатки.</p>
+                        <a href="#" class="text-indigo-600 font-medium inline-flex items-center hover:text-indigo-800 transition-all">
+                            Читать далее <i class="fas fa-arrow-right ml-2"></i>
+                        </a>
                     </div>
                 </div>
+                <div class="article-card bg-gray-50 rounded-xl overflow-hidden shadow-md border border-gray-100">
+                    <div class="relative overflow-hidden h-48">
+                        <img src="https://images.unsplash.com/photo-1508514177221-188e1eaf0883?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
+                             alt="Статья 2"
+                             class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
+                    </div>
                     <div class="p-6">
                         <div class="flex items-center text-sm text-gray-500 mb-3">
+                            <span><i class="far fa-calendar mr-1"></i> 2 июня 2023</span>
                             <span class="mx-2">•</span>
+                            <span><i class="far fa-clock mr-1"></i> 7 мин</span>
                         </div>
                         <h3 class="text-xl font-bold mb-3 text-gray-800">Линзы нового поколения: что предлагает рынок</h3>
                         <p class="text-gray-600 mb-4">Обзор современных технологий в производстве линз - от фотохромных до мультифокальных.</p>
+                        <a href="#" class="text-indigo-600 font-medium inline-flex items-center hover:text-indigo-800 transition-all">
+                            Читать далее <i class="fas fa-arrow-right ml-2"></i>
+                        </a>
                     </div>
                 </div>
+                <div class="article-card bg-gray-50 rounded-xl overflow-hidden shadow-md border border-gray-100">
+                    <div class="relative overflow-hidden h-48">
+                        <img src="https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
+                             alt="Статья 3"
+                             class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
+                    </div>
                     <div class="p-6">
                         <div class="flex items-center text-sm text-gray-500 mb-3">
+                            <span><i class="far fa-calendar mr-1"></i> 20 мая 2023</span>
                             <span class="mx-2">•</span>
+                            <span><i class="far fa-clock mr-1"></i> 4 мин</span>
                         </div>
                         <h3 class="text-xl font-bold mb-3 text-gray-800">Уход за очками: как продлить срок службы</h3>
                         <p class="text-gray-600 mb-4">Простые правила ухода, которые сохранят ваши очки в идеальном состоянии на долгие годы.</p>
+                        <a href="#" class="text-indigo-600 font-medium inline-flex items-center hover:text-indigo-800 transition-all">
+                            Читать далее <i class="fas fa-arrow-right ml-2"></i>
+                        </a>
                     </div>
                 </div>
             </div>
             <div class="text-center mt-10">
+                <button class="border-2 border-indigo-600 text-indigo-600 px-6 py-3 rounded-full font-medium hover:bg-indigo-600 hover:text-white transition-all shadow-lg">
                     Все статьи
                 </button>
             </div>
     <!-- Testimonials -->
     <section class="py-16 bg-indigo-50">
         <div class="container mx-auto px-4">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl font-bold text-center mb-4 text-gray-800 relative inline-block">
+                    <span class="relative z-10">Отзывы клиентов</span>
+                    <span class="absolute bottom-0 left-0 w-full h-2 bg-indigo-100 z-0 opacity-70" style="bottom: 5px;"></span>
+                </h2>
+                <p class="text-gray-600 max-w-2xl mx-auto">Что говорят о нас наши клиенты</p>
+            </div>
             <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="bg-white p-8 rounded-xl shadow-sm transform hover:scale-105 transition-all">
                     <div class="flex items-center mb-4">
+                        <div class="w-12 h-12 bg-gradient-to-br from-indigo-100 to-purple-100 rounded-full flex items-center justify-center text-indigo-600 font-bold text-xl mr-3">
                             АН
                         </div>
                         <div>
                     <p class="text-gray-600">"Подобрали идеальные очки с первого раза! Учли все мои пожелания и особенности зрения. Теперь вижу мир чётко и стильно."</p>
                 </div>
+                <div class="bg-white p-8 rounded-xl shadow-sm transform hover:scale-105 transition-all">
                     <div class="flex items-center mb-4">
+                        <div class="w-12 h-12 bg-gradient-to-br from-indigo-100 to-purple-100 rounded-full flex items-center justify-center text-indigo-600 font-bold text-xl mr-3">
                             ИК
                         </div>
                         <div>
                     <p class="text-gray-600">"Отличный сервис и профессиональный подход. Впервые за 10 лет ношения очков почувствовал настоящий комфорт."</p>
                 </div>
+                <div class="bg-white p-8 rounded-xl shadow-sm transform hover:scale-105 transition-all">
                     <div class="flex items-center mb-4">
+                        <div class="w-12 h-12 bg-gradient-to-br from-indigo-100 to-purple-100 rounded-full flex items-center justify-center text-indigo-600 font-bold text-xl mr-3">
                             ОС
                         </div>
                         <div>
                     <div class="space-y-4">
                         <div class="flex items-start">
+                            <div class="w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center mr-4 mt-1">
+                                <i class="fas fa-map-marker-alt text-white"></i>
+                            </div>
                             <div>
                                 <h4 class="font-bold">Адрес</h4>
                                 <p class="text-gray-300">г. Москва, ул. Оптическая, 15</p>
                         </div>
                         <div class="flex items-start">
+                            <div class="w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center mr-4 mt-1">
+                                <i class="fas fa-phone-alt text-white"></i>
+                            </div>
                             <div>
                                 <h4 class="font-bold">Телефон</h4>
                                 <p class="text-gray-300">+7 (495) 123-45-67</p>
                         </div>
                         <div class="flex items-start">
+                            <div class="w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center mr-4 mt-1">
+                                <i class="fas fa-envelope text-white"></i>
+                            </div>
                             <div>
                                 <h4 class="font-bold">Email</h4>
                                 <p class="text-gray-300">info@optivision.ru</p>
                         </div>
                         <div class="flex items-start">
+                            <div class="w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center mr-4 mt-1">
+                                <i class="fas fa-clock text-white"></i>
+                            </div>
                             <div>
                                 <h4 class="font-bold">Часы работы</h4>
                                 <p class="text-gray-300">Пн-Пт: 10:00 - 20:00<br>Сб-Вс: 11:00 - 18:00</p>
                     </div>
                     <div class="mt-8 flex space-x-4">
+                        <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-indigo-600 transition-all transform hover:-translate-y-1">
                             <i class="fab fa-instagram"></i>
                         </a>
+                        <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-indigo-600 transition-all transform hover:-translate-y-1">
                             <i class="fab fa-facebook-f"></i>
                         </a>
+                        <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-indigo-600 transition-all transform hover:-translate-y-1">
                             <i class="fab fa-vk"></i>
                         </a>
+                        <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-indigo-600 transition-all transform hover:-translate-y-1">
                             <i class="fab fa-telegram-plane"></i>
                         </a>
                     </div>
                 </div>
                 <div class="md:w-1/2 md:pl-10">
+                    <form class="bg-gray-900 p-8 rounded-xl shadow-xl">
                         <h3 class="text-xl font-bold mb-6">Напишите нам</h3>
                         <div class="mb-4">
                             <label for="name" class="block text-gray-300 mb-2">Ваше имя</label>
+                            <input type="text" id="name" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
                         </div>
                         <div class="mb-4">
                             <label for="email" class="block text-gray-300 mb-2">Email</label>
+                            <input type="email" id="email" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
                         </div>
                         <div class="mb-4">
                             <label for="phone" class="block text-gray-300 mb-2">Телефон</label>
+                            <input type="tel" id="phone" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
                         </div>
                         <div class="mb-6">
                             <label for="message" class="block text-gray-300 mb-2">Сообщение</label>
+                            <textarea id="message" rows="4" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"></textarea>
                         </div>
+                        <button type="submit" class="w-full bg-gradient-to-r from-indigo-600 to-purple-600 text-white px-6 py-3 rounded-lg font-medium hover:from-indigo-700 hover:to-purple-700 transition-all shadow-lg shine-effect">
                             Отправить сообщение
                         </button>
                     </form>
         <div class="container mx-auto px-4">
             <div class="flex flex-col md:flex-row justify-between items-center">
                 <div class="flex items-center mb-4 md:mb-0">
+                    <div class="glasses-logo mr-3"></div>
                     <h2 class="text-xl font-bold text-white">Opti<span class="text-indigo-400">Vision</span></h2>
                 </div>
+                <div class="text-sm text-center md:text-left mb-4 md:mb-0">
                     <p>© 2023 OptiVision. Все права защищены.</p>
                 </div>
+                <div class="flex space-x-6">
                     <a href="#" class="hover:text-white transition-all">Политика конфиденциальности</a>
                     <a href="#" class="hover:text-white transition-all">Условия использования</a>
                 </div>
         document.querySelector('.md\\:hidden').addEventListener('click', function() {
             alert('Мобильное меню будет реализовано в полной версии сайта');
         });
+        // Add animation class when element is in viewport
+        const observerOptions = {
+            threshold: 0.1
+        };
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('animate-fadeIn');
+                }
+            });
+        }, observerOptions);
+        document.querySelectorAll('.gallery-item, .article-card, [class*="transform"]').forEach(el => {
+            observer.observe(el);
+        });
     </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=ANTIMOLL/opvision" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

prompts.txt CHANGED Viewed

	@@ -1 +1,2 @@
1	- сделайт сайт для оптики с тремя страницами статьями галереей логотипом и красивым дизайном


1	+ сделайт сайт для оптики с тремя страницами статьями галереей логотипом и красивым дизайном
2	+ добавь дизайна и еффектов сделай логотип в форме очков