Update app.py

app.py

@@ -1,83 +1,123 @@
 import streamlit as st
 import pandas as pd
 import plotly.express as px
+import plotly.graph_objects as go
 from PIL import Image
 import os
 from langchain_google_genai import GoogleGenerativeAI
 from langchain_core.prompts import ChatPromptTemplate
 from langchain_core.output_parsers import StrOutputParser
+import uuid
 
 # Set page config
+st.set_page_config(page_title="🏏 Ultimate Cricket Analytics", layout="wide", initial_sidebar_state="expanded")
 
-st.set_page_config(page_title="🏏 Ultimate Cricket Analytics", layout="wide")
-# Define the URL of the background image (use your own image URL)
-
-# ---- Background Styling ----
-background_image_url = "https://cdn-uploads.huggingface.co/production/uploads/675fab3a2d0851e23d23cad3/zNRb7r4eec-FQ0LUfJLfW.jpeg"  # You can replace with any other beautiful cricket image
-
+# ---- Custom CSS for Styling ----
 st.markdown(
-    f"""
+    """
     <style>
-    .stApp {{
-        background-image: url("{background_image_url}");
+    .stApp {
+        background-image: url("https://cdn-uploads.huggingface.co/production/uploads/675fab3a2d0851e23d23cad3/zNRb7r4eec-FQ0LUfJLfW.jpeg");
         background-size: cover;
         background-repeat: no-repeat;
         background-attachment: fixed;
-    }}
+        background-color: rgba(0, 0, 0, 0.5); /* Subtle overlay */
+        color: #ffffff;
+    }
+    .sidebar .sidebar-content {
+        background: linear-gradient(180deg, #1e3c72, #2a5298);
+        border-radius: 10px;
+        padding: 20px;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    }
+    h1 {
+        color: #ffcc00;
+        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+        font-size: 48px;
+        text-align: center;
+    }
+    h2 {
+        color: #4caf50;
+        font-size: 32px;
+        margin-top: 20px;
+    }
+    h3 {
+        color: #ff5733;
+        font-size: 24px;
+    }
+    .stButton>button {
+        background-color: #ff5733;
+        color: white;
+        border-radius: 8px;
+        padding: 10px 20px;
+        font-weight: bold;
+        transition: all 0.3s ease;
+    }
+    .stButton>button:hover {
+        background-color: #c70039;
+        transform: scale(1.05);
+    }
+    .card {
+        background-color: rgba(255, 255, 255, 0.9);
+        border-radius: 10px;
+        padding: 20px;
+        margin: 10px 0;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+        color: #333;
+    }
     </style>
     """,
     unsafe_allow_html=True
 )
 
 # ---- Sidebar ----
-option = st.sidebar.selectbox(
-    "Choose Option",
-    ["Main Page", "Team Info", "Team Stats Comparison", "Player Stats", "Player Comparison"],
-    index=0  # Set "Main Page" as the default option
-)
+with st.sidebar:
+    st.markdown("<h2 style='color: #ffcc00;'>Cricket Analytics Hub</h2>", unsafe_allow_html=True)
+    option = st.selectbox(
+        "Choose Option",
+        ["Main Page", "Team Info", "Team Stats Comparison", "Player Stats", "Player Comparison"],
+        index=0,
+        format_func=lambda x: f"🏏 {x}"
+    )
 
 # ---- Main Page ----
 if option == "Main Page":
     st.markdown(
         """
-        <div style="text-align: center; padding-top: 100px;">
-            <h1 style="font-size: 64px; color: #ffcc00; font-weight: bold;">🏏 Ultimate Cricket Analytics</h1>
-            <h3 style="font-size: 28px; color: #4caf50;">Dive deep into the world of cricket with powerful data-driven insights!</h3>
+        <div style="text-align: center; padding: 50px;">
+            <h1 style="background: linear-gradient(45deg, #ffcc00, #ff5733); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
+                🏏 Ultimate Cricket Analytics
+            </h1>
+            <h3 style="color: #4caf50;">Unleash the Power of Cricket Data!</h3>
             <br>
-            <img src="https://www.wallpapertip.com/wpic/mwiJbR_cricket-stadium-wallpaper-hd/" width="400">
+            <img src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExNjZ0d3J3eTB2Z3M4b2F2eHl0Y3I0c2x5c3A4YzR2c2JpdnZ6c3VqZCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/3o7aD2vNtfVly3p3qM/giphy.gif" width="400">
             <br><br>
-            <p style="font-size: 20px; color: white;">Select an option from the sidebar to begin your cricket journey! 🧠📊</p>
+            <p style="font-size: 20px; color: white; background-color: rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 8px;">
+                Select an option from the sidebar to explore cricket insights! 📊🔥
+            </p>
         </div>
         """,
         unsafe_allow_html=True
     )
 
-
 # Create a folder to save CSVs if not exists
 data_folder = "data"
 os.makedirs(data_folder, exist_ok=True)
 
-# Load all three formats
+# Load data (assuming files are available)
 odi_df = pd.read_csv("odi.xls")
 t20_df = pd.read_csv("t20.xls")
 test_df = pd.read_csv("test.xls")
-
 test_teams_df = pd.read_csv("test-teams.xls")
 odi_teams_df = pd.read_csv("odi-teams.xls")
 t20_teams_df = pd.read_csv("t20-teams.xls")
-
-# Load CSV files
 batting_df = pd.read_csv("Batting_10_Teams_Final.csv")
 bowling_df = pd.read_csv("Bowling_10_Teams_Final.csv")
 
-# # Sidebar Navigation
-# st.sidebar.title("Navigation Panel")
-# option = st.sidebar.selectbox("Choose Option", [
-#     "Team Info",
-#     "Team Stats Comparison",
-#     "Player Stats",
-#     "Player Comparison"
-# ])
+# Load GenAI
+api_key = st.secrets.get('genai_key')
+model = GoogleGenerativeAI(model="gemini-1.5-pro", google_api_key=api_key)
+out_par = StrOutputParser()
 
 # Sidebar UI based on selection
 team_info = selected_teams_stats = selected_format = None
@@ -88,7 +128,7 @@ if option == "Team Info":
     team_info = st.sidebar.selectbox("Select Team", sorted(batting_df['Country'].unique()))
 
 elif option == "Team Stats Comparison":
-    num_teams = st.sidebar.selectbox("Select Number of Teams",[2,3])
+    num_teams = st.sidebar.selectbox("Select Number of Teams", [2, 3])
     selected_teams_stats = st.sidebar.multiselect("Select Teams", sorted(batting_df['Country'].unique()), max_selections=num_teams)
     selected_format = st.sidebar.selectbox("Select Format", ["ODI", "T20", "Test"])
 
@@ -104,57 +144,70 @@ elif option == "Player Comparison":
     player1 = st.sidebar.selectbox("Select Player 1", all_players)
     player2 = st.sidebar.selectbox("Select Player 2", [p for p in all_players if p != player1])
 
-
-# Load GenAI
-api_key = st.secrets.get('genai_key')
-model = GoogleGenerativeAI(model="gemini-1.5-pro", google_api_key=api_key)
-out_par = StrOutputParser()
-
 # ---- Main Content ----
 if option == "Team Info" and team_info:
-    st.title(f"Team Bio - {team_info}")
+    st.markdown(f"<h1>Team Bio - {team_info}</h1>", unsafe_allow_html=True)
     team_prompt = ChatPromptTemplate.from_messages([
         ("system", 
-         '''You are an AI cricket historian.Give the text in the black color. First, provide a brief overview of the team and its history.
-
+         '''You are an AI cricket historian. Provide a brief overview of the team and its history in black text.
          Then, provide a 'Debut Details' section with the following format:
            - Add a heading **Debut Details**
            - Under that, use subheadings **Test Debut**, **ODI Debut**, and **T20 Debut**
            - For each debut format, include:
-           - Opponent team
-           - Date of debut
-           - Stadium or venue
+             - Opponent team
+             - Date of debut
+             - Stadium or venue
          Ensure a clear structure with headings and subheadings. Do not include performance stats.'''),
         ("human", "{team_name}")
     ])
     team_chain = team_prompt | model | out_par
+    st.markdown("<div class='card'>", unsafe_allow_html=True)
     st.write(team_chain.invoke({"team_name": team_info}))
+    st.markdown("</div>", unsafe_allow_html=True)
 
     # Combine all formats
     odi_teams_df['Format'] = 'ODI'
     t20_teams_df['Format'] = 'T20'
-    test_teams_df ['Format'] = 'Test'
+    test_teams_df['Format'] = 'Test'
     combined_stats_df = pd.concat([odi_teams_df, t20_teams_df, test_teams_df], ignore_index=True)
 
     # Show format-wise stats for selected team
-    st.subheader(f"{team_info} Format-wise Statistics")
+    st.markdown(f"<h2>{team_info} Format-wise Statistics</h2>", unsafe_allow_html=True)
     team_stats = combined_stats_df[combined_stats_df['Team'] == team_info]
-    st.dataframe(team_stats.reset_index(drop=True))
-    st.subheader(f"{team_info} Format-wise Statistics")
+    st.markdown("<div class='card'>", unsafe_allow_html=True)
+    st.dataframe(team_stats.reset_index(drop=True), use_container_width=True)
+    st.markdown("</div>", unsafe_allow_html=True)
 
     if st.button("Show Format-wise Visualizations"):
-        st.plotly_chart(px.bar(team_stats, x='Format', y='Mat', color='Format', title="Matches by Format"))
-        st.plotly_chart(px.pie(team_stats, values='Won', names='Format', title="Win Distribution by Format"))
-        st.plotly_chart(px.line(team_stats, x='Format', y='W/L', title="Win/Loss Ratio by Format"))
+        st.markdown("<div class='card'>", unsafe_allow_html=True)
+        # Bar Chart
+        fig_bar = px.bar(team_stats, x='Format', y='Mat', color='Format', title="Matches by Format",
+                         color_discrete_sequence=px.colors.qualitative.Vivid)
+        fig_bar.update_layout(transition_duration=500)
+        st.plotly_chart(fig_bar, use_container_width=True)
+        
+        # Donut Chart
+        fig_donut = px.pie(team_stats, values='Won', names='Format', title="Win Distribution by Format",
+                           hole=0.4, color_discrete_sequence=px.colors.qualitative.Bold)
+        fig_donut.update_traces(textinfo='percent+label', pull=[0.1, 0, 0])
+        st.plotly_chart(fig_donut, use_container_width=True)
+        
+        # Radar Chart
+        fig_radar = go.Figure()
+        for _, row in team_stats.iterrows():
+            fig_radar.add_trace(go.Scatterpolar(
+                r=[row['Mat'], row['Won'], row['Lost'], row['W/L']],
+                theta=['Matches', 'Wins', 'Losses', 'W/L Ratio'],
+                fill='toself',
+                name=row['Format']
+            ))
+        fig_radar.update_layout(polar=dict(radialaxis=dict(visible=True)), showlegend=True, title="Format-wise Radar")
+        st.plotly_chart(fig_radar, use_container_width=True)
+        st.markdown("</div>", unsafe_allow_html=True)
 
-    # if st.button("Show Raw Data"):
-    #     st.dataframe(team_stats.reset_index(drop=True))
-
-
-# 3. Team Stats Comparison
 elif option == "Team Stats Comparison" and selected_teams_stats:
-    st.title("Team Stats Comparison")
-
+    st.markdown("<h1>Team Stats Comparison</h1>", unsafe_allow_html=True)
+    
     odi_df['Format'] = 'ODI'
     t20_df['Format'] = 'T20'
     test_df['Format'] = 'Test'
@@ -175,76 +228,117 @@ elif option == "Team Stats Comparison" and selected_teams_stats:
     }
     stat_choice = st.selectbox("Select Stat to Compare", list(stat_options.keys()), format_func=lambda x: stat_options[x])
 
-    st.subheader("Bar Chart")
+    st.markdown("<div class='card'>", unsafe_allow_html=True)
+    # Bar Chart
+    st.markdown("<h3>Comparison Bar Chart</h3>", unsafe_allow_html=True)
     fig = px.bar(
         selected_data,
         x='Team',
         y=stat_choice,
         color='Team',
         barmode='group',
-        title=f"{stat_options[stat_choice]} by Team in {selected_format}"
+        title=f"{stat_options[stat_choice]} by Team in {selected_format}",
+        color_discrete_sequence=px.colors.qualitative.Set2
     )
+    fig.update_layout(transition_duration=500)
     st.plotly_chart(fig, use_container_width=True)
 
-    # Type 2: Win % Pie Chart
-    st.subheader("Win Percentage Pie Chart")
+    # Donut Chart
+    st.markdown("<h3>Win Percentage Donut Chart</h3>", unsafe_allow_html=True)
     pie_data = selected_data[['Team', '%W']]
-    fig_pie = px.pie(pie_data, values='%W', names='Team', title='Win % Comparison')
-    st.plotly_chart(fig_pie)
-
-    # Type 3: Stacked Bar Chart (Won + Lost + Draw)
-    st.subheader("Stacked Bar Chart (Won, Lost, Draw)")
-    stack_df = selected_data[['Team', 'Won', 'Lost', 'Draw']]
-    stack_df = stack_df.melt(id_vars='Team', var_name='Result', value_name='Count')
-    fig_stack = px.bar(stack_df, x='Team', y='Count', color='Result', barmode='stack')
-    st.plotly_chart(fig_stack)
+    fig_pie = px.pie(pie_data, values='%W', names='Team', title='Win % Comparison',
+                     hole=0.4, color_discrete_sequence=px.colors.qualitative.Pastel)
+    fig_pie.update_traces(textinfo='percent+label', pull=[0.1, 0])
+    st.plotly_chart(fig_pie, use_container_width=True)
+
+    # Heatmap
+    st.markdown("<h3>Performance Heatmap</h3>", unsafe_allow_html=True)
+    heatmap_data = selected_data[['Team', 'Mat', 'Won', 'Lost', 'Draw']].set_index('Team')
+    fig_heatmap = px.imshow(heatmap_data, text_auto=True, aspect="auto",
+                            color_continuous_scale='Viridis', title="Team Stats Heatmap")
+    st.plotly_chart(fig_heatmap, use_container_width=True)
+    st.markdown("</div>", unsafe_allow_html=True)
 
     if st.button("Show Raw Data"):
-        st.dataframe(selected_data.reset_index(drop=True))
-
+        st.markdown("<div class='card'>", unsafe_allow_html=True)
+        st.dataframe(selected_data.reset_index(drop=True), use_container_width=True)
+        st.markdown("</div>", unsafe_allow_html=True)
 
 elif option == "Player Stats" and selected_player:
-    st.title(f"Player Dashboard - {selected_player}")
+    st.markdown(f"<h1>Player Dashboard - {selected_player}</h1>", unsafe_allow_html=True)
 
     player_batting = batting_df[(batting_df['player_name'] == selected_player) & (batting_df['Country'] == selected_team)]
     player_bowling = bowling_df[(bowling_df['player_name'] == selected_player) & (bowling_df['Country'] == selected_team)]
 
     prompt = ChatPromptTemplate.from_messages([
         ("system", '''You are an AI cricket player information provider. Display the player's complete bio data in a 
-                      detailed table format with rows and columns, including personal information. Below the table, 
-                      include debut details for all formats. Additionally, provide a brief description of the player 
-                      underneath. Only include player information, not their performance statistics.Give the text in the black color'''),
+                      detailed table format with rows and columns, including personal information in black text. 
+                      Below the table, include debut details for all formats. Additionally, provide a brief description 
+                      of the player underneath. Only include player information, not their performance statistics.'''),
         ("human", "{player_name}")
     ])
     chain = prompt | model | out_par
+    st.markdown("<div class='card'>", unsafe_allow_html=True)
     st.write(chain.invoke({"player_name": selected_player}))
-
-    if st.button("Show Batting Card"):
-        st.dataframe(player_batting.iloc[:, :16])
-    if st.button("Show Bowling Card"):
-        st.dataframe(player_bowling.iloc[:, :15])
+    st.markdown("</div>", unsafe_allow_html=True)
+
+    col1, col2 = st.columns(2)
+    with col1:
+        if st.button("Show Batting Card"):
+            st.markdown("<div class='card'>", unsafe_allow_html=True)
+            st.dataframe(player_batting.iloc[:, :16], use_container_width=True)
+            st.markdown("</div>", unsafe_allow_html=True)
+    with col2:
+        if st.button("Show Bowling Card"):
+            st.markdown("<div class='card'>", unsafe_allow_html=True)
+            st.dataframe(player_bowling.iloc[:, :15], use_container_width=True)
+            st.markdown("</div>", unsafe_allow_html=True)
 
     if not player_batting.empty:
-        st.subheader("Batting Visualizations")
+        st.markdown("<h2>Batting Visualizations</h2>", unsafe_allow_html=True)
+        st.markdown("<div class='card'>", unsafe_allow_html=True)
         col1, col2 = st.columns(2)
         with col1:
-            st.plotly_chart(px.bar(player_batting, x='Format', y='Runs', color='Format'))
+            fig_bar = px.bar(player_batting, x='Format', y='Runs', color='Format',
+                             title="Runs by Format", color_discrete_sequence=px.colors.qualitative.D3)
+            fig_bar.update_layout(transition_duration=500)
+            st.plotly_chart(fig_bar, use_container_width=True)
         with col2:
-            st.plotly_chart(px.line(player_batting, x='Format', y='SR'))
-        st.plotly_chart(px.pie(player_batting, values='Runs', names='Format'))
+            fig_radar = go.Figure()
+            fig_radar.add_trace(go.Scatterpolar(
+                r=[player_batting['Runs'].mean(), player_batting['SR'].mean(), player_batting['Ave'].mean()],
+                theta=['Runs', 'Strike Rate', 'Average'],
+                fill='toself',
+                name='Batting Stats'
+            ))
+            fig_radar.update_layout(polar=dict(radialaxis=dict(visible=True)), showlegend=True, title="Batting Radar")
+            st.plotly_chart(fig_radar, use_container_width=True)
+        fig_donut = px.pie(player_batting, values='Runs', names='Format', title="Runs Distribution",
+                           hole=0.4, color_discrete_sequence=px.colors.qualitative.T10)
+        fig_donut.update_traces(textinfo='percent+label')
+        st.plotly_chart(fig_donut, use_container_width=True)
+        st.markdown("</div>", unsafe_allow_html=True)
 
     if not player_bowling.empty:
-        st.subheader("Bowling Visualizations")
+        st.markdown("<h2>Bowling Visualizations</h2>", unsafe_allow_html=True)
+        st.markdown("<div class='card'>", unsafe_allow_html=True)
         col3, col4 = st.columns(2)
         with col3:
-            st.plotly_chart(px.bar(player_bowling, x='Format', y='Wickets', color='Format'))
+            fig_bar = px.bar(player_bowling, x='Format', y='Wickets', color='Format',
+                             title="Wickets by Format", color_discrete_sequence=px.colors.qualitative.Set1)
+            fig_bar.update_layout(transition_duration=500)
+            st.plotly_chart(fig_bar, use_container_width=True)
         with col4:
-            st.plotly_chart(px.line(player_bowling, x='Format', y='Eco'))
-        st.plotly_chart(px.pie(player_bowling, values='Wickets', names='Format'))
+            fig_line = px.line(player_bowling, x='Format', y='Eco', title="Economy Rate",
+                               color_discrete_sequence=['#00cc96'])
+            st.plotly_chart(fig_line, use_container_width=True)
+        fig_heatmap = px.imshow(player_bowling[['Wickets', 'Eco', 'Ave']].T, text_auto=True,
+                                color_continuous_scale='Plasma', title="Bowling Stats Heatmap")
+        st.plotly_chart(fig_heatmap, use_container_width=True)
+        st.markdown("</div>", unsafe_allow_html=True)
 
-# 4. Player Comparison
 elif option == "Player Comparison" and player1 and player2:
-    st.title(f"Player Comparison: {player1} vs {player2}")
+    st.markdown(f"<h1>Player Comparison: {player1} vs {player2}</h1>", unsafe_allow_html=True)
 
     def get_player_data(name):
         return (
@@ -255,42 +349,56 @@ elif option == "Player Comparison" and player1 and player2:
     bat1, bowl1 = get_player_data(player1)
     bat2, bowl2 = get_player_data(player2)
 
-    # Type 1: Batting Line Chart
-    st.subheader("Batting Line Chart")
-    bat_combined = pd.concat([bat1, bat2])
-    fig_bat_line = px.line(bat_combined, x='Format', y='Runs', color='player_name', markers=True)
-    st.plotly_chart(fig_bat_line)
-
-    # Type 2: Bowling Line Chart
-    st.subheader("Bowling Line Chart")
+    st.markdown("<div class='card'>", unsafe_allow_html=True)
+    # Batting Radar Chart
+    st.markdown("<h3>Batting Radar Chart</h3>", unsafe_allow_html=True)
+    fig_radar = go.Figure()
+    for player, bat in [(player1, bat1), (player2, bat2)]:
+        if not bat.empty:
+            fig_radar.add_trace(go.Scatterpolar(
+                r=[bat['Runs'].mean(), bat['SR'].mean(), bat['Ave'].mean()],
+                theta=['Runs', 'Strike Rate', 'Average'],
+                fill='toself',
+                name=player
+            ))
+    fig_radar.update_layout(polar=dict(radialaxis=dict(visible=True)), showlegend=True, title="Batting Comparison")
+    st.plotly_chart(fig_radar, use_container_width=True)
+
+    # Bowling Bar Chart
+    st.markdown("<h3>Bowling Bar Chart</h3>", unsafe_allow_html=True)
     bowl_combined = pd.concat([bowl1, bowl2])
-    fig_bowl_line = px.line(bowl_combined, x='Format', y='Wickets', color='player_name', markers=True)
-    st.plotly_chart(fig_bowl_line)
-
-    # Batting Bar Chart
-    st.subheader("🔹 Type 1: Batting Bar Chart")
-    bat_combined = pd.DataFrame({
-        'Player': [player1, player2],
-        'Total Runs': [bat1['Runs'].sum(), bat2['Runs'].sum()],
-        'Batting Average': [bat1['Ave'].dropna().mean(), bat2['Ave'].dropna().mean()],
-        'Strike Rate': [bat1['SR'].mean(), bat2['SR'].mean()],
-        'Matches': [bat1['Mat'].sum(), bat2['Mat'].sum()]
-    })
-
-    bat_melted = bat_combined.melt(id_vars='Player', var_name='Stat', value_name='Value')
-    fig_bat_bar = px.bar(bat_melted, x='Player', y='Value', color='Stat', barmode='group')
-    st.plotly_chart(fig_bat_bar)
-
-    # Add a Pie Chart for Total Runs Comparison
-    st.subheader("🔹 Total Runs Comparison (Pie Chart)")
+    fig_bowl_bar = px.bar(bowl_combined, x='player_name', y='Wickets', color='Format',
+                          barmode='group', title="Wickets Comparison",
+                          color_discrete_sequence=px.colors.qualitative.Plotly)
+    fig_bowl_bar.update_layout(transition_duration=500)
+    st.plotly_chart(fig_bowl_bar, use_container_width=True)
+
+    # Runs Donut Chart
+    st.markdown("<h3>Total Runs Donut Chart</h3>", unsafe_allow_html=True)
     total_runs = [bat1['Runs'].sum(), bat2['Runs'].sum()]
     runs_data = pd.DataFrame({
         'Player': [player1, player2],
         'Total Runs': total_runs
     })
+    fig_pie = px.pie(runs_data, names='Player', values='Total Runs', title="Proportion of Total Runs",
+                     hole=0.4, color_discrete_sequence=px.colors.qualitative.G10)
+    fig_pie.update_traces(textinfo='percent+label')
+    st.plotly_chart(fig_pie, use_container_width=True)
 
-    fig_pie = px.pie(runs_data, names='Player', values='Total Runs', title="Proportion of Total Runs")
-    st.plotly_chart(fig_pie)
+    # Heatmap for Batting Stats
+    st.markdown("<h3>Batting Stats Heatmap</h3>", unsafe_allow_html=True)
+    bat_combined = pd.DataFrame({
+        'Player': [player1, player2],
+        'Total Runs': [bat1['Runs'].sum(), bat2['Runs'].sum()],
+        'Batting Average': [bat1['Ave'].dropna().mean(), bat2['Ave'].dropna().mean()],
+        'Strike Rate': [bat1['SR'].mean(), bat2['SR'].mean()]
+    }).set_index('Player')
+    fig_heatmap = px.imshow(bat_combined, text_auto=True, aspect="auto",
+                            color_continuous_scale='RdBu', title="Batting Stats Heatmap")
+    st.plotly_chart(fig_heatmap, use_container_width=True)
+    st.markdown("</div>", unsafe_allow_html=True)
 
     if st.button("Show Raw Stats"):
-        st.dataframe(pd.concat([bat1, bowl1, bat2, bowl2]))
+        st.markdown("<div class='card'>", unsafe_allow_html=True)
+        st.dataframe(pd.concat([bat1, bowl1, bat2, bowl2]), use_container_width=True)
+        st.markdown("</div>", unsafe_allow_html=True)