frontpage/pages/404.tsx

82 lines
4.0 KiB
TypeScript
Raw Permalink Normal View History

2022-01-17 12:38:48 +01:00
import type { NextPage } 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";
const svg = `
<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 -->
<text x="120" y="120" style="font-size:4em;font-weight:bold;fill:#000000;transform:rotateX(40deg) rotateY(21deg);">404</text>
<!-- 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>
`;
const Custom404: NextPage = () => {
2022-10-20 17:53:28 +02:00
return <>
<Head><title>Error 404 - c0ntroller.de</title></Head>
<div className={styles.container}>
2022-01-17 12:38:48 +01:00
<div id={styles.wrapper}>
<div id={styles.box} dangerouslySetInnerHTML={{__html: svg}}>
</div>
<div id={styles.errorText}>
The site you requested could not be found.<br/>
<Link href="/"><a>&gt; Back to the main page &lt;</a></Link>
</div>
</div>
2022-10-20 17:53:28 +02:00
</div></>;
2022-01-17 12:38:48 +01:00
};
export default Custom404;