Skip to content

Instantly share code, notes, and snippets.

@yada-yoda

yada-yoda/have-a-look-at-your-weekly-report.markdown

Created January 16, 2019 01:52
Show Gist options
  • Save yada-yoda/d2189ce373dcb99bfbc439d3a5a74ff5 to your computer and use it in GitHub Desktop.
Save yada-yoda/d2189ce373dcb99bfbc439d3a5a74ff5 to your computer and use it in GitHub Desktop.
Download ZIP
Have a look at your Weekly Report
Raw
index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Have a look at your Weekly Report</title>
<!--[if !mso]>
<!-- -->
<link href="https://media.withings.com/email/permanent/template/font-nokia-2.css"
rel='stylesheet' type='text/css' />
<!--<![endif]-->
<style type="text/css">
.product-image {
display:block !important;
width: 100% !important;
max-width: 180px ! important;
height:auto !important;
}
.article-image {
width: 100% !important;
max-width: 265px !important;
}
.margin-left {
margin-left: 5px !important;
}
.article-right {
margin-right: 5px !important;
}
.block-product {
width: 100% !important;
}
.banner {
width: 50% !important;
}
.block-2-columns {
width: 270px !important;
}
.block-3-columns {
width: 180px !important;
}
@media only screen and (max-width: 600px){
.container {
display:block !important;
width: 100% !important;
height:auto !important;
}
.block-product {
width: 50% !important;
}
.block-picto-img {
width: 30% !important;
}
.block-picto-txt {
width: 70% !important;
}
.block-2-columns {
width: 100% !important;
}
.block-3-columns {
width: 100% !important;
}
.article-image {
width: 100% !important;
max-width: 100% !important;
}
.feature-image {
width: 100% !important;
max-width: 100% !important;
}
.phone-image {
width: 50% !important;
max-width: 50% !important;
}
.mobile-no-padding {
padding-top: 0px !important;
padding-right: 0px !important;
padding-left: 0px !important;
padding-bottom: 0px !important;
}
.mobile-no-radius {
border-radius: 0px !important;
}
.mobile-full-width {
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
}
.mobile-column-horizontal-c {
padding-top: 10px !important;
}
img {
outline:none;
text-decoration:none;
-ms-interpolation-mode: bicubic;
}
a img {border:none;}
a img:hover{
opacity: 0.8;
}
table{
mso-table-lspace:0pt;
mso-table-rspace:0pt;
}
body{
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
width: 100% !important;
}
}
@media only screen and (max-width: 370px){
.block-product {
width: 100% !important;
min-width: 100% !important;
}
}
</style>
</head>
<body style="margin:0; padding:0;">
<!-- ENCAPSULATION - Setting of the email width-->
<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0"
bgcolor="#e8e8e8">
<tr>
<td>
<div style="max-height:0; width:0; overflow:hidden; float:left; display:none;"></div>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#e8e8e8">
<tr>
<td class="mobile-no-padding" style="padding-top: 20px; padding-right: 20px; padding-left: 20px;">
<table class="container" align="center" width="600" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td class="mobile-no-radius" style="background-color:#ffffff; border-radius: 15px;">
<!-- HEADER-->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td style="padding-top: 30px; padding-bottom: 20px; padding-right: 30px; padding-left: 30px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="max-width: 540px;">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" height="20" width="50%">
<a href="https://static.health.nokia.com/content/crm/redirect_url/index.html?ios_url=withings-bd2%3A%2F%2Ftimeline&android_url=withings-bd2%3A%2F%2Ftimeline&desktop_url=https%3A%2F%2Fdashboard.health.nokia.com%2F">
<img src="https://media.withings.com/email/permanent/nokia-weeklyreport/healthmate-logo.jpg"
border="0" alt="" title="Nokia Health Mate" width="58" height="auto" style="display: block;">
</a>
</td>
<td align="right" height="20" width="50%">
<img src="https://media-exp2.licdn.com/mpr/mpr/shrink_200_200/AAEAAQAAAAAAAAbbAAAAJGIyZmYxNzc1LWYyMjMtNGZmNC05NmQ0LWUzNDY3ODY3MjMxYQ.png"
style="border-radius:50%;" border="0" alt="" title="Nokia Health Mate" width="58"
height="auto" style="display: block;" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--end HEADER-->
<!-- BLOCK - 1 column / main -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td style="padding-bottom: 30px; padding-right: 30px; padding-left: 30px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="max-width: 480px;">
<tr>
<td style="padding-top: 20px; color:#001131; font-weight: 100; text-decoration:none; font-size:40px; font-family: 'nokia-pure-headline-light', 'Roboto Light', Roboto, Helvetica Neue, Helvetica, Open sans, Arial, sans-serif; line-height:42px">Your Weekly Report</td>
</tr>
<tr>
<td style="padding-top: 10px; color: #89A2AE; font-weight: 200; text-decoration:none; font-size:16px; font-family: 'nokia-pure-text-light', 'Roboto Light', Roboto, Helvetica Neue, Helvetica, sans-serif; line-height:28px">October 2–8</td>
</tr>
<tr>
<td style="padding-top: 30px; color: #4D5766; font-weight: 200; text-decoration:none; font-size:16px; font-family: 'nokia-pure-text-light', 'Roboto Light', Roboto, Helvetica Neue, Helvetica, sans-serif; line-height:28px">Congrats, Smiles Davis!
<br/>Your eye is on the prize! You lost 2.4 lb last week.
<br/>Only 2.2 lb until you reach your goal.</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- end BLOCK - 1 column / main -->
<!-- BLOCK - 1 column / DATA -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td style="padding-top: 10px; padding-bottom: 0px; padding-right: 30px; padding-left: 30px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="max-width: 480px;">
<tr>
<td>
<!-- BLOC ELEMENT -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" style="padding-top: 10px; padding-bottom: 10px; color:#001135; font-weight: 500; font-size:16px; font-family: 'nokia-pure-text-bold', 'Roboto Light', Roboto, Helvetica Neue, Helvetica, sans-serif; line-height:18px; line-height: 20px; text-transform: uppercase;"
width="50%">Average weight</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" width="50%" style="padding-bottom: 10px;color:#001135; font-weight: 500; font-size:16px; font-family: 'nokia-pure-text-bold', 'Roboto Light', Roboto, Helvetica Neue, Helvetica, sans-serif; line-height:18px; line-height: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" width="58" style="color:#001135; font-weight: 500; font-size:16px; font-family: 'nokia-pure-text-bold', 'Roboto Light', Roboto, Helvetica Neue, Helvetica, sans-serif; line-height:18px; line-height: 20px; text-transform: uppercase;">
<img src="https://media.withings.com/email/permanent/nokia-weeklyreport/trend/down.jpg"
border="0" alt="" title="" width="58" height="auto" style="display: block;" />
</td>
<td align="left" style="color:#001135; font-weight: 500; font-size:36px; font-family: 'nokia-pure-headline-light', 'Roboto Light', Roboto, Helvetica Neue, Helvetica, sans-serif; line-height:48px; text-transform: uppercase;">164.7 lb</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" style="padding-bottom: 50px; color:#959595; font-weight: 500; font-size:14px; font-family: 'nokia-pure-text-light', 'Roboto Light', Roboto, Helvetica Neue, Helvetica, sans-serif; line-height:18px; line-height: 20px;"
width="100%">-2.4 lb as compared to the previous week</td>
</tr>
</table>
<!-- END BLOC ELEMENT -->
<!-- BLOC ELEMENT -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" style="padding-top: 10px; padding-bottom: 10px; color:#001135; font-weight: 500; font-size:16px; font-family: 'nokia-pure-text-bold', 'Roboto Light', Roboto, Helvetica Neue, Helvetica, sans-serif; line-height:18px; line-height: 20px; text-transform: uppercase;"
width="50%">Length of your nights</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" width="50%" style="padding-bottom: 10px;color:#001135; font-weight: 500; font-size:16px; font-family: 'nokia-pure-text-bold', 'Roboto Light', Roboto, Helvetica Neue, Helvetica, sans-serif; line-height:18px; line-height: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" width="58" style="color:#001135; font-weight: 500; font-size:16px; font-family: 'nokia-pure-text-bold', 'Roboto Light', Roboto, Helvetica Neue, Helvetica, sans-serif; line-height:18px; line-height: 20px; text-transform: uppercase;">
<img src="https://media.withings.com/email/permanent/nokia-weeklyreport/trend/up.jpg"
border="0" alt="" title="" width="58" height="auto" style="display: block;" />
</td>
<td align="left" style="color:#001135; font-weight: 500; font-size:36px; font-family: 'nokia-pure-headline-light', 'Roboto Light', Roboto, Helvetica Neue, Helvetica, sans-serif; line-height:48px; text-transform: uppercase;">8:18 <span style="color:#959595; font-weight: 500; font-size:14px; font-family: 'nokia-pure-text-light', 'Roboto Light', Roboto, Helvetica Neue, Helvetica, sans-serif; line-height:18px;">/ day</span>
</td>
</tr>
</table>
</td>
<td align="right" width="50%" style="padding-bottom: 10px;color:#001135; font-weight: 500; font-size:16px; font-family: 'nokia-pure-text-bold', 'Roboto Light', Roboto, Helvetica Neue, Helvetica, sans-serif; line-height:18px; line-height: 20px;">
<img src="https://media.withings.com/email/permanent/nokia-weeklyreport/success/3.png"
border="0" alt="" title="" width="70" height="auto" style="display: block;" />
</td>
</tr>
<tr>
<td align="left" style="padding-bottom: 50px; color:#959595; font-weight: 500; font-size:14px; font-family: 'nokia-pure-text-light', 'Roboto Light', Roboto, Helvetica Neue, Helvetica, sans-serif; line-height:18px; line-height: 20px;"
width="100%">+28min as compared to the previous week</td>
</tr>
</table>
<!-- END BLOC ELEMENT -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- end BLOCK - 1 column / DATA-->
</td>
</tr>
</table>
<!-- BLOCK - Footer -->
<table class="container" align="center" width="600" border="0" cellpadding="0"
cellspacing="0" align="center">
<tr>
<td style="padding-top: 20px; padding-bottom: 30px; padding-right: 20px; padding-left: 20px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="max-width: 560px;">
<tr>
<td style="padding-top: 20px; color: #4D5766; font-weight: 200; text-decoration:none; font-size:12px; font-family: 'nokia-pure-text-light', 'Roboto Light', Roboto, Helvetica Neue, Helvetica, sans-serif; line-height:16px">You have received this email because you have a Nokia health account.</td>
</tr>
<tr>
<td style="padding-top: 10px; color: #4D5766; font-weight: 200; text-decoration:none; font-size:12px; font-family: 'nokia-pure-text-light', 'Roboto Light', Roboto, Helvetica Neue, Helvetica, sans-serif; line-height:16px">This is the weekly report of your Health Mate app. To unsubscribe from similar
emails,
<a href="#"
style="color:#3C424A;text-decoration:none;font-weight:light;"><u>click here.</u>
</a>
<br/>To manage your email preferences, please visit our
<a href="#"
style="color:#3C424A;text-decoration:none;font-weight:light;"><u>notification center.</u>
</a>
</td>
</tr>
<tr>
<td style="padding-top: 10px; color: #4D5766; font-weight: 200; text-decoration:none; font-size:12px; font-family: 'nokia-pure-text-light', 'Roboto Light', Roboto, Helvetica Neue, Helvetica, sans-serif; line-height:16px">
<a href="/us/en/legal/withings-services-terms-and-conditions" style="color:#4D5766;text-decoration:none;font-weight:light;">Terms and Conditions</a> <span class="display-none">|</span>
<a href="/us/en/legal/privacy"
style="color:#4D5766;text-decoration:none;">Privacy</a>
</td>
</tr>
<tr>
<td style="padding-top: 10px; color: #4D5766; font-weight: 200; text-decoration:none; font-size:12px; font-family: 'nokia-pure-text-light', 'Roboto Light', Roboto, Helvetica Neue, Helvetica, sans-serif; line-height:16px">&#169; 2017 Nokia All rights reserved.</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- end BLOCK - Footer -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- end ENCAPSULATION -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment