Hugging Face's logo

Spaces:
Yaswanth56
/
testing_1
Sleeping

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

Update templates/login.html

Browse files
Files changed (1) hide show
  1. templates/login.html +41 -23
templates/login.html CHANGED
@@ -3,32 +3,36 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Login</title>
7
  <link rel="stylesheet" href="/static/styles.css">
8
  <style>
9
  body {
10
- font-family: Arial, sans-serif;
11
- background: linear-gradient(135deg, #6c757d, #28a745); /* Gradient background */
12
  display: flex;
13
  justify-content: center;
14
  align-items: center;
15
  height: 100vh;
16
  margin: 0;
 
 
 
17
  }
18
  .login-container {
19
- background-color: white;
20
  padding: 40px;
21
- border-radius: 20px;
22
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
23
  width: 100%;
24
  max-width: 400px;
25
  text-align: center;
 
26
  }
27
  .login-container h1 {
28
  font-size: 28px;
29
- text-align: center;
30
- color: #28a745;
31
  margin-bottom: 20px;
 
32
  }
33
  .input-group {
34
  margin: 15px 0;
@@ -37,35 +41,33 @@
37
  .input-group input {
38
  width: 100%;
39
  padding: 12px;
40
- font-size: 14px;
41
  border-radius: 25px;
42
  border: 1px solid #ccc;
43
- background-color: #f0f8f5;
44
  outline: none;
45
  text-align: center;
46
  }
47
  .input-group input:focus {
48
- border-color: #28a745;
49
  }
50
  button {
51
  width: 100%;
52
  padding: 14px;
53
  font-size: 16px;
54
  border-radius: 30px;
55
- background: linear-gradient(135deg, #38a169, #28a745); /* Gradient button */
56
  color: white;
57
  border: none;
58
  cursor: pointer;
59
  transition: background-color 0.3s ease;
60
  }
61
  button:hover {
62
- background: linear-gradient(135deg, #28a745, #38a169);
63
  }
64
  .forgot-link {
65
- display: block;
66
  font-size: 12px;
67
- color: #28a745;
68
- text-align: center;
69
  text-decoration: none;
70
  margin-top: 10px;
71
  }
@@ -73,38 +75,54 @@
73
  text-decoration: underline;
74
  }
75
  .register-link {
76
- text-align: center;
77
  margin-top: 15px;
78
  font-size: 12px;
79
- color: #333;
80
  }
81
  .register-link a {
82
- color: #28a745;
83
  text-decoration: none;
84
  }
85
  .register-link a:hover {
86
  text-decoration: underline;
87
  }
 
 
 
 
 
 
 
88
  </style>
89
  </head>
90
  <body>
91
 
92
  <div class="login-container">
93
- <h1>Welcome Back</h1>
94
- <p>Login to your Account</p>
 
95
  <form action="/auth" method="POST">
96
  <div class="input-group">
97
- <input type="email" name="email" placeholder="User Name / Email" required>
98
  </div>
99
  <div class="input-group">
100
- <input type="password" name="password" placeholder="Password" required>
101
  </div>
102
- <button type="submit">Login</button>
103
  </form>
 
104
  <a href="#" class="forgot-link">Forgot Password?</a>
105
  <div class="register-link">
106
  <p>Don't have an account? <a href="/register">Register Now</a></p>
107
  </div>
 
 
 
 
 
 
 
 
108
  </div>
109
 
110
  </body>
 
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
  }
21
  .login-container {
22
+ background-color: #ffffff;
23
  padding: 40px;
24
+ border-radius: 15px;
25
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
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
  }
37
  .input-group {
38
  margin: 15px 0;
 
41
  .input-group input {
42
  width: 100%;
43
  padding: 12px;
44
+ font-size: 16px;
45
  border-radius: 25px;
46
  border: 1px solid #ccc;
47
+ background-color: #f8e0c2;
48
  outline: none;
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;
70
+ color: #ff7043;
 
71
  text-decoration: none;
72
  margin-top: 10px;
73
  }
 
75
  text-decoration: underline;
76
  }
77
  .register-link {
 
78
  margin-top: 15px;
79
  font-size: 12px;
80
+ color: #6d4c41;
81
  }
82
  .register-link a {
83
+ color: #ff7043;
84
  text-decoration: none;
85
  }
86
  .register-link a:hover {
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>
97
  </head>
98
  <body>
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
 
128
  </body>