<script>
    // document.getElementById("load_div").style.height = `${document.getElementsByTagName("body")[0].scrollHeight}px`;
</script>

<%- include('./message.ejs') %>

<style>
    #load_div{
        width: 100vw;
        height: 100vh;
        display: flex;
        position: absolute;
        z-index: 10000;
        background-color: white;
        transition: background-color 1s;
        top: 0;
    }
    #load_logo{
        width: 12vw;
        /* height: 12vh; */
        /* margin: auto; */  
        position:absolute;
        top:30.5%;
        left:50%;
        -ms-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        pointer-events: all;
        transition-duration: 800ms;
        cursor: pointer;
    }
    #load_help{
        /* width: 12vw; */
        justify-content: space-between;
        position:absolute;
        top:50%;
        left:50%;
        -ms-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        display: none;
        text-align: center;
        pointer-events: all;
    }
</style>


<div id="load_div">
    <img id="load_logo" src="/img/Умничка лого с обводкой-02 1.png" onclick="goto('/')" alt="">
    <div id="load_help">
        <div>Страница Долго загружается?</div>
        <div>Вы можете</div>
        <br>
        <div><a href="">Перезагрузить</a><br><a href="/main">На главную страницу</a></div>
        <br>
        <div>Но лучьше подождать</div>
    </div>
</div>

<script>
    let page_state = "";
    let loaded_pos={
        x:"10%",
        // y:"6%",
        // x: "55px",
        y: "4vh",
        w:"8vw",
        h:"8vh"
    }
    let loading_pos={
        x:"50%",
        y:"30.5%",
        w:"12vw",
        h:"12vh"
    }
    // document.getElementById("load_logo").style.transform = `translate(${center.x}px,${center.y}px)`
    function loaded(){
        let logo = document.getElementById("load_logo");
        let load_div = document.getElementById("load_div");
        load_div.style.backgroundColor = "transparent";
        load_div.style.pointerEvents = "none";
        document.getElementById("load_help").style.display = "none";
        // load_div.style.transition = "background-color 1s"
        // logo.style.transform = `translate(0px,0px)`;
        document.getElementsByTagName("body")[0].style.overflow = "auto";
        logo.style.left = loaded_pos.x;
        logo.style.top = loaded_pos.y;
        logo.style.width = loaded_pos.w
        // load_div.style.height = `${document.getElementsByTagName("body")[0].scrollHeight}px`;
        page_state = "loaded";
    }
    function loading(){
        let logo = document.getElementById("load_logo");
        let load_div = document.getElementById("load_div");
        load_div.style.backgroundColor = "white";
        document.getElementsByTagName("body")[0].style.overflow = "hidden";
        load_div.style.pointerEvents = "all";
        // load_div.style.transition = "background-color 1s"
        // logo.style.transform = `translate(-50%,-50%)`;
        logo.style.left = loading_pos.x;
        logo.style.top = loading_pos.y;
        logo.style.width = loading_pos.w
        // load_div.style.height = `${document.getElementsByTagName("body")[0].scrollHeight}px`;
        page_state = "loading";
    }
    setTimeout(()=>{
        if(page_state != "loaded"){
            document.getElementById("load_help").style.display = "block";
        }
    },5000)
</script>