| <!DOCTYPE html> |
| <html lang="ru"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Вход в аккаунт — ОКНОПРОМ</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
| <style> |
| * { |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; |
| } |
| |
| body { |
| background: #0f0f0f; |
| min-height: 100vh; |
| } |
| |
| .glass-card { |
| background: rgba(255, 255, 255, 0.03); |
| backdrop-filter: blur(20px); |
| border: 1px solid rgba(255, 255, 255, 0.08); |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); |
| } |
| |
| .form-container { |
| perspective: 1200px; |
| } |
| |
| .form-flip { |
| transform-style: preserve-3d; |
| transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); |
| } |
| |
| .form-flip.flipped { |
| transform: rotateY(180deg); |
| } |
| |
| .form-front, .form-back { |
| backface-visibility: hidden; |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| } |
| |
| .form-back { |
| transform: rotateY(180deg); |
| } |
| |
| .input-field { |
| background: rgba(255, 255, 255, 0.05); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| transition: all 0.3s ease; |
| } |
| |
| .input-field:focus { |
| background: rgba(255, 255, 255, 0.08); |
| border-color: rgba(255, 255, 255, 0.3); |
| box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.05); |
| } |
| |
| .btn-primary { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| transition: all 0.3s ease; |
| } |
| |
| .btn-primary:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 30px -10px rgba(102, 126, 234, 0.5); |
| } |
| |
| .btn-social { |
| background: rgba(255, 255, 255, 0.05); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| transition: all 0.3s ease; |
| } |
| |
| .btn-social:hover { |
| background: rgba(255, 255, 255, 0.1); |
| transform: translateY(-2px); |
| } |
| |
| .gradient-text { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
| |
| .floating-orb { |
| position: absolute; |
| border-radius: 50%; |
| filter: blur(80px); |
| opacity: 0.4; |
| animation: float 20s infinite ease-in-out; |
| } |
| |
| @keyframes float { |
| 0%, 100% { transform: translate(0, 0) scale(1); } |
| 25% { transform: translate(50px, -50px) scale(1.1); } |
| 50% { transform: translate(-30px, 30px) scale(0.9); } |
| 75% { transform: translate(30px, 50px) scale(1.05); } |
| } |
| |
| .orb-1 { |
| width: 400px; |
| height: 400px; |
| background: #667eea; |
| top: -200px; |
| left: -200px; |
| animation-delay: 0s; |
| } |
| |
| .orb-2 { |
| width: 300px; |
| height: 300px; |
| background: #764ba2; |
| bottom: -150px; |
| right: -150px; |
| animation-delay: -5s; |
| } |
| |
| .orb-3 { |
| width: 250px; |
| height: 250px; |
| background: #f093fb; |
| top: 50%; |
| left: 50%; |
| animation-delay: -10s; |
| } |
| |
| .divider { |
| display: flex; |
| align-items: center; |
| text-align: center; |
| color: rgba(255, 255, 255, 0.4); |
| } |
| |
| .divider::before, .divider::after { |
| content: ''; |
| flex: 1; |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); |
| } |
| |
| .divider span { |
| padding: 0 1rem; |
| font-size: 0.875rem; |
| } |
| |
| .link-hover { |
| position: relative; |
| } |
| |
| .link-hover::after { |
| content: ''; |
| position: absolute; |
| bottom: -2px; |
| left: 0; |
| width: 0; |
| height: 1px; |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| transition: width 0.3s ease; |
| } |
| |
| .link-hover:hover::after { |
| width: 100%; |
| } |
| </style> |
| </head> |
| <body class="flex items-center justify-center p-4 relative overflow-hidden"> |
| |
| <div class="floating-orb orb-1"></div> |
| <div class="floating-orb orb-2"></div> |
| <div class="floating-orb orb-3"></div> |
| |
| <div class="w-full max-w-md relative z-10"> |
| |
| <div class="text-center mb-6"> |
| <a href="index.html" class="btn-social inline-flex items-center gap-2 px-5 py-2.5 rounded-xl text-white text-sm font-medium transition-all hover:bg-white/10"> |
| <i class="fas fa-arrow-left"></i> |
| На главную |
| </a> |
| </div> |
| |
| |
| <div class="text-center mb-10"> |
| <div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-gradient-to-br from-indigo-500 to-purple-600 mb-6 shadow-lg shadow-indigo-500/30"> |
| <i class="fas fa-shield-alt text-2xl text-white"></i> |
| </div> |
| <h1 class="text-4xl font-bold text-white mb-3 tracking-tight">С возвращением</h1> |
| <p class="text-gray-400 text-lg">Войдите в свой аккаунт или создайте новый</p> |
| </div> |
| |
| |
| <div class="glass-card rounded-3xl overflow-hidden relative form-container" style="min-height: 520px;"> |
| <div class="form-flip relative w-full h-full"> |
| |
| <div class="form-front p-8 h-full flex flex-col"> |
| <div class="text-center mb-8"> |
| <h2 class="text-2xl font-semibold text-white mb-2">Вход в аккаунт</h2> |
| <p class="text-gray-400 text-sm">Введите свои данные для входа</p> |
| </div> |
| |
| <form id="loginForm" class="flex-1 flex flex-col"> |
| <div class="space-y-5"> |
| <div> |
| <label for="loginEmail" class="block text-gray-300 text-sm font-medium mb-2">Email адрес</label> |
| <div class="relative"> |
| <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"> |
| <i class="fas fa-envelope text-gray-500"></i> |
| </div> |
| <input type="email" id="loginEmail" class="input-field w-full pl-12 pr-4 py-3.5 rounded-xl text-white placeholder-gray-500 focus:outline-none" placeholder="name@example.com" required> |
| </div> |
| </div> |
| |
| <div> |
| <label for="loginPassword" class="block text-gray-300 text-sm font-medium mb-2">Пароль</label> |
| <div class="relative"> |
| <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"> |
| <i class="fas fa-lock text-gray-500"></i> |
| </div> |
| <input type="password" id="loginPassword" class="input-field w-full pl-12 pr-4 py-3.5 rounded-xl text-white placeholder-gray-500 focus:outline-none" placeholder="••••••••" required> |
| </div> |
| </div> |
| </div> |
| |
| <div class="flex items-center justify-between mt-5 mb-6"> |
| <label class="flex items-center cursor-pointer group"> |
| <input type="checkbox" id="rememberMe" class="w-4 h-4 rounded border-gray-600 bg-gray-800 text-indigo-500 focus:ring-indigo-500 focus:ring-offset-0"> |
| <span class="ml-2 text-sm text-gray-400 group-hover:text-gray-300 transition-colors">Запомнить меня</span> |
| </label> |
| <a href="#" class="text-sm text-indigo-400 hover:text-indigo-300 link-hover">Забыли пароль?</a> |
| </div> |
| |
| <button type="submit" class="btn-primary w-full py-3.5 rounded-xl text-white font-semibold text-base mb-6"> |
| Войти в аккаунт |
| </button> |
| |
| <div class="divider mb-6"> |
| <span>или продолжить через</span> |
| </div> |
| |
| <div class="flex justify-center gap-3 mb-6"> |
| <button type="button" class="btn-social w-12 h-12 rounded-xl flex items-center justify-center text-white"> |
| <i class="fab fa-google text-lg"></i> |
| </button> |
| <button type="button" class="btn-social w-12 h-12 rounded-xl flex items-center justify-center text-white"> |
| <i class="fab fa-apple text-lg"></i> |
| </button> |
| <button type="button" class="btn-social w-12 h-12 rounded-xl flex items-center justify-center text-white"> |
| <i class="fab fa-github text-lg"></i> |
| </button> |
| </div> |
| |
| <div class="text-center mt-auto"> |
| <p class="text-gray-400 text-sm"> |
| Ещё нет аккаунта? |
| <button type="button" onclick="flipForm()" class="text-indigo-400 hover:text-indigo-300 font-medium link-hover ml-1">Создать аккаунт</button> |
| </p> |
| </div> |
| </form> |
| </div> |
| |
| |
| <div class="form-back p-8 h-full flex flex-col"> |
| <div class="text-center mb-6"> |
| <h2 class="text-2xl font-semibold text-white mb-2">Создать аккаунт</h2> |
| <p class="text-gray-400 text-sm">Заполните данные для регистрации</p> |
| </div> |
| |
| <form id="registerForm" class="flex-1 flex flex-col"> |
| <div class="space-y-4"> |
| <div> |
| <label for="registerName" class="block text-gray-300 text-sm font-medium mb-2">Полное имя</label> |
| <div class="relative"> |
| <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"> |
| <i class="fas fa-user text-gray-500"></i> |
| </div> |
| <input type="text" id="registerName" class="input-field w-full pl-12 pr-4 py-3 rounded-xl text-white placeholder-gray-500 focus:outline-none" placeholder="Иван Иванов" required> |
| </div> |
| </div> |
| |
| <div> |
| <label for="registerEmail" class="block text-gray-300 text-sm font-medium mb-2">Email адрес</label> |
| <div class="relative"> |
| <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"> |
| <i class="fas fa-envelope text-gray-500"></i> |
| </div> |
| <input type="email" id="registerEmail" class="input-field w-full pl-12 pr-4 py-3 rounded-xl text-white placeholder-gray-500 focus:outline-none" placeholder="name@example.com" required> |
| </div> |
| </div> |
| |
| <div> |
| <label for="registerPassword" class="block text-gray-300 text-sm font-medium mb-2">Пароль</label> |
| <div class="relative"> |
| <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"> |
| <i class="fas fa-lock text-gray-500"></i> |
| </div> |
| <input type="password" id="registerPassword" class="input-field w-full pl-12 pr-4 py-3 rounded-xl text-white placeholder-gray-500 focus:outline-none" placeholder="••••••••" required> |
| </div> |
| </div> |
| |
| <div> |
| <label for="registerConfirmPassword" class="block text-gray-300 text-sm font-medium mb-2">Подтвердите пароль</label> |
| <div class="relative"> |
| <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"> |
| <i class="fas fa-lock text-gray-500"></i> |
| </div> |
| <input type="password" id="registerConfirmPassword" class="input-field w-full pl-12 pr-4 py-3 rounded-xl text-white placeholder-gray-500 focus:outline-none" placeholder="••••••••" required> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-5 mb-4"> |
| <label class="flex items-start cursor-pointer group"> |
| <input type="checkbox" class="w-4 h-4 mt-0.5 rounded border-gray-600 bg-gray-800 text-indigo-500 focus:ring-indigo-500 focus:ring-offset-0"> |
| <span class="ml-2 text-sm text-gray-400 group-hover:text-gray-300 transition-colors">Я согласен с <a href="#" class="text-indigo-400 hover:text-indigo-300">условиями использования</a> и <a href="#" class="text-indigo-400 hover:text-indigo-300">политикой конфиденциальности</a></span> |
| </label> |
| </div> |
| |
| <button type="submit" class="btn-primary w-full py-3.5 rounded-xl text-white font-semibold text-base mb-4"> |
| Создать аккаунт |
| </button> |
| |
| <div class="text-center mt-auto"> |
| <p class="text-gray-400 text-sm"> |
| Уже есть аккаунт? |
| <button type="button" onclick="flipForm()" class="text-indigo-400 hover:text-indigo-300 font-medium link-hover ml-1">Войти</button> |
| </p> |
| </div> |
| </form> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mt-8 text-center"> |
| <p class="text-gray-500 text-xs"> |
| Защищено с помощью <span class="gradient-text font-medium">256-bit SSL</span> шифрования |
| </p> |
| </div> |
| </div> |
|
|
| <script> |
| function flipForm() { |
| document.querySelector('.form-flip').classList.toggle('flipped'); |
| } |
| |
| |
| if (localStorage.getItem('flipToRegister') === 'true') { |
| localStorage.removeItem('flipToRegister'); |
| document.querySelector('.form-flip').classList.add('flipped'); |
| } |
| |
| document.getElementById('loginForm').addEventListener('submit', function(e) { |
| e.preventDefault(); |
| const email = document.getElementById('loginEmail').value; |
| const password = document.getElementById('loginPassword').value; |
| |
| |
| alert(`Добро пожаловать, ${email}!`); |
| window.location.href = 'index.html'; |
| }); |
| |
| document.getElementById('registerForm').addEventListener('submit', function(e) { |
| e.preventDefault(); |
| const name = document.getElementById('registerName').value; |
| const email = document.getElementById('registerEmail').value; |
| const password = document.getElementById('registerPassword').value; |
| const confirmPassword = document.getElementById('registerConfirmPassword').value; |
| |
| if (password !== confirmPassword) { |
| alert('Пароли не совпадают!'); |
| return; |
| } |
| |
| alert(`Аккаунт для ${name} успешно создан!`); |
| flipForm(); |
| }); |
| </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=FrOsTiKoO/da" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
