142 lines
3.9 KiB
HTML
142 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Checkout – MediGlobe</title>
|
||
|
||
<link rel="stylesheet" href="assets/css/styles.css" />
|
||
<link rel="stylesheet" href="assets/css/components.css" />
|
||
<link rel="stylesheet" href="assets/css/checkout.css" />
|
||
</head>
|
||
|
||
<body>
|
||
<!-- <div id="topbar-placeholder"></div> -->
|
||
<div id="navbar-placeholder"></div>
|
||
|
||
<!-- BREADCRUMB -->
|
||
<div class="breadcrumb-bar">
|
||
<div class="breadcrumb-inner">
|
||
<a href="index.html">Home</a>
|
||
<span class="sep">›</span>
|
||
<a href="checkout.html" class="current">Checkout</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="checkout-page">
|
||
<div class="checkout-page-title">
|
||
<h1>Checkout</h1>
|
||
</div>
|
||
<div class="checkout-layout">
|
||
<!-- LEFT: Billing Form -->
|
||
<div class="checkout-form-card">
|
||
<h2 class="checkout-title">Billing Details</h2>
|
||
|
||
<form id="checkout-form" class="checkout-form">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="first_name">First Name <span>*</span></label>
|
||
<input type="text" id="first_name" name="first_name" required />
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="last_name">Last Name <span>*</span></label>
|
||
<input type="text" id="last_name" name="last_name" required />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="email">Email Address </label>
|
||
<input type="email" id="email" name="email" />
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="phone">Phone <span>*</span></label>
|
||
<input type="tel" id="phone" name="phone" required />
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="address">Street Address <span>*</span></label>
|
||
<input type="text" id="address" name="address" required />
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="city">City <span>*</span></label>
|
||
<input type="text" id="city" name="city" required />
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="state">State <span>*</span></label>
|
||
<input type="text" id="state" name="state" required />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="post_code">Postal Code <span>*</span></label>
|
||
<input
|
||
type="text"
|
||
id="post_code"
|
||
name="post_code"
|
||
maxlength="6"
|
||
required />
|
||
</div>
|
||
|
||
<button
|
||
type="submit"
|
||
id="btn-order"
|
||
data-step="unlock"
|
||
class="btn-primary checkout-continue">
|
||
<span class="btn-text">Continue to Payment →</span>
|
||
<span class="btn-spinner"></span>
|
||
</button>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- RIGHT: Order Summary -->
|
||
<div class="checkout-summary-card">
|
||
<h2 class="checkout-title">Your Order</h2>
|
||
|
||
<div id="checkout-items"></div>
|
||
|
||
<div class="checkout-summary">
|
||
<div class="summary-row">
|
||
<span>Subtotal</span>
|
||
<span id="checkout-subtotal">₹0.00</span>
|
||
</div>
|
||
|
||
<hr />
|
||
|
||
<div class="summary-row total-row">
|
||
<span>Total</span>
|
||
<span id="checkout-total">₹0.00</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- QR Section -->
|
||
<div class="qr-section">
|
||
<div class="qr-wrapper blurred" id="qr-wrapper">
|
||
<img src="assets/images/qr-code.jpeg" alt="Payment QR Code" />
|
||
</div>
|
||
|
||
<p class="qr-note">Fill billing details to unlock payment QR.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="footer-placeholder"></div>
|
||
|
||
<div class="toast" id="toast">
|
||
<span id="toast-icon" class="toast-icon"></span>
|
||
<span id="toast-msg"></span>
|
||
</div>
|
||
|
||
<script src="assets/js/config.js"></script>
|
||
<script src="assets/js/components.js"></script>
|
||
<script src="assets/js/toast.js"></script>
|
||
<script src="assets/js/cart.js"></script>
|
||
<script src="assets/js/checkout.js"></script>
|
||
</body>
|
||
</html>
|