-
Notifications
You must be signed in to change notification settings - Fork 601
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #139 from PranavBarthwal/payment
payment page
- Loading branch information
Showing
4 changed files
with
252 additions
and
16 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,236 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>TourGuide Checkout</title> | ||
|
|
||
|
|
||
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> | ||
| </head> | ||
| <body> | ||
|
|
||
|
|
||
|
|
||
| <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb"> | ||
| <ol class="breadcrumb"> | ||
| <li class="breadcrumb-item"><a href="./index.html">Home</a></li> | ||
| <li class="breadcrumb-item active" aria-current="page">Checkout</li> | ||
| </ol> | ||
| </nav> | ||
|
|
||
|
|
||
| <div class="container"> | ||
| <main> | ||
| <div class="py-5 text-center"> | ||
| <img class="d-block mx-auto mb-6" src="./img/Screenshot 2024-01-23 003448.png" alt="" height="100"><br> | ||
| <h2>Checkout form</h2> | ||
|
|
||
| </div> | ||
|
|
||
| <div class="row g-5"> | ||
| <div class="col-md-5 col-lg-4 order-md-last"> | ||
| <h4 class="d-flex justify-content-between align-items-center mb-3"> | ||
| <span class="text-primary">Your cart</span> | ||
| <span class="badge bg-primary rounded-pill">1</span> | ||
| </h4> | ||
| <ul class="list-group mb-3"> | ||
| <li class="list-group-item d-flex justify-content-between lh-sm"> | ||
| <div> | ||
| <h6 class="my-0">Goa 4D/3N Package</h6> | ||
| <small class="text-body-secondary">Brief description</small> | ||
| </div> | ||
| <span class="text-body-secondary">15000/-</span> | ||
| </li> | ||
|
|
||
| <li class="list-group-item d-flex justify-content-between bg-body-tertiary"> | ||
| <div class="text-success"> | ||
| <h6 class="my-0">Promo code</h6> | ||
| <small>JWOC </small> | ||
| </div> | ||
| <span class="text-success">−1000/-</span> | ||
| </li> | ||
| <li class="list-group-item d-flex justify-content-between"> | ||
| <span>Total (INR)</span> | ||
| <strong>14000/-</strong> | ||
| </li | ||
| </ul> | ||
|
|
||
| <form class="card p-2"> | ||
| <div class="input-group"> | ||
| <input type="text" class="form-control" placeholder="Promo code"> | ||
| <button type="submit" class="btn btn-secondary">Redeem</button> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| <div class="col-md-7 col-lg-8"> | ||
| <h4 class="mb-3">Billing address</h4> | ||
| <form class="needs-validation" novalidate=""> | ||
| <div class="row g-3"> | ||
| <div class="col-sm-6"> | ||
| <label for="firstName" class="form-label">First name</label> | ||
| <input type="text" class="form-control" id="firstName" placeholder="" value="" required=""> | ||
| <div class="invalid-feedback"> | ||
| Valid first name is required. | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="col-sm-6"> | ||
| <label for="lastName" class="form-label">Last name</label> | ||
| <input type="text" class="form-control" id="lastName" placeholder="" value="" required=""> | ||
| <div class="invalid-feedback"> | ||
| Valid last name is required. | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="col-12"> | ||
| <label for="username" class="form-label">Username</label> | ||
| <div class="input-group has-validation"> | ||
| <span class="input-group-text">@</span> | ||
| <input type="text" class="form-control" id="username" placeholder="Username" required=""> | ||
| <div class="invalid-feedback"> | ||
| Your username is required. | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="col-12"> | ||
| <label for="email" class="form-label">Email <span class="text-body-secondary">(Optional)</span></label> | ||
| <input type="email" class="form-control" id="email" placeholder="[email protected]"> | ||
| <div class="invalid-feedback"> | ||
| Please enter a valid email address for shipping updates. | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="col-12"> | ||
| <label for="address" class="form-label">Address</label> | ||
| <input type="text" class="form-control" id="address" placeholder="1234 Main St" required=""> | ||
| <div class="invalid-feedback"> | ||
| Please enter your shipping address. | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="col-12"> | ||
| <label for="address2" class="form-label">Address 2 <span class="text-body-secondary">(Optional)</span></label> | ||
| <input type="text" class="form-control" id="address2" placeholder="Apartment or suite"> | ||
| </div> | ||
|
|
||
| <div class="col-md-5"> | ||
| <label for="country" class="form-label">Country</label> | ||
| <select class="form-select" id="country" required=""> | ||
| <option value="">Choose...</option> | ||
| <option>United States</option> | ||
| </select> | ||
| <div class="invalid-feedback"> | ||
| Please select a valid country. | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="col-md-4"> | ||
| <label for="state" class="form-label">State</label> | ||
| <select class="form-select" id="state" required=""> | ||
| <option value="">Choose...</option> | ||
| <option>California</option> | ||
| </select> | ||
| <div class="invalid-feedback"> | ||
| Please provide a valid state. | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="col-md-3"> | ||
| <label for="zip" class="form-label">Zip</label> | ||
| <input type="text" class="form-control" id="zip" placeholder="" required=""> | ||
| <div class="invalid-feedback"> | ||
| Zip code required. | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <hr class="my-4"> | ||
|
|
||
| <div class="form-check"> | ||
| <input type="checkbox" class="form-check-input" id="same-address"> | ||
| <label class="form-check-label" for="same-address">Shipping address is the same as my billing address</label> | ||
| </div> | ||
|
|
||
| <div class="form-check"> | ||
| <input type="checkbox" class="form-check-input" id="save-info"> | ||
| <label class="form-check-label" for="save-info">Save this information for next time</label> | ||
| </div> | ||
|
|
||
| <hr class="my-4"> | ||
|
|
||
| <h4 class="mb-3">Payment</h4> | ||
|
|
||
| <div class="my-3"> | ||
| <div class="form-check"> | ||
| <input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked="" required=""> | ||
| <label class="form-check-label" for="credit">Credit card</label> | ||
| </div> | ||
| <div class="form-check"> | ||
| <input id="debit" name="paymentMethod" type="radio" class="form-check-input" required=""> | ||
| <label class="form-check-label" for="debit">Debit card</label> | ||
| </div> | ||
| <div class="form-check"> | ||
| <input id="paypal" name="paymentMethod" type="radio" class="form-check-input" required=""> | ||
| <label class="form-check-label" for="paypal">PayPal</label> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="row gy-3"> | ||
| <div class="col-md-6"> | ||
| <label for="cc-name" class="form-label">Name on card</label> | ||
| <input type="text" class="form-control" id="cc-name" placeholder="" required=""> | ||
| <small class="text-body-secondary">Full name as displayed on card</small> | ||
| <div class="invalid-feedback"> | ||
| Name on card is required | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="col-md-6"> | ||
| <label for="cc-number" class="form-label">Credit card number</label> | ||
| <input type="text" class="form-control" id="cc-number" placeholder="" required=""> | ||
| <div class="invalid-feedback"> | ||
| Credit card number is required | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="col-md-3"> | ||
| <label for="cc-expiration" class="form-label">Expiration</label> | ||
| <input type="text" class="form-control" id="cc-expiration" placeholder="" required=""> | ||
| <div class="invalid-feedback"> | ||
| Expiration date required | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="col-md-3"> | ||
| <label for="cc-cvv" class="form-label">CVV</label> | ||
| <input type="text" class="form-control" id="cc-cvv" placeholder="" required=""> | ||
| <div class="invalid-feedback"> | ||
| Security code required | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <hr class="my-4"> | ||
|
|
||
| <button class="w-100 btn btn-primary btn-lg" type="submit">Continue to checkout</button> | ||
| </form> | ||
| </div> | ||
| </div> | ||
| </main> | ||
|
|
||
| <footer class="my-5 pt-5 text-body-secondary text-center text-small"> | ||
| <p class="mb-1">© 2024 Tourguide.</p> | ||
| <ul class="list-inline"> | ||
| <li class="list-inline-item"><a href="#">Privacy</a></li> | ||
| <li class="list-inline-item"><a href="#">Terms</a></li> | ||
| <li class="list-inline-item"><a href="#">Support</a></li> | ||
| </ul> | ||
| </footer> | ||
| </div> | ||
|
|
||
|
|
||
|
|
||
| </body> | ||
| </html> |