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

wrap items

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 "focus-visible/dist/focus-visible"
import { Modal, ModalBody, ModalContent, ModalHeader, ModalOverlay, Text } from "@chakra-ui/react" import { Modal, ModalBody, ModalContent, ModalHeader, ModalOverlay, Text } from "@chakra-ui/react"
import { getEventURL } from "/utils/state.js" import { getEventURL } from "/utils/state.js"
import { useClientSideRouting } from "/utils/client_side_routing"
import Error from "next/error" import Error from "next/error"
import { useClientSideRouting } from "/utils/client_side_routing"
import NextHead from "next/head" 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 { Event, getAllLocalStorageItems, getRefValue, getRefValues, isTrue, preventDefault, refs, spreadArraysOrObjects, uploadFiles, useEventLoop } from "/utils/state"
import { ColorModeContext, EventLoopContext, initialEvents, StateContext } from "/utils/context.js" import { ColorModeContext, EventLoopContext, initialEvents, StateContext } from "/utils/context.js"
import "focus-visible/dist/focus-visible" 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 { getEventURL } from "/utils/state.js"
import NextLink from "next/link" import NextLink from "next/link"
import { HamburgerIcon } from "@chakra-ui/icons" import { HamburgerIcon } from "@chakra-ui/icons"
@ -66,28 +66,28 @@ export default function Component() {
</Fragment> </Fragment>
<HStack alignItems={`flex-start`} sx={{"transition": "left 0.5s, width 0.5s", "position": "relative"}}> <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"}}> <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"}}> <HStack sx={{"width": "100%", "borderBottom": "1px solid #F4F3F6", "padding": "1em"}}>
<Image src={`/icon.png`} sx={{"height": "4.5em"}}/> <Image src={`/icon.png`} sx={{"height": "4.5em"}}/>
<Spacer/> <Spacer/>
</HStack> </HStack>
<VStack alignItems={`flex-start`} sx={{"width": "100%", "overflowY": "auto", "padding": "1em"}}> <VStack alignItems={`flex-start`} sx={{"width": "100%", "overflowY": "auto", "padding": "1em"}}>
<Link as={NextLink} href={`/`} sx={{"width": "100%"}}> <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> <Text>
{`Strona główna`} {`Strona główna`}
</Text> </Text>
</HStack> </HStack>
</Link> </Link>
<Link as={NextLink} href={`/dashboard`} sx={{"width": "100%"}}> <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> <Text>
{`Dashboard`} {`Dashboard`}
</Text> </Text>
</HStack> </HStack>
</Link> </Link>
<Link as={NextLink} href={`/settings`} sx={{"width": "100%"}}> <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> <Text>
{`Settings`} {`Settings`}
</Text> </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"}}> <Box sx={{"alignItems": "flex-start", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "borderRadius": "0.375rem", "padding": "1em", "marginBottom": "2em"}}>
<VStack> <VStack>
<Heading sx={{"fontSize": "3em"}}> <Heading sx={{"fontSize": "3em"}}>
{`Dashboard`} {`BlurMe`}
</Heading> </Heading>
<Text> <Text>
{`Welcome to Reflex!`} {`Dodaj zdjęcia, które chcesz zanonimizować!`}
</Text>
<Text>
{`You can edit this page in `}
<Code>
{`{your_app}/pages/dashboard.py`}
</Code>
</Text> </Text>
</VStack> </VStack>
</Box> </Box>
@ -121,28 +115,28 @@ export default function Component() {
<HamburgerIcon sx={{"size": "4em", "color": "black"}}/> <HamburgerIcon sx={{"size": "4em", "color": "black"}}/>
</MenuButton> </MenuButton>
<MenuList> <MenuList>
<MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}> <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
<Link as={NextLink} href={`/`} sx={{"width": "100%"}}> <Link as={NextLink} href={`/`} sx={{"width": "100%"}}>
{`Strona główna`} {`Strona główna`}
</Link> </Link>
</MenuItem> </MenuItem>
<MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}> <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
<Link as={NextLink} href={`/dashboard`} sx={{"width": "100%"}}> <Link as={NextLink} href={`/dashboard`} sx={{"width": "100%"}}>
{`Dashboard`} {`Dashboard`}
</Link> </Link>
</MenuItem> </MenuItem>
<MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}> <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
<Link as={NextLink} href={`/settings`} sx={{"width": "100%"}}> <Link as={NextLink} href={`/settings`} sx={{"width": "100%"}}>
{`Settings`} {`Settings`}
</Link> </Link>
</MenuItem> </MenuItem>
<MenuDivider/> <MenuDivider/>
<MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}> <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
<Link as={NextLink} href={`https://github.com/reflex-dev`} sx={{"width": "100%"}}> <Link as={NextLink} href={`https://github.com/reflex-dev`} sx={{"width": "100%"}}>
{`About`} {`About`}
</Link> </Link>
</MenuItem> </MenuItem>
<MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}> <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
<Link as={NextLink} href={`mailto:founders@=reflex.dev`} sx={{"width": "100%"}}> <Link as={NextLink} href={`mailto:founders@=reflex.dev`} sx={{"width": "100%"}}>
{`Contact`} {`Contact`}
</Link> </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 { Event, getAllLocalStorageItems, getRefValue, getRefValues, isTrue, preventDefault, refs, spreadArraysOrObjects, uploadFiles, useEventLoop } from "/utils/state"
import { ColorModeContext, EventLoopContext, initialEvents, StateContext } from "/utils/context.js" import { ColorModeContext, EventLoopContext, initialEvents, StateContext } from "/utils/context.js"
import "focus-visible/dist/focus-visible" 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 { getEventURL } from "/utils/state.js"
import NextLink from "next/link" import NextLink from "next/link"
import { HamburgerIcon } from "@chakra-ui/icons" import { HamburgerIcon } from "@chakra-ui/icons"
@ -66,28 +66,28 @@ export default function Component() {
</Fragment> </Fragment>
<HStack alignItems={`flex-start`} sx={{"transition": "left 0.5s, width 0.5s", "position": "relative"}}> <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"}}> <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"}}> <HStack sx={{"width": "100%", "borderBottom": "1px solid #F4F3F6", "padding": "1em"}}>
<Image src={`/icon.png`} sx={{"height": "4.5em"}}/> <Image src={`/icon.png`} sx={{"height": "4.5em"}}/>
<Spacer/> <Spacer/>
</HStack> </HStack>
<VStack alignItems={`flex-start`} sx={{"width": "100%", "overflowY": "auto", "padding": "1em"}}> <VStack alignItems={`flex-start`} sx={{"width": "100%", "overflowY": "auto", "padding": "1em"}}>
<Link as={NextLink} href={`/`} sx={{"width": "100%"}}> <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> <Text>
{`Strona główna`} {`Strona główna`}
</Text> </Text>
</HStack> </HStack>
</Link> </Link>
<Link as={NextLink} href={`/dashboard`} sx={{"width": "100%"}}> <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> <Text>
{`Dashboard`} {`Dashboard`}
</Text> </Text>
</HStack> </HStack>
</Link> </Link>
<Link as={NextLink} href={`/settings`} sx={{"width": "100%"}}> <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> <Text>
{`Settings`} {`Settings`}
</Text> </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"}}> <Heading sx={{"fontSize": "3em", "marginBottom": "25px", "backgroundImage": "linear-gradient(271.68deg, #7566fe 0.75%, #f96caf 88.52%)", "backgroundClip": "text", "padding": "10px"}}>
{`Witaj w BlurMe!`} {`Witaj w BlurMe!`}
</Heading> </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"}}> <Text sx={{"fontSize": "1.5em", "fontWeight": "bold", "marginTop": "10px", "marginBottom": "10px"}}>
{`Dlaczego Blurme?`} {`Dlaczego Blurme?`}
</Text> </Text>
@ -115,7 +132,7 @@ export default function Component() {
</ListItem> </ListItem>
<ListItem> <ListItem>
<Text as={`b`}> <Text as={`b`}>
{`Prost obsługa: `} {`Prosta obsługa: `}
</Text> </Text>
{`Intuicyjny interfejs użytkownika sprawia, że korzystanie z Blurme jest łatwe dla każdego.`} {`Intuicyjny interfejs użytkownika sprawia, że korzystanie z Blurme jest łatwe dla każdego.`}
</ListItem> </ListItem>
@ -190,28 +207,28 @@ export default function Component() {
<HamburgerIcon sx={{"size": "4em", "color": "black"}}/> <HamburgerIcon sx={{"size": "4em", "color": "black"}}/>
</MenuButton> </MenuButton>
<MenuList> <MenuList>
<MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}> <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
<Link as={NextLink} href={`/`} sx={{"width": "100%"}}> <Link as={NextLink} href={`/`} sx={{"width": "100%"}}>
{`Strona główna`} {`Strona główna`}
</Link> </Link>
</MenuItem> </MenuItem>
<MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}> <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
<Link as={NextLink} href={`/dashboard`} sx={{"width": "100%"}}> <Link as={NextLink} href={`/dashboard`} sx={{"width": "100%"}}>
{`Dashboard`} {`Dashboard`}
</Link> </Link>
</MenuItem> </MenuItem>
<MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}> <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
<Link as={NextLink} href={`/settings`} sx={{"width": "100%"}}> <Link as={NextLink} href={`/settings`} sx={{"width": "100%"}}>
{`Settings`} {`Settings`}
</Link> </Link>
</MenuItem> </MenuItem>
<MenuDivider/> <MenuDivider/>
<MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}> <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
<Link as={NextLink} href={`https://github.com/reflex-dev`} sx={{"width": "100%"}}> <Link as={NextLink} href={`https://github.com/reflex-dev`} sx={{"width": "100%"}}>
{`About`} {`About`}
</Link> </Link>
</MenuItem> </MenuItem>
<MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}> <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
<Link as={NextLink} href={`mailto:founders@=reflex.dev`} sx={{"width": "100%"}}> <Link as={NextLink} href={`mailto:founders@=reflex.dev`} sx={{"width": "100%"}}>
{`Contact`} {`Contact`}
</Link> </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 { Event, getAllLocalStorageItems, getRefValue, getRefValues, isTrue, preventDefault, refs, spreadArraysOrObjects, uploadFiles, useEventLoop } from "/utils/state"
import { ColorModeContext, EventLoopContext, initialEvents, StateContext } from "/utils/context.js" import { ColorModeContext, EventLoopContext, initialEvents, StateContext } from "/utils/context.js"
import "focus-visible/dist/focus-visible" 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 { getEventURL } from "/utils/state.js"
import NextLink from "next/link" import NextLink from "next/link"
import { HamburgerIcon } from "@chakra-ui/icons" import { HamburgerIcon } from "@chakra-ui/icons"
@ -66,28 +66,28 @@ export default function Component() {
</Fragment> </Fragment>
<HStack alignItems={`flex-start`} sx={{"transition": "left 0.5s, width 0.5s", "position": "relative"}}> <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"}}> <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"}}> <HStack sx={{"width": "100%", "borderBottom": "1px solid #F4F3F6", "padding": "1em"}}>
<Image src={`/icon.png`} sx={{"height": "4.5em"}}/> <Image src={`/icon.png`} sx={{"height": "4.5em"}}/>
<Spacer/> <Spacer/>
</HStack> </HStack>
<VStack alignItems={`flex-start`} sx={{"width": "100%", "overflowY": "auto", "padding": "1em"}}> <VStack alignItems={`flex-start`} sx={{"width": "100%", "overflowY": "auto", "padding": "1em"}}>
<Link as={NextLink} href={`/`} sx={{"width": "100%"}}> <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> <Text>
{`Strona główna`} {`Strona główna`}
</Text> </Text>
</HStack> </HStack>
</Link> </Link>
<Link as={NextLink} href={`/dashboard`} sx={{"width": "100%"}}> <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> <Text>
{`Dashboard`} {`Dashboard`}
</Text> </Text>
</HStack> </HStack>
</Link> </Link>
<Link as={NextLink} href={`/settings`} sx={{"width": "100%"}}> <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> <Text>
{`Settings`} {`Settings`}
</Text> </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"}}> <Box sx={{"alignItems": "flex-start", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "borderRadius": "0.375rem", "padding": "1em", "marginBottom": "2em"}}>
<VStack> <VStack>
<Heading sx={{"fontSize": "3em"}}> <Heading sx={{"fontSize": "3em"}}>
{`Settings`} {`BlurMe`}
</Heading> </Heading>
<Text> <Text>
{`Welcome to Reflex!`} {`Dodaj zdjęcia, które chcesz zanonimizować!`}
</Text>
<Text>
{`You can edit this page in `}
<Code>
{`{your_app}/pages/settings.py`}
</Code>
</Text> </Text>
</VStack> </VStack>
</Box> </Box>
@ -121,28 +115,28 @@ export default function Component() {
<HamburgerIcon sx={{"size": "4em", "color": "black"}}/> <HamburgerIcon sx={{"size": "4em", "color": "black"}}/>
</MenuButton> </MenuButton>
<MenuList> <MenuList>
<MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}> <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
<Link as={NextLink} href={`/`} sx={{"width": "100%"}}> <Link as={NextLink} href={`/`} sx={{"width": "100%"}}>
{`Strona główna`} {`Strona główna`}
</Link> </Link>
</MenuItem> </MenuItem>
<MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}> <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
<Link as={NextLink} href={`/dashboard`} sx={{"width": "100%"}}> <Link as={NextLink} href={`/dashboard`} sx={{"width": "100%"}}>
{`Dashboard`} {`Dashboard`}
</Link> </Link>
</MenuItem> </MenuItem>
<MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}> <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
<Link as={NextLink} href={`/settings`} sx={{"width": "100%"}}> <Link as={NextLink} href={`/settings`} sx={{"width": "100%"}}>
{`Settings`} {`Settings`}
</Link> </Link>
</MenuItem> </MenuItem>
<MenuDivider/> <MenuDivider/>
<MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}> <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
<Link as={NextLink} href={`https://github.com/reflex-dev`} sx={{"width": "100%"}}> <Link as={NextLink} href={`https://github.com/reflex-dev`} sx={{"width": "100%"}}>
{`About`} {`About`}
</Link> </Link>
</MenuItem> </MenuItem>
<MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}> <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
<Link as={NextLink} href={`mailto:founders@=reflex.dev`} sx={{"width": "100%"}}> <Link as={NextLink} href={`mailto:founders@=reflex.dev`} sx={{"width": "100%"}}>
{`Contact`} {`Contact`}
</Link> </Link>

10
blurme/components/sidebar.py
View File

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

12
blurme/pages/dashboard.py
View File

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

16
blurme/pages/index.py
View File

@ -5,20 +5,20 @@ from blurme.templates import template
import reflex as rx import reflex as rx
@template(route="/", title="Strona główna", image="/github.svg") @template(route="/", title="Strona główna", image="/github.svg")
def index() -> rx.Component: def index() -> rx.Component:
"""The home page.
Returns:
The UI for the home page.
"""
return rx.vstack( 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.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(
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("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."), 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"), text_align="left"),
rx.text("Jak to działa?", font_size="1.5em", font_weight="bold", margin_top="20px", margin_bottom="10px"), 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. The UI for the settings page.
""" """
return rx.vstack( return rx.vstack(
rx.heading("Settings", font_size="3em"), rx.heading("BlurMe", font_size="3em"),
rx.text("Welcome to Reflex!"), rx.text("Dodaj zdjęcia, które chcesz zanonimizować!"),
rx.text(
"You can edit this page in ",
rx.code("{your_app}/pages/settings.py"),
),
) )
# 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" border = "1px solid #F4F3F6"
text_color = "black" text_color = "black"
accent_text_color = "#1A1060" accent_text_color = "#1A1060"
accent_color = "#fcd2e7" accent_color = "#d9a2ca"
hover_accent_color = {"_hover": {"color": accent_color}} hover_accent_color = {"_hover": {"color": accent_color}}
hover_accent_bg = {"_hover": {"bg": accent_color}} hover_accent_bg = {"_hover": {"bg": accent_color}}
content_width_vw = "90vw" content_width_vw = "90vw"