Example HTML template to use in SNStoSES.py. Uses `{{handlebars}}` variables for flexibility.

template.html

<!--
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>