|
|
<!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"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
keyframes: { |
|
|
typing: { |
|
|
"0%": { width: "0%" }, |
|
|
"100%": { width: "100%" } |
|
|
}, |
|
|
blink: { |
|
|
"0%": { opacity: 1 }, |
|
|
"50%": { opacity: 0 }, |
|
|
"100%": { opacity: 1 } |
|
|
}, |
|
|
fadeOut: { |
|
|
"0%": { opacity: 1 }, |
|
|
"100%": { opacity: 0 } |
|
|
}, |
|
|
slideUp: { |
|
|
"0%": { transform: "translateY(100%)", opacity: 0 }, |
|
|
"100%": { transform: "translateY(0)", opacity: 1 } |
|
|
} |
|
|
}, |
|
|
animation: { |
|
|
typing: "typing 2s steps(20, end)", |
|
|
blink: "blink 1s infinite", |
|
|
fadeOut: "fadeOut 1s forwards", |
|
|
slideUp: "slideUp 0.8s ease-out forwards" |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style type="text/tailwindcss"> |
|
|
@layer base { |
|
|
body { |
|
|
@apply bg-black text-white; |
|
|
} |
|
|
} |
|
|
.form-container { |
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease; |
|
|
} |
|
|
.form-container:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
.input-field:focus { |
|
|
outline: 1px solid white; |
|
|
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2); |
|
|
} |
|
|
.social-btn:hover { |
|
|
background-color: rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
.tab-btn.active { |
|
|
border-bottom: 2px solid white; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen flex items-center justify-center p-4"> |
|
|
|
|
|
<div id="welcome-screen" class="fixed inset-0 bg-white flex items-center justify-center z-50"> |
|
|
<div class="text-center"> |
|
|
<h1 id="welcome-text" class="text-4xl md:text-6xl font-bold text-black overflow-hidden whitespace-nowrap border-r-2 border-black animate-typing"> |
|
|
добро пожаловать |
|
|
</h1> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="main-content" class="w-full max-w-md hidden"> |
|
|
<div class="text-center mb-10"> |
|
|
<h1 class="text-3xl font-bold mb-2">Добро пожаловать</h1> |
|
|
<p class="text-gray-400">Войдите или зарегистрируйтесь для продолжения</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex border-b border-gray-700 mb-8"> |
|
|
<button id="login-tab" class="tab-btn flex-1 py-3 font-medium active">Вход</button> |
|
|
<button id="register-tab" class="tab-btn flex-1 py-3 font-medium">Регистрация</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="login-form" class="form-container bg-black border border-white rounded-lg p-8 animate-slideUp"> |
|
|
<form> |
|
|
<div class="mb-6"> |
|
|
<label for="login-email" class="block mb-2 text-sm">Email</label> |
|
|
<input type="email" id="login-email" class="input-field w-full bg-black border border-white rounded px-4 py-3 focus:outline-none"> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label for="login-password" class="block mb-2 text-sm">Пароль</label> |
|
|
<input type="password" id="login-password" class="input-field w-full bg-black border border-white rounded px-4 py-3 focus:outline-none"> |
|
|
</div> |
|
|
<div class="flex items-center justify-between mb-6"> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="remember" class="mr-2"> |
|
|
<label for="remember" class="text-sm">Запомнить меня</label> |
|
|
</div> |
|
|
<a href="#" class="text-sm hover:underline">Забыли пароль?</a> |
|
|
</div> |
|
|
<button type="submit" class="w-full bg-white text-black font-bold py-3 rounded hover:bg-gray-200 transition duration-300"> |
|
|
Войти |
|
|
</button> |
|
|
</form> |
|
|
|
|
|
<div class="my-6 flex items-center"> |
|
|
<div class="flex-grow border-t border-gray-700"></div> |
|
|
<span class="mx-4 text-gray-500 text-sm">или</span> |
|
|
<div class="flex-grow border-t border-gray-700"></div> |
|
|
</div> |
|
|
|
|
|
<button class="social-btn w-full border border-white rounded py-3 flex items-center justify-center mb-4"> |
|
|
<i class="fab fa-google mr-3 text-red-500"></i> |
|
|
<span>Войти через Google</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="register-form" class="form-container bg-black border border-white rounded-lg p-8 hidden"> |
|
|
<form> |
|
|
<div class="mb-6"> |
|
|
<label for="register-name" class="block mb-2 text-sm">Имя</label> |
|
|
<input type="text" id="register-name" class="input-field w-full bg-black border border-white rounded px-4 py-3 focus:outline-none"> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label for="register-email" class="block mb-2 text-sm">Email</label> |
|
|
<input type="email" id="register-email" class="input-field w-full bg-black border border-white rounded px-4 py-3 focus:outline-none"> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label for="register-password" class="block mb-2 text-sm">Пароль</label> |
|
|
<input type="password" id="register-password" class="input-field w-full bg-black border border-white rounded px-4 py-3 focus:outline-none"> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label for="register-confirm" class="block mb-2 text-sm">Подтвердите пароль</label> |
|
|
<input type="password" id="register-confirm" class="input-field w-full bg-black border border-white rounded px-4 py-3 focus:outline-none"> |
|
|
</div> |
|
|
<button type="submit" class="w-full bg-white text-black font-bold py-3 rounded hover:bg-gray-200 transition duration-300"> |
|
|
Зарегистрироваться |
|
|
</button> |
|
|
</form> |
|
|
|
|
|
<div class="my-6 flex items-center"> |
|
|
<div class="flex-grow border-t border-gray-700"></div> |
|
|
<span class="mx-4 text-gray-500 text-sm">или</span> |
|
|
<div class="flex-grow border-t border-gray-700"></div> |
|
|
</div> |
|
|
|
|
|
<button class="social-btn w-full border border-white rounded py-3 flex items-center justify-center mb-4"> |
|
|
<i class="fab fa-google mr-3 text-red-500"></i> |
|
|
<span>Зарегистрироваться через Google</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const welcomeScreen = document.getElementById('welcome-screen'); |
|
|
const mainContent = document.getElementById('main-content'); |
|
|
const welcomeText = document.getElementById('welcome-text'); |
|
|
const loginForm = document.getElementById('login-form'); |
|
|
const registerForm = document.getElementById('register-form'); |
|
|
const loginTab = document.getElementById('login-tab'); |
|
|
const registerTab = document.getElementById('register-tab'); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
welcomeText.style.animation = 'fadeOut 1s forwards'; |
|
|
}, 2500); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
welcomeScreen.style.display = 'none'; |
|
|
mainContent.style.display = 'block'; |
|
|
}, 3500); |
|
|
|
|
|
|
|
|
loginTab.addEventListener('click', () => { |
|
|
loginTab.classList.add('active'); |
|
|
registerTab.classList.remove('active'); |
|
|
loginForm.classList.remove('hidden'); |
|
|
registerForm.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
registerTab.addEventListener('click', () => { |
|
|
registerTab.classList.add('active'); |
|
|
loginTab.classList.remove('active'); |
|
|
registerForm.classList.remove('hidden'); |
|
|
loginForm.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
const forms = document.querySelectorAll('form'); |
|
|
forms.forEach(form => { |
|
|
form.addEventListener('submit', (e) => { |
|
|
e.preventDefault(); |
|
|
|
|
|
alert('Форма отправлена!'); |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</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=2KKLabs/asdf" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
