127 lines
4.8 KiB
TypeScript
127 lines
4.8 KiB
TypeScript
"use client";
|
||
|
||
import React, { useEffect, useState } from "react";
|
||
|
||
// Google Fonts'u içe aktarmak için bileşen dışına ekliyoruz
|
||
const fontImport = `
|
||
@import url('https://fonts.googleapis.com/css?family=Encode+Sans+Semi+Condensed:100,200,300,400');
|
||
|
||
@keyframes clockwise {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
@keyframes anticlockwise {
|
||
0% { transform: rotate(360deg); }
|
||
100% { transform: rotate(0deg); }
|
||
}
|
||
@keyframes clockwiseError {
|
||
0% { transform: rotate(0deg); }
|
||
20% { transform: rotate(30deg); }
|
||
40% { transform: rotate(25deg); }
|
||
60% { transform: rotate(30deg); }
|
||
100% { transform: rotate(0deg); }
|
||
}
|
||
@keyframes anticlockwiseError {
|
||
0% { transform: rotate(0deg); }
|
||
20% { transform: rotate(-30deg); }
|
||
40% { transform: rotate(-25deg); }
|
||
60% { transform: rotate(-30deg); }
|
||
100% { transform: rotate(0deg); }
|
||
}
|
||
@keyframes anticlockwiseErrorStop {
|
||
0% { transform: rotate(0deg); }
|
||
20% { transform: rotate(-30deg); }
|
||
60% { transform: rotate(-30deg); }
|
||
100% { transform: rotate(0deg); }
|
||
}
|
||
`;
|
||
|
||
export default function ErrorPage() {
|
||
const [isLoading, setIsLoading] = useState(true);
|
||
|
||
useEffect(() => {
|
||
const timer = setTimeout(() => setIsLoading(false), 1000);
|
||
return () => clearTimeout(timer);
|
||
}, []);
|
||
|
||
return (
|
||
<div className="min-h-screen bg-white flex flex-col items-center justify-start overflow-hidden font-['Encode_Sans_Semi_Condensed',_sans-serif]">
|
||
<style dangerouslySetInnerHTML={{ __html: fontImport }} />
|
||
|
||
<h1
|
||
className={`text-[10rem] leading-40 font-extralight text-black transition-all duration-500 ease-linear
|
||
${isLoading ? "mt-0 opacity-0" : "mt-[100px] opacity-100"}`}
|
||
>
|
||
500
|
||
</h1>
|
||
|
||
<h2
|
||
className={`text-[1.5rem] font-extralight text-black mt-5 mb-[30px] transition-all duration-500 ease-linear
|
||
${isLoading ? "mt-0 opacity-0" : "opacity-100"}`}
|
||
>
|
||
Unexpected Error <b className="font-bold">:(</b>
|
||
</h2>
|
||
|
||
<div className="relative w-auto h-0">
|
||
{/* Gear One */}
|
||
<div
|
||
className="relative w-[120px] h-[120px] rounded-full bg-black mx-auto -left-[130px]
|
||
before:content-[''] before:absolute before:inset-[5px] before:bg-[#eaeaea] before:rounded-full before:z-20
|
||
after:content-[''] after:absolute after:inset-[25px] after:border-[5px] after:border-black after:rounded-full after:z-30 after:bg-[#eaeaea]"
|
||
style={{
|
||
animation: isLoading
|
||
? "clockwise 3s linear infinite"
|
||
: "anticlockwiseErrorStop 2s linear infinite",
|
||
}}
|
||
>
|
||
<GearBars />
|
||
</div>
|
||
|
||
{/* Gear Two */}
|
||
<div
|
||
className="relative w-[120px] h-[120px] rounded-full bg-black mx-auto -top-[75px]
|
||
before:content-[''] before:absolute before:inset-[5px] before:bg-[#eaeaea] before:rounded-full before:z-20
|
||
after:content-[''] after:absolute after:inset-[25px] after:border-[5px] after:border-black after:rounded-full after:z-30 after:bg-[#eaeaea]"
|
||
style={{
|
||
animation: isLoading
|
||
? "anticlockwise 3s linear infinite"
|
||
: "anticlockwiseError 2s linear infinite",
|
||
}}
|
||
>
|
||
<GearBars />
|
||
</div>
|
||
|
||
{/* Gear Three */}
|
||
<div
|
||
className="relative w-[120px] h-[120px] rounded-full bg-black mx-auto -top-[235px] left-[130px]
|
||
before:content-[''] before:absolute before:inset-[5px] before:bg-[#eaeaea] before:rounded-full before:z-20
|
||
after:content-[''] after:absolute after:inset-[25px] after:border-[5px] after:border-black after:rounded-full after:z-30 after:bg-[#eaeaea]"
|
||
style={{
|
||
animation: isLoading
|
||
? "clockwise 3s linear infinite"
|
||
: "clockwiseError 2s linear infinite",
|
||
}}
|
||
>
|
||
<GearBars />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function GearBars() {
|
||
return (
|
||
<>
|
||
<div className="absolute left-[-15px] top-1/2 w-[150px] h-[30px] -mt-[15px] rounded-[5px] bg-black z-0 before:content-[''] before:absolute before:inset-[5px] before:bg-[#eaeaea] before:rounded-[2px] before:z-[1]" />
|
||
<div
|
||
className="absolute left-[-15px] top-1/2 w-[150px] h-[30px] -mt-[15px] rounded-[5px] bg-black z-0 rotate-60 before:content-[''] before:absolute before:inset-[5px] before:bg-[#eaeaea] before:rounded-[2px] before:z-[1]"
|
||
style={{ transform: "rotate(60deg)" }}
|
||
/>
|
||
<div
|
||
className="absolute left-[-15px] top-1/2 w-[150px] h-[30px] -mt-[15px] rounded-[5px] bg-black z-0 rotate-120 before:content-[''] before:absolute before:inset-[5px] before:bg-[#eaeaea] before:rounded-[2px] before:z-[1]"
|
||
style={{ transform: "rotate(120deg)" }}
|
||
/>
|
||
</>
|
||
);
|
||
}
|