/* background */

body{
background: linear-gradient(135deg,#0f172a,#020617) !important;
color:#e2e8f0 !important;
font-family:Segoe UI;
}

/* container */

.container{
max-width:1400px;
}

/* app cards */

.app-card{
background:#1e293b !important;
border-radius:15px !important;
height:140px !important;
transition:0.3s;
border:1px solid rgba(255,255,255,0.05);
}

/* hover */

.app-card:hover{
transform:scale(1.06);
background:#334155 !important;
box-shadow:0 10px 40px rgba(0,0,0,0.6);
}

/* title */

h1,h2,h3{
color:#f1f5f9 !important;
letter-spacing:1px;
}

/* icons */

.app-icon img{
width:50px !important;
}

/* tags */

.tag{
background:#0ea5e9 !important;
color:white !important;
border-radius:8px;
padding:4px 10px;
}

/* HELLOLOGI CONTROL BAR */

function createPanel(){

let panel=document.createElement("div");

panel.style.position="fixed";
panel.style.top="0";
panel.style.left="0";
panel.style.width="100%";
panel.style.height="45px";
panel.style.background="#020617";
panel.style.color="#38bdf8";
panel.style.display="flex";
panel.style.alignItems="center";
panel.style.justifyContent="space-around";
panel.style.fontSize="14px";
panel.style.zIndex="9999";

panel.innerHTML=`
<div>HELLOLOGI SERVER</div>
<div id="cpu">CPU --%</div>
<div id="ram">RAM --%</div>
<div id="docker">Docker --</div>
<div id="vpn">VPN Users --</div>
<div id="net">Network --</div>
`;

document.body.appendChild(panel);

}

createPanel();
function updateStats(){

let cpu=Math.floor(Math.random()*30)+10;
let ram=Math.floor(Math.random()*50)+20;
let docker=Math.floor(Math.random()*6)+1;
let vpn=Math.floor(Math.random()*15);
let net=Math.floor(Math.random()*900)+100;

document.getElementById("cpu").innerText="CPU "+cpu+"%";
document.getElementById("ram").innerText="RAM "+ram+"%";
document.getElementById("docker").innerText="Docker "+docker+" containers";
document.getElementById("vpn").innerText="VPN Users "+vpn;
document.getElementById("net").innerText="Network "+net+" Mbps";

}

setInterval(updateStats,4000);
updateStats();
setTimeout(function(){
location.reload();
},60000);