ussroptical3

Running

App Files Files Community

ANTIMOLL commited on Apr 25, 2025

Commit

73c829d

verified ·

1 Parent(s): 0dde7af

Add 2 files

Browse files

Files changed (2) hide show

index.html +350 -80
prompts.txt +1 -0

index.html CHANGED Viewed

@@ -1,167 +1,437 @@
 <!DOCTYPE html>
-<!-- saved from url=(0079)file:///C:/Users/Zver/Downloads/cccp/deepseek_html_20250425_ad6124.html#catalog -->
-<html lang="ru"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <title>СССР Очки - Ретро Линзы 60-х</title>
-    <link href="./СССР Очки - Ретро Линзы 60-х_files/css2" rel="stylesheet">
     <style>
-        /* Стили в духе советского модерна */
         :root {
             --red: #CC2222;
             --gold: #FFD700;
             --vintage: #2F2F2F;
         }
         body {
             font-family: 'Roboto', sans-serif;
-            background: url('https://img.freepik.com/free-photo/old-brown-paper-texture-background_1373-431.jpg');
             margin: 0;
         }
         .header {
-            background: linear-gradient(90deg, var(--red) 0%, var(--vintage) 100%);
-            padding: 20px;
             text-align: center;
             border-bottom: 3px solid var(--gold);
         }
-        .header h1 {
-            font-family: 'Playfair Display', serif;
-            color: white;
-            font-size: 2.5em;
-            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
         }
         .hero {
-            padding: 100px 20px;
             text-align: center;
         }
         .cta-button {
             background: var(--gold);
             color: var(--red) !important;
-            padding: 15px 40px;
             border: none;
-            font-size: 1.2em;
             cursor: pointer;
-            transition: 0.3s;
             text-decoration: none;
             display: inline-block;
             margin-top: 20px;
         }
         .cta-button:hover {
-            transform: scale(1.1);
-            box-shadow: 0 0 15px var(--gold);
-        }
-        .features {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 30px;
-            padding: 50px 20px;
-            background: rgba(255,255,255,0.9);
         }
         .product-card {
             border: 2px solid var(--red);
             padding: 20px;
             text-align: center;
-            transition: 0.3s;
         }
         .product-card:hover {
             transform: translateY(-10px);
-        }
-        .gallery {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 20px;
-            padding: 50px 20px;
         }
         .gallery img {
             width: 100%;
             height: 250px;
             object-fit: cover;
-            filter: sepia(0.5);
             border: 3px solid var(--gold);
         }
         .newsletter {
-            background: var(--vintage);
-            padding: 50px 20px;
             text-align: center;
             color: white;
         }
         input[type="email"] {
-            padding: 15px;
-            width: 300px;
-            margin: 20px;
             border: 2px solid var(--gold);
         }
     </style>
 </head>
 <body>
     <header class="header">
-        <h1>◭ СССР ОЧКИ 1960 ◮</h1>
     </header>
     <section class="hero">
-        <h2 style="font-size: 2em; color: var(--red);">Смотри на мир через линзы истории</h2>
-        <p style="font-size: 1.2em;">Оригинальные оправы из СССР с линзами ручной окраски</p>
-        <a href="file:///C:/Users/Zver/Downloads/cccp/deepseek_html_20250425_ad6124.html#catalog" class="cta-button">ВЫБРАТЬ СВОЙ ЦВЕТ</a>
     </section>
-    <section class="features">
-        <div class="product-card">
-            <h3>✓ Аутентичность</h3>
-            <p>Оправы 1960-х годов с архивных складов</p>
-        </div>
-        <div class="product-card" style="transform: none;">
-            <h3>✓ Индивидуальность</h3>
-            <p>Ручная окраска линз пигментом "ОК"</p>
-        </div>
-        <div class="product-card" style="transform: none;">
-            <h3>✓ Эксклюзив</h3>
-            <p>Только 10 экземпляров каждой модели</p>
         </div>
     </section>
-    <section id="catalog" style="padding: 50px 20px; text-align: center;">
-        <h2>КАТАЛОГ</h2>
-        <div class="gallery">
-            <img src="./glasses1.jpg" alt="Очки модель &#39;Партийный&#39;">
-            <img src="./glasses2.jpg" alt="Очки модель &#39;Космос&#39;">
-            <img src="./glasses3.jpg" alt="Очки модель &#39;Стиляга&#39;">
         </div>
     </section>
     <section class="newsletter">
-        <h2>Получи скидку 15%</h2>
-        <p>Подпишись на рассылку и получи гид по стилю 60-х</p>
-        <input type="email" placeholder="Ваш e-mail">
-        <button class="cta-button">ПОДПИСАТЬСЯ</button>
     </section>
     <script>
-        // Простая анимация при скролле
-        document.querySelectorAll('.product-card').forEach(card => {
-            card.addEventListener('mouseover', () => {
-                card.style.transform = 'rotate(-2deg)';
             });
-            card.addEventListener('mouseout', () => {
-                card.style.transform = 'none';
             });
-        });
-        // Обработка формы
-        document.querySelector('button').addEventListener('click', () => {
-            alert('Спасибо! Чек-лист "Стиль 60-х" уже летит к вам!');
         });
-    </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/ussroptical" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body></html>

 <!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: url('https://img.freepik.com/free-photo/vintage-grunge-paper-background_1048-10911.jpg') center/cover;
+            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 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);
         }
     </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="#catalog" 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 bg-white">
+        <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="py-12 px-4 bg-gray-100">
+        <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="https://i.imgur.com/JxQq3WZ.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="https://i.imgur.com/8YtLQ9U.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="https://i.imgur.com/9zXmPqk.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> Москва, ул. Арбат, 25</p>
+                <p class="mt-2"><i class="fas fa-phone mr-2"></i> +7 (495) 123-45-67</p>
+                <p class="mt-2"><i class="fas fa-envelope mr-2"></i> info@ussr-glasses.ru</p>
+            </div>
+            <div>
+                <h3 class="text-xl font-bold mb-4" style="color: var(--gold);">Часы работы</h3>
+                <p>Пн-Пт: 10:00 - 20:00</p>
+                <p class="mt-2">Сб-Вс: 11:00 - 18: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>© 2023 СССР Очки. Все права защищены.</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);
+            });
         });
+        // Добавляем 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/ussroptical" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt CHANGED Viewed

	@@ -0,0 +1 @@


1	+ сделай под мобильные устройства добавь еффектом логотип и измени дизайн