Hugging Face's logo

Spaces:
nagasurendra
/
BiryaniHubflask21
Sleeping

App Files Community
4
DSatishchandra commited on
Commit
15ce0cf
·
verified ·
1 Parent(s): 6cca62e

Update templates/signup.html

Browse files
Files changed (1) hide show
  1. templates/signup.html +135 -16
templates/signup.html CHANGED
@@ -1,24 +1,143 @@
1
  <!DOCTYPE html>
2
- <html>
3
  <head>
 
 
4
  <title>Signup</title>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5
  </head>
6
  <body>
7
- <h1>Biryani Hub - Signup</h1>
8
- <form method="POST">
9
- <label>Name:</label>
10
- <input type="text" name="name" required><br>
11
- <label>Email:</label>
12
- <input type="email" name="email" required><br>
13
- <label>Phone:</label>
14
- <input type="text" name="phone" required><br>
15
- <label>Password:</label>
16
- <input type="password" name="password" required><br>
17
- <button type="submit">Signup</button>
18
- <p><a href="/">Already have an account? Login here.</a></p>
 
 
 
 
 
 
19
  {% if error %}
20
- <p style="color: red;">{{ error }}</p>
21
  {% endif %}
22
- </form>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
23
  </body>
24
- </html>
 
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>Signup</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ background: linear-gradient(to right, #6a11cb, #2575fc);
11
+ margin: 0;
12
+ display: flex;
13
+ justify-content: center;
14
+ align-items: center;
15
+ height: 100vh;
16
+ color: #fff;
17
+ }
18
+ .form-container {
19
+ background: #ffffff;
20
+ padding: 20px 30px;
21
+ border-radius: 10px;
22
+ width: 100%;
23
+ max-width: 400px;
24
+ text-align: center;
25
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
26
+ color: #333;
27
+ }
28
+ .form-container h2 {
29
+ margin-bottom: 20px;
30
+ color: #333;
31
+ }
32
+ .form-container label {
33
+ display: block;
34
+ text-align: left;
35
+ margin: 10px 0 5px;
36
+ }
37
+ .form-container input {
38
+ width: 100%;
39
+ padding: 10px;
40
+ margin-bottom: 15px;
41
+ border: 1px solid #ccc;
42
+ border-radius: 5px;
43
+ }
44
+ .form-container button {
45
+ width: 100%;
46
+ padding: 10px;
47
+ background-color: #6a11cb;
48
+ color: #fff;
49
+ border: none;
50
+ border-radius: 5px;
51
+ font-size: 16px;
52
+ cursor: pointer;
53
+ }
54
+ .form-container button:hover {
55
+ background-color: #2575fc;
56
+ }
57
+ .form-container p {
58
+ margin-top: 10px;
59
+ }
60
+ .form-container a {
61
+ color: #6a11cb;
62
+ text-decoration: none;
63
+ }
64
+ .form-container a:hover {
65
+ text-decoration: underline;
66
+ }
67
+ .error-message {
68
+ color: red;
69
+ margin-top: 10px;
70
+ }
71
+ </style>
72
  </head>
73
  <body>
74
+ <div class="form-container">
75
+ <h2>Signup</h2>
76
+ <form action="/signup" method="POST">
77
+ <label for="name">Name:</label>
78
+ <input type="text" id="name" name="name" placeholder="Enter your name" required>
79
+
80
+ <label for="phone">Phone:</label>
81
+ <input type="text" id="phone" name="phone" placeholder="Enter your phone number" required>
82
+
83
+ <label for="email">Email:</label>
84
+ <input type="email" id="email" name="email" placeholder="Enter your email" required>
85
+
86
+ <label for="password">Password:</label>
87
+ <input type="password" id="password" name="password" placeholder="Enter your password" required>
88
+
89
+ <button type="submit">Sign Up</button>
90
+ </form>
91
+ <p>Already have an account? <a href="/login">Login</a></p>
92
  {% if error %}
93
+ <p class="error-message">{{ error }}</p>
94
  {% endif %}
95
+ </div>
96
+ <div id="otp-section">
97
+ <input type="text" id="phone-number" placeholder="Enter your mobile number">
98
+ <button onclick="sendOTP()">Send OTP</button>
99
+ <input type="text" id="otp-input" placeholder="Enter OTP">
100
+ <button onclick="verifyOTP()">Verify OTP</button>
101
+ </div>
102
+ <script>
103
+ function sendOTP() {
104
+ const phone = document.getElementById('phone-number').value;
105
+ fetch('/send_otp', {
106
+ method: 'POST',
107
+ headers: { 'Content-Type': 'application/json' },
108
+ body: JSON.stringify({ phone })
109
+ })
110
+ .then(response => response.json())
111
+ .then(data => {
112
+ if (data.success) {
113
+ alert(data.message);
114
+ } else {
115
+ alert('Error sending OTP: ' + (data.error || 'Unknown error'));
116
+ }
117
+ })
118
+ .catch(error => console.error('Error:', error));
119
+ }
120
+
121
+ function verifyOTP() {
122
+ const phone = document.getElementById('phone').value;
123
+ const otp = document.getElementById('otp').value;
124
+
125
+ fetch('/verify_otp', {
126
+ method: 'POST',
127
+ headers: { 'Content-Type': 'application/json' },
128
+ body: JSON.stringify({ phone, otp })
129
+ })
130
+ .then(response => response.json())
131
+ .then(data => {
132
+ if (data.success) {
133
+ alert(data.message);
134
+ } else {
135
+ alert(data.error);
136
+ }
137
+ })
138
+ .catch(error => console.error('Error:', error));
139
+ }
140
+ </script>
141
+
142
  </body>
143
+ </html>