Update app.py

app.py

@@ -42,12 +42,12 @@ st.set_page_config(page_title="Advanced AI Code Assistant", page_icon="💻", la
 
 st.markdown("""
 <style>
-    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
+    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
     
     body {
-        font-family: 'Poppins', sans-serif;
-        background-color: #2d2d2d;
-        color: #e0e0e0;
+        font-family: 'Roboto', sans-serif;
+        background-color: #e9ecef;
+        color: #212529;
     }
     .stApp {
         max-width: 1200px;
@@ -55,106 +55,99 @@ st.markdown("""
         padding: 2rem;
     }
     .main-container {
-        background: #333;
-        border-radius: 20px;
-        padding: 3rem;
-        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+        background: #ffffff;
+        border-radius: 12px;
+        padding: 2rem;
+        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
     }
     h1 {
-        font-size: 3rem;
-        font-weight: 700;
-        color: #e0e0e0;
+        font-size: 2.5rem;
+        font-weight: 600;
+        color: #0d6efd;
         text-align: center;
         margin-bottom: 1rem;
-        text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
     }
     .subtitle {
-        font-size: 1.2rem;
+        font-size: 1rem;
         text-align: center;
-        color: #b0bec5;
-        margin-bottom: 3rem;
+        color: #6c757d;
+        margin-bottom: 2rem;
     }
     .stTextArea textarea {
-        border: 2px solid #444;
-        border-radius: 12px;
+        border: 1px solid #ced4da;
+        border-radius: 8px;
         font-size: 1rem;
-        padding: 1rem;
-        transition: all 0.3s ease;
-        background: #1e1e1e;
-        color: #e0e0e0;
-        box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
+        padding: 0.75rem;
+        transition: border-color 0.3s;
     }
     .stTextArea textarea:focus {
-        border-color: #82aaff;
-        box-shadow: 0 0 0 3px rgba(130, 170, 255, 0.5);
+        border-color: #0d6efd;
+        outline: none;
     }
     .stButton button {
-        background-color: #82aaff;
-        color: #1e1e1e;
+        background-color: #0d6efd;
+        color: white;
         border: none;
-        border-radius: 12px;
-        font-size: 1.1rem;
-        font-weight: 600;
-        padding: 0.75rem 2rem;
-        transition: all 0.3s ease;
-        width: 100%;
-        box-shadow: 0 4px 6px rgba(130, 170, 255, 0.3);
+        border-radius: 8px;
+        font-size: 1rem;
+        font-weight: 500;
+        padding: 0.5rem 1.5rem;
+        cursor: pointer;
+        transition: background-color 0.3s, transform 0.2s;
     }
     .stButton button:hover {
-        background-color: #6495ed;
+        background-color: #0b5ed7;
         transform: translateY(-2px);
-        box-shadow: 0 6px 8px rgba(130, 170, 255, 0.4);
     }
     .output-container {
-        background: #2a2a2a;
-        border-radius: 12px;
-        padding: 1.5rem;
-        margin-top: 2rem;
-        border: 1px solid #444;
+        background: #f8f9fa;
+        border-radius: 8px;
+        padding: 1rem;
+        margin-top: 1.5rem;
+        border: 1px solid #dee2e6;
     }
     .code-block {
-        background-color: #1e1e1e;
-        border-radius: 12px;
-        padding: 1.5rem;
+        background-color: #343a40;
+        border-radius: 8px;
+        padding: 1rem;
         margin-top: 1rem;
         overflow-x: auto;
     }
     .stAlert {
-        background-color: #4e5b62;
-        color: #e0e0e0;
-        border-radius: 12px;
+        background-color: #cce5ff;
+        color: #004085;
+        border-radius: 8px;
         border: none;
-        padding: 1rem 1.5rem;
+        padding: 1rem;
         margin-bottom: 1rem;
     }
     .stSpinner {
-        color: #82aaff;
+        color: #0d6efd;
     }
     /* Custom scrollbar */
     ::-webkit-scrollbar {
         width: 8px;
-        height: 8px;
     }
     ::-webkit-scrollbar-track {
-        background: #333;
+        background: #f1f3f5;
         border-radius: 4px;
     }
     ::-webkit-scrollbar-thumb {
-        background: #555;
+        background: #868e96;
         border-radius: 4px;
     }
     ::-webkit-scrollbar-thumb:hover {
-        background: #777;
+        background: #495057;
     }
     .source {
         font-family: 'Fira Code', monospace;
         font-size: 0.9rem;
-        line-height: 1.4;
+        line-height: 1.5;
     }
     .source .linenos {
-        color: #6c6c6c;
-        padding-right: 10px;
-        border-right: 1px solid #444;
+        color: #6c757d;
+        padding-right: 8px;
+        border-right: 1px solid #495057;
         user-select: none;
     }
     .source pre {
@@ -168,7 +161,7 @@ st.markdown('<div class="main-container">', unsafe_allow_html=True)
 st.title("💻 Advanced AI Code Assistant")
 st.markdown('<p class="subtitle">Powered by Google Gemini - Expert-level coding solutions</p>', unsafe_allow_html=True)
 
-prompt = st.text_area("What advanced coding challenge can I assist you with today?", height=120)
+prompt = st.text_area("What advanced coding challenge can I assist you with today?", height=100)
 
 if st.button("Generate Expert Code"):
     if prompt.strip() == "":
@@ -194,7 +187,7 @@ if st.button("Generate Expert Code"):
                 st.markdown('</div>', unsafe_allow_html=True)
 
 st.markdown("""
-<div style='text-align: center; margin-top: 2rem; color: #b0bec5;'>
+<div style='text-align: center; margin-top: 2rem; color: #6c757d;'>
     Crafted with ❤️ by Your Advanced AI Code Assistant
 </div>
 """, unsafe_allow_html=True)