Spaces:
Running
Running
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Xopticа - Магазин модных очков и линз</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; | |
| } | |
| .logo-text { | |
| font-weight: 700; | |
| letter-spacing: 1px; | |
| position: relative; | |
| } | |
| .logo-text::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 0; | |
| width: 100%; | |
| height: 2px; | |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6); | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #dbeafe 100%); | |
| } | |
| .glass-card { | |
| backdrop-filter: blur(16px) saturate(180%); | |
| -webkit-backdrop-filter: blur(16px) saturate(180%); | |
| background-color: rgba(255, 255, 255, 0.75); | |
| border-radius: 12px; | |
| border: 1px solid rgba(209, 213, 219, 0.3); | |
| } | |
| .product-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -2px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background-color: #3b82f6; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .input-focus:focus { | |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); | |
| } | |
| .scroll-hidden::-webkit-scrollbar { | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Header --> | |
| <header class="sticky top-0 z-50 bg-white shadow-sm"> | |
| <div class="container mx-auto px-4 py-3"> | |
| <div class="flex items-center justify-between"> | |
| <!-- Logo --> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-glasses text-blue-500 text-xl"></i> | |
| </div> | |
| <span class="logo-text text-2xl text-gray-800">xoptic<span class="text-blue-500">a</span></span> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="hidden md:flex items-center space-x-8"> | |
| <a href="#home" class="nav-link text-gray-600 hover:text-blue-500 font-medium">Главная</a> | |
| <a href="#products" class="nav-link text-gray-600 hover:text-blue-500 font-medium">Очки</a> | |
| <a href="#services" class="nav-link text-gray-600 hover:text-blue-500 font-medium">Услуги</a> | |
| <a href="#about" class="nav-link text-gray-600 hover:text-blue-500 font-medium">О нас</a> | |
| <a href="#contacts" class="nav-link text-gray-600 hover:text-blue-500 font-medium">Контакты</a> | |
| </nav> | |
| <!-- Mobile menu button --> | |
| <button id="mobile-menu-button" class="md:hidden text-gray-600 focus:outline-none"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden absolute top-16 left-0 right-0 bg-white shadow-lg py-4 px-6"> | |
| <div class="flex flex-col space-y-4"> | |
| <a href="#home" class="nav-link text-gray-600 hover:text-blue-500 font-medium">Главная</a> | |
| <a href="#products" class="nav-link text-gray-600 hover:text-blue-500 font-medium">Очки</a> | |
| <a href="#services" class="nav-link text-gray-600 hover:text-blue-500 font-medium">Услуги</a> | |
| <a href="#about" class="nav-link text-gray-600 hover:text-blue-500 font-medium">О нас</a> | |
| <a href="#contacts" class="nav-link text-gray-600 hover:text-blue-500 font-medium">Контакты</a> | |
| </div> | |
| </div> | |
| <!-- Cart and User --> | |
| <div class="hidden md:flex items-center space-x-4"> | |
| <button class="text-gray-600 hover:text-blue-500 relative"> | |
| <i class="fas fa-search text-xl"></i> | |
| </button> | |
| <button class="text-gray-600 hover:text-blue-500 relative"> | |
| <i class="fas fa-heart text-xl"></i> | |
| </button> | |
| <button class="text-gray-600 hover:text-blue-500 relative"> | |
| <i class="fas fa-shopping-cart text-xl"></i> | |
| <span class="absolute -top-2 -right-2 bg-blue-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">3</span> | |
| </button> | |
| <button class="text-gray-600 hover:text-blue-500"> | |
| <i class="fas fa-user text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="home" class="hero-gradient py-16 md:py-24"> | |
| <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"> | |
| <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-800 leading-tight mb-6"> | |
| Видеть мир <span class="text-blue-500">четко</span> и <span class="text-indigo-500">стильно</span> | |
| </h1> | |
| <p class="text-lg text-gray-600 mb-8"> | |
| Xopticа - это современная оптика с широким выбором очков, линз и аксессуаров. Мы заботимся о вашем зрении и вашем стиле. | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#products" class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-6 rounded-lg transition duration-300 text-center"> | |
| Выбрать очки | |
| </a> | |
| <a href="#services" class="border border-blue-500 text-blue-500 hover:bg-blue-50 font-medium py-3 px-6 rounded-lg transition duration-300 text-center"> | |
| Наши услуги | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative w-full max-w-md"> | |
| <div class="glass-card p-6 rounded-2xl shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1491553895911-0055eca6402d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" | |
| alt="Модные очки" | |
| class="w-full h-auto rounded-lg shadow-md"> | |
| </div> | |
| <div class="absolute -bottom-6 -left-6 w-32 h-32 bg-indigo-100 rounded-full -z-10"></div> | |
| <div class="absolute -top-6 -right-6 w-24 h-24 bg-blue-100 rounded-full -z-10"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Brands Section --> | |
| <section class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-2xl font-semibold text-center text-gray-700 mb-10">Наши бренды</h2> | |
| <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16"> | |
| <div class="w-24 h-16 flex items-center justify-center"> | |
| <img src="https://via.placeholder.com/100x50?text=Ray-Ban" alt="Ray-Ban" class="object-contain grayscale hover:grayscale-0 transition duration-300"> | |
| </div> | |
| <div class="w-24 h-16 flex items-center justify-center"> | |
| <img src="https://via.placeholder.com/100x50?text=Oakley" alt="Oakley" class="object-contain grayscale hover:grayscale-0 transition duration-300"> | |
| </div> | |
| <div class="w-24 h-16 flex items-center justify-center"> | |
| <img src="https://via.placeholder.com/100x50?text=Prada" alt="Prada" class="object-contain grayscale hover:grayscale-0 transition duration-300"> | |
| </div> | |
| <div class="w-24 h-16 flex items-center justify-center"> | |
| <img src="https://via.placeholder.com/100x50?text=Gucci" alt="Gucci" class="object-contain grayscale hover:grayscale-0 transition duration-300"> | |
| </div> | |
| <div class="w-24 h-16 flex items-center justify-center"> | |
| <img src="https://via.placeholder.com/100x50?text=Dior" alt="Dior" class="object-contain grayscale hover:grayscale-0 transition duration-300"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Products Section --> | |
| <section id="products" 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 text-gray-800 mb-4">Наши коллекции</h2> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto"> | |
| Откройте для себя идеальные очки, которые подчеркнут вашу индивидуальность | |
| </p> | |
| </div> | |
| <!-- Categories --> | |
| <div class="flex justify-center mb-10"> | |
| <div class="inline-flex rounded-md shadow-sm"> | |
| <button type="button" class="category-btn px-4 py-2 text-sm font-medium rounded-l-lg border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:outline-none active:bg-blue-50 active:text-blue-600 transition duration-150"> | |
| Все | |
| </button> | |
| <button type="button" class="category-btn px-4 py-2 text-sm font-medium border-t border-b border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:outline-none active:bg-blue-50 active:text-blue-600 transition duration-150"> | |
| Для зрения | |
| </button> | |
| <button type="button" class="category-btn px-4 py-2 text-sm font-medium border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:outline-none active:bg-blue-50 active:text-blue-600 transition duration-150"> | |
| Солнцезащитные | |
| </button> | |
| <button type="button" class="category-btn px-4 py-2 text-sm font-medium rounded-r-lg border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:outline-none active:bg-blue-50 active:text-blue-600 transition duration-150"> | |
| Аксессуары | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Products Grid --> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8"> | |
| <!-- Product 1 --> | |
| <div class="product-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 hover:shadow-xl"> | |
| <div class="relative"> | |
| <img src="https://images. | |
| </html> |