Update app.py

app.py

@@ -2,6 +2,80 @@ import streamlit as st
 import time
 from PIL import Image
 
+# Inject Custom CSS for Aesthetic Enhancements
+def inject_custom_css():
+    st.markdown("""
+    <style>
+    /* Overall page styling */
+    body {
+        background-color: #f4f7fa;
+        font-family: 'Arial', sans-serif;
+    }
+    
+    /* Sidebar styling */
+    .css-1d391kg { 
+        background-color: #ffffff; 
+        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); 
+        border-radius: 12px;
+    }
+
+    .css-1d391kg .sidebar-content {
+        padding: 2rem;
+    }
+
+    /* Title and Headers */
+    h1 {
+        font-size: 2.5rem;
+        color: #333333;
+        font-weight: 600;
+    }
+    h2, h3 {
+        color: #4c4c4c;
+        font-weight: 500;
+    }
+    
+    /* Button styling */
+    .css-1emrehy {
+        background-color: #ff4c4c;
+        color: white;
+        padding: 10px 24px;
+        border-radius: 6px;
+        font-size: 1rem;
+        border: none;
+        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+        cursor: pointer;
+    }
+
+    .css-1emrehy:hover {
+        background-color: #ff7b7b;
+    }
+
+    /* Text input styling */
+    .css-1bppn4z input {
+        border: 2px solid #ddd;
+        border-radius: 8px;
+        padding: 12px;
+        font-size: 1rem;
+    }
+    
+    /* Code blocks (steps) */
+    pre {
+        background-color: #f4f4f4;
+        padding: 1rem;
+        border-radius: 8px;
+        font-family: 'Courier New', monospace;
+        color: #333333;
+    }
+
+    /* Image styling */
+    img {
+        border-radius: 8px;
+        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+    }
+    
+    </style>
+    """, unsafe_allow_html=True)
+
 # Bubble Sort Algorithm with animation
 def bubble_sort(arr):
     steps = []
@@ -48,12 +122,16 @@ def animate_sorting(steps):
 
 # Streamlit App Interface
 def main():
+    # Inject custom CSS for aesthetics
+    inject_custom_css()
+    
     # Sidebar with two options: "Try Simulation" and "Detailed Explanation"
     st.sidebar.title("Sorting Algorithm Options")
     option = st.sidebar.radio("Choose an option:", ("Detailed Explanation", "Try Simulation"))
-
+    
+    # Sidebar image
     st.sidebar.image("sort.png", use_container_width=True)  # Replace with your image path
-
+    
     if option == "Try Simulation":
         st.title("Sorting Algorithms Visualization")