Update app.py

app.py

@@ -36,6 +36,396 @@ if "transcribed_text" not in st.session_state:
 ADMIN_USERNAME = os.getenv("ADMIN_USERNAME")  # Set in HF Spaces secrets
 ADMIN_PASSWORD = os.getenv("ADMIN_PASSWORD")  # Set in HF Spaces secrets
 
+# --- UI/UX Modifications (Applied globally) ---
+def set_background_and_styles():
+    st.markdown(
+        """
+        <style>
+        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&display=swap');
+        .stApp {
+            background: linear-gradient(135deg, #e0e7ff 0%, #c6e2ff 50%, #b0c4de 100%); /* Light blueish gradient */
+            background-size: cover;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-attachment: fixed;
+            font-family: 'Montserrat', sans-serif;
+            color: #333; /* Default text color to dark for light background */
+        }
+        
+        h1, h2, h3, h4, h5, h6, .stMarkdown, label {
+            font-family: 'Merriweather', serif;
+            color: #1a237e; /* Darker blue for headings */
+        }
+        
+        /* Ensure text area label is dark */
+        .stTextArea > label {
+            color: #333 !important;
+        }
+        .stButton>button {
+            background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%); /* Blue-purple gradient */
+            color: white;
+            border-radius: 8px;
+            border: none;
+            padding: 10px 20px;
+            font-size: 16px;
+            font-weight: bold;
+            transition: all 0.2s ease-in-out;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        .stButton>button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+        }
+        
+        /* Secondary button style for "Explore Opportunities" */
+        .secondary-button > button {
+            background-color: white;
+            color: #6a11cb;
+            border: 1px solid #6a11cb;
+            box-shadow: none;
+        }
+        .secondary-button > button:hover {
+            background-color: #f0f4f8; /* Light hover */
+            color: #2575fc;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+        .stTextInput>div>div>input, .stTextArea>div>div>textarea, .stSelectbox>div>div>div {
+            border-radius: 8px;
+            border: 1px solid #b3e5fc; /* Light blue border */
+            padding: 10px;
+            background-color: rgba(255, 255, 255, 0.95); /* Nearly opaque white */
+            color: #333; /* Input text color dark */
+        }
+        /* Adjusted stSuccess and stInfo for white text on darker transparent black background */
+        .stSuccess { 
+            border-left: 5px solid #28a745; 
+            background-color: rgba(0, 0, 0, 0.6); /* Transparent black */
+            color: white; /* Make text white */
+            border-radius: 8px;
+            padding: 10px;
+            margin-bottom: 10px;
+        }
+        .stInfo { 
+            border-left: 5px solid #17a2b8; 
+            background-color: rgba(0, 0, 0, 0.6); /* Transparent black */
+            color: white; /* Make text white */
+            border-radius: 8px;
+            padding: 10px;
+            margin-bottom: 10px;
+        }
+        /* Keeping warning/error as original light background for now, as black transparent might not suit warnings well */
+        .stWarning { 
+            border-left: 5px solid #ffc107; 
+            background-color: rgba(255, 255, 255, 0.9); 
+            color: #333; 
+            border-radius: 8px;
+            padding: 10px;
+            margin-bottom: 10px;
+        }
+        .stError { 
+            border-left: 5px solid #dc3545; 
+            background-color: rgba(255, 255, 255, 0.9); 
+            color: #333; 
+            border-radius: 8px;
+            padding: 10px;
+            margin-bottom: 10px;
+        }
+        /* Custom container for content with blur background - used for auth form */
+        .auth-content-container {
+            background-color: rgba(255, 255, 255, 0.8); /* Slightly transparent white */
+            backdrop-filter: blur(8px); /* Blur effect */
+            border-radius: 15px;
+            padding: 30px;
+            margin: 20px auto;
+            max-width: 450px; /* Slimmer for auth forms */
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+            text-align: center; /* Center content within */
+        }
+        
+        .feature-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Adjusted for more flexibility */
+            gap: 20px;
+            margin-top: 30px;
+            margin-bottom: 30px;
+            max-width: 900px; /* Max width for the grid itself */
+            margin-left: auto;
+            margin-right: auto;
+        }
+        .feature-item {
+            background-color: rgba(255, 255, 255, 0.9);
+            border-radius: 12px;
+            padding: 20px;
+            text-align: center;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
+            transition: transform 0.2s ease-in-out;
+            border: 1px solid #e0e0e0;
+        }
+        .feature-item:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.12);
+        }
+        .feature-item .icon-img {
+            height: 60px; /* Adjust icon size as needed */
+            margin-bottom: 10px;
+            display: block; /* Ensure icon is on its own line */
+            margin-left: auto;
+            margin-right: auto;
+        }
+        .feature-item h3 {
+            font-size: 1.2em;
+            color: #1a237e;
+            margin-bottom: 8px;
+        }
+        .feature-item p {
+            font-size: 0.9em;
+            color: #555;
+            line-height: 1.5;
+        }
+        /* Main app content container */
+        .main-app-content-container {
+            background-color: rgba(255, 255, 255, 0.8); /* Slightly transparent white */
+            backdrop-filter: blur(8px); /* Blur effect */
+            border-radius: 15px;
+            padding: 30px;
+            margin: 20px auto;
+            max-width: 800px; /* Wider for main app content */
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+            color: #333; /* Dark text inside */
+        }
+        /* Ensure headers within main app container are dark */
+        .main-app-content-container h1, .main-app-content-container h2, 
+        .main-app-content-container h3, .main-app-content-container h4, 
+        .main-app-content-container h5, .main-app-content-container h6,
+        .main-app-content-container .stMarkdown, .main-app-content-container label {
+            color: #1a237e; /* Darker blue for headers in main app */
+        }
+        /* Specifically target text within main-app-content-container to be dark */
+        .main-app-content-container p, .main-app-content-container li, .main-app-content-container div {
+            color: #333;
+        }
+        /* Override specific Streamlit elements that don't pick up general styles for main app */
+        .main-app-content-container .st-emotion-cache-1jmve6n, /* st.subheader */
+        .main-app-content-container .st-emotion-cache-1gcs47q, /* st.text or similar */
+        .main-app-content-container .st-emotion-cache-10q7f27, /* st.info text */
+        .main-app-content-container .st-emotion-cache-1j0qsvo { /* more specific text */
+             color: #333 !important;
+        }
+        /* Navbar Styling */
+        .navbar {
+            display: flex;
+            justify-content: center; /* Center the logo and title */
+            align-items: center;
+            padding: 15px 40px;
+            background-color: rgba(255, 255, 255, 0.8); /* Slightly transparent white */
+            backdrop-filter: blur(5px);
+            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+            border-radius: 10px;
+            margin-bottom: 20px;
+            /* position: relative; Removed absolute positioning as logout button is gone */
+        }
+        .navbar-logo-container {
+            display: flex;
+            align-items: center;
+            justify-content: center; /* Center the logo and text */
+            flex-grow: 1; /* Allows it to take available space for centering */
+        }
+        .navbar-logo-text {
+            font-family: 'Merriweather', serif;
+            font-size: 24px;
+            font-weight: bold;
+            color: #1a237e;
+            margin-left: 10px; /* Space between logo image and text */
+        }
+        .navbar-logo-img {
+            height: 30px; /* Size of your logo image */
+            vertical-align: middle;
+        }
+        .navbar-links { /* This block might not be needed if links are removed */
+            display: flex;
+            gap: 30px;
+        }
+        .navbar-link { /* This block might not be needed if links are removed */
+            font-family: 'Montserrat', sans-serif;
+            font-size: 16px;
+            color: #3f51b5; /* Medium blue */
+            text-decoration: none;
+            padding: 5px 10px;
+            transition: color 0.2s ease-in-out;
+            cursor: pointer;
+        }
+        .navbar-link:hover { /* This block might not be needed if links are removed */
+            color: #6a11cb; /* Purple hover */
+        }
+        .navbar-button { /* This block might not be needed if links are removed */
+            background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
+            color: white;
+            border-radius: 8px;
+            padding: 8px 15px;
+            font-size: 14px;
+            font-weight: bold;
+            text-decoration: none;
+            transition: all 0.2s ease-in-out;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            cursor: pointer;
+        }
+        .navbar-button:hover { /* This block might not be needed if links are removed */
+            transform: translateY(-1px);
+            box_shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+        }
+        /* AI Powered Educational Platform banner style */
+        .ai-powered-banner {
+            display: inline-flex; /* Use inline-flex to shrink-wrap content */
+            align-items: center;
+            background-color: rgba(255, 255, 255, 0.7); /* Light, semi-transparent */
+            border-radius: 20px;
+            padding: 8px 15px;
+            margin-bottom: 20px;
+            font-size: 14px;
+            font-weight: 600;
+            color: #3f51b5; /* Blue text */
+            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+            text-align: center; /* Ensure text is centered if container grows */
+            margin-left: auto; /* Center horizontally */
+            margin-right: auto; /* Center horizontally */
+        }
+        .centered-container {
+            display: flex;
+            justify-content: center;
+            width: 100%;
+        }
+        /* Metrics section styles (50K+ Students Helped, etc.) */
+        .metrics-container {
+            display: flex;
+            justify-content: space-around;
+            flex-wrap: wrap;
+            margin-top: 40px;
+            gap: 20px;
+            /* border: 1px solid red; REMOVED for debugging */ 
+        }
+        .metric-item {
+            text-align: center;
+            background-color: rgba(255, 255, 255, 0.7);
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
+            flex: 1; /* Allow items to grow/shrink */
+            min-width: 180px; /* Minimum width before wrapping */
+        }
+        .metric-item h2 {
+            font-size: 32px;
+            color: #6a11cb; /* Purple */
+            margin-bottom: 5px;
+        }
+        .metric-item p {
+            font-size: 16px;
+            color: #555;
+        }
+        .metric-item img { /* Style for icon images if used */
+            height: 40px;
+            margin-bottom: 10px;
+        }
+        /* Center plots */
+        .st-emotion-cache-1pxazr6 { /* Specific Streamlit container for pyplot */
+            display: flex;
+            justify-content: center;
+        }
+        /* Override specific Streamlit elements that don't pick up general styles */
+        .st-emotion-cache-1jmve6n { /* This class is often for st.subheader */
+            color: #1a237e !important; /* Darker blue */
+        }
+        .st-emotion-cache-1gcs47q { /* This class can be for specific text elements */
+             color: #333 !important;
+        }
+        .st-emotion-cache-10q7f27 { /* Example for st.info text */
+             color: #333 !important;
+        }
+        /* Hide the top grey bar */
+        header.st-emotion-cache-1gh8zsi {
+            display: none !important;
+        }
+        div.st-emotion-cache-fis6y8 { 
+            padding-top: 0 !important;
+        }
+        div.st-emotion-cache-z5inrg { 
+            display: none !important;
+        }
+        /* Adjust overall container width */
+        .st-emotion-cache-fg4lbf { 
+            max-width: 1000px !important; /* Adjusted for wider layout */
+            padding-left: 0 !important; 
+            padding-right: 0 !important;
+        }
+        .block-container { 
+            padding-left: 1rem;
+            padding-right: 1rem;
+            color: #333; /* Default text color within block-container */
+        }
+        /* Specific style for button alignment */
+        /* Updated .button-row to stack and add spacing */
+        .button-row {
+            display: flex;
+            flex-direction: column; /* Stack buttons vertically */
+            align-items: center; /* Center buttons horizontally */
+            gap: 20px; /* Space between buttons */
+            margin-top: 20px;
+            width: 100%; /* Ensure row takes full width to center its content */
+        }
+        .button-row > div { /* Target Streamlit column divs within button-row if still used */
+            width: 100%; /* Make columns take full width to center buttons */
+            display: flex;
+            justify-content: center; /* Center the buttons inside their columns */
+        }
+        /* Custom footer style */
+        .app-footer {
+            position: fixed;
+            left: 0;
+            bottom: 0;
+            width: 100%;
+            background-color: #f0f2f6; /* Streamlit's default background color */
+            color: #31333F; /* Streamlit's default text color */
+            text-align: center;
+            padding: 10px;
+            font-size: 14px;
+            border-top: 1px solid #d3d3d3;
+            z-index: 1000; /* Ensure footer is on top */
+        }
+        /* Adjust app padding to prevent content from being hidden by footer */
+        .stApp {
+            padding-bottom: 50px; /* Approx height of footer */
+        }
+        /* History entry styling */
+        .history-entry {
+            background-color: rgba(255, 255, 255, 0.9);
+            border-radius: 10px;
+            padding: 15px;
+            margin-bottom: 10px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+            border: 1px solid #e0e0e0;
+        }
+        .history-entry h4 {
+            color: #2575fc; /* Blue for history entry title */
+            margin-top: 0;
+            margin-bottom: 5px;
+        }
+        .history-entry p {
+            color: #444;
+            font-size: 0.95em;
+        }
+        .history-entry strong {
+            color: #1a237e;
+        }
+        /* New style for output text color from DilBot */
+        .dilbot-response-text {
+            color: black !important; /* Force black text */
+        }
+        </style>
+        """,
+        unsafe_allow_html=True
+    )
+
 # User management functions
 def hash_password(password):
     """Hash password using SHA-256 with salt"""
@@ -125,245 +515,117 @@ def detect_emotion(text):
     prediction = emotion_pipeline(text)[0][0]
     return prediction['label'].lower(), prediction['score']
 
+
 # Authentication UI
 def show_auth_page():
-    st.set_page_config(page_title="DilBot - Login", page_icon="🧠", layout="centered")
-
-    # --- FURTHER ENHANCED CUSTOM CSS FOR THE AUTH PAGE ---
-    st.markdown("""
-    <style>
-    /* Overall App Background & Font */
-    .stApp {
-        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 */
-    }
-
-    /* Main Container for Auth Form (makes it look like a card) */
-    .stApp > header { /* Hide Streamlit's default header */
-        display: none;
-    }
-    .main .block-container {
-        max-width: 500px; /* Limit width for better aesthetics */
-        margin: auto; /* Center the container */
-        padding: 3rem 2.5rem; /* Increased padding top/bottom and sides */
-        background-color: #ffffff; /* White background for the form card */
-        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: 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 */
-    }
-    .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.8em; /* Slightly larger */
-        font-weight: 700; /* Bolder */
-        margin-top: 1.5rem;
-        margin-bottom: 1.8rem; /* More space below subheader */
-        text-align: center;
-    }
+    set_background_and_styles()
+    st.markdown(
+        """
+        <div class="navbar">
+            <div class="navbar-logo-container">
+                <img src="https://e7.pngegg.com/pngimages/498/917/png-clipart-computer-icons-desktop-chatbot-icon-blue-angle-thumbnail.png" class="navbar-logo-img">
+                <div class="navbar-logo-text">DilBot</div>
+            </div>
+        </div>
+        """, unsafe_allow_html=True
+    )
 
-    /* Tabs Styling */
-    .stTabs [data-baseweb="tab-list"] {
-        justify-content: center; /* Center the tabs themselves */
-        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: 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: 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: 4px solid #7289da; /* Stronger accent for active tab */
-    }
+    st.markdown("<div class='centered-container'><div class='ai-powered-banner'><span>✨</span>AI-Powered Emotional Companion</div></div>", unsafe_allow_html=True)
 
-    /* Input Fields */
-    .stTextInput>label {
-        font-weight: 600;
-        color: #555555;
-        text-align: left; /* Align labels to the left */
-        display: block; /* Make label a block element to control margin */
-        margin-bottom: 0.6rem; /* More space below label */
-        padding-left: 5px; /* Small indent for label */
-    }
-    .stTextInput>div>div>input {
-        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;
-        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.25rem rgba(114, 137, 218, 0.3); /* Stronger glow effect on focus */
-        outline: none;
-    }
+    st.markdown(
+        """
+        <h1 style='text-align: center; font-size: 3.5em; color: #1a237e;'>Transform Your Emotional Journey</h1>
+        <p style='text-align: center; font-size: 1.2em; color: #555;'>
+            DilBot empowers individuals with AI-driven insights for emotional well-being, personal growth, and self-discovery worldwide.
+        </p>
+        """, unsafe_allow_html=True
+    )
 
-    /* Buttons */
-    .stButton>button {
-        background-color: #7289da; /* DilBot's primary blue/purple */
-        color: white;
-        border: none;
-        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 8px 25px rgba(0,0,0,0.2); /* More prominent, softer shadow */
-        cursor: pointer;
-        width: 100%; /* Make buttons full width */
-        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(-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 5px 15px rgba(0,0,0,0.15);
-    }
+    st.markdown('<div class="button-row">', unsafe_allow_html=True)
+    
+    # Buttons placed directly in a single column layout
+    if st.button("Paid Plan", key="paid_plan_btn", use_container_width=True):
+        st.info("Paid version coming soon") # Text for paid plan button
+    st.markdown('<div class="secondary-button" style="margin-top: 20px;">', unsafe_allow_html=True) # Added margin for spacing
+    if st.button("Login Below FOR FREE", key="login_free_btn", use_container_width=True):
+        st.info("Slide down below") # Text for free login button
+    st.markdown('</div>', unsafe_allow_html=True)
+    st.markdown('</div>', unsafe_allow_html=True) # Close button-row
+
+
+    # --- Section for icons and descriptions ---
+    st.markdown("<div class='feature-grid'>", unsafe_allow_html=True)
+    
+    # First Image: Users vast amount satisfied (https://cdn-icons-png.flaticon.com/512/33/33308.png)
+    st.markdown(f"""
+        <div class="feature-item">
+            <img src="https://cdn-icons-png.flaticon.com/512/33/33308.png" class="icon-img">
+            <h3>Users Vastly Satisfied</h3>
+            <p>Our community experiences significant positive emotional shifts.</p>
+        </div>
+    """, unsafe_allow_html=True)
 
-    /* Alerts (Success, Error, Warning, Info) - more refined */
-    [data-testid="stAlert"] {
-        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 with slightly richer colors */
-    [data-testid="stAlert"] .streamlit-warning {
-        background-color: #fef7e0; color: #7a5f00; border-left: 6px solid #ffcc00;
-    }
-    [data-testid="stAlert"] .streamlit-success {
-        background-color: #e6ffe6; color: #0a6b0a; border-left: 6px solid #4CAF50;
-    }
-    [data-testid="stAlert"] .streamlit-error {
-        background-color: #ffe6e6; color: #8c0a0a; border-left: 6px solid #e74c3c;
-    }
-    [data-testid="stAlert"] .streamlit-info {
-        background-color: #e6f7ff; color: #0a4d6e; border-left: 6px solid #3498db;
-    }
+    # Second Image: Successful User's Emotion's results a happy lifestyle (https://cdn-icons-png.flaticon.com/512/10809/10809501.png)
+    st.markdown(f"""
+        <div class="feature-item">
+            <img src="https://cdn-icons-png.flaticon.com/512/10809/10809501.png" class="icon-img">
+            <h3>Happy Lifestyle</h3>
+            <p>Empowering users to achieve emotional well-being and a happier life.</p>
+        </div>
+    """, unsafe_allow_html=True)
 
-    /* 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;
-    }
+    # Third Image: 10,000+ Daily Users (https://www.clipartmax.com/png/middle/225-2254363_checklist-comments-form-approved-icon.png)
+    st.markdown(f"""
+        <div class="feature-item">
+            <img src="https://www.clipartmax.com/png/middle/225-2254363_checklist-comments-form-appr.png" class="icon-img">
+            <h3>10,000+ Daily Users</h3>
+            <p>Join our growing community finding support and growth daily.</p>
+        </div>
+    """, unsafe_allow_html=True)
 
-    /* Small hack to adjust the spacing around form elements within tabs */
-    .stTabs [data-baseweb="tab-panel"] > div > div {
-        padding: 0 10px; /* Slight horizontal padding inside tabs */
-    }
-    </style>
+    # Re-adding the original Empathetic Chatbot feature from previous response for completeness
+    st.markdown("""
+        <div class="feature-item">
+            <span class="icon-img">💬</span> <h3>Empathetic Chatbot</h3>
+            <p>Connect with an AI that listens and understands your feelings.</p>
+        </div>
     """, unsafe_allow_html=True)
-    # --- END FURTHER ENHANCED CUSTOM CSS ---
 
-    # 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("</div>", unsafe_allow_html=True)
+    # --- End of icon and description section ---
 
-    st.markdown("---") # Visual separator
 
-    tab1, tab2 = st.tabs(["Login", "Sign Up"])
+    st.markdown("<div class='auth-content-container'>", unsafe_allow_html=True) # Container for login/signup
 
+    tab1, tab2 = st.tabs(["Login", "Sign Up"])
+    
     with tab1:
         st.subheader("Login to Your Account")
-        # 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)
-
-
-        if st.button("Login", key="login_btn", use_container_width=True):
+        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"):
             if login_username and login_password:
                 success, message, is_admin = login(login_username, login_password)
                 if success:
                     st.session_state.authenticated = True
                     st.session_state.username = login_username
                     st.session_state.is_admin = is_admin
-                    st.success(message)
+                    st.session_state.page = "main_app" if not is_admin else "admin_dashboard" # Direct to correct page
                     st.rerun()
                 else:
                     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", 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):
+        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"):
             if all([signup_username, signup_email, signup_password, signup_confirm]):
                 if signup_password != signup_confirm:
                     st.error("Passwords don't match!")
@@ -379,7 +641,8 @@ def show_auth_page():
             else:
                 st.warning("Please fill in all fields")
 
-    st.markdown("<p class='footer'>Built with ❤️ by CSG Hackathon Team | Powered by Streamlit & Groq</p>", unsafe_allow_html=True)
+    st.markdown("</div>", unsafe_allow_html=True)
+    
 # Main app functions
 def build_user_vectorstore(username, quotes):
     """Build and save user-specific vectorstore"""