ABitOfJS,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>lock</title>
<script type="text/javascript">
//часы
var time = setInterval(function() {
var date = new Date();
document.getElementById("time").innerHTML = (date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds());
}, 1000);
//ввод пароля
function addTextToInput(anElement) {
var text = document.getElementById('password').value;
if (text != "")
text += "";
text += anElement.innerText;
document.getElementById('password').value = text;
if(localStorage.password == text) location.href='#menu';
}
//создание пароля
function setPassword()
{
if(changepassword.value) {
localStorage.password = changepassword.value;
window.location.reload(true);
}
}
</script>
<style>
body {
background: #292929;
}
* {
font-family: Arial, Helvetica, sans-serif;
}
.lockscreen {
position: fixed;
width: 100vw;
height: 100vh;
background: #292929;
left: 0px;
top: 0px;
}
#time {
width: 200px;
color: white;
font-weight: 100;
font-size: 50px;
position: fixed;
text-align: center;
left: calc( 50vw - 100px );
top: 20px;
z-index: 1;
}
.lock {
width: 100px;
height: 100px;
position: fixed;
left: calc( 50vw - 50px );
bottom: 100px;
}
.lock > * {
position: absolute;
}
.bodylock {
width: 60px;
height: 40px;
border: 5px solid white;
border-radius: 5px;
bottom: 10px;
left: 15px;
}
.handlelock {
width: 40px;
height: 30px;
border-left: 5px solid white;
border-top: 5px solid white;
border-right: 5px solid white;
border-bottom: 5px solid transparent;
border-radius: 35px 35px 0 0;
left: 25px;
top: 5px;
}
.circlechink {
width: 5px;
height: 5px;
border-top: 5px solid white;
border-left: 5px solid white;
border-right: 5px solid white;
border-bottom: 5px solid transparent;
border-radius: 8px;
top: 60px;
left: 42.5px;
}
.rectanglechink {
width: 2px;
height: 5px;
border-right: 5px solid white;
border-bottom: 5px solid white;
border-left: 5px solid white;
border-top: 5px solid transparent;
border-radius: 0 0 5px 5px;
top: 65px;
left: 44.25px;
}
.unlocktext {
width: 90vw;
position: fixed;
text-align: center;
left: 5vw;
bottom: 20px;
color: white;
font-weight: 300;
font-size: 20px;
}
#cpasswordform {
display: none;
}
#cpasswordform ~ .passwordform {
left: -100vw;
}
#cpasswordform:checked ~ .passwordform {
left: 0vw;
}
.passwordform {
width: 100vw;
height: 150px;
background: grey;
position: fixed;
color: white;
top: 100px;
z-index: 1;
transition: 0.5s;
border-top: 1px solid white;
border-bottom: 1px solid white;
}
#password {
width: calc( 90vw - 4px );
height: 30px;
}
.fillpassword1, .fillpassword2, .fillpassword3, .fillpassword4, .fillpassword5, .fillpassword6, .fillpassword7, .fillpassword8, .fillpassword9, .fillpassword10, .fillpassword11, .fillpassword12 {
width: 33.3vw;
height: 30px;
background: linear-gradient(white, grey);
border: none;
position: absolute;
border-right: 1px solid grey;
border-left: 1px solid grey;
font-size: 25px;
font-weight: 100;
}
.fillpassword1 {
top: 30px;
left: 0vw;
}
.fillpassword2 {
top: 30px;
left: 33.3vw;
}
.fillpassword3 {
top: 30px;
left: 66.6vw;
}
.fillpassword4 {
top: 60px;
left: 0vw;
}
.fillpassword5 {
top: 60px;
left: 33.3vw;
}
.fillpassword6 {
top: 60px;
left: 66.6vw;
}
.fillpassword7 {
top: 90px;
left: 0vw;
}
.fillpassword8 {
top: 90px;
left: 33.3vw;
}
.fillpassword9 {
top: 90px;
left: 66.6vw;
}
.fillpassword10 {
top: 120px;
left: 0vw;
}
.fillpassword11 {
top: 120px;
left: 33.3vw;
}
.fillpassword12 {
top: 120px;
left: 66.6vw;
}
.modal {
width: 100vw;
height: 100vh;
background: #292929;
color: white;
position: fixed;
z-index: 0;
top: -100vh;
left: 0px;
transition: 0.5s;
}
.modal:target {
width: 100vw;
height: 100vh;
background: white;
color: black;
position: fixed;
z-index: 3;
top: 0vh;
}
#bg_popup {
position: fixed;
z-index: 99999;
background: rgba(0, 0, 0, 0.8);
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
}
#popup {
background: white;
width: 100vw;
height: 100vh;
position: fixed;
top: 0px;
left: 0px;
z-index: 3;
}
</style>
</head>
<body>
<!--Форма создания первого пароля-->
<div id="bg_popup">
<div id="popup">
<h1>Добро пожаловать!</h1>
<p>Давайте защитим проект, создав пароль</p>
<font color="red">Убедительная просьба использовать ТОЛЬКО ЦИФРЫ для создания пароля.</font>
<br><input id="changepassword" placeholder="Ваш пароль">
<button type="button" onclick="setPassword()">Сохранить пароль</button>
<br><span>Будьте внимательны при создании пароля. Если вы здесь ввели не тот пароль который хотели, просто удалите содержимое поля ввода, введите нужную комбинацию ЦИФР и только после этого нажмите кнопку "Начать пользование"</span>
<br><a id="setCookie" class="close" href="#" title="Закрыть" onclick="document.getElementById('bg_popup').style.display='none'; return false;">X</a>
</div>
</div>
<!--код экрана блокировки-->
<input type="checkbox" id="cpasswordform">
<div id="time"></div>
<div class="passwordform">
<form name="test" >
<input type="password" id="password" disabled>
<br/>
<button type="button" onclick="addTextToInput(this)" class="fillpassword1">1</button>
<button type="button" onclick="addTextToInput(this)" class="fillpassword2">2</button>
<button type="button" onclick="addTextToInput(this)" class="fillpassword3">3</button>
<br>
<button type="button" onclick="addTextToInput(this)" class="fillpassword4">4</button>
<button type="button" onclick="addTextToInput(this)" class="fillpassword5">5</button>
<button type="button" onclick="addTextToInput(this)" class="fillpassword6">6</button>
<br>
<button type="button" onclick="addTextToInput(this)" class="fillpassword7">7</button>
<button type="button" onclick="addTextToInput(this)" class="fillpassword8">8</button>
<button type="button" onclick="addTextToInput(this)" class="fillpassword9">9</button>
<br>
<input type="reset" value="x" class="fillpassword10">
<button type="button" onclick="addTextToInput(this)" class="fillpassword11">0</button>
</form>
</div>
<label for="cpasswordform">
<div class="lock">
<div class="bodylock"></div>
<div class="handlelock"></div>
<div class="circlechink"></div>
<div class="rectanglechink"></div>
</div>
</label>
<div class="unlocktext">Нажмите на замок, затем введите пароль</div>
<!--Модальное окно, в которое автоматически должен переходить пользователь после успешного ввода пароля-->
<div id="menu" class="modal">
<div>
Контент
</div>
</div>
<script>
if('password' in localStorage) {
document.forms.test.hidden = false;
}
else bg_popup.style.display = 'block';
</script>
</body>
</html>