2022-10-16 00:16:29 +02:00
|
|
|
import { NextPage, NextPageContext } from "next";
|
2022-10-20 17:53:28 +02:00
|
|
|
import Head from "next/head";
|
2022-01-17 12:38:48 +01:00
|
|
|
import Link from "next/link";
|
|
|
|
|
import styles from "../styles/Errorpage.module.css";
|
|
|
|
|
|
2022-10-16 00:16:29 +02:00
|
|
|
const Error: NextPage<{ statusCode?: number }> = ({ statusCode }) => {
|
|
|
|
|
const svg = `
|
2022-01-17 12:38:48 +01:00
|
|
|
<svg viewBox="30 -20 450 280" x="0" y="0">
|
|
|
|
|
<!-- Box -->
|
|
|
|
|
<polygon points="100,70 170,0 370,50 370,180" style="fill:#b58747;" />
|
|
|
|
|
<defs>
|
|
|
|
|
<linearGradient id="shadow_grad1" x1="50%" y1="0%" x2="0%" y2="50%">
|
|
|
|
|
<stop offset="0%" style="stop-color:#876029;stop-opacity:1" />
|
|
|
|
|
<stop offset="100%" style="stop-color:#000000;stop-opacity:1" />
|
|
|
|
|
</linearGradient>
|
|
|
|
|
</defs>
|
|
|
|
|
<defs>
|
|
|
|
|
<linearGradient id="shadow_grad2" x1="0%" y1="0%" x2="50%" y2="100%">
|
|
|
|
|
<stop offset="0%" style="stop-color:#876029;stop-opacity:1" />
|
|
|
|
|
<stop offset="100%" style="stop-color:#000000;stop-opacity:1" />
|
|
|
|
|
</linearGradient>
|
|
|
|
|
</defs>
|
|
|
|
|
<polygon points="100,70 170,0 330,100 300,120" style="fill:#876029;fill:url(#shadow_grad1)" />
|
|
|
|
|
<polygon points="100,70 170,0 170,130 100,200, 100,70" style="fill:#876029;fill:url(#shadow_grad2)"/>
|
|
|
|
|
<line x1="170" y1="0" x2="370" y2="50" style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;"/>
|
|
|
|
|
<line x1="170" y1="0" x2="170" y2="130" style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;"/>
|
|
|
|
|
<!-- Katzenschweif -->
|
|
|
|
|
<path id="${styles.schweif}" d="M 280,120 C 250 100, 310 70, 320 20" style="fill:transparent;stroke:black;stroke-width:10;stroke-linecap:round" />
|
|
|
|
|
<!-- Box-linien -->
|
|
|
|
|
<polygon points="100,70 300,120 370,50 370,180 300,250 100,200" style="fill:#d19b4f;" />
|
|
|
|
|
<g style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;">
|
|
|
|
|
<line x1="100" y1="70" x2="100" y2="200" />
|
|
|
|
|
<line x1="100" y1="200" x2="300" y2="250" />
|
|
|
|
|
<line x1="300" y1="250" x2="300" y2="120" />
|
|
|
|
|
<line x1="100" y1="70" x2="300" y2="120" />
|
|
|
|
|
<line x1="300" y1="120" x2="370" y2="50" />
|
|
|
|
|
<line x1="300" y1="250" x2="370" y2="180" />
|
|
|
|
|
<line x1="370" y1="50" x2="370" y2="180" />
|
|
|
|
|
</g>
|
|
|
|
|
<!-- Lappen-rechts -->
|
|
|
|
|
<polygon points="300,120 350,150 420,80 370,50" style="fill:#b58747;" />
|
|
|
|
|
<g style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;">
|
|
|
|
|
<line x1="300" y1="120" x2="370" y2="50" />
|
|
|
|
|
<line x1="300" y1="120" x2="350" y2="150" />
|
|
|
|
|
<line x1="350" y1="150" x2="420" y2="80" />
|
|
|
|
|
<line x1="370" y1="50" x2="420" y2="80" />
|
|
|
|
|
</g>
|
|
|
|
|
<!-- Lappen-links -->
|
|
|
|
|
<polygon points="100,70 50,100 120,30 170,0" style="fill:#b58747;" />
|
|
|
|
|
<g style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;">
|
|
|
|
|
<line x1="100" y1="70" x2="170" y2="0" />
|
|
|
|
|
<line x1="100" y1="70" x2="50" y2="100" />
|
|
|
|
|
<line x1="50" y1="100" x2="120" y2="30" />
|
|
|
|
|
<line x1="170" y1="0" x2="120" y2="30" />
|
|
|
|
|
</g>
|
|
|
|
|
<!-- Text -->
|
2022-10-16 00:16:29 +02:00
|
|
|
<text x="120" y="120" style="font-size:4em;font-weight:bold;fill:#000000;transform:rotateX(40deg) rotateY(21deg);">${statusCode ? statusCode : "???"}</text>
|
2022-01-17 12:38:48 +01:00
|
|
|
<!-- Killeraugen -->
|
|
|
|
|
<ellipse cx="275" cy="150" rx="32" ry="20" style="fill:#291e0f;transform:rotateZ(12deg)" />
|
|
|
|
|
<ellipse cx="266" cy="153" rx="7" ry="5" style="fill:#4a6b2a;transform:rotateZ(12deg)" />
|
|
|
|
|
<ellipse cx="266" cy="153" rx="2" ry="5" style="fill:#000000;transform:rotateZ(12deg)" />
|
|
|
|
|
<ellipse cx="285" cy="153" rx="7" ry="5" style="fill:#4a6b2a;transform:rotateZ(12deg)" />
|
|
|
|
|
<ellipse cx="285" cy="153" rx="2" ry="5" style="fill:#000000;transform:rotateZ(12deg)" />
|
|
|
|
|
<rect id="${styles.blinzeln}" width="40" height="22" x="255" y="139" style="fill:#291e0f;transform:rotateZ(12deg);" />
|
|
|
|
|
</svg>
|
|
|
|
|
`;
|
|
|
|
|
|
2022-10-20 17:53:28 +02:00
|
|
|
return <>
|
|
|
|
|
<Head><title>Error {statusCode} - c0ntroller.de</title></Head>
|
|
|
|
|
<div className={styles.container}>
|
2022-01-17 12:38:48 +01:00
|
|
|
<div id={styles.wrapper}>
|
2022-10-16 00:16:29 +02:00
|
|
|
<div id={styles.box} dangerouslySetInnerHTML={{ __html: svg }}>
|
2022-01-17 12:38:48 +01:00
|
|
|
</div>
|
|
|
|
|
<div id={styles.errorText}>
|
2022-10-16 00:16:29 +02:00
|
|
|
{ statusCode === 404 ? "The site you requested could not be found." : "An error occurred." }
|
|
|
|
|
<br />
|
2022-01-17 12:38:48 +01:00
|
|
|
<Link href="/"><a>> Back to the main page <</a></Link>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2022-10-20 17:53:28 +02:00
|
|
|
</div></>;
|
2022-01-17 12:38:48 +01:00
|
|
|
};
|
|
|
|
|
|
2022-10-16 00:16:29 +02:00
|
|
|
Error.getInitialProps = ({ res, err }: NextPageContext) => {
|
|
|
|
|
const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
|
|
|
|
|
return { statusCode };
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default Error;
|
