Chris Chen
387 lines
16 KiB
HTML
387 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Church Portal Access - ROLCC AC</title>
|
|
<style>
|
|
/* Email-safe CSS - compatible with most email clients */
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: Arial, sans-serif;
|
|
line-height: 1.6;
|
|
color: #333333;
|
|
background-color: #f4f4f4;
|
|
}
|
|
|
|
.email-container {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
/* Header Section */
|
|
.email-header {
|
|
background-color: #1e3a8a;
|
|
padding: 30px 20px;
|
|
text-align: center;
|
|
color: white;
|
|
}
|
|
|
|
.logo-image {
|
|
height: 50px;
|
|
width: auto;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.logo-text h1 {
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
margin: 0 0 5px 0;
|
|
}
|
|
|
|
.logo-text .tagline {
|
|
font-size: 14px;
|
|
opacity: 0.9;
|
|
margin: 0;
|
|
}
|
|
|
|
.email-title {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
margin: 20px 0 0 0;
|
|
}
|
|
|
|
/* Content Section */
|
|
.email-content {
|
|
padding: 30px 20px;
|
|
}
|
|
|
|
.greeting {
|
|
font-size: 18px;
|
|
margin-bottom: 20px;
|
|
color: #1f2937;
|
|
}
|
|
|
|
.message {
|
|
font-size: 16px;
|
|
line-height: 1.6;
|
|
margin-bottom: 25px;
|
|
color: #4b5563;
|
|
}
|
|
|
|
/* Transaction Details */
|
|
.transaction-details {
|
|
background-color: #f8f9fa;
|
|
border: 1px solid #e9ecef;
|
|
padding: 20px;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.details-header {
|
|
margin-bottom: 15px;
|
|
color: #495057;
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.detail-item {
|
|
background-color: white;
|
|
border: 1px solid #e9ecef;
|
|
padding: 12px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.detail-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.detail-label {
|
|
font-weight: bold;
|
|
color: #495057;
|
|
font-size: 14px;
|
|
display: inline-block;
|
|
width: 120px;
|
|
}
|
|
|
|
.detail-value {
|
|
font-size: 14px;
|
|
color: #1a1a1a;
|
|
background-color: #f8f9fa;
|
|
padding: 4px 8px;
|
|
display: inline-block;
|
|
}
|
|
|
|
/* Access Button */
|
|
.access-section {
|
|
text-align: center;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.access-button {
|
|
display: inline-block;
|
|
background-color: #1e3a8a;
|
|
color: white;
|
|
text-decoration: none;
|
|
padding: 15px 30px;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
border: none;
|
|
}
|
|
|
|
.access-button:hover {
|
|
background-color: #1e40af;
|
|
text-decoration: none;
|
|
color: white;
|
|
}
|
|
|
|
/* Security Notice */
|
|
.security-notice {
|
|
background-color: #fef3c7;
|
|
border: 1px solid #f59e0b;
|
|
padding: 15px;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.security-header {
|
|
margin-bottom: 8px;
|
|
color: #92400e;
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.security-text {
|
|
color: #92400e;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Footer */
|
|
.email-footer {
|
|
background-color: #f8f9fa;
|
|
padding: 20px;
|
|
text-align: center;
|
|
border-top: 1px solid #e9ecef;
|
|
}
|
|
|
|
.footer-text {
|
|
font-size: 14px;
|
|
color: #6b7280;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.footer-contact {
|
|
font-size: 12px;
|
|
color: #9ca3af;
|
|
}
|
|
|
|
/* Mobile Responsive */
|
|
@media (max-width: 600px) {
|
|
.email-container {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.email-header {
|
|
padding: 20px 15px;
|
|
}
|
|
|
|
.logo-text h1 {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.email-title {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.email-content {
|
|
padding: 20px 15px;
|
|
}
|
|
|
|
.transaction-details {
|
|
padding: 15px;
|
|
}
|
|
|
|
.detail-label {
|
|
width: 100%;
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.detail-value {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
.access-button {
|
|
padding: 12px 25px;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f4f4f4;">
|
|
<tr>
|
|
<td align="center" style="padding: 20px 0;">
|
|
<table class="email-container" width="600" cellpadding="0" cellspacing="0" border="0"
|
|
style="background-color: #ffffff; max-width: 600px;">
|
|
|
|
<!-- Header -->
|
|
<tr>
|
|
<td class="email-header"
|
|
style="background-color: #1e3a8a; padding: 30px 20px; text-align: center; color: white;">
|
|
<img src="assets/images/ROLCC-Logo-Color.png" alt="ROLCC Logo" class="logo-image"
|
|
style="height: 50px; width: auto; margin-bottom: 15px;">
|
|
<div class="logo-text">
|
|
<h1 style="font-size: 28px; font-weight: bold; margin: 0 0 5px 0;">ROLCC AC</h1>
|
|
<span class="tagline" style="font-size: 14px; opacity: 0.9;">Church Management
|
|
Portal</span>
|
|
</div>
|
|
<h2 class="email-title" style="font-size: 24px; font-weight: bold; margin: 20px 0 0 0;">
|
|
Secure Portal Access</h2>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Content -->
|
|
<tr>
|
|
<td class="email-content" style="padding: 30px 20px;">
|
|
|
|
<div class="greeting" style="font-size: 18px; margin-bottom: 20px; color: #1f2937;">
|
|
Hello [Client Name],
|
|
</div>
|
|
|
|
<div class="message"
|
|
style="font-size: 16px; line-height: 1.6; margin-bottom: 25px; color: #4b5563;">
|
|
Your church transaction is ready for review. Please use the secure link below to access
|
|
your
|
|
personalized portal where you can view transaction details, upload required documents,
|
|
and communicate
|
|
with your church officer.
|
|
</div>
|
|
|
|
<!-- Transaction Details -->
|
|
<table class="transaction-details" width="100%" cellpadding="0" cellspacing="0" border="0"
|
|
style="background-color: #f8f9fa; border: 1px solid #e9ecef; padding: 20px; margin-bottom: 25px;">
|
|
<tr>
|
|
<td>
|
|
<div class="details-header"
|
|
style="margin-bottom: 15px; color: #495057; font-weight: bold; font-size: 16px;">
|
|
Transaction Details
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
|
<tr>
|
|
<td
|
|
style="background-color: white; border: 1px solid #e9ecef; padding: 12px; margin-bottom: 8px;">
|
|
<span class="detail-label"
|
|
style="font-weight: bold; color: #495057; font-size: 14px; display: inline-block; width: 120px;">Company:</span>
|
|
<span class="detail-value"
|
|
style="font-size: 14px; color: #1a1a1a; background-color: #f8f9fa; padding: 4px 8px;">[Company
|
|
Name]</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td
|
|
style="background-color: white; border: 1px solid #e9ecef; padding: 12px; margin-bottom: 8px;">
|
|
<span class="detail-label"
|
|
style="font-weight: bold; color: #495057; font-size: 14px; display: inline-block; width: 120px;">Escrow
|
|
Officer:</span>
|
|
<span class="detail-value"
|
|
style="font-size: 14px; color: #1a1a1a; background-color: #f8f9fa; padding: 4px 8px;">[Escrow
|
|
Officer Name]</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td
|
|
style="background-color: white; border: 1px solid #e9ecef; padding: 12px; margin-bottom: 8px;">
|
|
<span class="detail-label"
|
|
style="font-weight: bold; color: #495057; font-size: 14px; display: inline-block; width: 120px;">Property:</span>
|
|
<span class="detail-value"
|
|
style="font-size: 14px; color: #1a1a1a; background-color: #f8f9fa; padding: 4px 8px;">[Property
|
|
Address]</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td
|
|
style="background-color: white; border: 1px solid #e9ecef; padding: 12px;">
|
|
<span class="detail-label"
|
|
style="font-weight: bold; color: #495057; font-size: 14px; display: inline-block; width: 120px;">Transaction
|
|
ID:</span>
|
|
<span class="detail-value"
|
|
style="font-size: 14px; color: #1a1a1a; background-color: #f8f9fa; padding: 4px 8px;">[Transaction
|
|
ID]</span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<!-- Access Button -->
|
|
<table class="access-section" width="100%" cellpadding="0" cellspacing="0" border="0"
|
|
style="text-align: center; margin-bottom: 25px;">
|
|
<tr>
|
|
<td align="center">
|
|
<a href="[SECRET_LINK]" class="access-button"
|
|
style="display: inline-block; background-color: #1e3a8a; color: white; text-decoration: none; padding: 15px 30px; font-size: 18px; font-weight: bold; border: none;">
|
|
Access Your Portal
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<!-- Security Notice -->
|
|
<table class="security-notice" width="100%" cellpadding="0" cellspacing="0" border="0"
|
|
style="background-color: #fef3c7; border: 1px solid #f59e0b; padding: 15px; margin-bottom: 25px;">
|
|
<tr>
|
|
<td>
|
|
<div class="security-header"
|
|
style="margin-bottom: 8px; color: #92400e; font-weight: bold; font-size: 16px;">
|
|
Security Notice
|
|
</div>
|
|
<div class="security-text"
|
|
style="color: #92400e; font-size: 14px; line-height: 1.5;">
|
|
This link is secure and personalized for your transaction. Please do not
|
|
share this link with
|
|
others. If you did not request this access or have any concerns, please
|
|
contact your church officer
|
|
immediately.
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<div class="message"
|
|
style="font-size: 16px; line-height: 1.6; margin-bottom: 25px; color: #4b5563;">
|
|
If you have any questions or need assistance, please don't hesitate to contact your
|
|
church officer
|
|
directly. We're here to help make your transaction as smooth as possible.
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Footer -->
|
|
<tr>
|
|
<td class="email-footer"
|
|
style="background-color: #f8f9fa; padding: 20px; text-align: center; border-top: 1px solid #e9ecef;">
|
|
<div class="footer-text" style="font-size: 14px; color: #6b7280; margin-bottom: 8px;">
|
|
This email was sent by ROLCC AC Church Management Portal
|
|
</div>
|
|
<div class="footer-contact" style="font-size: 12px; color: #9ca3af;">
|
|
For technical support, contact: support@clientbridge.com | Phone: (555) 123-4567
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</body>
|
|
|
|
</html> |