diff --git a/assets/about-icon-dark.png b/assets/about-icon-dark.png new file mode 100644 index 0000000..48cfc9b Binary files /dev/null and b/assets/about-icon-dark.png differ diff --git a/assets/contact-icon-dark.png b/assets/contact-icon-dark.png new file mode 100644 index 0000000..324d3b1 Binary files /dev/null and b/assets/contact-icon-dark.png differ diff --git a/assets/home-icon-dark.png b/assets/home-icon-dark.png new file mode 100644 index 0000000..cd6d046 Binary files /dev/null and b/assets/home-icon-dark.png differ diff --git a/assets/image-icon-dark.png b/assets/image-icon-dark.png new file mode 100644 index 0000000..6fec9df Binary files /dev/null and b/assets/image-icon-dark.png differ diff --git a/assets/logo-2.png b/assets/logo-2.png new file mode 100644 index 0000000..8c2b2fb Binary files /dev/null and b/assets/logo-2.png differ diff --git a/blurme/components/sidebar.py b/blurme/components/sidebar.py index 62ad937..123d750 100644 --- a/blurme/components/sidebar.py +++ b/blurme/components/sidebar.py @@ -3,6 +3,7 @@ from blurme import styles from blurme.state import State from reflex.page import get_decorated_pages +from blurme.templates import template import reflex as rx @@ -25,7 +26,7 @@ def sidebar_header() -> rx.Component: align = 'center', ) -def sidebar_item(text: str, icon: str, url: str, ) -> rx.Component: +def sidebar_item(text: str, icon: str, url: str) -> rx.Component: """Sidebar item. Args: @@ -39,6 +40,10 @@ def sidebar_item(text: str, icon: str, url: str, ) -> rx.Component: # Whether the item is active. active = State.router.page.path == url + default_dark_icon = "/image-icon-dark.png" + + #final_dark_icon = dark_icon if dark_icon else default_dark_icon + #active = (State.router.page.path == f"/{text.lower()}") | ( # (State.router.page.path == "/") & text == "Strona główna" #) @@ -82,7 +87,6 @@ def sidebar() -> rx.Component: Returns: The sidebar component. """ - # Get all the decorated pages and add them to the sidebar. from reflex.page import get_decorated_pages return rx.box( diff --git a/blurme/pages/dashboard.py b/blurme/pages/dashboard.py index 5abe2ab..97949e3 100644 --- a/blurme/pages/dashboard.py +++ b/blurme/pages/dashboard.py @@ -3,14 +3,46 @@ from blurme.templates import template import reflex as rx +ICON_EMAIL = "assets/email-icon.png" +ICON_PHONE = "assets/phone-icon.png" @template(route="/dashboard", title="Kontakt", image="/contact-icon.png") +# def dashboard() -> rx.Component: +# """The dashboard page. +# +# Returns: +# The UI for the dashboard page. +# """ +# section_style = {"background-color": "#f5f5f5", "padding": "10px", "margin-bottom": "20px"} +# icon_style = {"width": "20px", "height": "20px", "margin-right": "10px"} +# heading_style = {"font-weight": "bold", "font-family": "Arial, sans-serif"} +# +# return rx.fragment( +# rx.heading("Kontakt", font_size="3em"), +# rx.text("Witaj na stronie Kontaktowej w aplikacji BlurMe!"), +# rx.text( +# "Jesteśmy dostępni dla Ciebie na różnych platformach. " +# "Skontaktuj się z nami, gdy tylko masz pytania, sugestie lub " +# "po prostu chcesz porozmawiać o naszej aplikacji." +# ), +# rx.image(src=ICON_EMAIL, alt="Email icon", style=icon_style), +# rx.heading("E-mail", level=2, style=heading_style), +# rx.text("Zapraszamy do napisania do nas na adres: contact@blurme.com", style=section_style), +# rx.image(src=ICON_PHONE, alt="Phone icon", style=icon_style), +# rx.heading("Telefon", level=2, style=heading_style), +# rx.text("Możesz także zadzwonić pod numer: +48 123 456 789", style=section_style), +# ) + def dashboard() -> rx.Component: """The dashboard page. Returns: The UI for the dashboard page. """ + container_style = {"background-color": "#f5f5f5", "padding": "10px", "margin-bottom": "20px", "display": "flex", "align-items": "center"} + icon_style = {"width": "20px", "height": "20px", "margin-right": "10px"} + heading_style = {"font-weight": "bold", "font-family": "Arial, sans-serif"} + return rx.fragment( rx.heading("Kontakt", font_size="3em"), rx.text("Witaj na stronie Kontaktowej w aplikacji BlurMe!"), @@ -19,10 +51,20 @@ def dashboard() -> rx.Component: "Skontaktuj się z nami, gdy tylko masz pytania, sugestie lub " "po prostu chcesz porozmawiać o naszej aplikacji." ), - rx.heading("E-mail:", level=3), - rx.text("Zapraszamy do napisania do nas na adres: contact@blurme.com"), - rx.heading("Telefon:", level=3), - rx.text("Możesz także zadzwonić pod numer: +48 123 456 789"), - rx.heading("Media Społecznościowe:", level=3), - rx.text("Odwiedź nas na Facebooku, Twitterze i Instagramie @BlurMeApp") + rx.fragment( + rx.fragment( + rx.image(src=ICON_EMAIL, alt="Email icon", style=icon_style), + rx.heading("E-mail", level=3, style=heading_style), + rx.text("Zapraszamy do napisania do nas na adres: contact@blurme.com"), + style=container_style + ) + ), + rx.fragment( + rx.fragment( + rx.image(src=ICON_PHONE, alt="Phone icon", style=icon_style), + rx.heading("Telefon", level=3, style=heading_style), + rx.text("Możesz także zadzwonić pod numer: +48 123 456 789"), + style=container_style + ) + ) ) diff --git a/blurme/pages/settings.py b/blurme/pages/settings.py index 6f6d865..7703e77 100644 --- a/blurme/pages/settings.py +++ b/blurme/pages/settings.py @@ -1,14 +1,29 @@ """The settings page.""" - +import asyncio from blurme.templates import template +from blurme.state import State import reflex as rx + +color = "rgb(107,99,246)" + @template(route="/settings", title="Zdjęcie", image = "/image-icon.png") def settings() -> rx.Component: - return rx.vstack( + return rx.vstack( rx.heading("BlurMe", font_size="3em", margin_bottom="25px", background_image="linear-gradient(271.68deg, #7566fe 0.75%, #f96caf 88.52%)", background_clip="text", padding = "10px"), rx.text("Dodaj zdjęcie, które chcesz zanonimizować", font_size="1.2em"), - rx.upload(rx.text("Drag and drop files here or click to select files"),border="1px dotted rgb(107,99,246)", padding="5em")) - - + rx.upload( + rx.vstack(rx.text("Drag and drop files here or click to select files"),), + border=f"1px dotted {color}", + padding="5em",), + rx.hstack(rx.foreach(rx.selected_files, rx.text)), + rx.button( "Upload", + on_click=lambda: State.handle_upload( + rx.upload_files()),), + rx.button("Clear", + on_click=rx.clear_selected_files), + rx.foreach( + State.img, lambda img: rx.image(src=f'/{img}')), + padding="5em", + ) diff --git a/blurme/state.py b/blurme/state.py index 7efea12..359220d 100644 --- a/blurme/state.py +++ b/blurme/state.py @@ -1,12 +1,46 @@ """Base state for the app.""" import reflex as rx +from blurme import styles +import asyncio +#class State(rx.State): +# def __init__(self): +# super().__init__() +# self.dark_mode_state: bool = False +# def __str__(self): +# self.dark_mode_state +# def toggle_dark_mode(self) -> None: +# self.dark_mode_state = not self.dark_mode_state +# text_color = styles.text_color_light if self.dark_mode_state == True else styles.text_color_dark +# styles.text_color = text_color +# print(f"Dark Mode State: {self.dark_mode_state}") +# print(f"Current Text Color: {text_color}") +# pass + class State(rx.State): - """Base state for the app. + """The app state.""" + + # The images to show. + img: list[str] = [] + async def handle_upload(self, files: list[rx.UploadFile]): + """Handle the upload of file(s). + Args: + files: The uploaded files. + """ + for file in files: + upload_data = await file.read() + outfile = rx.get_asset_path(file.filename) + + # Save the file. + with open(outfile, "wb") as file_object: + file_object.write(upload_data) + + # Update the img var. + self.img.append(file.filename) + self.img = self.img + print(f"Current Text Color: {self.img[0]}") + - The base state is used to store general vars used throughout the app. - """ - pass diff --git a/blurme/styles.py b/blurme/styles.py index 8bf3cc2..c0bd4f4 100644 --- a/blurme/styles.py +++ b/blurme/styles.py @@ -1,11 +1,15 @@ """Styles for the app.""" import reflex as rx +from blurme.state import State border_radius = "0.375rem" box_shadow = "0px 0px 0px 1px rgba(84, 82, 95, 0.14)" border = "1px solid #F4F3F6" text_color = "black" +#dark_mode_state = State.toggle_dark_mode() +#text_color = "white" if dark_mode_state == True else "purple" +text_color_light = "black" text_color_dark = "white" accent_text_color = "black" accent_color = "linear-gradient(linear-gradient(43deg, rgba(201,238,248,1) 18%, rgba(253,210,227,0.7792366946778712) 86%)" diff --git a/blurme/templates/template.py b/blurme/templates/template.py index 1d1c4dd..befb389 100644 --- a/blurme/templates/template.py +++ b/blurme/templates/template.py @@ -5,6 +5,7 @@ from __future__ import annotations from blurme import styles from blurme.components.sidebar import sidebar from typing import Callable +from blurme.state import State import reflex as rx @@ -16,71 +17,27 @@ default_meta = [ }, ] -#def menu_button() -> rx.Component: -# """The menu button on the top right of the page. -# -# Returns: -# The menu button component. -# """ -# from reflex.page import get_decorated_pages - -# return rx.box( -# rx.menu( -# rx.menu_button( -# rx.icon( -# tag="hamburger", -# size="4em", -# color=styles.text_color, -# ), -# ), -# rx.menu_list( -# *[ -# rx.menu_item( -# rx.link( -# page["title"], -# href=page["route"], -# width="100%", -# ) -# ) -# for page in get_decorated_pages() -# ], -# rx.menu_divider(), -# rx.menu_item( -# rx.link("About", href="/about", width="100%") -# ), -# rx.menu_item( -# rx.link("Contact", href="mailto:founders@=reflex.dev", width="100%") -# ), -# ), -# ), -# position="fixed", -# right="1.5em", -# top="1.5em", -# z_index="500", -# ) - def dark_mode() -> rx.Component: return rx.box( - rx.button( rx.icon( tag="moon", size="4em", color=styles.text_color, ), - on_click=rx.toggle_color_mode, + on_click= rx.toggle_color_mode + #State.toggle_dark_mode() ), - position="fixed", right="1.5em", top="1.5em", - z_index="500", - ) + z_index="500",) def template( route: str | None = None, title: str | None = None, image: str | None = None, + image_dark: str | None = None, description: str | None = None, meta: str | None = None, script_tags: list[rx.Component] | None = None, @@ -92,9 +49,10 @@ def template( route: The route to reach the page. title: The title of the page. image: The favicon of the page. + image_dark: The dark mode favicon of the page. description: The description of the page. - meta: Additionnal meta to add to the page. - on_load: The event handler(s) called when the page load. + meta: Additional meta to add to the page. + on_load: The event handler(s) called when the page loads. script_tags: Scripts to attach to the page. Returns: @@ -132,8 +90,7 @@ def template( ), **styles.template_page_style, ), - #menu_button(), - dark_mode(), + dark_mode(), align_items="flex-start", transition="left 0.5s, width 0.5s", position="relative",