Update pages/introds.py

pages/introds.py

@@ -1,53 +1,56 @@
 import streamlit as st
 
-# Custom CSS for styling and background
-custom_css = """
+# Background options
+bg_options = [
+    "https://cdn.pixabay.com/photo/2024/01/29/22/47/ai-generated-8540915_1280.jpg",
+    "https://cdn.pixabay.com/photo/2023/11/23/17/47/sunset-7704533_1280.jpg"
+]
+
+# Background selection dropdown
+selected_bg = st.selectbox("Choose a Background:", bg_options)
+
+# Dynamic CSS based on the selected background
+custom_css = f"""
 <style>
-    html, body, [data-testid="stAppViewContainer"] {
+    html, body, [data-testid="stAppViewContainer"] {{
         background: linear-gradient(
             rgba(0, 0, 0, 0.6), 
             rgba(0, 0, 0, 0.6)
         ), 
-        url("https://cdn.pixabay.com/photo/2024/01/29/22/47/ai-generated-8540915_1280.jpg") no-repeat center center fixed;
+        url("{selected_bg}") no-repeat center center fixed;
         background-size: cover;
         font-family: Arial, sans-serif;
         color: #ffffff;
-    }
-    h1 {
+    }}
+    h1 {{
         color: #ffffff;
         text-align: center;
-        font-size: 3rem; 
-        margin-top: 20px;
-        text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7); 
-    }
-    .division {
+        font-size: 2rem; 
+        margin-top: 2px;
+        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); 
+    }}
+    .division {{
         margin: 20px auto;
-        padding: 30px;
-        background: rgba(255, 255, 255, 0.2); 
-        border-radius: 15px;
-        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); 
-    }
-    .division h2 {
+        padding: 20px;
+        background: rgba(255, 255, 255, 0.1); 
+        border-radius: 10px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
+    }}
+    .division h2 {{
         color: #ffffff;
-        margin-bottom: 15px;
-        font-size: 2.2rem; 
-        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
-    }
-    .division p, .division ul li {
-        font-size: 1.2rem; 
-        line-height: 1.8; 
-        color: #e0e0e0;
-    }
-    .division ul li {
         margin-bottom: 10px;
-    }
+        font-size: 2rem; 
+        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
+    }}
+    .division p, .division ul li {{
+        font-size: 1.2rem; 
+        line-height: 1.7; 
+    }}
 </style>
 """
 
-# Inject the CSS styles
-st.markdown(custom_css, unsafe_allow_html=True)
-
-# Header section
+# Inject CSS into Streamlit app
+st.markdown(custom_css, unsafe_allow_html=True)# Header section
 st.markdown("<h1>Welcome to Data Science Introduction</h1>", unsafe_allow_html=True)
 
 # Main content
@@ -82,3 +85,9 @@ st.markdown(
     """,
     unsafe_allow_html=True
 )
+
+
+
+
+
+