| <!DOCTYPE html> |
| <html lang="ru"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>NovaVerse | Галактика Возможностей</title> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| :root { |
| --primary: #8a2be2; |
| --primary-dark: #5f1a9b; |
| --primary-light: #b36bff; |
| --secondary: #1e1e2d; |
| --secondary-light: #2a2a3a; |
| --accent: #ff00ff; |
| --text: #e0e0e0; |
| --text-dark: #b0b0b0; |
| --glass-bg: rgba(30, 30, 45, 0.7); |
| --glass-border: rgba(255, 255, 255, 0.1); |
| --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); |
| } |
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| } |
| |
| body { |
| background: linear-gradient(135deg, var(--secondary), #0a0a1a); |
| color: var(--text); |
| min-height: 100vh; |
| overflow-x: hidden; |
| background-image: |
| radial-gradient(circle at 20% 30%, var(--primary-dark) 0%, transparent 20%), |
| radial-gradient(circle at 80% 70%, var(--accent) 0%, transparent 25%); |
| } |
| |
| |
| .glass { |
| background: var(--glass-bg); |
| backdrop-filter: blur(12px); |
| -webkit-backdrop-filter: blur(12px); |
| border: 1px solid var(--glass-border); |
| box-shadow: var(--glass-shadow); |
| border-radius: 15px; |
| } |
| |
| |
| .container { |
| max-width: 1400px; |
| margin: 0 auto; |
| padding: 20px; |
| } |
| |
| |
| header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 20px 0; |
| margin-bottom: 30px; |
| } |
| |
| .logo { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| font-size: 1.8rem; |
| font-weight: 700; |
| color: var(--text); |
| text-decoration: none; |
| } |
| |
| .logo-icon { |
| color: var(--primary-light); |
| font-size: 2.2rem; |
| } |
| |
| nav ul { |
| display: flex; |
| list-style: none; |
| gap: 25px; |
| } |
| |
| nav ul li a { |
| color: var(--text); |
| text-decoration: none; |
| font-weight: 500; |
| font-size: 1.1rem; |
| transition: all 0.3s ease; |
| position: relative; |
| padding: 5px 10px; |
| border-radius: 8px; |
| } |
| |
| nav ul li a:hover { |
| color: var(--primary-light); |
| background: rgba(138, 43, 226, 0.1); |
| } |
| |
| nav ul li a::after { |
| content: ''; |
| position: absolute; |
| bottom: -3px; |
| left: 50%; |
| transform: translateX(-50%); |
| width: 0; |
| height: 2px; |
| background: var(--primary-light); |
| transition: width 0.3s ease; |
| } |
| |
| nav ul li a:hover::after { |
| width: 80%; |
| } |
| |
| .auth-buttons { |
| display: flex; |
| gap: 15px; |
| } |
| |
| .btn { |
| padding: 8px 20px; |
| border-radius: 8px; |
| font-weight: 600; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| border: none; |
| font-size: 1rem; |
| } |
| |
| .btn-primary { |
| background: var(--primary); |
| color: white; |
| } |
| |
| .btn-primary:hover { |
| background: var(--primary-dark); |
| transform: translateY(-2px); |
| box-shadow: 0 5px 15px rgba(138, 43, 226, 0.4); |
| } |
| |
| .btn-outline { |
| background: transparent; |
| border: 1px solid var(--primary); |
| color: var(--primary); |
| } |
| |
| .btn-outline:hover { |
| background: rgba(138, 43, 226, 0.1); |
| transform: translateY(-2px); |
| } |
| |
| |
| .hero { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| text-align: center; |
| padding: 60px 20px; |
| margin-bottom: 50px; |
| } |
| |
| .hero h1 { |
| font-size: 3.5rem; |
| margin-bottom: 20px; |
| background: linear-gradient(to right, var(--primary-light), var(--accent)); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| letter-spacing: 1px; |
| } |
| |
| .hero p { |
| font-size: 1.3rem; |
| max-width: 700px; |
| margin-bottom: 30px; |
| line-height: 1.6; |
| color: var(--text-dark); |
| } |
| |
| .hero-buttons { |
| display: flex; |
| gap: 20px; |
| } |
| |
| .btn-lg { |
| padding: 12px 30px; |
| font-size: 1.1rem; |
| } |
| |
| |
| .features { |
| margin-bottom: 80px; |
| } |
| |
| .section-title { |
| font-size: 2.2rem; |
| text-align: center; |
| margin-bottom: 50px; |
| position: relative; |
| } |
| |
| .section-title::after { |
| content: ''; |
| position: absolute; |
| bottom: -10px; |
| left: 50%; |
| transform: translateX(-50%); |
| width: 80px; |
| height: 3px; |
| background: linear-gradient(to right, var(--primary-light), var(--accent)); |
| border-radius: 3px; |
| } |
| |
| .features-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
| gap: 30px; |
| } |
| |
| .feature-card { |
| padding: 25px; |
| transition: all 0.3s ease; |
| min-height: 300px; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| text-align: center; |
| } |
| |
| .feature-card:hover { |
| transform: translateY(-10px); |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4); |
| border: 1px solid rgba(138, 43, 226, 0.3); |
| } |
| |
| .feature-icon { |
| font-size: 2.5rem; |
| margin-bottom: 20px; |
| color: var(--primary-light); |
| } |
| |
| .feature-card h3 { |
| font-size: 1.5rem; |
| margin-bottom: 15px; |
| } |
| |
| .feature-card p { |
| color: var(--text-dark); |
| line-height: 1.6; |
| } |
| |
| |
| .ai-chat-section { |
| margin-bottom: 80px; |
| padding: 30px; |
| } |
| |
| .chat-container { |
| max-width: 900px; |
| margin: 0 auto; |
| display: flex; |
| flex-direction: column; |
| height: 500px; |
| } |
| |
| .chat-header { |
| display: flex; |
| align-items: center; |
| gap: 15px; |
| padding: 15px 20px; |
| border-bottom: 1px solid var(--glass-border); |
| } |
| |
| .ai-avatar { |
| width: 40px; |
| height: 40px; |
| border-radius: 50%; |
| background: linear-gradient(to bottom right, var(--primary), var(--accent)); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 1.2rem; |
| font-weight: bold; |
| } |
| |
| .chat-messages { |
| flex: 1; |
| overflow-y: auto; |
| padding: 20px; |
| display: flex; |
| flex-direction: column; |
| gap: 15px; |
| } |
| |
| .message { |
| max-width: 70%; |
| padding: 12px 16px; |
| border-radius: 15px; |
| line-height: 1.4; |
| position: relative; |
| } |
| |
| .bot-message { |
| align-self: flex-start; |
| background: var(--secondary-light); |
| border-bottom-left-radius: 5px; |
| } |
| |
| .user-message { |
| align-self: flex-end; |
| background: linear-gradient(to right, var(--primary), var(--primary-dark)); |
| border-bottom-right-radius: 5px; |
| } |
| |
| .message-time { |
| font-size: 0.7rem; |
| color: var(--text-dark); |
| margin-top: 5px; |
| text-align: right; |
| } |
| |
| .chat-input { |
| display: flex; |
| padding: 15px; |
| border-top: 1px solid var(--glass-border); |
| } |
| |
| .chat-input input { |
| flex: 1; |
| padding: 12px 15px; |
| border-radius: 8px; |
| border: none; |
| background: var(--secondary-light); |
| color: var(--text); |
| font-size: 1rem; |
| outline: none; |
| } |
| |
| .chat-input button { |
| margin-left: 10px; |
| padding: 12px 20px; |
| border-radius: 8px; |
| background: var(--primary); |
| color: white; |
| border: none; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| } |
| |
| .chat-input button:hover { |
| background: var(--primary-dark); |
| transform: translateY(-2px); |
| } |
| |
| |
| .gallery-section { |
| margin-bottom: 80px; |
| } |
| |
| .gallery-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); |
| gap: 20px; |
| padding: 20px; |
| } |
| |
| .gallery-item { |
| border-radius: 15px; |
| overflow: hidden; |
| height: 200px; |
| position: relative; |
| transition: all 0.3s ease; |
| } |
| |
| .gallery-item img { |
| width: 100%; |
| height: 100%; |
| object-fit: cover; |
| transition: transform 0.5s ease; |
| } |
| |
| .gallery-item:hover { |
| transform: translateY(-10px); |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4); |
| } |
| |
| .gallery-item:hover img { |
| transform: scale(1.1); |
| } |
| |
| .gallery-overlay { |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); |
| padding: 15px; |
| opacity: 0; |
| transition: opacity 0.3s ease; |
| } |
| |
| .gallery-item:hover .gallery-overlay { |
| opacity: 1; |
| } |
| |
| .gallery-overlay h3 { |
| margin-bottom: 5px; |
| font-size: 1.1rem; |
| } |
| |
| .gallery-overlay p { |
| font-size: 0.9rem; |
| color: var(--text-dark); |
| } |
| |
| |
| .newsletter-section { |
| margin-bottom: 80px; |
| padding: 60px 20px; |
| text-align: center; |
| } |
| |
| .newsletter-form { |
| max-width: 600px; |
| margin: 0 auto; |
| display: flex; |
| gap: 10px; |
| margin-top: 30px; |
| } |
| |
| .newsletter-form input { |
| flex: 1; |
| padding: 15px 20px; |
| border-radius: 8px; |
| border: none; |
| background: var(--secondary-light); |
| color: var(--text); |
| font-size: 1rem; |
| outline: none; |
| } |
| |
| |
| footer { |
| padding: 50px 0 30px; |
| border-top: 1px solid var(--glass-border); |
| } |
| |
| .footer-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
| gap: 40px; |
| margin-bottom: 40px; |
| } |
| |
| .footer-col h3 { |
| font-size: 1.3rem; |
| margin-bottom: 20px; |
| color: var(--primary-light); |
| } |
| |
| .footer-col ul { |
| list-style: none; |
| } |
| |
| .footer-col ul li { |
| margin-bottom: 10px; |
| } |
| |
| .footer-col ul li a { |
| color: var(--text-dark); |
| text-decoration: none; |
| transition: all 0.3s ease; |
| } |
| |
| .footer-col ul li a:hover { |
| color: var(--primary-light); |
| padding-left: 5px; |
| } |
| |
| .social-links { |
| display: flex; |
| gap: 15px; |
| } |
| |
| .social-links a { |
| color: var(--text-dark); |
| font-size: 1.3rem; |
| transition: all 0.3s ease; |
| } |
| |
| .social-links a:hover { |
| color: var(--primary-light); |
| transform: translateY(-3px); |
| } |
| |
| .copyright { |
| text-align: center; |
| padding-top: 30px; |
| border-top: 1px solid var(--glass-border); |
| color: var(--text-dark); |
| font-size: 0.9rem; |
| } |
| |
| |
| @keyframes float { |
| 0%, 100% { transform: translateY(0); } |
| 50% { transform: translateY(-15px); } |
| } |
| |
| .floating { |
| animation: float 6s ease-in-out infinite; |
| } |
| |
| |
| @media (max-width: 768px) { |
| header { |
| flex-direction: column; |
| gap: 20px; |
| } |
| |
| nav ul { |
| flex-wrap: wrap; |
| justify-content: center; |
| } |
| |
| .hero h1 { |
| font-size: 2.5rem; |
| } |
| |
| .hero p { |
| font-size: 1.1rem; |
| } |
| |
| .hero-buttons { |
| flex-direction: column; |
| width: 100%; |
| } |
| |
| .btn-lg { |
| width: 100%; |
| } |
| |
| .chat-container { |
| height: 400px; |
| } |
| |
| .message { |
| max-width: 85%; |
| } |
| } |
| |
| |
| .glow { |
| text-shadow: 0 0 10px rgba(138, 43, 226, 0.7); |
| } |
| |
| .pulse { |
| animation: pulse 2s infinite; |
| } |
| |
| @keyframes pulse { |
| 0% { box-shadow: 0 0 0 0 rgba(138, 43, 226, 0.7); } |
| 70% { box-shadow: 0 0 0 15px rgba(138, 43, 226, 0); } |
| 100% { box-shadow: 0 0 0 0 rgba(138, 43, 226, 0); } |
| } |
| |
| |
| .neon-border { |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .neon-border::after { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| border-radius: inherit; |
| background: linear-gradient(45deg, var(--primary), var(--accent), var(--primary)); |
| background-size: 200% 200%; |
| animation: gradientShift 3s ease infinite; |
| opacity: 0.1; |
| z-index: -1; |
| } |
| |
| @keyframes gradientShift { |
| 0% { background-position: 0% 50%; } |
| 50% { background-position: 100% 50%; } |
| 100% { background-position: 0% 50%; } |
| } |
| |
| |
| ::-webkit-scrollbar { |
| width: 8px; |
| } |
| |
| ::-webkit-scrollbar-track { |
| background: var(--secondary); |
| } |
| |
| ::-webkit-scrollbar-thumb { |
| background: var(--primary); |
| border-radius: 10px; |
| } |
| |
| ::-webkit-scrollbar-thumb:hover { |
| background: var(--primary-dark); |
| } |
| |
| |
| .parallax-bg { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| z-index: -1; |
| opacity: 0.2; |
| } |
| |
| |
| .card-3d { |
| transform-style: preserve-3d; |
| transition: transform 0.5s ease; |
| } |
| |
| .card-3d:hover { |
| transform: perspective(1000px) rotateY(10deg) rotateX(5deg) translateY(-5px); |
| } |
| |
| |
| .cursor-follower { |
| position: fixed; |
| width: 20px; |
| height: 20px; |
| border-radius: 50%; |
| background: rgba(138, 43, 226, 0.3); |
| pointer-events: none; |
| z-index: 9999; |
| transform: translate(-50%, -50%); |
| transition: all 0.1s ease; |
| } |
| |
| .cursor-dot { |
| position: fixed; |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| background: var(--primary); |
| pointer-events: none; |
| z-index: 9999; |
| transform: translate(-50%, -50%); |
| } |
| </style> |
| </head> |
| <body> |
| |
| <div class="cursor-follower"></div> |
| <div class="cursor-dot"></div> |
|
|
| |
| <div class="parallax-bg"> |
| <div style="position: absolute; top: 10%; left: 15%; width: 100px; height: 100px; border-radius: 50%; background: var(--primary); filter: blur(30px);"></div> |
| <div style="position: absolute; bottom: 20%; right: 10%; width: 150px; height: 150px; border-radius: 50%; background: var(--accent); filter: blur(40px);"></div> |
| </div> |
|
|
| <div class="container"> |
| |
| <header> |
| <a href="#" class="logo"> |
| <span class="logo-icon"><i class="fas fa-atom"></i></span> |
| <span>NovaVerse</span> |
| </a> |
| |
| <nav> |
| <ul> |
| <li><a href="#">Главная</a></li> |
| <li><a href="#">Функции</a></li> |
| <li><a href="#">Галерея</a></li> |
| <li><a href="#">Команда</a></li> |
| <li><a href="#">Блог</a></li> |
| <li><a href="#">Контакты</a></li> |
| </ul> |
| </nav> |
| |
| <div class="auth-buttons"> |
| <button class="btn btn-outline">Вход</button> |
| <button class="btn btn-primary">Регистрация</button> |
| </div> |
| </header> |
|
|
| |
| <section class="hero glass"> |
| <h1 class="glow">Открой <span class="pulse">новую вселенную</span> возможностей</h1> |
| <p>Исследуйте цифровой космос с нашим инновационным сервисом, где технологии встречаются с креативностью, создавая уникальные впечатления.</p> |
| <div class="hero-buttons"> |
| <button class="btn btn-primary btn-lg">Начать путешествие</button> |
| <button class="btn btn-outline btn-lg">Узнать больше</button> |
| </div> |
| </section> |
|
|
| |
| <section class="features"> |
| <h2 class="section-title">Наши инновационные функции</h2> |
| |
| <div class="features-grid"> |
| |
| <div class="feature-card glass card-3d"> |
| <div class="feature-icon"> |
| <i class="fas fa-robot floating"></i> |
| </div> |
| <h3>AI-Ассистент</h3> |
| <p>Персональный искусственный интеллект, который помогает в творчестве, анализе данных и автоматизации рутинных задач.</p> |
| </div> |
| |
| |
| <div class="feature-card glass card-3d"> |
| <div class="feature-icon"> |
| <i class="fas fa-vr-cardboard floating"></i> |
| </div> |
| <h3>VR Интеграция</h3> |
| <p>Иммерсивный виртуальный опыт, позволяющий исследовать данные и креативные проекты в трехмерном пространстве.</p> |
| </div> |
| |
| |
| <div class="feature-card glass card-3d"> |
| <div class="feature-icon"> |
| <i class="fas fa-chart-network floating"></i> |
| </div> |
| <h3>Умная аналитика</h3> |
| <p>Мощные алгоритмы анализа данных с визуализацией в реальном времени и предсказательными моделями.</p> |
| </div> |
| |
| |
| <div class="feature-card glass card-3d"> |
| <div class="feature-icon"> |
| <i class="fas fa-lock floating"></i> |
| </div> |
| <h3>Безопасность</h3> |
| <p>Многоуровневая защита данных с криптографией на блокчейне и биометрической аутентификацией.</p> |
| </div> |
| |
| |
| <div class="feature-card glass card-3d"> |
| <div class="feature-icon"> |
| <i class="fas fa-sync-alt floating"></i> |
| </div> |
| <h3>Кроссплатформенность</h3> |
| <p>Полная совместимость между устройствами с мгновенной синхронизацией данных в облаке.</p> |
| </div> |
| |
| |
| <div class="feature-card glass card-3d"> |
| <div class="feature-icon"> |
| <i class="fas fa-puzzle-piece floating"></i> |
| </div> |
| <h3>Модульность</h3> |
| <p>Гибкая система плагинов и интеграций для создания персонализированного рабочего пространства.</p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="ai-chat-section glass neon-border"> |
| <h2 class="section-title">Чат с AI Dipsee</h2> |
| |
| <div class="chat-container glass"> |
| <div class="chat-header"> |
| <div class="ai-avatar">AI</div> |
| <h3>Dipsee Assistant</h3> |
| <span style="margin-left: auto; color: var(--primary-light); font-size: 0.8rem;">Online</span> |
| </div> |
| |
| <div class="chat-messages" id="chat-messages"> |
| <div class="message bot-message"> |
| Привет! Я Dipsee — ваш цифровой помощник с искусственным интеллектом. Чем могу помочь? |
| <div class="message-time">Сегодня, 12:00</div> |
| </div> |
| |
| <div class="message user-message"> |
| Привет, Dipsee! Расскажи, что значит твое имя? |
| <div class="message-time">Сегодня, 12:01</div> |
| </div> |
| |
| <div class="message bot-message"> |
| О, это интересно! Dipsee — это аббревиатура от "Digital Intelligent Personal System Enriched with Experience". Я создан, чтобы помогать вам исследовать цифровой мир! |
| <div class="message-time">Сегодня, 12:01</div> |
| </div> |
| </div> |
| |
| <div class="chat-input"> |
| <input type="text" id="user-input" placeholder="Напишите сообщение..." autocomplete="off"> |
| <button id="send-btn"><i class="fas fa-paper-plane"></i></button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="gallery-section"> |
| <h2 class="section-title">Наша галерея</h2> |
| |
| <div class="gallery-grid glass"> |
| <div class="gallery-item"> |
| <img src="https://source.unsplash.com/random/600x400?cyberpunk" alt="Project 1"> |
| <div class="gallery-overlay"> |
| <h3>Киберпространство</h3> |
| <p>Исследование цифровых ландшафтов</p> |
| </div> |
| </div> |
| |
| <div class="gallery-item"> |
| <img src="https://source.unsplash.com/random/600x400?neon" alt="Project 2"> |
| <div class="gallery-overlay"> |
| <h3>Неоновые мечты</h3> |
| <p>Искусство в цифровую эпоху</p> |
| </div> |
| </div> |
| |
| <div class="gallery-item"> |
| <img src="https://source.unsplash.com/random/600x400?future" alt="Project 3"> |
| <div class="gallery-overlay"> |
| <h3>Футуристический дизайн</h3> |
| <p>Видения будущего</p> |
| </div> |
| </div> |
| |
| <div class="gallery-item"> |
| <img src="https://source.unsplash.com/random/600x400?tech" alt="Project 4"> |
| <div class="gallery-overlay"> |
| <h3>Технологии завтра</h3> |
| <p>Инновационные решения</p> |
| </div> |
| </div> |
| |
| <div class="gallery-item"> |
| <img src="https://source.unsplash.com/random/600x400?virtual" alt="Project 5"> |
| <div class="gallery-overlay"> |
| <h3>Виртуальная реальность</h3> |
| <p>Новые измерения</p> |
| </div> |
| </div> |
| |
| <div class="gallery-item"> |
| <img src="https://source.unsplash.com/random/600x400?ai" alt="Project 6"> |
| <div class="gallery-overlay"> |
| <h3>Искусственный интеллект</h3> |
| <p>Машины, которые учатся</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="newsletter-section glass"> |
| <h2 class="section-title">Будьте в курсе</h2> |
| <p>Подпишитесь на нашу рассылку, чтобы первыми узнавать о новых функциях, обновлениях и эксклюзивных предложениях.</p> |
| |
| <form class="newsletter-form"> |
| <input type="email" placeholder="Ваш email" required> |
| <button type="submit" class="btn btn-primary">Подписаться</button> |
| </form> |
| </section> |
| </div> |
|
|
| |
| <footer class="container"> |
| <div class="footer-grid glass" style="padding: 30px;"> |
| <div class="footer-col"> |
| <h3>NovaVerse</h3> |
| <p style="color: var(--text-dark); line-height: 1.6; margin-top: 15px;">Исследуйте границы цифрового мира с нашими инновационными решениями и сервисами.</p> |
| <div class="social-links" style="margin-top: 20px;"> |
| <a href="#"><i class="fab fa-telegram"></i></a> |
| <a href="#"><i class="fab fa-twitter"></i></a> |
| <a href="#"><i class="fab fa-discord"></i></a> |
| <a href="#"><i class="fab fa-github"></i></a> |
| <a href="#"><i class="fab fa-instagram"></i></a> |
| </div> |
| </div> |
| |
| <div class="footer-col"> |
| <h3>Навигация</h3> |
| <ul> |
| <li><a href="#">Главная</a></li> |
| <li><a href="#">О нас</a></li> |
| <li><a href="#">Функции</a></li> |
| <li><a href="#">Цены</a></li> |
| <li><a href="#">Блог</a></li> |
| </ul> |
| </div> |
| |
| <div class="footer-col"> |
| <h3>Поддержка</h3> |
| <ul> |
| <li><a href="#">FAQ</a></li> |
| <li><a href="#">Документация</a></li> |
| <li><a href="#">Сообщество</a></li> |
| <li><a href="#">Статус сервера</a></li> |
| <li><a href="#">Контакты</a></li> |
| </ul> |
| </div> |
| |
| <div class="footer-col"> |
| <h3>Юридическая информация</h3> |
| <ul> |
| <li><a href="#">Политика конфиденциальности</a></li> |
| <li><a href="#">Условия использования</a></li> |
| <li><a href="#">Политика возврата</a></li> |
| <li><a href="#">Правовая информация</a></li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="copyright"> |
| <p>© 2023 NovaVerse. Все права защищены. Номер в реестре: VR-7735-42</p> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| const cursorFollower = document.querySelector('.cursor-follower'); |
| const cursorDot = document.querySelector('.cursor-dot'); |
| |
| document.addEventListener('mousemove', function(e) { |
| cursorFollower.style.left = e.clientX + 'px'; |
| cursorFollower.style.top = e.clientY + 'px'; |
| |
| |
| setTimeout(() => { |
| cursorDot.style.left = e.clientX + 'px'; |
| cursorDot.style.top = e.clientY + 'px'; |
| }, 50); |
| }); |
| |
| |
| const interactiveElements = document.querySelectorAll('a, button, input, .feature-card, .gallery-item'); |
| |
| interactiveElements.forEach(el => { |
| el.addEventListener('mouseenter', () => { |
| cursorFollower.style.transform = 'translate(-50%, -50%) scale(2)'; |
| cursorFollower.style.background = 'rgba(138, 43, 226, 0.5)'; |
| }); |
| |
| el.addEventListener('mouseleave', () => { |
| cursorFollower.style.transform = 'translate(-50%, -50%) scale(1)'; |
| cursorFollower.style.background = 'rgba(138, 43, 226, 0.3)'; |
| }); |
| }); |
| |
| |
| const chatMessages = document.getElementById('chat-messages'); |
| const userInput = document.getElementById('user-input'); |
| const sendBtn = document.getElementById('send-btn'); |
| |
| sendBtn.addEventListener('click', sendMessage); |
| userInput.addEventListener('keypress', function(e) { |
| if (e.key === 'Enter') { |
| sendMessage(); |
| } |
| }); |
| |
| function sendMessage() { |
| const message = userInput.value.trim(); |
| if (message === '') return; |
| |
| |
| addMessage(message, 'user'); |
| userInput.value = ''; |
| |
| |
| setTimeout(() => { |
| const botResponses = [ |
| "Интересный вопрос! Я изучу информацию и дам вам подробный ответ.", |
| "Отлично! Хотите, чтобы я рассказал больше на эту тему?", |
| "Согласно моей базе данных, это связано с цифровой революцией и искусственным интеллектом.", |
| "Я могу предложить несколько ресурсов по этой теме. Интересно ли вам?", |
| "Моя нейросеть анализирует ваш запрос, чтобы дать наиболее точный ответ.", |
| "Это одно из моих любимых направлений! Хотите углубиться в детали?", |
| "У меня есть несколько идей по этому поводу. Давайте обсудим!" |
| ]; |
| |
| const randomResponse = botResponses[Math.floor(Math.random() * botResponses.length)]; |
| addMessage(randomResponse, 'bot'); |
| }, 1000 + Math.random() * 2000); |
| } |
| |
| function addMessage(text, sender) { |
| const now = new Date(); |
| const timeString = now.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}); |
| |
| const messageDiv = document.createElement('div'); |
| messageDiv.className = `message ${sender}-message`; |
| messageDiv.innerHTML = ` |
| ${text} |
| <div class="message-time">Сегодня, ${timeString}</div> |
| `; |
| |
| chatMessages.appendChild(messageDiv); |
| chatMessages.scrollTop = chatMessages.scrollHeight; |
| |
| |
| setTimeout(() => { |
| messageDiv.style.opacity = '1'; |
| messageDiv.style.transform = 'translateY(0)'; |
| }, 10); |
| } |
| |
| |
| document.addEventListener('mousemove', function(e) { |
| const parallaxBg = document.querySelector('.parallax-bg'); |
| const x = e.clientX / window.innerWidth; |
| const y = e.clientY / window.innerHeight; |
| |
| parallaxBg.style.transform = `translate(-${x * 50}px, -${y * 50}px)`; |
| }); |
| |
| |
| document.body.style.opacity = '0'; |
| setTimeout(() => { |
| document.body.style.transition = 'opacity 1s ease'; |
| document.body.style.opacity = '1'; |
| }, 100); |
| |
| |
| const cards = document.querySelectorAll('.card-3d'); |
| cards.forEach(card => { |
| card.addEventListener('mousemove', (e) => { |
| const rect = card.getBoundingClientRect(); |
| const x = e.clientX - rect.left; |
| const y = e.clientY - rect.top; |
| const centerX = rect.width / 2; |
| const centerY = rect.height / 2; |
| |
| const rotateY = (x - centerX) / 20; |
| const rotateX = (centerY - y) / 20; |
| |
| card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateZ(20px)`; |
| }); |
| |
| card.addEventListener('mouseleave', () => { |
| card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) translateZ(0)'; |
| }); |
| }); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: absolute; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">This website has been generated by <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body> |
| </html> |
