NIXO / Pages Locker

// ==UserScript==
// @name         Pages Locker
// @namespace    http://tampermonkey.net/
// @version      0.1.2
// @description  Lock your sensitive websites page using a password
// @copyright    2018, NIXO (https://openuserjs.org/users/NIXO)
// @author       NAYCHO334
// @match        http*://*/*
// @grant        none
// @license      MIT
// @updateURL    https://openuserjs.org/meta/NIXO/Pages_Locker.meta.js
// ==/UserScript==

(function() {
    'use strict';

    var btn= document.createElement('div'),
        bar= document.createElement('div'),
        submit= document.createElement('button'),
        input= document.createElement('input'),
        full= document.createElement('div'),
        p= document.createElement('p'),
        password ='',change=true;

    btn.style.cssText="height:20px; width:20px;border-radius:30px;background:#1a2946;z-index:1001;position:fixed;top:12px;right:12px";
    bar.style.cssText="box-shadow: 0px 10px 20px 0px #e4e4e4;position:relative;border: 1px solid #d8d8d8;background:#fff;height:240px;width:400px;border-radius:10px;display:flex;justify-content:space-evenly;align-items:center;flex-direction: column;";
    input.style.cssText="outline: none;position: absolute;bottom: 115px;width: 320px;height:35px;border:1px solid #e2e0e0;border-radius:5px;background:#f1f1f1;text-align:center;font-size: 25px;font-family: monospace;color:#636363;;";
    submit.style.cssText="outline: none;height:35px;width:115px;border: 1px solid #ff5c5c;background: #ff4141;color:#fff;cursor:pointer;position:absolute;bottom: 20px;";
    p.style.cssText="position: absolute;top: 40px;font-weight: bold;font-family: monospace;font-size: 14px;color: #00b8ff;";
    input.setAttribute('type','password');
    submit.innerHTML="UNLOCK";
    p.innerHTML="Enter your password to unlock this page";
    bar.appendChild(p);
    bar.appendChild(input);
    bar.appendChild(submit);
    full.appendChild(bar);

    full.style.cssText='background:#efefef;box-shadow: 0px 11px 16px 4px #e4e4e4;top:0;position:fixed;z-index:1000;display:none;justify-content:center;align-items:center';
    function re(){
        full.style.height=innerHeight+'px';
        full.style.width=innerWidth+'px';
    }re();
    addEventListener('resize',re);

    document.body.appendChild(full);
    document.body.appendChild(btn);

    if(localStorage.getItem(location.host+'/PWD')!==null){
        if(localStorage.getItem(location.host+'/PWD')=='0'){

        }else{
            password=localStorage.getItem(location.host+'/PWD');
            full.style.display='flex';
            change = false;
            btn.style.display='none';
        }
    }

    btn.addEventListener('click',()=>{
        if(change){
            var x = prompt('Enter a password to lock this page');
            if(x!==null && x!==''){
                password=x.toString();
                localStorage.setItem(location.host+'/PWD',password);
                full.style.display='flex';
                change = false;
                btn.style.display='none';
            }
        }
    });
    addEventListener('keypress',e=>e.key=='Enter'?check():null);
    submit.addEventListener('click',()=>check());
    var check=()=>{
        if(!change){
            var y = input.value;
            if(y==password){
                change = true;
                full.style.display='none';
                btn.style.background='#1a2946';
                btn.style.display='block';
                localStorage.setItem(location.host+'/PWD','0');
            }
            input.value='';
        }};

})();