puzzle/views/header.ejs

<%- include('./load.ejs') %>
<style>
    #proj_top_panel{
        display: flex;
        /* width: 90%; */
        justify-content: space-between;
        width: 90%;
        text-align: center;
        margin: auto;
    }
    #top_panel_left{
        /* float: left; */
        justify-content: space-between;
        /* width: 200px; */
        cursor: pointer;
        width: 5vw;
        display: flex;
        /* width: 20vw; */
    }
    #top_panel_center{
        /* float: left; */
        justify-content: space-between;
        cursor: pointer;
        width: 58vw;
        display: flex;
        /* width: 20vw; */
    }
    #top_panel{
        height: 100px;
        display: flex;
        margin-bottom: 2vh;
        margin-top: 1vh;
    }
    /* button{
        /* margin-inline: 5px; */
    /* } */
    .tpanel{
        margin: auto 0px;
        /* width: 100%; */
        height: 100%;
    }
    .tpanel button{
        border: 0px;
        background-color: transparent;
        cursor: pointer;
    }

    .menu_btn{
        background: ghostwhite;
        cursor: pointer;
        border: 1px black dashed;
        padding: 2px;
        width: 220px;
    }
    .cmenu{
        position: absolute;
        display: grid;
        background: ghostwhite;
        color: black;
        cursor: pointer;
        border: 1px black solid;
        border-top: 0px;
        z-index: 500;
        /* width: 218px; */
    }
    #top_panel_right_main{
        /* float: right; */
        justify-content:space-between;
        float: right;
        display: flex;
        cursor: pointer;
        width: 14vw;
        /* width: 20vw; */
        /* height: 60px; */
    }
    #top_panel_right_sec{
        /* float: right; */
        justify-content:space-between;
        float: left;
        display: flex;
        cursor: pointer;
        width: 14vw;
        transform: translateY(100%);
        /* width: 20vw; */
        /* height: 60px; */
    }
    .top_panel_right img{
        width: 3vw;
        height: 3vh;
    }
    @media (max-width: 900px) {
        #top_panel_right_main{
            display: none;
        }
        #top_panel_right_sec{
            display: flex;
        }
        #top_panel_center{
            width: 70vw;
        }
    }
    @media (min-width: 900px) {
        #top_panel_right_main{
            display: flex;
        }
        #top_panel_right_sec{
            display: none;
        }
    }
</style>

<header id="top_panel">
    <!-- <div id="user_name"></div> -->
    <div id="proj_top_panel">
        <div id="top_panel_left" class="tpanel"></div>
        <div id="top_panel_center" class="tpanel">
            <button onclick="goto('/main')">Мои проекты</button>
            <button onclick="goto('/tamp')">Шаблоны</button>
            <button onclick="goto('/gallery')">Галерея</button>
            <button onclick="goto('/faq')">FAQ</button>
            <button onclick="goto('/help')">Связаться с поддержкой</button>

        </div>
        <div id="top_panel_right_main" class="tpanel top_panel_right">
            <a href=""><img src="/img/vk.svg" alt=""></a>
            <a href=""><img src="/img/youtube.svg" alt=""></a>
            <a href=""><img src="/img/ok.svg" alt=""></a>
            <a href=""><img src="/img/telegram.svg" alt=""></a>
        </div>
    </div>        <!-- <div><button onclick="logout();">logout</button></div> -->
</header>
<div id="user_menu" class="cmenu"></div>


<div id="top_div" style="background-color: rgba(red, green, blue, 0.5); width: 100%;height: 100%;position: absolute;inset: 0px;z-index: 300; display: none;" onclick="hide_menus()"></div>

<script>
    get_from_uuid((res)=>{
        // let uname = document.getElementById("user_name"); 
        // let menu = document.getElementById("user_menu"); 
        // let header = document.getElementById("top_panel"); 
        // let right = document.getElementById("top_panel_right"); 
        // let left = document.getElementById("top_panel_left"); 
        
        // if(document.title != "main") menu.innerHTML += `<button onclick="goto('/');">проекты</button> <br>`;
        // right.innerHTML += `<div id="user_name" class="menu_btn">${res["login"]}</div>`;
        
        let menu = document.getElementById("top_panel_center");
        if (res["admin"] == true){
            menu.innerHTML += `<button onclick='goto("/admin")'>админ. панель</button><br>`;
        }
        // menu.innerHTML += "<button onclick='logout();'>выйти</button><br>";
    });

    onscroll = (e)=>{
        hide_menus();
    }
    onresize = (e)=>{
        hide_menus();
    }
    onclick = (e) => {
        // e.preventDefault()
        //   console.log(e);
        //   console.log(document.getElementById(e.target.id).parentElement);
        // if(e.target.onclick != null){
        //     if(document.title == "login"){
        //         // console.log(document.title);
        //         log_by_sid();
        //     }else if(document.title != "login"){
        //         check_sid(true);
        //         // console.log("check");
        //     }
        // }
        if(e.target.id == "user_name"){
            hide_menus();
            let menu = document.getElementById("user_menu");
            menu.style.display = 'block';
            menu.style = `top:${e.target.getBoundingClientRect().top + 25}px;left:${e.target.getBoundingClientRect().left - 20}px`;
            // menu.onmouseleave = () => menu.style.display = 'none';
            // menu.innerHTML = "<p>Option1</p><p>Option2</p><p>Option3</p><p>Option4</p>"
            // document.body.appendChild(menu)
        }else if(e.target.id == "proj_menu"){
            hide_menus();
            let menu = document.getElementById("project_menu");
            menu.style.display = 'block';
            menu.style = `top:${e.target.getBoundingClientRect().top + 25}px;left:${e.target.getBoundingClientRect().left - 20}px`;
                // menu.onmouseleave = () => menu.style.display = 'none';
                // menu.innerHTML = "<p>Option1</p><p>Option2</p><p>Option3</p><p>Option4</p>"
                // document.body.appendChild(menu)
        }
        else if(e.target.id == "user_buttons"){
            hide_menus();
            let menu = document.getElementById("user_edit_menu");
            menu.setAttribute("login_id",e.target.classList[0]);
            menu.setAttribute("login_name",document.getElementById(`login_${e.target.classList[0]}`).innerText);
            menu.setAttribute("login_pass",document.getElementById(`pass_${e.target.classList[0]}`).innerText);
            menu.setAttribute("login_admin",document.getElementById(`admin_${e.target.classList[0]}`).innerText);
            menu.style.display = 'block';
            menu.style = `top:${e.target.getBoundingClientRect().top + 25}px;left:${e.target.getBoundingClientRect().left - 20}px`;
            // menu.onmouseleave = () => menu.style.display = 'none';
            // menu.innerHTML = "<p>Option1</p><p>Option2</p><p>Option3</p><p>Option4</p>"
            // document.body.appendChild(menu)s
        
        }
        else if(e.target.id == "object_menu"){
            hide_menus();
            let menu = document.getElementById("object_edit_menu");
            let obj = e.target;
            menu.setAttribute("obj_img",obj.getAttribute("src"));
            menu.setAttribute("obj_name",obj.getAttribute("name"));
            menu.setAttribute("obj_description",obj.getAttribute("description"));
            menu.setAttribute("obj_height",obj.getAttribute("height"));
            menu.setAttribute("obj_width",obj.getAttribute("width"));
            menu.setAttribute("obj_id",obj.getAttribute("obj_id"));
            menu.setAttribute("obj_cost",obj.getAttribute("cost"))
            menu.setAttribute("obj_gid",obj.getAttribute("gid"))
            menu.style.display = 'block';
            // menu.style = `top:${e.target.getBoundingClientRect().top+27}px;left:${e.target.getBoundingClientRect().left-13}px`;
            menu.style = `top:${e.target.getBoundingClientRect().top + 40}px;left:${e.target.getBoundingClientRect().left - 5}px`;
            // menu.onmouseleave = () => menu.style.display = 'none';
            // menu.innerHTML = "<p>Option1</p><p>Option2</p><p>Option3</p><p>Option4</p>"
            // document.body.appendChild(menu)
        
        }
        else if(e.target.id == "proj_cost"){
            document.getElementById("cost_list").style = `margin-top:3vw;left:${e.target.getBoundingClientRect().left}px`;
            console.log("cost_list");
        }
        else if(e.target.id == "group_drop"){
            document.getElementById("group").style = `margin-top:2vw;left:${e.target.getBoundingClientRect().left}px;width: 14vw;padding: 7.5px;`;
            console.log("group");
            // hide_menus();
            // let menu = document.getElementById("object_edit_menu");
            // let obj = e.target;
            // menu.style.display = 'block';
            // // menu.style = `top:${e.target.getBoundingClientRect().top+27}px;left:${e.target.getBoundingClientRect().left-13}px`;
            // menu.style = `top:${e.target.getBoundingClientRect().top + 40}px;left:${e.target.getBoundingClientRect().left - 5}px`;
            // // menu.onmouseleave = () => menu.style.display = 'none';
            // // menu.innerHTML = "<p>Option1</p><p>Option2</p><p>Option3</p><p>Option4</p>"
            // // document.body.appendChild(menu)
        
        }
        // else{
        //     hide_menus();
        // }
    }
</script>