Update app.py

app.py

@@ -127,60 +127,176 @@ def detect_emotion(text):
 
 # Authentication UI
 def show_auth_page():
-    st.set_page_config(page_title="DilBot - Login", page_icon="🧠")
-     # --- PASTE YOUR CUSTOM CSS HERE FOR THE AUTH PAGE ---
+    st.set_page_config(page_title="DilBot - Login", page_icon="🧠", layout="centered") # Added layout="centered"
+
+    # --- UPDATED CUSTOM CSS FOR THE AUTH PAGE ---
     st.markdown("""
     <style>
-    /* Example: Styling for the main container on the auth page */
+    /* Overall App Background & Font */
     .stApp {
         background-color: #f0f2f6; /* Light grey background */
+        font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* Modern, clean font */
+        color: #333333; /* Default text color */
+    }
+
+    /* Main Container for Auth Form (makes it look like a card) */
+    .stApp > header { /* Hide Streamlit's default header */
+        display: none;
     }
     .main .block-container {
-        padding-top: 2rem;
-        padding-bottom: 2rem;
+        max-width: 500px; /* Limit width for better aesthetics */
+        margin: auto; /* Center the container */
+        padding: 3rem 2rem; /* More padding top/bottom */
+        background-color: #ffffff; /* White background for the form card */
+        border-radius: 15px; /* Softer rounded corners */
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Deeper shadow for card effect */
+        text-align: center; /* Center content within the card */
+    }
+
+    /* Titles and Subheaders */
+    h1 {
+        color: #7289da; /* DilBot's primary color */
+        font-size: 2.8em; /* Larger title */
+        font-weight: 700;
+        margin-bottom: 0.5rem;
     }
-    .stTabs [data-baseweb="tab-list"] button [data-testid="stMarkdownContainer"] p {
+    .stMarkdown p { /* For "Welcome! Please login..." */
+        color: #666666;
         font-size: 1.1em;
-        font-weight: bold;
+        margin-bottom: 2rem;
     }
-    /* Style for text inputs */
-    .stTextInput>div>div>input {
-        border-radius: 8px;
-        border: 1px solid #ccc;
-        padding: 10px;
+    h2 { /* Subheaders for Login/Sign Up tabs */
+        color: #4A4A4A;
+        font-size: 1.7em;
+        font-weight: 600;
+        margin-top: 1.5rem;
+        margin-bottom: 1.5rem;
+        text-align: center;
     }
+
+    /* Tabs Styling */
+    .stTabs [data-baseweb="tab-list"] {
+        justify-content: center; /* Center the tabs themselves */
+        gap: 20px; /* Space between tabs */
+        margin-bottom: 2rem;
+    }
+    .stTabs [data-baseweb="tab-list"] button {
+        background-color: transparent;
+        border: none;
+        padding: 10px 20px;
+        font-size: 1.2em;
+        font-weight: 600;
+        color: #888888; /* Grey for inactive tabs */
+        border-bottom: 3px solid transparent;
+        transition: color 0.3s, border-bottom 0.3s;
+    }
+    .stTabs [data-baseweb="tab-list"] button:hover {
+        color: #7289da;
+        border-bottom: 3px solid #b0c4de; /* Lighter blue on hover */
+    }
+    .stTabs [data-baseweb="tab-list"] button[aria-selected="true"] {
+        color: #7289da; /* DilBot's primary color for active tab */
+        border-bottom: 3px solid #7289da; /* Stronger accent for active tab */
+    }
+
+    /* Input Fields */
     .stTextInput>label {
         font-weight: 600;
-        color: #333;
+        color: #555555;
+        text-align: left; /* Align labels to the left */
+        display: block; /* Make label a block element to control margin */
+        margin-bottom: 0.5rem;
+        padding-left: 5px; /* Small indent for label */
     }
-    /* Style for buttons */
+    .stTextInput>div>div>input {
+        border-radius: 10px; /* More rounded */
+        border: 1px solid #ced4da; /* Light grey border */
+        padding: 12px 15px; /* Increased padding */
+        font-size: 1.05em;
+        color: #333333;
+        box-shadow: inset 0 1px 3px rgba(0,0,0,0.05); /* Subtle inner shadow */
+        transition: border-color 0.3s ease, box-shadow 0.3s ease;
+    }
+    .stTextInput>div>div>input:focus {
+        border-color: #7289da; /* Highlight on focus */
+        box-shadow: 0 0 0 0.2rem rgba(114, 137, 218, 0.25); /* Glow effect on focus */
+        outline: none;
+    }
+
+    /* Buttons */
     .stButton>button {
-        background-color: #7289da; /* A shade of blue/purple */
+        background-color: #7289da; /* DilBot's primary blue/purple */
         color: white;
-        border-radius: 8px;
         border: none;
-        padding: 10px 20px;
-        font-size: 1em;
+        border-radius: 10px; /* More rounded */
+        padding: 12px 25px; /* Larger padding */
+        font-size: 1.1em; /* Larger text */
         font-weight: bold;
-        transition: background-color 0.3s;
+        transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
+        box-shadow: 0 5px 15px rgba(0,0,0,0.15); /* More prominent shadow */
+        cursor: pointer;
+        width: 100%; /* Make buttons full width */
+        margin-top: 1.5rem; /* Space above buttons */
     }
     .stButton>button:hover {
-        background-color: #5b6fb8;
+        background-color: #5b6fb8; /* Darker shade on hover */
+        transform: translateY(-3px); /* More pronounced lift effect */
+        box-shadow: 0 8px 20px rgba(0,0,0,0.2);
+    }
+    .stButton>button:active {
+        background-color: #4a5a90;
+        transform: translateY(0);
+        box-shadow: 0 3px 10px rgba(0,0,0,0.1);
+    }
+
+    /* Alerts (Success, Error, Warning) */
+    [data-testid="stAlert"] {
+        border-radius: 8px;
+        padding: 15px 20px;
+        margin-bottom: 1.5rem;
+        font-size: 1em;
+        line-height: 1.5;
+        text-align: left; /* Align alert text to left */
+    }
+    /* Specific styles for each type - copied from previous example, ensuring consistency */
+    [data-testid="stAlert"] .streamlit-warning {
+        background-color: #fff3cd; color: #664d03; border-left: 5px solid #ffc107;
+    }
+    [data-testid="stAlert"] .streamlit-success {
+        background-color: #d1e7dd; color: #0f5132; border-left: 5px solid #198754;
+    }
+    [data-testid="stAlert"] .streamlit-error {
+        background-color: #f8d7da; color: #842029; border-left: 5px solid #dc3545;
+    }
+    [data-testid="stAlert"] .streamlit-info {
+        background-color: #cfe2ff; color: #055160; border-left: 5px solid #0dcaf0;
+    }
+
+    /* Small hack to adjust the spacing around form elements within tabs */
+    .stTabs [data-baseweb="tab-panel"] > div > div {
+        padding: 0 20px; /* Add horizontal padding inside tabs */
     }
     </style>
     """, unsafe_allow_html=True)
-    # --- END CUSTOM CSS ---
-    st.title("🧠 DilBot - Emotional AI Companion")
-    st.markdown("Welcome! Please login or create an account to continue.")
-    
+    # --- END UPDATED CUSTOM CSS ---
+
+    # Using columns for the main title and welcome message to potentially add an image later
+    st.image("https://i.ibb.co/L5Qx81j/dilbot-logo.png", width=100) # Placeholder for a small logo
+    st.title("DilBot") # Just the name, 'Emotional AI Companion' can be the subtitle
+    st.markdown("<h3 style='text-align: center; color: #666666;'>Your Intelligent Emotional Companion</h3>", unsafe_allow_html=True) # Tagline as subtitle
+
+    st.markdown("---") # Visual separator
+
+    # Main content of the auth page, now inside a more visually contained area
     tab1, tab2 = st.tabs(["Login", "Sign Up"])
-    
+
     with tab1:
         st.subheader("Login to Your Account")
-        login_username = st.text_input("Username", key="login_user")
-        login_password = st.text_input("Password", type="password", key="login_pass")
-        
-        if st.button("Login", key="login_btn"):
+        login_username = st.text_input("Username", key="login_user", placeholder="Enter your username") # Added placeholder
+        login_password = st.text_input("Password", type="password", key="login_pass", placeholder="Enter your password") # Added placeholder
+
+        # Used st.container for the button to control its width if needed, or simply rely on CSS 'width: 100%'
+        if st.button("Login", key="login_btn", use_container_width=True):
             if login_username and login_password:
                 success, message, is_admin = login(login_username, login_password)
                 if success:
@@ -193,15 +309,15 @@ def show_auth_page():
                     st.error(message)
             else:
                 st.warning("Please fill in all fields")
-    
+
     with tab2:
         st.subheader("Create New Account")
-        signup_username = st.text_input("Choose Username", key="signup_user")
-        signup_email = st.text_input("Email Address", key="signup_email")
-        signup_password = st.text_input("Choose Password", type="password", key="signup_pass")
-        signup_confirm = st.text_input("Confirm Password", type="password", key="signup_confirm")
-        
-        if st.button("Create Account", key="signup_btn"):
+        signup_username = st.text_input("Choose Username", key="signup_user", placeholder="Choose a unique username")
+        signup_email = st.text_input("Email Address", key="signup_email", placeholder="Enter your email address")
+        signup_password = st.text_input("Choose Password", type="password", key="signup_pass", placeholder="At least 6 characters")
+        signup_confirm = st.text_input("Confirm Password", type="password", key="signup_confirm", placeholder="Re-enter your password")
+
+        if st.button("Create Account", key="signup_btn", use_container_width=True):
             if all([signup_username, signup_email, signup_password, signup_confirm]):
                 if signup_password != signup_confirm:
                     st.error("Passwords don't match!")
@@ -217,6 +333,8 @@ def show_auth_page():
             else:
                 st.warning("Please fill in all fields")
 
+    st.markdown("<br><br><small style='text-align: center; color: #888888;'>Powered by Streamlit & Groq</small>", unsafe_allow_html=True)
+
 # Main app functions
 def build_user_vectorstore(username, quotes):
     """Build and save user-specific vectorstore"""