<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sorry!</title>

    <!-- Google font -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,700" rel="stylesheet">


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        * {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        body {
            padding: 0;
            margin: 0;
        }

        #notfound {
            position: relative;
            height: 100vh;
        }

        #notfound .notfound {
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        .notfound {
            max-width: 520px;
            width: 100%;
            text-align: center;
            line-height: 1.4;
        }

        .notfound .notfound-404 {
            height: 190px;
        }

        .notfound .notfound-404 h1 {
            font-family: 'Montserrat', sans-serif;
            font-size: 146px;
            font-weight: 700;
            margin: 0px;
            color: #232323;
        }

        .notfound .notfound-404 h1>span {
            display: inline-block;
            width: 120px;
            height: 120px;
            background-image: url('/images/emoji.png');
            background-size: cover;
            -webkit-transform: scale(1.4);
            -ms-transform: scale(1.4);
            transform: scale(1.4);
            z-index: -1;
        }

        .notfound h2 {
            font-family: 'Montserrat', sans-serif;
            font-size: 22px;
            font-weight: 700;
            margin: 0;
            text-transform: uppercase;
            color: #232323;
        }

        .notfound p {
            font-family: 'Montserrat', sans-serif;
            color: #787878;
            font-weight: 300;
        }

        .notfound a {
            font-family: 'Montserrat', sans-serif;
            display: inline-block;
            padding: 12px 30px;
            font-weight: 700;
            background-color: #f99827;
            color: #fff;
            border-radius: 40px;
            text-decoration: none;
            -webkit-transition: 0.2s all;
            transition: 0.2s all;
        }

        .notfound a:hover {
            opacity: 0.8;
        }

        @media only screen and (max-width: 767px) {
            .notfound .notfound-404 {
                height: 115px;
            }
            .notfound .notfound-404 h1 {
                font-size: 86px;
            }
            .notfound .notfound-404 h1>span {
                width: 86px;
                height: 86px;
            }
        }

        html {
            scroll-behavior: smooth;
        }
        h3{
            margin-top: 20px;
            opacity: 1;
            transition: opacity 1s;
            color: #787878;
            display: none;
        }
        .hide{
            opacity: 0;
        }
    </style>
</head>

<body>
<!-- Google Tag Manager (noscript) -->
<!-- End Google Tag Manager (noscript) -->

<div id="notfound">
    <div class="notfound">
        <div class="notfound-404">
            <h1><span></span></h1>
        </div>
        <h2>حظا أوفر المرة القادمة</h2>
        <p>Sorry, but you're fired</p>
        <h3 id="first" class="hide">Ow, You're Still Here?</h3>
        <h3 id="second" class="hide">Sorry, There's Nothing I Can Do</h3>
        <h3 id="third" class="hide">Stop Staring At Me, It's Out of My Hands</h3>
        <h3 id="fourth" class="hide">What Did You Expect After What You Did █████!</h3>
        <h3 id="fifth" class="hide">Wait, You're NOT █████</h3>
        <h3 id="sixth" class="hide">Oh, You're <%= mem.Name%> Why Didn't You Say So!</h3>
        <h3 id="seventh" class="hide">Sorry, My Bad, I'll Take You To Your Report Now. Good Luck!</h3>
        <h3 id="eighth" class="hide">Oh and Please Don't Tell Anyone About This, You Don't Want Me To Get Fired Yeah?</h3>
    </div>
</div>
<script src="/plugins/jquery/jquery.min.js"></script>
<script>
    let cooldown = 3000;
    function first() {
        var x = document.getElementById("first");
        if (x.classList.contains("hide")) {
            x.style.display = "block"
            setTimeout(function () {
                x.classList.remove("hide");
            }, 20);
        }
        setTimeout(second, cooldown);
    }
    function second() {
        window.scrollBy(0, 40)
        var x = document.getElementById("second");
        if (x.classList.contains("hide")) {
            x.style.display = "block"
            setTimeout(function () {
                x.classList.remove("hide");
            }, 20);
        }
        setTimeout(third, cooldown);
    }
    function third() {
        window.scrollBy(0, 40)
        var x = document.getElementById("third");
        if (x.classList.contains("hide")) {
            x.style.display = "block"
            setTimeout(function () {
                x.classList.remove("hide");
            }, 20);
        }
        setTimeout(fourth, cooldown);
    }
    function fourth() {
        var x = document.getElementById("fourth");
        window.scrollBy(0, 40)
        if (x.classList.contains("hide")) {
            x.style.display = "block"
            setTimeout(function () {
                x.classList.remove("hide");
            }, 20);
        }
        setTimeout(fifth, cooldown);
    }
    function fifth() {
        var x = document.getElementById("fifth");
        window.scrollBy(0, 40)
        if (x.classList.contains("hide")) {
            x.style.display = "block"
            setTimeout(function () {
                x.classList.remove("hide");
            }, 20);
        }
        setTimeout(sixth, cooldown);
    }
    function sixth() {
        var x = document.getElementById("sixth");
        window.scrollBy(0, 40)
        if (x.classList.contains("hide")) {
            x.style.display = "block"
            setTimeout(function () {
                x.classList.remove("hide");
            }, 20);
        }
        setTimeout(seventh, cooldown);
    }
    function seventh() {
        var x = document.getElementById("seventh");
        window.scrollBy(0, 40)
        if (x.classList.contains("hide")) {
            x.style.display = "block"
            setTimeout(function () {
                x.classList.remove("hide");
            }, 20);
        }
        setTimeout(eighth, cooldown);
    }
    function eighth() {
        window.scrollBy(0, 140)
        var x = document.getElementById("eighth");
        if (x.classList.contains("hide")) {
            x.style.display = "block"
            setTimeout(function () {
                x.classList.remove("hide");
            }, 20);
        }
        setTimeout(finish, cooldown*3);
    }
    function finish(){
        $.ajax({
            type: "POST",
            success: ()=>{
                location.reload();
            }
        })

    }
    setTimeout(first, 5000);
</script>
</body>

</html>
