<!DOCTYPE html>
<html>
<head>
    <title>Login</title>
    <style>
        body{
            background:#f4f6f9;
            font-family:Arial;
        }
        .login-box{
            width:350px;
            margin:120px auto;
            background:#fff;
            padding:30px;
            border-radius:10px;
            box-shadow:0 0 10px rgba(0,0,0,.1);
        }
        h2{text-align:center;}
        input{
            width:100%;
            padding:10px;
            margin:10px 0;
        }
        button{
            width:100%;
            padding:10px;
            background:#007bff;
            border:none;
            color:#fff;
            font-size:16px;
            cursor:pointer;
        }
        button:hover{background:#0056b3;}
        .error{color:red;text-align:center;}
    </style>
</head>
<body>

<div class="login-box">
    <h2>Login</h2>

    <?php if(isset($_GET['error'])){ ?>
        <p class="error">Invalid Username or Password</p>
    <?php } ?>

    <form method="post" action="login_action.php">
        <input type="text" name="username" placeholder="Username" required>
        <input type="password" name="password" placeholder="Password" required>
        <button type="submit">Login</button>
    </form>
</div>

</body>
</html>
