alternative-backend-service/templates/emails/admin_notification.html
saani 20b7455eb7 refactor(emails): update support email to admin address
- Change support email from hello@attunehearttherapy.com to admin@attunehearttherapy.com across all email templates
- Remove support contact section from admin notification template
- Standardize email addresses by hardcoding admin email in templates
- Remove unused CSS comment from base email template

This ensures consistent support contact information across the application and directs user inquiries to the appropriate admin channel.
2025-11-27 18:30:23 +00:00

297 lines
7.3 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>New Appointment Request - Action Required</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f8fafc;
}
.email-container {
max-width: 600px;
margin: 0 auto;
background: #ffffff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.email-header {
background-image: linear-gradient(to right, #e11d48, #db2777, #f97316);
padding: 40px 30px;
text-align: center;
color: white;
}
.email-header h1 {
font-size: 28px;
font-weight: 700;
margin-bottom: 8px;
}
.email-header p {
font-size: 16px;
opacity: 0.9;
font-weight: 400;
}
.email-body {
padding: 40px 30px;
}
.urgent-badge {
background: linear-gradient(135deg, #dc2626, #ea580c);
color: white;
padding: 12px 20px;
border-radius: 8px;
text-align: center;
font-weight: 600;
margin-bottom: 30px;
font-size: 16px;
}
.section {
margin-bottom: 30px;
}
.section-title {
font-size: 18px;
font-weight: 600;
color: #1f2937;
margin-bottom: 16px;
border-bottom: 2px solid #f1f5f9;
padding-bottom: 8px;
}
.info-card {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 24px;
}
.info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.info-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.info-label {
font-weight: 500;
color: #64748b;
font-size: 14px;
}
.info-value {
font-weight: 600;
color: #1e293b;
font-size: 15px;
}
.message-container {
background: white;
padding: 20px;
border-radius: 8px;
border-left: 4px solid #10b981;
font-style: italic;
color: #475569;
line-height: 1.6;
}
.preferences {
background: #fffaf0;
border-left: 4px solid #ed8936;
padding: 20px;
border-radius: 0 8px 8px 0;
margin: 20px 0;
}
.pref-title {
font-weight: 600;
color: #744210;
margin-bottom: 10px;
font-size: 16px;
}
.action-section {
text-align: center;
margin: 35px 0 25px;
}
.button {
display: inline-block;
background-image: linear-gradient(to right, #e11d48, #db2777, #f97316);
color: white;
padding: 16px 32px;
text-decoration: none;
border-radius: 8px;
font-weight: 600;
font-size: 16px;
transition: transform 0.2s;
}
.button:hover {
transform: translateY(-2px);
}
.alert-note {
background: #fff5f5;
border: 1px solid #fed7d7;
border-radius: 8px;
padding: 15px;
margin-top: 20px;
font-size: 14px;
color: #c53030;
text-align: center;
}
.email-footer {
background-image: linear-gradient(to right, #e11d48, #db2777, #f97316);
padding: 30px;
text-align: center;
color: white;
}
.footer-text {
font-size: 14px;
margin-bottom: 10px;
opacity: 0.9;
}
.copyright {
font-size: 12px;
margin-top: 15px;
opacity: 0.8;
}
@media (max-width: 600px) {
.email-container {
margin: 10px;
border-radius: 8px;
}
.email-header,
.email-body,
.email-footer {
padding: 25px 20px;
}
.info-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.urgent-badge {
font-size: 14px;
padding: 10px 16px;
}
}
</style>
</head>
<body>
<div class="email-container">
<!-- Header -->
<div class="email-header">
<h1>New Appointment Request</h1>
<p>A client has requested to schedule a therapy session</p>
</div>
<!-- Body -->
<div class="email-body">
<div class="urgent-badge">
ACTION REQUIRED - Please respond within 24 hours
</div>
<!-- Client Information Section -->
<div class="section">
<h2 class="section-title">Client Information</h2>
<div class="info-card">
<div class="info-grid">
<div class="info-item">
<span class="info-label">Full Name</span>
<span class="info-value">{{ appointment.full_name }}</span>
</div>
<div class="info-item">
<span class="info-label">Email Address</span>
<span class="info-value">{{ appointment.email }}</span>
</div>
<div class="info-item">
<span class="info-label">Phone Number</span>
<span class="info-value"
>{{ appointment.phone|default:"Not provided" }}</span
>
</div>
<div class="info-item">
<span class="info-label">Request Date</span>
<span class="info-value"
>{{ appointment.formatted_created_at }}</span
>
</div>
</div>
</div>
</div>
<!-- Client Message Section -->
{% if appointment.reason %}
<div class="section">
<h2 class="section-title">Client's Message</h2>
<div class="message-container">"{{ appointment.reason }}"</div>
</div>
{% endif %}
<!-- Preferences Section -->
<div class="preferences">
<div class="pref-title">Preferred Availability</div>
<div style="margin-bottom: 10px">
<strong>Dates:</strong> {{ preferred_dates }}
</div>
<div><strong>Time Slots:</strong> {{ preferred_times }}</div>
</div>
<!-- Action Button -->
<div class="action-section">
<a href="{{ admin_dashboard_url }}" class="button">
Review Appointment Request
</a>
</div>
<!-- Alert Note -->
<div class="alert-note">
Please respond to this request within 24 hours to ensure the best
client experience.
</div>
</div>
<!-- Footer -->
<div class="email-footer">
<div class="company-name">{{ settings.SITE_NAME|default:"Attune Heart Therapy" }}</div>
<p class="copyright">
© {% now "Y" %} {{ settings.SITE_NAME|default:"Attune Heart Therapy" }}.
All rights reserved.
</p>
</div>
</div>
</body>
</html>