Update pages/python.py

pages/python.py

@@ -11,44 +11,105 @@ os.environ['HF_TOKEN'] = hf
 st.set_page_config(page_title="Python Mentor Chat", layout="centered")
 
 # Inject home page CSS style
+# st.markdown("""
+#     <style>
+#     .main {
+#         background: linear-gradient(135deg, #430089 0%, #82ffa1 100%);
+#         padding: 2rem;
+#         font-family: 'Segoe UI', sans-serif;
+#     }
+#     .stButton>button {
+#         background: #ffffff10;
+#         border: 2px solid #ffffff50;
+#         color: white;
+#         font-size: 18px;
+#         font-weight: 600;
+#         padding: 0.8em 1.2em;
+#         border-radius: 12px;
+#         width: 100%;
+#         transition: 0.3s ease;
+#         box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
+#     }
+#     .stButton>button:hover {
+#         background: #ffffff30;
+#         border-color: #fff;
+#         color: #ffffff;
+#     }
+#     h1, h3, p, label {
+#         color: #ffffff;
+#         text-align: center;
+#     }
+#     hr {
+#         border: 1px solid #ffffff50;
+#         margin: 2em 0;
+#     }
+#     .css-1aumxhk {
+#         color: white;
+#     }
+#     </style>
+# """, unsafe_allow_html=True)
+
 st.markdown("""
     <style>
     .main {
-        background: linear-gradient(135deg, #430089 0%, #82ffa1 100%);
+        background: linear-gradient(to right, #1f4037, #99f2c8);
         padding: 2rem;
         font-family: 'Segoe UI', sans-serif;
     }
     .stButton>button {
-        background: #ffffff10;
-        border: 2px solid #ffffff50;
+        background-color: #ffffff10;
         color: white;
-        font-size: 18px;
         font-weight: 600;
-        padding: 0.8em 1.2em;
-        border-radius: 12px;
-        width: 100%;
-        transition: 0.3s ease;
-        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
+        border-radius: 10px;
+        padding: 0.6rem 1rem;
+        transition: all 0.3s ease;
+        border: 1px solid white;
     }
     .stButton>button:hover {
-        background: #ffffff30;
+        background-color: #ffffff30;
+        color: white;
         border-color: #fff;
-        color: #ffffff;
     }
     h1, h3, p, label {
-        color: #ffffff;
+        color: white;
         text-align: center;
     }
-    hr {
-        border: 1px solid #ffffff50;
-        margin: 2em 0;
+    .chat-bubble-user {
+        background-color: #ffffff25;
+        padding: 0.75rem 1rem;
+        border-radius: 1rem;
+        margin-bottom: 0.5rem;
+        color: #fff;
+        font-weight: 500;
+        text-align: left;
+        width: fit-content;
+        max-width: 90%;
+        align-self: flex-end;
     }
-    .css-1aumxhk {
-        color: white;
+    .chat-bubble-bot {
+        background-color: #ffffff15;
+        padding: 0.75rem 1rem;
+        border-radius: 1rem;
+        margin-bottom: 0.5rem;
+        color: #fff;
+        text-align: left;
+        width: fit-content;
+        max-width: 90%;
+        align-self: flex-start;
+    }
+    .chat-container {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+        margin-top: 2rem;
     }
     </style>
 """, unsafe_allow_html=True)
 
+# Page title
+st.markdown("<h1 style='margin-bottom: 0;'>🗃️ SQL Mentor Chat</h1>", unsafe_allow_html=True)
+st.markdown("<p style='margin-top: 0.2rem;'>Learn SQL interactively from your AI mentor!</p>", unsafe_allow_html=True)
+
 # Title
 st.title("🐍 Python Mentor Chat")