Update app.py

app.py

@@ -23,32 +23,46 @@ def register(username, name, password):
     CUSTOMERS[username] = {"password": password, "name": name}
     return f"Account created successfully for {name}!"
 
-# Custom HTML and CSS for the UI
-HTML = """
-<div class="container">
-    <div class="left">
-        <h1>Biryani Hub</h1>
-        <img src="https://via.placeholder.com/300" alt="Food Image">
-        <p>Sign in with</p>
-        <div class="social-icons">
-            <i>Facebook</i> | <i>Twitter</i> | <i>Instagram</i>
+# Gradio Blocks
+def main():
+    with gr.Blocks() as demo:
+        gr.HTML("""
+        <div style='display: flex; height: 100vh; font-family: Arial, sans-serif;'>
+            <div style='flex: 1; background: url("https://via.placeholder.com/600x800") no-repeat center center; background-size: cover; color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;'>
+                <h1 style='font-size: 3em;'>Biryani Hub</h1>
+                <p>Sign in with</p>
+                <div style='display: flex; gap: 10px;'>
+                    <a href='#' style='color: white;'>Facebook</a> |
+                    <a href='#' style='color: white;'>Twitter</a> |
+                    <a href='#' style='color: white;'>Instagram</a>
+                </div>
+            </div>
+            <div style='flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient(to bottom, #ff7e5f, #feb47b); border-radius: 10px; color: white;'>
+                <div style='width: 80%;'>
+                    <h2 style='text-align: center;'>Log In</h2>
+                </div>
+            </div>
         </div>
-    </div>
-    <div class="right">
-        <div class="tab">
-            <button onclick="document.getElementById('login').style.display='block'; document.getElementById('register').style.display='none';">Log In</button>
-            <button onclick="document.getElementById('register').style.display='block'; document.getElementById('login').style.display='none';">Register</button>
-        </div>
-        <div id="login" style="display:block;">
-            <h2>Log In</h2>
-            {login}
-        </div>
-        <div id="register" style="display:none;">
-            <h2>Register</h2>
-            {register}
-        </div>
-    </div>
-</div>
-<style>
-    .container {{ display: flex; height: 100vh; }}
-    .left {{ flex: 1; background: url('https://via.placeholder.com/300') no-repeat center center;
+        """)
+
+        with gr.Row():
+            with gr.Column():
+                gr.Markdown("### Log In")
+                login_username = gr.Textbox(label="Username", placeholder="Enter your username")
+                login_password = gr.Textbox(label="Password", placeholder="Enter your password", type="password")
+                login_button = gr.Button("Log In")
+                login_output = gr.Text(label="Login Status")
+                login_button.click(login, inputs=[login_username, login_password], outputs=login_output)
+            with gr.Column():
+                gr.Markdown("### Register")
+                register_username = gr.Textbox(label="Username", placeholder="Choose a username")
+                register_name = gr.Textbox(label="Name", placeholder="Enter your name")
+                register_password = gr.Textbox(label="Password", placeholder="Set your password", type="password")
+                register_button = gr.Button("Register")
+                register_output = gr.Text(label="Registration Status")
+                register_button.click(register, inputs=[register_username, register_name, register_password], outputs=register_output)
+
+    demo.launch()
+
+if __name__ == "__main__":
+    main()