Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Create Account - Booknap</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| background: linear-gradient(180deg, #0b1020, #0b1022 30%, #0b1124); | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| } | |
| .signup-container { | |
| width: 100%; | |
| max-width: 520px; | |
| padding: 20px; | |
| } | |
| .signup-card { | |
| background: rgba(255,255,255,0.04); | |
| -webkit-backdrop-filter: blur(10px); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255,255,255,0.08); | |
| border-radius: 16px; | |
| padding: 40px; | |
| box-shadow: 0 16px 40px rgba(0,0,0,0.12); | |
| text-align: center; | |
| } | |
| .signup-card h2 { | |
| color: white; | |
| margin-bottom: 10px; | |
| font-size: 32px; | |
| font-weight: 700; | |
| } | |
| .signup-subtitle { | |
| color: #cbd5e1; | |
| margin-bottom: 30px; | |
| font-size: 16px; | |
| font-weight: 400; | |
| } | |
| .input-group { | |
| margin-bottom: 20px; | |
| text-align: left; | |
| } | |
| .input-group label { | |
| display: block; | |
| margin-bottom: 8px; | |
| color: white; | |
| font-weight: 500; | |
| font-size: 14px; | |
| } | |
| .input-group input { | |
| width: 100%; | |
| padding: 0.75rem 0.9rem; | |
| border: 1px solid rgba(255,255,255,0.12); | |
| border-radius: 10px; | |
| font-size: 16px; | |
| transition: all 0.3s ease; | |
| background: rgba(15,23,42,0.7); | |
| color: white; | |
| } | |
| .input-group input:focus { | |
| outline: none; | |
| border-color: rgba(59,130,246,0.55); | |
| background: rgba(15,23,42,0.7); | |
| box-shadow: 0 0 0 3px rgba(59,130,246,0.15); | |
| } | |
| .input-group input::placeholder { | |
| color: #94a3b8; | |
| } | |
| .checkbox-group { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin: 20px 0; | |
| font-size: 14px; | |
| } | |
| .checkbox-wrapper { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .checkbox-wrapper input[type="checkbox"] { | |
| width: 18px; | |
| height: 18px; | |
| accent-color: #3b82f6; | |
| } | |
| .checkbox-wrapper label { | |
| color: white; | |
| cursor: pointer; | |
| } | |
| .terms-link { | |
| color: #93c5fd; | |
| text-decoration: none; | |
| } | |
| .terms-link:hover { | |
| text-decoration: underline; | |
| } | |
| .signup-submit-btn { | |
| width: 100%; | |
| padding: 0.85rem 1rem; | |
| background: linear-gradient(90deg, #3b82f6, #6366f1); | |
| color: white; | |
| border: none; | |
| border-radius: 12px; | |
| font-size: 16px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| margin: 20px 0; | |
| } | |
| .signup-submit-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3); | |
| } | |
| .divider { | |
| display: flex; | |
| align-items: center; | |
| margin: 25px 0; | |
| color: #94a3b8; | |
| font-size: 14px; | |
| } | |
| .divider::before, | |
| .divider::after { | |
| content: ''; | |
| flex: 1; | |
| height: 1px; | |
| background: rgba(255,255,255,0.15); | |
| } | |
| .divider span { | |
| padding: 0 15px; | |
| } | |
| .google-btn { | |
| width: 100%; | |
| padding: 0.75rem 1rem; | |
| background: rgba(255,255,255,0.06); | |
| color: white; | |
| border: 1px solid rgba(255,255,255,0.12); | |
| border-radius: 10px; | |
| font-size: 16px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 10px; | |
| } | |
| .google-btn:hover { | |
| background: rgba(255,255,255,0.08); | |
| border-color: rgba(255,255,255,0.2); | |
| } | |
| .google-icon { | |
| width: 20px; | |
| height: 20px; | |
| background: white; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: bold; | |
| color: #1f2937; | |
| font-size: 14px; | |
| } | |
| .login-link { | |
| margin-top: 25px; | |
| color: #94a3b8; | |
| font-size: 14px; | |
| } | |
| .login-link a { | |
| color: #93c5fd; | |
| text-decoration: none; | |
| font-weight: 600; | |
| } | |
| .login-link a:hover { | |
| text-decoration: underline; | |
| } | |
| .error-message { | |
| background: rgba(239, 68, 68, 0.1); | |
| color: #fca5a5; | |
| padding: 12px; | |
| border-radius: 8px; | |
| margin-bottom: 20px; | |
| font-size: 14px; | |
| display: none; | |
| border: 1px solid rgba(239, 68, 68, 0.2); | |
| } | |
| .success-message { | |
| background: rgba(34, 197, 94, 0.1); | |
| color: #86efac; | |
| padding: 12px; | |
| border-radius: 8px; | |
| margin-bottom: 20px; | |
| font-size: 14px; | |
| display: none; | |
| border: 1px solid rgba(34, 197, 94, 0.2); | |
| } | |
| @media (max-width: 480px) { | |
| .signup-card { | |
| padding: 30px 20px; | |
| } | |
| .signup-card h2 { | |
| font-size: 28px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <main class="signup-container"> | |
| <div class="signup-card"> | |
| <h2>Join Booknap</h2> | |
| <p class="signup-subtitle">Create your account to start your reading journey</p> | |
| <div id="errorMessage" class="error-message"></div> | |
| <div id="successMessage" class="success-message"></div> | |
| <form id="signupForm"> | |
| <div class="input-group"> | |
| <label for="fullName">Full Name</label> | |
| <input type="text" id="fullName" name="fullName" placeholder="Enter your full name" required> | |
| </div> | |
| <div class="input-group"> | |
| <label for="email">Email</label> | |
| <input type="email" id="email" name="email" placeholder="Enter your email address" required> | |
| </div> | |
| <div class="input-group"> | |
| <label for="password">Password</label> | |
| <input type="password" id="password" name="password" placeholder="Create a strong password" required> | |
| </div> | |
| <div class="input-group"> | |
| <label for="confirmPassword">Confirm Password</label> | |
| <input type="password" id="confirmPassword" name="confirmPassword" placeholder="Confirm your password" required> | |
| </div> | |
| <div class="checkbox-group"> | |
| <div class="checkbox-wrapper"> | |
| <input type="checkbox" id="agreeTerms" name="agreeTerms" required> | |
| <label for="agreeTerms">I agree to the <a href="#" class="terms-link">Terms of Service</a></label> | |
| </div> | |
| </div> | |
| <button type="submit" class="signup-submit-btn">Create Account</button> | |
| </form> | |
| <div class="divider"> | |
| <span>or</span> | |
| </div> | |
| <button class="google-btn"> | |
| <div class="google-icon">G</div> | |
| Continue with Google | |
| </button> | |
| <p class="login-link">Already have an account? <a href="login.html">Sign in</a></p> | |
| </div> | |
| </main> | |
| <script> | |
| document.getElementById('signupForm').addEventListener('submit', async function(event) { | |
| event.preventDefault(); | |
| const fullName = document.getElementById('fullName').value; | |
| const email = document.getElementById('email').value; | |
| const password = document.getElementById('password').value; | |
| const confirmPassword = document.getElementById('confirmPassword').value; | |
| const agreeTerms = document.getElementById('agreeTerms').checked; | |
| // Hide previous messages | |
| document.getElementById('errorMessage').style.display = 'none'; | |
| document.getElementById('successMessage').style.display = 'none'; | |
| // Basic validation | |
| if (!agreeTerms) { | |
| showMessage('Please agree to the Terms of Service', 'error'); | |
| return; | |
| } | |
| if (password !== confirmPassword) { | |
| showMessage('Passwords do not match', 'error'); | |
| return; | |
| } | |
| if (password.length < 6) { | |
| showMessage('Password must be at least 6 characters long', 'error'); | |
| return; | |
| } | |
| try { | |
| const response = await fetch('/signup', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify({ fullName, email, password }), | |
| }); | |
| const data = await response.json(); | |
| if (response.ok) { | |
| showMessage(data.message, 'success'); | |
| // Redirect to login page after successful signup | |
| setTimeout(() => { | |
| window.location.href = 'login.html'; | |
| }, 2000); | |
| } else { | |
| showMessage(data.error, 'error'); | |
| } | |
| } catch (error) { | |
| showMessage('An error occurred. Please try again.', 'error'); | |
| } | |
| }); | |
| function showMessage(message, type) { | |
| const errorDiv = document.getElementById('errorMessage'); | |
| const successDiv = document.getElementById('successMessage'); | |
| if (type === 'error') { | |
| errorDiv.textContent = message; | |
| errorDiv.style.display = 'block'; | |
| successDiv.style.display = 'none'; | |
| } else { | |
| successDiv.textContent = message; | |
| successDiv.style.display = 'block'; | |
| errorDiv.style.display = 'none'; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> | |