<!DOCTYPE html>
<html lang=„en“>
<head>
<meta charset=„UTF-8“>
<meta name=„viewport“ content=„width=device-width, initial-scale=1.0“>
<title>Přihlášení</title>
<style>
body, html {
height: 100%;
margin: 0;
}
/* Styl pro tlačítko */
.centered-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.input-container {
background-color: #ccc; /* šedá barva pozadí */
padding: 50px; /* vnitřní odsazení */
border-radius: 20px; /* zaoblené rohy */
display: inline-block; /* tvaruje se podle obsahu */
max-width: 400px; /* Maximální šířka kontejneru */
width: 100%; /* šířka kontejneru */
}
.centered-input {
width: 100%; /* Šířka textového pole */
padding: 10px; /* Odstup uvnitř pole */
border-radius: 20px; /* Zaoblení rohů */
border: 1px solid #ced4da; /* Rámeček */
font-size: 1em; /* Velikost písma */
text-align: center; /* Zarovnání textu doprostřed */
box-sizing: border-box; /* Velikost včetně rámečku */
}
.centered-button {
margin-top: 10px; /* Odstup tlačítka od textového pole */
padding: 10px 20px; /* Zvětšíme tlačítko o 20 % */
border-radius: 20px; /* Zaoblení rohů */
font-size: 1.2em; /* Zvětšíme velikost písma o 20 % */
background-color: #007bff; /* Barva pozadí */
color: #fff; /* Barva textu */
border: none; /* Žádný rám */
cursor: pointer; /* Změna kurzoru na ukazovátko */
}
</style>
</head>
<body>
<div class=„centered-container“>
<div class=„input-container“>
<input type=„password“ id=„password“ class=„centered-input“ placeholder=„Zadejte heslo“><br><br>
<button class=„centered-button“ onclick=„login()“>Přihlásit</button>
</div>
</div>
<script>
function login() {
var enteredPassword = document.getElementById(„password“).value;
if (enteredPassword === „heslo“) {
// Správné heslo, přesměrování na povolenou stránku
window.location.href = „povolenastranka.html“;
} else {
// Nesprávné heslo, zobrazení upozornění
alert(„Heslo je nesprávné. Zkuste to znovu.“);
// Vyčistit pole hesla
document.getElementById(„password“).value = „“;
}
}
document.getElementById(„password“).addEventListener(„keydown“, function(event) {
// Check if the pressed key is Enter (key code 13)
if (event.keyCode === 13) {
// Call the login function when Enter is pressed
login();
}
});
</script>
</body>
</html>