<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

    <title>Login</title>
    <style>
        body{background-color: cornflowerblue;}
        .container1{border-radius:5px; background-color:rgba(9, 10, 10, 0.25);}
        h1 {color: ghostwhite; font-size: 40px;}
    </style>

</head>

<body>
    <div class ="container-fluid">
        <div class="container1">
        
         <h1 class ="text-center">Hello</h1>
         <h1 class ="text-center">To proceed please enter your details.</h1>

         <!--Post method for this login as need to ensure security for the user on login-->
         <form method = "POST" action="/verify">
            <div class="col-md-4 form-group">
                <label for="username">Username</label>
                <input type="text" class="form-control" id="username" name="username" placeholder="Enter your userID">

            </div>
            <div class="col-md-4 form-group">
                <label for="password">Password</label>
                <input type="password" class="form-control" id="password" name="password" placeholder="Password">
            </div><br>
            <button type="submit" class="btn-primary btn">Log me in</button>
         </form><br>
        </div>
        
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>

</html>