280 lines
11 KiB
JavaScript
280 lines
11 KiB
JavaScript
import { Fragment, useContext, useEffect, useRef, useState } from "react"
|
|
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, Button, Flex, Heading, HStack, Image, Link, List, ListItem, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Modal, ModalBody, ModalContent, ModalHeader, ModalOverlay, Spacer, Text, VStack, Wrap } from "@chakra-ui/react"
|
|
import { getEventURL } from "/utils/state.js"
|
|
import NextLink from "next/link"
|
|
import { HamburgerIcon } from "@chakra-ui/icons"
|
|
import NextHead from "next/head"
|
|
|
|
|
|
|
|
export default function Component() {
|
|
const state = useContext(StateContext)
|
|
const router = useRouter()
|
|
const [ colorMode, toggleColorMode ] = useContext(ColorModeContext)
|
|
const focusRef = useRef();
|
|
|
|
// Main event loop.
|
|
const [addEvents, connectError] = useContext(EventLoopContext)
|
|
|
|
// Set focus to the specified element.
|
|
useEffect(() => {
|
|
if (focusRef.current) {
|
|
focusRef.current.focus();
|
|
}
|
|
})
|
|
|
|
// Route after the initial page hydration.
|
|
useEffect(() => {
|
|
const change_complete = () => addEvents(initialEvents())
|
|
router.events.on('routeChangeComplete', change_complete)
|
|
return () => {
|
|
router.events.off('routeChangeComplete', change_complete)
|
|
}
|
|
}, [router])
|
|
|
|
|
|
return (
|
|
<Fragment>
|
|
<Fragment>
|
|
{isTrue(connectError !== null) ? (
|
|
<Fragment>
|
|
<Modal isOpen={connectError !== null}>
|
|
<ModalOverlay>
|
|
<ModalContent>
|
|
<ModalHeader>
|
|
{`Connection Error`}
|
|
</ModalHeader>
|
|
<ModalBody>
|
|
<Text>
|
|
{`Cannot connect to server: `}
|
|
{(connectError !== null) ? connectError.message : ''}
|
|
{`. Check if server is reachable at `}
|
|
{getEventURL().href}
|
|
</Text>
|
|
</ModalBody>
|
|
</ModalContent>
|
|
</ModalOverlay>
|
|
</Modal>
|
|
</Fragment>
|
|
) : (
|
|
<Fragment/>
|
|
)}
|
|
</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": "100em"}}>
|
|
<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")) ? `#fff0f7` : `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": "1.3em", "height": "2.5em"}}>
|
|
<Image src={`/home-icon.png`} sx={{"height": "2.5em", "padding": "0.5em"}}/>
|
|
<Text>
|
|
{`Strona główna`}
|
|
</Text>
|
|
</HStack>
|
|
</Link>
|
|
<Link as={NextLink} href={`/dashboard`} sx={{"width": "100%"}}>
|
|
<HStack sx={{"bg": isTrue((state.router.page.path === "/kontakt") || (((state.router.page.path === "/") && "Kontakt") === "Home")) ? `#fff0f7` : `transparent`, "color": isTrue((state.router.page.path === "/kontakt") || (((state.router.page.path === "/") && "Kontakt") === "Home")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1.3em", "height": "2.5em"}}>
|
|
<Image src={`/contact-icon.png`} sx={{"height": "2.5em", "padding": "0.5em"}}/>
|
|
<Text>
|
|
{`Kontakt`}
|
|
</Text>
|
|
</HStack>
|
|
</Link>
|
|
<Link as={NextLink} href={`/settings`} sx={{"width": "100%"}}>
|
|
<HStack sx={{"bg": isTrue((state.router.page.path === "/zdj\\u0119cie") || (((state.router.page.path === "/") && "Zdj\\u0119cie") === "Home")) ? `#fff0f7` : `transparent`, "color": isTrue((state.router.page.path === "/zdj\\u0119cie") || (((state.router.page.path === "/") && "Zdj\\u0119cie") === "Home")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1.3em", "height": "2.5em"}}>
|
|
<Image src={`/image-icon.png`} sx={{"height": "2.5em", "padding": "0.5em"}}/>
|
|
<Text>
|
|
{`Zdjęcie`}
|
|
</Text>
|
|
</HStack>
|
|
</Link>
|
|
</VStack>
|
|
<Spacer/>
|
|
</VStack>
|
|
</Box>
|
|
<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"}}>
|
|
<VStack>
|
|
<Heading sx={{"fontSize": "3em", "marginBottom": "25px", "backgroundImage": "linear-gradient( 64.5deg, rgba(245,116,185,1) 14.7%, rgba(89,97,223,1) 88.7% )", "backgroundClip": "text", "padding": "10px"}}>
|
|
{`Witaj w BlurMe!`}
|
|
</Heading>
|
|
<Wrap>
|
|
<HStack sx={{"align-self": "flex-start"}}>
|
|
<VStack sx={{"align-self": "flex-start"}}>
|
|
<Text sx={{"margin-left": "40px", "margin-top": "50px", "align-self": "flex-start", "margin-bottom": "25px", "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>
|
|
<Link as={NextLink} href={`settings`} sx={{"margin-top": "30px", "align": "center", "color": "rgba(117,102,254,255)", "button": true, "padding": "50xp", "fontSize": "1.2em"}}>
|
|
<Button>
|
|
{`Zacznij anonimizować`}
|
|
</Button>
|
|
</Link>
|
|
</VStack>
|
|
<Image src={`obraz1.png`} sx={{"margin-right": "60px", "height": "30em", "padding": "0.5em"}}/>
|
|
</HStack>
|
|
</Wrap>
|
|
<Text sx={{"height": "20px"}}>
|
|
{` `}
|
|
</Text>
|
|
<VStack sx={{"marginRight": "40px", "marginLeft": "40px"}}>
|
|
<Text sx={{"color": "rgba(117,102,253,255)", "fontSize": "2em", "fontWeight": "bold", "marginTop": "20px", "marginBottom": "5px"}}>
|
|
{`Jak to działa?`}
|
|
</Text>
|
|
<List>
|
|
<ListItem sx={{"marginRight": "50%"}}>
|
|
<Text as={`b`} sx={{"fontSize": "1.2em"}}>
|
|
{`1. Wgraj Zdjęcie `}
|
|
</Text>
|
|
<Text>
|
|
{`Prosty proces rozpoczyna się od dodania zdjęcia, które chcesz anonimizować.`}
|
|
</Text>
|
|
</ListItem>
|
|
<ListItem sx={{"marginLeft": "50%"}}>
|
|
<Text as={`b`} sx={{"fontSize": "1.2em"}}>
|
|
{`2. Zaznacz Twarz do Ochrony `}
|
|
</Text>
|
|
<Text>
|
|
{`Oznacz twarz, którą chcesz zachować.`}
|
|
</Text>
|
|
</ListItem>
|
|
<ListItem sx={{"marginRight": "50%"}}>
|
|
<Text as={`b`} sx={{"fontSize": "1.2em"}}>
|
|
{`3. Anonimizuj Resztę `}
|
|
</Text>
|
|
<Text>
|
|
{`Naciśnij przycisk, a Blurme automatycznie zastosuje efekt rozmycia do wszystkich obszarów poza zaznaczoną twarzą.`}
|
|
</Text>
|
|
</ListItem>
|
|
<ListItem sx={{"marginLeft": "50%"}}>
|
|
<Text as={`b`} sx={{"fontSize": "1.2em"}}>
|
|
{`4. Pobierz i Podziel Się `}
|
|
</Text>
|
|
<Text>
|
|
{`Gotowe! Pobierz anonimizowane zdjęcie i dziel się nim bez obaw o prywatność.`}
|
|
</Text>
|
|
</ListItem>
|
|
</List>
|
|
</VStack>
|
|
<VStack sx={{"textAlign": "center"}}>
|
|
<Text sx={{"color": "rgba(251,108,174,255)", "fontSize": "2em", "fontWeight": "bold", "marginTop": "25px", "marginBottom": "5px"}}>
|
|
{`Dlaczego Blurme?`}
|
|
</Text>
|
|
<Flex align={`top`}>
|
|
<Box sx={{"marginLeft": "40px", "width": "315px", "padding": "5px"}}>
|
|
<Text as={`b`} sx={{"fontSize": "1.3em"}}>
|
|
{`Prywatność`}
|
|
</Text>
|
|
<Text sx={{"textAlign": "left"}}>
|
|
{`Nasza aplikacja zapewnia pełną ochronę prywatności, eliminując ryzyko identyfikacji osób niezwiązanych z anonimizacją.`}
|
|
</Text>
|
|
</Box>
|
|
<Box sx={{"width": "315px", "padding": "5px"}}>
|
|
<Text as={`b`} sx={{"fontSize": "1.3em"}}>
|
|
{`Elastyczność`}
|
|
</Text>
|
|
<Text sx={{"textAlign": "left"}}>
|
|
{`Wybierz, która twarz na zdjęciu ma pozostać niezmieniona, a my zadbamy o resztę.`}
|
|
</Text>
|
|
</Box>
|
|
<Box sx={{"marginRight": "40px", "width": "315px", "padding": "5px"}}>
|
|
<Text as={`b`} sx={{"fontSize": "1.3em"}}>
|
|
{`Prosta obsługa`}
|
|
</Text>
|
|
<Text sx={{"textAlign": "left"}}>
|
|
{`Intuicyjny interfejs użytkownika sprawia, że korzystanie z Blurme jest łatwe dla każdego.`}
|
|
</Text>
|
|
</Box>
|
|
</Flex>
|
|
</VStack>
|
|
<VStack sx={{"textAlign": "center"}}>
|
|
<Text sx={{"color": "rgba(183,105,215,255)", "fontSize": "2em", "fontWeight": "bold", "marginTop": "25px", "marginBottom": "5px"}}>
|
|
{`Do Czego?`}
|
|
</Text>
|
|
<List>
|
|
<HStack sx={{"marginRight": "40px", "marginLeft": "40px"}}>
|
|
<ListItem>
|
|
<Text as={`b`} sx={{"fontSize": "1.3em"}}>
|
|
{`Ochrona Tożsamości`}
|
|
</Text>
|
|
<Text sx={{"textAlign": "left"}}>
|
|
{`Idealne do usuwania twarzy nieznajomych lub przypadkowych przechodniów z tła.`}
|
|
</Text>
|
|
</ListItem>
|
|
<ListItem>
|
|
<Text as={`b`} sx={{"fontSize": "1.3em"}}>
|
|
{`Zachowanie Prywatności`}
|
|
</Text>
|
|
<Text sx={{"textAlign": "left"}}>
|
|
{`Przydatne w sytuacjach, gdy chcesz udostępnić zdjęcia publicznie, ale z zachowaniem prywatności pewnych osób.`}
|
|
</Text>
|
|
</ListItem>
|
|
<ListItem>
|
|
<Text as={`b`} sx={{"fontSize": "1.3em"}}>
|
|
{`Kreatywność`}
|
|
</Text>
|
|
<Text sx={{"textAlign": "left"}}>
|
|
{`Wyraź swoją kreatywność, zachowując jednocześnie istotne elementy na zdjęciach.`}
|
|
</Text>
|
|
</ListItem>
|
|
</HStack>
|
|
</List>
|
|
</VStack>
|
|
</VStack>
|
|
</Box>
|
|
</Box>
|
|
<Box sx={{"position": "fixed", "right": "1.5em", "top": "1.5em", "zIndex": "500"}}>
|
|
<Menu>
|
|
<MenuButton sx={{"width": "3em", "height": "3em", "backgroundColor": "white", "border": "1px solid #F4F3F6", "borderRadius": "0.375rem"}}>
|
|
<HamburgerIcon sx={{"size": "4em", "color": "black"}}/>
|
|
</MenuButton>
|
|
<MenuList>
|
|
<MenuItem sx={{"_hover": {"bg": "#fff0f7"}}}>
|
|
<Link as={NextLink} href={`/`} sx={{"width": "100%"}}>
|
|
{`Strona główna`}
|
|
</Link>
|
|
</MenuItem>
|
|
<MenuItem sx={{"_hover": {"bg": "#fff0f7"}}}>
|
|
<Link as={NextLink} href={`/dashboard`} sx={{"width": "100%"}}>
|
|
{`Kontakt`}
|
|
</Link>
|
|
</MenuItem>
|
|
<MenuItem sx={{"_hover": {"bg": "#fff0f7"}}}>
|
|
<Link as={NextLink} href={`/settings`} sx={{"width": "100%"}}>
|
|
{`Zdjęcie`}
|
|
</Link>
|
|
</MenuItem>
|
|
<MenuDivider/>
|
|
<MenuItem sx={{"_hover": {"bg": "#fff0f7"}}}>
|
|
<Link as={NextLink} href={`/about`} sx={{"width": "100%"}}>
|
|
{`About`}
|
|
</Link>
|
|
</MenuItem>
|
|
<MenuItem sx={{"_hover": {"bg": "#fff0f7"}}}>
|
|
<Link as={NextLink} href={`mailto:founders@=reflex.dev`} sx={{"width": "100%"}}>
|
|
{`Contact`}
|
|
</Link>
|
|
</MenuItem>
|
|
</MenuList>
|
|
</Menu>
|
|
</Box>
|
|
</HStack>
|
|
<NextHead>
|
|
<title>
|
|
{`Strona główna`}
|
|
</title>
|
|
<meta content={`A Reflex app.`} name={`description`}/>
|
|
<meta content={`/home-icon.png`} property={`og:image`}/>
|
|
<meta content={`width=device-width, shrink-to-fit=no, initial-scale=1`} name={`viewport`}/>
|
|
</NextHead>
|
|
</Fragment>
|
|
)
|
|
}
|