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

BLUR-24 Button, prost. do uploadu zdjęć,stylistyka

Browse Source
This commit is contained in:
markrz12 2023-11-17 20:25:22 +01:00
parent 01fde35844
commit 4eef3fd593
11 changed files with 133 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
.web/package-lock.json generated
View File

@ -20,6 +20,7 @@
"next-themes": "0.2.0", "next-themes": "0.2.0",
"react": "18.2.0", "react": "18.2.0",
"react-dom": "18.2.0", "react-dom": "18.2.0",
"react-dropzone": "^14.2.3",
"socket.io-client": "4.6.1", "socket.io-client": "4.6.1",
"tailwindcss": "^3.3.2", "tailwindcss": "^3.3.2",
"universal-cookie": "4.0.4" "universal-cookie": "4.0.4"
@ -1764,6 +1765,14 @@
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
}, },
"node_modules/attr-accept": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz",
"integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==",
"engines": {
"node": ">=4"
}
},
"node_modules/autoprefixer": { "node_modules/autoprefixer": {
"version": "10.4.14", "version": "10.4.14",
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz", "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
@ -2215,6 +2224,17 @@
"reusify": "^1.0.4" "reusify": "^1.0.4"
} }
}, },
"node_modules/file-selector": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz",
"integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
"dependencies": {
"tslib": "^2.4.0"
},
"engines": {
"node": ">= 12"
}
},
"node_modules/fill-range": { "node_modules/fill-range": {
"version": "7.0.1", "version": "7.0.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@ -3096,6 +3116,22 @@
"react": "^18.2.0" "react": "^18.2.0"
} }
}, },
"node_modules/react-dropzone": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz",
"integrity": "sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==",
"dependencies": {
"attr-accept": "^2.2.2",
"file-selector": "^0.6.0",
"prop-types": "^15.8.1"
},
"engines": {
"node": ">= 10.13"
},
"peerDependencies": {
"react": ">= 16.8 || 18.0.0"
}
},
"node_modules/react-fast-compare": { "node_modules/react-fast-compare": {
"version": "3.2.1", "version": "3.2.1",
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.1.tgz", "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.1.tgz",

1
.web/package.json
View File

@ -21,6 +21,7 @@
"next-themes": "0.2.0", "next-themes": "0.2.0",
"react": "18.2.0", "react": "18.2.0",
"react-dom": "18.2.0", "react-dom": "18.2.0",
"react-dropzone": "^14.2.3",
"socket.io-client": "4.6.1", "socket.io-client": "4.6.1",
"tailwindcss": "^3.3.2", "tailwindcss": "^3.3.2",
"universal-cookie": "4.0.4" "universal-cookie": "4.0.4"

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 Error from "next/error"
import { useClientSideRouting } from "/utils/client_side_routing" import { useClientSideRouting } from "/utils/client_side_routing"
import Error from "next/error"
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, Heading, HStack, Image, Link, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Modal, ModalBody, ModalContent, ModalHeader, ModalOverlay, Spacer, Text, VStack } from "@chakra-ui/react" 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 { 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": "100%"}}> <VStack sx={{"height": "100dvh"}}>
<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") === "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"}}> <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"}}>
<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") === "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"}}> <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"}}>
<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") === "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"}}> <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"}}>
<Text> <Text>
{`Settings`} {`Settings`}
</Text> </Text>
@ -101,10 +101,16 @@ 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"}}>
{`BlurMe`} {`Dashboard`}
</Heading> </Heading>
<Text> <Text>
{`Dodaj zdjęcia, które chcesz zanonimizować!`} {`Welcome to Reflex!`}
</Text>
<Text>
{`You can edit this page in `}
<Code>
{`{your_app}/pages/dashboard.py`}
</Code>
</Text> </Text>
</VStack> </VStack>
</Box> </Box>
@ -115,28 +121,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": "#d9a2ca"}}}> <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
<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": "#d9a2ca"}}}> <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
<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": "#d9a2ca"}}}> <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
<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": "#d9a2ca"}}}> <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
<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": "#d9a2ca"}}}> <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
<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>

33
.web/pages/index.js
View File

@ -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": "100%"}}> <VStack sx={{"height": "100dvh"}}>
<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") === "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"}}> <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"}}>
<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") === "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"}}> <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"}}>
<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") === "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"}}> <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"}}>
<Text> <Text>
{`Settings`} {`Settings`}
</Text> </Text>
@ -104,22 +104,23 @@ export default function Component() {
{`Witaj w BlurMe!`} {`Witaj w BlurMe!`}
</Heading> </Heading>
<Wrap> <Wrap>
<WrapItem sx={{"flex-direction": "column", "w": "45%"}}> <WrapItem sx={{"flex-direction": "row", "margin-left": "20px"}}>
<Text sx={{"fontSize": "1.2em"}}> <Text sx={{"margin-left": "15px", "fontSize": "1.2em", "w": "45%"}}>
{`Aplikacja do anonimizacji zdjęć: usunięcie wybranych informacji identyfikujących ze zdjęć z wydarzeń i miejsc publicznych nigdy nie było tak proste!`} {`Aplikacja do anonimizacji zdjęć: usunięcie wybranych informacji identyfikujących ze zdjęć z wydarzeń i miejsc publicznych nigdy nie było tak proste!`}
</Text> </Text>
</WrapItem>
<WrapItem>
<Text> <Text>
{`Tu będzie obrazek`} {`Tu będzie obrazek`}
</Text> </Text>
</WrapItem> </WrapItem>
</Wrap> </Wrap>
<Link as={NextLink} href={`settings`} sx={{"color": "rgb(107,99,246)", "button": true, "padding": "50xp", "fontSize": "1.2em"}}> <Link as={NextLink} href={`settings`} sx={{"margin-top": "20px", "align": "center", "color": "rgb(107,99,246)", "button": true, "padding": "50xp", "fontSize": "1.2em"}}>
<Button> <Button>
{`Zacznij anonimizować`} {`Zacznij anonimizować`}
</Button> </Button>
</Link> </Link>
<Text sx={{"height": "100px"}}>
{` `}
</Text>
<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>
@ -132,7 +133,7 @@ export default function Component() {
</ListItem> </ListItem>
<ListItem> <ListItem>
<Text as={`b`}> <Text as={`b`}>
{`Prosta obsługa: `} {`Prost 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>
@ -173,7 +174,7 @@ export default function Component() {
</ListItem> </ListItem>
</OrderedList> </OrderedList>
<Text sx={{"fontSize": "1.5em", "fontWeight": "bold", "marginTop": "20px", "marginBottom": "10px"}}> <Text sx={{"fontSize": "1.5em", "fontWeight": "bold", "marginTop": "20px", "marginBottom": "10px"}}>
{`Do Czego Może Ci Się Przydać?`} {`Do Czego?`}
</Text> </Text>
<List> <List>
<ListItem sx={{"textAlign": "left"}}> <ListItem sx={{"textAlign": "left"}}>
@ -207,28 +208,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": "#d9a2ca"}}}> <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
<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": "#d9a2ca"}}}> <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
<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": "#d9a2ca"}}}> <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
<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": "#d9a2ca"}}}> <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
<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": "#d9a2ca"}}}> <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
<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>

40
.web/pages/settings.js
View File

@ -1,11 +1,12 @@
import { Fragment, useContext, useEffect, useRef, useState } from "react" import { Fragment, useContext, useEffect, useRef, useState } from "react"
import { useRouter } from "next/router" 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, set_val, 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, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Modal, ModalBody, ModalContent, ModalHeader, ModalOverlay, Spacer, Text, VStack } from "@chakra-ui/react" import { Box, Heading, HStack, Image, Input, 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 ReactDropzone from "react-dropzone"
import { HamburgerIcon } from "@chakra-ui/icons" import { HamburgerIcon } from "@chakra-ui/icons"
import NextHead from "next/head" import NextHead from "next/head"
@ -36,6 +37,7 @@ export default function Component() {
} }
}, [router]) }, [router])
const [files, setFiles] = useState([]);
return ( return (
<Fragment> <Fragment>
@ -66,28 +68,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": "100%"}}> <VStack sx={{"height": "100dvh"}}>
<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") === "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"}}> <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"}}>
<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") === "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"}}> <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"}}>
<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") === "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"}}> <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"}}>
<Text> <Text>
{`Settings`} {`Settings`}
</Text> </Text>
@ -100,12 +102,22 @@ export default function Component() {
<Box sx={{"paddingTop": "5em", "paddingX": ["auto", "2em"], "flex": "1"}}> <Box sx={{"paddingTop": "5em", "paddingX": ["auto", "2em"], "flex": "1"}}>
<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", "marginBottom": "25px", "backgroundImage": "linear-gradient(271.68deg, #7566fe 0.75%, #f96caf 88.52%)", "backgroundClip": "text", "padding": "10px"}}>
{`BlurMe`} {`BlurMe`}
</Heading> </Heading>
<Text> <Text sx={{"fontSize": "1.2em"}}>
{`Dodaj zdjęcia, które chcesz zanonimizować!`} {`Dodaj zdjęcie, które chcesz zanonimizować`}
</Text> </Text>
<ReactDropzone multiple={true} onDrop={e => setFiles((files) => e)}>
{({ getRootProps, getInputProps }) => (
<Box sx={{"border": "1px dotted rgb(107,99,246)", "padding": "5em"}} {...getRootProps()}>
<Input type={`file`} {...getInputProps()}/>
<Text>
{`Drag and drop files here or click to select files`}
</Text>
</Box>
)}
</ReactDropzone>
</VStack> </VStack>
</Box> </Box>
</Box> </Box>
@ -115,28 +127,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": "#d9a2ca"}}}> <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
<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": "#d9a2ca"}}}> <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
<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": "#d9a2ca"}}}> <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
<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": "#d9a2ca"}}}> <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
<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": "#d9a2ca"}}}> <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
<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,6 +7,11 @@ 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(
@ -14,6 +19,7 @@ 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",
@ -55,7 +61,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 == "Strona główna" (State.router.page.path == "/") & text == "Home"
) )
return rx.link( return rx.link(
@ -117,7 +123,7 @@ def sidebar() -> rx.Component:
), ),
rx.spacer(), rx.spacer(),
#sidebar_footer(), #sidebar_footer(),
height="100%", height="100dvh",
), ),
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,7 +11,11 @@ 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("BlurMe", font_size="3em"), rx.heading("Dashboard", font_size="3em"),
# rx.text("Dodaj zdjęcia, które chcesz zanonimizować!"), rx.text("Welcome to Reflex!"),
#) rx.text(
"You can edit this page in ",
rx.code("{your_app}/pages/dashboard.py"),
),
)

20
blurme/pages/index.py
View File

@ -9,13 +9,17 @@ import reflex as rx
def index() -> rx.Component: def index() -> rx.Component:
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.wrap( 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"), 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={"margin-left": "15px"}),
w="45%",style={"flex-direction": "column"}), rx.text("Tu będzie obrazek"), style={"flex-direction": "row", "margin-left": "20px"}),),
rx.wrap_item(rx.text("Tu będzie obrazek"),)
), rx.link(
rx.link(rx.button("Zacznij anonimizować"),href= "settings",color="rgb(107,99,246)",button=True, padding = "50xp", font_size="1.2em"), rx.button("Zacznij anonimizować"),
rx.text("Dlaczego Blurme?", font_size="1.5em", font_weight="bold", margin_top="10px", margin_bottom="10px"), href="settings",align="center",color="rgb(107,99,246)",button=True,padding="50xp",font_size="1.2em",style={"margin-top": "20px" }),
rx.text(" ", height = "100px"),
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("Prosta 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."),
@ -28,7 +32,7 @@ def index() -> rx.Component:
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("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.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 Może Ci Się Przydać?", font_size="1.5em", font_weight="bold", margin_top="20px", margin_bottom="10px"), rx.text("Do Czego?", font_size="1.5em", font_weight="bold", margin_top="20px", margin_bottom="10px"),
rx.list( 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("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("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"),

18
blurme/pages/settings.py
View File

@ -4,19 +4,11 @@ from blurme.templates import template
import reflex as rx import reflex as rx
@template(route="/settings", title="Settings") @template(route="/settings", title="Settings")
def settings() -> rx.Component: def settings() -> rx.Component:
"""The settings page.
Returns:
The UI for the settings page.
"""
return rx.vstack( return rx.vstack(
rx.heading("BlurMe", font_size="3em"), 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ęcia, które chcesz zanonimizować!"), 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.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 = "#d9a2ca" accent_color = "#fcd2e7"
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"