Upload app.py

app.py

@@ -379,59 +379,101 @@ modern_css = """
 }
 
 /* Login styling */
+body, .gradio-container {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+}
+
 .login-wrapper {
     display: flex;
     align-items: center;
     justify-content: center;
-    min-height: 60vh;
+    min-height: 100vh;
+    padding: 24px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 }
 
 .login-card {
-    max-width: 480px;
+    max-width: 400px;
     width: 100%;
-    background: #ffffff;
-    border: 1px solid #e5e7eb;
-    border-radius: 16px;
-    padding: 24px;
-    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 20px;
+    padding: 48px 40px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+}
+
+.login-icon {
+    font-size: 56px;
+    text-align: center;
+    margin-bottom: 16px;
+    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
 }
 
 .login-title {
     text-align: center;
-    margin: 0 0 6px 0;
-    font-size: 22px;
+    margin: 0 0 8px 0;
+    font-size: 28px;
     font-weight: 700;
-    color: #111827;
+    color: #1f2937;
+    letter-spacing: -0.02em;
 }
 
 .login-subtitle {
     text-align: center;
-    margin: 0 0 16px 0;
-    font-size: 14px;
+    margin: 0 0 32px 0;
+    font-size: 15px;
     color: #6b7280;
+    font-weight: 400;
 }
 
-.login-input {
-    background: #f9fafb !important;
+.login-input label {
+    color: #374151 !important;
+    font-weight: 600 !important;
+    font-size: 14px !important;
+}
+
+.login-input input {
+    background: white !important;
     border: 2px solid #e5e7eb !important;
     border-radius: 10px !important;
-    padding: 12px !important;
+    padding: 12px 16px !important;
+    font-size: 16px !important;
+    color: #111827 !important;
+}
+
+.login-input input:focus {
+    border-color: #667eea !important;
+    background: white !important;
+    outline: none !important;
+    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1) !important;
 }
 
 .login-error {
-    color: #b91c1c;
+    color: #dc2626;
     background: #fee2e2;
-    border: 1px solid #fecaca;
-    padding: 10px 12px;
+    border: 1px solid #fca5a5;
+    padding: 12px;
     border-radius: 10px;
+    text-align: center;
+    font-weight: 500;
 }
 
-.login-hero img {
-    width: 100% !important;
-    height: 160px !important;
-    object-fit: cover !important;
-    border-radius: 12px !important;
-    margin-bottom: 12px !important;
+.freepik-credit {
+    margin-top: 24px;
+    text-align: center;
+    font-size: 12px;
+    color: #9ca3af;
+}
+
+.freepik-credit a {
+    color: #667eea;
+    text-decoration: none;
+    font-weight: 500;
+}
+
+.freepik-credit a:hover {
+    text-decoration: underline;
 }
 """
 
@@ -441,10 +483,7 @@ def create_interface():
         authorized = gr.State(False)
         BANNER_URL = os.getenv("BANNER_URL", "")
         BACKGROUND_URL = os.getenv("BACKGROUND_URL", "")
-
-        # Optional global background image
-        if BACKGROUND_URL:
-            gr.HTML(f"<style>body, .gradio-container {{ background: url('{BACKGROUND_URL}') center/cover no-repeat fixed !important; }}</style>")
+        # Intentionally not rendering a banner image to avoid empty placeholders
 
         def check_password(pw):
             ok = pw == APP_PASSWORD
@@ -456,15 +495,27 @@ def create_interface():
 
         # Login gate
         with gr.Group(visible=True) as login_group:
-            gr.HTML('<div class="login-wrapper"><div class="login-card">')
-            if BANNER_URL:
-                gr.Image(value=BANNER_URL, show_label=False, elem_classes=["login-hero"])
-            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"])
+            gr.HTML("""
+            <div class="login-wrapper">
+                <div class="login-card">
+                    <div class="login-icon">🔐</div>
+                    <div class="login-title">Private Access</div>
+                    <div class="login-subtitle">Enter password to continue</div>
+            """)
+            pw = gr.Textbox(
+                label="Password", 
+                type="password", 
+                placeholder="Enter password", 
+                elem_classes=["login-input"],
+                container=True
+            )
+            login_btn = gr.Button("Continue", elem_classes=["modern-button"], size="lg")
             login_error = gr.Markdown(visible=False, elem_classes=["login-error"])
-            gr.HTML('</div></div>')
+            gr.HTML("""
+                    <div class="freepik-credit">Background design inspired by <a href="https://www.freepik.com" target="_blank">Freepik</a></div>
+                </div>
+            </div>
+            """)
 
         # Main UI wrapped for toggling visibility
         with gr.Group(visible=False) as main_group: