Update pages/Deep_Learning.py

pages/Deep_Learning.py

@@ -10,33 +10,75 @@ os.environ['HF_TOKEN'] = hf
 
 # Page config
 st.set_page_config(page_title="Deep Learning Mentor Chat", layout="centered")
-
-# Improved custom CSS
 st.markdown("""
     <style>
+    body {
+        background-color: #1e1e2f;
+        font-family: 'Segoe UI', sans-serif;
+    }
+
     .main {
         background: linear-gradient(to right, #1f4037, #99f2c8);
         padding: 2rem;
-        font-family: 'Segoe UI', sans-serif;
+        border-radius: 12px;
+    }
+
+    h1, h2, h3, p, label {
+        color: white !important;
+        text-align: center;
+    }
+
+    .stTextInput>div>div>input {
+        border: 1px solid #ddd;
+        border-radius: 10px;
+        padding: 0.5rem;
+        font-size: 16px;
+        width: 100%;
     }
+
     .stButton>button {
-        background-color: #ffffff10;
+        background-color: #6a00ff;
         color: white;
+        padding: 0.6rem 1.2rem;
+        font-size: 16px;
         font-weight: 600;
+        border: 1px solid white;
         border-radius: 10px;
-        padding: 0.6rem 1rem;
         transition: all 0.3s ease;
-        border: 1px solid white;
     }
+
     .stButton>button:hover {
-        background-color: #ffffff30;
+        background-color: #5300e8;
         color: white;
         border-color: #fff;
     }
-    h1, h3, p, label {
+
+    .chat-box {
+        background-color: #ffffff15;
+        border-radius: 12px;
+        padding: 1rem;
+        margin-bottom: 1rem;
         color: white;
-        text-align: center;
+        line-height: 1.6;
     }
+
+    .user-msg {
+        color: #e0e0e0;
+        font-weight: 600;
+    }
+
+    .bot-msg {
+        color: #ffffff;
+        margin-top: 0.3rem;
+    }
+
+    .chat-container {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+        margin-top: 2rem;
+    }
+
     .chat-bubble-user {
         background-color: #ffffff25;
         padding: 0.75rem 1rem;
@@ -49,6 +91,7 @@ st.markdown("""
         max-width: 90%;
         align-self: flex-end;
     }
+
     .chat-bubble-bot {
         background-color: #ffffff15;
         padding: 0.75rem 1rem;
@@ -60,15 +103,16 @@ st.markdown("""
         max-width: 90%;
         align-self: flex-start;
     }
-    .chat-container {
-        display: flex;
-        flex-direction: column;
-        gap: 0.5rem;
-        margin-top: 2rem;
+
+    hr {
+        border: 0;
+        height: 1px;
+        background: #ffffff30;
+        margin: 1.5rem 0;
     }
     </style>
 """, unsafe_allow_html=True)
-# App title
+
 st.markdown("<h1>🤖 Deep Learning Mentor Chat</h1>", unsafe_allow_html=True)
 st.markdown("<p>Learn Deep Learning with personalized AI mentorship</p>", unsafe_allow_html=True)