feat: free content with markdown + new flat theme + minor fixes (#9)
* feat: possibility to use markdown as content of email + use pretty table when generating fallback plain text e-mails * feat: new flat theme * fix: add a break word policy in actions troubleshooting section, in order to have a better responsive display when using really long Link URL on action * feat: better layout of dt and dl in HTML template * feat: pretty tables in plain text
This commit is contained in:
		
							
								
								
									
										345
									
								
								examples/default/default.maintenance.html
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										345
									
								
								examples/default/default.maintenance.html
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1,345 @@
 | 
			
		||||
 | 
			
		||||
<!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" />
 | 
			
		||||
  <style type="text/css" rel="stylesheet" media="all">
 | 
			
		||||
     
 | 
			
		||||
    *: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;
 | 
			
		||||
    }
 | 
			
		||||
     
 | 
			
		||||
    .email-wrapper {
 | 
			
		||||
      width: 100%;
 | 
			
		||||
      margin: 0;
 | 
			
		||||
      padding: 0;
 | 
			
		||||
      background-color: #F2F4F6;
 | 
			
		||||
    }
 | 
			
		||||
    .email-content {
 | 
			
		||||
      width: 100%;
 | 
			
		||||
      margin: 0;
 | 
			
		||||
      padding: 0;
 | 
			
		||||
    }
 | 
			
		||||
     
 | 
			
		||||
    .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: #2F3133;
 | 
			
		||||
      text-decoration: none;
 | 
			
		||||
      text-shadow: 0 1px 0 white;
 | 
			
		||||
    }
 | 
			
		||||
    .email-logo {
 | 
			
		||||
      max-height: 50px;
 | 
			
		||||
    }
 | 
			
		||||
     
 | 
			
		||||
    .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-dictionary {
 | 
			
		||||
      width: 100%;
 | 
			
		||||
      overflow: hidden;
 | 
			
		||||
      margin: 20px auto 10px;
 | 
			
		||||
      padding: 0;
 | 
			
		||||
    }
 | 
			
		||||
    .body-dictionary dd {
 | 
			
		||||
      margin: 0 0 10px 0;
 | 
			
		||||
    }
 | 
			
		||||
    .body-dictionary dt {
 | 
			
		||||
      clear: both;
 | 
			
		||||
      color: #000;
 | 
			
		||||
      font-weight: bold;
 | 
			
		||||
    }
 | 
			
		||||
    .body-dictionary dd {
 | 
			
		||||
      margin-left: 0;
 | 
			
		||||
      margin-bottom: 10px;
 | 
			
		||||
    }
 | 
			
		||||
    .body-sub {
 | 
			
		||||
      margin-top: 25px;
 | 
			
		||||
      padding-top: 25px;
 | 
			
		||||
      border-top: 1px solid #EDEFF2;
 | 
			
		||||
      table-layout: fixed;
 | 
			
		||||
    }
 | 
			
		||||
    .body-sub a {
 | 
			
		||||
      word-break: break-all;
 | 
			
		||||
    }
 | 
			
		||||
    .content-cell {
 | 
			
		||||
      padding: 35px;
 | 
			
		||||
    }
 | 
			
		||||
    .align-right {
 | 
			
		||||
      text-align: right;
 | 
			
		||||
    }
 | 
			
		||||
     
 | 
			
		||||
    h1 {
 | 
			
		||||
      margin-top: 0;
 | 
			
		||||
      color: #2F3133;
 | 
			
		||||
      font-size: 19px;
 | 
			
		||||
      font-weight: bold;
 | 
			
		||||
    }
 | 
			
		||||
    h2 {
 | 
			
		||||
      margin-top: 0;
 | 
			
		||||
      color: #2F3133;
 | 
			
		||||
      font-size: 16px;
 | 
			
		||||
      font-weight: bold;
 | 
			
		||||
    }
 | 
			
		||||
    h3 {
 | 
			
		||||
      margin-top: 0;
 | 
			
		||||
      color: #2F3133;
 | 
			
		||||
      font-size: 14px;
 | 
			
		||||
      font-weight: bold;
 | 
			
		||||
    }
 | 
			
		||||
    blockquote {
 | 
			
		||||
      margin: 1.7rem 0;
 | 
			
		||||
      padding-left: 0.85rem;
 | 
			
		||||
      border-left: 10px solid #F0F2F4;
 | 
			
		||||
    }
 | 
			
		||||
    blockquote p {
 | 
			
		||||
        font-size: 1.1rem;
 | 
			
		||||
        color: #999;
 | 
			
		||||
    }
 | 
			
		||||
    blockquote cite {
 | 
			
		||||
        display: block;
 | 
			
		||||
        text-align: right;
 | 
			
		||||
        color: #666;
 | 
			
		||||
        font-size: 1.2rem;
 | 
			
		||||
    }
 | 
			
		||||
    cite {
 | 
			
		||||
      display: block;
 | 
			
		||||
      font-size: 0.925rem; 
 | 
			
		||||
    }
 | 
			
		||||
    cite:before {
 | 
			
		||||
      content: "\2014 \0020";
 | 
			
		||||
    }
 | 
			
		||||
    p {
 | 
			
		||||
      margin-top: 0;
 | 
			
		||||
      color: #74787E;
 | 
			
		||||
      font-size: 16px;
 | 
			
		||||
      line-height: 1.5em;
 | 
			
		||||
    }
 | 
			
		||||
    p.sub {
 | 
			
		||||
      font-size: 12px;
 | 
			
		||||
    }
 | 
			
		||||
    p.center {
 | 
			
		||||
      text-align: center;
 | 
			
		||||
    }
 | 
			
		||||
    table {
 | 
			
		||||
      width: 100%;
 | 
			
		||||
    }
 | 
			
		||||
    th {
 | 
			
		||||
      padding: 0px 5px;
 | 
			
		||||
      padding-bottom: 8px;
 | 
			
		||||
      border-bottom: 1px solid #EDEFF2;
 | 
			
		||||
    }
 | 
			
		||||
    th p {
 | 
			
		||||
      margin: 0;
 | 
			
		||||
      color: #9BA2AB;
 | 
			
		||||
      font-size: 12px;
 | 
			
		||||
    }
 | 
			
		||||
    td {
 | 
			
		||||
      padding: 10px 5px;
 | 
			
		||||
      color: #74787E;
 | 
			
		||||
      font-size: 15px;
 | 
			
		||||
      line-height: 18px;
 | 
			
		||||
    }
 | 
			
		||||
    .content {
 | 
			
		||||
      align: center;
 | 
			
		||||
      padding: 0;
 | 
			
		||||
    }
 | 
			
		||||
     
 | 
			
		||||
    .data-wrapper {
 | 
			
		||||
      width: 100%;
 | 
			
		||||
      margin: 0;
 | 
			
		||||
      padding: 35px 0;
 | 
			
		||||
    }
 | 
			
		||||
    .data-table {
 | 
			
		||||
      width: 100%;
 | 
			
		||||
      margin: 0;
 | 
			
		||||
    }
 | 
			
		||||
    .data-table th {
 | 
			
		||||
      text-align: left;
 | 
			
		||||
      padding: 0px 5px;
 | 
			
		||||
      padding-bottom: 8px;
 | 
			
		||||
      border-bottom: 1px solid #EDEFF2;
 | 
			
		||||
    }
 | 
			
		||||
    .data-table th p {
 | 
			
		||||
      margin: 0;
 | 
			
		||||
      color: #9BA2AB;
 | 
			
		||||
      font-size: 12px;
 | 
			
		||||
    }
 | 
			
		||||
    .data-table td {
 | 
			
		||||
      padding: 10px 5px;
 | 
			
		||||
      color: #74787E;
 | 
			
		||||
      font-size: 15px;
 | 
			
		||||
      line-height: 18px;
 | 
			
		||||
    }
 | 
			
		||||
     
 | 
			
		||||
    .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;
 | 
			
		||||
    }
 | 
			
		||||
     
 | 
			
		||||
    @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 dir="ltr">
 | 
			
		||||
  <table class="email-wrapper" width="100%" cellpadding="0" cellspacing="0">
 | 
			
		||||
    <tr>
 | 
			
		||||
      <td class="content">
 | 
			
		||||
        <table class="email-content" width="100%" cellpadding="0" cellspacing="0">
 | 
			
		||||
          
 | 
			
		||||
          <tr>
 | 
			
		||||
            <td class="email-masthead">
 | 
			
		||||
              <a class="email-masthead_name" href="https://example-hermes.com/" target="_blank">
 | 
			
		||||
                
 | 
			
		||||
                  <img src="http://www.duchess-france.org/wp-content/uploads/2016/01/gopher.png" class="email-logo" />
 | 
			
		||||
                
 | 
			
		||||
                </a>
 | 
			
		||||
            </td>
 | 
			
		||||
          </tr>
 | 
			
		||||
 | 
			
		||||
          
 | 
			
		||||
          <tr>
 | 
			
		||||
            <td class="email-body" width="100%">
 | 
			
		||||
              <table class="email-body_inner" align="center" width="570" cellpadding="0" cellspacing="0">
 | 
			
		||||
                
 | 
			
		||||
                <tr>
 | 
			
		||||
                  <td class="content-cell">
 | 
			
		||||
                    <h1>Hi Jon Snow,</h1>
 | 
			
		||||
                    
 | 
			
		||||
                    
 | 
			
		||||
                      <blockquote>
 | 
			
		||||
<p><em>Hermes</em> service will shutdown the <strong>1st August 2017</strong> for maintenance operations.</p>
 | 
			
		||||
</blockquote>
 | 
			
		||||
 | 
			
		||||
<p>Services will be unavailable based on the following schedule:</p>
 | 
			
		||||
 | 
			
		||||
<table>
 | 
			
		||||
<thead>
 | 
			
		||||
<tr>
 | 
			
		||||
<th align="center">Services</th>
 | 
			
		||||
<th align="center">Downtime</th>
 | 
			
		||||
</tr>
 | 
			
		||||
</thead>
 | 
			
		||||
 | 
			
		||||
<tbody>
 | 
			
		||||
<tr>
 | 
			
		||||
<td align="center">Service A</td>
 | 
			
		||||
<td align="center">2AM to 3AM</td>
 | 
			
		||||
</tr>
 | 
			
		||||
 | 
			
		||||
<tr>
 | 
			
		||||
<td align="center">Service B</td>
 | 
			
		||||
<td align="center">4AM to 5AM</td>
 | 
			
		||||
</tr>
 | 
			
		||||
 | 
			
		||||
<tr>
 | 
			
		||||
<td align="center">Service C</td>
 | 
			
		||||
<td align="center">5AM to 6AM</td>
 | 
			
		||||
</tr>
 | 
			
		||||
</tbody>
 | 
			
		||||
</table>
 | 
			
		||||
 | 
			
		||||
<hr />
 | 
			
		||||
 | 
			
		||||
<p>Feel free to contact us for any question regarding this matter at <a href="mailto:support@hermes-example.com">support@hermes-example.com</a> or in our <a href="https://gitter.im/">Gitter</a></p>
 | 
			
		||||
 | 
			
		||||
                    
 | 
			
		||||
                    
 | 
			
		||||
 | 
			
		||||
                    <p>
 | 
			
		||||
                      Yours truly,
 | 
			
		||||
                      <br />
 | 
			
		||||
                      Hermes
 | 
			
		||||
                    </p>
 | 
			
		||||
 | 
			
		||||
                    
 | 
			
		||||
                  </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">
 | 
			
		||||
                      Copyright © 2017 Hermes. All rights reserved.
 | 
			
		||||
                    </p>
 | 
			
		||||
                  </td>
 | 
			
		||||
                </tr>
 | 
			
		||||
              </table>
 | 
			
		||||
            </td>
 | 
			
		||||
          </tr>
 | 
			
		||||
        </table>
 | 
			
		||||
      </td>
 | 
			
		||||
    </tr>
 | 
			
		||||
  </table>
 | 
			
		||||
</body>
 | 
			
		||||
</html>
 | 
			
		||||
							
								
								
									
										28
									
								
								examples/default/default.maintenance.txt
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										28
									
								
								examples/default/default.maintenance.txt
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1,28 @@
 | 
			
		||||
------------
 | 
			
		||||
Hi Jon Snow,
 | 
			
		||||
------------
 | 
			
		||||
 | 
			
		||||
> 
 | 
			
		||||
> 
 | 
			
		||||
> 
 | 
			
		||||
> Hermes service will shutdown the *1st August 2017* for maintenance
 | 
			
		||||
> operations.
 | 
			
		||||
> 
 | 
			
		||||
> 
 | 
			
		||||
 | 
			
		||||
Services will be unavailable based on the following schedule:
 | 
			
		||||
 | 
			
		||||
+-----------+------------+
 | 
			
		||||
| SERVICES  |  DOWNTIME  |
 | 
			
		||||
+-----------+------------+
 | 
			
		||||
| Service A | 2AM to 3AM |
 | 
			
		||||
| Service B | 4AM to 5AM |
 | 
			
		||||
| Service C | 5AM to 6AM |
 | 
			
		||||
+-----------+------------+
 | 
			
		||||
 | 
			
		||||
Feel free to contact us for any question regarding this matter at support@hermes-example.com ( support@hermes-example.com ) or in our Gitter ( https://gitter.im/ )
 | 
			
		||||
 | 
			
		||||
Yours truly,
 | 
			
		||||
Hermes - https://example-hermes.com/
 | 
			
		||||
 | 
			
		||||
Copyright © 2017 Hermes. All rights reserved.
 | 
			
		||||
@ -105,6 +105,10 @@
 | 
			
		||||
      margin-top: 25px;
 | 
			
		||||
      padding-top: 25px;
 | 
			
		||||
      border-top: 1px solid #EDEFF2;
 | 
			
		||||
      table-layout: fixed;
 | 
			
		||||
    }
 | 
			
		||||
    .body-sub a {
 | 
			
		||||
      word-break: break-all;
 | 
			
		||||
    }
 | 
			
		||||
    .content-cell {
 | 
			
		||||
      padding: 35px;
 | 
			
		||||
@ -131,6 +135,28 @@
 | 
			
		||||
      font-size: 14px;
 | 
			
		||||
      font-weight: bold;
 | 
			
		||||
    }
 | 
			
		||||
    blockquote {
 | 
			
		||||
      margin: 1.7rem 0;
 | 
			
		||||
      padding-left: 0.85rem;
 | 
			
		||||
      border-left: 10px solid #F0F2F4;
 | 
			
		||||
    }
 | 
			
		||||
    blockquote p {
 | 
			
		||||
        font-size: 1.1rem;
 | 
			
		||||
        color: #999;
 | 
			
		||||
    }
 | 
			
		||||
    blockquote cite {
 | 
			
		||||
        display: block;
 | 
			
		||||
        text-align: right;
 | 
			
		||||
        color: #666;
 | 
			
		||||
        font-size: 1.2rem;
 | 
			
		||||
    }
 | 
			
		||||
    cite {
 | 
			
		||||
      display: block;
 | 
			
		||||
      font-size: 0.925rem; 
 | 
			
		||||
    }
 | 
			
		||||
    cite:before {
 | 
			
		||||
      content: "\2014 \0020";
 | 
			
		||||
    }
 | 
			
		||||
    p {
 | 
			
		||||
      margin-top: 0;
 | 
			
		||||
      color: #74787E;
 | 
			
		||||
@ -143,6 +169,29 @@
 | 
			
		||||
    p.center {
 | 
			
		||||
      text-align: center;
 | 
			
		||||
    }
 | 
			
		||||
    table {
 | 
			
		||||
      width: 100%;
 | 
			
		||||
    }
 | 
			
		||||
    th {
 | 
			
		||||
      padding: 0px 5px;
 | 
			
		||||
      padding-bottom: 8px;
 | 
			
		||||
      border-bottom: 1px solid #EDEFF2;
 | 
			
		||||
    }
 | 
			
		||||
    th p {
 | 
			
		||||
      margin: 0;
 | 
			
		||||
      color: #9BA2AB;
 | 
			
		||||
      font-size: 12px;
 | 
			
		||||
    }
 | 
			
		||||
    td {
 | 
			
		||||
      padding: 10px 5px;
 | 
			
		||||
      color: #74787E;
 | 
			
		||||
      font-size: 15px;
 | 
			
		||||
      line-height: 18px;
 | 
			
		||||
    }
 | 
			
		||||
    .content {
 | 
			
		||||
      align: center;
 | 
			
		||||
      padding: 0;
 | 
			
		||||
    }
 | 
			
		||||
     
 | 
			
		||||
    .data-wrapper {
 | 
			
		||||
      width: 100%;
 | 
			
		||||
@ -201,7 +250,7 @@
 | 
			
		||||
<body dir="ltr">
 | 
			
		||||
  <table class="email-wrapper" width="100%" cellpadding="0" cellspacing="0">
 | 
			
		||||
    <tr>
 | 
			
		||||
      <td align="center">
 | 
			
		||||
      <td class="content">
 | 
			
		||||
        <table class="email-content" width="100%" cellpadding="0" cellspacing="0">
 | 
			
		||||
          
 | 
			
		||||
          <tr>
 | 
			
		||||
@ -213,6 +262,7 @@
 | 
			
		||||
                </a>
 | 
			
		||||
            </td>
 | 
			
		||||
          </tr>
 | 
			
		||||
 | 
			
		||||
          
 | 
			
		||||
          <tr>
 | 
			
		||||
            <td class="email-body" width="100%">
 | 
			
		||||
@ -221,181 +271,188 @@
 | 
			
		||||
                <tr>
 | 
			
		||||
                  <td class="content-cell">
 | 
			
		||||
                    <h1>Hi Jon Snow,</h1>
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
					<p>Your order has been processed successfully.</p>
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
                    
 | 
			
		||||
                        
 | 
			
		||||
                          
 | 
			
		||||
                            <p>Your order has been processed successfully.</p>
 | 
			
		||||
                          
 | 
			
		||||
                        
 | 
			
		||||
                    
 | 
			
		||||
                    
 | 
			
		||||
 | 
			
		||||
					
 | 
			
		||||
                      
 | 
			
		||||
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
					<table class="data-wrapper" width="100%" cellpadding="0" cellspacing="0">
 | 
			
		||||
                      <tr>
 | 
			
		||||
                        <td colspan="2">
 | 
			
		||||
                          <table class="data-table" width="100%" cellpadding="0" cellspacing="0">
 | 
			
		||||
                      
 | 
			
		||||
                      
 | 
			
		||||
                        
 | 
			
		||||
                        
 | 
			
		||||
                        
 | 
			
		||||
                          <table class="data-wrapper" width="100%" cellpadding="0" cellspacing="0">
 | 
			
		||||
                            <tr>
 | 
			
		||||
								
 | 
			
		||||
								
 | 
			
		||||
                                <th
 | 
			
		||||
									
 | 
			
		||||
										
 | 
			
		||||
										
 | 
			
		||||
										width="20%"
 | 
			
		||||
										
 | 
			
		||||
										
 | 
			
		||||
										
 | 
			
		||||
									
 | 
			
		||||
								>
 | 
			
		||||
                                  <p>Item</p>
 | 
			
		||||
                                </th>
 | 
			
		||||
                              	
 | 
			
		||||
                                <th
 | 
			
		||||
									
 | 
			
		||||
										
 | 
			
		||||
										
 | 
			
		||||
										
 | 
			
		||||
										
 | 
			
		||||
									
 | 
			
		||||
								>
 | 
			
		||||
                                  <p>Description</p>
 | 
			
		||||
                                </th>
 | 
			
		||||
                              	
 | 
			
		||||
                                <th
 | 
			
		||||
									
 | 
			
		||||
										
 | 
			
		||||
										
 | 
			
		||||
										width="15%"
 | 
			
		||||
										
 | 
			
		||||
										
 | 
			
		||||
										
 | 
			
		||||
										style="text-align:right"
 | 
			
		||||
										
 | 
			
		||||
									
 | 
			
		||||
								>
 | 
			
		||||
                                  <p>Price</p>
 | 
			
		||||
                                </th>
 | 
			
		||||
                              	
 | 
			
		||||
                              <td colspan="2">
 | 
			
		||||
                                <table class="data-table" width="100%" cellpadding="0" cellspacing="0">
 | 
			
		||||
                                  <tr>
 | 
			
		||||
                                    
 | 
			
		||||
                                    
 | 
			
		||||
                                      <th
 | 
			
		||||
                                        
 | 
			
		||||
                                          
 | 
			
		||||
                                          
 | 
			
		||||
                                            width="20%"
 | 
			
		||||
                                          
 | 
			
		||||
                                          
 | 
			
		||||
                                          
 | 
			
		||||
                                        
 | 
			
		||||
                                      >
 | 
			
		||||
                                        <p>Item</p>
 | 
			
		||||
                                      </th>
 | 
			
		||||
                                    
 | 
			
		||||
                                      <th
 | 
			
		||||
                                        
 | 
			
		||||
                                          
 | 
			
		||||
                                          
 | 
			
		||||
                                          
 | 
			
		||||
                                          
 | 
			
		||||
                                        
 | 
			
		||||
                                      >
 | 
			
		||||
                                        <p>Description</p>
 | 
			
		||||
                                      </th>
 | 
			
		||||
                                    
 | 
			
		||||
                                      <th
 | 
			
		||||
                                        
 | 
			
		||||
                                          
 | 
			
		||||
                                          
 | 
			
		||||
                                            width="15%"
 | 
			
		||||
                                          
 | 
			
		||||
                                          
 | 
			
		||||
                                          
 | 
			
		||||
                                            style="text-align:right"
 | 
			
		||||
                                          
 | 
			
		||||
                                        
 | 
			
		||||
                                      >
 | 
			
		||||
                                        <p>Price</p>
 | 
			
		||||
                                      </th>
 | 
			
		||||
                                    
 | 
			
		||||
                                  </tr>
 | 
			
		||||
                                  
 | 
			
		||||
                                    <tr>
 | 
			
		||||
                                      
 | 
			
		||||
                                        <td
 | 
			
		||||
                                          
 | 
			
		||||
                                            
 | 
			
		||||
                                            
 | 
			
		||||
                                          
 | 
			
		||||
                                        >
 | 
			
		||||
                                          Golang
 | 
			
		||||
                                        </td>
 | 
			
		||||
                                      
 | 
			
		||||
                                        <td
 | 
			
		||||
                                          
 | 
			
		||||
                                            
 | 
			
		||||
                                            
 | 
			
		||||
                                          
 | 
			
		||||
                                        >
 | 
			
		||||
                                          Open source programming language that makes it easy to build simple, reliable, and efficient software
 | 
			
		||||
                                        </td>
 | 
			
		||||
                                      
 | 
			
		||||
                                        <td
 | 
			
		||||
                                          
 | 
			
		||||
                                            
 | 
			
		||||
                                            
 | 
			
		||||
                                              style="text-align:right"
 | 
			
		||||
                                            
 | 
			
		||||
                                          
 | 
			
		||||
                                        >
 | 
			
		||||
                                          $10.99
 | 
			
		||||
                                        </td>
 | 
			
		||||
                                      
 | 
			
		||||
                                    </tr>
 | 
			
		||||
                                  
 | 
			
		||||
                                    <tr>
 | 
			
		||||
                                      
 | 
			
		||||
                                        <td
 | 
			
		||||
                                          
 | 
			
		||||
                                            
 | 
			
		||||
                                            
 | 
			
		||||
                                          
 | 
			
		||||
                                        >
 | 
			
		||||
                                          Hermes
 | 
			
		||||
                                        </td>
 | 
			
		||||
                                      
 | 
			
		||||
                                        <td
 | 
			
		||||
                                          
 | 
			
		||||
                                            
 | 
			
		||||
                                            
 | 
			
		||||
                                          
 | 
			
		||||
                                        >
 | 
			
		||||
                                          Programmatically create beautiful e-mails using Golang.
 | 
			
		||||
                                        </td>
 | 
			
		||||
                                      
 | 
			
		||||
                                        <td
 | 
			
		||||
                                          
 | 
			
		||||
                                            
 | 
			
		||||
                                            
 | 
			
		||||
                                              style="text-align:right"
 | 
			
		||||
                                            
 | 
			
		||||
                                          
 | 
			
		||||
                                        >
 | 
			
		||||
                                          $1.99
 | 
			
		||||
                                        </td>
 | 
			
		||||
                                      
 | 
			
		||||
                                    </tr>
 | 
			
		||||
                                  
 | 
			
		||||
                                </table>
 | 
			
		||||
                              </td>
 | 
			
		||||
                            </tr>
 | 
			
		||||
							
 | 
			
		||||
                            <tr>
 | 
			
		||||
                              
 | 
			
		||||
                                <td
 | 
			
		||||
									
 | 
			
		||||
										
 | 
			
		||||
										
 | 
			
		||||
									
 | 
			
		||||
								>
 | 
			
		||||
                                Golang
 | 
			
		||||
                                </td>
 | 
			
		||||
                              
 | 
			
		||||
                                <td
 | 
			
		||||
									
 | 
			
		||||
										
 | 
			
		||||
										
 | 
			
		||||
									
 | 
			
		||||
								>
 | 
			
		||||
                                Open source programming language that makes it easy to build simple, reliable, and efficient software
 | 
			
		||||
                                </td>
 | 
			
		||||
                              
 | 
			
		||||
                                <td
 | 
			
		||||
									
 | 
			
		||||
										
 | 
			
		||||
										
 | 
			
		||||
										style="text-align:right"
 | 
			
		||||
										
 | 
			
		||||
									
 | 
			
		||||
								>
 | 
			
		||||
                                $10.99
 | 
			
		||||
                                </td>
 | 
			
		||||
                              
 | 
			
		||||
                            </tr>
 | 
			
		||||
                            
 | 
			
		||||
                            <tr>
 | 
			
		||||
                              
 | 
			
		||||
                                <td
 | 
			
		||||
									
 | 
			
		||||
										
 | 
			
		||||
										
 | 
			
		||||
									
 | 
			
		||||
								>
 | 
			
		||||
                                Hermes
 | 
			
		||||
                                </td>
 | 
			
		||||
                              
 | 
			
		||||
                                <td
 | 
			
		||||
									
 | 
			
		||||
										
 | 
			
		||||
										
 | 
			
		||||
									
 | 
			
		||||
								>
 | 
			
		||||
                                Programmatically create beautiful e-mails using Golang.
 | 
			
		||||
                                </td>
 | 
			
		||||
                              
 | 
			
		||||
                                <td
 | 
			
		||||
									
 | 
			
		||||
										
 | 
			
		||||
										
 | 
			
		||||
										style="text-align:right"
 | 
			
		||||
										
 | 
			
		||||
									
 | 
			
		||||
								>
 | 
			
		||||
                                $1.99
 | 
			
		||||
                                </td>
 | 
			
		||||
                              
 | 
			
		||||
                            </tr>
 | 
			
		||||
                            
 | 
			
		||||
                          </table>
 | 
			
		||||
                        </td>
 | 
			
		||||
                      </tr>
 | 
			
		||||
                    </table>
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
                        
 | 
			
		||||
                      
 | 
			
		||||
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
					<p>You can check the status of your order and more in your dashboard:</p>
 | 
			
		||||
					<table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0">
 | 
			
		||||
						<tr>
 | 
			
		||||
							<td align="center">
 | 
			
		||||
							<div>
 | 
			
		||||
								<a href="https://hermes-example.com/dashboard" class="button" style="background-color: " target="_blank">Go to Dashboard</a>
 | 
			
		||||
							</div>
 | 
			
		||||
							</td>
 | 
			
		||||
						</tr>
 | 
			
		||||
                    </table>
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
                      
 | 
			
		||||
                      
 | 
			
		||||
                        
 | 
			
		||||
                          
 | 
			
		||||
                            <p>You can check the status of your order and more in your dashboard:</p>
 | 
			
		||||
                            <table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0">
 | 
			
		||||
                              <tr>
 | 
			
		||||
                                <td align="center">
 | 
			
		||||
                                  <div>
 | 
			
		||||
                                    <a href="https://hermes-example.com/dashboard" class="button" style="background-color: " target="_blank">
 | 
			
		||||
                                      Go to Dashboard
 | 
			
		||||
                                    </a>
 | 
			
		||||
                                  </div>
 | 
			
		||||
                                </td>
 | 
			
		||||
                              </tr>
 | 
			
		||||
                            </table>
 | 
			
		||||
                          
 | 
			
		||||
                        
 | 
			
		||||
                      
 | 
			
		||||
 | 
			
		||||
					
 | 
			
		||||
                    
 | 
			
		||||
                    
 | 
			
		||||
 | 
			
		||||
                    <p>
 | 
			
		||||
                      Yours truly,
 | 
			
		||||
                      <br>
 | 
			
		||||
                      <br />
 | 
			
		||||
                      Hermes
 | 
			
		||||
                    </p>
 | 
			
		||||
 | 
			
		||||
					 
 | 
			
		||||
					<table class="body-sub">
 | 
			
		||||
                      <tbody><tr>
 | 
			
		||||
					  
 | 
			
		||||
					  <td>
 | 
			
		||||
                            <p class="sub">If you’re having trouble with the button 'Go to Dashboard', copy and paste the URL below into your web browser.</p>
 | 
			
		||||
                            <p class="sub"><a href="https://hermes-example.com/dashboard">https://hermes-example.com/dashboard</a></p>
 | 
			
		||||
                      </td>
 | 
			
		||||
					  
 | 
			
		||||
					  </tr>
 | 
			
		||||
					  </tbody>
 | 
			
		||||
					</table>
 | 
			
		||||
					
 | 
			
		||||
                    
 | 
			
		||||
                       
 | 
			
		||||
                        <table class="body-sub">
 | 
			
		||||
                          <tbody>
 | 
			
		||||
                              
 | 
			
		||||
                                <tr>
 | 
			
		||||
                                  <td>
 | 
			
		||||
                                    <p class="sub">If you’re having trouble with the button 'Go to Dashboard', copy and paste the URL below into your web browser.</p>
 | 
			
		||||
                                    <p class="sub"><a href="https://hermes-example.com/dashboard">https://hermes-example.com/dashboard</a></p>
 | 
			
		||||
                                  </td>
 | 
			
		||||
                                </tr>
 | 
			
		||||
                              
 | 
			
		||||
                          </tbody>
 | 
			
		||||
                        </table>
 | 
			
		||||
                      
 | 
			
		||||
                    
 | 
			
		||||
                  </td>
 | 
			
		||||
                </tr>
 | 
			
		||||
              </table>
 | 
			
		||||
 | 
			
		||||
@ -1,12 +1,24 @@
 | 
			
		||||
------------
 | 
			
		||||
Hi Jon Snow,
 | 
			
		||||
------------
 | 
			
		||||
 | 
			
		||||
Your order has been processed successfully.
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
You can check the status of your order and more in your dashboard:
 | 
			
		||||
https://hermes-example.com/dashboard
 | 
			
		||||
+--------+--------------------------------+--------+
 | 
			
		||||
|  ITEM  |          DESCRIPTION           | PRICE  |
 | 
			
		||||
+--------+--------------------------------+--------+
 | 
			
		||||
| Golang | Open source programming        | $10.99 |
 | 
			
		||||
|        | language that makes it easy    |        |
 | 
			
		||||
|        | to build simple, reliable, and |        |
 | 
			
		||||
|        | efficient software             |        |
 | 
			
		||||
| Hermes | Programmatically create        | $1.99  |
 | 
			
		||||
|        | beautiful e-mails using        |        |
 | 
			
		||||
|        | Golang.                        |        |
 | 
			
		||||
+--------+--------------------------------+--------+
 | 
			
		||||
 | 
			
		||||
You can check the status of your order and more in your dashboard: https://hermes-example.com/dashboard
 | 
			
		||||
 | 
			
		||||
Yours truly,
 | 
			
		||||
Hermes
 | 
			
		||||
Hermes - https://example-hermes.com/
 | 
			
		||||
 | 
			
		||||
Copyright © 2017 Hermes. All rights reserved.
 | 
			
		||||
Copyright © 2017 Hermes. All rights reserved.
 | 
			
		||||
@ -105,6 +105,10 @@
 | 
			
		||||
      margin-top: 25px;
 | 
			
		||||
      padding-top: 25px;
 | 
			
		||||
      border-top: 1px solid #EDEFF2;
 | 
			
		||||
      table-layout: fixed;
 | 
			
		||||
    }
 | 
			
		||||
    .body-sub a {
 | 
			
		||||
      word-break: break-all;
 | 
			
		||||
    }
 | 
			
		||||
    .content-cell {
 | 
			
		||||
      padding: 35px;
 | 
			
		||||
@ -131,6 +135,28 @@
 | 
			
		||||
      font-size: 14px;
 | 
			
		||||
      font-weight: bold;
 | 
			
		||||
    }
 | 
			
		||||
    blockquote {
 | 
			
		||||
      margin: 1.7rem 0;
 | 
			
		||||
      padding-left: 0.85rem;
 | 
			
		||||
      border-left: 10px solid #F0F2F4;
 | 
			
		||||
    }
 | 
			
		||||
    blockquote p {
 | 
			
		||||
        font-size: 1.1rem;
 | 
			
		||||
        color: #999;
 | 
			
		||||
    }
 | 
			
		||||
    blockquote cite {
 | 
			
		||||
        display: block;
 | 
			
		||||
        text-align: right;
 | 
			
		||||
        color: #666;
 | 
			
		||||
        font-size: 1.2rem;
 | 
			
		||||
    }
 | 
			
		||||
    cite {
 | 
			
		||||
      display: block;
 | 
			
		||||
      font-size: 0.925rem; 
 | 
			
		||||
    }
 | 
			
		||||
    cite:before {
 | 
			
		||||
      content: "\2014 \0020";
 | 
			
		||||
    }
 | 
			
		||||
    p {
 | 
			
		||||
      margin-top: 0;
 | 
			
		||||
      color: #74787E;
 | 
			
		||||
@ -143,6 +169,29 @@
 | 
			
		||||
    p.center {
 | 
			
		||||
      text-align: center;
 | 
			
		||||
    }
 | 
			
		||||
    table {
 | 
			
		||||
      width: 100%;
 | 
			
		||||
    }
 | 
			
		||||
    th {
 | 
			
		||||
      padding: 0px 5px;
 | 
			
		||||
      padding-bottom: 8px;
 | 
			
		||||
      border-bottom: 1px solid #EDEFF2;
 | 
			
		||||
    }
 | 
			
		||||
    th p {
 | 
			
		||||
      margin: 0;
 | 
			
		||||
      color: #9BA2AB;
 | 
			
		||||
      font-size: 12px;
 | 
			
		||||
    }
 | 
			
		||||
    td {
 | 
			
		||||
      padding: 10px 5px;
 | 
			
		||||
      color: #74787E;
 | 
			
		||||
      font-size: 15px;
 | 
			
		||||
      line-height: 18px;
 | 
			
		||||
    }
 | 
			
		||||
    .content {
 | 
			
		||||
      align: center;
 | 
			
		||||
      padding: 0;
 | 
			
		||||
    }
 | 
			
		||||
     
 | 
			
		||||
    .data-wrapper {
 | 
			
		||||
      width: 100%;
 | 
			
		||||
@ -201,7 +250,7 @@
 | 
			
		||||
<body dir="ltr">
 | 
			
		||||
  <table class="email-wrapper" width="100%" cellpadding="0" cellspacing="0">
 | 
			
		||||
    <tr>
 | 
			
		||||
      <td align="center">
 | 
			
		||||
      <td class="content">
 | 
			
		||||
        <table class="email-content" width="100%" cellpadding="0" cellspacing="0">
 | 
			
		||||
          
 | 
			
		||||
          <tr>
 | 
			
		||||
@ -213,6 +262,7 @@
 | 
			
		||||
                </a>
 | 
			
		||||
            </td>
 | 
			
		||||
          </tr>
 | 
			
		||||
 | 
			
		||||
          
 | 
			
		||||
          <tr>
 | 
			
		||||
            <td class="email-body" width="100%">
 | 
			
		||||
@ -221,68 +271,75 @@
 | 
			
		||||
                <tr>
 | 
			
		||||
                  <td class="content-cell">
 | 
			
		||||
                    <h1>Hi Jon Snow,</h1>
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
					<p>You have received this email because a password reset request for Hermes account was received.</p>
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
                    
 | 
			
		||||
                        
 | 
			
		||||
                          
 | 
			
		||||
                            <p>You have received this email because a password reset request for Hermes account was received.</p>
 | 
			
		||||
                          
 | 
			
		||||
                        
 | 
			
		||||
                    
 | 
			
		||||
                    
 | 
			
		||||
 | 
			
		||||
					
 | 
			
		||||
                      
 | 
			
		||||
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
                      
 | 
			
		||||
                      
 | 
			
		||||
                        
 | 
			
		||||
                        
 | 
			
		||||
                        
 | 
			
		||||
                      
 | 
			
		||||
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
					<p>Click the button below to reset your password:</p>
 | 
			
		||||
					<table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0">
 | 
			
		||||
						<tr>
 | 
			
		||||
							<td align="center">
 | 
			
		||||
							<div>
 | 
			
		||||
								<a href="https://hermes-example.com/reset-password?token=d9729feb74992cc3482b350163a1a010" class="button" style="background-color: #DC4D2F" target="_blank">Reset your password</a>
 | 
			
		||||
							</div>
 | 
			
		||||
							</td>
 | 
			
		||||
						</tr>
 | 
			
		||||
                    </table>
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
                      
 | 
			
		||||
                      
 | 
			
		||||
                        
 | 
			
		||||
                          
 | 
			
		||||
                            <p>Click the button below to reset your password:</p>
 | 
			
		||||
                            <table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0">
 | 
			
		||||
                              <tr>
 | 
			
		||||
                                <td align="center">
 | 
			
		||||
                                  <div>
 | 
			
		||||
                                    <a href="https://hermes-example.com/reset-password?token=d9729feb74992cc3482b350163a1a010" class="button" style="background-color: #DC4D2F" target="_blank">
 | 
			
		||||
                                      Reset your password
 | 
			
		||||
                                    </a>
 | 
			
		||||
                                  </div>
 | 
			
		||||
                                </td>
 | 
			
		||||
                              </tr>
 | 
			
		||||
                            </table>
 | 
			
		||||
                          
 | 
			
		||||
                        
 | 
			
		||||
                      
 | 
			
		||||
 | 
			
		||||
					 
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
					<p>If you did not request a password reset, no further action is required on your part.</p>
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
                    
 | 
			
		||||
                     
 | 
			
		||||
                        
 | 
			
		||||
                          
 | 
			
		||||
                            <p>If you did not request a password reset, no further action is required on your part.</p>
 | 
			
		||||
                          
 | 
			
		||||
                        
 | 
			
		||||
                      
 | 
			
		||||
 | 
			
		||||
                    <p>
 | 
			
		||||
                      Thanks,
 | 
			
		||||
                      <br>
 | 
			
		||||
                      <br />
 | 
			
		||||
                      Hermes
 | 
			
		||||
                    </p>
 | 
			
		||||
 | 
			
		||||
					 
 | 
			
		||||
					<table class="body-sub">
 | 
			
		||||
                      <tbody><tr>
 | 
			
		||||
					  
 | 
			
		||||
					  <td>
 | 
			
		||||
                            <p class="sub">If you’re having trouble with the button 'Reset your password', copy and paste the URL below into your web browser.</p>
 | 
			
		||||
                            <p class="sub"><a href="https://hermes-example.com/reset-password?token=d9729feb74992cc3482b350163a1a010">https://hermes-example.com/reset-password?token=d9729feb74992cc3482b350163a1a010</a></p>
 | 
			
		||||
                      </td>
 | 
			
		||||
					  
 | 
			
		||||
					  </tr>
 | 
			
		||||
					  </tbody>
 | 
			
		||||
					</table>
 | 
			
		||||
					
 | 
			
		||||
                    
 | 
			
		||||
                       
 | 
			
		||||
                        <table class="body-sub">
 | 
			
		||||
                          <tbody>
 | 
			
		||||
                              
 | 
			
		||||
                                <tr>
 | 
			
		||||
                                  <td>
 | 
			
		||||
                                    <p class="sub">If you’re having trouble with the button 'Reset your password', copy and paste the URL below into your web browser.</p>
 | 
			
		||||
                                    <p class="sub"><a href="https://hermes-example.com/reset-password?token=d9729feb74992cc3482b350163a1a010">https://hermes-example.com/reset-password?token=d9729feb74992cc3482b350163a1a010</a></p>
 | 
			
		||||
                                  </td>
 | 
			
		||||
                                </tr>
 | 
			
		||||
                              
 | 
			
		||||
                          </tbody>
 | 
			
		||||
                        </table>
 | 
			
		||||
                      
 | 
			
		||||
                    
 | 
			
		||||
                  </td>
 | 
			
		||||
                </tr>
 | 
			
		||||
              </table>
 | 
			
		||||
 | 
			
		||||
@ -1,13 +1,14 @@
 | 
			
		||||
------------
 | 
			
		||||
Hi Jon Snow,
 | 
			
		||||
------------
 | 
			
		||||
 | 
			
		||||
You have received this email because a password reset request for Hermes account was received.
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
Click the button below to reset your password:
 | 
			
		||||
https://hermes-example.com/reset-password?token=d9729feb74992cc3482b350163a1a010
 | 
			
		||||
 
 | 
			
		||||
Click the button below to reset your password: https://hermes-example.com/reset-password?token=d9729feb74992cc3482b350163a1a010
 | 
			
		||||
 | 
			
		||||
If you did not request a password reset, no further action is required on your part.
 | 
			
		||||
 | 
			
		||||
Thanks,
 | 
			
		||||
Hermes
 | 
			
		||||
Hermes - https://example-hermes.com/
 | 
			
		||||
 | 
			
		||||
Copyright © 2017 Hermes. All rights reserved.
 | 
			
		||||
Copyright © 2017 Hermes. All rights reserved.
 | 
			
		||||
@ -105,6 +105,10 @@
 | 
			
		||||
      margin-top: 25px;
 | 
			
		||||
      padding-top: 25px;
 | 
			
		||||
      border-top: 1px solid #EDEFF2;
 | 
			
		||||
      table-layout: fixed;
 | 
			
		||||
    }
 | 
			
		||||
    .body-sub a {
 | 
			
		||||
      word-break: break-all;
 | 
			
		||||
    }
 | 
			
		||||
    .content-cell {
 | 
			
		||||
      padding: 35px;
 | 
			
		||||
@ -131,6 +135,28 @@
 | 
			
		||||
      font-size: 14px;
 | 
			
		||||
      font-weight: bold;
 | 
			
		||||
    }
 | 
			
		||||
    blockquote {
 | 
			
		||||
      margin: 1.7rem 0;
 | 
			
		||||
      padding-left: 0.85rem;
 | 
			
		||||
      border-left: 10px solid #F0F2F4;
 | 
			
		||||
    }
 | 
			
		||||
    blockquote p {
 | 
			
		||||
        font-size: 1.1rem;
 | 
			
		||||
        color: #999;
 | 
			
		||||
    }
 | 
			
		||||
    blockquote cite {
 | 
			
		||||
        display: block;
 | 
			
		||||
        text-align: right;
 | 
			
		||||
        color: #666;
 | 
			
		||||
        font-size: 1.2rem;
 | 
			
		||||
    }
 | 
			
		||||
    cite {
 | 
			
		||||
      display: block;
 | 
			
		||||
      font-size: 0.925rem; 
 | 
			
		||||
    }
 | 
			
		||||
    cite:before {
 | 
			
		||||
      content: "\2014 \0020";
 | 
			
		||||
    }
 | 
			
		||||
    p {
 | 
			
		||||
      margin-top: 0;
 | 
			
		||||
      color: #74787E;
 | 
			
		||||
@ -143,6 +169,29 @@
 | 
			
		||||
    p.center {
 | 
			
		||||
      text-align: center;
 | 
			
		||||
    }
 | 
			
		||||
    table {
 | 
			
		||||
      width: 100%;
 | 
			
		||||
    }
 | 
			
		||||
    th {
 | 
			
		||||
      padding: 0px 5px;
 | 
			
		||||
      padding-bottom: 8px;
 | 
			
		||||
      border-bottom: 1px solid #EDEFF2;
 | 
			
		||||
    }
 | 
			
		||||
    th p {
 | 
			
		||||
      margin: 0;
 | 
			
		||||
      color: #9BA2AB;
 | 
			
		||||
      font-size: 12px;
 | 
			
		||||
    }
 | 
			
		||||
    td {
 | 
			
		||||
      padding: 10px 5px;
 | 
			
		||||
      color: #74787E;
 | 
			
		||||
      font-size: 15px;
 | 
			
		||||
      line-height: 18px;
 | 
			
		||||
    }
 | 
			
		||||
    .content {
 | 
			
		||||
      align: center;
 | 
			
		||||
      padding: 0;
 | 
			
		||||
    }
 | 
			
		||||
     
 | 
			
		||||
    .data-wrapper {
 | 
			
		||||
      width: 100%;
 | 
			
		||||
@ -201,7 +250,7 @@
 | 
			
		||||
<body dir="ltr">
 | 
			
		||||
  <table class="email-wrapper" width="100%" cellpadding="0" cellspacing="0">
 | 
			
		||||
    <tr>
 | 
			
		||||
      <td align="center">
 | 
			
		||||
      <td class="content">
 | 
			
		||||
        <table class="email-content" width="100%" cellpadding="0" cellspacing="0">
 | 
			
		||||
          
 | 
			
		||||
          <tr>
 | 
			
		||||
@ -213,6 +262,7 @@
 | 
			
		||||
                </a>
 | 
			
		||||
            </td>
 | 
			
		||||
          </tr>
 | 
			
		||||
 | 
			
		||||
          
 | 
			
		||||
          <tr>
 | 
			
		||||
            <td class="email-body" width="100%">
 | 
			
		||||
@ -221,83 +271,90 @@
 | 
			
		||||
                <tr>
 | 
			
		||||
                  <td class="content-cell">
 | 
			
		||||
                    <h1>Hi Jon Snow,</h1>
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
					<p>Welcome to Hermes! We're very excited to have you on board.</p>
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
                    
 | 
			
		||||
                        
 | 
			
		||||
                          
 | 
			
		||||
                            <p>Welcome to Hermes! We're very excited to have you on board.</p>
 | 
			
		||||
                          
 | 
			
		||||
                        
 | 
			
		||||
                    
 | 
			
		||||
                    
 | 
			
		||||
 | 
			
		||||
					 
 | 
			
		||||
					
 | 
			
		||||
					<dl class="body-dictionary">
 | 
			
		||||
					
 | 
			
		||||
						<dt>Firstname:</dt>
 | 
			
		||||
                        <dd>Jon</dd>
 | 
			
		||||
					
 | 
			
		||||
						<dt>Lastname:</dt>
 | 
			
		||||
                        <dd>Snow</dd>
 | 
			
		||||
					
 | 
			
		||||
						<dt>Birthday:</dt>
 | 
			
		||||
                        <dd>01/01/283</dd>
 | 
			
		||||
					
 | 
			
		||||
					 </dl>
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
                       
 | 
			
		||||
                        
 | 
			
		||||
                          <dl class="body-dictionary">
 | 
			
		||||
                            
 | 
			
		||||
                              <dt>Firstname:</dt>
 | 
			
		||||
                              <dd>Jon</dd>
 | 
			
		||||
                            
 | 
			
		||||
                              <dt>Lastname:</dt>
 | 
			
		||||
                              <dd>Snow</dd>
 | 
			
		||||
                            
 | 
			
		||||
                              <dt>Birthday:</dt>
 | 
			
		||||
                              <dd>01/01/283</dd>
 | 
			
		||||
                            
 | 
			
		||||
                          </dl>
 | 
			
		||||
                        
 | 
			
		||||
                      
 | 
			
		||||
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
                      
 | 
			
		||||
                      
 | 
			
		||||
                        
 | 
			
		||||
                        
 | 
			
		||||
                        
 | 
			
		||||
                      
 | 
			
		||||
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
					<p>To get started with Hermes, please click here:</p>
 | 
			
		||||
					<table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0">
 | 
			
		||||
						<tr>
 | 
			
		||||
							<td align="center">
 | 
			
		||||
							<div>
 | 
			
		||||
								<a href="https://hermes-example.com/confirm?token=d9729feb74992cc3482b350163a1a010" class="button" style="background-color: #22BC66" target="_blank">Confirm your account</a>
 | 
			
		||||
							</div>
 | 
			
		||||
							</td>
 | 
			
		||||
						</tr>
 | 
			
		||||
                    </table>
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
                      
 | 
			
		||||
                      
 | 
			
		||||
                        
 | 
			
		||||
                          
 | 
			
		||||
                            <p>To get started with Hermes, please click here:</p>
 | 
			
		||||
                            <table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0">
 | 
			
		||||
                              <tr>
 | 
			
		||||
                                <td align="center">
 | 
			
		||||
                                  <div>
 | 
			
		||||
                                    <a href="https://hermes-example.com/confirm?token=d9729feb74992cc3482b350163a1a010" class="button" style="background-color: " target="_blank">
 | 
			
		||||
                                      Confirm your account
 | 
			
		||||
                                    </a>
 | 
			
		||||
                                  </div>
 | 
			
		||||
                                </td>
 | 
			
		||||
                              </tr>
 | 
			
		||||
                            </table>
 | 
			
		||||
                          
 | 
			
		||||
                        
 | 
			
		||||
                      
 | 
			
		||||
 | 
			
		||||
					 
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
					<p>Need help, or have questions? Just reply to this email, we'd love to help.</p>
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
					
 | 
			
		||||
                    
 | 
			
		||||
                     
 | 
			
		||||
                        
 | 
			
		||||
                          
 | 
			
		||||
                            <p>Need help, or have questions? Just reply to this email, we'd love to help.</p>
 | 
			
		||||
                          
 | 
			
		||||
                        
 | 
			
		||||
                      
 | 
			
		||||
 | 
			
		||||
                    <p>
 | 
			
		||||
                      Yours truly,
 | 
			
		||||
                      <br>
 | 
			
		||||
                      <br />
 | 
			
		||||
                      Hermes
 | 
			
		||||
                    </p>
 | 
			
		||||
 | 
			
		||||
					 
 | 
			
		||||
					<table class="body-sub">
 | 
			
		||||
                      <tbody><tr>
 | 
			
		||||
					  
 | 
			
		||||
					  <td>
 | 
			
		||||
                            <p class="sub">If you’re having trouble with the button 'Confirm your account', copy and paste the URL below into your web browser.</p>
 | 
			
		||||
                            <p class="sub"><a href="https://hermes-example.com/confirm?token=d9729feb74992cc3482b350163a1a010">https://hermes-example.com/confirm?token=d9729feb74992cc3482b350163a1a010</a></p>
 | 
			
		||||
                      </td>
 | 
			
		||||
					  
 | 
			
		||||
					  </tr>
 | 
			
		||||
					  </tbody>
 | 
			
		||||
					</table>
 | 
			
		||||
					
 | 
			
		||||
                    
 | 
			
		||||
                       
 | 
			
		||||
                        <table class="body-sub">
 | 
			
		||||
                          <tbody>
 | 
			
		||||
                              
 | 
			
		||||
                                <tr>
 | 
			
		||||
                                  <td>
 | 
			
		||||
                                    <p class="sub">If you’re having trouble with the button 'Confirm your account', copy and paste the URL below into your web browser.</p>
 | 
			
		||||
                                    <p class="sub"><a href="https://hermes-example.com/confirm?token=d9729feb74992cc3482b350163a1a010">https://hermes-example.com/confirm?token=d9729feb74992cc3482b350163a1a010</a></p>
 | 
			
		||||
                                  </td>
 | 
			
		||||
                                </tr>
 | 
			
		||||
                              
 | 
			
		||||
                          </tbody>
 | 
			
		||||
                        </table>
 | 
			
		||||
                      
 | 
			
		||||
                    
 | 
			
		||||
                  </td>
 | 
			
		||||
                </tr>
 | 
			
		||||
              </table>
 | 
			
		||||
 | 
			
		||||
@ -1,16 +1,18 @@
 | 
			
		||||
------------
 | 
			
		||||
Hi Jon Snow,
 | 
			
		||||
Welcome to Hermes! We're very excited to have you on board.
 | 
			
		||||
------------
 | 
			
		||||
 | 
			
		||||
Firstname: Jon
 | 
			
		||||
Lastname: Snow
 | 
			
		||||
Birthday: 01/01/283
 | 
			
		||||
 
 | 
			
		||||
To get started with Hermes, please click here:
 | 
			
		||||
https://hermes-example.com/confirm?token=d9729feb74992cc3482b350163a1a010
 | 
			
		||||
 
 | 
			
		||||
Need help, or have questions? Just reply to this email, we'd love to help.
 | 
			
		||||
Welcome to Hermes! We're very excited to have you on board.
 | 
			
		||||
 | 
			
		||||
* Firstname: Jon
 | 
			
		||||
* Lastname: Snow
 | 
			
		||||
* Birthday: 01/01/283
 | 
			
		||||
 | 
			
		||||
To get started with Hermes, please click here: https://hermes-example.com/confirm?token=d9729feb74992cc3482b350163a1a010
 | 
			
		||||
 | 
			
		||||
Need help, or have questions? Just reply to this email, we'd love to help.
 | 
			
		||||
 | 
			
		||||
Yours truly,
 | 
			
		||||
Hermes
 | 
			
		||||
Hermes - https://example-hermes.com/
 | 
			
		||||
 | 
			
		||||
Copyright © 2017 Hermes. All rights reserved.
 | 
			
		||||
Copyright © 2017 Hermes. All rights reserved.
 | 
			
		||||
@ -1,55 +0,0 @@
 | 
			
		||||
package main
 | 
			
		||||
 | 
			
		||||
import (
 | 
			
		||||
	"fmt"
 | 
			
		||||
	"github.com/matcornic/hermes"
 | 
			
		||||
	"io/ioutil"
 | 
			
		||||
)
 | 
			
		||||
 | 
			
		||||
type example interface {
 | 
			
		||||
	Email() hermes.Email
 | 
			
		||||
	Name() string
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
func main() {
 | 
			
		||||
	h := hermes.Hermes{
 | 
			
		||||
		Product: hermes.Product{
 | 
			
		||||
			Name: "Hermes",
 | 
			
		||||
			Link: "https://example-hermes.com/",
 | 
			
		||||
			Logo: "http://www.duchess-france.org/wp-content/uploads/2016/01/gopher.png",
 | 
			
		||||
		},
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
	examples := []example{
 | 
			
		||||
		new(welcome),
 | 
			
		||||
		new(reset),
 | 
			
		||||
		new(receipt),
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
	for _, e := range examples {
 | 
			
		||||
		generateEmails(h, e.Email(), e.Name())
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
func generateEmails(h hermes.Hermes, email hermes.Email, example string) {
 | 
			
		||||
	// Generate the HTML template and save it
 | 
			
		||||
	res, err := h.GenerateHTML(email)
 | 
			
		||||
	if err != nil {
 | 
			
		||||
		panic(err)
 | 
			
		||||
	}
 | 
			
		||||
	err = ioutil.WriteFile(fmt.Sprintf("%v.%v.html", h.Theme.Name(), example), []byte(res), 0644)
 | 
			
		||||
	if err != nil {
 | 
			
		||||
		panic(err)
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
	// Generate the plaintext template and save it
 | 
			
		||||
	res, err = h.GeneratePlainText(email)
 | 
			
		||||
	if err != nil {
 | 
			
		||||
		panic(err)
 | 
			
		||||
	}
 | 
			
		||||
	err = ioutil.WriteFile(fmt.Sprintf("%v.%v.txt", h.Theme.Name(), example), []byte(res), 0644)
 | 
			
		||||
	if err != nil {
 | 
			
		||||
		panic(err)
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
@ -1,55 +0,0 @@
 | 
			
		||||
package main
 | 
			
		||||
 | 
			
		||||
import (
 | 
			
		||||
	"github.com/matcornic/hermes"
 | 
			
		||||
)
 | 
			
		||||
 | 
			
		||||
type receipt struct {
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
func (r *receipt) Name() string {
 | 
			
		||||
	return "receipt"
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
func (r *receipt) Email() hermes.Email {
 | 
			
		||||
	return hermes.Email{
 | 
			
		||||
		Body: hermes.Body{
 | 
			
		||||
			Name: "Jon Snow",
 | 
			
		||||
			Intros: []string{
 | 
			
		||||
				"Your order has been processed successfully.",
 | 
			
		||||
			},
 | 
			
		||||
			Table: hermes.Table{
 | 
			
		||||
				Data: [][]hermes.Entry{
 | 
			
		||||
					{
 | 
			
		||||
						{Key: "Item", Value: "Golang"},
 | 
			
		||||
						{Key: "Description", Value: "Open source programming language that makes it easy to build simple, reliable, and efficient software"},
 | 
			
		||||
						{Key: "Price", Value: "$10.99"},
 | 
			
		||||
					},
 | 
			
		||||
					{
 | 
			
		||||
						{Key: "Item", Value: "Hermes"},
 | 
			
		||||
						{Key: "Description", Value: "Programmatically create beautiful e-mails using Golang."},
 | 
			
		||||
						{Key: "Price", Value: "$1.99"},
 | 
			
		||||
					},
 | 
			
		||||
				},
 | 
			
		||||
				Columns: hermes.Columns{
 | 
			
		||||
					CustomWidth: map[string]string{
 | 
			
		||||
						"Item":  "20%",
 | 
			
		||||
						"Price": "15%",
 | 
			
		||||
					},
 | 
			
		||||
					CustomAlignement: map[string]string{
 | 
			
		||||
						"Price": "right",
 | 
			
		||||
					},
 | 
			
		||||
				},
 | 
			
		||||
			},
 | 
			
		||||
			Actions: []hermes.Action{
 | 
			
		||||
				{
 | 
			
		||||
					Instructions: "You can check the status of your order and more in your dashboard:",
 | 
			
		||||
					Button: hermes.Button{
 | 
			
		||||
						Text: "Go to Dashboard",
 | 
			
		||||
						Link: "https://hermes-example.com/dashboard",
 | 
			
		||||
					},
 | 
			
		||||
				},
 | 
			
		||||
			},
 | 
			
		||||
		},
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
@ -1,37 +0,0 @@
 | 
			
		||||
package main
 | 
			
		||||
 | 
			
		||||
import (
 | 
			
		||||
	"github.com/matcornic/hermes"
 | 
			
		||||
)
 | 
			
		||||
 | 
			
		||||
type reset struct {
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
func (r *reset) Name() string {
 | 
			
		||||
	return "reset"
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
func (r *reset) Email() hermes.Email {
 | 
			
		||||
	return hermes.Email{
 | 
			
		||||
		Body: hermes.Body{
 | 
			
		||||
			Name: "Jon Snow",
 | 
			
		||||
			Intros: []string{
 | 
			
		||||
				"You have received this email because a password reset request for Hermes account was received.",
 | 
			
		||||
			},
 | 
			
		||||
			Actions: []hermes.Action{
 | 
			
		||||
				{
 | 
			
		||||
					Instructions: "Click the button below to reset your password:",
 | 
			
		||||
					Button: hermes.Button{
 | 
			
		||||
						Color: "#DC4D2F",
 | 
			
		||||
						Text:  "Reset your password",
 | 
			
		||||
						Link:  "https://hermes-example.com/reset-password?token=d9729feb74992cc3482b350163a1a010",
 | 
			
		||||
					},
 | 
			
		||||
				},
 | 
			
		||||
			},
 | 
			
		||||
			Outros: []string{
 | 
			
		||||
				"If you did not request a password reset, no further action is required on your part.",
 | 
			
		||||
			},
 | 
			
		||||
			Signature: "Thanks",
 | 
			
		||||
		},
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
@ -1,41 +0,0 @@
 | 
			
		||||
package main
 | 
			
		||||
 | 
			
		||||
import (
 | 
			
		||||
	"github.com/matcornic/hermes"
 | 
			
		||||
)
 | 
			
		||||
 | 
			
		||||
type welcome struct {
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
func (w *welcome) Name() string {
 | 
			
		||||
	return "welcome"
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
func (w *welcome) Email() hermes.Email {
 | 
			
		||||
	return hermes.Email{
 | 
			
		||||
		Body: hermes.Body{
 | 
			
		||||
			Name: "Jon Snow",
 | 
			
		||||
			Intros: []string{
 | 
			
		||||
				"Welcome to Hermes! We're very excited to have you on board.",
 | 
			
		||||
			},
 | 
			
		||||
			Dictionary: []hermes.Entry{
 | 
			
		||||
				{Key: "Firstname", Value: "Jon"},
 | 
			
		||||
				{Key: "Lastname", Value: "Snow"},
 | 
			
		||||
				{Key: "Birthday", Value: "01/01/283"},
 | 
			
		||||
			},
 | 
			
		||||
			Actions: []hermes.Action{
 | 
			
		||||
				{
 | 
			
		||||
					Instructions: "To get started with Hermes, please click here:",
 | 
			
		||||
					Button: hermes.Button{
 | 
			
		||||
						Color: "#22BC66",
 | 
			
		||||
						Text:  "Confirm your account",
 | 
			
		||||
						Link:  "https://hermes-example.com/confirm?token=d9729feb74992cc3482b350163a1a010",
 | 
			
		||||
					},
 | 
			
		||||
				},
 | 
			
		||||
			},
 | 
			
		||||
			Outros: []string{
 | 
			
		||||
				"Need help, or have questions? Just reply to this email, we'd love to help.",
 | 
			
		||||
			},
 | 
			
		||||
		},
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
		Reference in New Issue
	
	Block a user