423 lines
24 KiB
Plaintext
423 lines
24 KiB
Plaintext
<%@ Page Title="17168-CheckOut" Language="C#" MasterPageFile="~/admin/Templates/TBS5ADM001/MasterPage.master" AutoEventWireup="true" CodeFile="checkOut.aspx.cs" Inherits="admin_checkOut" %>
|
||
|
||
<asp:Content ID="Content1" ContentPlaceHolderID="page_header" runat="Server">
|
||
</asp:Content>
|
||
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
|
||
<nav class="navbar bg-light navbar-light border-top border-bottom px-2">
|
||
<ul class="nav nav-pills">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" aria-current="page" href="#">Active</a>
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
|
||
<ul class="dropdown-menu">
|
||
<li><a class="dropdown-item navitem1" data-class="light" href="#">Light</a></li>
|
||
<li><a class="dropdown-item navitem2" data-class="dark" href="#">Dark</a></li>
|
||
<li><a class="dropdown-item navitem3" data-class="info" href="#">Info</a></li>
|
||
<li>
|
||
<hr class="dropdown-divider">
|
||
</li>
|
||
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Link</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
<div class="p-2">
|
||
<div class="g-5">
|
||
<nav>
|
||
<div class="nav nav-tabs" id="nav-tab" role="tablist">
|
||
<button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Form</button>
|
||
<button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Table</button>
|
||
<button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Card/Buttons</button>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
<div class="tab-content mt-2" id="nav-tabContent">
|
||
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
|
||
<div class="container">
|
||
<div class="row">
|
||
<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">3</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">Product name</h6>
|
||
<small class="text-muted">Brief description</small>
|
||
</div>
|
||
<span class="text-muted">$12</span>
|
||
</li>
|
||
<li class="list-group-item d-flex justify-content-between lh-sm">
|
||
<div>
|
||
<h6 class="my-0">Second product</h6>
|
||
<small class="text-muted">Brief description</small>
|
||
</div>
|
||
<span class="text-muted">$8</span>
|
||
</li>
|
||
<li class="list-group-item d-flex justify-content-between lh-sm">
|
||
<div>
|
||
<h6 class="my-0">Third item</h6>
|
||
<small class="text-muted">Brief description</small>
|
||
</div>
|
||
<span class="text-muted">$5</span>
|
||
</li>
|
||
<li class="list-group-item d-flex justify-content-between bg-light">
|
||
<div class="text-success">
|
||
<h6 class="my-0">Promo code</h6>
|
||
<small>EXAMPLECODE</small>
|
||
</div>
|
||
<span class="text-success">−$5</span>
|
||
</li>
|
||
<li class="list-group-item d-flex justify-content-between">
|
||
<span>Total (USD)</span>
|
||
<strong>$20</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-muted">(Optional)</span></label>
|
||
<input type="email" class="form-control" id="email" placeholder="you@example.com">
|
||
<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-muted">(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>
|
||
<option>United States</option>
|
||
<option>United States</option>
|
||
<option>United States</option>
|
||
<option>United States</option>
|
||
<option>United States</option>
|
||
<option>United States</option>
|
||
<option>United States</option>
|
||
<option>United States</option>
|
||
<option>United States</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>
|
||
<option>California</option>
|
||
<option>California</option>
|
||
<option>California</option>
|
||
<option>California</option>
|
||
<option>California</option>
|
||
<option>California</option>
|
||
<option>California</option>
|
||
<option>California</option>
|
||
<option>California</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-muted">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>
|
||
</div>
|
||
</div>
|
||
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
|
||
<table class="table caption-top table-striped">
|
||
<caption>List of users</caption>
|
||
<thead>
|
||
<tr>
|
||
<th scope="col">#</th>
|
||
<th scope="col">First</th>
|
||
<th scope="col">Last</th>
|
||
<th scope="col">Handle</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<th scope="row">1</th>
|
||
<td>Mark</td>
|
||
<td>Otto</td>
|
||
<td>@mdo</td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row">2</th>
|
||
<td>Jacob</td>
|
||
<td>Thornton</td>
|
||
<td>@fat</td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row">3</th>
|
||
<td>Larry</td>
|
||
<td>the Bird</td>
|
||
<td>@twitter</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<nav aria-label="Page navigation example">
|
||
<ul class="pagination justify-content-end">
|
||
<li class="page-item disabled">
|
||
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
|
||
</li>
|
||
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||
<li class="page-item">
|
||
<a class="page-link" href="#">Next</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
|
||
<div class="my-2">
|
||
<button type="button" class="btn btn-primary">Primary</button>
|
||
<button type="button" class="btn btn-secondary">Secondary</button>
|
||
<button type="button" class="btn btn-success">Success</button>
|
||
<button type="button" class="btn btn-danger">Danger</button>
|
||
<button type="button" class="btn btn-warning">Warning</button>
|
||
<button type="button" class="btn btn-info">Info</button>
|
||
<button type="button" class="btn btn-light">Light</button>
|
||
<button type="button" class="btn btn-dark">Dark</button>
|
||
<button type="button" class="btn btn-link">Link</button>
|
||
</div>
|
||
<div class="my-2">
|
||
<button type="button" class="btn btn-outline-primary">Primary</button>
|
||
<button type="button" class="btn btn-outline-secondary">Secondary</button>
|
||
<button type="button" class="btn btn-outline-success">Success</button>
|
||
<button type="button" class="btn btn-outline-danger">Danger</button>
|
||
<button type="button" class="btn btn-outline-warning">Warning</button>
|
||
<button type="button" class="btn btn-outline-info">Info</button>
|
||
<button type="button" class="btn btn-outline-light">Light</button>
|
||
<button type="button" class="btn btn-outline-dark">Dark</button>
|
||
</div>
|
||
<div class="my-2">
|
||
<!-- Button trigger modal -->
|
||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
|
||
Launch demo modal
|
||
</button>
|
||
|
||
<!-- Modal -->
|
||
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
...
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||
<button type="button" class="btn btn-primary">Save changes</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-header">
|
||
Featured
|
||
</div>
|
||
<div class="card-body">
|
||
<h5 class="card-title">Special title treatment</h5>
|
||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||
</div>
|
||
</div>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-sm-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h5 class="card-title">Special title treatment</h5>
|
||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h5 class="card-title">Special title treatment</h5>
|
||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</asp:Content>
|
||
<asp:Content ID="Content3" ContentPlaceHolderID="footer_script" runat="Server">
|
||
<script>
|
||
$(".navitem1,.navitem2,.navitem3").click(function (e) {
|
||
e.preventDefault();
|
||
var c1 = $(this).data("class");
|
||
var c2 = `navbar-${c1} bg-${c1}`;
|
||
var c3 = `sb-sidenav-${c1}`;
|
||
|
||
$("#layoutSidenav_nav .nav-link").removeClass("text-info");
|
||
if (c1 == "info") {
|
||
c2 = `navbar-dark bg-${c1}`;
|
||
$("#layoutSidenav_nav .nav-link").addClass("text-info");
|
||
}
|
||
$(".sb-topnav")
|
||
.removeClass("navbar-dark bg-dark navbar-light bg-light")
|
||
.addClass(c2);
|
||
$(".sb-sidenav").removeClass("sb-sidenav-dark sb-sidenav-light")
|
||
.addClass(c3);
|
||
|
||
});
|
||
</script>
|
||
</asp:Content>
|
||
|