mirror of
https://github.com/Death916/deathsite.git
synced 2026-04-10 03:04:41 -07:00
added more layout and embedded youtube
This commit is contained in:
Death916
parent
f0dbd96789
commit
cfee6ebc9c
1 changed files with 112 additions and 54 deletions
|
|
@ -10,7 +10,7 @@ YOUTUBE_URL = "https://www.youtube.com/@916HS"
|
|||
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"""
|
||||
<iframe width="560" height="315" src="{YOUTUBE_EMBED_URL}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
<iframe width="350" height="200" src="{YOUTUBE_EMBED_URL}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
"""
|
||||
),
|
||||
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,21 +217,31 @@ 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
|
||||
)
|
||||
|
||||
|
||||
|
|
@ -195,3 +250,6 @@ app.add_page(
|
|||
index,
|
||||
title=State.page_title,
|
||||
)
|
||||
|
||||
|
||||
# TODO add guild page
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue