app.py

app.py

@@ -20,7 +20,7 @@ except Exception as e:
     st.error(f"Error loading question-answering model: {str(e)}")
     st.stop()
 
-# CSS for styling the navbar and app theme
+# CSS for styling the navbar, footer, and app theme
 st.markdown(
     """
     <style>
@@ -33,31 +33,69 @@ st.markdown(
             background-color: #1E1E1E;
             padding: 20px;
         }
+
         /* Navbar styling */
         .sidebar .sidebar-content {
             background-color: #2C3E50;
             color: white;
+            padding: 20px;
+            border-radius: 8px;
         }
         .sidebar .sidebar-content a {
-            font-size: 18px;
+            font-size: 20px;
             color: white;
+            text-decoration: none;
         }
         .sidebar .sidebar-content a:hover {
             color: #F39C12;
+            text-decoration: underline;
+        }
+        .sidebar .sidebar-title {
+            font-size: 24px;
+            font-weight: bold;
+            color: #F39C12;
+            text-align: center;
+            margin-bottom: 20px;
         }
+
         /* Buttons */
         .stButton > button {
             background-color: #2980B9;
             color: white;
-            border: None;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 5px;
+            font-size: 16px;
+            font-weight: bold;
         }
         .stButton > button:hover {
             background-color: #1A5276;
         }
+
         /* Input fields */
         .stTextInput input {
             border: 1px solid #BDC3C7;
             border-radius: 5px;
+            padding: 10px;
+        }
+
+        /* Footer styling */
+        footer {
+            background-color: #2C3E50;
+            padding: 30px;
+            text-align: center;
+            color: white;
+            margin-top: 50px;
+            border-radius: 8px;
+            font-size: 14px;
+        }
+        footer a {
+            color: #F39C12;
+            text-decoration: none;
+            margin: 0 10px;
+        }
+        footer a:hover {
+            text-decoration: underline;
         }
     </style>
     """,
@@ -65,6 +103,7 @@ st.markdown(
 )
 
 # Define the sidebar menu for navigation
+st.sidebar.markdown('<div class="sidebar-title">Navigation</div>', unsafe_allow_html=True)
 menu = st.sidebar.radio("Navigation", ["Home", "About Us"])
 
 # Function to preprocess image
@@ -164,17 +203,17 @@ if menu == "About Us":
         unsafe_allow_html=True
     )
 
-# Footer
+# Modernized Footer
 st.markdown(
     """
-    <div style="background-color: #2980B9; padding: 15px; text-align: center; color: white;">
-        © 2024 ECG Reader by Hamaad Ayub Khan. All rights reserved.
-        <div style="margin-top: 10px;">
-            <a href="https://instagram.com/hamaadayubkhan" target="_blank" style="color: white; margin-right: 15px; text-decoration: none;">Instagram</a>
-            <a href="https://github.com/hakgs1234" target="_blank" style="color: white; margin-right: 15px; text-decoration: none;">GitHub</a>
-            <a href="https://facebook.com/hamaadayubkhan" target="_blank" style="color: white; text-decoration: none;">Facebook</a>
+    <footer>
+        <p>© 2024 ECG Reader by Hamaad Ayub Khan. All rights reserved.</p>
+        <div>
+            <a href="https://instagram.com/hamaadayubkhan" target="_blank">Instagram</a>
+            <a href="https://github.com/hakgs1234" target="_blank">GitHub</a>
+            <a href="https://facebook.com/hamaadayubkhan" target="_blank">Facebook</a>
         </div>
-    </div>
+    </footer>
     """,
     unsafe_allow_html=True,
 )