registracija in vpis

Registracija in vpis

Vpis je proces, pri katerem uporabnik vnese svoje podatke, kot so uporabniško ime in geslo, da pridobi dostop do sistema ali aplikacije. Ta postopek je bistven za avtentikacijo uporabnikov in zaščito zasebnih informacij.

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>vpis</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

input[type=text], input[type=password] {
            display: inline-block;
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            border: 1px solid #ccc;
        }

/* nastavitev sloga za vse gumbe */
        button {
            background-color: orange;
            color: black;
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            cursor: pointer;
            width: 100%;
        }
        button:hover {
            opacity: 0.8;
            background-color: lightblue;
            color: black;
            border-radius: 8px;
            box-shadow: 0 8px 24px rgba(149, 157, 165, 0.2);
        }

/* slog za gumb za gumb prekliči */
        .cancelBtn {
            width: auto;
            padding: 10px 18px;
            background-color: red;
            color: yellow;
        }

.container {
            padding: 16px;
        }

span.question {
            float: right;
            padding-top: 16px;
        }

.modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0,0,0);
            background-color: rgba(0,0,0,0.4);
            padding-top: 60px;
        }
        .modalContent {
            background-color: #fefefe;
            margin: 5% auto 15% auto;
            border: 1px solid #888;
            width: 80%;
        }

.close {
            position: absolute;
            right: 25px;
            top: 0;
            color: #000;
            font-size: 35px;
            font-weight: bold;
        }
        .close:hover, .close:focus {
            color: red;
            cursor: pointer;
        }

/* dodajmo animacijo za povečavo */
        .animate {
            -webkit-animation: animateZoom 0.6s;
            animation: animateZoom 0.6s
        }

@keyframes animateZoom {
            from {transform: scale(0)}
            to {transform: scale(1)}
        }

/* spremenimo sloge za razpon in gumb za preklic za manjše zaslone */
        @media screen and (max-width: 680px) {
            span.question {
                display: block;
                float: none;
            }
            .cancelBtn {
                width: 100%;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <button onclick="document.getElementById('odpriObrazec').style.display='block'" style="width:auto;">PRIJAVI SE</button>

<div id="odpriObrazec" class="modal">
        <form class="modalContent animate" action="" method="post">
            <div class="container">
                <label for="a"><b>Uporabniško ime</b></label>
                <input id="a" type="text" placeholder="Vnesite uporabniško ime" name="ime" required>

<label for="b"><b>Geslo</b></label>
                <input id="b" type="password" placeholder="Vnesite geslo" name="priimek" required>

<button type="submit">Vpiši se</button>
                <label for="c"></label>
                <input id="c" type="checkbox" checked="checked" name="spomin">Zapomni si me
            </div>

<div class="container" style="background-color:#f1f1f1">
                <button type="button" onclick="document.getElementById('odpriObrazec').style.display='none'"
                        class="cancelBtn">Prekliči</button>
                <span class="question"><a href="#">Si pozabil geslo?</a></span>
            </div>
        </form>
    </div>
</div>

// ko kliknemo kjerkoli zunaj modal-a, se zapre
    window.onclick = function(event) {
        if (event.target === modal) {
            modal.style.display = "none";
        }
    }
</script>
</body>
</html>