<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="author" content="Kawiesh"/>
<meta name="keywords" content="Kawiesh, Debisarun, Kawiesh Debisarun"/>
<meta name="description" content="Kawiesh Debisarun"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<meta name="theme-color" content="black"/>
<meta name="msapplication-TileColor" content="#da532c"/>
<meta name="msapplication-navbutton-color" content="black"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<title>Kawiesh !</title>
<script>
var ua= navigator.userAgent.toLowerCase(); 
var bb= /blackberry/.test(ua);
if(bb) window.location= "/bbindex.html";
</script>
<style>

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap');
				
*{
margin:0;
padding:0; 
outline: none;
border: none;
box-sizing: border-box;
}

html,.body{
width: 100vw;
height: 95vh;
overflow: hidden;
}

.flexcenter{
display: flex;
justify-content: center;
align-items: center;
}

.flexcolumn{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}


.body{
justify-content: flex-start;
background: #2b2b2b;
color: lightgray;
font-family: 'Raleway', sans-serif;
}

.container{
margin: 10px 0;
height: 100%;
position: relative;
justify-content: flex-start;
border: 2px solid;
border-radius: 5px;
overflow-x: hidden;
}
/******************************************************/
.header{
z-index: 3;
width: 100%;
height: 40px;
padding: 0 5px;
border-bottom: 2px solid;
justify-content: space-between;
}

.title{
text-align: center;
transition: 1s linear;
}

.button{
visibility: hidden;
width: 30px;
height: 30px;
font: bold 20px Arial;
border: 2px solid;
border-radius: 2px;
}


.right.button{
visibility: visible;
}

.main{
padding: 10px;
z-index: 1;
width: 100%;
height: calc(100% - 45px);
}


.sidebar{
z-index: 2;
position: absolute;
top: 40px;
width: 45%;
height: 80%;
border: 2px solid;
transition: 1s linear;
overflow-x: hidden;
overflow-y: auto;
font: 14px Arial;
padding:5px;
background: #2b2b2b;
}


.left.sidebar{
left: -45%;
}

.left.sidebar.open{
left: 0;
border-top: none;
border-left: none;
border-bottom-right-radius: 5px;
}

.right.sidebar{
right: -45%;
}

.right.sidebar.open{
right: 0;
border-top: none;
border-right: none;
border-bottom-left-radius: 5px;
}


/******************************************************/


a{
color: #2374ab;
text-decoration: none;
}


a:visited{
color: #2374ab;
}


a:hover{
color: rgb(255,220,255);
}


/******************************************************/
[title]{
position: relative;
}

[title]::before{
content: attr(title);
text-transform: capitalize;
display: inline-block;
width: 100%;
height: 1.1em;
font-weight: bold;
border-bottom: 1px solid;
}
/******************************************************/

body{
user-select: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}


@media (orientation:portrait){
.container{width: 95%;}
}

@media (orientation:landscape){
.container{width: 50%;}
}
</style>
</head>
<body class="body flexcolumn">
<div class="container flexcolumn" data-nosnippet>
<header class="header flexcenter">
<p class="left button flexcenter">+</p>
<p class="title">Title</p>
<p class="right button flexcenter">+</p>
</header>
<section class="left sidebar"></section>
<section class="right sidebar"></section>

<main class="main"></main>

</div>
<script>				
let create= (x)=> document.createElement(x),
select= (x,y=document)=> y.querySelector(x),
selectAll= (x,y=document)=> y.querySelectorAll(x);


setInterval(()=>{
select(".title").style.color= `hsla(${(Math.random() * 360)}, 100%, 50%, 1)`;
},1500);



function showSidebar(btn){
let sidebar= select(`.${btn.classList[0]}.sidebar`);
sidebar.classList.toggle("open");

btn.innerHTML= 
sidebar.classList.contains("open") ? "-" : "+";
}



selectAll(".button").forEach(i=>{
i.addEventListener("click",()=>{
showSidebar(i);
});
});

</script>
</body>
</html>