Upload app.py

app.py

@@ -370,6 +370,54 @@ modern_css = """
     color: #0c4a6e;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
+
+/* Login styling */
+.login-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 60vh;
+}
+
+.login-card {
+    max-width: 480px;
+    width: 100%;
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-radius: 16px;
+    padding: 24px;
+    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
+}
+
+.login-title {
+    text-align: center;
+    margin: 0 0 6px 0;
+    font-size: 22px;
+    font-weight: 700;
+    color: #111827;
+}
+
+.login-subtitle {
+    text-align: center;
+    margin: 0 0 16px 0;
+    font-size: 14px;
+    color: #6b7280;
+}
+
+.login-input {
+    background: #f9fafb !important;
+    border: 2px solid #e5e7eb !important;
+    border-radius: 10px !important;
+    padding: 12px !important;
+}
+
+.login-error {
+    color: #b91c1c;
+    background: #fee2e2;
+    border: 1px solid #fecaca;
+    padding: 10px 12px;
+    border-radius: 10px;
+}
 """
 
 # Create the interface with password protection
@@ -387,11 +435,13 @@ def create_interface():
 
         # Login gate
         with gr.Group(visible=True) as login_group:
-            gr.Markdown("### 🔐 Enter Password to Continue")
-            with gr.Row():
-                pw = gr.Textbox(label="Password", type="password", placeholder="Enter password")
-                login_btn = gr.Button("Login", elem_classes=["modern-button"])
-            login_error = gr.Markdown(visible=False)
+            gr.HTML('<div class="login-wrapper"><div class="login-card">')
+            gr.HTML('<div class="login-title">🔐 Private Access</div>')
+            gr.HTML('<div class="login-subtitle">Enter the shared password to continue</div>')
+            pw = gr.Textbox(label="Password", type="password", placeholder="Enter password", elem_classes=["login-input"])
+            login_btn = gr.Button("Continue", elem_classes=["modern-button"])
+            login_error = gr.Markdown(visible=False, elem_classes=["login-error"])
+            gr.HTML('</div></div>')
 
         # Main UI wrapped for toggling visibility
         with gr.Group(visible=False) as main_group: