Nicer login email.

9 years ago · e612eda0f8
--- a/templates/emails/base.html
+++ b/templates/emails/base.html
@ -0,0 +1,216 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>{% block title %}{% endblock %}</title>
  <style type="text/css" rel="stylesheet" media="all">
    /* Base ------------------------------ */
    *:not(br):not(tr):not(html) {
      font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
    body {
      width: 100% !important;
      height: 100%;
      margin: 0;
      line-height: 1.4;
      background-color: #F2F4F6;
      color: #74787E;
      -webkit-text-size-adjust: none;
    }
    a {
      color: #3869D4;
    }
    a.neutral {
        color: #74787E;
    }
    /* Layout ------------------------------ */
    .email-wrapper {
      width: 100%;
      margin: 0;
      padding: 0;
      background-color: #F2F4F6;
    }
    .email-content {
      width: 100%;
      margin: 0;
      padding: 0;
    }
    /* Masthead ----------------------- */
    .email-masthead {
      padding: 25px 0;
      text-align: center;
    }
    .email-masthead_logo {
      max-width: 400px;
      border: 0;
    }
    .email-masthead_name {
      font-size: 16px;
      font-weight: bold;
      color: #bbbfc3;
      text-decoration: none;
      text-shadow: 0 1px 0 white;
    }
    /* Body ------------------------------ */
    .email-body {
      width: 100%;
      margin: 0;
      padding: 0;
      border-top: 1px solid #EDEFF2;
      border-bottom: 1px solid #EDEFF2;
      background-color: #FFF;
    }
    .email-body_inner {
      width: 570px;
      margin: 0 auto;
      padding: 0;
    }
    .email-footer {
      width: 570px;
      margin: 0 auto;
      padding: 0;
      text-align: center;
    }
    .email-footer p {
      color: #AEAEAE;
    }
    .body-action {
      width: 100%;
      margin: 30px auto;
      padding: 0;
      text-align: center;
    }
    .body-sub {
      margin-top: 25px;
      padding-top: 25px;
      border-top: 1px solid #EDEFF2;
    }
    .content-cell {
      padding: 35px;
    }
    .align-right {
      text-align: right;
    }
    /* Type ------------------------------ */
    h1 {
      margin-top: 0;
      color: #2F3133;
      font-size: 19px;
      font-weight: bold;
      text-align: left;
    }
    h2 {
      margin-top: 0;
      color: #2F3133;
      font-size: 16px;
      font-weight: bold;
      text-align: left;
    }
    h3 {
      margin-top: 0;
      color: #2F3133;
      font-size: 14px;
      font-weight: bold;
      text-align: left;
    }
    p {
      margin-top: 0;
      color: #74787E;
      font-size: 16px;
      line-height: 1.5em;
      text-align: left;
    }
    p.sub {
      font-size: 12px;
    }
    p.center {
      text-align: center;
    }
    /* Buttons ------------------------------ */
    .button {
      display: inline-block;
      width: 200px;
      background-color: #3869D4;
      border-radius: 3px;
      color: #ffffff;
      font-size: 15px;
      line-height: 45px;
      text-align: center;
      text-decoration: none;
      -webkit-text-size-adjust: none;
      mso-hide: all;
    }
    .button--green {
      background-color: #22BC66;
    }
    .button--red {
      background-color: #dc4d2f;
    }
    .button--blue {
      background-color: #3869D4;
    }
    /*Media Queries ------------------------------ */
    @media only screen and (max-width: 600px) {
      .email-body_inner,
      .email-footer {
        width: 100% !important;
      }
    }
    @media only screen and (max-width: 500px) {
      .button {
        width: 100% !important;
      }
    }
  </style>
 </head>
 <body>
  <table class="email-wrapper" width="100%" cellpadding="0" cellspacing="0">
    <tr>
      <td align="center">
        <table class="email-content" width="100%" cellpadding="0" cellspacing="0">
          <!-- Logo -->
          <tr>
            <td class="email-masthead">
              <a class="email-masthead_name">Healthchecks</a>
            </td>
          </tr>
          <!-- Email Body -->
          <tr>
            <td class="email-body" width="100%">
              <table class="email-body_inner" align="center" width="570" cellpadding="0" cellspacing="0">
                <!-- Body content -->
                <tr>
                  <td class="content-cell">
                  {% block content %}{% endblock %}
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td>
              <table class="email-footer" align="center" width="570" cellpadding="0" cellspacing="0">
                <tr>
                  <td class="content-cell">
                    <p class="sub center">&copy; 2016 healthchecks<span>.</span>io. All rights reserved.</p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
 </body>
 </html>
--- a/templates/emails/login-body-html.html
+++ b/templates/emails/login-body-html.html
@ -1,16 +1,50 @@
 <p>Hello,</p>
 {% extends "emails/base.html" %}
 {% block content %}
 <h1>Hello,</h1>
 {% if inviting_profile %}
 <p>Joining {{ inviting_profile }} will allow you to manage existing
 monitoring checks and set up new ones. If you already have your own account
 on healthchecks.io, you will be able to switch between the two accounts.</p>
    <p><strong>{{ inviting_profile }}</strong> invites you to their
    <a href="https://healthchecks.io">healthchecks.io</a> account.</p>
    <p>You will be able to manage their
    existing monitoring checks and set up new ones. If you already have your
    own account on healthchecks<span>.</span>io, you will be able to switch
    between the two
    accounts.</p>
 {% endif %}
 <p>Here's a link to log yourself in:</p>
 <p><a href="{{ login_link }}">{{ login_link }}</a></p>
 <p>To log into <a href="https://healthchecks.io">healthchecks.io</a>, please press the button below:</p>
 <!-- Action -->
 <table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center">
      <div>
        <!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ login_link }}" style="height:45px;v-text-anchor:middle;width:200px;" arcsize="7%" stroke="f" fill="t">
        <v:fill type="tile" color="#22BC66" />
        <w:anchorlock/>
        <center style="color:#ffffff;font-family:sans-serif;font-size:15px;">Confirm your account</center>
      </v:roundrect><![endif]-->
        <a href="{{ login_link }}" class="button button--green">Log In</a>
      </div>
    </td>
  </tr>
 </table>
 <p>Thanks,<br>The Healthchecks<span>.</span>io</a> Team</p>
 <p>
    --<br />
    Regards,<br />
    healthchecks.io
    <strong>P.S.</strong> Need help getting started? Check out our
    <a href="https://healthchecks.io/docs/">help documentation</a>.
    Or, just reply to this email with any questions or issues you have.
 </p>
 <!-- Sub copy -->
 <table class="body-sub">
  <tr>
    <td>
      <p class="sub">If you’re having trouble clicking the log in button, copy and paste the URL below into your web browser.
      </p>
      <p class="sub"><a href="{{ login_link }}">{{ login_link }}</a></p>
    </td>
  </tr>
 </table>
 {% endblock %}
--- a/templates/front/docs.html
+++ b/templates/front/docs.html
@ -12,8 +12,8 @@ page has an unique "ping" URL. Whenever you access this URL,
 the "Last Ping" value of corresponding check is updated.
 </p>
 <p>When a certain amount of time passes since last received ping, the
 check is considered "late", and Health Checks sends an email alert.
 It is all very simple, really.</p>
 check is considered "late", and healthchecks.io sends an email alert.
 It is a simple idea.</p>
 <h2>Executing a Ping</h2>
 <p>