Update app.py

app.py

@@ -1,6 +1,14 @@
 import streamlit as st
 import requests
 from streamlit_lottie import st_lottie
+from dotenv import load_dotenv
+import os
+
+# Load environment variables from .env file
+load_dotenv()
+
+# Retrieve the password from the environment variable
+APP_PASSWORD = os.getenv("APP_PASSWORD")
 
 # Set the page title and layout
 st.set_page_config(page_title="Space Birthday Exploration", page_icon="🚀", layout="centered")
@@ -14,106 +22,126 @@ def load_lottieurl(url: str):
 # Load the Lottie animation
 lottie_hello = load_lottieurl("https://lottie.host/d29edbdd-af94-402e-bb4c-b314f17897e6/n5SKHOkbYQ.json")
 
-# 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-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;
-    }
-
-    .birthday-text {
-        font-size: 48px;
-        font-weight: bold;
-        color: #FFB6C1;
-        text-shadow: 0 0 10px #000000, 0 0 20px #000000, 0 0 30px #000000;
-        text-align: center;
-        margin-top: 20px;
-    }
-
-    .custom-text {
-        font-size: 20px;
-        text-align: center;
-        margin-top: 10px;
-    }
-
-    .video-container {
-        display: flex;
-        justify-content: center;
-        margin-top: 30px;
-        box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
-        border-radius: 10px;
-        overflow: hidden;
-        background-color: rgba(0,0,0,0);  /* Fully transparent background */
-    }
-
-    .lottie-container {
-        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: #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
-)
-
-# Add "Happy Birthday!" text at the top
-st.markdown('<div class="birthday-text">Happy Birthday!</div>', unsafe_allow_html=True)
-
-# 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
-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,
-)
+# Function to display the login form
+def login():
+    st.sidebar.header("Login")
+    password = st.sidebar.text_input("Password", type="password")
+    if st.sidebar.button("Submit"):
+        if password == APP_PASSWORD:  # Compare entered password with the environment password
+            st.session_state["authenticated"] = True
+        else:
+            st.error("Incorrect password")
+
+# Check authentication status
+if "authenticated" not in st.session_state:
+    st.session_state["authenticated"] = False
+
+if not st.session_state["authenticated"]:
+    login()
+else:
+    # 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-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;
+        }
+
+        .birthday-text {
+            font-size: 48px;
+            font-weight: bold;
+            color: #FFB6C1;
+            text-shadow: 0 0 10px #000000, 0 0 20px #000000, 0 0 30px #000000;
+            text-align: center;
+            margin-top: 20px;
+        }
+
+        .custom-text {
+            font-size: 20px;
+            color: #FF00FF;  /* Magenta color */
+            text-shadow: 0 0 10px #000000, 0 0 20px #000000, 0 0 30px #000000;
+            text-align: center;
+            margin-top: 10px;
+        }
+
+        .video-container {
+            display: flex;
+            justify-content: center;
+            margin-top: 30px;
+            box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
+            border-radius: 10px;
+            overflow: hidden;
+            background-color: rgba(0,0,0,0);  /* Fully transparent background */
+        }
+
+        .space-text {
+            font-size: 24px;
+            font-weight: bold;
+            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
+    )
+
+    # Add "Happy Birthday!" text at the top
+    st.markdown('<div class="birthday-text">Happy Birthday!</div>', unsafe_allow_html=True)
+
+    # Add custom text after the heading, with two paragraphs
+    custom_text = """
+        <p>Wishing you many wonderful years ahead, filled with love, happiness, and out-of-this-world adventures, space girl!</p>
+        <p>Now let me present to you the bday vid edit "20thChondiEdit"</p>
+        <p>I hope you like it!</p>
+    """  # 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 = "SLBzL4f7r3k"  # Your YouTube video ID
+    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, with two paragraphs
+    space_text = """
+        <p>Hey dude that last 1 year was damn crazy but it was filled with many moments.</p>
+        <p>These are some of those moments that were captured.</p> 
+        <p>In all these moments Ik I haven't always been the ideal best friend and I am truly sorry for those.</p>
+        <p>You have been a great friend all this time and am sorry for all those times I couldn't reciprocate that.</p>
+        <p>Seriously though thank you for being there for me and for taking all the messed up things that I do.</p>
+        <p>I haven't always been the bunny that you deserve but thank you for the aditi you have been.</p>
+        <p>So Happy Birthday! And I hope we stay like this for all your next bdays well just a lil bit more matured 🤓</p>
+    """  # You can change this text
+    st.markdown(f'<div class="space-text">{space_text}</div>', unsafe_allow_html=True)
+
+    # Add the Lottie animation directly without an extra container
+    st_lottie(
+        lottie_hello,
+        speed=1,
+        reverse=False,
+        loop=True,
+        quality="low",
+        height=150,
+        width=150,
+        key=None,
+    )