370 lines
9.6 KiB
HTML
370 lines
9.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Order Confirmation</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
padding: 20px;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.container {
|
|
background: white;
|
|
border-radius: 10px;
|
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
|
padding: 40px;
|
|
max-width: 700px;
|
|
width: 100%;
|
|
}
|
|
|
|
.success-icon {
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.success-icon svg {
|
|
width: 80px;
|
|
height: 80px;
|
|
stroke: #4CAF50;
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
fill: none;
|
|
}
|
|
|
|
h1 {
|
|
color: #333;
|
|
margin-bottom: 10px;
|
|
text-align: center;
|
|
font-size: 28px;
|
|
}
|
|
|
|
.subtitle {
|
|
text-align: center;
|
|
color: #666;
|
|
margin-bottom: 30px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.order-details {
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
padding: 25px;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.detail-section {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.detail-section:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #888;
|
|
text-transform: uppercase;
|
|
margin-bottom: 10px;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.detail-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid #e0e0e0;
|
|
}
|
|
|
|
.detail-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.detail-label {
|
|
color: #555;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.detail-value {
|
|
color: #333;
|
|
font-weight: 400;
|
|
text-align: right;
|
|
}
|
|
|
|
.price-section {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.price-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 8px 0;
|
|
}
|
|
|
|
.total-price {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.delivery-section {
|
|
background: #e3f2fd;
|
|
border-left: 4px solid #2196F3;
|
|
padding: 20px;
|
|
border-radius: 5px;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.delivery-section h3 {
|
|
color: #1976D2;
|
|
margin-bottom: 10px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.delivery-info {
|
|
color: #555;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.delivery-days {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: #1976D2;
|
|
}
|
|
|
|
.btn-back {
|
|
width: 100%;
|
|
padding: 15px;
|
|
background: #e0e0e0;
|
|
color: #333;
|
|
border: none;
|
|
border-radius: 5px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.btn-back:hover {
|
|
background: #d0d0d0;
|
|
}
|
|
|
|
.error-message {
|
|
background: #ffebee;
|
|
color: #c62828;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
border-left: 4px solid #c62828;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container" id="content">
|
|
<!-- Content will be generated by JavaScript -->
|
|
</div>
|
|
|
|
<script>
|
|
// Product prices in USD
|
|
const productPrices = {
|
|
'table': 299.99,
|
|
'chair': 89.99,
|
|
'sofa': 699.99,
|
|
'desk': 249.99,
|
|
'cabinet': 399.99
|
|
};
|
|
|
|
// Calculate delivery days based on ZIP code
|
|
function calculateDeliveryDays(zipCode) {
|
|
if (!zipCode) return 7;
|
|
|
|
// Simple logic: use first digit of ZIP to determine delivery zone
|
|
const firstDigit = parseInt(zipCode.toString().charAt(0));
|
|
|
|
// ZIP codes 0-2: East Coast
|
|
// ZIP codes 3-5: Central
|
|
// ZIP codes 6-9: West Coast
|
|
|
|
if (firstDigit >= 0 && firstDigit <= 2) {
|
|
return 3;
|
|
} else if (firstDigit >= 3 && firstDigit <= 5) {
|
|
return 5;
|
|
} else if (firstDigit >= 6 && firstDigit <= 9) {
|
|
return 7;
|
|
}
|
|
|
|
return 7; // Default
|
|
}
|
|
|
|
// Get URL parameters
|
|
function getUrlParams() {
|
|
// Handle both URL search params and hash params
|
|
let queryString = window.location.search;
|
|
if (!queryString && window.location.hash) {
|
|
// Extract query string from hash (format: #?param=value)
|
|
queryString = window.location.hash.substring(2); // Remove '#?'
|
|
}
|
|
const params = new URLSearchParams(queryString);
|
|
return {
|
|
productType: params.get('productType'),
|
|
color: params.get('color'),
|
|
name: params.get('name'),
|
|
email: params.get('email'),
|
|
address: params.get('address'),
|
|
city: params.get('city'),
|
|
state: params.get('state'),
|
|
zipCode: params.get('zipCode')
|
|
};
|
|
}
|
|
|
|
// Format currency
|
|
function formatCurrency(amount) {
|
|
return new Intl.NumberFormat('en-US', {
|
|
style: 'currency',
|
|
currency: 'USD'
|
|
}).format(amount);
|
|
}
|
|
|
|
// Capitalize first letter
|
|
function capitalize(str) {
|
|
if (!str) return '';
|
|
return str.charAt(0).toUpperCase() + str.slice(1);
|
|
}
|
|
|
|
// Generate confirmation page
|
|
function generateConfirmation() {
|
|
const params = getUrlParams();
|
|
const container = document.getElementById('content');
|
|
|
|
// Check if we have required parameters
|
|
if (!params.productType || !params.name) {
|
|
container.innerHTML = `
|
|
<div class="error-message">
|
|
<h2>Order Information Missing</h2>
|
|
<p>Unable to process order confirmation. Please return to the order form.</p>
|
|
<button class="btn-back" onclick="window.history.back()">Go Back</button>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
// Calculate price and delivery
|
|
const basePrice = productPrices[params.productType] || 0;
|
|
const tax = basePrice * 0.08; // 8% tax
|
|
const shipping = 29.99;
|
|
const totalPrice = basePrice + tax + shipping;
|
|
const deliveryDays = calculateDeliveryDays(params.zipCode);
|
|
|
|
// Generate HTML
|
|
container.innerHTML = `
|
|
<div class="success-icon">
|
|
<svg viewBox="0 0 52 52">
|
|
<circle cx="26" cy="26" r="25"/>
|
|
<path d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<h1>Order Confirmed!</h1>
|
|
<p class="subtitle">Thank you for your purchase, ${params.name}</p>
|
|
|
|
<div class="order-details">
|
|
<div class="detail-section">
|
|
<div class="section-title">Product Details</div>
|
|
<div class="detail-row">
|
|
<span class="detail-label">Product:</span>
|
|
<span class="detail-value">${capitalize(params.productType)}</span>
|
|
</div>
|
|
<div class="detail-row">
|
|
<span class="detail-label">Color:</span>
|
|
<span class="detail-value">${capitalize(params.color)}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="detail-section">
|
|
<div class="section-title">Customer Information</div>
|
|
<div class="detail-row">
|
|
<span class="detail-label">Name:</span>
|
|
<span class="detail-value">${params.name}</span>
|
|
</div>
|
|
<div class="detail-row">
|
|
<span class="detail-label">Email:</span>
|
|
<span class="detail-value">${params.email}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="detail-section">
|
|
<div class="section-title">Shipping Address</div>
|
|
<div class="detail-row">
|
|
<span class="detail-label">Address:</span>
|
|
<span class="detail-value">${params.address}</span>
|
|
</div>
|
|
<div class="detail-row">
|
|
<span class="detail-label">City:</span>
|
|
<span class="detail-value">${params.city}</span>
|
|
</div>
|
|
<div class="detail-row">
|
|
<span class="detail-label">State:</span>
|
|
<span class="detail-value">${params.state}</span>
|
|
</div>
|
|
<div class="detail-row">
|
|
<span class="detail-label">ZIP Code:</span>
|
|
<span class="detail-value">${params.zipCode}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="price-section">
|
|
<div class="price-row">
|
|
<span>Product Price:</span>
|
|
<span>${formatCurrency(basePrice)}</span>
|
|
</div>
|
|
<div class="price-row">
|
|
<span>Tax (8%):</span>
|
|
<span>${formatCurrency(tax)}</span>
|
|
</div>
|
|
<div class="price-row">
|
|
<span>Shipping:</span>
|
|
<span>${formatCurrency(shipping)}</span>
|
|
</div>
|
|
<div class="price-row total-price">
|
|
<span>Total:</span>
|
|
<span>${formatCurrency(totalPrice)}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="delivery-section">
|
|
<h3>📦 Estimated Delivery</h3>
|
|
<div class="delivery-info">
|
|
<p>Your order will arrive in approximately <span class="delivery-days">${deliveryDays} days</span></p>
|
|
<p style="margin-top: 10px; font-size: 14px;">We'll send tracking information to ${params.email} once your order ships.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="btn-back" onclick="window.location.href='./fill-form.html'">Place Another Order</button>
|
|
`;
|
|
}
|
|
|
|
// Initialize page
|
|
document.addEventListener('DOMContentLoaded', generateConfirmation);
|
|
</script>
|
|
</body>
|
|
</html>
|