ussroptical3

Running

App Files Files Community

ANTIMOLL commited on Apr 25, 2025

Commit

c9fd851

verified ·

1 Parent(s): e5aa29f

Upload index.html

Browse files

Files changed (1) hide show

index.html +530 -0

index.html ADDED Viewed

	@@ -0,0 +1,530 @@

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