| <!DOCTYPE html> |
| <html lang="ru"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>СССР Очки - Ретро Линзы 60-х</title> |
| <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <style> |
| :root { |
| --red: #CC2222; |
| --gold: #FFD700; |
| --vintage: #2F2F2F; |
| --cream: #F5F5DC; |
| } |
| |
| body { |
| font-family: 'Roboto', sans-serif; |
| background-color: var(--cream); |
| margin: 0; |
| color: #333; |
| } |
| |
| .logo { |
| animation: pulse 3s infinite; |
| filter: drop-shadow(0 0 10px rgba(204, 34, 34, 0.7)); |
| } |
| |
| @keyframes pulse { |
| 0% { transform: scale(1); } |
| 50% { transform: scale(1.05); } |
| 100% { transform: scale(1); } |
| } |
| |
| .header { |
| background: linear-gradient(135deg, var(--red) 0%, var(--vintage) 100%); |
| padding: 15px; |
| text-align: center; |
| border-bottom: 3px solid var(--gold); |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .header::before { |
| content: ""; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><text x="10" y="50" font-family="Arial" font-size="20" fill="rgba(255,255,255,0.05)">◭◮</text></svg>'); |
| opacity: 0.3; |
| } |
| |
| .hero { |
| background: rgba(245, 245, 220, 0.7); |
| padding: 80px 20px; |
| text-align: center; |
| position: relative; |
| } |
| |
| .hero::after { |
| content: ""; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background: rgba(245, 245, 220, 0.7); |
| } |
| |
| .hero-content { |
| position: relative; |
| z-index: 1; |
| } |
| |
| .cta-button { |
| background: var(--gold); |
| color: var(--red) !important; |
| padding: 12px 30px; |
| border: none; |
| font-size: 1.1em; |
| font-weight: bold; |
| cursor: pointer; |
| transition: all 0.3s; |
| text-decoration: none; |
| display: inline-block; |
| margin-top: 20px; |
| border-radius: 30px; |
| box-shadow: 0 4px 8px rgba(0,0,0,0.2); |
| } |
| |
| .cta-button:hover { |
| transform: translateY(-3px); |
| box-shadow: 0 6px 12px rgba(0,0,0,0.3); |
| } |
| |
| .product-card { |
| border: 2px solid var(--red); |
| padding: 20px; |
| text-align: center; |
| transition: all 0.3s; |
| background: white; |
| border-radius: 8px; |
| box-shadow: 0 4px 6px rgba(0,0,0,0.1); |
| } |
| |
| .product-card:hover { |
| transform: translateY(-10px); |
| box-shadow: 0 10px 20px rgba(0,0,0,0.2); |
| } |
| |
| .gallery { |
| padding: 40px 20px; |
| position: relative; |
| } |
| |
| .gallery::before { |
| content: ""; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background: rgba(0,0,0,0.03); |
| } |
| |
| .gallery img { |
| width: 100%; |
| height: 250px; |
| object-fit: cover; |
| filter: sepia(0.4) contrast(1.1); |
| border: 3px solid var(--gold); |
| transition: all 0.3s; |
| border-radius: 4px; |
| } |
| |
| .gallery img:hover { |
| filter: sepia(0.2) contrast(1.2); |
| transform: scale(1.02); |
| } |
| |
| .newsletter { |
| background: linear-gradient(135deg, var(--vintage) 0%, #1a1a1a 100%); |
| padding: 40px 20px; |
| text-align: center; |
| color: white; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .newsletter::before { |
| content: ""; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><text x="10" y="50" font-family="Arial" font-size="20" fill="rgba(255,215,0,0.05)">СССР</text></svg>'); |
| opacity: 0.3; |
| } |
| |
| input[type="email"] { |
| padding: 12px 15px; |
| width: 100%; |
| max-width: 400px; |
| margin: 15px auto; |
| border: 2px solid var(--gold); |
| border-radius: 30px; |
| font-size: 1em; |
| outline: none; |
| } |
| |
| .mobile-menu { |
| display: none; |
| position: fixed; |
| bottom: 20px; |
| left: 50%; |
| transform: translateX(-50%); |
| background: var(--red); |
| border-radius: 30px; |
| padding: 10px; |
| box-shadow: 0 4px 12px rgba(0,0,0,0.3); |
| z-index: 100; |
| } |
| |
| .mobile-menu a { |
| color: white; |
| margin: 0 10px; |
| font-size: 1.2em; |
| } |
| |
| @media (max-width: 768px) { |
| .header h1 { |
| font-size: 1.8em; |
| } |
| |
| .hero { |
| padding: 60px 20px; |
| } |
| |
| .features { |
| grid-template-columns: 1fr; |
| gap: 20px; |
| } |
| |
| .mobile-menu { |
| display: flex; |
| } |
| |
| .gallery { |
| grid-template-columns: 1fr; |
| } |
| } |
| |
| @media (min-width: 769px) and (max-width: 1024px) { |
| .features { |
| grid-template-columns: repeat(2, 1fr); |
| } |
| } |
| |
| .floating { |
| animation: floating 3s ease-in-out infinite; |
| } |
| |
| @keyframes floating { |
| 0% { transform: translateY(0px); } |
| 50% { transform: translateY(-10px); } |
| 100% { transform: translateY(0px); } |
| } |
| |
| .hammer-sickle { |
| font-size: 1.5em; |
| margin: 0 5px; |
| color: var(--gold); |
| } |
| |
| |
| .lens-color { |
| width: 50px; |
| height: 50px; |
| border-radius: 50%; |
| display: inline-block; |
| margin: 10px; |
| cursor: pointer; |
| border: 3px solid transparent; |
| transition: all 0.3s ease; |
| position: relative; |
| box-shadow: 0 4px 8px rgba(0,0,0,0.2); |
| } |
| |
| .lens-color:hover { |
| transform: scale(1.1); |
| box-shadow: 0 6px 12px rgba(0,0,0,0.3); |
| } |
| |
| .lens-color.active { |
| border-color: var(--gold); |
| transform: scale(1.1); |
| } |
| |
| .lens-color::after { |
| content: ''; |
| position: absolute; |
| top: 10px; |
| left: 10px; |
| width: 10px; |
| height: 10px; |
| border-radius: 50%; |
| background: rgba(255,255,255,0.5); |
| } |
| |
| .colors-container { |
| margin: 30px 0; |
| display: flex; |
| flex-wrap: wrap; |
| justify-content: center; |
| max-width: 600px; |
| margin-left: auto; |
| margin-right: auto; |
| } |
| </style> |
| </head> |
| <body> |
| <header class="header"> |
| <div class="logo"> |
| <h1 class="text-3xl md:text-4xl font-bold font-serif text-white"> |
| <span class="hammer-sickle">☭</span> СССР ОЧКИ 1960 <span class="hammer-sickle">☭</span> |
| </h1> |
| </div> |
| </header> |
|
|
| <section class="hero"> |
| <div class="hero-content"> |
| <h2 class="text-2xl md:text-3xl font-bold mb-4" style="color: var(--red);">Смотри на мир через линзы истории</h2> |
| <p class="text-lg md:text-xl mb-6">Оригинальные оправы из СССР с линзами ручной окраски</p> |
| <a href="#colors" class="cta-button"> |
| <i class="fas fa-glasses mr-2"></i> ВЫБРАТЬ СВОЙ ЦВЕТ |
| </a> |
| |
| |
| |
| <div class="mt-8 floating"> |
| <i class="fas fa-angle-double-down text-3xl text-red-600"></i> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="py-12 px-4"> |
| <div class="max-w-6xl mx-auto"> |
| <h2 class="text-3xl font-bold text-center mb-10" style="color: var(--red);"> |
| <i class="fas fa-star mr-2" style="color: var(--gold);"></i> Почему выбирают нас |
| </h2> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="product-card"> |
| <div class="text-4xl mb-4" style="color: var(--red);"> |
| <i class="fas fa-certificate"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Аутентичность</h3> |
| <p class="text-gray-700">Оправы 1960-х годов с архивных складов</p> |
| </div> |
| <div class="product-card"> |
| <div class="text-4xl mb-4" style="color: var(--red);"> |
| <i class="fas fa-palette"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Индивидуальность</h3> |
| <p class="text-gray-700">Ручная окраска линз пигментом "ОК"</p> |
| </div> |
| <div class="product-card"> |
| <div class="text-4xl mb-4" style="color: var(--red);"> |
| <i class="fas fa-crown"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Эксклюзив</h3> |
| <p class="text-gray-700">Только 10 экземпляров каждой модели</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <section id="catalog" class="gallery"> |
| <div class="max-w-6xl mx-auto"> |
| <h2 class="text-3xl font-bold text-center mb-10" style="color: var(--red);"> |
| <i class="fas fa-images mr-2" style="color: var(--gold);"></i> КАТАЛОГ |
| </h2> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| <div class="group relative overflow-hidden rounded-lg"> |
| <img src="/glasses1.jpg" alt="Очки модель 'Партийный'" class="w-full h-64 md:h-80 object-cover"> |
| <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300"> |
| <div class="text-center text-white p-4"> |
| <h3 class="text-xl font-bold">"Партийный"</h3> |
| <p class="mt-2">Официальный стиль партийных работников</p> |
| <button class="mt-4 px-6 py-2 bg-red-600 text-white rounded-full">Подробнее</button> |
| </div> |
| </div> |
| </div> |
| <div class="group relative overflow-hidden rounded-lg"> |
| <img src="/glasses3.jpg" alt="Очки модель 'Космос'" class="w-full h-64 md:h-80 object-cover"> |
| <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300"> |
| <div class="text-center text-white p-4"> |
| <h3 class="text-xl font-bold">"Космос"</h3> |
| <p class="mt-2">Вдохновлено эпохой космических достижений</p> |
| <button class="mt-4 px-6 py-2 bg-red-600 text-white rounded-full">Подробнее</button> |
| </div> |
| </div> |
| </div> |
| <div class="group relative overflow-hidden rounded-lg"> |
| <img src="/glasses2.jpg" alt="Очки модель 'Стиляга'" class="w-full h-64 md:h-80 object-cover"> |
| <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300"> |
| <div class="text-center text-white p-4"> |
| <h3 class="text-xl font-bold">"Стиляга"</h3> |
| <p class="mt-2">Яркий акцент для поклонников западной моды</p> |
| <button class="mt-4 px-6 py-2 bg-red-600 text-white rounded-full">Подробнее</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="newsletter"> |
| <div class="max-w-4xl mx-auto relative z-10"> |
| <h2 class="text-2xl md:text-3xl font-bold mb-4">Получи скидку 15%</h2> |
| <p class="text-lg mb-6">Подпишись на рассылку и получи гид по стилю 60-х</p> |
| <div class="flex flex-col md:flex-row items-center justify-center"> |
| <input type="email" placeholder="Ваш e-mail" class="mb-4 md:mb-0 md:mr-4"> |
| <button class="cta-button"> |
| <i class="fas fa-envelope mr-2"></i> ПОДПИСАТЬСЯ |
| </button> |
| </div> |
| </div> |
| </section> |
|
|
| <footer class="bg-gray-900 text-white py-8 px-4"> |
| <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div> |
| <h3 class="text-xl font-bold mb-4" style="color: var(--gold);">СССР Очки</h3> |
| <p>Возвращаем моду 60-х в современный мир</p> |
| <div class="mt-4 flex space-x-4"> |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-vk fa-lg"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-telegram fa-lg"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram fa-lg"></i></a> |
| </div> |
| </div> |
| <div> |
| <h3 class="text-xl font-bold mb-4" style="color: var(--gold);">Контакты</h3> |
| <p><i class="fas fa-map-marker-alt mr-2"></i> Москва, ул. Берзарина, 34 стр.12</p> |
| <p class="mt-2"><i class="fas fa-phone mr-2"></i> +7 (926) 323-68-86</p> |
| <p class="mt-2"><i class="fas fa-envelope mr-2"></i> info@xoptica.ru</p> |
| </div> |
| <div> |
| <h3 class="text-xl font-bold mb-4" style="color: var(--gold);">Часы работы</h3> |
| <p>Пн-Чт: 08:00 - 16:00</p> |
| <p class="mt-2">Вс: 09:00 - 14:00</p> |
| </div> |
| </div> |
| <div class="max-w-6xl mx-auto mt-8 pt-4 border-t border-gray-700 text-center text-gray-400"> |
| <p>© 2025 xoptica.ru СССР Очки. Все права защищены.</p> |
| </div> |
| </footer> |
|
|
| <div class="mobile-menu"> |
| <a href="#"><i class="fas fa-home"></i></a> |
| <a href="#catalog"><i class="fas fa-glasses"></i></a> |
| <a href="#"><i class="fas fa-shopping-cart"></i></a> |
| <a href="#"><i class="fas fa-user"></i></a> |
| </div> |
|
|
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function(e) { |
| e.preventDefault(); |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ |
| behavior: 'smooth' |
| }); |
| }); |
| }); |
| |
| |
| const cards = document.querySelectorAll('.product-card'); |
| cards.forEach(card => { |
| card.addEventListener('mouseover', () => { |
| card.style.transform = 'rotate(-2deg)'; |
| }); |
| |
| card.addEventListener('mouseout', () => { |
| card.style.transform = 'none'; |
| }); |
| }); |
| |
| |
| document.querySelector('.newsletter button').addEventListener('click', () => { |
| const email = document.querySelector('.newsletter input').value; |
| if(email.includes('@')) { |
| Swal.fire({ |
| title: 'Спасибо!', |
| text: 'Чек-лист "Стиль 60-х" уже летит к вам!', |
| icon: 'success', |
| confirmButtonColor: '#CC2222' |
| }); |
| } else { |
| Swal.fire({ |
| title: 'Ошибка', |
| text: 'Пожалуйста, введите корректный email', |
| icon: 'error', |
| confirmButtonColor: '#CC2222' |
| }); |
| } |
| }); |
| |
| |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if(entry.isIntersecting) { |
| entry.target.classList.add('animate__animated', 'animate__fadeInUp'); |
| } |
| }); |
| }, { threshold: 0.1 }); |
| |
| document.querySelectorAll('.product-card, .gallery img, .newsletter').forEach(el => { |
| observer.observe(el); |
| }); |
| |
| |
| const colorLenses = document.querySelectorAll('.lens-color'); |
| colorLenses.forEach(lens => { |
| lens.addEventListener('click', function() { |
| |
| colorLenses.forEach(l => l.classList.remove('active')); |
| |
| this.classList.add('active'); |
| |
| |
| |
| |
| |
| |
| |
| }); |
| }); |
| }); |
| |
| |
| const SwalScript = document.createElement('script'); |
| SwalScript.src = 'https://cdn.jsdelivr.net/npm/sweetalert2@11'; |
| document.head.appendChild(SwalScript); |
| |
| |
| const animateCSS = document.createElement('link'); |
| animateCSS.href = 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css'; |
| animateCSS.rel = 'stylesheet'; |
| document.head.appendChild(animateCSS); |
| </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/optical23" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
