ABitOfJS,
примерно так ...
<!DOCTYPE html>
<html>
<head>
<style>
#modal {
display: none;
}
#modal:target {
display: block;
width: 100vw;
height: 100vw;
background: lightgrey;
}
</style>
<script>
function addTextToInput(anElement) {
var text = document.getElementById('number').value;
if (text != "")
text += "";
text += anElement.innerText;
document.getElementById('number').value = text;
if(text == localStorage.password){
location.href='#modal';
document.forms.test.hidden = true;
}
}
function setPassword()
{
if(changepassword.value) {
localStorage.password = changepassword.value;
window.location.reload(true);
}
}
</script>
</head>
<body>
<form hidden="hidden" name="test">
<input id="number" disabled>
<br/>
<button type="button" onclick="addTextToInput(this)">1</button>
<button type="button" onclick="addTextToInput(this)">2</button>
<button type="button" onclick="addTextToInput(this)">3</button>
<br>
<button type="button" onclick="addTextToInput(this)">4</button>
<button type="button" onclick="addTextToInput(this)">5</button>
<button type="button" onclick="addTextToInput(this)">6</button>
<br>
<button type="button" onclick="addTextToInput(this)">7</button>
<button type="button" onclick="addTextToInput(this)">8</button>
<button type="button" onclick="addTextToInput(this)">9</button>
<br>
<input type="reset" value="x">
<button type="button" onclick="addTextToInput(this)">0</button>
</form>
<div id="modal">
<input id="changepassword" placeholder="введите новый пароль 123">
<button type="button" onclick="setPassword()">Сохранить пароль</button>
</div>
<script>
if('password' in localStorage) {
document.forms.test.hidden = false;
}
else {
location.href='#modal'
}
</script>
</body>
</html>