From cfee6ebc9c98a20ea4aa2a9f35f4b297a1b36204 Mon Sep 17 00:00:00 2001 From: Death916 Date: Sun, 30 Mar 2025 06:57:16 -0700 Subject: [PATCH] added more layout and embedded youtube --- deathsite/deathsite.py | 166 +++++++++++++++++++++++++++-------------- 1 file changed, 112 insertions(+), 54 deletions(-) diff --git a/deathsite/deathsite.py b/deathsite/deathsite.py index c3afa9c..ed7a681 100644 --- a/deathsite/deathsite.py +++ b/deathsite/deathsite.py @@ -7,10 +7,10 @@ import datetime # constants TWITCH_USERNAME = "Death916" YOUTUBE_URL = "https://www.youtube.com/@916HS" -YOUTUBE_EMBED_URL = "https://www.youtube.com/embed/D43Ks8fxoz4" +YOUTUBE_EMBED_URL = "https://www.youtube.com/embed/D43Ks8fxoz4" -#styles +# styles NAV_BUTTON_STYLE = { "color": "#f8f9fa", @@ -21,15 +21,17 @@ NAV_BUTTON_STYLE = { "_hover": { "background_color": "#ffc107", "color": "#212529", - "text_decoration": "none", # Override link hover underline + "text_decoration": "none", # Override link hover underline }, } + class State(rx.State): current_page: str = "Home" - page_title: str = "Death916's Site" # Added page_title attribute + page_title: str = "Death916's Site" # Added page_title attribute current_time: str = datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S") + def update_time(self): self.current_time = datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S") @@ -52,9 +54,10 @@ def navigation_button(text: str) -> rx.Component: State.current_page == text, {**NAV_BUTTON_STYLE, **active_style_dict}, NAV_BUTTON_STYLE, - ) + ), ) + def header() -> rx.Component: """Site header and navigation.""" return rx.box( @@ -65,78 +68,123 @@ def header() -> rx.Component: navigation_button("Videos"), navigation_button("Blog"), navigation_button("Projects"), - - spacing="4", # Spacing between nav items + spacing="4", # Spacing between nav items justify="center", align="center", ), width="100%", - bg="#212529", # Dark background + bg="#212529", # Dark background padding="1.5em 0", - border_bottom="3px solid #6f42c1", # Dark purple accent border - align="center", # Center heading and nav horizontally + border_bottom="3px solid #6f42c1", # Dark purple accent border + align="center", # Center heading and nav horizontally ), ) - + + +def footer() -> rx.Component: + return rx.box( + rx.text( + f"© {datetime.datetime.now().year} Death916 - Powered by Reflex", + color="#6c757d", + font_size="0.9em", + ), + padding="0.5em", # Reduced padding + border_top="1px solid #dee2e6", + width="100%", + text_align="center", # Center the text + position="sticky", # Stick to the bottom + bottom="0", # Stick to the bottom + bg="", # + ) + def home(): return rx.box( rx.vstack( - rx.heading("Home Page", size="3", color="#ffffff"), - rx.text("This is the home page content.", color="#ffffff"), - padding="2em", - spacing="1", - align_items="start", # Align content to the start (left) + rx.container( + rx.vstack( + rx.heading( + "Welcome to my domain", + color="#ffffff", + style={"text_align": "center"}, + ), + rx.text( + "This is a personal site for my projects and streams. Never really made a full site for myself before so this will be a work in progress.", + color="#ffffff", + style={"text_align": "center"}, + ), + spacing="1", + width="100%", + align_items="center", + justify="center", + ), + padding="2em", + width="100%", + align_items="center", + justify="center", + ), + align_items="center", # Center content horizontally + justify="center", # Center content vertically + width="100%", ), rx.vstack( rx.heading("Whats New:", size="2", color="#ffffff"), - rx.text("Latest Stream: ", color="#ffffff"), - rx.link( - "Twitch Stream", - href=f"https://www.twitch.tv/{TWITCH_USERNAME}", - color="#ffffff", - is_external=True, - ), rx.html( f""" - + """ ), - align_items="start", # Align content to the start (left) + rx.text("Latest Stream: ", color="#ffffff"), + rx.link( + "Twitch Stream", + href=f"https://www.twitch.tv/{TWITCH_USERNAME}", + color="#ffffff", + is_external=True, ), - align_items="start", # Align content to the start (left) - width="100%", # Take up full width + align_items="start", # Align content to the start (left) + ), + align_items="start", # Align content to the start (left) + width="100%", # Take up full width + ) + + +def page_content(content): + ## Wraps the content in a box with a dark background and padding + return rx.box( + rx.vstack( + content, + align_items="center", + justify="center", + width="100%", + ), + width="100%", ) def projects(): - return rx.box( + return page_content( rx.vstack( rx.heading("Projects Page", size="3", color="#ffffff"), rx.text("This is the projects page content.", color="#ffffff"), padding="2em", spacing="1", - align_items="start", # Align content to the start (left) - ), - align_items="start", # Align content to the start (left) - width="100%", # Take up full width + ) ) + def blog(): - return rx.box( + return page_content( rx.vstack( rx.heading("Blog Page", size="3", color="#ffffff"), rx.text("This is the blog page content.", color="#ffffff"), padding="2em", spacing="1", - align_items="start", # Align content to the start (left) - ), - align_items="start", # Align content to the start (left) - width="100%", # Take up full width + ) ) + def videos(): - return rx.box( + return page_content( rx.vstack( rx.heading("Videos Page", size="3", color="#ffffff"), rx.text("NEWEST VIDEOS:", color="#ffffff"), @@ -148,17 +196,14 @@ def videos(): ), padding="2em", spacing="1", - align_items="start", # Align content to the start (left) - ), - align_items="start", # Align content to the start (left) - width="100%", # Take up full width - + ) ) + def index(): return rx.box( header(), - rx.container( + rx.box( rx.cond( State.current_page == "Home", home(), @@ -172,26 +217,39 @@ def index(): State.current_page == "Projects", projects(), rx.vstack( - rx.heading("Welcome to My Personal Site", size="1", color="#ffffff"), - rx.text("This is a personal site for my projects and streams.", color="#ffffff"), + rx.heading( + "Welcome to My Personal Site", + size="1", + color="#ffffff", + ), + rx.text( + "This is a personal site for my projects and streams.", + color="#ffffff", + ), rx.text(f"Current time: {State.current_time}", color="#ffffff"), padding="2em", spacing="2", - align_items="start", # Align content to the start (left) ), - ) - ) - ) + ), + ), + ), ), - # Take up full width - align_items="start", # Align content to the start (left) + width="100%", + flex_grow="1", # Allow the content to grow and push the footer down ), - # Take up full width + footer(), + width="100%", + display="flex", + flex_direction="column", + min_height="100vh", # Ensure the box takes up at least the full viewport height ) - + app = rx.App() app.add_page( index, title=State.page_title, ) + + +# TODO add guild page