Spaces:
Build error
Build error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Register</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| background-color: #f8f9fa; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .container { | |
| max-width: 400px; | |
| margin: 100px auto; | |
| padding: 20px; | |
| background-color: #fff; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| h2 { | |
| text-align: center; | |
| margin-bottom: 20px; | |
| } | |
| .form-group { | |
| margin-bottom: 15px; | |
| } | |
| .form-group label { | |
| font-size: 14px; | |
| color: #333; | |
| } | |
| .form-group input { | |
| width: 100%; | |
| padding: 10px; | |
| border: 1px solid #ccc; | |
| border-radius: 5px; | |
| font-size: 16px; | |
| } | |
| .form-group button { | |
| width: 100%; | |
| padding: 10px; | |
| background-color: #28a745; | |
| color: #fff; | |
| border: none; | |
| border-radius: 5px; | |
| font-size: 16px; | |
| cursor: pointer; | |
| } | |
| .form-group button:hover { | |
| background-color: #218838; | |
| } | |
| .message { | |
| text-align: center; | |
| margin-top: 20px; | |
| color: #28a745; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h2>Register</h2> | |
| <form id="register-form"> | |
| <div class="form-group"> | |
| <label for="name">Full Name</label> | |
| <input type="text" id="name" name="name" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="phone">Phone Number</label> | |
| <input type="text" id="phone" name="phone" required> | |
| </div> | |
| <div class="form-group"> | |
| <button type="submit">Sign Up</button> | |
| </div> | |
| </form> | |
| <div id="message" class="message"></div> | |
| </div> | |
| <script> | |
| document.getElementById("register-form").addEventListener("submit", function(event) { | |
| event.preventDefault(); // Prevent form submission | |
| // Get form values | |
| const name = document.getElementById("name").value; | |
| const phone = document.getElementById("phone").value; | |
| // Validate input | |
| if (name.trim() === "" || phone.trim() === "") { | |
| document.getElementById("message").innerText = "Please enter both your name and phone number."; | |
| document.getElementById("message").style.color = "red"; | |
| return; | |
| } | |
| // Simulate registration process (replace with actual backend API) | |
| const customer_id = "CUST" + Math.random().toString(36).substr(2, 6).toUpperCase(); | |
| // Display success message | |
| document.getElementById("message").innerHTML = ` | |
| Registration successful!<br> | |
| Welcome, ${name}.<br> | |
| Your customer ID is <strong>${customer_id}</strong>. | |
| `; | |
| document.getElementById("message").style.color = "#28a745"; | |
| }); | |
| </script> | |
| </body> | |
| </html> | |