index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="shortcut icon" type="image/png" href="Logo.jpg">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="TelaLogin.css">
    <title>Login</title>
</head>

<body>
    <div class="login-container">
        <h1>Login</h1>
        <form id="loginForm">
            <input type="text" id="username" placeholder="Username" required><br>
            <input type="password" id="password" placeholder="Password" required><br>
            <button type="submit" id="Login">Login</button>
        </form>
        <div class="signup">Don't have an account? <a href="Tela Cadastro/TelaCadastro.html">Sign up</a></div>
    </div>

    <script>
        document.getElementById('loginForm').addEventListener('submit', function (event) {
            // Evitar o envio padrão do formulário
            event.preventDefault();

            let username = document.getElementById('username').value;
            let password = document.getElementById('password').value;

            // Enviar para o localStorage
            localStorage.setItem("username", username);
            localStorage.setItem("password", password);

            // Redirecionar para a página desejada
            window.location.href = "Principal/principal.html";
        });
    </script>
</body>

</html>