Merge branch 'master' into BLUR-17-Intuicyjny-design

blurme/components/sidebar.py

@@ -7,9 +7,7 @@ import reflex as rx
 
 
 def sidebar_header() -> rx.Component:
-    """Sidebar header.
-
-    Returns:
+    """Returns:
         The sidebar header component.
     """
     return rx.hstack(
@@ -19,36 +17,12 @@ def sidebar_header() -> rx.Component:
             height="4.5em",
         ),
         rx.spacer(),
-        # Link to Reflex GitHub repo.
         width="100%",
         border_bottom=styles.border,
         padding="1em",
     )
 
-
-#def sidebar_footer() -> rx.Component:
-    """Sidebar footer.
-
-    Returns:
-        The sidebar footer component.
-    """
- #   return rx.hstack(
- #       rx.spacer(),
- #       rx.link(
- #           rx.text("Docs"),
- #           href="https://reflex.dev/docs/getting-started/introduction/",
- #       ),
- #       rx.link(
- #           rx.text("Blog"),
- #           href="https://reflex.dev/blog/",
- #       ),
- #       width="100%",
- #       border_top=styles.border,
- #       padding="1em",
- #   )
-
-def sidebar_item(text: str, url: str) -> rx.Component:
-                 #icon: str, 
+def sidebar_item(text: str, icon: str, url: str, ) -> rx.Component:
     """Sidebar item.
 
     Args:
@@ -66,11 +40,11 @@ def sidebar_item(text: str, url: str) -> rx.Component:
 
     return rx.link(
         rx.hstack(
-            #rx.image(
-            #    src=icon,
-            #    height="2.5em",
-            #    padding="0.5em",
-            #),
+            rx.image(
+                src=icon,
+                height="2.5em",
+                padding="0.5em",
+            ),
             rx.text(
                 text,
             ),
@@ -87,11 +61,12 @@ def sidebar_item(text: str, url: str) -> rx.Component:
             border_radius=styles.border_radius,
             box_shadow=styles.box_shadow,
             width="100%",
-            padding_x="1em",
-            height = "2em"
+            padding_x="1.3em",
+            height = "2.5em"
         ),
         href=url,
         width="100%",
+        
     )
 
 
@@ -111,7 +86,7 @@ def sidebar() -> rx.Component:
                 *[
                     sidebar_item(
                         text=page.get("title", page["route"].strip("/").capitalize()),
-                        #icon=page.get("image", "/github.svg"),
+                        icon=page.get("image",page["route"].strip("/").capitalize()),
                         url=page["route"],
                     )
                     for page in get_decorated_pages()
@@ -123,7 +98,7 @@ def sidebar() -> rx.Component:
             ),
             rx.spacer(),
             #sidebar_footer(),
-            height="100dvh",
+            height="100em",
         ),
         display=["none", "none", "block"],
         min_width=styles.sidebar_width,

blurme/pages/dashboard.py

@@ -4,7 +4,7 @@ from blurme.templates import template
 import reflex as rx
 
 
-@template(route="/dashboard", title="Dashboard")
+@template(route="/dashboard", title="Kontakt", image = "/contact-icon.png")
 def dashboard() -> rx.Component:
     """The dashboard page.
 

blurme/pages/index.py

@@ -5,37 +5,52 @@ from blurme.templates import template
 
 import reflex as rx
 
-@template(route="/", title="Strona główna", image="/github.svg")
+@template(route="/", title="Strona główna", image = "/home-icon.png")
 def index() -> rx.Component:
     return rx.vstack(
         rx.heading("Witaj w BlurMe!", font_size="3em", margin_bottom="25px", background_image="linear-gradient( 64.5deg,  rgba(245,116,185,1) 14.7%, rgba(89,97,223,1) 88.7% )", background_clip="text", padding = "10px"),
         rx.wrap(
             rx.hstack(
                 rx.vstack(rx.text("Aplikacja do anonimizacji zdjęć: usunięcie wybranych informacji identyfikujących ze zdjęć z wydarzeń i miejsc publicznych nigdy nie było tak proste!",
-                        font_size="1.2em", style={"margin-left": "40px", "margin-top": "40px", "align-self": "flex-start", "margin-bottom": "25px"}),
+                        font_size="1.2em", style={"margin-left": "40px", "margin-top": "50px", "align-self": "flex-start", "margin-bottom": "25px"}),
                         rx.link(rx.button("Zacznij anonimizować"), href="settings",align="center",color="rgba(117,102,254,255)",button=True,padding="50xp",font_size="1.2em",style={"margin-top": "30px" }),style = {"align-self": "flex-start"}),
                 rx.image(src="obraz1.png",height="30em",padding="0.5em",style={"margin-right": "60px"}),
            style={"align-self": "flex-start"}),),
 
         rx.text(" ", height = "20px"),
-        rx.text("Dlaczego Blurme?", font_size="1.5em", font_weight="bold", margin_top="10px", margin_bottom="10px"),
-        rx.list(
-            rx.list_item(rx.text("Prywatność: ",as_="b"), "Nasza aplikacja zapewnia pełną ochronę prywatności, eliminując ryzyko identyfikacji osób niezwiązanych z anonimizacją."),
-            rx.list_item(rx.text("Prosta obsługa: ",as_="b"),"Intuicyjny interfejs użytkownika sprawia, że korzystanie z Blurme jest łatwe dla każdego."),
-            rx.list_item(rx.text("Elastyczność:  ",as_="b"),"Wybierz, która twarz na zdjęciu ma pozostać niezmieniona, a my zadbamy o resztę. Indywidualizuj swoje zdjęcia zgodnie z własnymi potrzebami."),
-            text_align="left"),
-        rx.text("Jak to działa?", font_size="1.5em", font_weight="bold", margin_top="20px", margin_bottom="10px"),
-        rx.ordered_list(
-            rx.list_item(rx.text("Wgraj Zdjęcie: ",as_="b"), "Prosty proces rozpoczyna się od dodania zdjęcia, które chcesz anonimizować."),
-            rx.list_item(rx.text("Zaznacz Twarz do Ochrony: ",as_="b"), "Oznacz twarz, którą chcesz zachować."),
-            rx.list_item(rx.text("Anonimizuj Resztę: ",as_="b"), "Naciśnij przycisk, a Blurme automatycznie zastosuje efekt rozmycia do wszystkich obszarów poza zaznaczoną twarzą."),
-            rx.list_item(rx.text("Pobierz i Podziel Się: ",as_="b"), "Gotowe! Pobierz anonimizowane zdjęcie i dziel się nim bez obaw o prywatność.")
-        ),
-        rx.text("Do Czego?", font_size="1.5em", font_weight="bold", margin_top="20px", margin_bottom="10px"),
-        rx.list(
-            rx.list_item(rx.text("Ochrona Tożsamości: ",as_="b"),"Idealne do usuwania twarzy nieznajomych lub przypadkowych przechodniów z tła.", text_align="left"),
-            rx.list_item(rx.text("Zachowanie Prywatności: ",as_="b"),"Przydatne w sytuacjach, gdzie chcesz udostępnić zdjęcia publicznie, ale z zachowaniem prywatności pewnych osób.", text_align="left"),
-            rx.list_item(rx.text("Kreatywność: ",as_="b"),"Wyraź swoją kreatywność, zachowując jednocześnie istotne elementy na zdjęciach.", text_align="left"),
-            ),
-        rx.text("Blurme to więcej niż tylko narzędzie - to rozwiązanie, które pozwala Ci kontrolować, jak prezentujesz swoje zdjęcia online, zachowując jednocześnie pełną prywatność. Przekształć swoje obrazy już teraz!", text_align = "left"),
-    )
+
+        rx.vstack(rx.text("Jak to działa?", color = "rgba(117,102,253,255)", font_size="2em", font_weight="bold", margin_top="20px", margin_bottom="5px"),
+            rx.list(
+            rx.list_item(rx.text("1. Wgraj Zdjęcie ",as_="b",font_size="1.2em"), 
+                         rx.text("Prosty proces rozpoczyna się od dodania zdjęcia, które chcesz anonimizować.", ),margin_right = "50%"),
+            rx.list_item(rx.text("2. Zaznacz Twarz do Ochrony ",as_="b", font_size="1.2em"), 
+                         rx.text("Oznacz twarz, którą chcesz zachować.", ),margin_left = "50%"),
+            rx.list_item(rx.text("3. Anonimizuj Resztę ",as_="b", font_size="1.2em"), 
+                         rx.text("Naciśnij przycisk, a Blurme automatycznie zastosuje efekt rozmycia do wszystkich obszarów poza zaznaczoną twarzą.", ),margin_right ="50%"),
+            rx.list_item(rx.text("4. Pobierz i Podziel Się ",as_="b", font_size="1.2em"), 
+                         rx.text("Gotowe! Pobierz anonimizowane zdjęcie i dziel się nim bez obaw o prywatność.",), margin_left = "50%"),
+        ), margin_right= "40px", margin_left = "40px"),
+        
+            rx.vstack(rx.text("Dlaczego Blurme?", color = "rgba(251,108,174,255)", font_size="2em", font_weight="bold", margin_top="25px", margin_bottom="5px"),
+        rx.flex(
+            rx.box(rx.text("Prywatność",as_="b",font_size="1.3em"), 
+                         rx.text("Nasza aplikacja zapewnia pełną ochronę prywatności, eliminując ryzyko identyfikacji osób niezwiązanych z anonimizacją.", text_align="left",),margin_left= "40px", width="315px", padding = "5px"),
+            rx.box(rx.text("Elastyczność",as_="b",font_size="1.3em"),
+                         rx.text("Wybierz, która twarz na zdjęciu ma pozostać niezmieniona, a my zadbamy o resztę.", text_align="left", ),width="315px",padding = "5px" ),
+            rx.box(rx.text("Prosta obsługa",as_="b",font_size="1.3em"),
+                         rx.text("Intuicyjny interfejs użytkownika sprawia, że korzystanie z Blurme jest łatwe dla każdego.",text_align="left", ),margin_right= "40px", width="315px",padding = "5px"),
+                         align = "top"), text_align = "center"),
+            
+            rx.vstack(rx.text("Do Czego?", color = "rgba(183,105,215,255)", font_size="2em", font_weight="bold", margin_top="25px", margin_bottom="5px"),
+        rx.list(rx.hstack(
+            rx.list_item(rx.text("Ochrona Tożsamości",as_="b",font_size="1.3em"),
+                         rx.text("Idealne do usuwania twarzy nieznajomych lub przypadkowych przechodniów z tła.", text_align="left"),),
+            rx.list_item(rx.text("Zachowanie Prywatności", as_="b",font_size="1.3em"),
+                rx.text("Przydatne w sytuacjach, gdy chcesz udostępnić zdjęcia publicznie, ale z zachowaniem prywatności pewnych osób.", text_align="left"),),
+            rx.list_item(rx.text("Kreatywność",as_="b",font_size="1.3em"),
+                         rx.text("Wyraź swoją kreatywność, zachowując jednocześnie istotne elementy na zdjęciach.", text_align="left"),),
+            margin_right =  "40px", margin_left = "40px"), ),text_align = "center"),
+            
+        
+ #       rx.text("Blurme to więcej niż tylko narzędzie - to rozwiązanie, które pozwala Ci kontrolować, jak prezentujesz swoje zdjęcia online, zachowując jednocześnie pełną prywatność. Przekształć swoje obrazy już teraz!", text_align = "left"),
+    )#Indywidualizuj swoje zdjęcia zgodnie z własnymi potrzebami

blurme/pages/settings.py

@@ -4,7 +4,7 @@ from blurme.templates import template
 
 import reflex as rx
 
-@template(route="/settings", title="Settings")
+@template(route="/settings", title="Zdjęcie", image = "/image-icon.png")
 def settings() -> rx.Component:
     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"),