55384b337b
All checks were successful
Build and Push Docker Images / docker (push) Successful in 1m0s
Carbon Offset Distribution section: - Remove "Carbon Offset" subheader from each project - Remove colored dots next to project names - Reduce padding from 30px to 20px - Reduce title margin from 24px to 16px - Reduce item padding from 14px to 10px - Reduce spacing between items from 12px to 8px Your Impact section: - Reduce padding from 32px to 20px - Reduce title font size from 26px to 22px - Reduce subtitle margin from 28px to 16px - Reduce card padding from 20px to 14px - Reduce icon size from 36px to 30px - Reduce value font size from 28px to 24px - Reduce grid gap from 16px to 12px - Reduce footer note margin from 20px to 12px Overall more compact layout while maintaining readability. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
461 lines
13 KiB
Handlebars
461 lines
13 KiB
Handlebars
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="color-scheme" content="light only">
|
|
<meta name="supported-color-schemes" content="light">
|
|
<title>Carbon Offset Receipt - Puffin Offset</title>
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
line-height: 1.6;
|
|
color: #1e293b;
|
|
background: linear-gradient(135deg, #f1f5f9 0%, #e0f2fe 50%, #cffafe 100%);
|
|
margin: 0;
|
|
padding: 20px;
|
|
color-scheme: light only;
|
|
}
|
|
.container {
|
|
max-width: 650px;
|
|
margin: 0 auto;
|
|
background-color: #ffffff;
|
|
border-radius: 24px;
|
|
overflow: hidden;
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
|
|
}
|
|
.header {
|
|
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
|
padding: 40px 30px;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
}
|
|
.logo {
|
|
width: 120px;
|
|
height: auto;
|
|
margin-bottom: 20px;
|
|
}
|
|
.header h1 {
|
|
margin: 0 0 10px 0;
|
|
font-size: 32px;
|
|
font-weight: bold;
|
|
}
|
|
.header p {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
opacity: 0.95;
|
|
}
|
|
.success-badge {
|
|
background-color: #ffffff;
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 50%;
|
|
margin: -40px auto 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
|
|
}
|
|
.checkmark {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background-color: #10b981;
|
|
position: relative;
|
|
}
|
|
.checkmark:after {
|
|
content: '✓';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
color: white;
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
}
|
|
.content {
|
|
padding: 30px;
|
|
}
|
|
.section-title {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
color: #1e293b;
|
|
margin: 0 0 20px 0;
|
|
padding-bottom: 12px;
|
|
border-bottom: 3px solid #e2e8f0;
|
|
}
|
|
.carbon-highlight {
|
|
background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
|
|
border-left: 6px solid #10b981;
|
|
border-radius: 16px;
|
|
padding: 30px;
|
|
margin: 20px 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.carbon-highlight .text {
|
|
flex: 1;
|
|
}
|
|
.carbon-highlight .label {
|
|
font-size: 14px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
color: #065f46;
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
}
|
|
.carbon-highlight .value {
|
|
font-size: 42px;
|
|
font-weight: bold;
|
|
color: #047857;
|
|
line-height: 1;
|
|
}
|
|
.carbon-highlight .icon {
|
|
width: 64px;
|
|
height: 64px;
|
|
opacity: 0.6;
|
|
}
|
|
.detail-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 14px 0;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
}
|
|
.detail-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.detail-label {
|
|
color: #475569;
|
|
font-weight: 600;
|
|
font-size: 15px;
|
|
}
|
|
.detail-value {
|
|
color: #0f172a;
|
|
font-weight: 700;
|
|
font-size: 15px;
|
|
text-align: right;
|
|
}
|
|
.pricing-box {
|
|
background-color: #f8fafc;
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
margin: 24px 0;
|
|
}
|
|
.pricing-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 12px;
|
|
}
|
|
.pricing-total {
|
|
border-top: 2px solid #cbd5e1;
|
|
padding-top: 16px;
|
|
margin-top: 16px;
|
|
}
|
|
.pricing-total .label {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #1e293b;
|
|
}
|
|
.pricing-total .value {
|
|
font-size: 32px;
|
|
font-weight: bold;
|
|
color: #2563eb;
|
|
}
|
|
.metadata-box {
|
|
background: linear-gradient(135deg, #f8fafc 0%, #dbeafe 100%) !important;
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
margin: 24px 0;
|
|
}
|
|
/* Force light mode for email clients */
|
|
@media (prefers-color-scheme: dark) {
|
|
body {
|
|
background: linear-gradient(135deg, #f1f5f9 0%, #e0f2fe 50%, #cffafe 100%) !important;
|
|
color: #1e293b !important;
|
|
}
|
|
.container {
|
|
background-color: #ffffff !important;
|
|
}
|
|
.metadata-box {
|
|
background: linear-gradient(135deg, #f8fafc 0%, #dbeafe 100%) !important;
|
|
}
|
|
.metadata-label, .metadata-value, .detail-label, .detail-value {
|
|
color: #0f172a !important;
|
|
}
|
|
}
|
|
.metadata-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
}
|
|
.metadata-item {
|
|
break-inside: avoid;
|
|
}
|
|
.metadata-label {
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
color: #0f172a;
|
|
font-weight: 700;
|
|
margin-bottom: 6px;
|
|
}
|
|
.metadata-value {
|
|
color: #0f172a;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
word-break: break-all;
|
|
font-family: 'Courier New', monospace;
|
|
}
|
|
.status-badge {
|
|
display: inline-block;
|
|
padding: 8px 16px;
|
|
border-radius: 20px;
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
background-color: #dcfce7;
|
|
color: #166534;
|
|
}
|
|
.comparisons {
|
|
background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
margin: 24px 0;
|
|
color: white;
|
|
}
|
|
.comparisons-title {
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
margin: 0 0 6px 0;
|
|
color: #ffffff !important;
|
|
}
|
|
.comparisons-subtitle {
|
|
text-align: center;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
font-size: 13px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.comparisons-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 12px;
|
|
}
|
|
.comparison-card {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
border-radius: 10px;
|
|
padding: 14px;
|
|
text-align: center;
|
|
}
|
|
.comparison-icon {
|
|
font-size: 30px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.comparison-value {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
margin-bottom: 3px;
|
|
}
|
|
.comparison-unit {
|
|
font-size: 11px;
|
|
color: #a7f3d0;
|
|
margin-bottom: 8px;
|
|
}
|
|
.comparison-label {
|
|
font-size: 12px;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
line-height: 1.3;
|
|
}
|
|
.portfolio-section {
|
|
margin: 24px 0;
|
|
padding: 20px;
|
|
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
|
|
border-radius: 12px;
|
|
}
|
|
.portfolio-title {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
color: #065f46;
|
|
text-align: center;
|
|
margin: 0 0 16px 0;
|
|
}
|
|
.project-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px 12px;
|
|
background-color: white;
|
|
border-radius: 8px;
|
|
margin-bottom: 8px;
|
|
border-left: 4px solid;
|
|
}
|
|
.project-info {
|
|
flex: 1;
|
|
}
|
|
.project-name {
|
|
font-weight: 600;
|
|
color: #1e293b;
|
|
font-size: 14px;
|
|
}
|
|
.project-percentage {
|
|
font-weight: bold;
|
|
color: #047857;
|
|
font-size: 15px;
|
|
}
|
|
.footer {
|
|
background-color: #f8fafc;
|
|
padding: 30px;
|
|
text-align: center;
|
|
color: #94a3b8;
|
|
font-size: 13px;
|
|
}
|
|
.footer-note {
|
|
margin: 16px 0 8px;
|
|
color: #64748b;
|
|
font-size: 12px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
@media only screen and (max-width: 600px) {
|
|
.comparisons-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.metadata-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.carbon-highlight {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
.carbon-highlight .icon {
|
|
margin-top: 16px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<img src="https://s3.puffinoffset.com/public/puffinOffset.png" alt="Puffin Offset" class="logo">
|
|
<h1>Order Confirmed</h1>
|
|
<p>Thank you for your carbon offset purchase</p>
|
|
</div>
|
|
|
|
<!-- Success Badge -->
|
|
<div class="success-badge">
|
|
<div class="checkmark"></div>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="content">
|
|
<h2 class="section-title">Order Summary</h2>
|
|
|
|
<!-- Carbon Offset Highlight -->
|
|
<div class="carbon-highlight">
|
|
<div class="text">
|
|
<div class="label">Carbon Offset</div>
|
|
<div class="value">{{tons}} tons CO₂</div>
|
|
</div>
|
|
<div class="icon" style="font-size: 64px; opacity: 0.6;">🌱</div>
|
|
</div>
|
|
|
|
<!-- Pricing Breakdown -->
|
|
<div class="pricing-box" style="background-color: #f8fafc !important;">
|
|
<div class="pricing-row">
|
|
<span class="detail-label" style="color: #475569 !important;">Offset Cost</span>
|
|
<span class="detail-value" style="color: #0f172a !important;">${{baseAmount}}</span>
|
|
</div>
|
|
<div class="pricing-row">
|
|
<span class="detail-label" style="color: #475569 !important;">Processing Fee (3%)</span>
|
|
<span class="detail-value" style="color: #0f172a !important;">${{processingFee}}</span>
|
|
</div>
|
|
<div class="pricing-total">
|
|
<div class="pricing-row">
|
|
<span class="label">Total Paid</span>
|
|
<span class="value">${{totalAmount}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Order Metadata -->
|
|
<div class="metadata-box" style="background: linear-gradient(135deg, #f8fafc 0%, #dbeafe 100%) !important;">
|
|
<div class="metadata-grid">
|
|
<div class="metadata-item">
|
|
<div class="metadata-label" style="color: #0f172a !important;">PAYMENT ID</div>
|
|
<div class="metadata-value" style="color: #0f172a !important;">{{stripeSessionId}}</div>
|
|
</div>
|
|
<div class="metadata-item">
|
|
<div class="metadata-label" style="color: #0f172a !important;">ORDER ID</div>
|
|
<div class="metadata-value" style="color: #0f172a !important;">{{orderId}}</div>
|
|
</div>
|
|
<div class="metadata-item">
|
|
<div class="metadata-label" style="color: #0f172a !important;">STATUS</div>
|
|
<div class="metadata-value" style="color: #0f172a !important;">
|
|
<span class="status-badge">Confirmed</span>
|
|
</div>
|
|
</div>
|
|
<div class="metadata-item">
|
|
<div class="metadata-label" style="color: #0f172a !important;">DATE</div>
|
|
<div class="metadata-value" style="color: #0f172a !important;">{{date}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Portfolio Distribution (if available) -->
|
|
{{#if projects}}
|
|
<div class="portfolio-section">
|
|
<h3 class="portfolio-title">Your Carbon Offset Distribution</h3>
|
|
<p style="text-align: center; color: #065f46; margin-bottom: 12px; font-size: 13px;">
|
|
Your {{tons}} tons of CO₂ offsets are distributed across these verified projects:
|
|
</p>
|
|
{{#each projects}}
|
|
<div class="project-item" style="border-left-color: {{this.color}}">
|
|
<div class="project-info">
|
|
<div class="project-name">{{this.name}}</div>
|
|
</div>
|
|
<div class="project-percentage">{{this.percentage}}%</div>
|
|
</div>
|
|
{{/each}}
|
|
</div>
|
|
{{/if}}
|
|
|
|
<!-- Carbon Impact Comparisons -->
|
|
{{#if comparisons}}
|
|
<div class="comparisons">
|
|
<h3 class="comparisons-title">Your Impact</h3>
|
|
<p class="comparisons-subtitle">Here's what your offset is equivalent to:</p>
|
|
<div class="comparisons-grid">
|
|
{{#each comparisons}}
|
|
<div class="comparison-card">
|
|
<div class="comparison-icon">{{this.icon}}</div>
|
|
<div class="comparison-value">{{this.value}}</div>
|
|
<div class="comparison-unit">{{this.unit}}</div>
|
|
<div class="comparison-label">{{this.label}}</div>
|
|
</div>
|
|
{{/each}}
|
|
</div>
|
|
<p style="text-align: center; font-size: 10px; color: rgba(255,255,255,0.6); margin-top: 12px; margin-bottom: 0;">
|
|
Equivalencies calculated using EPA 2024, DEFRA 2024, and IMO 2024 verified conversion factors.
|
|
</p>
|
|
</div>
|
|
{{/if}}
|
|
|
|
<div class="footer-note">
|
|
<strong>What happens next?</strong><br>
|
|
Your carbon offset order has been processed successfully. The offset will be registered with our verified climate projects, and your impact will be permanently recorded. You can keep this email as your official receipt for tax purposes.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="footer">
|
|
<p style="margin: 0 0 8px 0;"><strong>Thank you for taking action on climate change!</strong></p>
|
|
<p style="margin: 0;">This is an automated receipt from Puffin Offset.</p>
|
|
<p style="margin: 8px 0 0 0;">© 2025 Puffin Offset</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|