Update app.py

app.py

@@ -2,7 +2,150 @@ import streamlit as st
 import random
 import requests
 from streamlit_lottie import st_lottie
+import streamlit as st
+import streamlit.components.v1 as stc
+import requests
+from streamlit_lottie import st_lottie
+
+def load_lottieurl(url: str):
+    r = requests.get(url)
+    if r.status_code != 200:
+        return None
+    return r.json()
+
+# Load the Lottie animation
+lottie_hello = load_lottieurl("https://lottie.host/d29edbdd-af94-402e-bb4c-b314f17897e6/n5SKHOkbYQ.json")
+
+# Set the page title and layout
+st.set_page_config(page_title="Space Birthday Exploration", page_icon="🚀", layout="wide")
+
+# Add CSS styles to the page
+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;}
+    }
+
+    .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;
+        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;
+        }
+    }
+
+    .video-container {
+        width: 80%;
+        height: 450px;
+        border-radius: 20px;
+        box-shadow: 0px 0px 20px rgba(255,255,255,0.3);
+        overflow: hidden;
+        margin-bottom: 30px;
+    }
+
+    .lottie-container {
+        width: 200px;
+        height: 200px;
+        margin-bottom: 30px;
+    }
+
+    .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;
+        }
+    }
+    </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
+st.markdown('<div class="birthday-text">Happy Birthday!</div>', unsafe_allow_html=True)
+
+# Create a YouTube video embed
+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_lottie(
+    lottie_hello,
+    speed=1,
+    reverse=False,
+    loop=True,
+    quality="low",
+    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)
 # Set page config to wide layout and remove top padding
 st.set_page_config(layout="wide", initial_sidebar_state="collapsed")