2022-11-23 21:22:49 +00:00
|
|
|
import React, { useState } from 'react';
|
2022-01-14 01:38:50 +00:00
|
|
|
import { keyframes } from '@stitches/react';
|
2022-01-14 19:17:24 +00:00
|
|
|
import { Trans, useTranslation } from 'react-i18next';
|
2022-12-22 12:35:30 +00:00
|
|
|
import {
|
|
|
|
DiscordLogoIcon,
|
|
|
|
EnvelopeClosedIcon,
|
|
|
|
GitHubLogoIcon,
|
|
|
|
TwitterLogoIcon,
|
|
|
|
} from '@radix-ui/react-icons';
|
2022-11-23 21:22:49 +00:00
|
|
|
import { useNavigate } from 'react-router-dom';
|
2022-01-14 01:38:50 +00:00
|
|
|
|
|
|
|
// @ts-expect-error Asset import
|
2022-12-08 11:27:10 +00:00
|
|
|
import logo from '~/assets/icon-logo.svg';
|
|
|
|
|
|
|
|
import { APPNAME, PageContainer, PageHeader, styled } from '../theme';
|
|
|
|
import BrowserLink from '../components/BrowserLink';
|
2022-01-14 01:38:50 +00:00
|
|
|
|
|
|
|
const gradientAnimation = keyframes({
|
|
|
|
'0%': {
|
|
|
|
backgroundPosition: '0% 50%',
|
|
|
|
},
|
|
|
|
'50%': {
|
|
|
|
backgroundPosition: '100% 50%',
|
|
|
|
},
|
|
|
|
'100%': {
|
|
|
|
backgroundPosition: '0% 50%',
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
const LogoPic = styled('div', {
|
|
|
|
minHeight: '170px',
|
2022-11-25 12:44:00 +00:00
|
|
|
width: '220px',
|
|
|
|
marginRight: '10px',
|
2022-11-18 14:46:50 +00:00
|
|
|
maskImage: `url(${logo as string})`,
|
2022-01-14 01:38:50 +00:00
|
|
|
maskRepeat: 'no-repeat',
|
|
|
|
maskPosition: 'center',
|
2022-11-18 14:46:50 +00:00
|
|
|
animation: `${gradientAnimation()} 12s ease infinite`,
|
2022-01-14 01:38:50 +00:00
|
|
|
backgroundSize: '400% 400%',
|
|
|
|
backgroundImage: `linear-gradient(
|
|
|
|
45deg,
|
|
|
|
hsl(240deg 100% 20%) 0%,
|
|
|
|
hsl(289deg 100% 21%) 11%,
|
|
|
|
hsl(315deg 100% 27%) 22%,
|
|
|
|
hsl(329deg 100% 36%) 33%,
|
|
|
|
hsl(337deg 100% 43%) 44%,
|
|
|
|
hsl(357deg 91% 59%) 56%,
|
|
|
|
hsl(17deg 100% 59%) 67%,
|
|
|
|
hsl(34deg 100% 53%) 78%,
|
|
|
|
hsl(45deg 100% 50%) 89%,
|
|
|
|
hsl(55deg 100% 50%) 100%
|
|
|
|
)`,
|
|
|
|
});
|
|
|
|
|
|
|
|
const LogoName = styled('h1', {
|
|
|
|
fontSize: '40pt',
|
|
|
|
fontWeight: 200,
|
2022-11-25 12:44:00 +00:00
|
|
|
textAlign: 'left',
|
2022-01-14 01:38:50 +00:00
|
|
|
'@medium': {
|
2022-12-03 16:28:47 +00:00
|
|
|
fontSize: '60pt',
|
2022-01-14 01:38:50 +00:00
|
|
|
},
|
|
|
|
paddingBottom: '0.5rem',
|
|
|
|
});
|
2022-01-14 00:41:46 +00:00
|
|
|
|
2022-01-14 19:17:24 +00:00
|
|
|
const Section = styled('section', {});
|
|
|
|
const SectionHeader = styled('h2', {});
|
|
|
|
const SectionParagraph = styled('p', {
|
|
|
|
lineHeight: '1.5',
|
|
|
|
paddingBottom: '1rem',
|
|
|
|
});
|
|
|
|
const ChannelList = styled('ul', { listStyle: 'none', padding: 0, margin: 0 });
|
|
|
|
const Channel = styled('li', {
|
|
|
|
marginBottom: '1rem',
|
2022-12-03 16:28:47 +00:00
|
|
|
fontSize: '1rem',
|
2022-01-14 19:17:24 +00:00
|
|
|
});
|
2022-11-18 19:28:13 +00:00
|
|
|
const ChannelLink = styled(BrowserLink, {
|
2022-01-14 19:17:24 +00:00
|
|
|
textDecoration: 'none',
|
2022-01-17 16:13:31 +00:00
|
|
|
color: '$teal11',
|
2022-01-14 19:17:24 +00:00
|
|
|
display: 'inline-flex',
|
|
|
|
flexDirection: 'row',
|
|
|
|
gap: '0.5rem',
|
|
|
|
alignItems: 'center',
|
|
|
|
'&:hover': {
|
|
|
|
textDecoration: 'underline',
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
2022-12-22 12:35:30 +00:00
|
|
|
export const channels = (
|
|
|
|
<ChannelList>
|
|
|
|
<Channel>
|
|
|
|
<ChannelLink href="https://github.com/strimertul/strimertul/issues">
|
|
|
|
<GitHubLogoIcon width={24} height={24} />
|
|
|
|
github.com/strimertul/strimertul/issues
|
|
|
|
</ChannelLink>
|
|
|
|
</Channel>
|
|
|
|
<Channel>
|
|
|
|
<ChannelLink href="https://nebula.cafe/discord">
|
|
|
|
<DiscordLogoIcon width={24} height={24} />
|
|
|
|
nebula.cafe/discord
|
|
|
|
</ChannelLink>
|
|
|
|
</Channel>
|
|
|
|
<Channel>
|
|
|
|
<ChannelLink href="mailto:strimertul@nebula.cafe">
|
|
|
|
<EnvelopeClosedIcon width={24} height={24} />
|
|
|
|
strimertul@nebula.cafe
|
|
|
|
</ChannelLink>
|
|
|
|
</Channel>
|
|
|
|
</ChannelList>
|
|
|
|
);
|
|
|
|
|
2022-01-14 00:41:46 +00:00
|
|
|
export default function StrimertulPage(): React.ReactElement {
|
2022-11-23 21:22:49 +00:00
|
|
|
const navigate = useNavigate();
|
2022-01-14 19:17:24 +00:00
|
|
|
const { t } = useTranslation();
|
2022-11-23 21:22:49 +00:00
|
|
|
const [debugCount, setDebugCount] = useState(0);
|
|
|
|
const countForDebug = () => {
|
|
|
|
if (debugCount < 5) {
|
2022-11-25 12:44:00 +00:00
|
|
|
setDebugCount(debugCount + 1);
|
2022-11-23 21:22:49 +00:00
|
|
|
} else {
|
2022-11-25 12:44:00 +00:00
|
|
|
navigate('/debug');
|
2022-11-23 21:22:49 +00:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2022-01-14 01:38:50 +00:00
|
|
|
return (
|
|
|
|
<PageContainer>
|
|
|
|
<PageHeader
|
|
|
|
css={{
|
|
|
|
display: 'flex',
|
|
|
|
alignItems: 'center',
|
|
|
|
flexDirection: 'column',
|
|
|
|
justifyContent: 'center',
|
|
|
|
'@medium': {
|
|
|
|
flexDirection: 'row',
|
|
|
|
},
|
|
|
|
}}
|
|
|
|
>
|
2022-01-17 16:13:31 +00:00
|
|
|
<LogoPic
|
|
|
|
style={{
|
|
|
|
WebkitMaskRepeat: 'no-repeat',
|
|
|
|
WebkitMaskPosition: 'center',
|
|
|
|
}}
|
2022-11-23 21:22:49 +00:00
|
|
|
onClick={countForDebug}
|
2022-01-17 16:13:31 +00:00
|
|
|
/>
|
2022-01-14 01:38:50 +00:00
|
|
|
<LogoName>{APPNAME}</LogoName>
|
|
|
|
</PageHeader>
|
2022-01-14 19:17:24 +00:00
|
|
|
<Section>
|
|
|
|
<SectionHeader>{t('pages.strimertul.need-help')}</SectionHeader>
|
2022-12-03 16:28:47 +00:00
|
|
|
<SectionParagraph css={{ paddingBottom: 0 }}>
|
2022-12-07 10:47:53 +00:00
|
|
|
{t('pages.strimertul.need-help-p1')}
|
2022-01-14 19:17:24 +00:00
|
|
|
</SectionParagraph>
|
2022-12-22 12:35:30 +00:00
|
|
|
{channels}
|
2022-01-14 19:17:24 +00:00
|
|
|
</Section>
|
2022-12-03 16:28:47 +00:00
|
|
|
<Section>
|
|
|
|
<SectionHeader>{t('pages.strimertul.credits-header')}</SectionHeader>
|
|
|
|
<SectionParagraph>
|
|
|
|
<Trans
|
|
|
|
t={t}
|
|
|
|
i18nKey="pages.strimertul.credits-renko"
|
|
|
|
components={{
|
|
|
|
artist: (
|
|
|
|
<BrowserLink href="https://twitter.com/Sonic__Chan">
|
|
|
|
Sonic_Chan
|
|
|
|
</BrowserLink>
|
|
|
|
),
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</SectionParagraph>
|
|
|
|
</Section>
|
2022-01-14 19:17:24 +00:00
|
|
|
<Section>
|
|
|
|
<SectionHeader>{t('pages.strimertul.license-header')}</SectionHeader>
|
|
|
|
<SectionParagraph>
|
|
|
|
<Trans
|
|
|
|
t={t}
|
|
|
|
i18nKey="pages.strimertul.license-notice-strimertul"
|
|
|
|
components={{
|
|
|
|
license: (
|
2022-11-18 19:28:13 +00:00
|
|
|
<BrowserLink href="https://github.com/strimertul/strimertul/blob/master/LICENSE">
|
2022-01-14 19:17:24 +00:00
|
|
|
GNU Affero General Public License v3.0
|
2022-11-18 19:28:13 +00:00
|
|
|
</BrowserLink>
|
2022-01-14 19:17:24 +00:00
|
|
|
),
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</SectionParagraph>
|
|
|
|
</Section>
|
2022-01-14 01:38:50 +00:00
|
|
|
</PageContainer>
|
|
|
|
);
|
2022-01-14 00:41:46 +00:00
|
|
|
}
|