Merge pull request 'Made everything look nicer' (#1) from D3vision/webserver-framework-frontend:master into master

Reviewed-on: Navy.gif/webserver-framework-frontend#1
This commit is contained in:
Erik 2022-11-17 23:14:54 +01:00
commit 73de89ce32
11 changed files with 29610 additions and 9289 deletions

28711
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@ -22,6 +22,7 @@ function App() {
{ to: '/', label: 'Home' },
{ to: '/users', label: 'Users' },
{ to: '/admin', label: 'Admin' }
];
return (

View File

@ -0,0 +1,29 @@
import React from 'react';
import '../css/components/Sidebar.css';
import NavLink from '../structures/NavLink';
const Sidebar = ({children}) => {
return <div className='sidebar'>
{children}
</div>;
};
// Nav menu
const SidebarMenu = ({menuItems, children}) => {
let key = 0;
return <div className='sidebar-menu'>
{menuItems.map(link => {
const { label, ...rest } = link;
return <NavLink activeClassName='active' className='sidebar-menu-item' key={key++} {...rest}>{ label}</NavLink>;
})}
{children}
</div>;
};
export {SidebarMenu, Sidebar};
export default Sidebar;

View File

@ -1,26 +1,26 @@
.app {
width: 100vw;
height: 100vh;
background-color: var(--background-primary);
}
header {
display: flex;
flex-direction: row;
text-align: center;
height: var(--header-height);
background-color: var(--background-tertiary);
}
.background {
display: flex;
height: 100%;
width: 100%;
}
.main-content {
width: 100%;
height: 91%;
margin: 20px;
background-color: var(--background-secondary);
}
width: 100vw;
height: 100vh;
background-color: var(--background-primary);
}
header {
display: flex;
flex-direction: row;
text-align: center;
height: var(--header-height);
background-color: var(--background-tertiary);
}
.background {
display: flex;
height: 100%;
width: 100%;
}
.main-content {
width: 100%;
height: 91%;
margin: 20px;
background-color: var(--background-secondary);
}

1
src/css/chota.min.css vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -1,48 +1,490 @@
@import url(chota.min.css);
:root {
--background-primary: #1e1e1e;
--background-secondary: #323232;
--background-tertiary: #272727;
--lighter-blue: rgb(129, 196, 250);
--light-blue:rgb(88, 164, 226);
--dark-blue:rgb(27, 76, 117);
--darker-blue: rgb(25, 54, 78);
--text-primary: #ffffff;
--header-height: 40px
--bg-color: #232323;
--bg-secondary-color: #343434;
--color-primary: #00377e;
--color-lightGrey: #d2d6dd;
--color-grey: #ccc;
--color-darkGrey: #777;
--color-error: #d43939;
--color-success: #28bd14;
--grid-maxWidth: 120rem;
--grid-gutter: 2rem;
--font-size: 1.6rem;
--font-color: #f5f5f5;
--font-family-sans: sans-serif;
--font-family-mono: monaco, "Consolas", "Lucida Console", monospace;
}
.card {
background: var(--bg-secondary-color);
box-shadow: 0 1px 3px #00000085;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: rgb(223, 223, 223);
overflow: hidden;
text-align: center;
.bg-triangles{
background: url(../img/background.svg);
background-size: cover;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
.dir-column{
flex-direction: column;
}
* {
outline: 1px dashed red;
.dir-row{
flex-direction: row;
}
button {
cursor: pointer;
background-color: var(--dark-blue);
border: 0;
border-radius: 10px;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
font-weight: bold;
color: var(--lighter-blue)
button{
margin: 0.35em 0 0.7em;
}
button:hover {
background-color: var(--darker-blue);
.flex-wrap{
flex-wrap: wrap;
}
.m-0 {
margin: 0 !important;
}
.mt-0,
.my-0 {
margin-top: 0 !important;
}
.mr-0,
.mx-0 {
margin-right: 0 !important;
}
.mb-0,
.my-0 {
margin-bottom: 0 !important;
}
.ml-0,
.mx-0 {
margin-left: 0 !important;
}
.m-1 {
margin: 0.25rem !important;
}
.mt-1,
.my-1 {
margin-top: 0.25rem !important;
}
.mr-1,
.mx-1 {
margin-right: 0.25rem !important;
}
.mb-1,
.my-1 {
margin-bottom: 0.25rem !important;
}
.ml-1,
.mx-1 {
margin-left: 0.25rem !important;
}
.m-2 {
margin: 0.5rem !important;
}
.mt-2,
.my-2 {
margin-top: 0.5rem !important;
}
.mr-2,
.mx-2 {
margin-right: 0.5rem !important;
}
.mb-2,
.my-2 {
margin-bottom: 0.5rem !important;
}
.ml-2,
.mx-2 {
margin-left: 0.5rem !important;
}
.m-3 {
margin: 1rem !important;
}
.mt-3,
.my-3 {
margin-top: 1rem !important;
}
.mr-3,
.mx-3 {
margin-right: 1rem !important;
}
.mb-3,
.my-3 {
margin-bottom: 1rem !important;
}
.ml-3,
.mx-3 {
margin-left: 1rem !important;
}
.m-4 {
margin: 1.5rem !important;
}
.mt-4,
.my-4 {
margin-top: 1.5rem !important;
}
.mr-4,
.mx-4 {
margin-right: 1.5rem !important;
}
.mb-4,
.my-4 {
margin-bottom: 1.5rem !important;
}
.ml-4,
.mx-4 {
margin-left: 1.5rem !important;
}
.m-5 {
margin: 3rem !important;
}
.mt-5,
.my-5 {
margin-top: 3rem !important;
}
.mr-5,
.mx-5 {
margin-right: 3rem !important;
}
.mb-5,
.my-5 {
margin-bottom: 3rem !important;
}
.ml-5,
.mx-5 {
margin-left: 3rem !important;
}
.p-0 {
padding: 0 !important;
}
.pt-0,
.py-0 {
padding-top: 0 !important;
}
.pr-0,
.px-0 {
padding-right: 0 !important;
}
.pb-0,
.py-0 {
padding-bottom: 0 !important;
}
.pl-0,
.px-0 {
padding-left: 0 !important;
}
.p-1 {
padding: 0.25rem !important;
}
.pt-1,
.py-1 {
padding-top: 0.25rem !important;
}
.pr-1,
.px-1 {
padding-right: 0.25rem !important;
}
.pb-1,
.py-1 {
padding-bottom: 0.25rem !important;
}
.pl-1,
.px-1 {
padding-left: 0.25rem !important;
}
.p-2 {
padding: 0.5rem !important;
}
.pt-2,
.py-2 {
padding-top: 0.5rem !important;
}
.pr-2,
.px-2 {
padding-right: 0.5rem !important;
}
.pb-2,
.py-2 {
padding-bottom: 0.5rem !important;
}
.pl-2,
.px-2 {
padding-left: 0.5rem !important;
}
.p-3 {
padding: 1rem !important;
}
.pt-3,
.py-3 {
padding-top: 1rem !important;
}
.pr-3,
.px-3 {
padding-right: 1rem !important;
}
.pb-3,
.py-3 {
padding-bottom: 1rem !important;
}
.pl-3,
.px-3 {
padding-left: 1rem !important;
}
.p-4 {
padding: 1.5rem !important;
}
.pt-4,
.py-4 {
padding-top: 1.5rem !important;
}
.pr-4,
.px-4 {
padding-right: 1.5rem !important;
}
.pb-4,
.py-4 {
padding-bottom: 1.5rem !important;
}
.pl-4,
.px-4 {
padding-left: 1.5rem !important;
}
.p-5 {
padding: 3rem !important;
}
.pt-5,
.py-5 {
padding-top: 3rem !important;
}
.pr-5,
.px-5 {
padding-right: 3rem !important;
}
.pb-5,
.py-5 {
padding-bottom: 3rem !important;
}
.pl-5,
.px-5 {
padding-left: 3rem !important;
}
.m-n1 {
margin: -0.25rem !important;
}
.mt-n1,
.my-n1 {
margin-top: -0.25rem !important;
}
.mr-n1,
.mx-n1 {
margin-right: -0.25rem !important;
}
.mb-n1,
.my-n1 {
margin-bottom: -0.25rem !important;
}
.ml-n1,
.mx-n1 {
margin-left: -0.25rem !important;
}
.m-n2 {
margin: -0.5rem !important;
}
.mt-n2,
.my-n2 {
margin-top: -0.5rem !important;
}
.mr-n2,
.mx-n2 {
margin-right: -0.5rem !important;
}
.mb-n2,
.my-n2 {
margin-bottom: -0.5rem !important;
}
.ml-n2,
.mx-n2 {
margin-left: -0.5rem !important;
}
.m-n3 {
margin: -1rem !important;
}
.mt-n3,
.my-n3 {
margin-top: -1rem !important;
}
.mr-n3,
.mx-n3 {
margin-right: -1rem !important;
}
.mb-n3,
.my-n3 {
margin-bottom: -1rem !important;
}
.ml-n3,
.mx-n3 {
margin-left: -1rem !important;
}
.m-n4 {
margin: -1.5rem !important;
}
.mt-n4,
.my-n4 {
margin-top: -1.5rem !important;
}
.mr-n4,
.mx-n4 {
margin-right: -1.5rem !important;
}
.mb-n4,
.my-n4 {
margin-bottom: -1.5rem !important;
}
.ml-n4,
.mx-n4 {
margin-left: -1.5rem !important;
}
.m-n5 {
margin: -3rem !important;
}
.mt-n5,
.my-n5 {
margin-top: -3rem !important;
}
.mr-n5,
.mx-n5 {
margin-right: -3rem !important;
}
.mb-n5,
.my-n5 {
margin-bottom: -3rem !important;
}
.ml-n5,
.mx-n5 {
margin-left: -3rem !important;
}
.mt-n6,
.my-n6 {
margin-top: -3.5rem !important;
}
.mt-n7,
.my-n7 {
margin-top: -4rem !important;
}
.mt-n8,
.my-n8 {
margin-top: -4.5rem !important;
}
.m-auto {
margin: auto !important;
}
.mt-auto,
.my-auto {
margin-top: auto !important;
}
.mr-auto,
.mx-auto {
margin-right: auto !important;
}
.mb-auto,
.my-auto {
margin-bottom: auto !important;
}
.ml-auto,
.mx-auto {
margin-left: auto !important;
}

View File

@ -1,18 +1,15 @@
.login {
background-color: var(--background-secondary);
width: 20vw;
border-radius: 25px;
margin: auto;
}
.login > div > * {
margin: 5px;
}
.login > * {
margin: 25px;
}
.third-party-login:hover {
.third-party-login{
cursor: pointer;
}
input{
margin-bottom: 1rem;
}
.logoImg{
max-height: 120px;
}
.row>div{
max-width: 407px;
}
.methodsWrapper{
gap: 1px 10px;
}

323
src/img/background.svg Normal file
View File

@ -0,0 +1,323 @@
<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" height="1080" preserveAspectRatio="xMidYMid" viewBox="0 0 1920 1080" style="z-index:1;margin-right:-2px;display:block;background-repeat-y:initial;background-repeat-x:initial;background-color:rgb(241, 242, 243);animation-play-state:paused" ><g transform="translate(960,540) scale(1,1) translate(-960,-540)" style="transform:matrix(1, 0, 0, 1, 0, 0);animation-play-state:paused" ><g id="bk-0.35690698268105336" style="animation-play-state:paused" ><path d="M 872 398 L 767 304 L 789 479 Z" stroke="#292929" fill="#292929" style="animation-play-state:paused" ></path>
<path d="M 565 400 L 699 549 L 789 479 Z" stroke="#2c2c2c" fill="#2c2c2c" style="animation-play-state:paused" ></path>
<path d="M 947 618 L 1016 403 L 872 398 Z" stroke="#252525" fill="#252525" style="animation-play-state:paused" ></path>
<path d="M 872 398 L 852 197 L 767 304 Z" stroke="#2b2b2b" fill="#2b2b2b" style="animation-play-state:paused" ></path>
<path d="M 535 200 L 565 400 L 767 304 Z" stroke="#303030" fill="#303030" style="animation-play-state:paused" ></path>
<path d="M 767 304 L 565 400 L 789 479 Z" stroke="#2c2c2c" fill="#2c2c2c" style="animation-play-state:paused" ></path>
<path d="M 947 618 L 872 398 L 789 479 Z" stroke="#262626" fill="#262626" style="animation-play-state:paused" ></path>
<path d="M 872 398 L 1024 248 L 852 197 Z" stroke="#2b2b2b" fill="#2b2b2b" style="animation-play-state:paused" ></path>
<path d="M 699 549 L 947 618 L 789 479 Z" stroke="#272727" fill="#272727" style="animation-play-state:paused" ></path>
<path d="M 1016 403 L 1024 248 L 872 398 Z" stroke="#292929" fill="#292929" style="animation-play-state:paused" ></path>
<path d="M 565 400 L 579 581 L 699 549 Z" stroke="#2e2e2e" fill="#2e2e2e" style="animation-play-state:paused" ></path>
<path d="M 699 549 L 873 717 L 947 618 Z" stroke="#282828" fill="#282828" style="animation-play-state:paused" ></path>
<path d="M 1024 248 L 905 128 L 852 197 Z" stroke="#2e2e2e" fill="#2e2e2e" style="animation-play-state:paused" ></path>
<path d="M 852 197 L 732 99 L 767 304 Z" stroke="#2f2f2f" fill="#2f2f2f" style="animation-play-state:paused" ></path>
<path d="M 905 128 L 732 99 L 852 197 Z" stroke="#303030" fill="#303030" style="animation-play-state:paused" ></path>
<path d="M 732 99 L 535 200 L 767 304 Z" stroke="#313131" fill="#313131" style="animation-play-state:paused" ></path>
<path d="M 565 400 L 363 546 L 579 581 Z" stroke="#313131" fill="#313131" style="animation-play-state:paused" ></path>
<path d="M 579 581 L 730 718 L 699 549 Z" stroke="#2c2c2c" fill="#2c2c2c" style="animation-play-state:paused" ></path>
<path d="M 730 718 L 873 717 L 699 549 Z" stroke="#2a2a2a" fill="#2a2a2a" style="animation-play-state:paused" ></path>
<path d="M 873 717 L 1022 697 L 947 618 Z" stroke="#272727" fill="#272727" style="animation-play-state:paused" ></path>
<path d="M 947 618 L 1098 622 L 1016 403 Z" stroke="#252525" fill="#252525" style="animation-play-state:paused" ></path>
<path d="M 1278 297 L 1095 128 L 1024 248 Z" stroke="#2e2e2e" fill="#2e2e2e" style="animation-play-state:paused" ></path>
<path d="M 1024 248 L 1095 128 L 905 128 Z" stroke="#2e2e2e" fill="#2e2e2e" style="animation-play-state:paused" ></path>
<path d="M 905 128 L 756 -43 L 732 99 Z" stroke="#333333" fill="#333333" style="animation-play-state:paused" ></path>
<path d="M 1278 297 L 1024 248 L 1016 403 Z" stroke="#2b2b2b" fill="#2b2b2b" style="animation-play-state:paused" ></path>
<path d="M 1022 697 L 1098 622 L 947 618 Z" stroke="#272727" fill="#272727" style="animation-play-state:paused" ></path>
<path d="M 732 99 L 557 73 L 535 200 Z" stroke="#343434" fill="#343434" style="animation-play-state:paused" ></path>
<path d="M 756 -43 L 557 73 L 732 99 Z" stroke="#333333" fill="#333333" style="animation-play-state:paused" ></path>
<path d="M 362 225 L 389 382 L 535 200 Z" stroke="#333333" fill="#333333" style="animation-play-state:paused" ></path>
<path d="M 535 200 L 389 382 L 565 400 Z" stroke="#333333" fill="#333333" style="animation-play-state:paused" ></path>
<path d="M 898 -60 L 756 -43 L 905 128 Z" stroke="#343434" fill="#343434" style="animation-play-state:paused" ></path>
<path d="M 579 581 L 613 787 L 730 718 Z" stroke="#2e2e2e" fill="#2e2e2e" style="animation-play-state:paused" ></path>
<path d="M 730 718 L 705 861 L 873 717 Z" stroke="#2c2c2c" fill="#2c2c2c" style="animation-play-state:paused" ></path>
<path d="M 1082 909 L 1148 682 L 1022 697 Z" stroke="#2b2b2b" fill="#2b2b2b" style="animation-play-state:paused" ></path>
<path d="M 412 745 L 613 787 L 579 581 Z" stroke="#313131" fill="#313131" style="animation-play-state:paused" ></path>
<path d="M 389 382 L 363 546 L 565 400 Z" stroke="#333333" fill="#333333" style="animation-play-state:paused" ></path>
<path d="M 428 84 L 362 225 L 535 200 Z" stroke="#313131" fill="#313131" style="animation-play-state:paused" ></path>
<path d="M 238 394 L 255 601 L 363 546 Z" stroke="#303030" fill="#303030" style="animation-play-state:paused" ></path>
<path d="M 1043 -100 L 898 -60 L 905 128 Z" stroke="#343434" fill="#343434" style="animation-play-state:paused" ></path>
<path d="M 429 -35 L 428 84 L 557 73 Z" stroke="#2f2f2f" fill="#2f2f2f" style="animation-play-state:paused" ></path>
<path d="M 557 73 L 428 84 L 535 200 Z" stroke="#323232" fill="#323232" style="animation-play-state:paused" ></path>
<path d="M 1022 697 L 1148 682 L 1098 622 Z" stroke="#282828" fill="#282828" style="animation-play-state:paused" ></path>
<path d="M 1098 622 L 1257 477 L 1016 403 Z" stroke="#282828" fill="#282828" style="animation-play-state:paused" ></path>
<path d="M 887 896 L 1022 697 L 873 717 Z" stroke="#2a2a2a" fill="#2a2a2a" style="animation-play-state:paused" ></path>
<path d="M 1232 577 L 1257 477 L 1098 622 Z" stroke="#2a2a2a" fill="#2a2a2a" style="animation-play-state:paused" ></path>
<path d="M 1257 477 L 1278 297 L 1016 403 Z" stroke="#2b2b2b" fill="#2b2b2b" style="animation-play-state:paused" ></path>
<path d="M 1148 682 L 1232 577 L 1098 622 Z" stroke="#2a2a2a" fill="#2a2a2a" style="animation-play-state:paused" ></path>
<path d="M 542 866 L 705 861 L 613 787 Z" stroke="#313131" fill="#313131" style="animation-play-state:paused" ></path>
<path d="M 613 787 L 705 861 L 730 718 Z" stroke="#2e2e2e" fill="#2e2e2e" style="animation-play-state:paused" ></path>
<path d="M 1278 297 L 1221 88 L 1095 128 Z" stroke="#303030" fill="#303030" style="animation-play-state:paused" ></path>
<path d="M 1095 128 L 1043 -100 L 905 128 Z" stroke="#323232" fill="#323232" style="animation-play-state:paused" ></path>
<path d="M 363 546 L 412 745 L 579 581 Z" stroke="#333333" fill="#333333" style="animation-play-state:paused" ></path>
<path d="M 231 76 L 268 288 L 362 225 Z" stroke="#2e2e2e" fill="#2e2e2e" style="animation-play-state:paused" ></path>
<path d="M 362 225 L 268 288 L 389 382 Z" stroke="#303030" fill="#303030" style="animation-play-state:paused" ></path>
<path d="M 363 546 L 255 601 L 412 745 Z" stroke="#323232" fill="#323232" style="animation-play-state:paused" ></path>
<path d="M 1221 88 L 1043 -100 L 1095 128 Z" stroke="#333333" fill="#333333" style="animation-play-state:paused" ></path>
<path d="M 726 -218 L 553 -88 L 756 -43 Z" stroke="#2f2f2f" fill="#2f2f2f" style="animation-play-state:paused" ></path>
<path d="M 756 -43 L 553 -88 L 557 73 Z" stroke="#313131" fill="#313131" style="animation-play-state:paused" ></path>
<path d="M 428 84 L 231 76 L 362 225 Z" stroke="#2e2e2e" fill="#2e2e2e" style="animation-play-state:paused" ></path>
<path d="M 726 -218 L 756 -43 L 898 -60 Z" stroke="#303030" fill="#303030" style="animation-play-state:paused" ></path>
<path d="M 705 861 L 887 896 L 873 717 Z" stroke="#2d2d2d" fill="#2d2d2d" style="animation-play-state:paused" ></path>
<path d="M 412 745 L 542 866 L 613 787 Z" stroke="#333333" fill="#333333" style="animation-play-state:paused" ></path>
<path d="M 705 861 L 874 1033 L 887 896 Z" stroke="#303030" fill="#303030" style="animation-play-state:paused" ></path>
<path d="M 553 -88 L 429 -35 L 557 73 Z" stroke="#2f2f2f" fill="#2f2f2f" style="animation-play-state:paused" ></path>
<path d="M 238 394 L 363 546 L 389 382 Z" stroke="#313131" fill="#313131" style="animation-play-state:paused" ></path>
<path d="M 268 288 L 238 394 L 389 382 Z" stroke="#303030" fill="#303030" style="animation-play-state:paused" ></path>
<path d="M 98 258 L 238 394 L 268 288 Z" stroke="#2c2c2c" fill="#2c2c2c" style="animation-play-state:paused" ></path>
<path d="M 1232 577 L 1347 533 L 1257 477 Z" stroke="#2d2d2d" fill="#2d2d2d" style="animation-play-state:paused" ></path>
<path d="M 1257 477 L 1392 409 L 1278 297 Z" stroke="#2f2f2f" fill="#2f2f2f" style="animation-play-state:paused" ></path>
<path d="M 1278 297 L 1368 249 L 1221 88 Z" stroke="#313131" fill="#313131" style="animation-play-state:paused" ></path>
<path d="M 1363 740 L 1347 533 L 1232 577 Z" stroke="#2e2e2e" fill="#2e2e2e" style="animation-play-state:paused" ></path>
<path d="M 1363 740 L 1232 577 L 1148 682 Z" stroke="#2d2d2d" fill="#2d2d2d" style="animation-play-state:paused" ></path>
<path d="M 1347 533 L 1392 409 L 1257 477 Z" stroke="#2f2f2f" fill="#2f2f2f" style="animation-play-state:paused" ></path>
<path d="M 1392 409 L 1368 249 L 1278 297 Z" stroke="#313131" fill="#313131" style="animation-play-state:paused" ></path>
<path d="M 887 896 L 1082 909 L 1022 697 Z" stroke="#2c2c2c" fill="#2c2c2c" style="animation-play-state:paused" ></path>
<path d="M 887 -230 L 726 -218 L 898 -60 Z" stroke="#2f2f2f" fill="#2f2f2f" style="animation-play-state:paused" ></path>
<path d="M 553 -88 L 448 -197 L 429 -35 Z" stroke="#2c2c2c" fill="#2c2c2c" style="animation-play-state:paused" ></path>
<path d="M 1000 -259 L 887 -230 L 1043 -100 Z" stroke="#2e2e2e" fill="#2e2e2e" style="animation-play-state:paused" ></path>
<path d="M 1043 -100 L 887 -230 L 898 -60 Z" stroke="#303030" fill="#303030" style="animation-play-state:paused" ></path>
<path d="M 1418 -32 L 1182 -102 L 1221 88 Z" stroke="#313131" fill="#313131" style="animation-play-state:paused" ></path>
<path d="M 1221 88 L 1182 -102 L 1043 -100 Z" stroke="#323232" fill="#323232" style="animation-play-state:paused" ></path>
<path d="M 292 776 L 378 852 L 412 745 Z" stroke="#313131" fill="#313131" style="animation-play-state:paused" ></path>
<path d="M 412 745 L 378 852 L 542 866 Z" stroke="#333333" fill="#333333" style="animation-play-state:paused" ></path>
<path d="M 711 1034 L 874 1033 L 705 861 Z" stroke="#323232" fill="#323232" style="animation-play-state:paused" ></path>
<path d="M 887 896 L 874 1033 L 1082 909 Z" stroke="#2f2f2f" fill="#2f2f2f" style="animation-play-state:paused" ></path>
<path d="M 255 601 L 292 776 L 412 745 Z" stroke="#303030" fill="#303030" style="animation-play-state:paused" ></path>
<path d="M 228 860 L 292 776 L 97 718 Z" stroke="#2c2c2c" fill="#2c2c2c" style="animation-play-state:paused" ></path>
<path d="M 249 -81 L 231 76 L 429 -35 Z" stroke="#2a2a2a" fill="#2a2a2a" style="animation-play-state:paused" ></path>
<path d="M 429 -35 L 231 76 L 428 84 Z" stroke="#2d2d2d" fill="#2d2d2d" style="animation-play-state:paused" ></path>
<path d="M 1368 249 L 1376 86 L 1221 88 Z" stroke="#343434" fill="#343434" style="animation-play-state:paused" ></path>
<path d="M 1517 254 L 1376 86 L 1368 249 Z" stroke="#333333" fill="#333333" style="animation-play-state:paused" ></path>
<path d="M 711 1034 L 705 861 L 572 1052 Z" stroke="#333333" fill="#333333" style="animation-play-state:paused" ></path>
<path d="M 1112 1106 L 1215 904 L 1082 909 Z" stroke="#313131" fill="#313131" style="animation-play-state:paused" ></path>
<path d="M 1082 909 L 1215 904 L 1148 682 Z" stroke="#2e2e2e" fill="#2e2e2e" style="animation-play-state:paused" ></path>
<path d="M 1562 611 L 1490 374 L 1392 409 Z" stroke="#333333" fill="#333333" style="animation-play-state:paused" ></path>
<path d="M 572 1052 L 705 861 L 542 866 Z" stroke="#333333" fill="#333333" style="animation-play-state:paused" ></path>
<path d="M 1000 -259 L 563 -247 L 726 -218 Z" stroke="#2c2c2c" fill="#2c2c2c" style="animation-play-state:paused" ></path>
<path d="M 726 -218 L 563 -247 L 553 -88 Z" stroke="#2c2c2c" fill="#2c2c2c" style="animation-play-state:paused" ></path>
<path d="M 1215 904 L 1363 740 L 1148 682 Z" stroke="#2e2e2e" fill="#2e2e2e" style="animation-play-state:paused" ></path>
<path d="M 1182 -102 L 1000 -259 L 1043 -100 Z" stroke="#2f2f2f" fill="#2f2f2f" style="animation-play-state:paused" ></path>
<path d="M 887 -230 L 1000 -259 L 726 -218 Z" stroke="#2d2d2d" fill="#2d2d2d" style="animation-play-state:paused" ></path>
<path d="M 563 -247 L 448 -197 L 553 -88 Z" stroke="#2b2b2b" fill="#2b2b2b" style="animation-play-state:paused" ></path>
<path d="M 398 1042 L 572 1052 L 542 866 Z" stroke="#313131" fill="#313131" style="animation-play-state:paused" ></path>
<path d="M 109 132 L 98 258 L 268 288 Z" stroke="#2a2a2a" fill="#2a2a2a" style="animation-play-state:paused" ></path>
<path d="M 238 394 L 48 539 L 255 601 Z" stroke="#2d2d2d" fill="#2d2d2d" style="animation-play-state:paused" ></path>
<path d="M 98 258 L 95 394 L 238 394 Z" stroke="#2b2b2b" fill="#2b2b2b" style="animation-play-state:paused" ></path>
<path d="M 1562 611 L 1392 409 L 1347 533 Z" stroke="#323232" fill="#323232" style="animation-play-state:paused" ></path>
<path d="M 1392 409 L 1490 374 L 1368 249 Z" stroke="#323232" fill="#323232" style="animation-play-state:paused" ></path>
<path d="M 448 -197 L 249 -81 L 429 -35 Z" stroke="#2a2a2a" fill="#2a2a2a" style="animation-play-state:paused" ></path>
<path d="M 231 76 L 109 132 L 268 288 Z" stroke="#2b2b2b" fill="#2b2b2b" style="animation-play-state:paused" ></path>
<path d="M 127 -27 L 109 132 L 231 76 Z" stroke="#282828" fill="#282828" style="animation-play-state:paused" ></path>
<path d="M 1418 -32 L 1266 -178 L 1182 -102 Z" stroke="#2f2f2f" fill="#2f2f2f" style="animation-play-state:paused" ></path>
<path d="M 1182 -102 L 1266 -178 L 1000 -259 Z" stroke="#2e2e2e" fill="#2e2e2e" style="animation-play-state:paused" ></path>
<path d="M 1418 -32 L 1221 88 L 1376 86 Z" stroke="#323232" fill="#323232" style="animation-play-state:paused" ></path>
<path d="M 1525 92 L 1418 -32 L 1376 86 Z" stroke="#303030" fill="#303030" style="animation-play-state:paused" ></path>
<path d="M 1490 374 L 1517 254 L 1368 249 Z" stroke="#343434" fill="#343434" style="animation-play-state:paused" ></path>
<path d="M 292 776 L 228 860 L 378 852 Z" stroke="#2f2f2f" fill="#2f2f2f" style="animation-play-state:paused" ></path>
<path d="M 378 852 L 398 1042 L 542 866 Z" stroke="#313131" fill="#313131" style="animation-play-state:paused" ></path>
<path d="M 97 718 L 292 776 L 255 601 Z" stroke="#2d2d2d" fill="#2d2d2d" style="animation-play-state:paused" ></path>
<path d="M -61 428 L 48 539 L 95 394 Z" stroke="#282828" fill="#282828" style="animation-play-state:paused" ></path>
<path d="M 95 394 L 48 539 L 238 394 Z" stroke="#2b2b2b" fill="#2b2b2b" style="animation-play-state:paused" ></path>
<path d="M -61 428 L 95 394 L 98 258 Z" stroke="#282828" fill="#282828" style="animation-play-state:paused" ></path>
<path d="M 1399 912 L 1492 682 L 1363 740 Z" stroke="#333333" fill="#333333" style="animation-play-state:paused" ></path>
<path d="M 1363 740 L 1492 682 L 1347 533 Z" stroke="#313131" fill="#313131" style="animation-play-state:paused" ></path>
<path d="M 1490 374 L 1662 360 L 1517 254 Z" stroke="#313131" fill="#313131" style="animation-play-state:paused" ></path>
<path d="M 243 1043 L 398 1042 L 378 852 Z" stroke="#2d2d2d" fill="#2d2d2d" style="animation-play-state:paused" ></path>
<path d="M 615 1273 L 735 1234 L 711 1034 Z" stroke="#2f2f2f" fill="#2f2f2f" style="animation-play-state:paused" ></path>
<path d="M 228 -229 L 127 -27 L 249 -81 Z" stroke="#262626" fill="#262626" style="animation-play-state:paused" ></path>
<path d="M 249 -81 L 127 -27 L 231 76 Z" stroke="#282828" fill="#282828" style="animation-play-state:paused" ></path>
<path d="M -95 228 L -61 428 L 98 258 Z" stroke="#262626" fill="#262626" style="animation-play-state:paused" ></path>
<path d="M 48 539 L 97 718 L 255 601 Z" stroke="#2b2b2b" fill="#2b2b2b" style="animation-play-state:paused" ></path>
<path d="M 735 1234 L 874 1033 L 711 1034 Z" stroke="#333333" fill="#333333" style="animation-play-state:paused" ></path>
<path d="M 917 1238 L 1112 1106 L 874 1033 Z" stroke="#333333" fill="#333333" style="animation-play-state:paused" ></path>
<path d="M 874 1033 L 1112 1106 L 1082 909 Z" stroke="#323232" fill="#323232" style="animation-play-state:paused" ></path>
<path d="M 1215 904 L 1399 912 L 1363 740 Z" stroke="#323232" fill="#323232" style="animation-play-state:paused" ></path>
<path d="M 1344 1018 L 1399 912 L 1215 904 Z" stroke="#343434" fill="#343434" style="animation-play-state:paused" ></path>
<path d="M 1517 254 L 1525 92 L 1376 86 Z" stroke="#313131" fill="#313131" style="animation-play-state:paused" ></path>
<path d="M 1705 741 L 1562 611 L 1492 682 Z" stroke="#313131" fill="#313131" style="animation-play-state:paused" ></path>
<path d="M 1492 682 L 1562 611 L 1347 533 Z" stroke="#333333" fill="#333333" style="animation-play-state:paused" ></path>
<path d="M 1517 254 L 1681 267 L 1525 92 Z" stroke="#2f2f2f" fill="#2f2f2f" style="animation-play-state:paused" ></path>
<path d="M 448 -197 L 228 -229 L 249 -81 Z" stroke="#272727" fill="#272727" style="animation-play-state:paused" ></path>
<path d="M 563 -247 L 228 -229 L 448 -197 Z" stroke="#282828" fill="#282828" style="animation-play-state:paused" ></path>
<path d="M 62 -271 L 228 -229 L 563 -247 Z" stroke="#252525" fill="#252525" style="animation-play-state:paused" ></path>
<path d="M 1263 1089 L 1344 1018 L 1215 904 Z" stroke="#343434" fill="#343434" style="animation-play-state:paused" ></path>
<path d="M 1705 741 L 1633 518 L 1562 611 Z" stroke="#303030" fill="#303030" style="animation-play-state:paused" ></path>
<path d="M 615 1273 L 711 1034 L 572 1052 Z" stroke="#303030" fill="#303030" style="animation-play-state:paused" ></path>
<path d="M -95 228 L 98 258 L 109 132 Z" stroke="#272727" fill="#272727" style="animation-play-state:paused" ></path>
<path d="M 48 539 L -108 691 L 97 718 Z" stroke="#272727" fill="#272727" style="animation-play-state:paused" ></path>
<path d="M 1504 -88 L 1348 -256 L 1418 -32 Z" stroke="#2c2c2c" fill="#2c2c2c" style="animation-play-state:paused" ></path>
<path d="M 1418 -32 L 1348 -256 L 1266 -178 Z" stroke="#2c2c2c" fill="#2c2c2c" style="animation-play-state:paused" ></path>
<path d="M 1266 -178 L 1348 -256 L 1000 -259 Z" stroke="#2c2c2c" fill="#2c2c2c" style="animation-play-state:paused" ></path>
<path d="M 1186 1180 L 1263 1089 L 1112 1106 Z" stroke="#323232" fill="#323232" style="animation-play-state:paused" ></path>
<path d="M 1112 1106 L 1263 1089 L 1215 904 Z" stroke="#343434" fill="#343434" style="animation-play-state:paused" ></path>
<path d="M 70 1031 L 243 1043 L 228 860 Z" stroke="#292929" fill="#292929" style="animation-play-state:paused" ></path>
<path d="M 228 860 L 243 1043 L 378 852 Z" stroke="#2d2d2d" fill="#2d2d2d" style="animation-play-state:paused" ></path>
<path d="M 398 1042 L 385 1176 L 572 1052 Z" stroke="#2e2e2e" fill="#2e2e2e" style="animation-play-state:paused" ></path>
<path d="M 1525 92 L 1504 -88 L 1418 -32 Z" stroke="#2d2d2d" fill="#2d2d2d" style="animation-play-state:paused" ></path>
<path d="M 735 1234 L 917 1238 L 874 1033 Z" stroke="#313131" fill="#313131" style="animation-play-state:paused" ></path>
<path d="M 1633 518 L 1662 360 L 1490 374 Z" stroke="#313131" fill="#313131" style="animation-play-state:paused" ></path>
<path d="M 1525 92 L 1692 -72 L 1504 -88 Z" stroke="#2b2b2b" fill="#2b2b2b" style="animation-play-state:paused" ></path>
<path d="M 1561 938 L 1492 682 L 1399 912 Z" stroke="#323232" fill="#323232" style="animation-play-state:paused" ></path>
<path d="M 1562 611 L 1633 518 L 1490 374 Z" stroke="#323232" fill="#323232" style="animation-play-state:paused" ></path>
<path d="M -108 691 L 44 854 L 97 718 Z" stroke="#272727" fill="#272727" style="animation-play-state:paused" ></path>
<path d="M 97 718 L 44 854 L 228 860 Z" stroke="#2a2a2a" fill="#2a2a2a" style="animation-play-state:paused" ></path>
<path d="M -29 -37 L 109 132 L 127 -27 Z" stroke="#252525" fill="#252525" style="animation-play-state:paused" ></path>
<path d="M -94 64 L -95 228 L 109 132 Z" stroke="#242424" fill="#242424" style="animation-play-state:paused" ></path>
<path d="M 243 1043 L 385 1176 L 398 1042 Z" stroke="#2b2b2b" fill="#2b2b2b" style="animation-play-state:paused" ></path>
<path d="M 1083 1250 L 1186 1180 L 1112 1106 Z" stroke="#313131" fill="#313131" style="animation-play-state:paused" ></path>
<path d="M 1381 1228 L 1480 1021 L 1344 1018 Z" stroke="#2f2f2f" fill="#2f2f2f" style="animation-play-state:paused" ></path>
<path d="M 385 1176 L 615 1273 L 572 1052 Z" stroke="#2d2d2d" fill="#2d2d2d" style="animation-play-state:paused" ></path>
<path d="M 735 1234 L 615 1273 L 917 1238 Z" stroke="#2e2e2e" fill="#2e2e2e" style="animation-play-state:paused" ></path>
<path d="M -165 463 L -95 560 L -61 428 Z" stroke="#242424" fill="#242424" style="animation-play-state:paused" ></path>
<path d="M -61 428 L -95 560 L 48 539 Z" stroke="#262626" fill="#262626" style="animation-play-state:paused" ></path>
<path d="M 1848 229 L 1681 267 L 1662 360 Z" stroke="#2c2c2c" fill="#2c2c2c" style="animation-play-state:paused" ></path>
<path d="M 1662 360 L 1681 267 L 1517 254 Z" stroke="#2f2f2f" fill="#2f2f2f" style="animation-play-state:paused" ></path>
<path d="M 917 1238 L 1083 1250 L 1112 1106 Z" stroke="#303030" fill="#303030" style="animation-play-state:paused" ></path>
<path d="M 615 1273 L 1083 1250 L 917 1238 Z" stroke="#2f2f2f" fill="#2f2f2f" style="animation-play-state:paused" ></path>
<path d="M 62 -271 L -29 -37 L 127 -27 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M -29 -37 L -94 64 L 109 132 Z" stroke="#242424" fill="#242424" style="animation-play-state:paused" ></path>
<path d="M -205 576 L -108 691 L -95 560 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 1381 1228 L 1344 1018 L 1263 1089 Z" stroke="#303030" fill="#303030" style="animation-play-state:paused" ></path>
<path d="M 1344 1018 L 1480 1021 L 1399 912 Z" stroke="#313131" fill="#313131" style="animation-play-state:paused" ></path>
<path d="M 1381 1228 L 1263 1089 L 1186 1180 Z" stroke="#2f2f2f" fill="#2f2f2f" style="animation-play-state:paused" ></path>
<path d="M -165 463 L -61 428 L -197 282 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M -95 560 L -108 691 L 48 539 Z" stroke="#262626" fill="#262626" style="animation-play-state:paused" ></path>
<path d="M 1480 1021 L 1561 938 L 1399 912 Z" stroke="#303030" fill="#303030" style="animation-play-state:paused" ></path>
<path d="M 1669 -243 L 1499 -254 L 1504 -88 Z" stroke="#282828" fill="#282828" style="animation-play-state:paused" ></path>
<path d="M 1504 -88 L 1499 -254 L 1348 -256 Z" stroke="#292929" fill="#292929" style="animation-play-state:paused" ></path>
<path d="M 1348 -256 L 1499 -254 L 1000 -259 Z" stroke="#2a2a2a" fill="#2a2a2a" style="animation-play-state:paused" ></path>
<path d="M 44 854 L 70 1031 L 228 860 Z" stroke="#282828" fill="#282828" style="animation-play-state:paused" ></path>
<path d="M 243 1043 L 221 1179 L 385 1176 Z" stroke="#292929" fill="#292929" style="animation-play-state:paused" ></path>
<path d="M -63 883 L 70 1031 L 44 854 Z" stroke="#262626" fill="#262626" style="animation-play-state:paused" ></path>
<path d="M -197 282 L -61 428 L -95 228 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 1660 874 L 1705 741 L 1492 682 Z" stroke="#2f2f2f" fill="#2f2f2f" style="animation-play-state:paused" ></path>
<path d="M 1633 518 L 1827 557 L 1662 360 Z" stroke="#2e2e2e" fill="#2e2e2e" style="animation-play-state:paused" ></path>
<path d="M 228 -229 L 62 -271 L 127 -27 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 1000 -259 L 62 -271 L 563 -247 Z" stroke="#292929" fill="#292929" style="animation-play-state:paused" ></path>
<path d="M 385 1176 L 221 1179 L 615 1273 Z" stroke="#2a2a2a" fill="#2a2a2a" style="animation-play-state:paused" ></path>
<path d="M 70 1031 L 221 1179 L 243 1043 Z" stroke="#272727" fill="#272727" style="animation-play-state:paused" ></path>
<path d="M 1848 229 L 1753 151 L 1681 267 Z" stroke="#2a2a2a" fill="#2a2a2a" style="animation-play-state:paused" ></path>
<path d="M 1681 267 L 1753 151 L 1525 92 Z" stroke="#2d2d2d" fill="#2d2d2d" style="animation-play-state:paused" ></path>
<path d="M -175 132 L -95 228 L -94 64 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M -175 132 L -197 282 L -95 228 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 1664 1023 L 1660 874 L 1561 938 Z" stroke="#2d2d2d" fill="#2d2d2d" style="animation-play-state:paused" ></path>
<path d="M 1561 938 L 1660 874 L 1492 682 Z" stroke="#303030" fill="#303030" style="animation-play-state:paused" ></path>
<path d="M -108 691 L -63 883 L 44 854 Z" stroke="#252525" fill="#252525" style="animation-play-state:paused" ></path>
<path d="M 70 1031 L 81 1207 L 221 1179 Z" stroke="#252525" fill="#252525" style="animation-play-state:paused" ></path>
<path d="M -161 782 L -63 883 L -108 691 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M -255 -82 L -175 132 L -94 64 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M -255 -82 L -94 64 L -29 -37 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 1753 151 L 1692 -72 L 1525 92 Z" stroke="#2b2b2b" fill="#2b2b2b" style="animation-play-state:paused" ></path>
<path d="M 1083 1250 L 1381 1228 L 1186 1180 Z" stroke="#2e2e2e" fill="#2e2e2e" style="animation-play-state:paused" ></path>
<path d="M 1480 1021 L 1664 1023 L 1561 938 Z" stroke="#2d2d2d" fill="#2d2d2d" style="animation-play-state:paused" ></path>
<path d="M -386 423 L -205 576 L -165 463 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M -165 463 L -205 576 L -95 560 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M -386 423 L -165 463 L -197 282 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M -205 576 L -161 782 L -108 691 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M -63 883 L -33 1101 L 70 1031 Z" stroke="#242424" fill="#242424" style="animation-play-state:paused" ></path>
<path d="M 1815 677 L 1633 518 L 1705 741 Z" stroke="#2d2d2d" fill="#2d2d2d" style="animation-play-state:paused" ></path>
<path d="M 1815 677 L 1827 557 L 1633 518 Z" stroke="#2c2c2c" fill="#2c2c2c" style="animation-play-state:paused" ></path>
<path d="M 1841 857 L 1815 677 L 1705 741 Z" stroke="#2a2a2a" fill="#2a2a2a" style="animation-play-state:paused" ></path>
<path d="M 1874 432 L 1848 229 L 1662 360 Z" stroke="#2a2a2a" fill="#2a2a2a" style="animation-play-state:paused" ></path>
<path d="M 1753 151 L 1880 108 L 1692 -72 Z" stroke="#282828" fill="#282828" style="animation-play-state:paused" ></path>
<path d="M 62 -271 L -69 -239 L -29 -37 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 1858 -230 L 1669 -243 L 1692 -72 Z" stroke="#242424" fill="#242424" style="animation-play-state:paused" ></path>
<path d="M 1692 -72 L 1669 -243 L 1504 -88 Z" stroke="#282828" fill="#282828" style="animation-play-state:paused" ></path>
<path d="M -250 1042 L -33 1101 L -63 883 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M -33 1101 L 81 1207 L 70 1031 Z" stroke="#242424" fill="#242424" style="animation-play-state:paused" ></path>
<path d="M 221 1179 L 81 1207 L 615 1273 Z" stroke="#282828" fill="#282828" style="animation-play-state:paused" ></path>
<path d="M 1573 1229 L 1664 1023 L 1480 1021 Z" stroke="#2b2b2b" fill="#2b2b2b" style="animation-play-state:paused" ></path>
<path d="M 1660 874 L 1841 857 L 1705 741 Z" stroke="#2b2b2b" fill="#2b2b2b" style="animation-play-state:paused" ></path>
<path d="M 1993 403 L 1874 432 L 2058 625 Z" stroke="#262626" fill="#262626" style="animation-play-state:paused" ></path>
<path d="M 1827 557 L 1874 432 L 1662 360 Z" stroke="#2b2b2b" fill="#2b2b2b" style="animation-play-state:paused" ></path>
<path d="M 1982 39 L 1880 108 L 2065 306 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 1848 229 L 1880 108 L 1753 151 Z" stroke="#282828" fill="#282828" style="animation-play-state:paused" ></path>
<path d="M -69 -239 L -201 -175 L -29 -37 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M -175 132 L -329 131 L -197 282 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 1664 1023 L 1841 857 L 1660 874 Z" stroke="#2b2b2b" fill="#2b2b2b" style="animation-play-state:paused" ></path>
<path d="M 2058 625 L 1874 432 L 1827 557 Z" stroke="#272727" fill="#272727" style="animation-play-state:paused" ></path>
<path d="M -201 -175 L -255 -82 L -29 -37 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M -161 782 L -230 875 L -63 883 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M -33 1101 L -80 1213 L 81 1207 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M -426 708 L -230 875 L -161 782 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M -426 708 L -161 782 L -205 576 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M -255 -82 L -329 131 L -175 132 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 1880 108 L 1867 -61 L 1692 -72 Z" stroke="#262626" fill="#262626" style="animation-play-state:paused" ></path>
<path d="M -329 131 L -366 289 L -197 282 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 1381 1228 L 1573 1229 L 1480 1021 Z" stroke="#2c2c2c" fill="#2c2c2c" style="animation-play-state:paused" ></path>
<path d="M 1664 1023 L 1835 1052 L 1841 857 Z" stroke="#282828" fill="#282828" style="animation-play-state:paused" ></path>
<path d="M 1083 1250 L 1573 1229 L 1381 1228 Z" stroke="#2c2c2c" fill="#2c2c2c" style="animation-play-state:paused" ></path>
<path d="M -366 289 L -386 423 L -197 282 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M -386 423 L -368 597 L -205 576 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M -250 1042 L -80 1213 L -33 1101 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 81 1207 L -203 1242 L 615 1273 Z" stroke="#242424" fill="#242424" style="animation-play-state:paused" ></path>
<path d="M 2058 625 L 1827 557 L 1815 677 Z" stroke="#282828" fill="#282828" style="animation-play-state:paused" ></path>
<path d="M 1874 432 L 1993 403 L 1848 229 Z" stroke="#272727" fill="#272727" style="animation-play-state:paused" ></path>
<path d="M 1880 108 L 1982 39 L 1867 -61 Z" stroke="#242424" fill="#242424" style="animation-play-state:paused" ></path>
<path d="M 2009 -55 L 1858 -230 L 1867 -61 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 1867 -61 L 1858 -230 L 1692 -72 Z" stroke="#242424" fill="#242424" style="animation-play-state:paused" ></path>
<path d="M 2065 306 L 1880 108 L 1848 229 Z" stroke="#252525" fill="#252525" style="animation-play-state:paused" ></path>
<path d="M -426 851 L -250 1042 L -230 875 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M -230 875 L -250 1042 L -63 883 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 1840 1181 L 1835 1052 L 1664 1023 Z" stroke="#272727" fill="#272727" style="animation-play-state:paused" ></path>
<path d="M 2057 791 L 2058 625 L 1815 677 Z" stroke="#252525" fill="#252525" style="animation-play-state:paused" ></path>
<path d="M -386 423 L -426 708 L -368 597 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M -368 597 L -426 708 L -205 576 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M -437 -113 L -426 708 L -386 423 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 1993 403 L 2065 306 L 1848 229 Z" stroke="#252525" fill="#252525" style="animation-play-state:paused" ></path>
<path d="M 2214 435 L 2065 306 L 1993 403 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 1573 1229 L 1744 1248 L 1664 1023 Z" stroke="#282828" fill="#282828" style="animation-play-state:paused" ></path>
<path d="M 1083 1250 L 1744 1248 L 1573 1229 Z" stroke="#2a2a2a" fill="#2a2a2a" style="animation-play-state:paused" ></path>
<path d="M 615 1273 L 1744 1248 L 1083 1250 Z" stroke="#2e2e2e" fill="#2e2e2e" style="animation-play-state:paused" ></path>
<path d="M 1981 863 L 1815 677 L 1841 857 Z" stroke="#272727" fill="#272727" style="animation-play-state:paused" ></path>
<path d="M 1984 1019 L 1841 857 L 1835 1052 Z" stroke="#252525" fill="#252525" style="animation-play-state:paused" ></path>
<path d="M 1984 1019 L 1981 863 L 1841 857 Z" stroke="#252525" fill="#252525" style="animation-play-state:paused" ></path>
<path d="M -426 708 L -426 851 L -230 875 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 2134 69 L 2009 -55 L 1982 39 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 1982 39 L 2009 -55 L 1867 -61 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M -372 1092 L -203 1242 L -250 1042 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M -250 1042 L -203 1242 L -80 1213 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M -80 1213 L -203 1242 L 81 1207 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M -201 -175 L -390 -221 L -255 -82 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M -255 -82 L -437 -113 L -329 131 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M -329 131 L -437 -113 L -366 289 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M -366 289 L -437 -113 L -386 423 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M -69 -239 L -390 -221 L -201 -175 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 62 -271 L -390 -221 L -69 -239 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 1744 1248 L 1840 1181 L 1664 1023 Z" stroke="#262626" fill="#262626" style="animation-play-state:paused" ></path>
<path d="M -390 -221 L -437 -113 L -255 -82 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M -426 708 L -437 -113 L -426 851 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 1981 863 L 2057 791 L 1815 677 Z" stroke="#252525" fill="#252525" style="animation-play-state:paused" ></path>
<path d="M 2214 435 L 2154 244 L 2065 306 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 2149 853 L 2057 791 L 1981 863 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M -426 851 L -372 1092 L -250 1042 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 2008 1204 L 1984 1019 L 1835 1052 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 2214 435 L 1993 403 L 2058 625 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 2065 306 L 2154 244 L 1982 39 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 2154 244 L 2134 69 L 1982 39 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 2009 -55 L 2078 -162 L 1858 -230 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 2137 -107 L 2078 -162 L 2009 -55 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 2210 620 L 2058 625 L 2194 780 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 2210 620 L 2214 435 L 2058 625 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 2154 244 L 2201 -189 L 2134 69 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 1984 1019 L 2149 853 L 1981 863 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 2201 -189 L 2137 -107 L 2134 69 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 2134 69 L 2137 -107 L 2009 -55 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M -426 851 L -363 1239 L -372 1092 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M -372 1092 L -363 1239 L -203 1242 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 2194 780 L 2058 625 L 2057 791 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 1840 1181 L 2008 1204 L 1835 1052 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 1984 1019 L 2197 1075 L 2149 853 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 2149 853 L 2194 780 L 2057 791 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 1744 1248 L 2008 1204 L 1840 1181 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 2197 1075 L 2194 780 L 2149 853 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 2137 -107 L 2201 -189 L 2078 -162 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 2078 -162 L 2201 -189 L 1858 -230 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 2214 435 L 2201 -189 L 2154 244 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 2210 620 L 2201 -189 L 2214 435 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 2008 1204 L 2197 1075 L 1984 1019 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 2194 780 L 2197 1075 L 2210 620 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 1744 1248 L 2154 1186 L 2008 1204 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path>
<path d="M 2008 1204 L 2154 1186 L 2197 1075 Z" stroke="#232323" fill="#232323" style="animation-play-state:paused" ></path></g>
<style type="text/css" style="animation-play-state:paused" >#bk-0.35690698268105336 path { stroke-width: 1 }</style></g></svg>

After

Width:  |  Height:  |  Size: 39 KiB

BIN
src/img/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

View File

@ -1,5 +1,6 @@
import React from "react";
import '../css/pages/Login.css';
import logoImg from '../img/logo.png';
import { post } from "../util/Util";
const loginMethods = [
@ -10,6 +11,7 @@ const loginMethods = [
];
const Login = () => {
document.body.classList.add('bg-triangles');
const loginClick = async () => {
const username = document.getElementById('username').value;
@ -20,29 +22,35 @@ const Login = () => {
};
return <div className='login'>
<div>
<h2>Log in</h2>
return <div className="row is-center is-full-screen is-marginless">
<div className='col-6 col-6-md col-3-lg'>
<div className="is-center">
<img className="logoImg mb-4" src={logoImg}></img>
</div>
<div className="card mb-3 is-center dir-column">
<h2>Log in</h2>
<input autoComplete='off' placeholder='Username' required id='username' type='text' autoFocus />
<input autoComplete='off' placeholder='Password' required id='password' type='password' />
<button onClick={loginClick}>Enter</button>
</div>
<div className="card is-center dir-column">
<b>Alternate login methods</b>
<div className="methodsWrapper is-center flex-wrap">
{loginMethods.map(method => <img
className='third-party-login'
key={method.name}
alt={method.name}
src={method.img}
width={48} height={48}
onClick={() => { window.location.pathname = `/api/login/${method.name}`; }}
/>)}
</div>
</div>
<input autoComplete='off' placeholder='Username' required id='username' type='text' autoFocus /><br />
<input autoComplete='off' placeholder='Password' required id='password' type='password' /><br />
<button onClick={loginClick}>Enter</button>
</div>
<div>
<b>Alternate login methods</b> <br />
{loginMethods.map(method => <img
className='third-party-login'
key={method.name}
alt={method.name}
src={method.img}
width={48} height={48}
onClick={() => { window.location.pathname = `/api/login/${method.name}`; }}
/>)}
</div>
</div>;
};

9191
yarn.lock

File diff suppressed because it is too large Load Diff