Update app.py

app.py

@@ -1,10 +1,9 @@
 import streamlit as st
-import streamlit.components.v1 as stc
 import requests
 from streamlit_lottie import st_lottie
 
-# Set the page title and layout (this must be at the top)
-st.set_page_config(page_title="Space Birthday Exploration", page_icon="🚀", layout="wide")
+# Set the page title and layout
+st.set_page_config(page_title="Space Birthday Exploration", page_icon="🚀", layout="centered")
 
 def load_lottieurl(url: str):
     r = requests.get(url)
@@ -15,130 +14,106 @@ def load_lottieurl(url: str):
 # Load the Lottie animation
 lottie_hello = load_lottieurl("https://lottie.host/d29edbdd-af94-402e-bb4c-b314f17897e6/n5SKHOkbYQ.json")
 
-# Add CSS styles to the page
+# Custom styles with the background image and updated shadow effect
 st.markdown(
     """
     <style>
     @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
-    
+
     body {
-        background-color: #000011;
-        background-image: 
-            radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
-            radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
-            radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
-            radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
-        background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px; 
-        background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
-        animation: backgroundScroll 60s linear infinite;
-    }
-    
-    @keyframes backgroundScroll {
-        0% {background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;}
-        100% {background-position: 550px 550px, 590px 610px, 680px 820px, 620px 650px;}
+        background-image: url('https://i.imghippo.com/files/nYbNv1725063923.png');
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-attachment: fixed;
+        color: #FFFFFF;
+        margin: 0;
+        font-family: 'Orbitron', sans-serif;
     }
 
     .stApp {
         background: transparent;
     }
 
-    .content-container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: flex-start;
-        min-height: 100vh;
-        padding: 20px;
-    }
-
     .birthday-text {
         font-size: 48px;
         font-weight: bold;
         color: #FFB6C1;
-        font-family: 'Orbitron', sans-serif;
-        text-shadow: 0 0 10px #FFB6C1, 0 0 20px #FFB6C1, 0 0 30px #FFB6C1;
-        animation: birthday-glow 2s ease-in-out infinite alternate;
+        text-shadow: 0 0 10px #000000, 0 0 20px #000000, 0 0 30px #000000;
+        text-align: center;
         margin-top: 20px;
-        margin-bottom: 30px;
     }
 
-    @keyframes birthday-glow {
-        from {
-            text-shadow: 0 0 10px #FFB6C1, 0 0 20px #FFB6C1, 0 0 30px #FFB6C1;
-        }
-        to {
-            text-shadow: 0 0 20px #FFB6C1, 0 0 30px #FFB6C1, 0 0 40px #FFB6C1, 0 0 50px #FFB6C1;
-        }
+    .custom-text {
+        font-size: 20px;
+        text-align: center;
+        margin-top: 10px;
     }
 
     .video-container {
-        width: 80%;
-        height: 450px;
-        border-radius: 20px;
-        box-shadow: 0px 0px 20px rgba(255,255,255,0.3);
+        display: flex;
+        justify-content: center;
+        margin-top: 30px;
+        box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
+        border-radius: 10px;
         overflow: hidden;
-        margin-bottom: 30px;
+        background-color: rgba(0,0,0,0);  /* Fully transparent background */
     }
 
     .lottie-container {
-        width: 200px;
-        height: 200px;
-        margin-bottom: 30px;
+        display: flex;
+        justify-content: center;
+        margin-top: 20px;
+        margin-bottom: 20px;
+        box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
+        border-radius: 10px;
+        background-color: rgba(0,0,0,0);  /* Fully transparent background */
+        width: 150px;
+        height: 150px;
     }
 
     .space-text {
         font-size: 24px;
         font-weight: bold;
-        color: #fff;
-        font-family: 'Orbitron', sans-serif;
-        text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff;
-        animation: glow 2s ease-in-out infinite alternate;
-    }
-
-    @keyframes glow {
-        from {
-            text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff;
-        }
-        to {
-            text-shadow: 0 0 20px #00ffff, 0 0 30px #00ffff, 0 0 40px #00ffff, 0 0 50px #00ffff;
-        }
+        color: #00FFFF;
+        text-shadow: 0 0 10px #00FFFF, 0 0 20px #00FFFF, 0 0 30px #00FFFF;
+        text-align: center;
+        margin-top: 20px;
+        margin-bottom: 20px;
     }
     </style>
     """,
     unsafe_allow_html=True
 )
 
-# Create a container for all content
-st.markdown('<div class="content-container">', unsafe_allow_html=True)
-
-# Add birthday text at the top
+# Add "Happy Birthday!" text at the top
 st.markdown('<div class="birthday-text">Happy Birthday!</div>', unsafe_allow_html=True)
 
-# Create a YouTube video embed
+# Add custom text after the heading
+custom_text = "Wishing you a day filled with love and happiness!"  # You can change this text
+st.markdown(f'<div class="custom-text">{custom_text}</div>', unsafe_allow_html=True)
+
+# Embed the YouTube video with a transparent background
 video_id = "your_youtube_video_id_here"  # Replace with your YouTube video ID
-video_embed = f"""
-<div class="video-container">
-    <iframe width="100%" height="100%" src="https://www.youtube.com/embed/{video_id}" frameborder="0" allowfullscreen>
-    </iframe>
-</div>
-"""
-
-# Add the video embed
-st.markdown(video_embed, unsafe_allow_html=True)
-
-# Add the Lottie animation
-st.markdown('<div class="lottie-container">', unsafe_allow_html=True)
+st.markdown(
+    f"""
+    <div class="video-container">
+        <iframe width="560" height="315" src="https://www.youtube.com/embed/{video_id}" frameborder="0" allowfullscreen></iframe>
+    </div>
+    """,
+    unsafe_allow_html=True
+)
+
+# Add the space-themed text after the video
+st.markdown('<div class="space-text">Explore the Wonders of Space!</div>', unsafe_allow_html=True)
+
+# Add the Lottie animation directly without extra container
 st_lottie(
     lottie_hello,
     speed=1,
     reverse=False,
     loop=True,
     quality="low",
+    height=150,
+    width=150,
     key=None,
 )
-st.markdown('</div>', unsafe_allow_html=True)
-
-# Add space-themed text
-st.markdown('<div class="space-text">Explore the Wonders of Space!</div>', unsafe_allow_html=True)
-
-st.markdown('</div>', unsafe_allow_html=True)