<!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>