PK
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Order Status | Your Store</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<style>
:root {
--primary: #4361ee;
--secondary: #3f37c9;
--success: #4cc9f0;
--light: #f8f9fa;
--dark: #212529;
}
body {
background-color: #f5f7fb;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.card {
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
border: none;
margin-bottom: 24px;
}
.card-header {
background-color: white;
border-bottom: 1px solid #eaeaea;
padding: 20px 25px;
border-radius: 12px 12px 0 0 !important;
font-weight: 600;
font-size: 18px;
}
.order-status-bar {
position: relative;
height: 6px;
background: #e9ecef;
border-radius: 3px;
margin: 30px 0 40px;
overflow: hidden;
}
.progress-fill {
position: absolute;
height: 100%;
background: var(--primary);
width: 75%;
border-radius: 3px;
}
.status-steps {
display: flex;
justify-content: space-between;
position: relative;
margin-top: 20px;
}
.status-step {
text-align: center;
position: relative;
z-index: 1;
}
.step-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background: white;
border: 2px solid #dee2e6;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 10px;
color: #adb5bd;
font-size: 16px;
}
.step-icon.active {
background: var(--primary);
border-color: var(--primary);
color: white;
}
.step-icon.completed {
background: #28a745;
border-color: #28a745;
color: white;
}
.step-label {
font-size: 13px;
color: #6c757d;
font-weight: 500;
}
.step-label.active {
color: var(--primary);
font-weight: 600;
}
.product-img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 8px;
}
.status-badge {
padding: 6px 12px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
}
.badge-processing {
background: rgba(67, 97, 238, 0.15);
color: var(--primary);
}
</style>
</head>
<body>
<div class="container py-5">
<div class="row">
<div class="col-12 mb-4">
<h1 class="fw-bold">Order Status</h1>
<p class="text-muted">Check the status of your recent orders, manage returns, and download invoices.</p>
</div>
</div>
<div class="row">
<!-- Main Content -->
<div class="col-lg-8">
<!-- Order Summary Card -->
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<div>
Order #ORD-2023-6789
<span class="status-badge badge-processing ms-2">Processing</span>
</div>
<div class="text-muted">Placed on June 28, 2023</div>
</div>
<div class="card-body">
<!-- Progress Bar -->
<div class="order-status-bar">
<div class="progress-fill"></div>
</div>
<!-- Status Steps -->
<div class="status-steps">
<div class="status-step">
<div class="step-icon active">
<i class="bi bi-cart-check"></i>
</div>
<div class="step-label active">Order Placed</div>
</div>
<div class="status-step">
<div class="step-icon">
<i class="bi bi-gear"></i>
</div>
<div class="step-label">Processing</div>
</div>
<div class="status-step">
<div class="step-icon">
<i class="bi bi-truck"></i>
</div>
<div class="step-label">Shipped</div>
</div>
<div class="status-step">
<div class="step-icon">
<i class="bi bi-house-check"></i>
</div>
<div class="step-label">Delivered</div>
</div>
</div>
<!-- Order Items -->
<h5 class="mt-5 mb-3">Order Items</h5>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="d-flex align-items-center">
<img src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8c21hcnR3YXRjaHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60" class="product-img me-3" alt="Product">
<div>
<div class="fw-medium">Smart Watch Series 5</div>
<div class="text-muted small">Color: Black, Size: 42mm</div>
</div>
</div>
</td>
<td>$249.99</td>
<td>1</td>
<td class="fw-medium">$249.99</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center">
<img src="https://images.unsplash.com/photo-1585123334904-845d60e97b29?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8d2lyZWxlc3MlMjBlYXJidWRzfGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60" class="product-img me-3" alt="Product">
<div>
<div class="fw-medium">Wireless Earbuds Pro</div>
<div class="text-muted small">Color: White</div>
</div>
</div>
</td>
<td>$129.99</td>
<td>2</td>
<td class="fw-medium">$259.98</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
PK 99