Fix email template compatibility and enhance user dashboard
Build And Push Image / docker (push) Successful in 3m20s
Details
Build And Push Image / docker (push) Successful in 3m20s
Details
- Convert all email templates to table-based layouts for compatibility with Outlook, Gmail, Apple Mail, etc. - Use only inline CSS and email-safe properties - Fix welcome.hbs, verification.hbs, password-reset.hbs, dues-reminder.hbs, test.hbs templates - Enhanced user dashboard with complete member information (Member ID, registration date, dues status, etc.) - Added proper loading states and error handling for member data - Improved member profile page with comprehensive information display - Fixed missing wiring information in user and profile screens as requested
This commit is contained in:
parent
c12b88072f
commit
ea6a722364
|
|
@ -102,17 +102,69 @@
|
||||||
Member Information
|
Member Information
|
||||||
</v-card-title>
|
</v-card-title>
|
||||||
<v-card-text class="pa-4">
|
<v-card-text class="pa-4">
|
||||||
<v-list>
|
<v-skeleton-loader v-if="pending" type="list-item-three-line"></v-skeleton-loader>
|
||||||
|
<div v-else-if="error" class="text-error text-center pa-4">
|
||||||
|
<v-icon size="48" class="mb-2">mdi-alert-circle</v-icon>
|
||||||
|
<div>Failed to load member information</div>
|
||||||
|
</div>
|
||||||
|
<v-list v-else>
|
||||||
|
<v-list-item>
|
||||||
|
<v-list-item-content>
|
||||||
|
<v-list-item-title>Member ID</v-list-item-title>
|
||||||
|
<v-list-item-subtitle>
|
||||||
|
<v-chip color="primary" size="small" variant="outlined">
|
||||||
|
{{ memberInfo?.memberId || 'Not assigned' }}
|
||||||
|
</v-chip>
|
||||||
|
</v-list-item-subtitle>
|
||||||
|
</v-list-item-content>
|
||||||
|
</v-list-item>
|
||||||
<v-list-item>
|
<v-list-item>
|
||||||
<v-list-item-content>
|
<v-list-item-content>
|
||||||
<v-list-item-title>Name</v-list-item-title>
|
<v-list-item-title>Name</v-list-item-title>
|
||||||
<v-list-item-subtitle>{{ user?.name || 'Not provided' }}</v-list-item-subtitle>
|
<v-list-item-subtitle>{{ memberInfo?.fullName || 'Not provided' }}</v-list-item-subtitle>
|
||||||
</v-list-item-content>
|
</v-list-item-content>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
<v-list-item>
|
<v-list-item>
|
||||||
<v-list-item-content>
|
<v-list-item-content>
|
||||||
<v-list-item-title>Email</v-list-item-title>
|
<v-list-item-title>Email</v-list-item-title>
|
||||||
<v-list-item-subtitle>{{ user?.email || 'Not provided' }}</v-list-item-subtitle>
|
<v-list-item-subtitle>{{ memberInfo?.email || 'Not provided' }}</v-list-item-subtitle>
|
||||||
|
</v-list-item-content>
|
||||||
|
</v-list-item>
|
||||||
|
<v-list-item>
|
||||||
|
<v-list-item-content>
|
||||||
|
<v-list-item-title>Phone</v-list-item-title>
|
||||||
|
<v-list-item-subtitle>{{ memberInfo?.phone || 'Not provided' }}</v-list-item-subtitle>
|
||||||
|
</v-list-item-content>
|
||||||
|
</v-list-item>
|
||||||
|
<v-list-item>
|
||||||
|
<v-list-item-content>
|
||||||
|
<v-list-item-title>Nationality</v-list-item-title>
|
||||||
|
<v-list-item-subtitle>{{ memberInfo?.nationality || 'Not provided' }}</v-list-item-subtitle>
|
||||||
|
</v-list-item-content>
|
||||||
|
</v-list-item>
|
||||||
|
<v-list-item>
|
||||||
|
<v-list-item-content>
|
||||||
|
<v-list-item-title>Member Since</v-list-item-title>
|
||||||
|
<v-list-item-subtitle>{{ memberInfo?.memberSince || 'Not provided' }}</v-list-item-subtitle>
|
||||||
|
</v-list-item-content>
|
||||||
|
</v-list-item>
|
||||||
|
<v-list-item>
|
||||||
|
<v-list-item-content>
|
||||||
|
<v-list-item-title>Dues Status</v-list-item-title>
|
||||||
|
<v-list-item-subtitle>
|
||||||
|
<v-chip
|
||||||
|
:color="memberInfo?.duesStatus === 'Paid' ? 'success' : 'warning'"
|
||||||
|
size="small"
|
||||||
|
>
|
||||||
|
{{ memberInfo?.duesStatus || 'Unknown' }}
|
||||||
|
</v-chip>
|
||||||
|
</v-list-item-subtitle>
|
||||||
|
</v-list-item-content>
|
||||||
|
</v-list-item>
|
||||||
|
<v-list-item>
|
||||||
|
<v-list-item-content>
|
||||||
|
<v-list-item-title>Last Payment</v-list-item-title>
|
||||||
|
<v-list-item-subtitle>{{ memberInfo?.lastPayment || 'No payment recorded' }}</v-list-item-subtitle>
|
||||||
</v-list-item-content>
|
</v-list-item-content>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
<v-list-item>
|
<v-list-item>
|
||||||
|
|
@ -156,6 +208,8 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import type { Member } from '~/utils/types';
|
||||||
|
|
||||||
definePageMeta({
|
definePageMeta({
|
||||||
layout: 'dashboard',
|
layout: 'dashboard',
|
||||||
middleware: 'auth'
|
middleware: 'auth'
|
||||||
|
|
@ -163,6 +217,31 @@ definePageMeta({
|
||||||
|
|
||||||
const { firstName, user, userTier } = useAuth();
|
const { firstName, user, userTier } = useAuth();
|
||||||
|
|
||||||
|
// Fetch complete member data
|
||||||
|
const { data: memberData, pending, error } = await useFetch<{ success: boolean; member: Member }>('/api/auth/session', {
|
||||||
|
server: false
|
||||||
|
});
|
||||||
|
|
||||||
|
const member = computed(() => memberData.value?.member);
|
||||||
|
|
||||||
|
// Format member information for display
|
||||||
|
const memberInfo = computed(() => {
|
||||||
|
if (!member.value) return null;
|
||||||
|
|
||||||
|
return {
|
||||||
|
memberId: member.value.member_id || 'Not assigned',
|
||||||
|
fullName: member.value.FullName || `${member.value.first_name || ''} ${member.value.last_name || ''}`.trim(),
|
||||||
|
email: member.value.email || 'Not provided',
|
||||||
|
phone: member.value.FormattedPhone || member.value.phone || 'Not provided',
|
||||||
|
nationality: member.value.nationality || 'Not provided',
|
||||||
|
memberSince: member.value.member_since ? new Date(member.value.member_since).toLocaleDateString() : 'Not provided',
|
||||||
|
duesStatus: member.value.current_year_dues_paid === 'true' ? 'Paid' : 'Outstanding',
|
||||||
|
membershipStatus: member.value.membership_status || 'Active',
|
||||||
|
lastPayment: member.value.membership_date_paid ? new Date(member.value.membership_date_paid).toLocaleDateString() : 'No payment recorded',
|
||||||
|
dueDate: member.value.payment_due_date ? new Date(member.value.payment_due_date).toLocaleDateString() : 'N/A'
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
// Navigation methods (placeholder implementations)
|
// Navigation methods (placeholder implementations)
|
||||||
const navigateToProfile = () => {
|
const navigateToProfile = () => {
|
||||||
navigateTo('/dashboard/profile');
|
navigateTo('/dashboard/profile');
|
||||||
|
|
@ -186,8 +265,9 @@ I need assistance with:
|
||||||
|
|
||||||
[Please describe your issue]
|
[Please describe your issue]
|
||||||
|
|
||||||
Member: ${user.value?.name || 'Not provided'}
|
Member ID: ${memberInfo.value?.memberId || 'Not provided'}
|
||||||
Email: ${user.value?.email || 'Not provided'}
|
Name: ${memberInfo.value?.fullName || 'Not provided'}
|
||||||
|
Email: ${memberInfo.value?.email || 'Not provided'}
|
||||||
|
|
||||||
Thank you!`);
|
Thank you!`);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,190 +1,249 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<title>Membership Dues Reminder - MonacoUSA</title>
|
<title>Membership Dues Reminder - MonacoUSA</title>
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
line-height: 1.6;
|
|
||||||
color: #333;
|
|
||||||
max-width: 600px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 20px;
|
|
||||||
background-color: #f4f4f4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.email-container {
|
|
||||||
background: white;
|
|
||||||
padding: 30px;
|
|
||||||
border-radius: 12px;
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
border-bottom: 2px solid #a31515;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
color: #a31515;
|
|
||||||
font-size: 28px;
|
|
||||||
font-weight: bold;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle {
|
|
||||||
color: #666;
|
|
||||||
font-size: 16px;
|
|
||||||
margin: 10px 0 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.greeting {
|
|
||||||
font-size: 20px;
|
|
||||||
color: #a31515;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dues-info {
|
|
||||||
background: rgba(163, 21, 21, 0.05);
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid rgba(163, 21, 21, 0.1);
|
|
||||||
margin: 20px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dues-info h3 {
|
|
||||||
color: #a31515;
|
|
||||||
margin: 0 0 15px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.amount {
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #a31515;
|
|
||||||
text-align: center;
|
|
||||||
margin: 15px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.payment-details {
|
|
||||||
background: #f8f9fa;
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: 8px;
|
|
||||||
border-left: 4px solid #a31515;
|
|
||||||
margin: 20px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.payment-details h3 {
|
|
||||||
color: #a31515;
|
|
||||||
margin: 0 0 15px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 30px;
|
|
||||||
padding-top: 20px;
|
|
||||||
border-top: 1px solid #eee;
|
|
||||||
color: #666;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link {
|
|
||||||
color: #a31515;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
body {
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.email-container {
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body style="margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f4f4f4;">
|
||||||
<div class="email-container">
|
<!-- Main Container -->
|
||||||
<div class="header">
|
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f4f4f4; padding: 20px 0;">
|
||||||
<img src="{{logoUrl}}" alt="MonacoUSA" class="logo">
|
<tr>
|
||||||
<h1 class="title">Membership Dues Reminder</h1>
|
<td align="center">
|
||||||
<p class="subtitle">Monaco - United States Association</p>
|
<!-- Email Container -->
|
||||||
</div>
|
<table width="600" cellpadding="0" cellspacing="0" border="0" style="background-color: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
|
||||||
|
|
||||||
<div class="content">
|
<!-- Header with Monaco Red Background -->
|
||||||
<div class="greeting">
|
<tr>
|
||||||
Dear {{firstName}} {{lastName}},
|
<td style="background-color: #a31515; padding: 30px; text-align: center;">
|
||||||
</div>
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
|
<tr>
|
||||||
|
<td align="center">
|
||||||
|
<img src="{{logoUrl}}" alt="MonacoUSA" width="80" height="80" style="border-radius: 8px; margin-bottom: 15px;">
|
||||||
|
<h1 style="color: #ffffff; font-size: 28px; font-weight: bold; margin: 0 0 8px 0;">Membership Dues Reminder</h1>
|
||||||
|
<p style="color: #ffffff; font-size: 16px; margin: 0; opacity: 0.9;">Monaco - United States Association</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
<p>This is a friendly reminder that your annual membership dues for the MonacoUSA Association are due.</p>
|
<!-- Main Content -->
|
||||||
|
<tr>
|
||||||
|
<td style="padding: 40px 30px;">
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
|
|
||||||
<div class="dues-info">
|
<!-- Greeting -->
|
||||||
<h3>💳 Payment Due</h3>
|
<tr>
|
||||||
<div class="amount">€{{amount}}</div>
|
<td style="padding-bottom: 20px;">
|
||||||
<p><strong>Due Date:</strong> {{dueDate}}</p>
|
<h2 style="color: #a31515; font-size: 20px; font-weight: bold; margin: 0;">Dear {{firstName}} {{lastName}},</h2>
|
||||||
</div>
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<!-- Main Message -->
|
||||||
|
<tr>
|
||||||
|
<td style="padding-bottom: 30px;">
|
||||||
|
<p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0;">
|
||||||
|
This is a friendly reminder that your annual membership dues for the MonacoUSA Association are due.
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<!-- Payment Due Box -->
|
||||||
|
<tr>
|
||||||
|
<td style="padding-bottom: 30px;">
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #fff3cd; border: 1px solid #ffeaa7; border-radius: 6px;">
|
||||||
|
<tr>
|
||||||
|
<td style="padding: 25px; text-align: center;">
|
||||||
|
<h3 style="color: #856404; font-size: 18px; font-weight: bold; margin: 0 0 15px 0;">💳 Payment Due</h3>
|
||||||
|
<div style="font-size: 32px; font-weight: bold; color: #a31515; margin: 10px 0;">€{{amount}}</div>
|
||||||
|
<p style="color: #333333; font-size: 16px; font-weight: bold; margin: 10px 0 0 0;">Due Date: {{dueDate}}</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<!-- Payment Instructions -->
|
||||||
{{#if iban}}
|
{{#if iban}}
|
||||||
<div class="payment-details">
|
<tr>
|
||||||
<h3>🏦 Payment Instructions</h3>
|
<td style="padding-bottom: 30px;">
|
||||||
<p><strong>Bank Transfer Details:</strong></p>
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
<ul>
|
<tr>
|
||||||
<li><strong>IBAN:</strong> {{iban}}</li>
|
<td style="background-color: #e3f2fd; border-left: 4px solid #2196f3; padding: 20px; border-radius: 4px;">
|
||||||
{{#if accountHolder}}<li><strong>Account Holder:</strong> {{accountHolder}}</li>{{/if}}
|
<h3 style="color: #1976d2; font-size: 18px; font-weight: bold; margin: 0 0 15px 0;">🏦 Payment Instructions</h3>
|
||||||
<li><strong>Amount:</strong> €{{amount}}</li>
|
<p style="color: #333333; font-size: 16px; font-weight: bold; margin: 0 0 15px 0;">Bank Transfer Details:</p>
|
||||||
<li><strong>Reference:</strong> Membership Dues - {{firstName}} {{lastName}}</li>
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
</ul>
|
<tr>
|
||||||
|
<td width="25%" style="vertical-align: top; padding: 5px 10px 5px 0;">
|
||||||
<p><em>Please include your name in the payment reference to ensure proper crediting.</em></p>
|
<strong style="color: #333333;">IBAN:</strong>
|
||||||
</div>
|
</td>
|
||||||
|
<td style="padding: 5px 0;">
|
||||||
|
<span style="color: #333333; font-family: monospace;">{{iban}}</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{{#if accountHolder}}
|
||||||
|
<tr>
|
||||||
|
<td width="25%" style="vertical-align: top; padding: 5px 10px 5px 0;">
|
||||||
|
<strong style="color: #333333;">Account Holder:</strong>
|
||||||
|
</td>
|
||||||
|
<td style="padding: 5px 0;">
|
||||||
|
<span style="color: #333333;">{{accountHolder}}</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{{/if}}
|
||||||
|
<tr>
|
||||||
|
<td width="25%" style="vertical-align: top; padding: 5px 10px 5px 0;">
|
||||||
|
<strong style="color: #333333;">Amount:</strong>
|
||||||
|
</td>
|
||||||
|
<td style="padding: 5px 0;">
|
||||||
|
<span style="color: #333333;">€{{amount}}</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td width="25%" style="vertical-align: top; padding: 5px 10px 5px 0;">
|
||||||
|
<strong style="color: #333333;">Reference:</strong>
|
||||||
|
</td>
|
||||||
|
<td style="padding: 5px 0;">
|
||||||
|
<span style="color: #333333;">Membership Dues - {{firstName}} {{lastName}}</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
<p style="color: #666666; font-size: 14px; font-style: italic; margin: 15px 0 0 0;">
|
||||||
|
Please include your name in the payment reference to ensure proper crediting.
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
<h3>🌟 Why Your Membership Matters</h3>
|
<!-- Why Your Membership Matters -->
|
||||||
<p>Your membership helps us:</p>
|
<tr>
|
||||||
<ul>
|
<td style="padding-bottom: 30px;">
|
||||||
<li>Connect Monaco and the United States communities</li>
|
<h3 style="color: #a31515; font-size: 18px; font-weight: bold; margin: 0 0 15px 0;">🌟 Why Your Membership Matters</h3>
|
||||||
<li>Organize cultural events and networking opportunities</li>
|
<p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0 0 10px 0;">Your membership helps us:</p>
|
||||||
<li>Support charitable causes in both regions</li>
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
<li>Maintain our digital platform and services</li>
|
<tr>
|
||||||
</ul>
|
<td style="padding: 5px 0;">
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
<p>If you have already made your payment, please disregard this reminder. It may take a few days for payments to be processed.</p>
|
<tr>
|
||||||
|
<td width="20" style="vertical-align: top; padding-right: 10px;">
|
||||||
<p>If you have any questions about your membership or payment, please don't hesitate to contact us.</p>
|
<span style="color: #a31515; font-weight: bold;">•</span>
|
||||||
</div>
|
</td>
|
||||||
|
<td>
|
||||||
<div class="footer">
|
<p style="margin: 0; color: #333333; font-size: 16px;">
|
||||||
<p><strong>MonacoUSA Association</strong><br>
|
Connect Monaco and the United States communities
|
||||||
Connecting Monaco and the United States</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
<a href="https://portal.monacousa.org" class="link">Portal</a> |
|
|
||||||
<a href="mailto:info@monacousa.org" class="link">Contact Us</a> |
|
|
||||||
<a href="https://monacousa.org" class="link">Website</a>
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</td>
|
||||||
</div>
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td style="padding: 5px 0;">
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
|
<tr>
|
||||||
|
<td width="20" style="vertical-align: top; padding-right: 10px;">
|
||||||
|
<span style="color: #a31515; font-weight: bold;">•</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<p style="margin: 0; color: #333333; font-size: 16px;">
|
||||||
|
Organize cultural events and networking opportunities
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td style="padding: 5px 0;">
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
|
<tr>
|
||||||
|
<td width="20" style="vertical-align: top; padding-right: 10px;">
|
||||||
|
<span style="color: #a31515; font-weight: bold;">•</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<p style="margin: 0; color: #333333; font-size: 16px;">
|
||||||
|
Support charitable causes in both regions
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td style="padding: 5px 0;">
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
|
<tr>
|
||||||
|
<td width="20" style="vertical-align: top; padding-right: 10px;">
|
||||||
|
<span style="color: #a31515; font-weight: bold;">•</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<p style="margin: 0; color: #333333; font-size: 16px;">
|
||||||
|
Maintain our digital platform and services
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<!-- Payment Notice -->
|
||||||
|
<tr>
|
||||||
|
<td style="padding-bottom: 30px;">
|
||||||
|
<p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0 0 15px 0;">
|
||||||
|
If you have already made your payment, please disregard this reminder. It may take a few days for payments to be processed.
|
||||||
|
</p>
|
||||||
|
<p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0;">
|
||||||
|
If you have any questions about your membership or payment, please don't hesitate to contact us.
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<tr>
|
||||||
|
<td style="background-color: #f8f9fa; padding: 30px; text-align: center; border-top: 1px solid #e9ecef;">
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<h4 style="color: #333333; font-size: 18px; font-weight: bold; margin: 0 0 8px 0;">MonacoUSA Association</h4>
|
||||||
|
<p style="color: #666666; font-size: 14px; margin: 0 0 15px 0;">Connecting Monaco and the United States</p>
|
||||||
|
|
||||||
|
<!-- Links -->
|
||||||
|
<table cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto;">
|
||||||
|
<tr>
|
||||||
|
<td style="padding: 0 10px;">
|
||||||
|
<a href="https://portal.monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Portal</a>
|
||||||
|
</td>
|
||||||
|
<td style="padding: 0 10px; color: #cccccc;">|</td>
|
||||||
|
<td style="padding: 0 10px;">
|
||||||
|
<a href="mailto:info@monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Contact Us</a>
|
||||||
|
</td>
|
||||||
|
<td style="padding: 0 10px; color: #cccccc;">|</td>
|
||||||
|
<td style="padding: 0 10px;">
|
||||||
|
<a href="https://monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Website</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,167 +1,135 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<title>Password Reset - MonacoUSA</title>
|
<title>Password Reset - MonacoUSA</title>
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
line-height: 1.6;
|
|
||||||
color: #333;
|
|
||||||
margin: 0;
|
|
||||||
padding: 20px;
|
|
||||||
background-image: url('{{baseUrl}}/monaco_high_res.jpg');
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-attachment: fixed;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.email-container {
|
|
||||||
background: rgba(255, 255, 255, 0.95);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
padding: 40px;
|
|
||||||
border-radius: 12px;
|
|
||||||
box-shadow: 0 8px 25px rgba(163, 21, 21, 0.15);
|
|
||||||
max-width: 600px;
|
|
||||||
margin: 20px auto;
|
|
||||||
border: 1px solid rgba(163, 21, 21, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
border-bottom: 2px solid #a31515;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
color: #a31515;
|
|
||||||
font-size: 28px;
|
|
||||||
font-weight: bold;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle {
|
|
||||||
color: #666;
|
|
||||||
font-size: 16px;
|
|
||||||
margin: 10px 0 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.greeting {
|
|
||||||
font-size: 20px;
|
|
||||||
color: #a31515;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reset-button {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 15px 30px;
|
|
||||||
background: linear-gradient(135deg, #a31515 0%, #c41e1e 100%);
|
|
||||||
color: white;
|
|
||||||
text-decoration: none;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 16px;
|
|
||||||
text-align: center;
|
|
||||||
margin: 20px 0;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reset-button:hover {
|
|
||||||
background: linear-gradient(135deg, #8b1212 0%, #a31515 100%);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 4px 12px rgba(163, 21, 21, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 30px;
|
|
||||||
padding-top: 20px;
|
|
||||||
border-top: 1px solid #eee;
|
|
||||||
color: #666;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link {
|
|
||||||
color: #a31515;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
body {
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.email-container {
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reset-button {
|
|
||||||
display: block;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body style="margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f4f4f4;">
|
||||||
<div class="email-container">
|
<!-- Main Container -->
|
||||||
<div class="header">
|
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f4f4f4; padding: 20px 0;">
|
||||||
<img src="{{logoUrl}}" alt="MonacoUSA" class="logo">
|
<tr>
|
||||||
<h1 class="title">Password Reset</h1>
|
<td align="center">
|
||||||
<p class="subtitle">Monaco - United States Association</p>
|
<!-- Email Container -->
|
||||||
</div>
|
<table width="600" cellpadding="0" cellspacing="0" border="0" style="background-color: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
|
||||||
|
|
||||||
<div class="content">
|
<!-- Header with Monaco Red Background -->
|
||||||
<div class="greeting">
|
<tr>
|
||||||
Dear {{firstName}},
|
<td style="background-color: #a31515; padding: 30px; text-align: center;">
|
||||||
</div>
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
|
<tr>
|
||||||
|
<td align="center">
|
||||||
|
<img src="{{logoUrl}}" alt="MonacoUSA" width="80" height="80" style="border-radius: 8px; margin-bottom: 15px;">
|
||||||
|
<h1 style="color: #ffffff; font-size: 28px; font-weight: bold; margin: 0 0 8px 0;">Password Reset</h1>
|
||||||
|
<p style="color: #ffffff; font-size: 16px; margin: 0; opacity: 0.9;">Monaco - United States Association</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
<p>We received a request to reset your password for your MonacoUSA Portal account.</p>
|
<!-- Main Content -->
|
||||||
|
<tr>
|
||||||
|
<td style="padding: 40px 30px;">
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
|
|
||||||
<div style="text-align: center;">
|
<!-- Greeting -->
|
||||||
<a href="{{resetLink}}" class="reset-button">
|
<tr>
|
||||||
|
<td style="padding-bottom: 20px;">
|
||||||
|
<h2 style="color: #a31515; font-size: 20px; font-weight: bold; margin: 0;">Dear {{firstName}},</h2>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<!-- Main Message -->
|
||||||
|
<tr>
|
||||||
|
<td style="padding-bottom: 30px;">
|
||||||
|
<p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0;">
|
||||||
|
We received a request to reset your password for your MonacoUSA Portal account.
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<!-- Reset Button -->
|
||||||
|
<tr>
|
||||||
|
<td style="padding-bottom: 30px; text-align: center;">
|
||||||
|
<table cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto;">
|
||||||
|
<tr>
|
||||||
|
<td style="background-color: #a31515; padding: 15px 30px; border-radius: 6px;">
|
||||||
|
<a href="{{resetLink}}" style="color: #ffffff; text-decoration: none; font-weight: bold; font-size: 16px; display: block;">
|
||||||
🔒 Reset Your Password
|
🔒 Reset Your Password
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
<p><em>This password reset link will expire in 1 hour for security purposes.</em></p>
|
<!-- Important Info -->
|
||||||
|
<tr>
|
||||||
<p>If you didn't request this password reset, please ignore this email. Your password will remain unchanged.</p>
|
<td style="padding-bottom: 30px;">
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
<p>For security reasons, this link can only be used once.</p>
|
<tr>
|
||||||
</div>
|
<td style="background-color: #fff3cd; border-left: 4px solid #ffc107; padding: 20px; border-radius: 4px;">
|
||||||
|
<p style="color: #856404; font-size: 14px; font-style: italic; margin: 0 0 10px 0;">
|
||||||
<div class="footer">
|
<strong>Important:</strong> This password reset link will expire in 1 hour for security purposes.
|
||||||
<p><strong>MonacoUSA Association</strong><br>
|
|
||||||
Connecting Monaco and the United States</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
<a href="https://portal.monacousa.org" class="link">Portal</a> |
|
|
||||||
<a href="mailto:info@monacousa.org" class="link">Contact Us</a> |
|
|
||||||
<a href="https://monacousa.org" class="link">Website</a>
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
<p style="color: #856404; font-size: 14px; margin: 0;">
|
||||||
</div>
|
For security reasons, this link can only be used once.
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<!-- Security Notice -->
|
||||||
|
<tr>
|
||||||
|
<td style="padding-bottom: 20px;">
|
||||||
|
<p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0;">
|
||||||
|
If you didn't request this password reset, please ignore this email. Your password will remain unchanged.
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<tr>
|
||||||
|
<td style="background-color: #f8f9fa; padding: 30px; text-align: center; border-top: 1px solid #e9ecef;">
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<h4 style="color: #333333; font-size: 18px; font-weight: bold; margin: 0 0 8px 0;">MonacoUSA Association</h4>
|
||||||
|
<p style="color: #666666; font-size: 14px; margin: 0 0 15px 0;">Connecting Monaco and the United States</p>
|
||||||
|
|
||||||
|
<!-- Links -->
|
||||||
|
<table cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto;">
|
||||||
|
<tr>
|
||||||
|
<td style="padding: 0 10px;">
|
||||||
|
<a href="https://portal.monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Portal</a>
|
||||||
|
</td>
|
||||||
|
<td style="padding: 0 10px; color: #cccccc;">|</td>
|
||||||
|
<td style="padding: 0 10px;">
|
||||||
|
<a href="mailto:info@monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Contact Us</a>
|
||||||
|
</td>
|
||||||
|
<td style="padding: 0 10px; color: #cccccc;">|</td>
|
||||||
|
<td style="padding: 0 10px;">
|
||||||
|
<a href="https://monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Website</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,224 +1,335 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<title>SMTP Test Email</title>
|
<title>SMTP Test Email</title>
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
line-height: 1.6;
|
|
||||||
color: #333;
|
|
||||||
margin: 0;
|
|
||||||
padding: 20px;
|
|
||||||
background-image: url('{{baseUrl}}/monaco_high_res.jpg');
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-attachment: fixed;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.email-container {
|
|
||||||
background: rgba(255, 255, 255, 0.95);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
padding: 40px;
|
|
||||||
border-radius: 12px;
|
|
||||||
box-shadow: 0 8px 25px rgba(163, 21, 21, 0.15);
|
|
||||||
max-width: 600px;
|
|
||||||
margin: 20px auto;
|
|
||||||
border: 1px solid rgba(163, 21, 21, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
border-bottom: 2px solid #a31515;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
color: #a31515;
|
|
||||||
font-size: 28px;
|
|
||||||
font-weight: bold;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle {
|
|
||||||
color: #666;
|
|
||||||
font-size: 16px;
|
|
||||||
margin: 10px 0 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.success-badge {
|
|
||||||
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
|
|
||||||
color: white;
|
|
||||||
padding: 10px 20px;
|
|
||||||
border-radius: 25px;
|
|
||||||
display: inline-block;
|
|
||||||
font-weight: bold;
|
|
||||||
margin: 20px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.test-details {
|
|
||||||
background: #f8f9fa;
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: 8px;
|
|
||||||
border-left: 4px solid #a31515;
|
|
||||||
margin: 20px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.test-details h3 {
|
|
||||||
color: #a31515;
|
|
||||||
margin: 0 0 15px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-row {
|
|
||||||
display: flex;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
padding: 5px 0;
|
|
||||||
border-bottom: 1px solid #eee;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-label {
|
|
||||||
font-weight: bold;
|
|
||||||
min-width: 120px;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-value {
|
|
||||||
color: #333;
|
|
||||||
font-family: 'Courier New', monospace;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 30px;
|
|
||||||
padding-top: 20px;
|
|
||||||
border-top: 1px solid #eee;
|
|
||||||
color: #666;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link {
|
|
||||||
color: #a31515;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
body {
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.email-container {
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-row {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-label {
|
|
||||||
min-width: auto;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body style="margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f4f4f4;">
|
||||||
<div class="email-container">
|
<!-- Main Container -->
|
||||||
<div class="header">
|
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f4f4f4; padding: 20px 0;">
|
||||||
<img src="{{logoUrl}}" alt="MonacoUSA" class="logo">
|
<tr>
|
||||||
<h1 class="title">SMTP Test Email</h1>
|
<td align="center">
|
||||||
<p class="subtitle">Email Configuration Test</p>
|
<!-- Email Container -->
|
||||||
</div>
|
<table width="600" cellpadding="0" cellspacing="0" border="0" style="background-color: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
|
||||||
|
|
||||||
<div style="text-align: center;">
|
<!-- Header with Monaco Red Background -->
|
||||||
<div class="success-badge">
|
<tr>
|
||||||
|
<td style="background-color: #a31515; padding: 30px; text-align: center;">
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
|
<tr>
|
||||||
|
<td align="center">
|
||||||
|
<img src="{{logoUrl}}" alt="MonacoUSA" width="80" height="80" style="border-radius: 8px; margin-bottom: 15px;">
|
||||||
|
<h1 style="color: #ffffff; font-size: 28px; font-weight: bold; margin: 0 0 8px 0;">SMTP Test Email</h1>
|
||||||
|
<p style="color: #ffffff; font-size: 16px; margin: 0; opacity: 0.9;">Email Configuration Test</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<tr>
|
||||||
|
<td style="padding: 40px 30px;">
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
|
|
||||||
|
<!-- Success Badge -->
|
||||||
|
<tr>
|
||||||
|
<td style="padding-bottom: 30px; text-align: center;">
|
||||||
|
<table cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto;">
|
||||||
|
<tr>
|
||||||
|
<td style="background-color: #28a745; color: #ffffff; padding: 10px 20px; border-radius: 20px; font-weight: bold;">
|
||||||
✅ SMTP Configuration Working!
|
✅ SMTP Configuration Working!
|
||||||
</div>
|
</td>
|
||||||
</div>
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
<p>Congratulations! This test email confirms that your SMTP email configuration is working correctly. The MonacoUSA Portal email system is now ready to send emails.</p>
|
<!-- Main Message -->
|
||||||
|
<tr>
|
||||||
|
<td style="padding-bottom: 30px;">
|
||||||
|
<p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0;">
|
||||||
|
Congratulations! This test email confirms that your SMTP email configuration is working correctly.
|
||||||
|
The MonacoUSA Portal email system is now ready to send emails.
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
<div class="test-details">
|
<!-- Test Configuration Details -->
|
||||||
<h3>📊 Test Configuration Details</h3>
|
<tr>
|
||||||
|
<td style="padding-bottom: 30px;">
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
|
<tr>
|
||||||
|
<td style="background-color: #f8f9fa; border-left: 4px solid #a31515; padding: 20px; border-radius: 4px;">
|
||||||
|
<h3 style="color: #a31515; font-size: 18px; font-weight: bold; margin: 0 0 15px 0;">📊 Test Configuration Details</h3>
|
||||||
|
|
||||||
<div class="detail-row">
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
<div class="detail-label">Test Time:</div>
|
<tr>
|
||||||
<div class="detail-value">{{testTime}}</div>
|
<td width="25%" style="vertical-align: top; padding: 5px 10px 5px 0;">
|
||||||
</div>
|
<strong style="color: #333333;">Test Time:</strong>
|
||||||
|
</td>
|
||||||
|
<td style="padding: 5px 0; color: #333333; font-family: monospace;">
|
||||||
|
{{testTime}}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td width="25%" style="vertical-align: top; padding: 5px 10px 5px 0;">
|
||||||
|
<strong style="color: #333333;">SMTP Host:</strong>
|
||||||
|
</td>
|
||||||
|
<td style="padding: 5px 0; color: #333333; font-family: monospace;">
|
||||||
|
{{smtpHost}}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td width="25%" style="vertical-align: top; padding: 5px 10px 5px 0;">
|
||||||
|
<strong style="color: #333333;">From Address:</strong>
|
||||||
|
</td>
|
||||||
|
<td style="padding: 5px 0; color: #333333; font-family: monospace;">
|
||||||
|
{{fromAddress}}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td width="25%" style="vertical-align: top; padding: 5px 10px 5px 0;">
|
||||||
|
<strong style="color: #333333;">Email Type:</strong>
|
||||||
|
</td>
|
||||||
|
<td style="padding: 5px 0; color: #333333;">
|
||||||
|
SMTP Configuration Test
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
<div class="detail-row">
|
<!-- What This Means -->
|
||||||
<div class="detail-label">SMTP Host:</div>
|
<tr>
|
||||||
<div class="detail-value">{{smtpHost}}</div>
|
<td style="padding-bottom: 30px;">
|
||||||
</div>
|
<h3 style="color: #a31515; font-size: 18px; font-weight: bold; margin: 0 0 15px 0;">🎯 What This Means</h3>
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
|
<tr>
|
||||||
|
<td style="padding: 5px 0;">
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
|
<tr>
|
||||||
|
<td width="30" style="vertical-align: top; padding-right: 10px;">
|
||||||
|
<span style="color: #28a745; font-weight: bold; font-size: 16px;">✅</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<p style="margin: 0; color: #333333; font-size: 16px;">
|
||||||
|
<strong>Connection Established:</strong> Successfully connected to your SMTP server
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td style="padding: 5px 0;">
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
|
<tr>
|
||||||
|
<td width="30" style="vertical-align: top; padding-right: 10px;">
|
||||||
|
<span style="color: #28a745; font-weight: bold; font-size: 16px;">✅</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<p style="margin: 0; color: #333333; font-size: 16px;">
|
||||||
|
<strong>Authentication Passed:</strong> SMTP credentials are correct and working
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td style="padding: 5px 0;">
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
|
<tr>
|
||||||
|
<td width="30" style="vertical-align: top; padding-right: 10px;">
|
||||||
|
<span style="color: #28a745; font-weight: bold; font-size: 16px;">✅</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<p style="margin: 0; color: #333333; font-size: 16px;">
|
||||||
|
<strong>Email Delivery:</strong> Emails can be sent from the portal
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td style="padding: 5px 0;">
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
|
<tr>
|
||||||
|
<td width="30" style="vertical-align: top; padding-right: 10px;">
|
||||||
|
<span style="color: #28a745; font-weight: bold; font-size: 16px;">✅</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<p style="margin: 0; color: #333333; font-size: 16px;">
|
||||||
|
<strong>Template System:</strong> Email templates are loading and rendering correctly
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
<div class="detail-row">
|
<!-- Available Email Types -->
|
||||||
<div class="detail-label">From Address:</div>
|
<tr>
|
||||||
<div class="detail-value">{{fromAddress}}</div>
|
<td style="padding-bottom: 30px;">
|
||||||
</div>
|
<h3 style="color: #a31515; font-size: 18px; font-weight: bold; margin: 0 0 15px 0;">📧 Available Email Types</h3>
|
||||||
|
<p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0 0 15px 0;">Your portal can now send the following types of emails:</p>
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
|
<tr>
|
||||||
|
<td style="padding: 5px 0;">
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
|
<tr>
|
||||||
|
<td width="20" style="vertical-align: top; padding-right: 10px;">
|
||||||
|
<span style="color: #a31515; font-weight: bold;">•</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<p style="margin: 0; color: #333333; font-size: 16px;">
|
||||||
|
<strong>Welcome Emails:</strong> New member registration confirmations
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td style="padding: 5px 0;">
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
|
<tr>
|
||||||
|
<td width="20" style="vertical-align: top; padding-right: 10px;">
|
||||||
|
<span style="color: #a31515; font-weight: bold;">•</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<p style="margin: 0; color: #333333; font-size: 16px;">
|
||||||
|
<strong>Email Verification:</strong> Account activation links
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td style="padding: 5px 0;">
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
|
<tr>
|
||||||
|
<td width="20" style="vertical-align: top; padding-right: 10px;">
|
||||||
|
<span style="color: #a31515; font-weight: bold;">•</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<p style="margin: 0; color: #333333; font-size: 16px;">
|
||||||
|
<strong>Password Reset:</strong> Secure password reset instructions
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td style="padding: 5px 0;">
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
|
<tr>
|
||||||
|
<td width="20" style="vertical-align: top; padding-right: 10px;">
|
||||||
|
<span style="color: #a31515; font-weight: bold;">•</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<p style="margin: 0; color: #333333; font-size: 16px;">
|
||||||
|
<strong>Dues Reminders:</strong> Membership payment notifications
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td style="padding: 5px 0;">
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
|
<tr>
|
||||||
|
<td width="20" style="vertical-align: top; padding-right: 10px;">
|
||||||
|
<span style="color: #a31515; font-weight: bold;">•</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<p style="margin: 0; color: #333333; font-size: 16px;">
|
||||||
|
<strong>General Notifications:</strong> Administrative communications
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
<div class="detail-row">
|
<!-- Success Message -->
|
||||||
<div class="detail-label">Email Type:</div>
|
<tr>
|
||||||
<div class="detail-value">SMTP Configuration Test</div>
|
<td style="padding-bottom: 20px;">
|
||||||
</div>
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
</div>
|
<tr>
|
||||||
|
<td style="background-color: rgba(40, 167, 69, 0.1); border-left: 4px solid #28a745; padding: 15px; border-radius: 4px;">
|
||||||
<h3>🎯 What This Means</h3>
|
<p style="color: #155724; font-size: 16px; font-weight: bold; margin: 0;">
|
||||||
<ul>
|
✨ Success! Your email system is fully configured and operational.
|
||||||
<li><strong>✅ Connection Established:</strong> Successfully connected to your SMTP server</li>
|
|
||||||
<li><strong>✅ Authentication Passed:</strong> SMTP credentials are correct and working</li>
|
|
||||||
<li><strong>✅ Email Delivery:</strong> Emails can be sent from the portal</li>
|
|
||||||
<li><strong>✅ Template System:</strong> Email templates are loading and rendering correctly</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h3>📧 Available Email Types</h3>
|
|
||||||
<p>Your portal can now send the following types of emails:</p>
|
|
||||||
<ul>
|
|
||||||
<li><strong>Welcome Emails:</strong> New member registration confirmations</li>
|
|
||||||
<li><strong>Email Verification:</strong> Account activation links</li>
|
|
||||||
<li><strong>Password Reset:</strong> Secure password reset instructions</li>
|
|
||||||
<li><strong>Dues Reminders:</strong> Membership payment notifications</li>
|
|
||||||
<li><strong>General Notifications:</strong> Administrative communications</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<div style="background: rgba(40, 167, 69, 0.1); padding: 15px; border-radius: 8px; margin: 20px 0; border-left: 4px solid #28a745;">
|
|
||||||
<p style="margin: 0; color: #155724;">
|
|
||||||
<strong>✨ Success!</strong> Your email system is fully configured and operational.
|
|
||||||
All automated emails from the MonacoUSA Portal will now be delivered successfully.
|
All automated emails from the MonacoUSA Portal will now be delivered successfully.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
<div class="footer">
|
</table>
|
||||||
<p><strong>MonacoUSA Portal</strong><br>
|
</td>
|
||||||
Email System Configuration Test</p>
|
</tr>
|
||||||
|
|
||||||
<p>
|
<!-- Footer -->
|
||||||
<a href="https://portal.monacousa.org" class="link">Portal</a> |
|
<tr>
|
||||||
<a href="mailto:admin@monacousa.org" class="link">Admin Support</a>
|
<td style="background-color: #f8f9fa; padding: 30px; text-align: center; border-top: 1px solid #e9ecef;">
|
||||||
</p>
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<h4 style="color: #333333; font-size: 18px; font-weight: bold; margin: 0 0 8px 0;">MonacoUSA Portal</h4>
|
||||||
|
<p style="color: #666666; font-size: 14px; margin: 0 0 15px 0;">Email System Configuration Test</p>
|
||||||
|
|
||||||
<p style="margin-top: 20px; font-size: 12px; color: #999;">
|
<!-- Links -->
|
||||||
|
<table cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto;">
|
||||||
|
<tr>
|
||||||
|
<td style="padding: 0 10px;">
|
||||||
|
<a href="https://portal.monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Portal</a>
|
||||||
|
</td>
|
||||||
|
<td style="padding: 0 10px; color: #cccccc;">|</td>
|
||||||
|
<td style="padding: 0 10px;">
|
||||||
|
<a href="mailto:admin@monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Admin Support</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<!-- Email Info -->
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top: 20px;">
|
||||||
|
<tr>
|
||||||
|
<td style="padding-top: 15px; border-top: 1px solid #dddddd;">
|
||||||
|
<p style="color: #999999; font-size: 12px; margin: 0;">
|
||||||
This is an automated test email to verify SMTP configuration.<br>
|
This is an automated test email to verify SMTP configuration.<br>
|
||||||
Generated by MonacoUSA Portal Email System
|
Generated by MonacoUSA Portal Email System
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</td>
|
||||||
</div>
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,165 +1,132 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<title>Verify Your Email - MonacoUSA</title>
|
<title>Verify Your Email - MonacoUSA</title>
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
line-height: 1.6;
|
|
||||||
color: #333;
|
|
||||||
margin: 0;
|
|
||||||
padding: 20px;
|
|
||||||
background-image: url('{{baseUrl}}/monaco_high_res.jpg');
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-attachment: fixed;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.email-container {
|
|
||||||
background: rgba(255, 255, 255, 0.95);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
padding: 40px;
|
|
||||||
border-radius: 12px;
|
|
||||||
box-shadow: 0 8px 25px rgba(163, 21, 21, 0.15);
|
|
||||||
max-width: 600px;
|
|
||||||
margin: 20px auto;
|
|
||||||
border: 1px solid rgba(163, 21, 21, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
border-bottom: 2px solid #a31515;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
color: #a31515;
|
|
||||||
font-size: 28px;
|
|
||||||
font-weight: bold;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle {
|
|
||||||
color: #666;
|
|
||||||
font-size: 16px;
|
|
||||||
margin: 10px 0 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.greeting {
|
|
||||||
font-size: 20px;
|
|
||||||
color: #a31515;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.verify-button {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 15px 30px;
|
|
||||||
background: linear-gradient(135deg, #a31515 0%, #c41e1e 100%);
|
|
||||||
color: white;
|
|
||||||
text-decoration: none;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 16px;
|
|
||||||
text-align: center;
|
|
||||||
margin: 20px 0;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.verify-button:hover {
|
|
||||||
background: linear-gradient(135deg, #8b1212 0%, #a31515 100%);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 4px 12px rgba(163, 21, 21, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 30px;
|
|
||||||
padding-top: 20px;
|
|
||||||
border-top: 1px solid #eee;
|
|
||||||
color: #666;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link {
|
|
||||||
color: #a31515;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
body {
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.email-container {
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.verify-button {
|
|
||||||
display: block;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body style="margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f4f4f4;">
|
||||||
<div class="email-container">
|
<!-- Main Container -->
|
||||||
<div class="header">
|
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f4f4f4; padding: 20px 0;">
|
||||||
<img src="{{logoUrl}}" alt="MonacoUSA" class="logo">
|
<tr>
|
||||||
<h1 class="title">Email Verification</h1>
|
<td align="center">
|
||||||
<p class="subtitle">Monaco - United States Association</p>
|
<!-- Email Container -->
|
||||||
</div>
|
<table width="600" cellpadding="0" cellspacing="0" border="0" style="background-color: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
|
||||||
|
|
||||||
<div class="content">
|
<!-- Header with Monaco Red Background -->
|
||||||
<div class="greeting">
|
<tr>
|
||||||
Dear {{firstName}},
|
<td style="background-color: #a31515; padding: 30px; text-align: center;">
|
||||||
</div>
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
|
<tr>
|
||||||
|
<td align="center">
|
||||||
|
<img src="{{logoUrl}}" alt="MonacoUSA" width="80" height="80" style="border-radius: 8px; margin-bottom: 15px;">
|
||||||
|
<h1 style="color: #ffffff; font-size: 28px; font-weight: bold; margin: 0 0 8px 0;">Email Verification</h1>
|
||||||
|
<p style="color: #ffffff; font-size: 16px; margin: 0; opacity: 0.9;">Monaco - United States Association</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
<p>Please verify your email address to complete your MonacoUSA account setup.</p>
|
<!-- Main Content -->
|
||||||
|
<tr>
|
||||||
|
<td style="padding: 40px 30px;">
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
|
|
||||||
<div style="text-align: center;">
|
<!-- Greeting -->
|
||||||
<a href="{{verificationLink}}" class="verify-button">
|
<tr>
|
||||||
|
<td style="padding-bottom: 20px;">
|
||||||
|
<h2 style="color: #a31515; font-size: 20px; font-weight: bold; margin: 0;">Dear {{firstName}},</h2>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<!-- Main Message -->
|
||||||
|
<tr>
|
||||||
|
<td style="padding-bottom: 30px;">
|
||||||
|
<p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0;">
|
||||||
|
Please verify your email address to complete your MonacoUSA account setup.
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<!-- Verification Button -->
|
||||||
|
<tr>
|
||||||
|
<td style="padding-bottom: 30px; text-align: center;">
|
||||||
|
<table cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto;">
|
||||||
|
<tr>
|
||||||
|
<td style="background-color: #a31515; padding: 15px 30px; border-radius: 6px;">
|
||||||
|
<a href="{{verificationLink}}" style="color: #ffffff; text-decoration: none; font-weight: bold; font-size: 16px; display: block;">
|
||||||
✉️ Verify Email Address
|
✉️ Verify Email Address
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
<p><em>This verification link will expire in 24 hours for security purposes.</em></p>
|
<!-- Important Info -->
|
||||||
|
<tr>
|
||||||
<p>If you didn't request this verification, please ignore this email.</p>
|
<td style="padding-bottom: 30px;">
|
||||||
</div>
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
|
<tr>
|
||||||
<div class="footer">
|
<td style="background-color: #fff3cd; border-left: 4px solid #ffc107; padding: 20px; border-radius: 4px;">
|
||||||
<p><strong>MonacoUSA Association</strong><br>
|
<p style="color: #856404; font-size: 14px; font-style: italic; margin: 0;">
|
||||||
Connecting Monaco and the United States</p>
|
<strong>Important:</strong> This verification link will expire in 24 hours for security purposes.
|
||||||
|
|
||||||
<p>
|
|
||||||
<a href="https://portal.monacousa.org" class="link">Portal</a> |
|
|
||||||
<a href="mailto:info@monacousa.org" class="link">Contact Us</a> |
|
|
||||||
<a href="https://monacousa.org" class="link">Website</a>
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</td>
|
||||||
</div>
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<!-- Security Notice -->
|
||||||
|
<tr>
|
||||||
|
<td style="padding-bottom: 20px;">
|
||||||
|
<p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0;">
|
||||||
|
If you didn't request this verification, please ignore this email.
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<tr>
|
||||||
|
<td style="background-color: #f8f9fa; padding: 30px; text-align: center; border-top: 1px solid #e9ecef;">
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<h4 style="color: #333333; font-size: 18px; font-weight: bold; margin: 0 0 8px 0;">MonacoUSA Association</h4>
|
||||||
|
<p style="color: #666666; font-size: 14px; margin: 0 0 15px 0;">Connecting Monaco and the United States</p>
|
||||||
|
|
||||||
|
<!-- Links -->
|
||||||
|
<table cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto;">
|
||||||
|
<tr>
|
||||||
|
<td style="padding: 0 10px;">
|
||||||
|
<a href="https://portal.monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Portal</a>
|
||||||
|
</td>
|
||||||
|
<td style="padding: 0 10px; color: #cccccc;">|</td>
|
||||||
|
<td style="padding: 0 10px;">
|
||||||
|
<a href="mailto:info@monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Contact Us</a>
|
||||||
|
</td>
|
||||||
|
<td style="padding: 0 10px; color: #cccccc;">|</td>
|
||||||
|
<td style="padding: 0 10px;">
|
||||||
|
<a href="https://monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Website</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,228 +1,293 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<title>Welcome to MonacoUSA</title>
|
<title>Welcome to MonacoUSA</title>
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
line-height: 1.6;
|
|
||||||
color: #333;
|
|
||||||
margin: 0;
|
|
||||||
padding: 20px;
|
|
||||||
background: linear-gradient(135deg, #a31515 0%, #8b1212 50%, #a31515 100%);
|
|
||||||
background-image: url('{{baseUrl}}/monaco_high_res.jpg');
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-attachment: fixed;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.email-container {
|
|
||||||
background: rgba(255, 255, 255, 0.95);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
padding: 40px;
|
|
||||||
border-radius: 12px;
|
|
||||||
box-shadow: 0 8px 25px rgba(163, 21, 21, 0.15);
|
|
||||||
max-width: 600px;
|
|
||||||
margin: 20px auto;
|
|
||||||
border: 1px solid rgba(163, 21, 21, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
border-bottom: 2px solid #a31515;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
color: #a31515;
|
|
||||||
font-size: 28px;
|
|
||||||
font-weight: bold;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle {
|
|
||||||
color: #666;
|
|
||||||
font-size: 16px;
|
|
||||||
margin: 10px 0 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.greeting {
|
|
||||||
font-size: 20px;
|
|
||||||
color: #a31515;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.member-info {
|
|
||||||
background: #f8f9fa;
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: 8px;
|
|
||||||
border-left: 4px solid #a31515;
|
|
||||||
margin: 20px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.member-info h3 {
|
|
||||||
color: #a31515;
|
|
||||||
margin: 0 0 10px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.verify-button {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 15px 30px;
|
|
||||||
background: linear-gradient(135deg, #a31515 0%, #c41e1e 100%);
|
|
||||||
color: white;
|
|
||||||
text-decoration: none;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 16px;
|
|
||||||
text-align: center;
|
|
||||||
margin: 20px 0;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.verify-button:hover {
|
|
||||||
background: linear-gradient(135deg, #8b1212 0%, #a31515 100%);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 4px 12px rgba(163, 21, 21, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.payment-info {
|
|
||||||
background: rgba(163, 21, 21, 0.05);
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid rgba(163, 21, 21, 0.1);
|
|
||||||
margin: 20px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.payment-info h3 {
|
|
||||||
color: #a31515;
|
|
||||||
margin: 0 0 15px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 30px;
|
|
||||||
padding-top: 20px;
|
|
||||||
border-top: 1px solid #eee;
|
|
||||||
color: #666;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link {
|
|
||||||
color: #a31515;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
body {
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.email-container {
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.verify-button {
|
|
||||||
display: block;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body style="margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f4f4f4;">
|
||||||
<div class="email-container">
|
<!-- Main Container -->
|
||||||
<div class="header">
|
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f4f4f4; padding: 20px 0;">
|
||||||
<img src="{{logoUrl}}" alt="MonacoUSA" class="logo">
|
<tr>
|
||||||
<h1 class="title">Welcome to MonacoUSA</h1>
|
<td align="center">
|
||||||
<p class="subtitle">Monaco - United States Association</p>
|
<!-- Email Container -->
|
||||||
</div>
|
<table width="600" cellpadding="0" cellspacing="0" border="0" style="background-color: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
|
||||||
|
|
||||||
<div class="content">
|
<!-- Header with Monaco Red Background -->
|
||||||
<div class="greeting">
|
<tr>
|
||||||
Dear {{firstName}} {{lastName}},
|
<td style="background-color: #a31515; padding: 30px; text-align: center;">
|
||||||
</div>
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
|
<tr>
|
||||||
|
<td align="center">
|
||||||
|
<img src="{{logoUrl}}" alt="MonacoUSA" width="80" height="80" style="border-radius: 8px; margin-bottom: 15px;">
|
||||||
|
<h1 style="color: #ffffff; font-size: 28px; font-weight: bold; margin: 0 0 8px 0;">Welcome to MonacoUSA</h1>
|
||||||
|
<p style="color: #ffffff; font-size: 16px; margin: 0; opacity: 0.9;">Monaco - United States Association</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
<p>Thank you for registering to become a member of the <strong>MonacoUSA Association</strong>! We're excited to welcome you to our community that bridges Monaco and the United States.</p>
|
<!-- Main Content -->
|
||||||
|
<tr>
|
||||||
|
<td style="padding: 40px 30px;">
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
|
|
||||||
<div class="member-info">
|
<!-- Greeting -->
|
||||||
<h3>🎉 Registration Successful</h3>
|
<tr>
|
||||||
<p><strong>Member ID:</strong> {{memberId}}</p>
|
<td style="padding-bottom: 20px;">
|
||||||
<p><strong>Registration Date:</strong> {{registrationDate}}</p>
|
<h2 style="color: #a31515; font-size: 20px; font-weight: bold; margin: 0;">Dear {{firstName}} {{lastName}},</h2>
|
||||||
<p>Your membership application has been received and is being processed.</p>
|
</td>
|
||||||
</div>
|
</tr>
|
||||||
|
|
||||||
<h3>📧 Next Step: Verify Your Email</h3>
|
<!-- Welcome Message -->
|
||||||
<p>To complete your registration and activate your account, please verify your email address by clicking the button below:</p>
|
<tr>
|
||||||
|
<td style="padding-bottom: 30px;">
|
||||||
|
<p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0;">
|
||||||
|
Thank you for registering to become a member of the <strong>MonacoUSA Association</strong>!
|
||||||
|
We're excited to welcome you to our community that bridges Monaco and the United States.
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
<div style="text-align: center;">
|
<!-- Registration Success Box -->
|
||||||
<a href="{{verificationLink}}" class="verify-button">
|
<tr>
|
||||||
|
<td style="padding-bottom: 30px;">
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f8f9fa; border: 1px solid #e9ecef; border-radius: 6px;">
|
||||||
|
<tr>
|
||||||
|
<td style="padding: 25px;">
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
|
<tr>
|
||||||
|
<td style="text-align: center; padding-bottom: 15px;">
|
||||||
|
<span style="background-color: #28a745; color: #ffffff; padding: 8px 16px; border-radius: 20px; font-weight: bold; font-size: 14px;">🎉 Registration Successful</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
|
<tr>
|
||||||
|
<td width="50%" style="vertical-align: top; padding-right: 10px;">
|
||||||
|
<p style="margin: 0 0 8px 0; color: #333333; font-weight: bold;">Member ID:</p>
|
||||||
|
<p style="margin: 0; color: #a31515; font-weight: bold; font-size: 18px;">{{memberId}}</p>
|
||||||
|
</td>
|
||||||
|
<td width="50%" style="vertical-align: top; padding-left: 10px;">
|
||||||
|
<p style="margin: 0 0 8px 0; color: #333333; font-weight: bold;">Registration Date:</p>
|
||||||
|
<p style="margin: 0; color: #333333; font-size: 16px;">{{registrationDate}}</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td style="padding-top: 15px;">
|
||||||
|
<p style="margin: 0; color: #666666; font-size: 14px;">
|
||||||
|
Your membership application has been received and is being processed.
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<!-- Next Step: Verify Email -->
|
||||||
|
<tr>
|
||||||
|
<td style="padding-bottom: 30px;">
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
|
<tr>
|
||||||
|
<td style="background-color: #e3f2fd; border-left: 4px solid #2196f3; padding: 20px; border-radius: 4px;">
|
||||||
|
<h3 style="color: #1976d2; font-size: 18px; font-weight: bold; margin: 0 0 10px 0;">📧 Next Step: Verify Your Email</h3>
|
||||||
|
<p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0 0 15px 0;">
|
||||||
|
To complete your registration and activate your account, please verify your email address by clicking the button below:
|
||||||
|
</p>
|
||||||
|
<table cellpadding="0" cellspacing="0" border="0">
|
||||||
|
<tr>
|
||||||
|
<td style="text-align: center; padding: 15px 0;">
|
||||||
|
<a href="{{verificationLink}}" style="background-color: #a31515; color: #ffffff; text-decoration: none; padding: 15px 30px; border-radius: 6px; font-weight: bold; font-size: 16px; display: inline-block;">
|
||||||
✉️ Verify Email Address
|
✉️ Verify Email Address
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</td>
|
||||||
|
</tr>
|
||||||
<p><em>This verification link will expire in 24 hours for security purposes.</em></p>
|
</table>
|
||||||
|
<p style="color: #666666; font-size: 14px; font-style: italic; margin: 15px 0 0 0;">
|
||||||
<div class="payment-info">
|
This verification link will expire in 24 hours for security purposes.
|
||||||
<h3>💳 Membership Dues Payment</h3>
|
|
||||||
<p>Once your email is verified, you'll be able to log in to the portal. To activate your membership, please transfer your annual membership dues:</p>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li><strong>Amount:</strong> €150/year</li>
|
|
||||||
<li><strong>Payment method:</strong> Bank transfer (details in your portal)</li>
|
|
||||||
<li><strong>Status:</strong> Your account will be activated once payment is verified</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<p><em>You can find complete payment instructions in your member portal after verification.</em></p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3>🌟 What's Next?</h3>
|
|
||||||
<ol>
|
|
||||||
<li><strong>Verify your email</strong> using the button above</li>
|
|
||||||
<li><strong>Log in to your portal</strong> at <a href="https://portal.monacousa.org" class="link">portal.monacousa.org</a></li>
|
|
||||||
<li><strong>Complete your payment</strong> to activate your membership</li>
|
|
||||||
<li><strong>Enjoy member benefits</strong> and connect with our community</li>
|
|
||||||
</ol>
|
|
||||||
|
|
||||||
<p>If you have any questions, please don't hesitate to contact us. We're here to help!</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="footer">
|
|
||||||
<p><strong>MonacoUSA Association</strong><br>
|
|
||||||
Connecting Monaco and the United States</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
<a href="https://portal.monacousa.org" class="link">Portal</a> |
|
|
||||||
<a href="mailto:info@monacousa.org" class="link">Contact Us</a> |
|
|
||||||
<a href="https://monacousa.org" class="link">Website</a>
|
|
||||||
</p>
|
</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
<p style="margin-top: 20px; font-size: 12px; color: #999;">
|
<!-- Membership Dues Payment -->
|
||||||
This email was sent to {{email}} regarding your MonacoUSA membership registration.<br>
|
<tr>
|
||||||
|
<td style="padding-bottom: 30px;">
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
|
<tr>
|
||||||
|
<td style="background-color: #fff3cd; border-left: 4px solid #ffc107; padding: 20px; border-radius: 4px;">
|
||||||
|
<h3 style="color: #856404; font-size: 18px; font-weight: bold; margin: 0 0 10px 0;">💳 Membership Dues Payment</h3>
|
||||||
|
<p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0 0 15px 0;">
|
||||||
|
Once your email is verified, you'll be able to log in to the portal. To activate your membership, please transfer your annual membership dues:
|
||||||
|
</p>
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
|
<tr>
|
||||||
|
<td width="33%" style="vertical-align: top; padding-right: 10px;">
|
||||||
|
<p style="margin: 0 0 5px 0; color: #333333; font-weight: bold;">Amount:</p>
|
||||||
|
<p style="margin: 0; color: #333333;">€150/year</p>
|
||||||
|
</td>
|
||||||
|
<td width="33%" style="vertical-align: top; padding: 0 5px;">
|
||||||
|
<p style="margin: 0 0 5px 0; color: #333333; font-weight: bold;">Payment method:</p>
|
||||||
|
<p style="margin: 0; color: #333333;">Bank transfer (details in your portal)</p>
|
||||||
|
</td>
|
||||||
|
<td width="33%" style="vertical-align: top; padding-left: 10px;">
|
||||||
|
<p style="margin: 0 0 5px 0; color: #333333; font-weight: bold;">Status:</p>
|
||||||
|
<p style="margin: 0; color: #333333;">Your account will be activated once payment is verified</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
<p style="color: #666666; font-size: 14px; font-style: italic; margin: 15px 0 0 0;">
|
||||||
|
You can find complete payment instructions in your member portal after verification.
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<!-- What's Next -->
|
||||||
|
<tr>
|
||||||
|
<td style="padding-bottom: 30px;">
|
||||||
|
<h3 style="color: #a31515; font-size: 18px; font-weight: bold; margin: 0 0 15px 0;">⭐ What's Next?</h3>
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
|
<tr>
|
||||||
|
<td style="padding: 5px 0; border-bottom: 1px solid #eeeeee;">
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
|
<tr>
|
||||||
|
<td width="30" style="vertical-align: top; padding-right: 10px;">
|
||||||
|
<span style="background-color: #a31515; color: #ffffff; border-radius: 50%; width: 24px; height: 24px; display: inline-block; text-align: center; line-height: 24px; font-weight: bold; font-size: 14px;">1</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<p style="margin: 0; color: #333333; font-size: 16px;">
|
||||||
|
<strong>Verify your email</strong> using the button above
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td style="padding: 5px 0; border-bottom: 1px solid #eeeeee;">
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
|
<tr>
|
||||||
|
<td width="30" style="vertical-align: top; padding-right: 10px;">
|
||||||
|
<span style="background-color: #a31515; color: #ffffff; border-radius: 50%; width: 24px; height: 24px; display: inline-block; text-align: center; line-height: 24px; font-weight: bold; font-size: 14px;">2</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<p style="margin: 0; color: #333333; font-size: 16px;">
|
||||||
|
<strong>Log in to your portal</strong> at portal.monacousa.org
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td style="padding: 5px 0; border-bottom: 1px solid #eeeeee;">
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
|
<tr>
|
||||||
|
<td width="30" style="vertical-align: top; padding-right: 10px;">
|
||||||
|
<span style="background-color: #a31515; color: #ffffff; border-radius: 50%; width: 24px; height: 24px; display: inline-block; text-align: center; line-height: 24px; font-weight: bold; font-size: 14px;">3</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<p style="margin: 0; color: #333333; font-size: 16px;">
|
||||||
|
<strong>Complete your payment</strong> to activate your membership
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td style="padding: 5px 0;">
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
|
<tr>
|
||||||
|
<td width="30" style="vertical-align: top; padding-right: 10px;">
|
||||||
|
<span style="background-color: #a31515; color: #ffffff; border-radius: 50%; width: 24px; height: 24px; display: inline-block; text-align: center; line-height: 24px; font-weight: bold; font-size: 14px;">4</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<p style="margin: 0; color: #333333; font-size: 16px;">
|
||||||
|
<strong>Enjoy member benefits</strong> and connect with our community
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<!-- Help Message -->
|
||||||
|
<tr>
|
||||||
|
<td style="padding-bottom: 20px;">
|
||||||
|
<p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0;">
|
||||||
|
If you have any questions, please don't hesitate to contact us. We're here to help!
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<tr>
|
||||||
|
<td style="background-color: #f8f9fa; padding: 30px; text-align: center; border-top: 1px solid #e9ecef;">
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<h4 style="color: #333333; font-size: 18px; font-weight: bold; margin: 0 0 8px 0;">MonacoUSA Association</h4>
|
||||||
|
<p style="color: #666666; font-size: 14px; margin: 0 0 15px 0;">Connecting Monaco and the United States</p>
|
||||||
|
|
||||||
|
<!-- Links -->
|
||||||
|
<table cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto;">
|
||||||
|
<tr>
|
||||||
|
<td style="padding: 0 10px;">
|
||||||
|
<a href="https://portal.monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Portal</a>
|
||||||
|
</td>
|
||||||
|
<td style="padding: 0 10px; color: #cccccc;">|</td>
|
||||||
|
<td style="padding: 0 10px;">
|
||||||
|
<a href="mailto:info@monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Contact Us</a>
|
||||||
|
</td>
|
||||||
|
<td style="padding: 0 10px; color: #cccccc;">|</td>
|
||||||
|
<td style="padding: 0 10px;">
|
||||||
|
<a href="https://monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Website</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<!-- Email Info -->
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top: 20px;">
|
||||||
|
<tr>
|
||||||
|
<td style="padding-top: 15px; border-top: 1px solid #dddddd;">
|
||||||
|
<p style="color: #999999; font-size: 12px; margin: 0;">
|
||||||
|
This email was sent to <strong>{{email}}</strong> regarding your MonacoUSA membership registration.<br>
|
||||||
If you did not register for this account, please ignore this email.
|
If you did not register for this account, please ignore this email.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</td>
|
||||||
</div>
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue