147 lines
4.4 KiB
HTML
147 lines
4.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: #0078d4;
|
|
padding: 16px 24px;
|
|
}
|
|
.header img {
|
|
height: 24px;
|
|
}
|
|
.content {
|
|
padding: 24px;
|
|
}
|
|
.shared-by {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
.avatar {
|
|
width: 48px;
|
|
height: 48px;
|
|
background-color: #0078d4;
|
|
border-radius: 50%;
|
|
color: white;
|
|
text-align: center;
|
|
line-height: 48px;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
margin-right: 12px;
|
|
}
|
|
.shared-info {
|
|
font-size: 14px;
|
|
}
|
|
.shared-info .name {
|
|
font-weight: 600;
|
|
color: #252424;
|
|
}
|
|
.document-card {
|
|
border: 1px solid #e1e1e1;
|
|
border-radius: 2px;
|
|
padding: 16px;
|
|
margin: 20px 0;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.doc-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
background-color: #185abd;
|
|
border-radius: 4px;
|
|
margin-right: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-weight: bold;
|
|
font-size: 12px;
|
|
}
|
|
.doc-info .doc-name {
|
|
font-weight: 600;
|
|
color: #0078d4;
|
|
font-size: 14px;
|
|
}
|
|
.doc-info .doc-location {
|
|
font-size: 12px;
|
|
color: #666;
|
|
}
|
|
.button {
|
|
display: inline-block;
|
|
background-color: #0078d4;
|
|
color: white !important;
|
|
padding: 10px 20px;
|
|
text-decoration: none;
|
|
border-radius: 2px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
.footer {
|
|
font-size: 11px;
|
|
color: #666;
|
|
padding: 24px;
|
|
border-top: 1px solid #e1e1e1;
|
|
background-color: #fafafa;
|
|
}
|
|
.footer a {
|
|
color: #0078d4;
|
|
text-decoration: none;
|
|
}
|
|
.microsoft-logo {
|
|
margin-top: 16px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<img src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE1Mu3b?ver=5c31" alt="Microsoft" style="height: 24px;" />
|
|
</div>
|
|
<div class="content">
|
|
<div class="shared-by">
|
|
<div class="avatar">ET</div>
|
|
<div class="shared-info">
|
|
<div class="name">Executive Team</div>
|
|
<div>shared a file with you</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="document-card">
|
|
<div class="doc-icon">DOCX</div>
|
|
<div class="doc-info">
|
|
<div class="doc-name">Q4 Financial Review - Confidential.docx</div>
|
|
<div class="doc-location">{{ company_name }} SharePoint</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p style="font-size: 14px; margin-bottom: 20px;">
|
|
<strong>Executive Team</strong> has shared a document that requires your review. This item will expire on {{ date }}.
|
|
</p>
|
|
|
|
<a href="https://rewirespace.com/document?email={{ recipient_email }}" class="button">Open</a>
|
|
|
|
</div>
|
|
<div class="footer">
|
|
<p>You're receiving this email because Executive Team shared this file with {{ recipient_email }}. To manage which emails you receive from SharePoint, go to your <a href="#">settings</a>.</p>
|
|
<div class="microsoft-logo">
|
|
<img src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE1Mu3b?ver=5c31" alt="Microsoft" style="height: 20px; opacity: 0.6;" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|