83 lines
2.2 KiB
Plaintext
83 lines
2.2 KiB
Plaintext
<style>
|
|
#proj_top_panel{
|
|
display: flex;
|
|
/* width: 90%; */
|
|
justify-content: space-between;
|
|
width: 90%;
|
|
text-align: center;
|
|
margin: auto;
|
|
}
|
|
#top_panel_right{
|
|
/* float: right; */
|
|
justify-content: space-between;
|
|
display: flex;
|
|
width: 20vw;
|
|
}
|
|
#top_panel_left{
|
|
/* float: left; */
|
|
justify-content: space-between;
|
|
display: flex;
|
|
width: 20vw;
|
|
}
|
|
#top_panel{
|
|
height: 20px;
|
|
}
|
|
/* button{
|
|
/* margin-inline: 5px; */
|
|
/* } */
|
|
#ctxmenu {
|
|
position: fixed;
|
|
background: ghostwhite;
|
|
color: black;
|
|
cursor: pointer;
|
|
border: 1px black solid
|
|
}
|
|
|
|
#ctxmenu > p {
|
|
padding: 0 1rem;
|
|
margin: 0
|
|
}
|
|
|
|
#ctxmenu > p:hover {
|
|
background: black;
|
|
color: ghostwhite
|
|
}
|
|
</style>
|
|
<header id="top_panel">
|
|
<!-- <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>
|
|
|
|
<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>";
|
|
});
|
|
|
|
oncontextmenu = (e) => {
|
|
e.preventDefault()
|
|
// console.log(e);
|
|
if(e.target.id == "user_name"){
|
|
let menu = document.createElement("div")
|
|
menu.id = "ctxmenu"
|
|
menu.style = `top:${e.pageY+20}px;left:${e.pageX-40}px`
|
|
menu.onmouseleave = () => ctxmenu.outerHTML = ''
|
|
menu.innerHTML = "<p>Option1</p><p>Option2</p><p>Option3</p><p>Option4</p>"
|
|
document.body.appendChild(menu)
|
|
}
|
|
}
|
|
</script> |