Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Chat App | Login</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap'); | |
| :root { | |
| --primary-color: #7c3aed; | |
| --primary-light: #a78bfa; | |
| --dark-bg: #0f172a; | |
| --dark-glass: rgba(15, 23, 42, 0.7); | |
| --text-light: #e2e8f0; | |
| --text-muted: #94a3b8; | |
| --border-radius: 12px; | |
| --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background: linear-gradient(135deg, #1e293b, #0f172a); | |
| min-height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| padding: 20px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| body::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: radial-gradient(circle, rgba(124, 58, 237, 0.1) 0%, transparent 70%); | |
| animation: float 15s infinite alternate; | |
| z-index: -1; | |
| } | |
| @keyframes float { | |
| 0% { | |
| transform: translate(0, 0); | |
| } | |
| 50% { | |
| transform: translate(30px, 30px); | |
| } | |
| 100% { | |
| transform: translate(-30px, -30px); | |
| } | |
| } | |
| .container { | |
| width: 100%; | |
| max-width: 420px; | |
| perspective: 1000px; | |
| } | |
| .auth-box { | |
| background: var(--dark-glass); | |
| backdrop-filter: blur(16px); | |
| -webkit-backdrop-filter: blur(16px); | |
| border-radius: var(--border-radius); | |
| padding: 40px; | |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| transform-style: preserve-3d; | |
| transition: var(--transition); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .auth-box::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 4px; | |
| background: linear-gradient(90deg, var(--primary-color), var(--primary-light)); | |
| } | |
| .logo { | |
| text-align: center; | |
| margin-bottom: 30px; | |
| color: var(--text-light); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .logo i { | |
| font-size: 36px; | |
| color: var(--primary-light); | |
| margin-bottom: 10px; | |
| } | |
| .logo h1 { | |
| font-size: 24px; | |
| font-weight: 600; | |
| letter-spacing: 1px; | |
| } | |
| .form-container { | |
| position: relative; | |
| height: 380px; | |
| overflow: hidden; | |
| } | |
| .form { | |
| position: absolute; | |
| width: 100%; | |
| transition: var(--transition); | |
| } | |
| .form.login { | |
| transform: translateX(0); | |
| opacity: 1; | |
| } | |
| .form.register { | |
| transform: translateX(100%); | |
| opacity: 0; | |
| } | |
| .auth-box.register .form.login { | |
| transform: translateX(-100%); | |
| opacity: 0; | |
| } | |
| .auth-box.register .form.register { | |
| transform: translateX(0); | |
| opacity: 1; | |
| } | |
| .form-group { | |
| margin-bottom: 20px; | |
| position: relative; | |
| } | |
| .form-group label { | |
| display: block; | |
| color: var(--text-muted); | |
| font-size: 14px; | |
| margin-bottom: 8px; | |
| } | |
| .form-control { | |
| width: 100%; | |
| padding: 12px 16px; | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: var(--border-radius); | |
| color: var(--text-light); | |
| font-family: inherit; | |
| font-size: 15px; | |
| transition: var(--transition); | |
| } | |
| .form-control:focus { | |
| outline: none; | |
| border-color: var(--primary-light); | |
| box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2); | |
| } | |
| .btn { | |
| width: 100%; | |
| padding: 12px; | |
| background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); | |
| border: none; | |
| border-radius: var(--border-radius); | |
| color: white; | |
| font-weight: 500; | |
| font-size: 16px; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| margin-top: 10px; | |
| } | |
| .btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3); | |
| } | |
| .switch-form { | |
| text-align: center; | |
| margin-top: 20px; | |
| color: var(--text-muted); | |
| font-size: 14px; | |
| } | |
| .switch-btn { | |
| background: none; | |
| border: none; | |
| color: var(--primary-light); | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| padding: 0; | |
| font-family: inherit; | |
| font-size: inherit; | |
| } | |
| .switch-btn:hover { | |
| color: var(--primary-color); | |
| text-decoration: underline; | |
| } | |
| .footer { | |
| text-align: center; | |
| margin-top: 30px; | |
| color: var(--text-muted); | |
| font-size: 12px; | |
| } | |
| .footer a { | |
| color: var(--primary-light); | |
| text-decoration: none; | |
| transition: var(--transition); | |
| } | |
| .footer a:hover { | |
| color: var(--primary-color); | |
| } | |
| @media (max-width: 480px) { | |
| .auth-box { | |
| padding: 30px 20px; | |
| } | |
| .logo h1 { | |
| font-size: 20px; | |
| } | |
| .form-container { | |
| height: 340px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="auth-box" id="authBox"> | |
| <div class="logo"> | |
| <i class="fas fa-comment-dots"></i> | |
| <h1>Chat App</h1> | |
| </div> | |
| <div class="form-container"> | |
| <form class="form login" id="loginForm"> | |
| <div class="form-group"> | |
| <label for="loginEmail">Email</label> | |
| <input type="email" id="loginEmail" class="form-control" placeholder="Enter your email" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="loginPassword">Password</label> | |
| <input type="password" id="loginPassword" class="form-control" placeholder="Enter your password" required> | |
| </div> | |
| <button type="submit" class="btn">Login</button> | |
| <div class="switch-form"> | |
| Don't have an account? <button type="button" class="switch-btn" id="switchToRegister">Register</button> | |
| </div> | |
| </form> | |
| <form class="form register" id="registerForm"> | |
| <div class="form-group"> | |
| <label for="registerName">Full Name</label> | |
| <input type="text" id="registerName" class="form-control" placeholder="Enter your full name" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="registerEmail">Email</label> | |
| <input type="email" id="registerEmail" class="form-control" placeholder="Enter your email" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="registerPassword">Password</label> | |
| <input type="password" id="registerPassword" class="form-control" placeholder="Create a password" required> | |
| </div> | |
| <button type="submit" class="btn">Register</button> | |
| <div class="switch-form"> | |
| Already have an account? <button type="button" class="switch-btn" id="switchToLogin">Login</button> | |
| </div> | |
| </form> | |
| </div> | |
| <div class="footer"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const authBox = document.getElementById('authBox'); | |
| const switchToRegister = document.getElementById('switchToRegister'); | |
| const switchToLogin = document.getElementById('switchToLogin'); | |
| switchToRegister.addEventListener('click', function() { | |
| authBox.classList.add('register'); | |
| }); | |
| switchToLogin.addEventListener('click', function() { | |
| authBox.classList.remove('register'); | |
| }); | |
| // Form submission | |
| document.getElementById('loginForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Add your login logic here | |
| alert('Login functionality would be implemented here'); | |
| }); | |
| document.getElementById('registerForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Add your registration logic here | |
| alert('Registration functionality would be implemented here'); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |