Generated on Jan 11, 2025, 1:05:01 PMgemini-1.5-flash
<!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>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.container {
max-width: 600px;
margin: 0 auto;
background-color: #ffffff;
padding: 20px;
}
.header {
text-align: center;
padding-bottom: 20px;
}
.logo {
max-width: 200px;
}
.order-details {
margin-bottom: 20px;
}
.order-summary {
border-collapse: collapse;
width: 100%;
}
.order-summary th,
.order-summary td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
.order-summary th {
background-color: #f2f2f2;
}
.total {
font-weight: bold;
}
.button {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
display: inline-block;
margin-top: 20px;
}
.footer {
text-align: center;
padding-top: 20px;
font-size: 14px;
color: #777;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<img src="your_logo.png" alt="Your Logo" class="logo"> <!-- Replace with your logo URL -->
<h1>Order Confirmation</h1>
</div>
<div class="order-details">
<p>Dear [Customer Name],</p>
<p>Thank you for your recent order! This email confirms that we have received your order and it is being processed.</p>
<p><strong>Order Number:</strong> [Order Number]</p>
<p><strong>Order Date:</strong> [Order Date]</p>
</div>
<table class="order-summary">
<thead>
<tr>
<th>Item</th>
<th>Quantity</th>
<th>Price</th>
<th>Subtotal</th>
</tr>
</thead>
<tbody>
<tr>
<td>[Item 1 Name]</td>
<td>[Quantity 1]</td>
<td>$[Price 1]</td>
<td>$[Subtotal 1]</td>
</tr>
<tr>
<td>[Item 2 Name]</td>
<td>[Quantity 2]</td>
<td>$[Price 2]</td>
<td>$[Subtotal 2]</td>
</tr>
<!-- Add more rows as needed -->
</tbody>
<tfoot>
<tr>
<td colspan="3"><strong>Shipping:</strong></td>
<td>$[Shipping Cost]</td>
</tr>
<tr>
<td colspan="3"><strong>Tax:</strong></td>
<td>$[Tax Amount]</td>
</tr>
<tr>
<td colspan="3"><strong>Total:</strong></td>
<td class="total">$[Total Amount]</td>
</tr>
</tfoot>
</table>
<p><strong>Shipping Address:</strong></p>
<p>[Shipping Address]</p>
<a href="[Tracking Link]" class="button">Track Your Order</a> <!-- Replace with your tracking link -->
<div class="footer">
<p>© [Your Company Name] [Year]</p>
<p>Contact us at: [Your Email Address] or [Your Phone Number]</p>
</div>
</div>
</body>
</html>