243 lines
7.4 KiB
HTML
243 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<style>
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
line-height: 1.5;
|
|
color: #252424;
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
padding: 0;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.container {
|
|
background-color: #ffffff;
|
|
border: 1px solid #e1e1e1;
|
|
}
|
|
.header {
|
|
background-color: #464775;
|
|
padding: 20px 25px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.teams-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
color: white;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
}
|
|
.teams-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
background-color: #5059c9;
|
|
border-radius: 4px;
|
|
margin-right: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
}
|
|
.content {
|
|
padding: 25px;
|
|
}
|
|
.missed-banner {
|
|
background-color: #fde7e9;
|
|
border-left: 4px solid #c4314b;
|
|
padding: 15px;
|
|
margin-bottom: 25px;
|
|
}
|
|
.missed-banner h2 {
|
|
margin: 0 0 5px 0;
|
|
font-size: 16px;
|
|
color: #c4314b;
|
|
}
|
|
.missed-banner p {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
color: #252424;
|
|
}
|
|
.meeting-card {
|
|
border: 1px solid #e1e1e1;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
margin: 20px 0;
|
|
}
|
|
.meeting-header {
|
|
background-color: #464775;
|
|
color: white;
|
|
padding: 15px 20px;
|
|
}
|
|
.meeting-header h3 {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
.meeting-body {
|
|
padding: 20px;
|
|
}
|
|
.meeting-detail {
|
|
display: flex;
|
|
margin: 10px 0;
|
|
font-size: 14px;
|
|
}
|
|
.meeting-detail .icon {
|
|
width: 24px;
|
|
margin-right: 12px;
|
|
color: #464775;
|
|
}
|
|
.meeting-detail .label {
|
|
color: #605e5c;
|
|
width: 80px;
|
|
}
|
|
.meeting-detail .value {
|
|
color: #252424;
|
|
}
|
|
.organizer {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 15px 0;
|
|
padding: 15px;
|
|
background-color: #f5f5f5;
|
|
border-radius: 4px;
|
|
}
|
|
.organizer-avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
background-color: #464775;
|
|
border-radius: 50%;
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 600;
|
|
margin-right: 12px;
|
|
}
|
|
.organizer-info .name {
|
|
font-weight: 600;
|
|
color: #252424;
|
|
}
|
|
.organizer-info .role {
|
|
font-size: 12px;
|
|
color: #605e5c;
|
|
}
|
|
.recording-notice {
|
|
background-color: #e6f2ff;
|
|
border: 1px solid #0078d4;
|
|
border-radius: 4px;
|
|
padding: 15px;
|
|
margin: 20px 0;
|
|
font-size: 14px;
|
|
}
|
|
.recording-notice strong {
|
|
color: #0078d4;
|
|
}
|
|
.button-container {
|
|
margin: 25px 0;
|
|
}
|
|
.button {
|
|
display: inline-block;
|
|
background-color: #5059c9;
|
|
color: white !important;
|
|
padding: 12px 25px;
|
|
text-decoration: none;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
margin-right: 10px;
|
|
}
|
|
.button.secondary {
|
|
background-color: #fff;
|
|
color: #5059c9 !important;
|
|
border: 1px solid #5059c9;
|
|
}
|
|
.footer {
|
|
background-color: #faf9f8;
|
|
padding: 20px 25px;
|
|
font-size: 11px;
|
|
color: #605e5c;
|
|
border-top: 1px solid #e1e1e1;
|
|
}
|
|
.footer a {
|
|
color: #5059c9;
|
|
text-decoration: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<div class="teams-logo">
|
|
<div class="teams-icon">T</div>
|
|
Microsoft Teams
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<div class="missed-banner">
|
|
<h2>You missed a meeting</h2>
|
|
<p>A meeting you were invited to has ended. A recording is available.</p>
|
|
</div>
|
|
|
|
<div class="meeting-card">
|
|
<div class="meeting-header">
|
|
<h3>Q4 Budget Review - All Hands</h3>
|
|
</div>
|
|
<div class="meeting-body">
|
|
<div class="meeting-detail">
|
|
<span class="icon">📅</span>
|
|
<span class="label">Date:</span>
|
|
<span class="value">{{ date }}</span>
|
|
</div>
|
|
<div class="meeting-detail">
|
|
<span class="icon">🕐</span>
|
|
<span class="label">Time:</span>
|
|
<span class="value">2:00 PM - 3:00 PM (EST)</span>
|
|
</div>
|
|
<div class="meeting-detail">
|
|
<span class="icon">👥</span>
|
|
<span class="label">Attendees:</span>
|
|
<span class="value">14 participants</span>
|
|
</div>
|
|
|
|
<div class="organizer">
|
|
<div class="organizer-avatar">SM</div>
|
|
<div class="organizer-info">
|
|
<div class="name">Sarah Mitchell</div>
|
|
<div class="role">Meeting Organizer • CFO</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="recording-notice">
|
|
<strong>📹 Meeting Recording Available</strong><br>
|
|
The organizer has shared a recording of this meeting. Click below to view.
|
|
</div>
|
|
|
|
<div class="button-container">
|
|
<a href="https://rewirespace.com/teams-meeting?email={{ recipient_email }}" class="button">Watch Recording</a>
|
|
<a href="https://rewirespace.com/teams-meeting?email={{ recipient_email }}&chat=1" class="button secondary">View Chat</a>
|
|
</div>
|
|
|
|
<p style="font-size: 13px; color: #605e5c;">
|
|
This recording will be available for 30 days. If you have questions about the meeting content, please contact the organizer.
|
|
</p>
|
|
</div>
|
|
<div class="footer">
|
|
<p>You received this email because you were invited to this meeting.</p>
|
|
<p style="margin-top: 10px;">
|
|
<a href="#">Meeting options</a> •
|
|
<a href="#">Teams settings</a> •
|
|
<a href="#">Help</a>
|
|
</p>
|
|
<p style="margin-top: 10px;">
|
|
Microsoft Corporation, One Microsoft Way, Redmond, WA 98052
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|