<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <p class="explanation">JavaScript runs a counter checking if the browser is idle. If it's been idle for long enough (3 seconds) then it adds an 'idle' class to the HTML element. This fades in an overlay making the screen go darker until the user wakes it up again. CSS transitions make it all smoother.</p> <div id="overlay"></div>

#overlay { background-color:#000; bottom:0; left:0; opacity:0; pointer-events:none; position:fixed; right:0; top:0; transition:opacity .2s ease-in-out; z-index:1; } html.idle #overlay { opacity:.5; transition:opacity 2s ease-in-out; } .explanation { font-family:monospace; left:50%; line-height:1.5; margin:0; max-width:40em; position:absolute; top:50%; transform:translate(-50%, -50%); }

(function() { const interval = 1000; const timeout = 3; let idleCounter = 0; window.onload = document.onmousemove = document.onkeypress = function() { idleCounter = 0; document.documentElement.classList.remove('idle'); }; window.setInterval(function() { if (++idleCounter >= timeout) { document.documentElement.classList.add('idle'); idleCounter = 0; } }, interval); })();