Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Auth | SocialSphere</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="min-h-screen flex items-center justify-center p-4"> | |
| <div class="w-full max-w-md"> | |
| <div class="bg-white rounded-xl shadow-lg p-8"> | |
| <div class="text-center mb-8"> | |
| <h1 class="text-3xl font-bold text-blue-600 mb-2">SocialSphere</h1> | |
| <p class="text-gray-500">Connect with friends and the world</p> | |
| </div> | |
| <div id="auth-forms"> | |
| <!-- Login Form --> | |
| <form id="login-form" class="space-y-4"> | |
| <h2 class="text-xl font-semibold text-center">Login</h2> | |
| <div> | |
| <label for="login-email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> | |
| <input type="email" id="login-email" required class="w-full px-4 py-2 border rounded-lg focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="login-password" class="block text-sm font-medium text-gray-700 mb-1">Password</label> | |
| <input type="password" id="login-password" required class="w-full px-4 py-2 border rounded-lg focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <button type="submit" class="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition">Login</button> | |
| <p class="text-center text-sm text-gray-500"> | |
| Don't have an account? | |
| <a href="#" id="show-register" class="text-blue-600 hover:underline">Register</a> | |
| </p> | |
| </form> | |
| <!-- Register Form --> | |
| <form id="register-form" class="space-y-4 hidden"> | |
| <h2 class="text-xl font-semibold text-center">Register</h2> | |
| <div> | |
| <label for="register-name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label> | |
| <input type="text" id="register-name" required class="w-full px-4 py-2 border rounded-lg focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="register-username" class="block text-sm font-medium text-gray-700 mb-1">Username</label> | |
| <input type="text" id="register-username" required class="w-full px-4 py-2 border rounded-lg focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="register-email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> | |
| <input type="email" id="register-email" required class="w-full px-4 py-2 border rounded-lg focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="register-password" class="block text-sm font-medium text-gray-700 mb-1">Password</label> | |
| <input type="password" id="register-password" required class="w-full px-4 py-2 border rounded-lg focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <button type="submit" class="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition">Register</button> | |
| <p class="text-center text-sm text-gray-500"> | |
| Already have an account? | |
| <a href="#" id="show-login" class="text-blue-600 hover:underline">Login</a> | |
| </p> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |