139 lines
5.4 KiB
HTML
139 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>VibeChat — Мессенджер будущего</title>
|
||
<link rel="stylesheet" href="landing.css">
|
||
</head>
|
||
<body>
|
||
<!-- Landing Page -->
|
||
<div id="landingPage">
|
||
<nav class="landing-nav">
|
||
<div class="nav-container">
|
||
<div class="logo">💬 VibeChat</div>
|
||
<button class="btn-login" onclick="showAuth('login')">Войти</button>
|
||
</div>
|
||
</nav>
|
||
|
||
<section class="hero">
|
||
<div class="hero-content">
|
||
<h1>Общение без границ</h1>
|
||
<p>Быстрый. Безопасный. С End-to-End шифрованием.</p>
|
||
<div class="hero-buttons">
|
||
<button class="btn-primary" onclick="showAuth('register')">Начать бесплатно</button>
|
||
<button class="btn-secondary" onclick="scrollToFeatures()">Узнать больше</button>
|
||
</div>
|
||
</div>
|
||
<div class="hero-image">
|
||
<div class="chat-mockup">
|
||
<div class="mockup-header">
|
||
<div class="mockup-avatar"></div>
|
||
<div class="mockup-lines">
|
||
<div class="line short"></div>
|
||
<div class="line"></div>
|
||
</div>
|
||
</div>
|
||
<div class="mockup-messages">
|
||
<div class="message received"></div>
|
||
<div class="message sent"></div>
|
||
<div class="message received"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="features" id="features">
|
||
<h2>Почему VibeChat?</h2>
|
||
<div class="features-grid">
|
||
<div class="feature-card">
|
||
<div class="feature-icon">🔒</div>
|
||
<h3>E2E Шифрование</h3>
|
||
<p>Ваши сообщения видят только отправитель и получатель</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">⚡</div>
|
||
<h3>Молниеносно</h3>
|
||
<p>Мгновенная доставка сообщений в любую точку мира</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">👥</div>
|
||
<h3>Группы и каналы</h3>
|
||
<p>Создавайте группы до 1000 человек и публичные каналы</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">🎨</div>
|
||
<h3>Эмодзи и стикеры</h3>
|
||
<p>Тысячи эмодзи и стикеров для выражения эмоций</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">📱</div>
|
||
<h3>Кроссплатформенно</h3>
|
||
<p>Работает на любом устройстве через браузер</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">🔐</div>
|
||
<h3>Безопасность</h3>
|
||
<p>Двухфакторная аутентификация и секретные чаты</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="cta">
|
||
<h2>Готовы начать?</h2>
|
||
<p>Присоединяйтесь к тысячам пользователей уже сегодня</p>
|
||
<button class="btn-primary" onclick="showAuth('register')">Создать аккаунт</button>
|
||
</section>
|
||
|
||
<footer>
|
||
<p>© 2026 VibeChat. Все права защищены.</p>
|
||
</footer>
|
||
</div>
|
||
|
||
<!-- Auth Modal -->
|
||
<div id="authModal" class="modal">
|
||
<div class="modal-content">
|
||
<button class="modal-close" onclick="closeAuth()">×</button>
|
||
|
||
<div id="loginForm">
|
||
<h2>Вход</h2>
|
||
<form onsubmit="handleLogin(event)">
|
||
<div class="form-group">
|
||
<label>Email</label>
|
||
<input type="email" id="loginEmail" required placeholder="you@example.com">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Пароль</label>
|
||
<input type="password" id="loginPassword" required placeholder="••••••••">
|
||
</div>
|
||
<button type="submit" class="btn-submit">Войти</button>
|
||
</form>
|
||
<p class="auth-switch">Нет аккаунта? <a href="#" onclick="showAuth('register')">Зарегистрироваться</a></p>
|
||
</div>
|
||
|
||
<div id="registerForm" style="display:none">
|
||
<h2>Регистрация</h2>
|
||
<form onsubmit="handleRegister(event)">
|
||
<div class="form-group">
|
||
<label>Имя пользователя</label>
|
||
<input type="text" id="regUsername" required placeholder="username">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Email</label>
|
||
<input type="email" id="regEmail" required placeholder="you@example.com">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Пароль</label>
|
||
<input type="password" id="regPassword" required placeholder="••••••••" minlength="6">
|
||
</div>
|
||
<button type="submit" class="btn-submit">Создать аккаунт</button>
|
||
</form>
|
||
<p class="auth-switch">Уже есть аккаунт? <a href="#" onclick="showAuth('login')">Войти</a></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="landing.js"></script>
|
||
</body>
|
||
</html>
|