Spaces:

lokesh341
/

testing_2

Sleeping

App Files Files Community

Yaswanth56 commited on Jan 28, 2025

Commit

8643c2a

verified ·

1 Parent(s): 647abd8

Update templates/login.html

Browse files

Files changed (1) hide show

templates/login.html +41 -23

templates/login.html CHANGED Viewed

@@ -3,32 +3,36 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Login</title>
     <link rel="stylesheet" href="/static/styles.css">
     <style>
         body {
-            font-family: Arial, sans-serif;
-            background: linear-gradient(135deg, #6c757d, #28a745); /* Gradient background */
             display: flex;
             justify-content: center;
             align-items: center;
             height: 100vh;
             margin: 0;
         }
         .login-container {
-            background-color: white;
             padding: 40px;
-            border-radius: 20px;
             box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
             width: 100%;
             max-width: 400px;
             text-align: center;
         }
         .login-container h1 {
             font-size: 28px;
-            text-align: center;
-            color: #28a745;
             margin-bottom: 20px;
         }
         .input-group {
             margin: 15px 0;
@@ -37,35 +41,33 @@
         .input-group input {
             width: 100%;
             padding: 12px;
-            font-size: 14px;
             border-radius: 25px;
             border: 1px solid #ccc;
-            background-color: #f0f8f5;
             outline: none;
             text-align: center;
         }
         .input-group input:focus {
-            border-color: #28a745;
         }
         button {
             width: 100%;
             padding: 14px;
             font-size: 16px;
             border-radius: 30px;
-            background: linear-gradient(135deg, #38a169, #28a745); /* Gradient button */
             color: white;
             border: none;
             cursor: pointer;
             transition: background-color 0.3s ease;
         }
         button:hover {
-            background: linear-gradient(135deg, #28a745, #38a169);
         }
         .forgot-link {
-            display: block;
             font-size: 12px;
-            color: #28a745;
-            text-align: center;
             text-decoration: none;
             margin-top: 10px;
         }
@@ -73,38 +75,54 @@
             text-decoration: underline;
         }
         .register-link {
-            text-align: center;
             margin-top: 15px;
             font-size: 12px;
-            color: #333;
         }
         .register-link a {
-            color: #28a745;
             text-decoration: none;
         }
         .register-link a:hover {
             text-decoration: underline;
         }
     </style>
 </head>
 <body>
     <div class="login-container">
-        <h1>Welcome Back</h1>
-        <p>Login to your Account</p>
         <form action="/auth" method="POST">
             <div class="input-group">
-                <input type="email" name="email" placeholder="User Name / Email" required>
             </div>
             <div class="input-group">
-                <input type="password" name="password" placeholder="Password" required>
             </div>
-            <button type="submit">Login</button>
         </form>
         <a href="#" class="forgot-link">Forgot Password?</a>
         <div class="register-link">
             <p>Don't have an account? <a href="/register">Register Now</a></p>
         </div>
     </div>
 </body>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Restaurant Login</title>
     <link rel="stylesheet" href="/static/styles.css">
     <style>
         body {
+            font-family: 'Arial', sans-serif;
+            background-color: #fff9f0; /* Light background color */
             display: flex;
             justify-content: center;
             align-items: center;
             height: 100vh;
             margin: 0;
+            background-image: url('https://www.shutterstock.com/search/restaurant+background'); /* Add restaurant image as background */
+            background-size: cover;
+            background-position: center;
         }
         .login-container {
+            background-color: #ffffff;
             padding: 40px;
+            border-radius: 15px;
             box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
             width: 100%;
             max-width: 400px;
             text-align: center;
+            background-color: rgba(255, 255, 255, 0.8); /* Slight transparency */
         }
         .login-container h1 {
             font-size: 28px;
+            color: #6d4c41; /* Warm brown color */
             margin-bottom: 20px;
+            font-family: 'Courier New', Courier, monospace;
         }
         .input-group {
             margin: 15px 0;
         .input-group input {
             width: 100%;
             padding: 12px;
+            font-size: 16px;
             border-radius: 25px;
             border: 1px solid #ccc;
+            background-color: #f8e0c2;
             outline: none;
             text-align: center;
         }
         .input-group input:focus {
+            border-color: #ff7043; /* Warm orange color */
         }
         button {
             width: 100%;
             padding: 14px;
             font-size: 16px;
             border-radius: 30px;
+            background: #ff7043; /* Warm orange button */
             color: white;
             border: none;
             cursor: pointer;
             transition: background-color 0.3s ease;
         }
         button:hover {
+            background: #f4511e; /* Darker orange for hover */
         }
         .forgot-link {
             font-size: 12px;
+            color: #ff7043;
             text-decoration: none;
             margin-top: 10px;
         }
             text-decoration: underline;
         }
         .register-link {
             margin-top: 15px;
             font-size: 12px;
+            color: #6d4c41;
         }
         .register-link a {
+            color: #ff7043;
             text-decoration: none;
         }
         .register-link a:hover {
             text-decoration: underline;
         }
+        /* Emoji styles */
+        .emoji {
+            font-size: 30px;
+            text-align: center;
+            padding: 10px;
+        }
     </style>
 </head>
 <body>
     <div class="login-container">
+        <h1>Welcome to the Restaurant</h1>
+        <p>Login to your account and enjoy the best dishes!</p>
         <form action="/auth" method="POST">
             <div class="input-group">
+                <input type="email" name="email" placeholder="👨‍🍳 User Name / Email" required>
             </div>
             <div class="input-group">
+                <input type="password" name="password" placeholder="🔑 Enter Password" required>
             </div>
+            <button type="submit">Login 🍴</button>
         </form>
         <a href="#" class="forgot-link">Forgot Password?</a>
         <div class="register-link">
             <p>Don't have an account? <a href="/register">Register Now</a></p>
         </div>
+        <!-- Fun emoji section -->
+        <div class="emoji">
+            <span>🍔</span>
+            <span>🍕</span>
+            <span>🍣</span>
+            <span>🍩</span>
+        </div>
     </div>
 </body>