diff --git a/.htaccess b/.htaccess new file mode 100644 index 0000000000000000000000000000000000000000..00323d21ac87458145755c538e31e4ed8f5b299c --- /dev/null +++ b/.htaccess @@ -0,0 +1 @@ +ErrorDocument 404 "/error/404.php" \ No newline at end of file diff --git a/error/404.php b/error/404.php new file mode 100644 index 0000000000000000000000000000000000000000..d1cd28cbac017fab6f689779f6428a716fefd443 --- /dev/null +++ b/error/404.php @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <title>Error 404</title> + <link rel="stylesheet" type="text/css" href="/public/css/error404.css"> +</head> +<body> + <section> + <?php for ($i = 0; $i < 260; $i++) { ?> + <span></span> + <?php } ?> + + <div class="random404"> + <h1>404</h1> + </div> + <div class="mahasiswa"> + <h1>Mahasiswa</h1> + <h1>Leveling</h1> + </div> + <div class="error404"> + <div class="error404-content"> + + <h2>Page Not Found</h2> + <p>The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.</p> + <button id="btn" class="btn" onclick="window.location.href='/app/views/landing/'">Back to Home</button> + </div> + </div> + </section> +</body> +</html> \ No newline at end of file diff --git a/public/css/error404.css b/public/css/error404.css new file mode 100644 index 0000000000000000000000000000000000000000..d3ab765a3f76906b93a7dd9cc8032e8b2848cf1b --- /dev/null +++ b/public/css/error404.css @@ -0,0 +1,159 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Quicksand', sans-serif; +} + +body { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: #000; +} + +section { + position: absolute; + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + gap: 2px; + flex-wrap: wrap; + overflow: hidden; +} + +section::before { + content: ''; + position: absolute; + width: 100%; + height: 100%; + background: linear-gradient(black,red,orange,blue,green,yellow,red,black); + animation: animate 15s linear infinite; +} + +section span { + position: relative; + display: block; + width: calc(6.25vw - 2px); + height: calc(6.25vw - 2px); + background: #181818; + z-index: 2; + transition: 1.5s; +} + +section span:hover { + background: crimson; + transition: 0s; +} + +section .error404 { + position: absolute; + width: 60%; + height: 60%; + background: transparent; + z-index: 1000; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + padding: 20px; +} + +section .random404, +section .mahasiswa, +section .leveling { + position: absolute; + width: 100%; + height: 100%; + background: transparent; + z-index: 1000; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + padding: 0; +} + +section .random404 h1 { + width: 80%; + font-size: 200px; + color: white; + text-shadow: 0 10px 20px rgba(255, 0, 0, 0.5); + animation: animate 5s linear infinite; +} + +section .mahasiswa h1 { + width: 120%; + font-size: 50px; + color: white; + text-shadow: 0 10px 20px rgba(38, 0, 255, 0.5); + animation: animate2 7s linear infinite; +} + +section .error404 h2 { + font-size: 2em; + color: white; +} + +section .error404 p { + font-size: 1.5em; + color: white; +} + +section .error404 .btn { + position: relative; + display: inline-block; + padding: 10px 20px; + border-radius: 10px; + color: rgb(0, 0, 0); + background: rgb(255, 255, 255); + letter-spacing: 0.05em; + text-decoration: none; + font-size: 15px; + transition: all 0.3s; +} + +section .error404 .btn:hover { + color: white; + background: crimson; +} + + +@keyframes animate { + 0% { + transform: translateX(0%) translateY(-100%) rotate(0deg); + } + 25% { + transform: translateX(100%) translateY(0%) rotate(90deg); + } + 50% { + transform: translateX(0%) translateY(100%) rotate(180deg); + } + 75% { + transform: translateX(-100%) translateY(0%) rotate(270deg); + } + 100% { + transform: translateX(0%) translateY(-100%) rotate(360deg); + } +} + +@keyframes animate2 { + 0% { + transform: translateX(100%) translateY(-100%) rotate(360deg); + } + 25% { + transform: translateX(0%) translateY(0%) rotate(270deg); + } + 50% { + transform: translateX(-100%) translateY(100%) rotate(180deg); + } + 75% { + transform: translateX(0) translateY(0%) rotate(90deg); + } + 100% { + transform: translateX(100%) translateY(-100%) rotate(0); + } +}