Hugging Face's logo

Spaces:
Yaswanth56
/
testing_1
Sleeping

App Files Community
Yaswanth56 commited on
Commit
c94efcc
·
verified ·
1 Parent(s): 8643c2a

Update templates/login.html

Browse files
Files changed (1) hide show
  1. templates/login.html +33 -22
templates/login.html CHANGED
@@ -3,18 +3,18 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Restaurant Login</title>
7
  <link rel="stylesheet" href="/static/styles.css">
8
  <style>
9
  body {
10
  font-family: 'Arial', sans-serif;
11
- background-color: #fff9f0; /* Light background color */
12
  display: flex;
13
  justify-content: center;
14
  align-items: center;
15
  height: 100vh;
16
  margin: 0;
17
- background-image: url('https://www.shutterstock.com/search/restaurant+background'); /* Add restaurant image as background */
18
  background-size: cover;
19
  background-position: center;
20
  }
@@ -26,11 +26,11 @@
26
  width: 100%;
27
  max-width: 400px;
28
  text-align: center;
29
- background-color: rgba(255, 255, 255, 0.8); /* Slight transparency */
30
  }
31
  .login-container h1 {
32
- font-size: 28px;
33
- color: #6d4c41; /* Warm brown color */
34
  margin-bottom: 20px;
35
  font-family: 'Courier New', Courier, monospace;
36
  }
@@ -49,21 +49,21 @@
49
  text-align: center;
50
  }
51
  .input-group input:focus {
52
- border-color: #ff7043; /* Warm orange color */
53
  }
54
  button {
55
  width: 100%;
56
  padding: 14px;
57
  font-size: 16px;
58
  border-radius: 30px;
59
- background: #ff7043; /* Warm orange button */
60
  color: white;
61
  border: none;
62
  cursor: pointer;
63
  transition: background-color 0.3s ease;
64
  }
65
  button:hover {
66
- background: #f4511e; /* Darker orange for hover */
67
  }
68
  .forgot-link {
69
  font-size: 12px;
@@ -77,7 +77,7 @@
77
  .register-link {
78
  margin-top: 15px;
79
  font-size: 12px;
80
- color: #6d4c41;
81
  }
82
  .register-link a {
83
  color: #ff7043;
@@ -87,10 +87,16 @@
87
  text-decoration: underline;
88
  }
89
 
90
- /* Emoji styles */
 
 
 
 
 
 
 
91
  .emoji {
92
  font-size: 30px;
93
- text-align: center;
94
  padding: 10px;
95
  }
96
  </style>
@@ -99,29 +105,34 @@
99
 
100
  <div class="login-container">
101
  <h1>Welcome to the Restaurant</h1>
102
- <p>Login to your account and enjoy the best dishes!</p>
 
 
 
 
 
103
 
104
  <form action="/auth" method="POST">
105
  <div class="input-group">
106
- <input type="email" name="email" placeholder="👨‍🍳 User Name / Email" required>
107
  </div>
108
  <div class="input-group">
109
- <input type="password" name="password" placeholder="🔑 Enter Password" required>
110
  </div>
111
- <button type="submit">Login 🍴</button>
112
  </form>
113
 
114
  <a href="#" class="forgot-link">Forgot Password?</a>
115
  <div class="register-link">
116
  <p>Don't have an account? <a href="/register">Register Now</a></p>
117
  </div>
118
-
119
- <!-- Fun emoji section -->
120
  <div class="emoji">
121
- <span>🍔</span>
122
- <span>🍕</span>
123
- <span>🍣</span>
124
- <span>🍩</span>
125
  </div>
126
  </div>
127
 
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Login - Restaurant</title>
7
  <link rel="stylesheet" href="/static/styles.css">
8
  <style>
9
  body {
10
  font-family: 'Arial', sans-serif;
11
+ background-color: #fff5e6; /* Light restaurant-themed color */
12
  display: flex;
13
  justify-content: center;
14
  align-items: center;
15
  height: 100vh;
16
  margin: 0;
17
+ background-image: url('https://www.shutterstock.com/search/restaurant+background'); /* Replace with restaurant background image */
18
  background-size: cover;
19
  background-position: center;
20
  }
 
26
  width: 100%;
27
  max-width: 400px;
28
  text-align: center;
29
+ background-color: rgba(255, 255, 255, 0.9);
30
  }
31
  .login-container h1 {
32
+ font-size: 30px;
33
+ color: #8d6e63; /* Warm brown */
34
  margin-bottom: 20px;
35
  font-family: 'Courier New', Courier, monospace;
36
  }
 
49
  text-align: center;
50
  }
51
  .input-group input:focus {
52
+ border-color: #ff7043;
53
  }
54
  button {
55
  width: 100%;
56
  padding: 14px;
57
  font-size: 16px;
58
  border-radius: 30px;
59
+ background: #ff7043;
60
  color: white;
61
  border: none;
62
  cursor: pointer;
63
  transition: background-color 0.3s ease;
64
  }
65
  button:hover {
66
+ background: #f4511e;
67
  }
68
  .forgot-link {
69
  font-size: 12px;
 
77
  .register-link {
78
  margin-top: 15px;
79
  font-size: 12px;
80
+ color: #8d6e63;
81
  }
82
  .register-link a {
83
  color: #ff7043;
 
87
  text-decoration: underline;
88
  }
89
 
90
+ /* Error message style */
91
+ .error-message {
92
+ color: red;
93
+ font-size: 14px;
94
+ margin-top: 10px;
95
+ text-align: center;
96
+ }
97
+
98
  .emoji {
99
  font-size: 30px;
 
100
  padding: 10px;
101
  }
102
  </style>
 
105
 
106
  <div class="login-container">
107
  <h1>Welcome to the Restaurant</h1>
108
+ <p>Login to your account and explore our delicious menu!</p>
109
+
110
+ <!-- Show error message here if login fails -->
111
+ {% if error_message %}
112
+ <div class="error-message">{{ error_message }}</div>
113
+ {% endif %}
114
 
115
  <form action="/auth" method="POST">
116
  <div class="input-group">
117
+ <input type="email" name="email" placeholder="👨‍🍳 Email Address" required>
118
  </div>
119
  <div class="input-group">
120
+ <input type="password" name="password" placeholder="🔑 Password" required>
121
  </div>
122
+ <button type="submit">Login 🍽️</button>
123
  </form>
124
 
125
  <a href="#" class="forgot-link">Forgot Password?</a>
126
  <div class="register-link">
127
  <p>Don't have an account? <a href="/register">Register Now</a></p>
128
  </div>
129
+
130
+ <!-- Fun emojis for a restaurant feel -->
131
  <div class="emoji">
132
+ <span>🍔</span>
133
+ <span>🍕</span>
134
+ <span>🍣</span>
135
+ <span>🍩</span>
136
  </div>
137
  </div>
138