Update src/app.py

src/app.py

@@ -313,253 +313,249 @@ _PLOT_LAYOUT = dict(
 
 
 def render_login():
-    """Full-screen SPJIMR branded login — matches the HTML login page aesthetic."""
+    """Full-screen SPJIMR branded login - fixed left brand panel, Streamlit form on right."""
 
-    # Hide sidebar on login screen
     st.markdown("""
     <style>
-    [data-testid="stSidebar"] { display: none !important; }
-    [data-testid="stSidebarNav"] { display: none !important; }
-    .stDeployButton { display: none !important; }
-    #MainMenu { visibility: hidden; }
-    footer { visibility: hidden; }
-    header { visibility: hidden; }
-    .block-container { padding: 0 !important; max-width: 100% !important; }
-    </style>
-    """, unsafe_allow_html=True)
+    @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300&family=DM+Sans:wght@300;400;500&display=swap');
 
-    # ── Outer two-column split ────────────────────────────────────────────────
-    col_brand, col_form = st.columns([11, 9], gap="small")
+    [data-testid="stSidebar"]    { display: none !important; }
+    [data-testid="stSidebarNav"] { display: none !important; }
+    .stDeployButton              { display: none !important; }
+    #MainMenu                    { visibility: hidden; }
+    footer                       { visibility: hidden; }
+    header                       { visibility: hidden; }
+
+    html, body { height: 100%; background: #120018 !important; }
+
+    .main .block-container {
+        padding: 0 !important;
+        margin: 0 !important;
+        max-width: 100% !important;
+        padding-left: 54% !important;
+        padding-right: 3rem !important;
+        padding-top: 0 !important;
+        padding-bottom: 0 !important;
+        min-height: 100vh;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        background: #120018;
+        box-sizing: border-box;
+    }
 
-    # ── Left: Brand panel ─────────────────────────────────────────────────────
-    with col_brand:
-        st.markdown("""
-        <div style="
-            min-height: 100vh;
-            background: linear-gradient(160deg, #1C0029 0%, #0D0014 55%, #1a0800 100%);
-            padding: 3.5rem 3rem;
-            position: relative;
-            overflow: hidden;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-        ">
-
-        <!-- Flame lines (decorative, echoes logo) -->
-        <svg style="position:absolute;bottom:-40px;left:-10px;width:320px;height:500px;opacity:0.07;pointer-events:none;"
-             viewBox="0 0 320 500" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M10 500 Q50 290 90 70"  stroke="#F67D31" stroke-width="28" stroke-linecap="round"/>
-          <path d="M65 500 Q115 290 155 50" stroke="#F67D31" stroke-width="22" stroke-linecap="round"/>
-          <path d="M125 500 Q185 300 225 40" stroke="#F67D31" stroke-width="16" stroke-linecap="round"/>
-          <path d="M190 500 Q248 320 292 70" stroke="#F67D31" stroke-width="10" stroke-linecap="round"/>
-        </svg>
-
-        <!-- Radial glow -->
-        <div style="position:absolute;bottom:0;left:0;width:400px;height:400px;
-                    background:radial-gradient(ellipse at 20% 100%, rgba(246,125,49,0.14) 0%, transparent 60%);
-                    pointer-events:none;"></div>
-
-        <!-- Logo -->
-        <div>
-          <div style="display:flex;align-items:flex-end;gap:16px;margin-bottom:2.8rem;">
-            <svg width="46" height="54" viewBox="0 0 46 54" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5 54 Q10 35 18 15 Q22 4 28 0 Q23 15 30 23 Q32 11 40 3 Q38 19 42 27 Q46 36 42 46 Q38 54 30 54"
-                    fill="none" stroke="#F67D31" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
-              <path d="M9 54 Q14 37 22 22 Q26 11 32 5 Q28 19 34 27 Q36 17 42 9"
-                    fill="none" stroke="#F67D31" stroke-width="2.5" stroke-linecap="round" opacity="0.55"/>
-              <path d="M17 54 Q22 38 28 26 Q30 20 36 14"
-                    fill="none" stroke="#F67D31" stroke-width="2" stroke-linecap="round" opacity="0.35"/>
-            </svg>
-            <div>
-              <div style="font-size:12px;font-weight:300;letter-spacing:0.05em;color:rgba(255,255,255,0.6);margin-bottom:3px;">
-                Bharatiya Vidya Bhavan's
-              </div>
-              <div style="font-size:34px;font-weight:500;line-height:1;letter-spacing:-0.01em;">
-                <span style="color:#F67D31;">SP</span><span style="color:white;">JIMR</span>
-              </div>
-            </div>
-          </div>
+    .spjimr-brand-panel {
+        position: fixed;
+        top: 0; left: 0;
+        width: 52%;
+        height: 100vh;
+        background: linear-gradient(160deg, #1C0029 0%, #0D0014 55%, #150008 100%);
+        border-right: 1px solid rgba(80,0,115,0.4);
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        padding: 3.5rem 3rem;
+        overflow: hidden;
+        z-index: 999;
+        box-sizing: border-box;
+    }
 
-          <h1 style="
-            font-family: 'Cormorant Garamond', serif;
-            font-size: 3.2rem;
-            font-weight: 300;
-            line-height: 1.12;
-            color: white;
-            letter-spacing: -0.01em;
-            max-width: 420px;
-            margin-bottom: 1.4rem;
-          ">
-            Where <em style="font-style:italic;color:#FFA066;">purpose</em><br>
-            meets<br>
-            management.
-          </h1>
-
-          <p style="font-size:14px;font-weight:300;line-height:1.75;color:rgba(255,255,255,0.5);max-width:360px;">
-            S.P. Jain Institute of Management and Research — ranked among India's finest
-            business schools, shaping responsible leaders for a complex world.
-          </p>
-        </div>
+    div[data-testid="stForm"] {
+        background: transparent !important;
+        border: none !important;
+        padding: 0 !important;
+    }
+    div[data-testid="stForm"] .stTextInput input {
+        height: 48px !important;
+        border-radius: 10px !important;
+        border: 1.5px solid rgba(80,0,115,0.5) !important;
+        background: rgba(255,255,255,0.05) !important;
+        color: #FDF5FF !important;
+        font-size: 14px !important;
+    }
+    div[data-testid="stForm"] .stTextInput input:focus {
+        border-color: #F67D31 !important;
+        box-shadow: 0 0 0 3px rgba(246,125,49,0.12) !important;
+    }
+    div[data-testid="stForm"] .stTextInput label {
+        font-size: 11px !important;
+        font-weight: 500 !important;
+        letter-spacing: 0.05em !important;
+        text-transform: uppercase !important;
+        color: #FDF5FF !important;
+    }
+    div[data-testid="stForm"] .stFormSubmitButton button {
+        width: 100% !important;
+        height: 52px !important;
+        background: #500073 !important;
+        color: white !important;
+        border: none !important;
+        border-radius: 10px !important;
+        font-size: 15px !important;
+        font-weight: 500 !important;
+        letter-spacing: 0.03em !important;
+        margin-top: 0.5rem !important;
+    }
+    div[data-testid="stForm"] .stFormSubmitButton button:hover {
+        background: #6b009a !important;
+        box-shadow: 0 0 18px rgba(246,125,49,0.2) !important;
+    }
+    .stButton > button {
+        width: 100% !important;
+        height: 48px !important;
+        background: rgba(255,255,255,0.04) !important;
+        color: #FDF5FF !important;
+        border: 1.5px solid rgba(80,0,115,0.5) !important;
+        border-radius: 10px !important;
+        font-size: 14px !important;
+        font-weight: 400 !important;
+    }
+    .stButton > button:hover {
+        border-color: #F67D31 !important;
+        background: rgba(246,125,49,0.06) !important;
+        box-shadow: none !important;
+        color: #FDF5FF !important;
+    }
+    </style>
 
-        <!-- Stat strip -->
-        <div style="display:flex;gap:2.5rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,0.1);">
-          <div>
-            <div style="font-family:'Cormorant Garamond',serif;font-size:2rem;font-weight:600;color:#F67D31;line-height:1;">62+</div>
-            <div style="font-size:11px;color:rgba(255,255,255,0.4);letter-spacing:0.06em;text-transform:uppercase;margin-top:4px;">Years of excellence</div>
-          </div>
+    <div class="spjimr-brand-panel">
+      <svg style="position:absolute;bottom:-40px;left:-10px;width:320px;height:500px;opacity:0.07;pointer-events:none;"
+           viewBox="0 0 320 500" fill="none">
+        <path d="M10 500 Q50 290 90 70"   stroke="#F67D31" stroke-width="28" stroke-linecap="round"/>
+        <path d="M65 500 Q115 290 155 50"  stroke="#F67D31" stroke-width="22" stroke-linecap="round"/>
+        <path d="M125 500 Q185 300 225 40" stroke="#F67D31" stroke-width="16" stroke-linecap="round"/>
+        <path d="M190 500 Q248 320 292 70" stroke="#F67D31" stroke-width="10" stroke-linecap="round"/>
+      </svg>
+      <div style="position:absolute;bottom:0;left:0;width:400px;height:400px;
+                  background:radial-gradient(ellipse at 20% 100%,rgba(246,125,49,0.14) 0%,transparent 60%);
+                  pointer-events:none;"></div>
+      <div style="position:relative;z-index:2;">
+        <div style="display:flex;align-items:flex-end;gap:16px;margin-bottom:2.4rem;">
+          <svg width="44" height="52" viewBox="0 0 46 54" fill="none">
+            <path d="M5 54 Q10 35 18 15 Q22 4 28 0 Q23 15 30 23 Q32 11 40 3 Q38 19 42 27 Q46 36 42 46 Q38 54 30 54"
+                  fill="none" stroke="#F67D31" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M9 54 Q14 37 22 22 Q26 11 32 5 Q28 19 34 27 Q36 17 42 9"
+                  fill="none" stroke="#F67D31" stroke-width="2.5" stroke-linecap="round" opacity="0.55"/>
+            <path d="M17 54 Q22 38 28 26 Q30 20 36 14"
+                  fill="none" stroke="#F67D31" stroke-width="2" stroke-linecap="round" opacity="0.35"/>
+          </svg>
           <div>
-            <div style="font-family:'Cormorant Garamond',serif;font-size:2rem;font-weight:600;color:#F67D31;line-height:1;">10K+</div>
-            <div style="font-size:11px;color:rgba(255,255,255,0.4);letter-spacing:0.06em;text-transform:uppercase;margin-top:4px;">Alumni worldwide</div>
-          </div>
-          <div>
-            <div style="font-family:'Cormorant Garamond',serif;font-size:2rem;font-weight:600;color:#F67D31;line-height:1;">#1</div>
-            <div style="font-size:11px;color:rgba(255,255,255,0.4);letter-spacing:0.06em;text-transform:uppercase;margin-top:4px;">Social impact</div>
+            <div style="font-family:'DM Sans',sans-serif;font-size:12px;font-weight:300;
+                        letter-spacing:0.05em;color:rgba(255,255,255,0.6);margin-bottom:3px;">
+              Bharatiya Vidya Bhavan's
+            </div>
+            <div style="font-family:'DM Sans',sans-serif;font-size:32px;font-weight:500;line-height:1;">
+              <span style="color:#F67D31;">SP</span><span style="color:white;">JIMR</span>
+            </div>
           </div>
         </div>
-
+        <div style="font-family:'Cormorant Garamond',serif;font-size:clamp(1.8rem,2.8vw,3rem);
+                    font-weight:300;line-height:1.12;color:white;margin-bottom:1.2rem;">
+          Where <em style="font-style:italic;color:#FFA066;">purpose</em><br>
+          meets<br>management.
         </div>
-        """, unsafe_allow_html=True)
-
-    # ── Right: Login form ─────────────────────────────────────────────────────
-    with col_form:
-        st.markdown("""
-        <div style="min-height:100vh;display:flex;flex-direction:column;
-                    justify-content:center;padding:3rem 3rem 3rem 2.5rem;
-                    background:#120018;">
-        """, unsafe_allow_html=True)
-
-        # Tag
-        st.markdown("""
-        <div style="display:inline-flex;align-items:center;gap:6px;
-                    background:rgba(246,125,49,0.12);color:#F67D31;
-                    font-size:11px;font-weight:500;letter-spacing:0.05em;text-transform:uppercase;
-                    padding:5px 14px;border-radius:100px;margin-bottom:1rem;">
-          <span style="width:6px;height:6px;border-radius:50%;background:#F67D31;display:inline-block;"></span>
-          ESG Sustainability Platform
+        <p style="font-family:'DM Sans',sans-serif;font-size:14px;font-weight:300;
+                  line-height:1.75;color:rgba(255,255,255,0.5);max-width:340px;">
+          S.P. Jain Institute of Management and Research — shaping responsible leaders
+          for a complex world.
+        </p>
+      </div>
+      <div style="position:relative;z-index:2;display:flex;gap:2.5rem;
+                  padding-top:1.8rem;border-top:1px solid rgba(255,255,255,0.1);">
+        <div>
+          <div style="font-family:'Cormorant Garamond',serif;font-size:1.9rem;font-weight:600;color:#F67D31;line-height:1;">62+</div>
+          <div style="font-family:'DM Sans',sans-serif;font-size:10px;color:rgba(255,255,255,0.4);
+                      letter-spacing:0.06em;text-transform:uppercase;margin-top:3px;">Years of excellence</div>
         </div>
-        """, unsafe_allow_html=True)
-
-        st.markdown("""
-        <div style="font-family:'Cormorant Garamond',serif;font-size:2.1rem;
-                    font-weight:400;color:white;line-height:1.15;margin-bottom:0.4rem;">
-          Welcome back
+        <div>
+          <div style="font-family:'Cormorant Garamond',serif;font-size:1.9rem;font-weight:600;color:#F67D31;line-height:1;">10K+</div>
+          <div style="font-family:'DM Sans',sans-serif;font-size:10px;color:rgba(255,255,255,0.4);
+                      letter-spacing:0.06em;text-transform:uppercase;margin-top:3px;">Alumni worldwide</div>
         </div>
-        <div style="font-size:14px;color:rgba(196,164,212,0.8);font-weight:300;
-                    line-height:1.6;margin-bottom:2rem;">
-          Sign in to access your sustainability dashboard and insights.
+        <div>
+          <div style="font-family:'Cormorant Garamond',serif;font-size:1.9rem;font-weight:600;color:#F67D31;line-height:1;">#1</div>
+          <div style="font-family:'DM Sans',sans-serif;font-size:10px;color:rgba(255,255,255,0.4);
+                      letter-spacing:0.06em;text-transform:uppercase;margin-top:3px;">Social impact</div>
         </div>
-        """, unsafe_allow_html=True)
-
-        # ── Inline form style overrides ───────────────────────────────────────
-        st.markdown("""
-        <style>
-        div[data-testid="stForm"] {
-            background: transparent !important;
-            border: none !important;
-            padding: 0 !important;
-        }
-        div[data-testid="stForm"] .stTextInput input {
-            height: 48px !important;
-            border-radius: 10px !important;
-            border: 1.5px solid rgba(80,0,115,0.5) !important;
-            background: rgba(255,255,255,0.04) !important;
-            color: #FDF5FF !important;
-            font-size: 14px !important;
-            padding-left: 16px !important;
-        }
-        div[data-testid="stForm"] .stTextInput input:focus {
-            border-color: #F67D31 !important;
-            box-shadow: 0 0 0 3px rgba(246,125,49,0.12) !important;
-        }
-        div[data-testid="stForm"] .stTextInput label {
-            font-size: 11px !important;
-            font-weight: 500 !important;
-            letter-spacing: 0.05em !important;
-            text-transform: uppercase !important;
-            color: #FDF5FF !important;
-            margin-bottom: 6px !important;
-        }
-        div[data-testid="stForm"] .stFormSubmitButton button {
-            width: 100% !important;
-            height: 52px !important;
-            background: #500073 !important;
-            color: white !important;
-            border: none !important;
-            border-radius: 10px !important;
-            font-size: 15px !important;
-            font-weight: 500 !important;
-            letter-spacing: 0.03em !important;
-            margin-top: 0.5rem !important;
-            transition: background 0.2s !important;
-        }
-        div[data-testid="stForm"] .stFormSubmitButton button:hover {
-            background: #6b009a !important;
-            box-shadow: 0 0 18px rgba(246,125,49,0.2) !important;
-        }
-        </style>
-        """, unsafe_allow_html=True)
-
-        # Error placeholder
-        err_slot = st.empty()
-
-        with st.form("login_form", clear_on_submit=False):
-            email_val = st.text_input("Email address", placeholder="yourname@spjimr.org",
-                                      key="login_email_input")
-            pass_val  = st.text_input("Password", type="password",
-                                      placeholder="Enter your password",
-                                      key="login_pass_input")
-
-            # Remember me + forgot
-            rc, fc = st.columns([1, 1])
-            with rc:
-                st.markdown('<span style="font-size:13px;color:#C4A4D4;">Remember me</span>',
-                            unsafe_allow_html=True)
-                remember = st.checkbox("", key="login_remember", label_visibility="collapsed")
-            with fc:
-                st.markdown(
-                    '<div style="text-align:right;padding-top:4px;">'
-                    '<a href="#" style="font-size:13px;color:#F67D31;text-decoration:none;font-weight:500;">'
-                    'Forgot password?</a></div>',
-                    unsafe_allow_html=True,
-                )
-
-            submitted = st.form_submit_button("Sign in →")
-
-        if submitted:
-            _app_password = os.getenv("APP_PASSWORD")
-            if not _app_password:
-                err_slot.error("⚙️ APP_PASSWORD secret is not configured. Add it in HuggingFace Space settings.")
-            elif not email_val or not email_val.lower().endswith("@spjimr.org"):
-                err_slot.error("Access restricted to SPJIMR email addresses (@spjimr.org).")
-            elif pass_val != _app_password:
-                err_slot.error("Incorrect password. Please try again.")
-            else:
-                st.session_state["logged_in"]  = True
-                st.session_state["login_user"] = email_val.lower()
-                st.rerun()
+      </div>
+    </div>
+    """, unsafe_allow_html=True)
 
-        # Divider + SSO
-        st.markdown("""
-        <div style="display:flex;align-items:center;gap:12px;margin:1.4rem 0;">
-          <div style="flex:1;height:1px;background:rgba(80,0,115,0.4);"></div>
-          <span style="font-size:12px;color:rgba(196,164,212,0.6);">or continue with</span>
-          <div style="flex:1;height:1px;background:rgba(80,0,115,0.4);"></div>
-        </div>
-        """, unsafe_allow_html=True)
+    # Right side form
+    st.markdown("""
+    <div style="display:inline-flex;align-items:center;gap:6px;
+                background:rgba(246,125,49,0.12);color:#F67D31;
+                font-family:'DM Sans',sans-serif;font-size:11px;font-weight:500;
+                letter-spacing:0.05em;text-transform:uppercase;
+                padding:5px 14px;border-radius:100px;margin-bottom:0.8rem;">
+      <span style="width:6px;height:6px;border-radius:50%;background:#F67D31;display:inline-block;flex-shrink:0;"></span>
+      ESG Sustainability Platform
+    </div>
+    <div style="font-family:'Cormorant Garamond',serif;font-size:2rem;
+                font-weight:400;color:white;line-height:1.15;margin-bottom:0.3rem;">
+      Welcome back
+    </div>
+    <div style="font-family:'DM Sans',sans-serif;font-size:13px;
+                color:rgba(196,164,212,0.8);font-weight:300;line-height:1.6;margin-bottom:1.5rem;">
+      Sign in with your SPJIMR email to continue.
+    </div>
+    """, unsafe_allow_html=True)
 
-        if st.button("  🔐  SPJIMR Single Sign-On (SSO)", use_container_width=True, key="sso_btn"):
+    err_slot = st.empty()
+
+    with st.form("login_form", clear_on_submit=False):
+        email_val = st.text_input("Email address", placeholder="yourname@spjimr.org",
+                                  key="login_email_input")
+        pass_val  = st.text_input("Password", type="password",
+                                  placeholder="Enter your password",
+                                  key="login_pass_input")
+        rc, fc = st.columns([1, 1])
+        with rc:
+            st.checkbox("Remember me", key="login_remember")
+        with fc:
+            st.markdown(
+                '<div style="text-align:right;padding-top:6px;">'
+                '<a href="#" style="font-size:12px;color:#F67D31;text-decoration:none;font-weight:500;">'
+                'Forgot password?</a></div>',
+                unsafe_allow_html=True,
+            )
+        submitted = st.form_submit_button("Sign in →")
+
+    if submitted:
+        _app_password = os.getenv("APP_PASSWORD")
+        if not _app_password:
+            err_slot.error("⚙️ APP_PASSWORD secret is not configured. Add it in HuggingFace Space settings.")
+        elif not email_val or not email_val.lower().endswith("@spjimr.org"):
+            err_slot.error("Access restricted to SPJIMR email addresses (@spjimr.org).")
+        elif pass_val != _app_password:
+            err_slot.error("Incorrect password. Please try again.")
+        else:
             st.session_state["logged_in"]  = True
-            st.session_state["login_user"] = "sso_user@spjimr.org"
+            st.session_state["login_user"] = email_val.lower()
             st.rerun()
 
-        st.markdown("""
-        <div style="margin-top:1.8rem;text-align:center;font-size:12px;color:rgba(196,164,212,0.6);line-height:1.8;">
-          New to the platform? <a href="#" style="color:#F67D31;text-decoration:none;font-weight:500;">Request access</a><br>
-          Having trouble? <a href="#" style="color:#F67D31;text-decoration:none;font-weight:500;">Contact IT support</a>
-        </div>
-        """, unsafe_allow_html=True)
+    st.markdown("""
+    <div style="display:flex;align-items:center;gap:12px;margin:1.2rem 0;">
+      <div style="flex:1;height:1px;background:rgba(80,0,115,0.4);"></div>
+      <span style="font-family:'DM Sans',sans-serif;font-size:12px;color:rgba(196,164,212,0.5);">or continue with</span>
+      <div style="flex:1;height:1px;background:rgba(80,0,115,0.4);"></div>
+    </div>
+    """, unsafe_allow_html=True)
 
-        st.markdown("</div>", unsafe_allow_html=True)
+    if st.button("🔐  SPJIMR Single Sign-On (SSO)", use_container_width=True, key="sso_btn"):
+        st.session_state["logged_in"]  = True
+        st.session_state["login_user"] = "sso_user@spjimr.org"
+        st.rerun()
+
+    st.markdown("""
+    <div style="margin-top:1.5rem;text-align:center;font-family:'DM Sans',sans-serif;
+                font-size:12px;color:rgba(196,164,212,0.5);line-height:1.9;">
+      New to the platform?
+      <a href="#" style="color:#F67D31;text-decoration:none;font-weight:500;">Request access</a><br>
+      Having trouble?
+      <a href="#" style="color:#F67D31;text-decoration:none;font-weight:500;">Contact IT support</a>
+    </div>
+    """, unsafe_allow_html=True)
 
 
 # ═══════════════════════════════════════════════════════════════════════════════