Update app.py

app.py

@@ -18,15 +18,18 @@ st.set_page_config(
     initial_sidebar_state="expanded"
 )
 
-# Custom CSS for styling with all white changed to black
+# Beautiful custom CSS for styling
 st.markdown("""
     <style>
         :root {
-            --primary-color: #3498db;
-            --secondary-color: #2c3e50;
-            --background-color: #121212;
-            --text-color: black;
-            --card-color: #1e1e1e;
+            --primary-color: #6366f1;
+            --secondary-color: #4f46e5;
+            --background-color: #111827;
+            --text-color: #f3f4f6;
+            --card-color: #1f2937;
+            --accent-color: #10b981;
+            --warning-color: #f59e0b;
+            --error-color: #ef4444;
         }
         
         body {
@@ -43,95 +46,141 @@ st.markdown("""
             font-size: 2.5rem;
             font-weight: bold;
             margin-bottom: 1rem;
+            background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
         }
         .subheader {
             color: var(--primary-color);
             font-size: 1.5rem;
             margin-bottom: 1rem;
+            border-bottom: 2px solid var(--secondary-color);
+            padding-bottom: 0.5rem;
         }
         .stButton>button {
-            background-color: var(--primary-color);
-            color: black;
-            border-radius: 5px;
-            padding: 0.5rem 1rem;
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+            color: white;
+            border-radius: 8px;
+            padding: 0.5rem 1.5rem;
             border: none;
             transition: all 0.3s;
+            font-weight: 500;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
         }
         .stButton>button:hover {
-            background-color: #2980b9;
             transform: translateY(-2px);
-            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
         }
         .css-1aumxhk {
-            background-color: black;
-            border-radius: 10px;
+            background-color: var(--card-color);
+            border-radius: 12px;
             padding: 2rem;
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            color: black;
+            border-left: 4px solid var(--primary-color);
         }
         .model-card {
-            border-radius: 10px;
+            border-radius: 12px;
             padding: 1.5rem;
             margin-bottom: 1rem;
-            background-color: black;
+            background-color: var(--card-color);
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
             transition: all 0.3s;
-            color: black;
+            border-left: 4px solid var(--accent-color);
+            height: 100%;
         }
         .model-card:hover {
             transform: translateY(-5px);
-            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
+            border-left: 4px solid var(--primary-color);
+        }
+        .model-card h3 {
+            color: var(--primary-color);
+            margin-top: 0;
         }
         .stSelectbox>div>div>select {
-            border-radius: 5px;
+            border-radius: 8px;
             padding: 0.5rem;
-            background-color: black;
-            color: black;
+            background-color: var(--card-color);
+            color: var(--text-color);
+            border: 1px solid var(--secondary-color);
         }
         .stSlider>div>div>div>div {
-            background-color: var(--primary-color);
+            background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
         }
         .stTextInput>div>div>input {
-            color: black;
-            background-color: black;
+            color: var(--text-color);
+            background-color: var(--card-color);
+            border-radius: 8px;
+            border: 1px solid var(--secondary-color);
         }
         .stMarkdown {
-            color: black;
+            color: var(--text-color);
         }
         .stAlert {
-            background-color: black;
-            color: black;
+            background-color: var(--card-color);
+            color: var(--text-color);
+            border-radius: 8px;
+            border-left: 4px solid var(--accent-color);
         }
         .stProgress>div>div>div>div {
-            background-color: var(--primary-color);
+            background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
         }
         .stCheckbox>label {
-            color: black;
+            color: var(--text-color);
         }
         .stRadio>label {
-            color: black;
+            color: var(--text-color);
         }
         .stFileUploader>label {
-            color: black;
+            color: var(--text-color);
         }
         .stMetric {
-            color: black;
+            color: var(--text-color);
+            background-color: var(--card-color);
+            border-radius: 8px;
+            padding: 1rem;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
         }
         .stInfo {
-            background-color: black;
-            color: black;
+            background-color: rgba(59, 130, 246, 0.1);
+            color: var(--text-color);
+            border-left: 4px solid #3b82f6;
         }
         .stSuccess {
-            background-color: black;
-            color: black;
+            background-color: rgba(16, 185, 129, 0.1);
+            color: var(--text-color);
+            border-left: 4px solid var(--accent-color);
         }
         .stWarning {
-            background-color: black;
-            color: black;
+            background-color: rgba(245, 158, 11, 0.1);
+            color: var(--text-color);
+            border-left: 4px solid var(--warning-color);
         }
         .stError {
-            background-color: black;
-            color: black;
+            background-color: rgba(239, 68, 68, 0.1);
+            color: var(--text-color);
+            border-left: 4px solid var(--error-color);
+        }
+        .stTabs [data-baseweb="tab-list"] {
+            gap: 8px;
+        }
+        .stTabs [data-baseweb="tab"] {
+            background-color: var(--card-color);
+            border-radius: 8px 8px 0 0;
+            padding: 0.5rem 1.5rem;
+            transition: all 0.3s;
+        }
+        .stTabs [aria-selected="true"] {
+            background-color: var(--primary-color);
+            color: white;
+        }
+        footer {
+            color: #9ca3af;
+            font-size: 0.9rem;
+            text-align: center;
+            padding: 1rem;
+            margin-top: 2rem;
+            border-top: 1px solid #374151;
         }
     </style>
 """, unsafe_allow_html=True)
@@ -152,6 +201,12 @@ with st.sidebar:
         icons=["house", "camera-video", "film", "boxes", "gear", "info-circle"],
         menu_icon="cast",
         default_index=0,
+        styles={
+            "container": {"padding": "0!important", "background-color": "#1f2937"},
+            "icon": {"color": "#6366f1", "font-size": "18px"}, 
+            "nav-link": {"font-size": "16px", "text-align": "left", "margin":"0px", "--hover-color": "#374151"},
+            "nav-link-selected": {"background-color": "#6366f1"},
+        }
     )
 
 # Object detection class (simplified for demo)
@@ -514,9 +569,8 @@ elif selected == "About":
     """)
 
 # Footer
-st.markdown("---")
 st.markdown("""
-    <div style="text-align: center; color: #7f8c8d; font-size: 0.9rem;">
+    <footer>
         Real-Time Object Detection & Tracking | Powered by Streamlit and Hugging Face
-    </div>
+    </footer>
 """, unsafe_allow_html=True)