payment.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script>
        $(function(){
            $('#navbar').load('navbar.html')
        });
    </script>
    <!-- <link rel="stylesheet" href="signIn.css"> -->
    <style>
        body{
    margin: 0;
    padding:0;
    font-family: sans-serif;
    background-color:#f0f2f4 ;
    background-size: cover;
    background-position: center;
}
.top-bar{
    height: 90px;
    width: 100%;
   display: flex;
    background-color: rgb(19, 19, 198);
    color: white;  
    justify-content: space-around; 


}
.top-in{
    height: 70px;
    width:10%;

  margin-top: 19px;
}
.imge{
  max-width: 70%;
  max-height: 80%;
}
.returns{
    color: white;
    font-size: 17px;
}
.b{
   
  margin-top: 35px;
}
.sign-in-form{
    width: 470px;
    box-shadow:rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
    background: #fff;
    padding: 20px;

    margin: 2% auto 0;
    text-align: center;
    border-radius: 15px;
} 
.sign-in-form h1{
    color: black;
margin-bottom: 30px;
}
.input-box{
    border-radius: 5px;
    width: 100%;
    padding: 20px 0 15px 0;
    margin: 10px 0;
    border: 1px solid #999;
    outline: none;
    font-size: large;
    padding-left: 10px;
}
/* button{
   
    width: 100%;
    padding: 15px;
    border-radius: 5px;
    font-size: 15px;
    border: 1px solid #999;
    margin: 10px 0;
 border: none;
 outline: none;
 cursor: pointer;
} */
.signin-btn{
    background-color: #0b19b3;
    color: white;
    font-size: 20px;
    margin-top: 20px;
}
.signin-btn:hover{
    background-color: rgb(6, 6, 118);
    transition: 0.4s;
}
.webAuthn-btn{
    border: none;
    background-color: #0b4ec0;
    color: white;
    font-size: 20px;
    font-weight: 550;
    border-radius: 5px;
    padding: 10px 20px;
}
.webAuthn-btn:hover{
    background-color: rgb(6, 6, 118);
    color: white;
    transition: .5s;
}

a{
    text-decoration:none;
    color: #1259b6;
}
a:hover{
    text-decoration:underline;
}

::-webkit-input-placeholder{
    color:rgba(32, 13, 13, 0.537);
    font-size: 20px;
    padding-left: 10px;
    font-weight: 550;
}
.forgot{
font-size: large;

margin-right: 280px;
color: blue;
}
    </style>
</head>
<body>
    <div id="navbar"></div>

    <!-- <div class="top-bar">
        <div class="top-in a">
        <img class="imge" src="https://pisces.bbystatic.com/image2/BestBuy_US/Gallery/BestBuy_Logo_2020-190616.png;maxHeight=80;maxWidth=136"/>
    </div>
        <div class="top-in b">
        <a class="returns" href="#">Return to previous page</a>
    </div>
    </div> -->
    <div class="sign-in-form">
    <h1>Check Out Here</h1>
    
    <form>
        
        <input type="name" class="input-box" placeholder="Enter your name" id="input-a">
        <input type="number" class="input-box" placeholder="Card Number" id="input-b">
      
        <input type="text"  class="input-box" placeholder="CVV" id="input-c">
 
     <!-- <input type="date"  class="input-box" placeholder="Expiry Date" id="input-d"> -->
     <input placeholder="Expiry Date" class="input-box" type="text" onfocus="(this.type='date')" id="input-d">

     <input type="number"  class="input-box" placeholder="OTP" id="input-e">
   
     <input type="submit" class="webAuthn-btn" value="Checkout">

     <p>By continuing you agree to our <a href="#">Terms and Conditions</a>, our <a href="#">Privacy Policy</a>
        , and the <a href="#">My Best Buy® Program Terms.</a></p>
     <hr>

 </form>

</div>
</body>
</html>
<script>

document.querySelector("form").addEventListener("submit",payment)
function payment()
{
    event.preventDefault()
    //console.log("hello")
//    document.querySelector(".webAuthn-btn").alert("Payment Successfull")
alert("Congratulations! Your order has beed placed")
   document.querySelector("#input-a").value=""
   document.querySelector("#input-b").value=""
   document.querySelector("#input-c").value=""
   document.querySelector("#input-d").value=""
   document.querySelector("#input-e").value=""

window.location.href="endpage.html"

}


</script>