Hugging Face's logo

Spaces:
FrOsTiKoO
/
da
Running

App Files Community
da / login.html
FrOsTiKoO's picture
FrOsTiKoO
🐳 20/02 - 20:46 - В подобной стилистике, как и форма авторизации, создай форму регистрации, а также главную форму сайта по продаже окон. И сделай возможность взаимодействия между этими формами.
7131174 verified
Raw
History Blame Contribute Delete
19.1 kB
<!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">
 <!-- Animated background orbs -->
 <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">
 <!-- Back to Home Button -->
 <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>
<!-- Header -->
 <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>
<!-- Form Card -->
 <div class="glass-card rounded-3xl overflow-hidden relative form-container" style="min-height: 520px;">
 <div class="form-flip relative w-full h-full">
 <!-- Login Form -->
 <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>
<!-- Register Form -->
 <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>
<!-- Footer -->
 <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');
 }
// Check if we need to flip to register (from main page)
 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;
// Simulation of login - redirect to main page after success
 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>