userscript to lock a website by password

website-lock-screen.js

// ==UserScript==
// @name         Lock Screen
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Locks given websites.
// @author       Sarfraz
// @match        https://web.whatsapp.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    var pin = "sarfraz786";
    var timeoutMinutes = 3;

    var idleTimer = null;

    hide();
    setupInterval();

    $('*').bind('mousemove click mouseup mousedown keydown keypress keyup submit change mouseenter scroll resize dblclick', function () {
        clearInterval(idleTimer);
        setupInterval();
    });

    function setupInterval() {
        idleTimer = setInterval(hide, timeoutMinutes * 60000);
    }

    function hide() {
        var pinDiv = document.createElement("div");
        pinDiv.style = "position: fixed; z-index: 9999; top: 0px; left: 0px; width: 100%; height: 100%; background-color: #fff";
        pinDiv.innerHTML = ``;
        document.body.appendChild(pinDiv);

        var pinInput = document.createElement("input");
        pinInput.type = "password";
        //pinInput.autofocus = true;
        pinInput.style = "position: absolute; top: 5px; right: 5px; width: 100px; height: 30px; margin-top: -15px; font-size: 20px; border:none; color: transparent; text-shadow: 0 0 0 red; ";
        pinDiv.appendChild(pinInput);

        pinInput.oninput = function () {
            if (pinInput.value === pin) {
                document.body.removeChild(pinDiv);
            }
        };
    }

})();

While above is based on password, this is based on long click:

// ==UserScript==
// @name         Lock Screen
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Locks given websites.
// @author       Sarfraz
// @match        https://web.whatsapp.com/*
// @grant        none
// @require https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
// ==/UserScript==

(function() {
    'use strict';

    var timeoutMinutes = 3;
    var idleTimer = null;
    var timer;

    hide();
    setupInterval();

    $('*').bind('mousemove click mouseup mousedown keydown keypress keyup submit change mouseenter scroll resize dblclick', function () {
        clearInterval(idleTimer);
        setupInterval();
    });

    function setupInterval() {
        idleTimer = setInterval(hide, timeoutMinutes * 60000);
    }

    function hide() {

        var prevPinDiv = document.querySelector('#sheet_pin_div_lock');

        if (prevPinDiv !== null) {
            document.body.removeChild(prevPinDiv);
        }

        var pinDiv = document.createElement("div");
        pinDiv.style = "font-family: 'Segoe UI', Tahoma, sans-serif; position: fixed; z-index: 999999999999; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; text-align:center; padding-top:150px;";
        pinDiv.id = `sheet_pin_div_lock`;
        pinDiv.innerHTML = `<h1 style="font-size:26px; color:#000; font-weight:bold; margin-bottom:10px;">This site can’t be reached</h1><span>Server IP address could not be found.</span><br><br><a href="javascript:diagnoseErrors()" id="diagnose-link" jstcache="0">Try running Windows Network Diagnostics</a><br><br><span>ERR_NAME_NOT_RESOLVED</span>`;
        document.body.appendChild(pinDiv);

        $(pinDiv).on("mousedown", function(){
            timer = setTimeout(function(){
                document.body.removeChild(pinDiv);
            }, 5000);
        }).on("mouseup mouseleave",function(){
            clearTimeout(timer);
        });
    }

})();