custom1/checkout.html

442 lines
26 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</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">Radiance Jewels</div><ul class="nav-1-nav-links"><li><a href="index.html">Home</a></li><li><a href="product_catalog.html">Product Catalog</a></li><li><a href="shopping_cart.html">Shopping Cart</a></li><li><a href="checkout.html">Checkout</a></li><li><a href="login.html">Login</a></li><li><a href="dashboard.html">Dashboard</a></li><li><a href="order_history.html">Order History</a></li><li><a href="user_profile.html">User Profile</a></li><li><a href="sign_up.html">Sign Up</a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Sign Up</button><button class="nav-1-btn nav-1-solid">Login</button></div></nav></div>
<section class="progress-indicator-section">
<h2 class="section-title">Your Checkout Progress</h2>
<nav aria-label="Checkout progress steps" class="progress-steps-container">
<ol class="progress-steps">
<li class="progress-step completed">
<a href="#" class="step-link">
<span class="step-number">1</span>
<span class="step-name">Shopping Cart</span>
</a>
</li>
<li class="progress-step current">
<a href="#" class="step-link" aria-current="step">
<span class="step-number">2</span>
<span class="step-name">Shipping Details</span>
</a>
</li>
<li class="progress-step">
<a href="#" class="step-link disabled" tabindex="-1">
<span class="step-number">3</span>
<span class="step-name">Payment Options</span>
</a>
</li>
<li class="progress-step">
<a href="#" class="step-link disabled" tabindex="-1">
<span class="step-number">4</span>
<span class="step-name">Order Review</span>
</a>
</li>
<li class="progress-step">
<a href="#" class="step-link disabled" tabindex="-1">
<span class="step-number">5</span>
<span class="step-name">Confirmation</span>
</a>
</li>
</ol>
</nav>
</section>
<section class="shipping-address-section">
<div class="container">
<h2 class="section-title">Shipping Address</h2>
<form class="shipping-address-form">
<div class="form-group">
<label for="fullName">Full Name</label>
<input type="text" id="fullName" name="fullName" placeholder="John Doe" required="">
</div>
<div class="form-group">
<label for="addressLine1">Address Line 1</label>
<input type="text" id="addressLine1" name="addressLine1" placeholder="123 Main Street" required="">
</div>
<div class="form-group">
<label for="addressLine2">Address Line 2 (Optional)</label>
<input type="text" id="addressLine2" name="addressLine2" placeholder="Apartment, Suite, Unit, etc.">
</div>
<div class="form-row">
<div class="form-group">
<label for="city">City</label>
<input type="text" id="city" name="city" placeholder="Anytown" required="">
</div>
<div class="form-group">
<label for="stateProvince">State / Province</label>
<input type="text" id="stateProvince" name="stateProvince" placeholder="State/Province" required="">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="postalCode">Postal Code / ZIP</label>
<input type="text" id="postalCode" name="postalCode" placeholder="12345" required="">
</div>
<div class="form-group">
<label for="country">Country</label>
<select id="country" name="country" required="">
<option value="">Select Country</option>
<option value="USA">United States</option>
<option value="IND">India</option>
<option value="CAN">Canada</option>
<option value="GBR">United Kingdom</option>
<option value="AUS">Australia</option>
</select>
</div>
</div>
<div class="form-group">
<label for="phoneNumber">Phone Number</label>
<input type="tel" id="phoneNumber" name="phoneNumber" placeholder="+1 (555) 123-4567">
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save Address</button>
</div>
</form>
</div>
</section>
<section id="payment-selection" class="payment-selection-section">
<div class="container">
<h2 class="section-title">Select Payment Method</h2>
<div class="payment-methods-grid">
<!-- Credit Card Option -->
<label for="payment-credit-card" class="payment-method-card">
<input type="radio" id="payment-credit-card" name="payment_method" value="credit_card" checked="">
<div class="card-content">
<div class="card-header">
<span class="method-name">Credit Card</span>
<div class="method-logo">
<span class="logo-placeholder">💳</span>
</div>
</div>
<p class="method-description">Pay securely with your Visa, MasterCard, or Amex.</p>
</div>
</label>
<!-- Debit Card Option -->
<label for="payment-debit-card" class="payment-method-card">
<input type="radio" id="payment-debit-card" name="payment_method" value="debit_card">
<div class="card-content">
<div class="card-header">
<span class="method-name">Debit Card</span>
<div class="method-logo">
<span class="logo-placeholder">💳</span>
</div>
</div>
<p class="method-description">Use your bank's debit card for easy payments.</p>
</div>
</label>
<!-- Net Banking Option -->
<label for="payment-net-banking" class="payment-method-card">
<input type="radio" id="payment-net-banking" name="payment_method" value="net_banking">
<div class="card-content">
<div class="card-header">
<span class="method-name">Net Banking</span>
<div class="method-logo">
<span class="logo-placeholder">🏦</span>
</div>
</div>
<p class="method-description">Login to your bank account to complete the payment.</p>
</div>
</label>
<!-- UPI Option -->
<label for="payment-upi" class="payment-method-card">
<input type="radio" id="payment-upi" name="payment_method" value="upi">
<div class="card-content">
<div class="card-header">
<span class="method-name">UPI</span>
<div class="method-logo">
<span class="logo-placeholder">📲</span>
</div>
</div>
<p class="method-description">Instant payment via UPI ID or QR code.</p>
</div>
</label>
<!-- Cash on Delivery Option -->
<label for="payment-cod" class="payment-method-card">
<input type="radio" id="payment-cod" name="payment_method" value="cod">
<div class="card-content">
<div class="card-header">
<span class="method-name">Cash on Delivery</span>
<div class="method-logo">
<span class="logo-placeholder">💵</span>
</div>
</div>
<p class="method-description">Pay with cash when your order is delivered.</p>
</div>
</label>
</div> <!-- /payment-methods-grid -->
<div class="payment-details-form-container">
<h3>Enter Payment Details</h3>
<!-- Placeholder for dynamic payment form based on selection -->
<div id="credit-card-details" class="payment-form-section active">
<p>Card Number: [____________ ____ ____ ____]</p>
<p>Card Holder Name: [_______________________]</p>
<p>Expiry Date (MM/YY): [__/__]</p>
<p>CVV: [___]</p>
</div>
<div id="debit-card-details" class="payment-form-section" style="display: none;">
<p>Card Number: [____________ ____ ____ ____]</p>
<p>Card Holder Name: [_______________________]</p>
<p>Expiry Date (MM/YY): [__/__]</p>
<p>CVV: [___]</p>
</div>
<div id="net-banking-details" class="payment-form-section" style="display: none;">
<p>Select Bank: [Dropdown/List of Banks]</p>
</div>
<div id="upi-details" class="payment-form-section" style="display: none;">
<p>UPI ID: [yourname@bankupi]</p>
</div>
<div id="cod-details" class="payment-form-section" style="display: none;">
<p>You have selected Cash on Delivery. Please keep the exact amount ready.</p>
</div>
</div>
<div class="action-buttons">
<button type="submit" class="button primary-button">Proceed to Pay</button>
<button type="button" class="button secondary-button">Back to Order Summary</button>
</div>
</div> <!-- /container -->
</section>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Order Review Summary</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style.css" />
<section class="order-review-summary" aria-labelledby="orderSummaryHeading">
<header>
<h2 id="orderSummaryHeading">Order Review Summary</h2>
</header>
<div class="order-review-summary-content">
<div class="summary-details">
<h3>Order Items</h3>
<ul class="order-items">
<li class="order-item">
<img src="https://via.placeholder.com/80x80/E0E0E0/808080?text=Ring" alt="Eternal Love Diamond Ring" class="item-image">
<div class="item-info">
<div class="item-name">Eternal Love Diamond Ring</div>
<div class="item-quantity">Quantity: 1</div>
<div class="item-price">Price: ₹ 75,000.00</div>
</div>
<div class="item-subtotal">₹ 75,000.00</div>
</li>
<li class="order-item">
<img src="https://via.placeholder.com/80x80/E0E0E0/808080?text=Necklace" alt="Celestial Bloom Necklace" class="item-image">
<div class="item-info">
<div class="item-name">Celestial Bloom Necklace</div>
<div class="item-quantity">Quantity: 1</div>
<div class="item-price">Price: ₹ 42,500.00</div>
</div>
<div class="item-subtotal">₹ 42,500.00</div>
</li>
<li class="order-item">
<img src="https://via.placeholder.com/80x80/E0E0E0/808080?text=Earrings" alt="Starlight Solitaire Earrings" class="item-image">
<div class="item-info">
<div class="item-name">Starlight Solitaire Earrings</div>
<div class="item-quantity">Quantity: 2</div>
<div class="item-price">Price: ₹ 18,000.00</div>
</div>
<div class="item-subtotal">₹ 36,000.00</div>
</li>
</ul>
<div class="shipping-info">
<h4>Shipping Address</h4>
<address>
<p>John Doe</p>
<p>123 Jewel Street</p>
<p>Emerald City, 90210</p>
<p>United States</p>
<p>Phone: +1 (555) 123-4567</p>
</address>
</div>
<div class="payment-info">
<h4>Payment Method</h4>
<p>Credit Card (**** **** **** 1234)</p>
<p>Expires: 12/26</p>
</div>
</div>
<aside class="summary-total">
<h3>Order Totals</h3>
<div>
<span class="label">Subtotal:</span>
<span class="value">₹ 153,500.00</span>
</div>
<div>
<span class="label">Shipping:</span>
<span class="value">₹ 500.00</span>
</div>
<div>
<span class="label">GST (5%):</span>
<span class="value">₹ 7,700.00</span>
</div>
<div class="total-amount">
<span class="label">Total:</span>
<span class="value">₹ 161,700.00</span>
</div>
</aside>
</div>
<div class="button-group">
<a href="#" class="button button-secondary">Edit Order</a>
<button type="submit" class="button button-primary">Confirm &amp; Place Order</button>
</div>
</section>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Place Order</title>
<link rel="stylesheet" href="style.css" />
<section class="place-order-section">
<h2>Place Your Order</h2>
<div class="order-summary-details">
<h3>Order Summary</h3>
<dl>
<dt>Subtotal:</dt>
<dd>$2,500.00</dd>
<dt>Shipping:</dt>
<dd>$25.00</dd>
<dt>Tax (8%):</dt>
<dd>$202.00</dd>
<dt class="total">Grand Total:</dt>
<dd class="total">$2,727.00</dd>
</dl>
</div>
<div class="payment-info-placeholder">
<p>Payment Information Section Placeholder</p>
<p><em>(e.g., Credit Card Form, UPI Options, Net Banking)</em></p>
<p>Selected Method: <strong style="color: #5a3c2a;">Credit Card (**** 1234)</strong></p>
</div>
<div class="button-container">
<button type="submit" class="place-order-button">Confirm &amp; Place Order</button>
</div>
</section>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Security Assurance - JewelStore</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style.css" />
<section id="security-assurance" class="security-assurance-section">
<div class="container">
<header class="security-intro">
<h1>Your Trust, Our Priority: Security Assurance</h1>
<p>At JewelStore, safeguarding your personal information and transaction details is paramount. We employ cutting-edge security measures to ensure a safe and private shopping experience for every customer.</p>
</header>
<div class="security-features-grid">
<div class="feature-card">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-lock"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
<h3>SSL Encrypted Connections</h3>
<p>All data transmitted between your browser and our servers is secured with industry-standard 256-bit SSL encryption, protecting your personal and payment details.</p>
</div>
<div class="feature-card">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shield"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
<h3>Secure Payment Gateways</h3>
<p>We partner with leading payment processors that comply with the highest security standards (PCI DSS) to handle all transactions securely. Your payment information is never stored on our servers.</p>
</div>
<div class="feature-card">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-database"><ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path><path d="M21 19c0 1.66-4 3-9 3s-9-1.34-9-3"></path><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path></svg>
<h3>Data Privacy &amp; Protection</h3>
<p>Your personal data is handled with the utmost care, in strict adherence to privacy regulations. We do not share or sell your information to third parties.</p>
</div>
<div class="feature-card">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-key"><path d="M21 2l-2 2m-7 7L4 12c-2.76 2.76-2.76 7.24 0 10s7.24 2.76 10 0l1.5-1.5m-3.5-3.5l1.5-1.5m-7-7L7 4c2.76-2.76 7.24-2.76 10 0s2.76 7.24 0 10l-1.5 1.5M10 10l3-3"></path></svg>
<h3>Secure Account Management</h3>
<p>Strong password policies, secure session management, and optional multi-factor authentication protect your user account from unauthorized access.</p>
</div>
<div class="feature-card">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-activity"><polyline points="22 12 18 12 15 22 9 2 6 12 2 12"></polyline></svg>
<h3>Regular Security Audits</h3>
<p>Our systems undergo continuous monitoring and regular security audits by expert third parties to identify and address potential vulnerabilities promptly.</p>
</div>
<div class="feature-card">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-triangle"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
<h3>Fraud Prevention</h3>
<p>Advanced fraud detection systems are in place to scrutinize transactions and prevent fraudulent activities, ensuring a secure environment for all.</p>
</div>
</div>
<section class="trust-badges" aria-label="Security and Trust Badges">
<div class="badge-item">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle"><path d="M22 11.08V12a10 10 0 1 1-5.93-8.1"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
<span>PCI DSS Compliant</span>
</div>
<div class="badge-item">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-certificate-outline"><path d="M15 3h6v6"></path><path d="M10 14L2 22"></path><path d="M22 10V2"></path><path d="M22 2L10 14"></path><path d="M10 22L2 14"></path><path d="M2 10V2"></path><path d="M2 2L10 10"></path><path d="M14 10h6v6"></path><path d="M22 14V22"></path><path d="M14 22H22"></path></svg>
<span>SSL Secured</span>
</div>
<div class="badge-item">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-globe"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
<span>Global Privacy Standards</span>
</div>
</section>
<footer class="cta-security">
<h2>Shop with Confidence</h2>
<p>We are committed to providing you with a secure and enjoyable shopping journey. If you have any questions about our security practices, please do not hesitate to contact our support team.</p>
<a href="#contact-us" class="btn-primary">Contact Support</a>
</footer>
</div>
</section>
<div class="footer-1-wrapper"><section class="footer-1-section"><div class="footer-1-top"><div class="footer-1-brand"><h3 class="footer-1-logo">Gleam Jewels</h3><p class="footer-1-newsletter-text">Unlock exclusive sparkle! Join our newsletter for dazzling new arrivals, special offers, and styling tips.</p><div class="footer-1-newsletter-form"><input type="email" placeholder="Your email address"><button class="footer-1-subscribe-btn">Shine With Us</button></div><p class="footer-1-privacy-note"><span>By subscribing you agree to with our </span><a href="#">Privacy Policy</a><span> and provide consent to receive updates from our company.</span></p></div><div class="footer-1-columns"><div class="footer-1-column"><h4>Explore</h4><ul><li><a href="rings.html">Rings</a></li><li><a href="necklaces.html">Necklaces</a></li><li><a href="bangles.html">Bangles</a></li><li><a href="earrings.html">Earrings</a></li><li><a href="new_arrivals.html">New Arrivals</a></li></ul></div><div class="footer-1-column"><h4>Support</h4><ul><li><a href="about_us.html">About Us</a></li><li><a href="contact_us.html">Contact Us</a></li><li><a href="faq.html">FAQ</a></li><li><a href="shipping_returns.html">Shipping &amp; Returns</a></li><li><a href="customer_dashboard.html">Customer Dashboard</a></li></ul></div><div class="footer-1-column footer-1-social"><h4>Follow us</h4><ul><li><i class="fab fa-facebook"></i><span>Facebook</span></li><li><i class="fab fa-instagram"></i><span>Instagram</span></li><li><i class="fab fa-x-twitter"></i><span>X</span></li><li><i class="fab fa-linkedin"></i><span>LinkedIn</span></li><li><i class="fab fa-youtube"></i><span>Youtube</span></li></ul></div></div></div><div class="footer-1-bottom"><p>© 2025 Gleam Jewels. All rights reserved.</p><ul class="footer-1-links"><li><a href="product_detail.html">Product Detail</a></li><li><a href="order_confirmation.html">Order Confirmation</a></li><li><a href="admin_login.html">Admin Login</a></li><li><a href="admin_dashboard.html">Admin Dashboard</a></li><li><a href="admin_product_management.html">Admin Product Management</a></li><li><a href="admin_add_product.html">Admin Add Product</a></li><li><a href="admin_edit_product.html">Admin Edit Product</a></li><li><a href="admin_order_management.html">Admin Order Management</a></li><li><a href="admin_user_management.html">Admin User Management</a></li></ul></div></section></div>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Order Review Summary</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Place Order</title>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Security Assurance - JewelStore</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style.css" />
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.body.style.display = 'none';
setTimeout(function() { document.body.style.display = ''; }, 10);
});
</script>
</body>
</html>