Spaces:
Running
Running
| <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) ; | |
| 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 id="colors" class="colors-container"> | |
| <div class="lens-color active" style="background: #4a6fa5;" title="Синий"></div> | |
| <div class="lens-color" style="background: #8b4513;" title="Коричневый"></div> | |
| <div class="lens-color" style="background: #228b22;" title="Зеленый"></div> | |
| <div class="lens-color" style="background: #ff6347;" title="Красный"></div> | |
| <div class="lens-color" style="background: #9370db;" title="Фиолетовый"></div> | |
| <div class="lens-color" style="background: #ffd700;" title="Золотой"></div> | |
| <div class="lens-color" style="background: #708090;" title="Серый"></div> | |
| <div class="lens-color" style="background: #ff69b4;" title="Розовый"></div> | |
| <div class="lens-color" style="background: #40e0d0;" title="Бирюзовый"></div> | |
| <div class="lens-color" style="background: #000000;" title="Черный"></div> | |
| </div> | |
| <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 color = this.style.backgroundColor; | |
| // document.querySelectorAll('.gallery img').forEach(img => { | |
| // img.style.filter = `sepia(0.4) contrast(1.1) hue-rotate(...)`; | |
| // }); | |
| }); | |
| }); | |
| }); | |
| // Добавляем SweetAlert для красивых уведомлений | |
| 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/ussroptical5" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |