JSFiddle - React, Tailwind, and code Playground

by Jackson Antunes

HTML

<div id="content">
AQUI ESTÁ SEU CONTEÚDO, AGUARDE 5 SEGUNDOS SEM MOVER O MOUSE E A TELA SERÁ TRAVADA.
</div>

<div id="lockscreen">
<div class="lock-msg">Insira sua senha para desbloquear a tela.</div>
<input class="lockscreen-password" type="password"></input>
<input type="submit" class="lockscreen-btn" value="DESBLOQUEAR"></input>
</div>

CSS

#content {
position:absolute;
top:150px;
left:50px;
}
#lockscreen {
position:fixed;
z-index:999;
cursor:forbidden;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.9);
color:white;
display:none;
}
.lock-msg{
position:relative;
display:table;
margin:auto;
top:300px;
}
.lockscreen-password{
position:relative;
text-align:center;
display:table;
margin:auto;
top:350px;
}
.lockscreen-btn{
position:relative;
display:table;
margin:auto;
top:380px;
}

JavaScript

locked = false;
	function lockScreen() {
		/*1000 ms = 1 seg*/
		var timeout = 5000
		if (locked == true) {
			clearTimeout(lockscreen);
		}
		else {
			lockscreen = setTimeout(function(){
				$('#lockscreen').show();
				locked = true;
				clearTimeout(lockscreen);
			}, timeout);
		}
	}
	$(document).click(function(){
		clearTimeout(lockscreen);
		lockScreen();
	});

	$(document).mousemove(function(){
		clearTimeout(lockscreen);
		lockScreen();
	});

lockScreen();
	$('.lockscreen-btn').click(function(){
	var lck_senha = $('.lockscreen-password').val();
		if (lck_senha == "swordfish") {
			locked = false;
			$('.lockscreen-password').val("");
			$('#lockscreen').hide();
		}
	});