Skip to content

Instantly share code, notes, and snippets.

@gangstaJS

gangstaJS/anomaly-email.html

Created December 17, 2019 15:04
Show Gist options
  • Save gangstaJS/5f5f358c5cd3343a1031157e9756ae57 to your computer and use it in GitHub Desktop.
Save gangstaJS/5f5f358c5cd3343a1031157e9756ae57 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
anomaly-email.html
<!DOCTYPE html>
<html lang="en" style="padding: 0;margin: 0;">
<head style="padding: 0;margin: 0;">
<title style="padding: 0;margin: 0;">Anomalies email template</title>
<link rel="stylesheet" href="/styles.css" style="padding: 0;margin: 0;">
<style style="padding: 0;margin: 0;">
* {
padding: 0;
margin: 0; }
.wrapper {
color: #616161;
font-family: arial;
margin: 0 auto;
max-width: 920px;
min-height: 100px;
padding: 10px; }
.main-title {
font-size: 27px;
padding: 10px 0; }
.top-label-block {
background: url("/top_bg.jpg") center center no-repeat;
background-size: cover;
min-height: 200px;
position: relative;
display: block; }
.top-label-block__text {
color: #fff;
background: #ffbe5a;
position: absolute;
left: 0;
top: 30px;
font-size: 20px;
text-align: center;
padding: 10px; }
.top-label-block__logo {
background: #fff;
text-align: center;
width: 80px;
height: 80px;
position: absolute;
right: 30px;
padding: 5px;
top: 0; }
.top-label-block__logo > img {
width: 80px;
height: 80px; }
.content {
margin-top: 20px; }
.get-file-wrapper {
text-align: center;
margin: 20px 0; }
.get-file-wrapper > a {
color: #43a047;
display: inline-block;
text-decoration: none; }
.get-file-wrapper > a > i {
background: url("/download.svg") center center no-repeat;
background-size: cover;
width: 30px;
height: 30px;
display: inline-block;
position: relative;
top: 8px; }
.get-file-wrapper > a > span {
border-bottom: 1px solid #43a047; }
.sum__title {
font-size: 19px;
color: #43a047;
font-weight: bold; }
.sum__table {
margin-top: 5px;
width: 100%; }
.sum__table thead tr td {
color: #fff;
background: #a6a6a6;
padding: 10px; }
.sum__table tbody > tr td {
background: #f2f2f2;
padding: 10px; }
.sum__table tbody > tr td > a {
color: #616161; }
.btn {
color: #616161;
text-transform: uppercase;
border-radius: 3px;
text-align: center;
display: inline-block;
padding: 10px 25px;
text-decoration: none; }
.btn__primary {
color: #fff;
background: #43a047; }
.center-text {
text-align: center; }
.info {
margin-bottom: 15px; }
.info-img-tbl {
width: 100%;
margin-bottom: 5px; }
.info-img-tbl .tdh-1 {
background: #3a9d2c; }
.info-img-tbl .tdh-2 {
background: #4eca33; }
.info-img-tbl .tdh-1, .info-img-tbl .tdh-2 {
color: #fff;
padding: 10px; }
.info-img-tbl .tdh-1 .tdh-sub, .info-img-tbl .tdh-2 .tdh-sub {
font-size: 13px;
margin-bottom: 5px; }
.info-img-tbl .tdh-1 .tdh-sub + div, .info-img-tbl .tdh-2 .tdh-sub + div {
font-weight: bold; }
.info-img-tbl tbody tr td img {
width: 300px;
height: auto;
padding: 10px; }
.priority {
border-radius: 3px;
display: inline-block;
background: #fff;
text-transform: uppercase;
font-style: normal;
font-size: 16px;
padding: 5px 10px; }
.priority--low {
color: #3a9d2c;
border: 1px solid #3a9d2c; }
.priority--low {
color: #3a9d2c;
border: 1px solid #3a9d2c; }
.priority--new {
color: #616161;
background: #fff2cc;
border: 1px solid #616161; }
.priority--med {
color: #d88e60;
border: 1px solid #d88e60; }
.priority--high {
color: red;
border: 1px solid red; }
.arrow {
width: 10px;
height: 25px;
display: inline-block;
position: relative;
top: 5px; }
.arrow--up {
background: url("/arrow_up.svg") center center no-repeat;
background-size: cover; }
.arrow--down {
background: url("/arrow_down.svg") center center no-repeat;
background-size: cover; }
</style>
</head>
<body style="padding: 0;margin: 0;">
<div class="wrapper" style="padding: 10px;margin: 0 auto;color: #616161;font-family: arial;max-width: 920px;min-height: 100px;">
<div class="main-title" style="padding: 10px 0;margin: 0;font-size: 27px;">FluroSense Crop Stress Alert - 05 HOME Farm</div>
<div class="top-label-block" style="padding: 0;margin: 0;background: url(/top_bg.jpg) center center no-repeat;background-size: cover;min-height: 200px;position: relative;display: block;">
<div class="top-label-block__text" style="padding: 10px;margin: 0;color: #fff;background: #ffbe5a;position: absolute;left: 0;top: 30px;font-size: 20px;text-align: center;">Crop Stress Detection</div>
<a href="https://flurosense.com/app/login" class="top-label-block__logo" style="padding: 5px;margin: 0;background: #fff;text-align: center;width: 80px;height: 80px;position: absolute;right: 30px;top: 0;">
<img src="/fs_logo.png" alt="flurosense logo" style="padding: 0;margin: 0;width: 80px;height: 80px;">
</a>
</div>
<div class="content" style="padding: 0;margin: 0;margin-top: 20px;">
<p style="padding: 0;margin: 0;">
Hi,<br style="padding: 0;margin: 0;">
Your FluroSense anomaly alert on <b style="padding: 0;margin: 0;">05 HOME</b> farm - 19 July 2019
</p>
<div class="get-file-wrapper" style="padding: 0;margin: 20px 0;text-align: center;">
<a href="https://flurosense.com" style="padding: 0;margin: 0;color: #43a047;display: inline-block;text-decoration: none;">
<i style="padding: 0;margin: 0;background: url(/download.svg) center center no-repeat;background-size: cover;width: 30px;height: 30px;display: inline-block;position: relative;top: 8px;"></i>
<span style="padding: 0;margin: 0;border-bottom: 1px solid #43a047;">PDF version</span>
</a>
</div>
<div class="sum" style="padding: 0;margin: 0;">
<div class="sum__title" style="padding: 0;margin: 0;font-size: 19px;color: #43a047;font-weight: bold;">Alerts Summary</div>
<table class="sum__table" style="padding: 0;margin: 0;margin-top: 5px;width: 100%;">
<thead style="padding: 0;margin: 0;">
<tr style="padding: 0;margin: 0;">
<td style="padding: 10px;margin: 0;color: #fff;background: #a6a6a6;">Fields Alerts</td>
<td style="padding: 10px;margin: 0;color: #fff;background: #a6a6a6;">Alerts (area)</td>
<td style="padding: 10px;margin: 0;color: #fff;background: #a6a6a6;">Last capture date</td>
</tr>
</thead>
<tbody style="padding: 0;margin: 0;">
<tr style="padding: 0;margin: 0;">
<td style="padding: 10px;margin: 0;background: #f2f2f2;"><a href="https://flurosense.com" style="padding: 0;margin: 0;color: #616161;">23 TOP PD</a></td>
<td style="padding: 10px;margin: 0;background: #f2f2f2;">3 0.5 (ac)</td>
<td style="padding: 10px;margin: 0;background: #f2f2f2;">14 Sep 2019</td>
</tr>
<tr style="padding: 0;margin: 0;">
<td style="padding: 10px;margin: 0;background: #f2f2f2;"><a href="https://flurosense.com" style="padding: 0;margin: 0;color: #616161;">23 TOP PD</a></td>
<td style="padding: 10px;margin: 0;background: #f2f2f2;">3 0.5 (ac)</td>
<td style="padding: 10px;margin: 0;background: #f2f2f2;">14 Sep 2019</td>
</tr>
<tr style="padding: 0;margin: 0;">
<td style="padding: 10px;margin: 0;background: #f2f2f2;"><a href="https://flurosense.com" style="padding: 0;margin: 0;color: #616161;">23 TOP PD</a></td>
<td style="padding: 10px;margin: 0;background: #f2f2f2;">3 0.5 (ac)</td>
<td style="padding: 10px;margin: 0;background: #f2f2f2;">14 Sep 2019</td>
</tr>
</tbody>
</table>
<div style="text-align: center;margin: 20px 0;padding: 0;">
<a href="https://flurosense.com" class="btn btn__primary" style="padding: 10px 25px;margin: 0;color: #fff;text-transform: uppercase;border-radius: 3px;text-align: center;display: inline-block;text-decoration: none;background: #43a047;">Get it in flurosense</a>
</div>
</div>
<!-- info block -->
<div class="info" style="padding: 0;margin: 0;margin-bottom: 15px;">
<table class="info-img-tbl" style="padding: 0;margin: 0;width: 100%;margin-bottom: 5px;">
<thead style="padding: 0;margin: 0;">
<tr style="padding: 0;margin: 0;">
<td class="tdh-1" style="padding: 10px;margin: 0;background: #3a9d2c;color: #fff;">
<div class="tdh-sub" style="padding: 0;margin: 0;font-size: 13px;margin-bottom: 5px;">Field</div>
<div style="padding: 0;margin: 0;font-weight: bold;">20 TOP PD</div>
</td>
<td class="tdh-2" style="padding: 10px;margin: 0;background: #4eca33;color: #fff;">
<div class="tdh-sub" style="padding: 0;margin: 0;font-size: 13px;margin-bottom: 5px;">Capture date</div>
<div style="padding: 0;margin: 0;font-weight: bold;">19 Jul 2019</div>
</td>
</tr>
</thead>
<tbody style="padding: 0;margin: 0;">
<tr style="padding: 0;margin: 0;">
<td colspan="2" class="center-text" style="padding: 0;margin: 0;text-align: center;">
<img src="/sample.png" alt="sensing image" style="padding: 10px;margin: 0;width: 300px;height: auto;">
</td>
</tr>
<tr style="padding: 0;margin: 0;">
<td colspan="2" style="padding: 0;margin: 0;">
<div class="sum__title" style="padding: 0;margin: 0;font-size: 19px;color: #43a047;font-weight: bold;">Stress detected</div>
<div style="font-size: 13px;padding: 0;margin: 0;">(located from the left to the right side of the field)</div>
</td>
</tr>
</tbody>
</table>
<table class="sum__table sum__table--collapsed" cellspacing="0" cellpadding="0" style="padding: 0;margin: 0;margin-top: 5px;width: 100%;">
<thead style="padding: 0;margin: 0;">
<tr style="padding: 0;margin: 0;">
<td style="padding: 10px;margin: 0;color: #fff;background: #a6a6a6;">ID</td>
<td style="padding: 10px;margin: 0;color: #fff;background: #a6a6a6;">Priority</td>
<td style="padding: 10px;margin: 0;color: #fff;background: #a6a6a6;">Area</td>
<td style="padding: 10px;margin: 0;color: #fff;background: #a6a6a6;">1" Detected</td>
</tr>
</thead>
<tbody style="padding: 0;margin: 0;">
<tr style="padding: 0;margin: 0;">
<td style="padding: 10px;margin: 0;background: #f2f2f2;"><a href="https://flurosense.com" style="padding: 0;margin: 0;color: #616161;">Unknown damage</a></td>
<td style="padding: 10px;margin: 0;background: #f2f2f2;"><i class="priority priority--low" style="padding: 5px 10px;margin: 0;border-radius: 3px;display: inline-block;background: #fff;text-transform: uppercase;font-style: normal;font-size: 16px;color: #3a9d2c;border: 1px solid #3a9d2c;">Low</i></td>
<td style="padding: 10px;margin: 0;background: #f2f2f2;">0.1 ac <i class="arrow arrow--down" style="padding: 0;margin: 0;width: 10px;height: 25px;display: inline-block;position: relative;top: 5px;background: url(/arrow_down.svg) center center no-repeat;background-size: cover;"></i></td>
<td style="padding: 10px;margin: 0;background: #f2f2f2;">14 Sep 2019</td>
</tr>
<tr style="padding: 0;margin: 0;">
<td style="padding: 10px;margin: 0;background: #f2f2f2;"><a href="https://flurosense.com" style="padding: 0;margin: 0;color: #616161;">Unknown damage</a></td>
<td style="padding: 10px;margin: 0;background: #f2f2f2;"><i class="priority priority--new" style="padding: 5px 10px;margin: 0;border-radius: 3px;display: inline-block;background: #fff2cc;text-transform: uppercase;font-style: normal;font-size: 16px;color: #616161;border: 1px solid #616161;">new</i></td>
<td style="padding: 10px;margin: 0;background: #f2f2f2;">0.1 ac</td>
<td style="padding: 10px;margin: 0;background: #f2f2f2;">14 Sep 2019</td>
</tr>
<tr style="padding: 0;margin: 0;">
<td style="padding: 10px;margin: 0;background: #f2f2f2;"><a href="https://flurosense.com" style="padding: 0;margin: 0;color: #616161;">Unknown damage</a></td>
<td style="padding: 10px;margin: 0;background: #f2f2f2;"><i class="priority priority--med" style="padding: 5px 10px;margin: 0;border-radius: 3px;display: inline-block;background: #fff;text-transform: uppercase;font-style: normal;font-size: 16px;color: #d88e60;border: 1px solid #d88e60;">med</i></td>
<td style="padding: 10px;margin: 0;background: #f2f2f2;">0.1 ac <i class="arrow arrow--up" style="padding: 0;margin: 0;width: 10px;height: 25px;display: inline-block;position: relative;top: 5px;background: url(/arrow_up.svg) center center no-repeat;background-size: cover;"></i></td>
<td style="padding: 10px;margin: 0;background: #f2f2f2;">14 Sep 2019</td>
</tr>
<tr style="padding: 0;margin: 0;">
<td style="padding: 10px;margin: 0;background: #f2f2f2;"><a href="https://flurosense.com" style="padding: 0;margin: 0;color: #616161;">Unknown damage</a></td>
<td style="padding: 10px;margin: 0;background: #f2f2f2;"><i class="priority priority--high" style="padding: 5px 10px;margin: 0;border-radius: 3px;display: inline-block;background: #fff;text-transform: uppercase;font-style: normal;font-size: 16px;color: red;border: 1px solid red;">high</i></td>
<td style="padding: 10px;margin: 0;background: #f2f2f2;">0.1 ac <i class="arrow arrow--up" style="padding: 0;margin: 0;width: 10px;height: 25px;display: inline-block;position: relative;top: 5px;background: url(/arrow_up.svg) center center no-repeat;background-size: cover;"></i></td>
<td style="padding: 10px;margin: 0;background: #f2f2f2;">14 Sep 2019</td>
</tr>
</tbody>
</table>
</div>
<!-- info block -->
<div class="info" style="padding: 0;margin: 0;margin-bottom: 15px;">
<table class="info-img-tbl" style="padding: 0;margin: 0;width: 100%;margin-bottom: 5px;">
<thead style="padding: 0;margin: 0;">
<tr style="padding: 0;margin: 0;">
<td class="tdh-1" style="padding: 10px;margin: 0;background: #3a9d2c;color: #fff;">
<div class="tdh-sub" style="padding: 0;margin: 0;font-size: 13px;margin-bottom: 5px;">Field</div>
<div style="padding: 0;margin: 0;font-weight: bold;">20 TOP PD</div>
</td>
<td class="tdh-2" style="padding: 10px;margin: 0;background: #4eca33;color: #fff;">
<div class="tdh-sub" style="padding: 0;margin: 0;font-size: 13px;margin-bottom: 5px;">Capture date</div>
<div style="padding: 0;margin: 0;font-weight: bold;">19 Jul 2019</div>
</td>
</tr>
</thead>
<tbody style="padding: 0;margin: 0;">
<tr style="padding: 0;margin: 0;">
<td colspan="2" class="center-text" style="padding: 0;margin: 0;text-align: center;">
<img src="/sample2.png" alt="sensing image" style="padding: 10px;margin: 0;width: 300px;height: auto;">
</td>
</tr>
<tr style="padding: 0;margin: 0;">
<td colspan="2" style="padding: 0;margin: 0;">
<div class="sum__title" style="padding: 0;margin: 0;font-size: 19px;color: #43a047;font-weight: bold;">Stress detected</div>
<div style="font-size: 13px;padding: 0;margin: 0;">(located from the left to the right side of the field)</div>
</td>
</tr>
</tbody>
</table>
<table class="sum__table sum__table--collapsed" cellspacing="0" cellpadding="0" style="padding: 0;margin: 0;margin-top: 5px;width: 100%;">
<thead style="padding: 0;margin: 0;">
<tr style="padding: 0;margin: 0;">
<td style="padding: 10px;margin: 0;color: #fff;background: #a6a6a6;">ID</td>
<td style="padding: 10px;margin: 0;color: #fff;background: #a6a6a6;">Priority</td>
<td style="padding: 10px;margin: 0;color: #fff;background: #a6a6a6;">Area</td>
<td style="padding: 10px;margin: 0;color: #fff;background: #a6a6a6;">1" Detected</td>
</tr>
</thead>
<tbody style="padding: 0;margin: 0;">
<tr style="padding: 0;margin: 0;">
<td style="padding: 10px;margin: 0;background: #f2f2f2;"><a href="https://flurosense.com" style="padding: 0;margin: 0;color: #616161;">Unknown damage</a></td>
<td style="padding: 10px;margin: 0;background: #f2f2f2;"><i class="priority priority--low" style="padding: 5px 10px;margin: 0;border-radius: 3px;display: inline-block;background: #fff;text-transform: uppercase;font-style: normal;font-size: 16px;color: #3a9d2c;border: 1px solid #3a9d2c;">Low</i></td>
<td style="padding: 10px;margin: 0;background: #f2f2f2;">0.1 ac <i class="arrow arrow--down" style="padding: 0;margin: 0;width: 10px;height: 25px;display: inline-block;position: relative;top: 5px;background: url(/arrow_down.svg) center center no-repeat;background-size: cover;"></i></td>
<td style="padding: 10px;margin: 0;background: #f2f2f2;">14 Sep 2019</td>
</tr>
<tr style="padding: 0;margin: 0;">
<td style="padding: 10px;margin: 0;background: #f2f2f2;"><a href="https://flurosense.com" style="padding: 0;margin: 0;color: #616161;">Unknown damage</a></td>
<td style="padding: 10px;margin: 0;background: #f2f2f2;"><i class="priority priority--new" style="padding: 5px 10px;margin: 0;border-radius: 3px;display: inline-block;background: #fff2cc;text-transform: uppercase;font-style: normal;font-size: 16px;color: #616161;border: 1px solid #616161;">new</i></td>
<td style="padding: 10px;margin: 0;background: #f2f2f2;">0.1 ac</td>
<td style="padding: 10px;margin: 0;background: #f2f2f2;">14 Sep 2019</td>
</tr>
<tr style="padding: 0;margin: 0;">
<td style="padding: 10px;margin: 0;background: #f2f2f2;"><a href="https://flurosense.com" style="padding: 0;margin: 0;color: #616161;">Unknown damage</a></td>
<td style="padding: 10px;margin: 0;background: #f2f2f2;"><i class="priority priority--med" style="padding: 5px 10px;margin: 0;border-radius: 3px;display: inline-block;background: #fff;text-transform: uppercase;font-style: normal;font-size: 16px;color: #d88e60;border: 1px solid #d88e60;">med</i></td>
<td style="padding: 10px;margin: 0;background: #f2f2f2;">0.1 ac <i class="arrow arrow--up" style="padding: 0;margin: 0;width: 10px;height: 25px;display: inline-block;position: relative;top: 5px;background: url(/arrow_up.svg) center center no-repeat;background-size: cover;"></i></td>
<td style="padding: 10px;margin: 0;background: #f2f2f2;">14 Sep 2019</td>
</tr>
<tr style="padding: 0;margin: 0;">
<td style="padding: 10px;margin: 0;background: #f2f2f2;"><a href="https://flurosense.com" style="padding: 0;margin: 0;color: #616161;">Unknown damage</a></td>
<td style="padding: 10px;margin: 0;background: #f2f2f2;"><i class="priority priority--high" style="padding: 5px 10px;margin: 0;border-radius: 3px;display: inline-block;background: #fff;text-transform: uppercase;font-style: normal;font-size: 16px;color: red;border: 1px solid red;">high</i></td>
<td style="padding: 10px;margin: 0;background: #f2f2f2;">0.1 ac <i class="arrow arrow--up" style="padding: 0;margin: 0;width: 10px;height: 25px;display: inline-block;position: relative;top: 5px;background: url(/arrow_up.svg) center center no-repeat;background-size: cover;"></i></td>
<td style="padding: 10px;margin: 0;background: #f2f2f2;">14 Sep 2019</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment