Hugging Face's logo

Spaces:
DSatishchandra
/
QRCodeMenu
Running

App Files Community
DSatishchandra commited on
Commit
0ff9b39
•
1 Parent(s): ec8c44b

Create register.html

Browse files
Files changed (1) hide show
  1. templates/register.html +107 -0
templates/register.html ADDED
@@ -0,0 +1,107 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Register</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ background-color: #f8f9fa;
11
+ margin: 0;
12
+ padding: 0;
13
+ }
14
+ .container {
15
+ max-width: 400px;
16
+ margin: 100px auto;
17
+ padding: 20px;
18
+ background-color: #fff;
19
+ border-radius: 8px;
20
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
21
+ }
22
+ h2 {
23
+ text-align: center;
24
+ margin-bottom: 20px;
25
+ }
26
+ .form-group {
27
+ margin-bottom: 15px;
28
+ }
29
+ .form-group label {
30
+ font-size: 14px;
31
+ color: #333;
32
+ }
33
+ .form-group input {
34
+ width: 100%;
35
+ padding: 10px;
36
+ border: 1px solid #ccc;
37
+ border-radius: 5px;
38
+ font-size: 16px;
39
+ }
40
+ .form-group button {
41
+ width: 100%;
42
+ padding: 10px;
43
+ background-color: #28a745;
44
+ color: #fff;
45
+ border: none;
46
+ border-radius: 5px;
47
+ font-size: 16px;
48
+ cursor: pointer;
49
+ }
50
+ .form-group button:hover {
51
+ background-color: #218838;
52
+ }
53
+ .message {
54
+ text-align: center;
55
+ margin-top: 20px;
56
+ color: #28a745;
57
+ }
58
+ </style>
59
+ </head>
60
+ <body>
61
+ <div class="container">
62
+ <h2>Register</h2>
63
+ <form id="register-form">
64
+ <div class="form-group">
65
+ <label for="name">Full Name</label>
66
+ <input type="text" id="name" name="name" required>
67
+ </div>
68
+ <div class="form-group">
69
+ <label for="phone">Phone Number</label>
70
+ <input type="text" id="phone" name="phone" required>
71
+ </div>
72
+ <div class="form-group">
73
+ <button type="submit">Sign Up</button>
74
+ </div>
75
+ </form>
76
+ <div id="message" class="message"></div>
77
+ </div>
78
+
79
+ <script>
80
+ document.getElementById("register-form").addEventListener("submit", function(event) {
81
+ event.preventDefault(); // Prevent form submission
82
+
83
+ // Get form values
84
+ const name = document.getElementById("name").value;
85
+ const phone = document.getElementById("phone").value;
86
+
87
+ // Validate input
88
+ if (name.trim() === "" || phone.trim() === "") {
89
+ document.getElementById("message").innerText = "Please enter both your name and phone number.";
90
+ document.getElementById("message").style.color = "red";
91
+ return;
92
+ }
93
+
94
+ // Simulate registration process (replace with actual backend API)
95
+ const customer_id = "CUST" + Math.random().toString(36).substr(2, 6).toUpperCase();
96
+
97
+ // Display success message
98
+ document.getElementById("message").innerHTML = `
99
+ Registration successful!<br>
100
+ Welcome, ${name}.<br>
101
+ Your customer ID is <strong>${customer_id}</strong>.
102
+ `;
103
+ document.getElementById("message").style.color = "#28a745";
104
+ });
105
+ </script>
106
+ </body>
107
+ </html>