449 lines
23 KiB
HTML
449 lines
23 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 Page</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<div class="page-wrapper">
|
|
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">Flipkart</div><ul class="nav-1-nav-links"><li><a href="index.html">Home</a></li><li><a href="product_listing_page.html">Product Listing Page</a></li><li><a href="cart_page.html">Cart Page</a></li><li><a href="login_page.html">Login Page</a></li><li><a href="dashboard_page.html">Dashboard Page</a></li><li><a href="signup_page.html">Signup Page</a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Join</button><button class="nav-1-btn nav-1-solid">Start</button></div></nav></div>
|
|
<section class="shipping-address-section">
|
|
<div class="shipping-address-header">
|
|
<h2>Shipping Address</h2>
|
|
<button type="button" class="add-new-address-btn">Add New Address</button>
|
|
</div>
|
|
|
|
<div class="address-list">
|
|
<!-- Placeholder for existing addresses - these would typically be dynamically loaded -->
|
|
<div class="address-card selected">
|
|
<input type="radio" name="selected-address" id="address1" value="addr_id_123" class="address-radio-input" checked="">
|
|
<label for="address1" class="address-details-label">
|
|
<h3 class="address-name">John Doe</h3>
|
|
<p class="address-line">123, Main Street, Apt 4B, Near Park</p>
|
|
<p class="address-city-state-pin">Springfield, Illinois - 62704</p>
|
|
<p class="address-phone">Phone: 9876543210</p>
|
|
</label>
|
|
<div class="address-actions">
|
|
<button type="button" class="edit-address-btn">Edit</button>
|
|
<button type="button" class="remove-address-btn">Remove</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="address-card">
|
|
<input type="radio" name="selected-address" id="address2" value="addr_id_456" class="address-radio-input">
|
|
<label for="address2" class="address-details-label">
|
|
<h3 class="address-name">Jane Smith</h3>
|
|
<p class="address-line">456, Oak Avenue, Building C, Block D</p>
|
|
<p class="address-city-state-pin">Metropolis, New York - 10001</p>
|
|
<p class="address-phone">Phone: 1234567890</p>
|
|
</label>
|
|
<div class="address-actions">
|
|
<button type="button" class="edit-address-btn">Edit</button>
|
|
<button type="button" class="remove-address-btn">Remove</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form for adding/editing address - can be toggled visible/hidden via CSS/JS -->
|
|
<div class="add-edit-address-form-container">
|
|
<h3>Add a New Address</h3>
|
|
<form class="address-form">
|
|
<div class="form-group">
|
|
<label for="full-name">Full Name</label>
|
|
<input type="text" id="full-name" name="full_name" placeholder="Enter your full name" required="">
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="phone-number">Phone Number</label>
|
|
<input type="tel" id="phone-number" name="phone_number" placeholder="10-digit mobile number" pattern="[0-9]{10}" required="">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="pincode">Pincode</label>
|
|
<input type="text" id="pincode" name="pincode" placeholder="6-digit Pincode" pattern="[0-9]{6}" required="">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="address-line1">Address (House No., Building, Street, Area)</label>
|
|
<input type="text" id="address-line1" name="address_line1" placeholder="Address Line 1" required="">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="address-line2">Locality / Town (Optional)</label>
|
|
<input type="text" id="address-line2" name="address_line2" placeholder="Address Line 2 (Optional)">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="landmark">Landmark (Optional)</label>
|
|
<input type="text" id="landmark" name="landmark" placeholder="E.g. Near Apollo Hospital (Optional)">
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="city">City</label>
|
|
<input type="text" id="city" name="city" placeholder="City" required="">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="state">State</label>
|
|
<select id="state" name="state" required="">
|
|
<option value="">Select State</option>
|
|
<option value="AP">Andhra Pradesh</option>
|
|
<option value="KA">Karnataka</option>
|
|
<option value="MH">Maharashtra</option>
|
|
<option value="DL">Delhi</option>
|
|
<option value="TN">Tamil Nadu</option>
|
|
<option value="UP">Uttar Pradesh</option>
|
|
<option value="WB">West Bengal</option>
|
|
<!-- Add more states as needed -->
|
|
<option value="OT">Other</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group checkbox-group">
|
|
<input type="checkbox" id="default-address" name="default_address">
|
|
<label for="default-address">Make this my default address</label>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button type="submit" class="save-address-btn">Save and Deliver Here</button>
|
|
<button type="button" class="cancel-btn">Cancel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
<section class="payment-selection-section">
|
|
<h2 class="section-title">Select a Payment Option</h2>
|
|
|
|
<div class="payment-options-container">
|
|
<div class="payment-methods-sidebar">
|
|
<ul class="method-list">
|
|
<li class="method-item active">
|
|
<a href="#cards" class="method-link" aria-controls="cards">Cards (Credit/Debit)</a>
|
|
</li>
|
|
<li class="method-item">
|
|
<a href="#upi" class="method-link" aria-controls="upi">UPI</a>
|
|
</li>
|
|
<li class="method-item">
|
|
<a href="#wallets" class="method-link" aria-controls="wallets">Wallets</a>
|
|
</li>
|
|
<li class="method-item">
|
|
<a href="#netbanking" class="method-link" aria-controls="netbanking">Net Banking</a>
|
|
</li>
|
|
<li class="method-item">
|
|
<a href="#emi" class="method-link" aria-controls="emi">EMI</a>
|
|
</li>
|
|
<li class="method-item">
|
|
<a href="#cod" class="method-link" aria-controls="cod">Cash on Delivery</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="payment-details-content">
|
|
|
|
<div id="cards" class="payment-option-card active-option" role="tabpanel" aria-labelledby="cards">
|
|
<h3 class="option-title">Credit / Debit Card</h3>
|
|
<form class="card-form">
|
|
<div class="form-group">
|
|
<label for="cardNumber">Card Number</label>
|
|
<input type="text" id="cardNumber" placeholder="•••• •••• •••• ••••" aria-label="Card Number" pattern="[0-9]{13,19}" inputmode="numeric">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="cardName">Name on Card</label>
|
|
<input type="text" id="cardName" placeholder="John Doe" aria-label="Name on Card" autocomplete="cc-name">
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group expiration-date">
|
|
<label for="expiryMonth">Expiry Date</label>
|
|
<div class="expiry-inputs">
|
|
<input type="text" id="expiryMonth" placeholder="MM" maxlength="2" aria-label="Expiry Month" pattern="(0[1-9]|1[0-2])" inputmode="numeric">
|
|
<span>/</span>
|
|
<input type="text" id="expiryYear" placeholder="YY" maxlength="2" aria-label="Expiry Year" pattern="[0-9]{2}" inputmode="numeric">
|
|
</div>
|
|
</div>
|
|
<div class="form-group cvv">
|
|
<label for="cvv">CVV</label>
|
|
<input type="password" id="cvv" placeholder="•••" maxlength="3" aria-label="CVV" pattern="[0-9]{3,4}" inputmode="numeric">
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="btn-primary">Pay securely</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div id="upi" class="payment-option-upi" role="tabpanel" aria-labelledby="upi" hidden="">
|
|
<h3 class="option-title">Pay with UPI</h3>
|
|
<p class="description">You will be asked to enter your UPI ID. A payment request will be sent to your UPI app.</p>
|
|
<form class="upi-form">
|
|
<div class="form-group">
|
|
<label for="upiId">Enter UPI ID</label>
|
|
<input type="text" id="upiId" placeholder="username@bank" aria-label="UPI ID">
|
|
</div>
|
|
<button type="submit" class="btn-primary">Verify & Pay</button>
|
|
</form>
|
|
<div class="upi-apps-placeholder">
|
|
<h4>Other UPI Options:</h4>
|
|
<p>Google Pay, PhonePe, Paytm, BHIM UPI (placeholder for app icons/buttons)</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="wallets" class="payment-option-wallets" role="tabpanel" aria-labelledby="wallets" hidden="">
|
|
<h3 class="option-title">Wallets</h3>
|
|
<div class="wallet-list">
|
|
<div class="wallet-item">
|
|
<input type="radio" id="paytmWallet" name="walletOption" value="paytm">
|
|
<label for="paytmWallet">Paytm Wallet</label>
|
|
<span class="wallet-balance-info">Balance: ₹XXX (Placeholder)</span>
|
|
</div>
|
|
<div class="wallet-item">
|
|
<input type="radio" id="phonepeWallet" name="walletOption" value="phonepe">
|
|
<label for="phonepeWallet">PhonePe Wallet</label>
|
|
</div>
|
|
<div class="wallet-item">
|
|
<input type="radio" id="mobikwikWallet" name="walletOption" value="mobikwik">
|
|
<label for="mobikwikWallet">MobiKwik Wallet</label>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="btn-primary mt-medium">Continue to Pay</button>
|
|
</div>
|
|
|
|
<div id="netbanking" class="payment-option-netbanking" role="tabpanel" aria-labelledby="netbanking" hidden="">
|
|
<h3 class="option-title">Net Banking</h3>
|
|
<p class="description">Choose from a wide range of banks.</p>
|
|
<form class="netbanking-form">
|
|
<div class="form-group">
|
|
<label for="selectBank">Select your Bank</label>
|
|
<select id="selectBank" aria-label="Select your Bank">
|
|
<option value="">Select Bank</option>
|
|
<option value="sbi">State Bank of India</option>
|
|
<option value="icici">ICICI Bank</option>
|
|
<option value="hdfc">HDFC Bank</option>
|
|
<option value="axis">Axis Bank</option>
|
|
<option value="other">Other Banks...</option>
|
|
</select>
|
|
</div>
|
|
<button type="submit" class="btn-primary">Pay Now</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div id="emi" class="payment-option-emi" role="tabpanel" aria-labelledby="emi" hidden="">
|
|
<h3 class="option-title">EMI (Easy Monthly Instalments)</h3>
|
|
<p class="description">Available on Credit Cards and Debit Cards for selected banks.</p>
|
|
<div class="emi-options-placeholder">
|
|
<h4>EMI Plans:</h4>
|
|
<p>No Cost EMI available (placeholder)</p>
|
|
<p>Standard EMI (placeholder)</p>
|
|
<p>Select your card type and bank to see eligible EMI plans.</p>
|
|
</div>
|
|
<button type="button" class="btn-primary">View EMI Options</button>
|
|
</div>
|
|
|
|
<div id="cod" class="payment-option-cod" role="tabpanel" aria-labelledby="cod" hidden="">
|
|
<h3 class="option-title">Cash on Delivery (COD)</h3>
|
|
<p class="description">Pay with cash when your order is delivered to your doorstep.</p>
|
|
<div class="cod-info-box">
|
|
<p><strong>Note:</strong> COD might not be available for all pin codes or order values.</p>
|
|
<p>Maximum allowed COD value is ₹X,XXX (Placeholder)</p>
|
|
</div>
|
|
<button type="button" class="btn-primary">Place Order & Pay on Delivery</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="order-review-section">
|
|
<div class="container">
|
|
<h1 class="section-title">Order Review & Confirmation</h1>
|
|
|
|
<div class="order-layout">
|
|
<div class="order-details-col">
|
|
<article class="card shipping-address-card">
|
|
<h2 class="card-title">Shipping Address</h2>
|
|
<address class="address-content">
|
|
<p class="address-name">Placeholder Name</p>
|
|
<p class="address-line">123, Example Street</p>
|
|
<p class="address-line">Apt. 42, Mockville</p>
|
|
<p class="address-line">State, ZIP 00000</p>
|
|
<p class="address-phone">Phone: +1 (555) 123-4567</p>
|
|
</address>
|
|
<a href="#" class="change-link">Change Address</a>
|
|
</article>
|
|
|
|
<article class="card payment-method-card">
|
|
<h2 class="card-title">Payment Method</h2>
|
|
<div class="payment-content">
|
|
<p class="payment-type">Credit Card (Visa)</p>
|
|
<p class="payment-detail">**** **** **** 1234</p>
|
|
</div>
|
|
<a href="#" class="change-link">Change Method</a>
|
|
</article>
|
|
|
|
<article class="card order-items-card">
|
|
<h2 class="card-title">Items in Your Order</h2>
|
|
<div class="order-item-list">
|
|
<div class="order-item">
|
|
<div class="item-thumbnail"></div>
|
|
<div class="item-info">
|
|
<h3 class="item-name">Placeholder Product A - Color, Size</h3>
|
|
<p class="item-qty">Qty: 1</p>
|
|
<p class="item-price">$XX.XX</p>
|
|
</div>
|
|
</div>
|
|
<div class="order-item">
|
|
<div class="item-thumbnail"></div>
|
|
<div class="item-info">
|
|
<h3 class="item-name">Placeholder Product B - Variant</h3>
|
|
<p class="item-qty">Qty: 2</p>
|
|
<p class="item-price">$YY.YY</p>
|
|
</div>
|
|
</div>
|
|
<div class="order-item">
|
|
<div class="item-thumbnail"></div>
|
|
<div class="item-info">
|
|
<h3 class="item-name">Placeholder Product C</h3>
|
|
<p class="item-qty">Qty: 1</p>
|
|
<p class="item-price">$ZZ.ZZ</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a href="#" class="view-cart-link">View Full Cart</a>
|
|
</article>
|
|
</div>
|
|
|
|
<aside class="order-summary-col">
|
|
<article class="card price-details-card">
|
|
<h2 class="card-title">Price Details</h2>
|
|
<dl class="price-list">
|
|
<div class="price-item">
|
|
<dt>Subtotal</dt>
|
|
<dd>$AAA.AA</dd>
|
|
</div>
|
|
<div class="price-item">
|
|
<dt>Discount</dt>
|
|
<dd class="discount">-$BB.BB</dd>
|
|
</div>
|
|
<div class="price-item">
|
|
<dt>Delivery Charges</dt>
|
|
<dd>$CC.CC</dd>
|
|
</div>
|
|
<div class="price-item total-price">
|
|
<dt>Total Payable</dt>
|
|
<dd>$DDD.DD</dd>
|
|
</div>
|
|
</dl>
|
|
</article>
|
|
|
|
<div class="place-order-actions">
|
|
<button class="btn btn-primary place-order-btn">Place Order</button>
|
|
<p class="policy-text">By placing your order, you agree to our <a href="#">Terms & Conditions</a>.</p>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="promo-code-section">
|
|
<div class="promo-code-wrapper">
|
|
<h3 class="promo-code-title">Have a Promo Code?</h3>
|
|
<form class="promo-code-form">
|
|
<div class="promo-input-group">
|
|
<label for="promoCodeInput" class="visually-hidden">Enter promo code</label>
|
|
<input type="text" id="promoCodeInput" class="promo-code-input" placeholder="Enter code here">
|
|
<button type="submit" class="apply-button">Apply</button>
|
|
</div>
|
|
<p class="promo-message-area">
|
|
<a href="#" class="view-offers-link">View all available offers</a>
|
|
</p>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
<section class="delivery-slot-section">
|
|
<h2 class="section-title">Delivery Slot Selection <span class="optional-text">(Optional)</span></h2>
|
|
|
|
<div class="slot-options-container">
|
|
|
|
<div class="slot-group">
|
|
<h3 class="slot-group-title">Today</h3>
|
|
<div class="slot-item">
|
|
<input type="radio" id="slot-today-morning" name="delivery-slot" value="today-morning" class="radio-input">
|
|
<label for="slot-today-morning" class="slot-details">
|
|
<span class="slot-date">Today, 10th Jan</span>
|
|
<span class="slot-time">9:00 AM - 12:00 PM</span>
|
|
<span class="slot-availability">Available</span>
|
|
</label>
|
|
</div>
|
|
<div class="slot-item">
|
|
<input type="radio" id="slot-today-afternoon" name="delivery-slot" value="today-afternoon" class="radio-input">
|
|
<label for="slot-today-afternoon" class="slot-details">
|
|
<span class="slot-date">Today, 10th Jan</span>
|
|
<span class="slot-time">1:00 PM - 4:00 PM</span>
|
|
<span class="slot-availability">Available</span>
|
|
</label>
|
|
</div>
|
|
<div class="slot-item disabled">
|
|
<input type="radio" id="slot-today-evening" name="delivery-slot" value="today-evening" class="radio-input" disabled="">
|
|
<label for="slot-today-evening" class="slot-details">
|
|
<span class="slot-date">Today, 10th Jan</span>
|
|
<span class="slot-time">6:00 PM - 9:00 PM</span>
|
|
<span class="slot-availability">Fully Booked</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="slot-group">
|
|
<h3 class="slot-group-title">Tomorrow</h3>
|
|
<div class="slot-item">
|
|
<input type="radio" id="slot-tomorrow-morning" name="delivery-slot" value="tomorrow-morning" class="radio-input">
|
|
<label for="slot-tomorrow-morning" class="slot-details">
|
|
<span class="slot-date">Tomorrow, 11th Jan</span>
|
|
<span class="slot-time">9:00 AM - 12:00 PM</span>
|
|
<span class="slot-availability">Available</span>
|
|
</label>
|
|
</div>
|
|
<div class="slot-item">
|
|
<input type="radio" id="slot-tomorrow-afternoon" name="delivery-slot" value="tomorrow-afternoon" class="radio-input">
|
|
<label for="slot-tomorrow-afternoon" class="slot-details">
|
|
<span class="slot-date">Tomorrow, 11th Jan</span>
|
|
<span class="slot-time">1:00 PM - 4:00 PM</span>
|
|
<span class="slot-availability">Available</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="slot-group">
|
|
<h3 class="slot-group-title">Other Dates</h3>
|
|
<div class="slot-item">
|
|
<input type="radio" id="slot-jan12-any" name="delivery-slot" value="jan12-any" class="radio-input">
|
|
<label for="slot-jan12-any" class="slot-details">
|
|
<span class="slot-date">Sat, 12th Jan</span>
|
|
<span class="slot-time">Any Slot (Standard Delivery)</span>
|
|
<span class="slot-availability">Available</span>
|
|
</label>
|
|
</div>
|
|
<div class="slot-item">
|
|
<input type="radio" id="slot-jan13-morning" name="delivery-slot" value="jan13-morning" class="radio-input">
|
|
<label for="slot-jan13-morning" class="slot-details">
|
|
<span class="slot-date">Sun, 13th Jan</span>
|
|
<span class="slot-time">9:00 AM - 12:00 PM</span>
|
|
<span class="slot-availability">Available</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="no-slot-selected-message">
|
|
<p>No preferred slot selected. We'll deliver using our standard delivery method.</p>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
document.body.style.display = 'none';
|
|
setTimeout(function() { document.body.style.display = ''; }, 10);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |