|
|
<!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> |
