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
|
|
@ -7,10 +7,10 @@ import datetime
|
||||||
# constants
|
# constants
|
||||||
TWITCH_USERNAME = "Death916"
|
TWITCH_USERNAME = "Death916"
|
||||||
YOUTUBE_URL = "https://www.youtube.com/@916HS"
|
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 = {
|
NAV_BUTTON_STYLE = {
|
||||||
"color": "#f8f9fa",
|
"color": "#f8f9fa",
|
||||||
|
|
@ -21,15 +21,17 @@ NAV_BUTTON_STYLE = {
|
||||||
"_hover": {
|
"_hover": {
|
||||||
"background_color": "#ffc107",
|
"background_color": "#ffc107",
|
||||||
"color": "#212529",
|
"color": "#212529",
|
||||||
"text_decoration": "none", # Override link hover underline
|
"text_decoration": "none", # Override link hover underline
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
class State(rx.State):
|
class State(rx.State):
|
||||||
current_page: str = "Home"
|
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")
|
current_time: str = datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S")
|
||||||
|
|
||||||
def update_time(self):
|
def update_time(self):
|
||||||
self.current_time = datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S")
|
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,
|
State.current_page == text,
|
||||||
{**NAV_BUTTON_STYLE, **active_style_dict},
|
{**NAV_BUTTON_STYLE, **active_style_dict},
|
||||||
NAV_BUTTON_STYLE,
|
NAV_BUTTON_STYLE,
|
||||||
)
|
),
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|
||||||
def header() -> rx.Component:
|
def header() -> rx.Component:
|
||||||
"""Site header and navigation."""
|
"""Site header and navigation."""
|
||||||
return rx.box(
|
return rx.box(
|
||||||
|
|
@ -65,78 +68,123 @@ def header() -> rx.Component:
|
||||||
navigation_button("Videos"),
|
navigation_button("Videos"),
|
||||||
navigation_button("Blog"),
|
navigation_button("Blog"),
|
||||||
navigation_button("Projects"),
|
navigation_button("Projects"),
|
||||||
|
spacing="4", # Spacing between nav items
|
||||||
spacing="4", # Spacing between nav items
|
|
||||||
justify="center",
|
justify="center",
|
||||||
align="center",
|
align="center",
|
||||||
),
|
),
|
||||||
width="100%",
|
width="100%",
|
||||||
bg="#212529", # Dark background
|
bg="#212529", # Dark background
|
||||||
padding="1.5em 0",
|
padding="1.5em 0",
|
||||||
border_bottom="3px solid #6f42c1", # Dark purple accent border
|
border_bottom="3px solid #6f42c1", # Dark purple accent border
|
||||||
align="center", # Center heading and nav horizontally
|
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():
|
def home():
|
||||||
return rx.box(
|
return rx.box(
|
||||||
rx.vstack(
|
rx.vstack(
|
||||||
rx.heading("Home Page", size="3", color="#ffffff"),
|
rx.container(
|
||||||
rx.text("This is the home page content.", color="#ffffff"),
|
rx.vstack(
|
||||||
padding="2em",
|
rx.heading(
|
||||||
spacing="1",
|
"Welcome to my domain",
|
||||||
align_items="start", # Align content to the start (left)
|
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.vstack(
|
||||||
rx.heading("Whats New:", size="2", color="#ffffff"),
|
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(
|
rx.html(
|
||||||
f"""
|
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)
|
align_items="start", # Align content to the start (left)
|
||||||
width="100%", # Take up full width
|
),
|
||||||
|
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():
|
def projects():
|
||||||
return rx.box(
|
return page_content(
|
||||||
rx.vstack(
|
rx.vstack(
|
||||||
rx.heading("Projects Page", size="3", color="#ffffff"),
|
rx.heading("Projects Page", size="3", color="#ffffff"),
|
||||||
rx.text("This is the projects page content.", color="#ffffff"),
|
rx.text("This is the projects page content.", color="#ffffff"),
|
||||||
padding="2em",
|
padding="2em",
|
||||||
spacing="1",
|
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():
|
def blog():
|
||||||
return rx.box(
|
return page_content(
|
||||||
rx.vstack(
|
rx.vstack(
|
||||||
rx.heading("Blog Page", size="3", color="#ffffff"),
|
rx.heading("Blog Page", size="3", color="#ffffff"),
|
||||||
rx.text("This is the blog page content.", color="#ffffff"),
|
rx.text("This is the blog page content.", color="#ffffff"),
|
||||||
padding="2em",
|
padding="2em",
|
||||||
spacing="1",
|
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():
|
def videos():
|
||||||
return rx.box(
|
return page_content(
|
||||||
rx.vstack(
|
rx.vstack(
|
||||||
rx.heading("Videos Page", size="3", color="#ffffff"),
|
rx.heading("Videos Page", size="3", color="#ffffff"),
|
||||||
rx.text("NEWEST VIDEOS:", color="#ffffff"),
|
rx.text("NEWEST VIDEOS:", color="#ffffff"),
|
||||||
|
|
@ -148,17 +196,14 @@ def videos():
|
||||||
),
|
),
|
||||||
padding="2em",
|
padding="2em",
|
||||||
spacing="1",
|
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():
|
def index():
|
||||||
return rx.box(
|
return rx.box(
|
||||||
header(),
|
header(),
|
||||||
rx.container(
|
rx.box(
|
||||||
rx.cond(
|
rx.cond(
|
||||||
State.current_page == "Home",
|
State.current_page == "Home",
|
||||||
home(),
|
home(),
|
||||||
|
|
@ -172,26 +217,39 @@ def index():
|
||||||
State.current_page == "Projects",
|
State.current_page == "Projects",
|
||||||
projects(),
|
projects(),
|
||||||
rx.vstack(
|
rx.vstack(
|
||||||
rx.heading("Welcome to My Personal Site", size="1", color="#ffffff"),
|
rx.heading(
|
||||||
rx.text("This is a personal site for my projects and streams.", color="#ffffff"),
|
"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"),
|
rx.text(f"Current time: {State.current_time}", color="#ffffff"),
|
||||||
padding="2em",
|
padding="2em",
|
||||||
spacing="2",
|
spacing="2",
|
||||||
align_items="start", # Align content to the start (left)
|
|
||||||
),
|
),
|
||||||
)
|
),
|
||||||
)
|
),
|
||||||
)
|
),
|
||||||
),
|
),
|
||||||
# Take up full width
|
width="100%",
|
||||||
align_items="start", # Align content to the start (left)
|
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 = rx.App()
|
||||||
app.add_page(
|
app.add_page(
|
||||||
index,
|
index,
|
||||||
title=State.page_title,
|
title=State.page_title,
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|
||||||
|
# TODO add guild page
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue