- 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.
297 lines
7.3 KiB
HTML
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>
|