s352038/BlurMe
3
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

wrap items

Browse Source
This commit is contained in:
markrz12 2023-11-17 16:33:22 +01:00
parent 2c8dbaa00a
commit 01fde35844
9 changed files with 74 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.web/pages/404.js
View File

@ -5,8 +5,8 @@ import { ColorModeContext, EventLoopContext, initialEvents, StateContext } from
import "focus-visible/dist/focus-visible"
import { Modal, ModalBody, ModalContent, ModalHeader, ModalOverlay, Text } from "@chakra-ui/react"
import { getEventURL } from "/utils/state.js"
import { useClientSideRouting } from "/utils/client_side_routing"
import Error from "next/error"
import { useClientSideRouting } from "/utils/client_side_routing"
import NextHead from "next/head"

30
.web/pages/dashboard.js
View File

@ -3,7 +3,7 @@ import { useRouter } from "next/router"
import { Event, getAllLocalStorageItems, getRefValue, getRefValues, isTrue, preventDefault, refs, spreadArraysOrObjects, uploadFiles, useEventLoop } from "/utils/state"
import { ColorModeContext, EventLoopContext, initialEvents, StateContext } from "/utils/context.js"
import "focus-visible/dist/focus-visible"
import { Box, Code, Heading, HStack, Image, Link, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Modal, ModalBody, ModalContent, ModalHeader, ModalOverlay, Spacer, Text, VStack } from "@chakra-ui/react"
import { Box, Heading, HStack, Image, Link, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Modal, ModalBody, ModalContent, ModalHeader, ModalOverlay, Spacer, Text, VStack } from "@chakra-ui/react"
import { getEventURL } from "/utils/state.js"
import NextLink from "next/link"
import { HamburgerIcon } from "@chakra-ui/icons"
@ -66,28 +66,28 @@ export default function Component() {
</Fragment>
<HStack alignItems={`flex-start`} sx={{"transition": "left 0.5s, width 0.5s", "position": "relative"}}>
<Box sx={{"display": ["none", "none", "block"], "minWidth": "20em", "height": "100%", "position": "sticky", "top": "0px", "borderRight": "1px solid #F4F3F6"}}>
<VStack sx={{"height": "100dvh"}}>
<VStack sx={{"height": "100%"}}>
<HStack sx={{"width": "100%", "borderBottom": "1px solid #F4F3F6", "padding": "1em"}}>
<Image src={`/icon.png`} sx={{"height": "4.5em"}}/>
<Spacer/>
</HStack>
<VStack alignItems={`flex-start`} sx={{"width": "100%", "overflowY": "auto", "padding": "1em"}}>
<Link as={NextLink} href={`/`} sx={{"width": "100%"}}>
<HStack sx={{"bg": isTrue((state.router.page.path === "/strona g\\u0142\\u00f3wna") || (((state.router.page.path === "/") && "Strona g\\u0142\\u00f3wna") === "Home")) ? `#fcd2e7` : `transparent`, "color": isTrue((state.router.page.path === "/strona g\\u0142\\u00f3wna") || (((state.router.page.path === "/") && "Strona g\\u0142\\u00f3wna") === "Home")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
<HStack sx={{"bg": isTrue((state.router.page.path === "/strona g\\u0142\\u00f3wna") || (((state.router.page.path === "/") && "Strona g\\u0142\\u00f3wna") === "Strona g\\u0142\\u00f3wna")) ? `#d9a2ca` : `transparent`, "color": isTrue((state.router.page.path === "/strona g\\u0142\\u00f3wna") || (((state.router.page.path === "/") && "Strona g\\u0142\\u00f3wna") === "Strona g\\u0142\\u00f3wna")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
<Text>
{`Strona główna`}
</Text>
</HStack>
</Link>
<Link as={NextLink} href={`/dashboard`} sx={{"width": "100%"}}>
<HStack sx={{"bg": isTrue((state.router.page.path === "/dashboard") || (((state.router.page.path === "/") && "Dashboard") === "Home")) ? `#fcd2e7` : `transparent`, "color": isTrue((state.router.page.path === "/dashboard") || (((state.router.page.path === "/") && "Dashboard") === "Home")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
<HStack sx={{"bg": isTrue((state.router.page.path === "/dashboard") || (((state.router.page.path === "/") && "Dashboard") === "Strona g\\u0142\\u00f3wna")) ? `#d9a2ca` : `transparent`, "color": isTrue((state.router.page.path === "/dashboard") || (((state.router.page.path === "/") && "Dashboard") === "Strona g\\u0142\\u00f3wna")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
<Text>
{`Dashboard`}
</Text>
</HStack>
</Link>
<Link as={NextLink} href={`/settings`} sx={{"width": "100%"}}>
<HStack sx={{"bg": isTrue((state.router.page.path === "/settings") || (((state.router.page.path === "/") && "Settings") === "Home")) ? `#fcd2e7` : `transparent`, "color": isTrue((state.router.page.path === "/settings") || (((state.router.page.path === "/") && "Settings") === "Home")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
<HStack sx={{"bg": isTrue((state.router.page.path === "/settings") || (((state.router.page.path === "/") && "Settings") === "Strona g\\u0142\\u00f3wna")) ? `#d9a2ca` : `transparent`, "color": isTrue((state.router.page.path === "/settings") || (((state.router.page.path === "/") && "Settings") === "Strona g\\u0142\\u00f3wna")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
<Text>
{`Settings`}
</Text>
@ -101,16 +101,10 @@ export default function Component() {
<Box sx={{"alignItems": "flex-start", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "borderRadius": "0.375rem", "padding": "1em", "marginBottom": "2em"}}>
<VStack>
<Heading sx={{"fontSize": "3em"}}>
{`Dashboard`}
{`BlurMe`}
</Heading>
<Text>
{`Welcome to Reflex!`}
</Text>
<Text>
{`You can edit this page in `}
<Code>
{`{your_app}/pages/dashboard.py`}
</Code>
{`Dodaj zdjęcia, które chcesz zanonimizować!`}
</Text>
</VStack>
</Box>
@ -121,28 +115,28 @@ export default function Component() {
<HamburgerIcon sx={{"size": "4em", "color": "black"}}/>
</MenuButton>
<MenuList>
<MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
<MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
<Link as={NextLink} href={`/`} sx={{"width": "100%"}}>
{`Strona główna`}
</Link>
</MenuItem>
<MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
<MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
<Link as={NextLink} href={`/dashboard`} sx={{"width": "100%"}}>
{`Dashboard`}
</Link>
</MenuItem>
<MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
<MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
<Link as={NextLink} href={`/settings`} sx={{"width": "100%"}}>
{`Settings`}
</Link>
</MenuItem>
<MenuDivider/>
<MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
<MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
<Link as={NextLink} href={`https://github.com/reflex-dev`} sx={{"width": "100%"}}>
{`About`}
</Link>
</MenuItem>
<MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
<MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
<Link as={NextLink} href={`mailto:founders@=reflex.dev`} sx={{"width": "100%"}}>
{`Contact`}
</Link>

39
.web/pages/index.js
View File

@ -3,7 +3,7 @@ import { useRouter } from "next/router"
import { Event, getAllLocalStorageItems, getRefValue, getRefValues, isTrue, preventDefault, refs, spreadArraysOrObjects, uploadFiles, useEventLoop } from "/utils/state"
import { ColorModeContext, EventLoopContext, initialEvents, StateContext } from "/utils/context.js"
import "focus-visible/dist/focus-visible"
import { Box, Heading, HStack, Image, Link, List, ListItem, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Modal, ModalBody, ModalContent, ModalHeader, ModalOverlay, OrderedList, Spacer, Text, VStack } from "@chakra-ui/react"
import { Box, Button, Heading, HStack, Image, Link, List, ListItem, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Modal, ModalBody, ModalContent, ModalHeader, ModalOverlay, OrderedList, Spacer, Text, VStack, Wrap, WrapItem } from "@chakra-ui/react"
import { getEventURL } from "/utils/state.js"
import NextLink from "next/link"
import { HamburgerIcon } from "@chakra-ui/icons"
@ -66,28 +66,28 @@ export default function Component() {
</Fragment>
<HStack alignItems={`flex-start`} sx={{"transition": "left 0.5s, width 0.5s", "position": "relative"}}>
<Box sx={{"display": ["none", "none", "block"], "minWidth": "20em", "height": "100%", "position": "sticky", "top": "0px", "borderRight": "1px solid #F4F3F6"}}>
<VStack sx={{"height": "100dvh"}}>
<VStack sx={{"height": "100%"}}>
<HStack sx={{"width": "100%", "borderBottom": "1px solid #F4F3F6", "padding": "1em"}}>
<Image src={`/icon.png`} sx={{"height": "4.5em"}}/>
<Spacer/>
</HStack>
<VStack alignItems={`flex-start`} sx={{"width": "100%", "overflowY": "auto", "padding": "1em"}}>
<Link as={NextLink} href={`/`} sx={{"width": "100%"}}>
<HStack sx={{"bg": isTrue((state.router.page.path === "/strona g\\u0142\\u00f3wna") || (((state.router.page.path === "/") && "Strona g\\u0142\\u00f3wna") === "Home")) ? `#fcd2e7` : `transparent`, "color": isTrue((state.router.page.path === "/strona g\\u0142\\u00f3wna") || (((state.router.page.path === "/") && "Strona g\\u0142\\u00f3wna") === "Home")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
<HStack sx={{"bg": isTrue((state.router.page.path === "/strona g\\u0142\\u00f3wna") || (((state.router.page.path === "/") && "Strona g\\u0142\\u00f3wna") === "Strona g\\u0142\\u00f3wna")) ? `#d9a2ca` : `transparent`, "color": isTrue((state.router.page.path === "/strona g\\u0142\\u00f3wna") || (((state.router.page.path === "/") && "Strona g\\u0142\\u00f3wna") === "Strona g\\u0142\\u00f3wna")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
<Text>
{`Strona główna`}
</Text>
</HStack>
</Link>
<Link as={NextLink} href={`/dashboard`} sx={{"width": "100%"}}>
<HStack sx={{"bg": isTrue((state.router.page.path === "/dashboard") || (((state.router.page.path === "/") && "Dashboard") === "Home")) ? `#fcd2e7` : `transparent`, "color": isTrue((state.router.page.path === "/dashboard") || (((state.router.page.path === "/") && "Dashboard") === "Home")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
<HStack sx={{"bg": isTrue((state.router.page.path === "/dashboard") || (((state.router.page.path === "/") && "Dashboard") === "Strona g\\u0142\\u00f3wna")) ? `#d9a2ca` : `transparent`, "color": isTrue((state.router.page.path === "/dashboard") || (((state.router.page.path === "/") && "Dashboard") === "Strona g\\u0142\\u00f3wna")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
<Text>
{`Dashboard`}
</Text>
</HStack>
</Link>
<Link as={NextLink} href={`/settings`} sx={{"width": "100%"}}>
<HStack sx={{"bg": isTrue((state.router.page.path === "/settings") || (((state.router.page.path === "/") && "Settings") === "Home")) ? `#fcd2e7` : `transparent`, "color": isTrue((state.router.page.path === "/settings") || (((state.router.page.path === "/") && "Settings") === "Home")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
<HStack sx={{"bg": isTrue((state.router.page.path === "/settings") || (((state.router.page.path === "/") && "Settings") === "Strona g\\u0142\\u00f3wna")) ? `#d9a2ca` : `transparent`, "color": isTrue((state.router.page.path === "/settings") || (((state.router.page.path === "/") && "Settings") === "Strona g\\u0142\\u00f3wna")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
<Text>
{`Settings`}
</Text>
@ -103,6 +103,23 @@ export default function Component() {
<Heading sx={{"fontSize": "3em", "marginBottom": "25px", "backgroundImage": "linear-gradient(271.68deg, #7566fe 0.75%, #f96caf 88.52%)", "backgroundClip": "text", "padding": "10px"}}>
{`Witaj w BlurMe!`}
</Heading>
<Wrap>
<WrapItem sx={{"flex-direction": "column", "w": "45%"}}>
<Text sx={{"fontSize": "1.2em"}}>
{`Aplikacja do anonimizacji zdjęć: usunięcie wybranych informacji identyfikujących ze zdjęć z wydarzeń i miejsc publicznych nigdy nie było tak proste!`}
</Text>
</WrapItem>
<WrapItem>
<Text>
{`Tu będzie obrazek`}
</Text>
</WrapItem>
</Wrap>
<Link as={NextLink} href={`settings`} sx={{"color": "rgb(107,99,246)", "button": true, "padding": "50xp", "fontSize": "1.2em"}}>
<Button>
{`Zacznij anonimizować`}
</Button>
</Link>
<Text sx={{"fontSize": "1.5em", "fontWeight": "bold", "marginTop": "10px", "marginBottom": "10px"}}>
{`Dlaczego Blurme?`}
</Text>
@ -115,7 +132,7 @@ export default function Component() {
</ListItem>
<ListItem>
<Text as={`b`}>
{`Prost obsługa: `}
{`Prosta obsługa: `}
</Text>
{`Intuicyjny interfejs użytkownika sprawia, że korzystanie z Blurme jest łatwe dla każdego.`}
</ListItem>
@ -190,28 +207,28 @@ export default function Component() {
<HamburgerIcon sx={{"size": "4em", "color": "black"}}/>
</MenuButton>
<MenuList>
<MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
<MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
<Link as={NextLink} href={`/`} sx={{"width": "100%"}}>
{`Strona główna`}
</Link>
</MenuItem>
<MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
<MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
<Link as={NextLink} href={`/dashboard`} sx={{"width": "100%"}}>
{`Dashboard`}
</Link>
</MenuItem>
<MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
<MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
<Link as={NextLink} href={`/settings`} sx={{"width": "100%"}}>
{`Settings`}
</Link>
</MenuItem>
<MenuDivider/>
<MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
<MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
<Link as={NextLink} href={`https://github.com/reflex-dev`} sx={{"width": "100%"}}>
{`About`}
</Link>
</MenuItem>
<MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
<MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
<Link as={NextLink} href={`mailto:founders@=reflex.dev`} sx={{"width": "100%"}}>
{`Contact`}
</Link>

30
.web/pages/settings.js
View File

@ -3,7 +3,7 @@ import { useRouter } from "next/router"
import { Event, getAllLocalStorageItems, getRefValue, getRefValues, isTrue, preventDefault, refs, spreadArraysOrObjects, uploadFiles, useEventLoop } from "/utils/state"
import { ColorModeContext, EventLoopContext, initialEvents, StateContext } from "/utils/context.js"
import "focus-visible/dist/focus-visible"
import { Box, Code, Heading, HStack, Image, Link, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Modal, ModalBody, ModalContent, ModalHeader, ModalOverlay, Spacer, Text, VStack } from "@chakra-ui/react"
import { Box, Heading, HStack, Image, Link, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Modal, ModalBody, ModalContent, ModalHeader, ModalOverlay, Spacer, Text, VStack } from "@chakra-ui/react"
import { getEventURL } from "/utils/state.js"
import NextLink from "next/link"
import { HamburgerIcon } from "@chakra-ui/icons"
@ -66,28 +66,28 @@ export default function Component() {
</Fragment>
<HStack alignItems={`flex-start`} sx={{"transition": "left 0.5s, width 0.5s", "position": "relative"}}>
<Box sx={{"display": ["none", "none", "block"], "minWidth": "20em", "height": "100%", "position": "sticky", "top": "0px", "borderRight": "1px solid #F4F3F6"}}>
<VStack sx={{"height": "100dvh"}}>
<VStack sx={{"height": "100%"}}>
<HStack sx={{"width": "100%", "borderBottom": "1px solid #F4F3F6", "padding": "1em"}}>
<Image src={`/icon.png`} sx={{"height": "4.5em"}}/>
<Spacer/>
</HStack>
<VStack alignItems={`flex-start`} sx={{"width": "100%", "overflowY": "auto", "padding": "1em"}}>
<Link as={NextLink} href={`/`} sx={{"width": "100%"}}>
<HStack sx={{"bg": isTrue((state.router.page.path === "/strona g\\u0142\\u00f3wna") || (((state.router.page.path === "/") && "Strona g\\u0142\\u00f3wna") === "Home")) ? `#fcd2e7` : `transparent`, "color": isTrue((state.router.page.path === "/strona g\\u0142\\u00f3wna") || (((state.router.page.path === "/") && "Strona g\\u0142\\u00f3wna") === "Home")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
<HStack sx={{"bg": isTrue((state.router.page.path === "/strona g\\u0142\\u00f3wna") || (((state.router.page.path === "/") && "Strona g\\u0142\\u00f3wna") === "Strona g\\u0142\\u00f3wna")) ? `#d9a2ca` : `transparent`, "color": isTrue((state.router.page.path === "/strona g\\u0142\\u00f3wna") || (((state.router.page.path === "/") && "Strona g\\u0142\\u00f3wna") === "Strona g\\u0142\\u00f3wna")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
<Text>
{`Strona główna`}
</Text>
</HStack>
</Link>
<Link as={NextLink} href={`/dashboard`} sx={{"width": "100%"}}>
<HStack sx={{"bg": isTrue((state.router.page.path === "/dashboard") || (((state.router.page.path === "/") && "Dashboard") === "Home")) ? `#fcd2e7` : `transparent`, "color": isTrue((state.router.page.path === "/dashboard") || (((state.router.page.path === "/") && "Dashboard") === "Home")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
<HStack sx={{"bg": isTrue((state.router.page.path === "/dashboard") || (((state.router.page.path === "/") && "Dashboard") === "Strona g\\u0142\\u00f3wna")) ? `#d9a2ca` : `transparent`, "color": isTrue((state.router.page.path === "/dashboard") || (((state.router.page.path === "/") && "Dashboard") === "Strona g\\u0142\\u00f3wna")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
<Text>
{`Dashboard`}
</Text>
</HStack>
</Link>
<Link as={NextLink} href={`/settings`} sx={{"width": "100%"}}>
<HStack sx={{"bg": isTrue((state.router.page.path === "/settings") || (((state.router.page.path === "/") && "Settings") === "Home")) ? `#fcd2e7` : `transparent`, "color": isTrue((state.router.page.path === "/settings") || (((state.router.page.path === "/") && "Settings") === "Home")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
<HStack sx={{"bg": isTrue((state.router.page.path === "/settings") || (((state.router.page.path === "/") && "Settings") === "Strona g\\u0142\\u00f3wna")) ? `#d9a2ca` : `transparent`, "color": isTrue((state.router.page.path === "/settings") || (((state.router.page.path === "/") && "Settings") === "Strona g\\u0142\\u00f3wna")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
<Text>
{`Settings`}
</Text>
@ -101,16 +101,10 @@ export default function Component() {
<Box sx={{"alignItems": "flex-start", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "borderRadius": "0.375rem", "padding": "1em", "marginBottom": "2em"}}>
<VStack>
<Heading sx={{"fontSize": "3em"}}>
{`Settings`}
{`BlurMe`}
</Heading>
<Text>
{`Welcome to Reflex!`}
</Text>
<Text>
{`You can edit this page in `}
<Code>
{`{your_app}/pages/settings.py`}
</Code>
{`Dodaj zdjęcia, które chcesz zanonimizować!`}
</Text>
</VStack>
</Box>
@ -121,28 +115,28 @@ export default function Component() {
<HamburgerIcon sx={{"size": "4em", "color": "black"}}/>
</MenuButton>
<MenuList>
<MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
<MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
<Link as={NextLink} href={`/`} sx={{"width": "100%"}}>
{`Strona główna`}
</Link>
</MenuItem>
<MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
<MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
<Link as={NextLink} href={`/dashboard`} sx={{"width": "100%"}}>
{`Dashboard`}
</Link>
</MenuItem>
<MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
<MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
<Link as={NextLink} href={`/settings`} sx={{"width": "100%"}}>
{`Settings`}
</Link>
</MenuItem>
<MenuDivider/>
<MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
<MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
<Link as={NextLink} href={`https://github.com/reflex-dev`} sx={{"width": "100%"}}>
{`About`}
</Link>
</MenuItem>
<MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
<MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
<Link as={NextLink} href={`mailto:founders@=reflex.dev`} sx={{"width": "100%"}}>
{`Contact`}
</Link>

10
blurme/components/sidebar.py
View File

@ -7,11 +7,6 @@ import reflex as rx
def sidebar_header() -> rx.Component:
"""Sidebar header.
Returns:
The sidebar header component.
"""
return rx.hstack(
# The logo.
rx.image(
@ -19,7 +14,6 @@ def sidebar_header() -> rx.Component:
height="4.5em",
),
rx.spacer(),
# Link to Reflex GitHub repo.
width="100%",
border_bottom=styles.border,
padding="1em",
@ -61,7 +55,7 @@ def sidebar_item(text: str, url: str) -> rx.Component:
"""
# Whether the item is active.
active = (State.router.page.path == f"/{text.lower()}") | (
(State.router.page.path == "/") & text == "Home"
(State.router.page.path == "/") & text == "Strona główna"
)
return rx.link(
@ -123,7 +117,7 @@ def sidebar() -> rx.Component:
),
rx.spacer(),
#sidebar_footer(),
height="100dvh",
height="100%",
),
display=["none", "none", "block"],
min_width=styles.sidebar_width,

12
blurme/pages/dashboard.py
View File

@ -11,11 +11,7 @@ def dashboard() -> rx.Component:
Returns:
The UI for the dashboard page.
"""
return rx.vstack(
rx.heading("Dashboard", font_size="3em"),
rx.text("Welcome to Reflex!"),
rx.text(
"You can edit this page in ",
rx.code("{your_app}/pages/dashboard.py"),
),
)
#return rx.vstack(
# rx.heading("BlurMe", font_size="3em"),
# rx.text("Dodaj zdjęcia, które chcesz zanonimizować!"),
#)

16
blurme/pages/index.py
View File

@ -5,20 +5,20 @@ from blurme.templates import template
import reflex as rx
@template(route="/", title="Strona główna", image="/github.svg")
def index() -> rx.Component:
"""The home page.
Returns:
The UI for the home page.
"""
return rx.vstack(
rx.heading("Witaj w 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("Dlaczego Blurme?", font_size="1.5em", font_weight="bold", margin_top="10px", margin_bottom="10px"),
rx.wrap(
rx.wrap_item(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"),
w="45%",style={"flex-direction": "column"}),
rx.wrap_item(rx.text("Tu będzie obrazek"),)
),
rx.link(rx.button("Zacznij anonimizować"),href= "settings",color="rgb(107,99,246)",button=True, padding = "50xp", font_size="1.2em"),
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("Prost obsługa: ",as_="b"),"Intuicyjny interfejs użytkownika sprawia, że korzystanie z Blurme jest łatwe dla każdego."),
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"),

12
blurme/pages/settings.py
View File

@ -13,10 +13,10 @@ def settings() -> rx.Component:
The UI for the settings page.
"""
return rx.vstack(
rx.heading("Settings", font_size="3em"),
rx.text("Welcome to Reflex!"),
rx.text(
"You can edit this page in ",
rx.code("{your_app}/pages/settings.py"),
),
rx.heading("BlurMe", font_size="3em"),
rx.text("Dodaj zdjęcia, które chcesz zanonimizować!"),
)
# rx.text(
# "You can edit this page in ",
# rx.code("{your_app}/pages/settings.py"),
# ),

2
blurme/styles.py
View File

@ -7,7 +7,7 @@ box_shadow = "0px 0px 0px 1px rgba(84, 82, 95, 0.14)"
border = "1px solid #F4F3F6"
text_color = "black"
accent_text_color = "#1A1060"
accent_color = "#fcd2e7"
accent_color = "#d9a2ca"
hover_accent_color = {"_hover": {"color": accent_color}}
hover_accent_bg = {"_hover": {"bg": accent_color}}
content_width_vw = "90vw"