<!DOCTYPE html>
<html lang="bs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Školska Prijava</title>

<style>
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: linear-gradient(to right, #4facfe, #00f2fe);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.login-box {
    background: white;
    padding: 30px;
    border-radius: 15px;
    width: 300px;
    text-align: center;
}

input {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
}

button {
    width: 100%;
    padding: 10px;
    background: #ff6b6b;
    color: white;
    border: none;
    cursor: pointer;
}

#poruka {
    margin-top: 10px;
    font-weight: bold;
}
</style>
</head>

<body>

<div class="login-box">
    <h2>📚 Prijava</h2>

    <form id="loginForm">
        <input type="text" id="username" placeholder="Korisničko ime">
        <input type="password" id="password" placeholder="Lozinka">
        <button type="submit">Prijavi se</button>
    </form>

    <div id="poruka"></div>
</div>

<script>
const korisnici = [
    { username: "ucenik1", password: "1234" },
    { username: "ucenik2", password: "1111" },
    { username: "ucitelj", password: "skola" }
];

document.getElementById("loginForm").addEventListener("submit", function(e) {
    e.preventDefault();

    const user = document.getElementById("username").value;
    const pass = document.getElementById("password").value;

    const postoji = korisnici.find(k =>
        k.username === user && k.password === pass
    );

    if(postoji) {
        // PREUSMJERAVANJE NA NOVU STRANICU
        window.location.href = "pocetna.html";
    } else {
        document.getElementById("poruka").innerHTML =
            "❌ Pogrešno korisničko ime ili lozinka!";
        document.getElementById("poruka").style.color = "red";
    }
});
</script>

</body>
</html>

kreiraj sada fajl početna.html

<!DOCTYPE html>
<html lang="bs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Početna</title>

<style>
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f4f4f4;
    text-align: center;
    padding-top: 100px;
}

h1 {
    color: #333;
}

button {
    padding: 10px 20px;
    background: #ff6b6b;
    color: white;
    border: none;
    cursor: pointer;
}
</style>
</head>

<body>

<h1>🎉 Dobrodošao na školsku stranicu!</h1>
<p>Uspješno si se prijavio.</p>

<button onclick="logout()">Odjavi se</button>

<script>
function logout() {
    window.location.href = "login.html";
}
</script>

</body>
</html>