90s Interface

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>90s Interface</title>
<style>
* {
    box-sizing:border-box;
}
html,body {
    margin:0;
    width:100%;
    height:100%;
    overflow:hidden;
    background:#090909;
    color:#bbb;
    font-family:"Courier New", monospace;
}
body:before {
    content:"";
    position:absolute;
    inset:0;
    opacity:.15;
    background:repeating-linear-gradient(0deg,transparent,transparent 3px,#fff 4px);
    pointer-events:none;
}
#machine {
    position:absolute;
    inset:30px;
    border:1px solid #444;
    background:linear-gradient(135deg,#161616,#050505);
    box-shadow:inset 0 0 80px #000;
}
#header {
    height:45px;
    border-bottom:1px solid #333;
    display:flex;
    align-items:center;
    padding:0 20px;
    letter-spacing:5px;
    font-size:12px;
}
.module {
    position:absolute;
    background:linear-gradient(145deg,#222,#080808);
    border:1px solid #555;
    box-shadow:10px 10px 30px #000;
    overflow:hidden;
}
.title {
    height:24px;
    background:#111;
    border-bottom:1px solid #444;
    padding:5px 10px;
    font-size:11px;
    letter-spacing:3px;
    cursor:move;
}
.content {
    padding:15px;
    font-size:11px;
    line-height:1.8;
}
.button {
    display:inline-block;
    padding:8px 12px;
    margin:5px;
    border:1px solid #666;
    background:#111;
    cursor:pointer;
    font-size:10px;
}
.button:hover {
    background:#333;
}
.button:active {
    transform:translateY(2px);
}
#nav {
    left:40px;
    top:70px;
    width:220px;
    height:260px;
}
#screen {
    left:300px;
    top:80px;
    width:430px;
    height:280px;
}
#terminal {
    right:50px;
    bottom:50px;
    width:280px;
    height:170px;
}
#display {
    height:180px;
    border:1px solid #333;
    background:radial-gradient(circle,#333,#050505);
    position:relative;
    overflow:hidden;
}
.pulse {
    position:absolute;
    width:3px;
    height:100%;
    background:#999;
    animation:scan 3s infinite linear;
}
@keyframes scan {
    from {
        left:-10%;
    }
    to {
        left:110%;
    }
}
.log {
    color:#777;
    animation:flicker .8s infinite alternate;
}
@keyframes flicker {
    from {
        opacity:.4;
    }
    to {
        opacity:1;
    }
}
</style>
</head>
<body>
<div id="machine">
<div id="header">
    SYSTEM // UNKNOWN DEVICE // 1999
</div>
<div class="module" id="nav">
<div class="title">
NAVIGATION
</div>
<div class="content">
<div class="button" onclick="openPanel('ARCHIVE')">
ARCHIVE
</div>
<div class="button" onclick="openPanel('IMAGES')">
IMAGES
</div>
<div class="button" onclick="openPanel('DATA')">
DATA
</div>
<div class="button" onclick="openPanel('EXIT')">
EXIT
</div>
</div>
</div>
<div class="module" id="screen">
<div class="title">
VISUAL PROCESSOR
</div>
<div class="content">
<div id="display">
<div class="pulse"></div>
</div>
</div>
</div>
<div class="module" id="terminal">
<div class="title">
SYSTEM OUTPUT
</div>
<div class="content">
<div class="log" id="log">
BOOTING...<br>
LOADING MODULES...<br>
READY.
</div>
</div>
</div>
</div>
<script>
function openPanel(name){
    let log=document.getElementById("log");
    log.innerHTML+="<br>ACCESSING: "+name;
}
document.querySelectorAll(".module").forEach(module=>{
let dragging=false;
let ox=0;
let oy=0;
module.querySelector(".title").addEventListener("mousedown",e=>{
dragging=true;
ox=e.clientX-module.offsetLeft;
oy=e.clientY-module.offsetTop;
});
document.addEventListener("mouseup",()=>{
dragging=false;
});
document.addEventListener("mousemove",e=>{
if(!dragging)return;
module.style.left=(e.clientX-ox)+"px";
module.style.top=(e.clientY-oy)+"px";
});
});
</script>
</body>
</html>