<style>
    #proj_top_panel{
        display: flex;
        /* width: 90%; */
        justify-content: space-between;
        width: 90%;
        text-align: center;
        margin: auto;
    }
    #top_panel_right{
        /* float: right; */
        display: flex;
    }
    #top_panel_left{
        /* float: left; */
        display: flex;
    }
    /* button{
        /* margin-inline: 5px; */
    /* } */
</style>
<header id="top_panel">
    <script>get_from_uuid((res)=>{
        let uname = document.getElementById("user_name"); 
        let header = document.getElementById("top_panel"); 
        let right = document.getElementById("top_panel_right"); 
        let left = document.getElementById("top_panel_left"); 
        
        if(document.title != "main") left.innerHTML += `<button onclick="goto('/');">main page</button>`;
        left.innerHTML += `<div id="user_name">${res["login"]}</div>`;
        
        if (res["admin"] == true){
            right.innerHTML += `<button onclick='goto("/admin")'>admin panel</button>`;
        }
        right.innerHTML += "<button onclick='logout();'>logout</button>";
    });
    </script>
    <!-- <div id="user_name"></div> -->
    <div id="proj_top_panel">
        <div id="top_panel_left"></div>
        <!-- <div>puzzle</div> -->
        <div id="top_panel_right"></div>
    </div>
    <!-- <div><button onclick="logout();">logout</button></div> -->
</header>