Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NRI HACKS</title> | |
| <style> | |
| /* Basic Reset */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: Arial, sans-serif; | |
| background-color: #000000; /* Black background */ | |
| color: #ffa500; /* Orange text */ | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| background-image: url('{{ url_for('static', filename='index.jpg') }}'); /* Add your image path here */ | |
| background-size: cover; /* Ensure the image covers the entire background */ | |
| background-position: center; /* Center the image */ | |
| } | |
| .form-container { | |
| width: 100%; | |
| max-width: 450px; | |
| background-color: rgba(51, 51, 51, 0.8); /* Dark background with opacity for the form */ | |
| padding: 20px; | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | |
| border-radius: 8px; | |
| } | |
| h2 { | |
| text-align: center; | |
| color: #ffa500; /* Orange text */ | |
| margin-bottom: 20px; | |
| } | |
| .form-group { | |
| margin-bottom: 15px; | |
| } | |
| .form-group label { | |
| font-size: 14px; | |
| color: #ffa500; /* Orange text */ | |
| display: block; | |
| } | |
| .form-group input, | |
| .form-group select { | |
| width: 100%; | |
| padding: 10px; | |
| font-size: 14px; | |
| border: 1px solid #ffa500; /* Orange border */ | |
| border-radius: 5px; | |
| margin-top: 5px; | |
| background-color: #222222; /* Dark background for input fields */ | |
| color: #ffa500; /* Orange text in inputs */ | |
| } | |
| .form-group input[type="submit"] { | |
| background-color: #ffa500; /* Orange background for submit button */ | |
| color: black; | |
| border: none; | |
| cursor: pointer; | |
| } | |
| .form-group input[type="submit"]:hover { | |
| background-color: #cc8400; /* Darker orange on hover */ | |
| } | |
| .switch-form { | |
| text-align: center; | |
| font-size: 14px; | |
| } | |
| .switch-form span { | |
| color: #d5d2cd; /* Orange text */ | |
| cursor: pointer; | |
| font-weight: bold; | |
| } | |
| .form-content { | |
| display: none; | |
| } | |
| .form-content.active { | |
| display: block; | |
| } | |
| #registration-form .form-group { | |
| display: block; | |
| } | |
| #registration-form .form-group input, | |
| #registration-form .form-group select { | |
| width: 100%; | |
| } | |
| #registration-form .form-group input[type="submit"] { | |
| margin-top: 10px; | |
| } | |
| /* Gender dropdown style (no default selection) */ | |
| #registration-form .form-group select { | |
| padding: 10px; | |
| border-radius: 5px; | |
| border: 1px solid #ffa500; /* Orange border */ | |
| } | |
| /* Fixing the age input size issue */ | |
| #registration-form .form-group input#age { | |
| width: 100%; | |
| } | |
| /* Style for the age, height, weight fields side by side */ | |
| #registration-form .form-group input#height, | |
| #registration-form .form-group input#weight { | |
| width: 48%; | |
| } | |
| #registration-form .form-group { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 4%; | |
| } | |
| /* Mobile responsiveness */ | |
| @media (max-width: 500px) { | |
| .form-container { | |
| width: 90%; | |
| } | |
| #registration-form .form-group { | |
| display: block; | |
| } | |
| #registration-form .form-group input, | |
| #registration-form .form-group select { | |
| width: 100%; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="form-container"> | |
| <!-- Login Form --> | |
| <div id="login-form" class="form-content active"> | |
| <h2>Login</h2> | |
| <form id="login-form-element" method="post"> | |
| <div class="form-group"> | |
| <label for="login-email">Email:</label> | |
| <input type="email" id="login-email" name="email" required /> | |
| </div> | |
| <div class="form-group"> | |
| <label for="login-password">Password:</label> | |
| <input type="password" id="login-password" name="password" required /> | |
| </div> | |
| <div class="form-group"> | |
| <input type="submit" value="Login" /> | |
| </div> | |
| <p class="switch-form">Don't have an account? <span id="to-register">Sign up</span></p> | |
| </form> | |
| </div> | |
| <!-- Registration Form --> | |
| <div id="registration-form" class="form-content"> | |
| <h2>Sign Up</h2> | |
| <form id="registration-form-element" method="post"> | |
| <div class="form-group"> | |
| <label for="name">Name:</label> | |
| <input type="text" id="name" name="name" required /> | |
| </div> | |
| <div class="form-group"> | |
| <label for="email">Email:</label> | |
| <input type="email" id="email" name="email" required /> | |
| </div> | |
| <div class="form-group"> | |
| <label for="password">Password:</label> | |
| <input type="password" id="password" name="password" required /> | |
| </div> | |
| <div class="form-group"> | |
| <label for="age">Age:</label> | |
| <input type="number" id="age" name="age" required /> | |
| </div> | |
| <div class="form-group"> | |
| <label for="height">Height (cm):</label> | |
| <input type="number" id="height" name="height" required /> | |
| </div> | |
| <div class="form-group"> | |
| <label for="weight">Weight (kg):</label> | |
| <input type="number" id="weight" name="weight" required /> | |
| </div> | |
| <div class="form-group"> | |
| <label for="max-pullups">Max Pullups:</label> | |
| <input type="number" id="max-pullups" name="maxPullups" required /> | |
| </div> | |
| <div class="form-group"> | |
| <label for="min-pullups">Min Pullups:</label> | |
| <input type="number" id="min-pullups" name="minPullups" required /> | |
| </div> | |
| <div class="form-group"> | |
| <label for="gender">Gender:</label> | |
| <select id="gender" name="gender" required> | |
| <option value="male">Male</option> | |
| <option value="female">Female</option> | |
| <option value="other">Other</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <input type="submit" value="Sign Up" /> | |
| </div> | |
| <p class="switch-form">Already have an account? <span id="to-login">Login</span></p> | |
| </form> | |
| </div> | |
| </div> | |
| <script> | |
| document.getElementById("to-register").addEventListener("click", function() { | |
| document.getElementById("login-form").classList.remove("active"); | |
| document.getElementById("registration-form").classList.add("active"); | |
| }); | |
| document.getElementById("to-login").addEventListener("click", function() { | |
| document.getElementById("registration-form").classList.remove("active"); | |
| document.getElementById("login-form").classList.add("active"); | |
| }); | |
| // Registration form submit | |
| document.getElementById("registration-form-element").addEventListener("submit", function(event) { | |
| event.preventDefault(); // Prevent the form from submitting normally | |
| const name = document.getElementById("name").value; | |
| const email = document.getElementById("email").value; | |
| const password = document.getElementById("password").value; | |
| const age = document.getElementById("age").value; | |
| const height = document.getElementById("height").value; | |
| const weight = document.getElementById("weight").value; | |
| const maxPullups = document.getElementById("max-pullups").value; | |
| const minPullups = document.getElementById("min-pullups").value; | |
| const gender = document.getElementById("gender").value; | |
| fetch("/register", { | |
| method: "POST", | |
| headers: { | |
| "Content-Type": "application/json" | |
| }, | |
| body: JSON.stringify({ | |
| name, | |
| email, | |
| password, | |
| age, | |
| height, | |
| weight, | |
| maxPullups, | |
| minPullups, | |
| gender | |
| }) | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| if (data.message) { | |
| // alert(data.message); | |
| window.location.href = "/home"; // Redirect after successful registration | |
| } else { | |
| // alert(data.error); | |
| } | |
| }) | |
| .catch(error => { | |
| console.error("Error during registration:", error); | |
| alert("An error occurred during registration"); | |
| }); | |
| }); | |
| // Login form submit | |
| document.getElementById("login-form-element").addEventListener("submit", function(event) { | |
| event.preventDefault(); // Prevent the form from submitting normally | |
| const email = document.getElementById("login-email").value; | |
| const password = document.getElementById("login-password").value; | |
| fetch("/login", { | |
| method: "POST", | |
| headers: { | |
| "Content-Type": "application/json" | |
| }, | |
| body: JSON.stringify({ | |
| email: email, | |
| password: password | |
| }) | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| if (data.message) { | |
| window.location.href = "/home"; // Redirect after successful login | |
| } else { | |
| alert(data.error); | |
| } | |
| }) | |
| .catch(error => { | |
| console.error("Error during login:", error); | |
| alert("An error occurred during login"); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |