Update app.py

app.py

@@ -127,14 +127,14 @@ def detect_emotion(text):
 
 # Authentication UI
 def show_auth_page():
-    st.set_page_config(page_title="DilBot - Login", page_icon="🧠", layout="centered") # Added layout="centered"
+    st.set_page_config(page_title="DilBot - Login", page_icon="🧠", layout="centered")
 
-    # --- UPDATED CUSTOM CSS FOR THE AUTH PAGE ---
+    # --- FURTHER ENHANCED CUSTOM CSS FOR THE AUTH PAGE ---
     st.markdown("""
     <style>
     /* Overall App Background & Font */
     .stApp {
-        background-color: #f0f2f6; /* Light grey background */
+        background: linear-gradient(to right bottom, #f0f2f6, #e0e6ef); /* Subtle gradient background */
         font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* Modern, clean font */
         color: #333333; /* Default text color */
     }
@@ -146,57 +146,68 @@ def show_auth_page():
     .main .block-container {
         max-width: 500px; /* Limit width for better aesthetics */
         margin: auto; /* Center the container */
-        padding: 3rem 2rem; /* More padding top/bottom */
+        padding: 3rem 2.5rem; /* Increased padding top/bottom and sides */
         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 */
+        border-radius: 20px; /* Even softer rounded corners */
+        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); /* Deeper, softer shadow for card effect */
         text-align: center; /* Center content within the card */
+        animation: fadeIn 0.8s ease-out; /* Add a subtle fade-in animation */
     }
 
+    /* Keyframe for fade-in animation */
+    @keyframes fadeIn {
+        from { opacity: 0; transform: translateY(20px); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+
+
     /* Titles and Subheaders */
     h1 {
         color: #7289da; /* DilBot's primary color */
-        font-size: 2.8em; /* Larger title */
-        font-weight: 700;
-        margin-bottom: 0.5rem;
+        font-size: 3em; /* Larger title */
+        font-weight: 800; /* Bolder */
+        margin-bottom: 0.2rem; /* Less space to tagline */
+        letter-spacing: -0.5px; /* Slight letter spacing for visual appeal */
     }
-    .stMarkdown p { /* For "Welcome! Please login..." */
-        color: #666666;
-        font-size: 1.1em;
-        margin-bottom: 2rem;
+    .tagline { /* Custom class for the tagline */
+        color: #6a7c96; /* Softer blue-grey for the tagline */
+        font-size: 1.2em;
+        margin-top: 0; /* Align closely with title */
+        margin-bottom: 2.5rem; /* More space to tabs */
+        font-weight: 500;
     }
     h2 { /* Subheaders for Login/Sign Up tabs */
         color: #4A4A4A;
-        font-size: 1.7em;
-        font-weight: 600;
+        font-size: 1.8em; /* Slightly larger */
+        font-weight: 700; /* Bolder */
         margin-top: 1.5rem;
-        margin-bottom: 1.5rem;
+        margin-bottom: 1.8rem; /* More space below subheader */
         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;
+        gap: 25px; /* More space between tabs */
+        margin-bottom: 2.5rem; /* More space below tabs */
     }
     .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;
+        padding: 12px 25px; /* Increased padding for tabs */
+        font-size: 1.3em; /* Larger tab text */
+        font-weight: 700; /* Bolder */
+        color: #a0a0a0; /* Lighter grey for inactive tabs */
+        border-bottom: 4px solid transparent; /* Thicker underline */
         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 */
+        border-bottom: 4px 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 */
+        border-bottom: 4px solid #7289da; /* Stronger accent for active tab */
     }
 
     /* Input Fields */
@@ -205,21 +216,22 @@ def show_auth_page():
         color: #555555;
         text-align: left; /* Align labels to the left */
         display: block; /* Make label a block element to control margin */
-        margin-bottom: 0.5rem;
+        margin-bottom: 0.6rem; /* More space below label */
         padding-left: 5px; /* Small indent for label */
     }
     .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;
+        border-radius: 12px; /* Even more rounded */
+        border: 1px solid #e0e0e0; /* Softer border */
+        padding: 14px 18px; /* Even more padding */
+        font-size: 1.1em; /* Slightly larger font in input */
         color: #333333;
-        box-shadow: inset 0 1px 3px rgba(0,0,0,0.05); /* Subtle inner shadow */
+        background-color: #fcfcfc; /* Slightly off-white background */
+        box-shadow: inset 0 2px 5px rgba(0,0,0,0.03); /* More 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 */
+        box-shadow: 0 0 0 0.25rem rgba(114, 137, 218, 0.3); /* Stronger glow effect on focus */
         outline: none;
     }
 
@@ -228,74 +240,92 @@ def show_auth_page():
         background-color: #7289da; /* DilBot's primary blue/purple */
         color: white;
         border: none;
-        border-radius: 10px; /* More rounded */
-        padding: 12px 25px; /* Larger padding */
-        font-size: 1.1em; /* Larger text */
+        border-radius: 12px; /* More rounded */
+        padding: 14px 28px; /* Larger padding */
+        font-size: 1.2em; /* Larger text */
         font-weight: bold;
         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 */
+        box-shadow: 0 8px 25px rgba(0,0,0,0.2); /* More prominent, softer shadow */
         cursor: pointer;
         width: 100%; /* Make buttons full width */
-        margin-top: 1.5rem; /* Space above buttons */
+        margin-top: 2rem; /* More space above buttons */
+        letter-spacing: 0.5px; /* Slight letter spacing */
     }
     .stButton>button:hover {
         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);
+        transform: translateY(-4px); /* More pronounced lift effect */
+        box-shadow: 0 12px 30px rgba(0,0,0,0.25); /* Stronger shadow on hover */
     }
     .stButton>button:active {
         background-color: #4a5a90;
         transform: translateY(0);
-        box-shadow: 0 3px 10px rgba(0,0,0,0.1);
+        box-shadow: 0 5px 15px rgba(0,0,0,0.15);
     }
 
-    /* Alerts (Success, Error, Warning) */
+    /* Alerts (Success, Error, Warning, Info) - more refined */
     [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 */
+        border-radius: 10px;
+        padding: 18px 25px; /* More padding */
+        margin-bottom: 1.8rem; /* More space below */
+        font-size: 1.05em; /* Slightly larger text */
+        line-height: 1.6;
+        text-align: left;
+        box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* Subtle shadow for alerts */
     }
-    /* Specific styles for each type - copied from previous example, ensuring consistency */
+    /* Specific styles for each type with slightly richer colors */
     [data-testid="stAlert"] .streamlit-warning {
-        background-color: #fff3cd; color: #664d03; border-left: 5px solid #ffc107;
+        background-color: #fef7e0; color: #7a5f00; border-left: 6px solid #ffcc00;
     }
     [data-testid="stAlert"] .streamlit-success {
-        background-color: #d1e7dd; color: #0f5132; border-left: 5px solid #198754;
+        background-color: #e6ffe6; color: #0a6b0a; border-left: 6px solid #4CAF50;
     }
     [data-testid="stAlert"] .streamlit-error {
-        background-color: #f8d7da; color: #842029; border-left: 5px solid #dc3545;
+        background-color: #ffe6e6; color: #8c0a0a; border-left: 6px solid #e74c3c;
     }
     [data-testid="stAlert"] .streamlit-info {
-        background-color: #cfe2ff; color: #055160; border-left: 5px solid #0dcaf0;
+        background-color: #e6f7ff; color: #0a4d6e; border-left: 6px solid #3498db;
+    }
+
+    /* Footer/Attribution */
+    .footer {
+        color: #a0a0a0;
+        font-size: 0.8em;
+        margin-top: 3rem; /* More space from form */
+        display: block;
+        text-align: center;
+        letter-spacing: 0.2px;
     }
 
     /* 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 */
+        padding: 0 10px; /* Slight horizontal padding inside tabs */
     }
     </style>
     """, unsafe_allow_html=True)
-    # --- END UPDATED CUSTOM CSS ---
+    # --- END FURTHER ENHANCED 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
+    # Visual Enhancements using Streamlit API
+    # Removed st.image as it was causing "Image not found"
+    st.title("DilBot") # Just the name
+    st.markdown("<p class='tagline'>Your Intelligent Emotional Companion</p>", 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", placeholder="Enter your username") # Added placeholder
-        login_password = st.text_input("Password", type="password", key="login_pass", placeholder="Enter your password") # Added placeholder
+        # Added an icon for username/password fields for visual cue
+        login_username = st.text_input("Username", key="login_user", placeholder="Enter your username",
+                                       label_visibility="collapsed") # Hide default label, use markdown label
+        st.markdown("<p style='text-align: left; color: #555555; font-weight: 600; margin-bottom: 0.6rem; padding-left: 5px;'>Username</p>", unsafe_allow_html=True)
+
+
+        login_password = st.text_input("Password", type="password", key="login_pass", placeholder="Enter your password",
+                                       label_visibility="collapsed")
+        st.markdown("<p style='text-align: left; color: #555555; font-weight: 600; margin-bottom: 0.6rem; padding-left: 5px;'>Password</p>", unsafe_allow_html=True)
+
 
-        # 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)
@@ -312,10 +342,26 @@ def show_auth_page():
 
     with tab2:
         st.subheader("Create New Account")
-        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")
+
+        signup_username = st.text_input("Choose Username", key="signup_user", placeholder="Choose a unique username",
+                                        label_visibility="collapsed")
+        st.markdown("<p style='text-align: left; color: #555555; font-weight: 600; margin-bottom: 0.6rem; padding-left: 5px;'>Choose Username</p>", unsafe_allow_html=True)
+
+
+        signup_email = st.text_input("Email Address", key="signup_email", placeholder="Enter your email address",
+                                      label_visibility="collapsed")
+        st.markdown("<p style='text-align: left; color: #555555; font-weight: 600; margin-bottom: 0.6rem; padding-left: 5px;'>Email Address</p>", unsafe_allow_html=True)
+
+
+        signup_password = st.text_input("Choose Password", type="password", key="signup_pass", placeholder="At least 6 characters",
+                                        label_visibility="collapsed")
+        st.markdown("<p style='text-align: left; color: #555555; font-weight: 600; margin-bottom: 0.6rem; padding-left: 5px;'>Choose Password</p>", unsafe_allow_html=True)
+
+
+        signup_confirm = st.text_input("Confirm Password", type="password", key="signup_confirm", placeholder="Re-enter your password",
+                                        label_visibility="collapsed")
+        st.markdown("<p style='text-align: left; color: #555555; font-weight: 600; margin-bottom: 0.6rem; padding-left: 5px;'>Confirm Password</p>", unsafe_allow_html=True)
+
 
         if st.button("Create Account", key="signup_btn", use_container_width=True):
             if all([signup_username, signup_email, signup_password, signup_confirm]):
@@ -333,8 +379,7 @@ 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)
-
+    st.markdown("<p class='footer'>Built with ❤️ by CSG Hackathon Team | Powered by Streamlit & Groq</p>", unsafe_allow_html=True)
 # Main app functions
 def build_user_vectorstore(username, quotes):
     """Build and save user-specific vectorstore"""