Skip to content

Commit

Permalink
feat: enhance email templates for order confirmation and email verifi…
Browse files Browse the repository at this point in the history 
…cation; improve styling and content clarity
  • Loading branch information
@hackerman70000
hackerman70000 committed Feb 1, 2025
1 parent 7f9a402 commit 8236eb2
Show file tree
Hide file tree
Showing 2 changed files with 221 additions and 48 deletions.
130 changes: 107 additions & 23 deletions backend/app/templates/email/order_confirmation.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,114 @@
<html>
<head>
<style>
body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; }
.container { max-width: 600px; margin: 0 auto; padding: 20px; }
.header { text-align: center; padding: 20px 0; }
.order-details { margin: 20px 0; }
.items-table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.items-table th, .items-table td { padding: 10px; border-bottom: 1px solid #ddd; text-align: left; vertical-align: middle; }
.total { text-align: right; margin-top: 20px; }
.footer { text-align: center; margin-top: 30px; font-size: 0.9em; color: #666; }
.product-info { display: flex; align-items: center; gap: 10px; }
.product-image { width: 50px; height: 50px; object-fit: cover; border-radius: 4px; }
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #1a202c;
margin: 0;
padding: 0;
background-color: #fff;
}

.container {
max-width: 600px;
margin: 40px auto;
padding: 20px;
text-align: center;
}

.header {
margin-bottom: 20px;
}

.header h1 {
margin: 0 0 10px 0;
color: #1a202c;
font-size: 24px;
font-weight: 600;
}

.divider {
border-top: 2px solid #10B981;
margin: 20px 0;
}

.order-details {
margin: 20px auto;
padding: 20px;
background-color: #f0fff4;
border-radius: 8px;
text-align: left;
max-width: 400px;
}

.order-details p {
margin: 8px 0;
color: #065f46;
}

.items-table {
width: 100%;
margin: 20px 0;
border-collapse: collapse;
}

.items-table th {
padding: 12px;
background-color: #10B981;
color: white;
text-align: center;
font-weight: 500;
}

.items-table td {
padding: 12px;
border-bottom: 1px solid #e2e8f0;
text-align: center;
}

.total {
margin: 20px auto;
padding: 15px;
background-color: #f0fff4;
border-radius: 8px;
max-width: 400px;
text-align: center;
color: #065f46;
font-weight: 600;
font-size: 18px;
}

.support {
margin-top: 20px;
color: #4a5568;
font-size: 14px;
}

.support a {
color: #10B981;
text-decoration: none;
}

.footer {
margin-top: 30px;
color: #718096;
font-size: 14px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Order Confirmation</h1>
<h1>Order confirmation</h1>
<p>Thank you for your order!</p>
</div>

<div class="divider"></div>

<div class="order-details">
<p><strong>Order Number:</strong> {{ order.payment_intent_id }}</p>
<p><strong>Date:</strong> {{ order.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</p>
<p><strong>Customer:</strong> {{ user.username }}</p>
<p><strong>Email:</strong> {{ user.email }}</p>
<p><strong>Order number:</strong> {{ order.payment_intent_id }}</p>
<p><strong>Date:</strong> {{ order.created_at.strftime('%Y-%m-%d %H:%M') }}</p>
</div>

<table class="items-table">
Expand All @@ -40,12 +124,7 @@ <h1>Order Confirmation</h1>
<tbody>
{% for item in items %}
<tr>
<td>
<div class="product-info">
<img src="{{ item.product.image_url }}" alt="{{ item.product.name }}" class="product-image">
<span>{{ item.product.name }}</span>
</div>
</td>
<td>{{ item.product.name }}</td>
<td>{{ item.quantity }}</td>
<td>${{ "%.2f"|format(item.unit_price) }}</td>
<td>${{ "%.2f"|format(item.total) }}</td>
Expand All @@ -55,11 +134,16 @@ <h1>Order Confirmation</h1>
</table>

<div class="total">
<h3>Total Amount: ${{ "%.2f"|format(order.amount) }}</h3>
Total amount: ${{ "%.2f"|format(order.amount) }}
</div>


<div class="support">
If you have any questions about your order, please contact us at <a href="mailto:[email protected]">[email protected]</a>
</div>

<div class="footer">
<p>If you have any questions about your order, please contact us.</p>
Thank you for choosing Your Pharmacy.
</div>
</div>
</body>
Expand Down
139 changes: 114 additions & 25 deletions backend/app/templates/email/verify_email.html
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,132 @@
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; }
.container { max-width: 600px; margin: 0 auto; padding: 20px; }
.header { text-align: center; padding: 20px 0; }
.button {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 5px;
margin: 20px 0;
}
.footer { text-align: center; margin-top: 30px; font-size: 0.9em; color: #666; }
</style>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #2d3748;
margin: 0;
padding: 0;
background-color: #f5f7fa;
}

.container {
max-width: 600px;
margin: 40px auto;
padding: 32px;
background-color: #ffffff;
border-radius: 8px;
border: 1px solid #e2e8f0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.header {
text-align: center;
padding: 28px 0;
border-bottom: 2px solid #10B981;
margin-bottom: 32px;
}

.header h1 {
margin: 0;
color: #1a202c;
font-size: 24px;
font-weight: 600;
}

.content {
padding: 0 16px;
}

.button {
display: inline-block;
padding: 12px 32px;
background-color: #10B981;
color: white;
text-decoration: none;
border-radius: 12px;
margin: 24px 0;
font-weight: 500;
transition: background-color 0.2s;
}

.button:hover {
background-color: #059669;
}

.verification-link {
background-color: #f0fff4;
padding: 16px;
border-radius: 12px;
word-break: break-all;
font-family: monospace;
font-size: 14px;
color: #10B981;
}

.security-notice {
margin-top: 24px;
padding: 12px;
background-color: #ecfdf5;
border-radius: 12px;
color: #065f46;
font-size: 14px;
}

.footer {
margin-top: 40px;
padding-top: 24px;
border-top: 1px solid #e2e8f0;
text-align: center;
font-size: 14px;
color: #718096;
}

.contact-support {
margin-top: 16px;
font-size: 14px;
color: #4a5568;
}

.contact-support a {
color: #10B981;
text-decoration: none;
}

.contact-support a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Verify Your Email</h1>
</div>

<div class="container">
<div class="header">
<h1>Verify your email</h1>
</div>
<div class="content">
<p>Hello {{ username }},</p>
<p>Thank you for registering. Please click the button below to verify your email address:</p>
<p>Thank you for creating an account at Your Pharmacy. To ensure the security of your information, please verify your email address by clicking the button below:</p>

<div style="text-align: center;">
<a href="{{ verification_url }}" class="button">Verify Email</a>
</div>

<p>Or copy and paste this link in your browser:</p>
<p>{{ verification_url }}</p>
<p>Alternatively, you can copy this verification link:</p>
<div class="verification-link">{{ verification_url }}</div>

<div class="security-notice">
For your security, this verification link will expire in 24 hours.
</div>

<p>This link will expire in 24 hours.</p>
<div class="contact-support">
Need help? Contact our support team at <a href="mailto:[email protected]">[email protected]</a>
</div>

<div class="footer">
<p>If you didn't create an account, please ignore this email.</p>
<p>If you didn't create an account with our pharmacy, please ignore this email.</p>
</div>
</div>
</div>
</body>
</html>

0 comments on commit 8236eb2

Please sign in to comment.