Update app.py

app.py

@@ -2,40 +2,73 @@ import streamlit as st
 import altair as alt
 import pandas as pd
 
-# Custom CSS for text styling
+# Custom CSS for background, fonts, and text styling
 st.markdown("""
     <style>
+    /* Set a soft background color */
     body {
-        background-color: #eef2f7;  /* Soft background color */
+        background-color: #eef2f7;
     }
+    /* Style for main title */
     h1 {
-        color: #333333;  /* Darker color for better contrast */
+        color: #d63384;
         font-family: 'Roboto', sans-serif;
         font-weight: 700;
         text-align: center;
         margin-bottom: 25px;
     }
-    h2, h3, .custom-subheader {
-        color: #444444;  /* Darker color for subheaders */
+    /* Style for headers */
+    h2 {
+        color: #1f77b4;
         font-family: 'Roboto', sans-serif;
         font-weight: 600;
+        margin-top: 30px;
+    }
+    h3 {
+        color: #6c757d;
+        font-family: 'Roboto', sans-serif;
+        font-weight: 500;
         margin-top: 20px;
     }
-    p, ul {
-        color: #222222;  /* Darker color for paragraphs and list items */
+    /* Style for subheaders */
+    .custom-subheader {
+        color: #2ca02c;
+        font-family: 'Roboto', sans-serif;
+        font-weight: 600;
+        margin-bottom: 15px;
+    }
+    /* Paragraph styling */
+    p {
         font-family: 'Georgia', serif;
-        line-height: 1.6;
+        line-height: 1.8;
+        color: #333333; /* Darker text color for better visibility */
         margin-bottom: 20px;
     }
+    /* List styling with checkmark bullets */
     .icon-bullet {
         list-style-type: none;
         padding-left: 20px;
     }
+    .icon-bullet li {
+        font-family: 'Georgia', serif;
+        font-size: 1.1em;
+        margin-bottom: 10px;
+        color: #333333; /* Darker text color for better visibility */
+    }
     .icon-bullet li::before {
         content: "✔️";
         padding-right: 10px;
         color: #17a2b8;
     }
+    /* Sidebar styling */
+    .sidebar .sidebar-content {
+        background-color: #ffffff;
+        border-radius: 10px;
+        padding: 15px;
+    }
+    .sidebar h2 {
+        color: #495057;
+    }
     </style>
     """, unsafe_allow_html=True)
 
@@ -96,7 +129,7 @@ chart = alt.Chart(data).mark_bar().encode(
     fontSize=18,
     anchor='middle',
     font='Roboto',
-    color='#333333'
+    color='#343a40'
 )
 st.altair_chart(chart)
 
@@ -129,27 +162,4 @@ st.image("https://cdn-uploads.huggingface.co/production/uploads/64c972774515835c
 # Introduction to Statistics
 st.title("2 : INTRODUCTION TO STATISTICS")
 st.markdown("""
-    _Statistics is a branch of mathematics focused on collecting, analyzing, interpreting, and presenting data. It can be divided into two main categories:_
-""", unsafe_allow_html=True)
-
-# Descriptive Statistics Section with interactive elements
-st.subheader("2.1 Descriptive Statistics")
-st.markdown("""
-    Descriptive statistics summarize and describe the main features of a dataset. Key concepts include:
-    <ul class="icon-bullet">
-        <li>Measures of Central Tendency (Mean, Median, Mode)</li>
-        <li>Measures of Dispersion (Range, Variance, Standard Deviation)</li>
-        <li>Data Distributions (e.g., Gaussian, Random, Normal)</li>
-    </ul>
-""", unsafe_allow_html=True)
-
-# Example of an interactive chart for Central Tendency
-values = st.slider('Select a range of values', 0, 100, (25, 75))
-mean_value = sum(values) / len(values)
-st.write(f"Mean Value: {mean_value}")
-
-# Inferential Statistics Section
-st.subheader("2.2 Inferential Statistics")
-st.markdown("""
-    Inferential statistics involve making predictions or inferences about a population based on a sample. These methods are used to test hypotheses and estimate population parameters.
-""", unsafe_allow_html=True)
+    _Statistics is a branch of mathematics focused on collecting, analyzing, interpreting