WIP
This commit is contained in:
Chris Chen
@@ -0,0 +1,387 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Escrow Portal Access - RBJ Identity</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/rbj-logo.svg" alt="RBJ 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;">RBJ Identity</h1>
|
||||
<span class="tagline" style="font-size: 14px; opacity: 0.9;">Escrow 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 escrow 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 escrow 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 escrow 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
|
||||
escrow 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 RBJ Identity Escrow 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>
|
||||
Reference in New Issue
Block a user