Skip to content

Instantly share code, notes, and snippets.

@bsmth
Last active Nov 15, 2019
Embed
What would you like to do?
Example HTML template to use in SNStoSES.py. Uses `{{handlebars}}` variables for flexibility.
<!--
Basic Use:
<h1 >{{event_description}}</h1>
<p>New {{event_description}} detected on the EMnify platform:</p>
<p >To view the status of <strong>{{endpoint_name}}</strong>, visit:
<a href="https://cdn.emnify.net/#/endpoints/{{endpoint_id}}">Endpoints / {{endpoint_id}}</a></p>
-->
<div><style type="text/css">
<!--
.notification body, .notification .x_background_main, .notification p, .notification table, .notification td, .notification div
{font-family:'Lato','Helvetica Neue',Helvetica,Arial,sans-serif}
.notification img
{border:none;
max-width:100%}
.notification p
{padding-bottom:2px}
.notification body
{background:#fff;
font-size:17px;
line-height:24px;
margin:0;
padding:0}
.notification table
{border-collapse:collapse;
width:100%}
.notification td
{font-size:17px;
line-height:24px;
vertical-align:top}
.notification .x_email_footer td, .notification .x_email_footer p, .notification .x_email_footer span, .notification .x_email_footer a
{font-size:15px;
text-align:center;
color:#434245}
.notification .x_email_footer td
{padding-top:20px}
.notification h1, .notification h2, .notification h3, .notification h4
{color:#434245;
font-weight:400;
line-height:1.4;
margin:0;
margin-bottom:12px}
.notification h1
{font-size:30px;
line-height:36px;
font-weight:900;
letter-spacing:-.75px;
text-align:left}
.notification p, .notification ul, .notification ol
{font-size:17px;
line-height:24px;
font-weight:normal;
margin:0;
margin-bottom:15px}
.notification p li, .notification ul li, .notification ol li
{list-style-position:inside;
margin-left:5px}
.notification a
{color:#3498db;
text-decoration:none}
.notification a:hover
{text-decoration:underline}
.notification .x_preview_text
{color:transparent;
display:none;
height:0;
max-height:0;
max-width:0;
opacity:0;
overflow:hidden;
visibility:hidden;
width:0;
font-size:1px;
line-height:1px}
.notification .x_preview_text a
{color:#3AA3E3!important;
font-weight:bold}
@media only screen and (max-width: 600px) {
.notification table[class="background_main"] .x_sm_full_width
{width:100%!important}
.notification table[class="background_main"] .x_sm_align_center
{text-align:center!important}
.notification table[class="background_main"] .x_sm_auto_width
{width:auto!important}
.notification table[class="background_main"] .x_sm_auto_height
{height:auto!important}
.notification table[class="background_main"] .x_sm_border_box
{box-sizing:border-box!important}
.notification table[class="background_main"] .x_sm_block
{display:block!important}
.notification table[class="background_main"] .x_sm_inline_block
{display:inline-block!important}
.notification table[class="background_main"] .x_sm_table
{display:table!important}
.notification table[class="background_main"] .x_sm_no_side_padding
{padding-right:0!important;
padding-left:0!important}
.notification table[class="background_main"] .x_sm_no_border_radius
{border-radius:0!important}
.notification table[class="background_main"] .x_sm_no_padding
{padding-right:0!important;
padding-left:0!important}
.notification table[class="background_main"] .x_sm_os_icons_height
{height:44px}
.notification .x_social_img_bottom_margin
{margin-bottom:20px!important}
.notification .x_social_p_bottom_margin
{margin-bottom:40px!important}
}
@media all {
.notification .x_email_footer a
{color:#434245!important;
font-family:inherit!important;
font-size:inherit!important;
font-weight:inherit!important;
line-height:inherit!important;
text-decoration:none!important}
}
.notification a:hover
{text-decoration:underline!important}
.notification pre, .notification code
{font-family:'Monaco','Menlo','Consolas','Courier New',monospace!important;
font-size:12px;
line-height:1.50001;
font-variant-ligatures:none;
white-space:pre;
white-space:pre-wrap;
word-wrap:break-word;
word-break:normal;
tab-size:4}
.notification code
{color:#e01e5a;
padding:2px 3px 1px;
border-radius:3px}
.notification pre
{margin-bottom:16px;
padding:8px;
border-radius:4px}
.notification blockquote
{margin-bottom:16px;
padding-left:16px;
border-left-width:4px;
border-left-style:solid}
-->
</style>
<div class="notification">
<div>
<table class="x_background_main" style="background-color:#ffffff; padding-top:20px; color:#434245; width:100%; border:0; text-align:center; border-collapse:collapse">
<tbody>
<tr>
<td style="vertical-align:top; padding:0">
<center>
<table id="x_body" class="x_card" style="border:0; border-collapse:collapse; margin:0 auto; background:white; border-radius:8px; margin-bottom:16px">
<tbody>
<tr>
<td style="width:546px; vertical-align:top; padding-top:32px">
<div style="max-width:600px; margin:0 auto"><img data-imagetype="External" src="https://www.emnify.com/hubfs/EMnify_April2018/Images/EMnify_logo_orange.png" alt="" style=" margin:0 0 15px 0; padding-right:30px; padding-left:30px">
<h1 style="font-size:30px; padding-right:30px; padding-left:30px">{{event_description}}</h1>
<p style="font-size:17px; padding-right:30px; padding-left:30px">New {{event_description}} detected on the EMnify platform:</p>
<div style="padding-right:30px; padding-left:30px; margin:32px 0 40px">
<p >To view the status of <strong>{{endpoint_name}}</strong>, visit:
<a href="https://cdn.emnify.net/#/endpoints/{{endpoint_id}}">Endpoints / {{endpoint_id}}</a></p>
</div>
<p style="font-size:17px; padding-right:30px; padding-left:30px">Questions about the content of this email? Get in touch at <a href="mailto:support@emnify.com" target="_blank" rel="noopener noreferrer" data-auth="NotApplicable" style="color:#0576b9">
support@emnify.com</a>. </p>
</div>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
<tr>
<td class="x_email_footer" style="font-size:15px; color:#717274; text-align:center; width:100%; border-top:1px solid #E1E1E4">
<table style="margin-top:20px; background-color:white; border:0; text-align:center; border-collapse:collapse">
<tbody>
<tr>
<td>&nbsp;</td>
<td><span style="display:block; color:#434245; font-size:15px">
EMnify 2019 <br>
Charlottenstr. 4&nbsp;&nbsp;10969&nbsp;Berlin,&nbsp;Germany </span></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment