github.com/masterhung0112/hk_server/v5@v5.0.0-20220302090640-ec71aef15e1c/templates/cloud_trial_ended_email.html (about)

     1  {{define "cloud_trial_ended_email"}}
     2  
     3  <!-- FILE: cloud_trial_ended_email.mjml -->
     4  <!doctype html>
     5  <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
     6  
     7  <head>
     8    <title>
     9    </title>
    10    <!--[if !mso]><!-->
    11    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    12    <!--<![endif]-->
    13    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    14    <meta name="viewport" content="width=device-width, initial-scale=1">
    15    <style type="text/css">
    16      #outlook a {
    17        padding: 0;
    18      }
    19  
    20      body {
    21        margin: 0;
    22        padding: 0;
    23        -webkit-text-size-adjust: 100%;
    24        -ms-text-size-adjust: 100%;
    25      }
    26  
    27      table,
    28      td {
    29        border-collapse: collapse;
    30        mso-table-lspace: 0pt;
    31        mso-table-rspace: 0pt;
    32      }
    33  
    34      img {
    35        border: 0;
    36        height: auto;
    37        line-height: 100%;
    38        outline: none;
    39        text-decoration: none;
    40        -ms-interpolation-mode: bicubic;
    41      }
    42  
    43      p {
    44        display: block;
    45        margin: 13px 0;
    46      }
    47    </style>
    48    <!--[if mso]>
    49          <xml>
    50          <o:OfficeDocumentSettings>
    51            <o:AllowPNG/>
    52            <o:PixelsPerInch>96</o:PixelsPerInch>
    53          </o:OfficeDocumentSettings>
    54          </xml>
    55          <![endif]-->
    56    <!--[if lte mso 11]>
    57          <style type="text/css">
    58            .mj-outlook-group-fix { width:100% !important; }
    59          </style>
    60          <![endif]-->
    61    <style type="text/css">
    62      @media only screen and (min-width:480px) {
    63        .mj-column-per-100 {
    64          width: 100% !important;
    65          max-width: 100%;
    66        }
    67      }
    68    </style>
    69    <style media="screen and (min-width:480px)">
    70      .moz-text-html .mj-column-per-100 {
    71        width: 100% !important;
    72        max-width: 100%;
    73      }
    74    </style>
    75    <style type="text/css">
    76      @media only screen and (max-width:480px) {
    77        table.mj-full-width-mobile {
    78          width: 100% !important;
    79        }
    80  
    81        td.mj-full-width-mobile {
    82          width: auto !important;
    83        }
    84      }
    85    </style>
    86    <style type="text/css">
    87      @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700);
    88  
    89      .emailBody {
    90        background: #F3F3F3 !important;
    91      }
    92  
    93      .emailBody a {
    94        text-decoration: none !important;
    95        color: #166DE0 !important;
    96      }
    97  
    98      .title div {
    99        font-weight: 600 !important;
   100        font-size: 28px !important;
   101        line-height: 36px !important;
   102        letter-spacing: -0.02em !important;
   103        color: #3D3C40 !important;
   104      }
   105  
   106      .subTitle div {
   107        font-size: 16px !important;
   108        line-height: 24px !important;
   109        color: rgba(61, 60, 64, 0.64) !important;
   110      }
   111  
   112      .button a {
   113        background-color: #166DE0 !important;
   114        font-weight: 600 !important;
   115        font-size: 16px !important;
   116        line-height: 18px !important;
   117        color: #FFFFFF !important;
   118        padding: 15px 24px !important;
   119      }
   120  
   121      .info div {
   122        font-size: 14px !important;
   123        line-height: 20px !important;
   124        color: #3D3C40 !important;
   125        padding: 40px 0px !important;
   126      }
   127  
   128      .footerTitle div {
   129        font-weight: 600 !important;
   130        font-size: 16px !important;
   131        line-height: 24px !important;
   132        color: #3D3C40 !important;
   133        padding: 0px 0px 4px 0px !important;
   134      }
   135  
   136      .footerInfo div {
   137        font-size: 14px !important;
   138        line-height: 20px !important;
   139        color: #3D3C40 !important;
   140        padding: 0px 48px 0px 48px !important;
   141      }
   142  
   143      .footerInfo a {
   144        color: #166DE0 !important;
   145      }
   146  
   147      .appDownloadButton a {
   148        background-color: #FFFFFF !important;
   149        border: 1px solid #166DE0 !important;
   150        box-sizing: border-box !important;
   151        color: #166DE0 !important;
   152        padding: 13px 20px !important;
   153        font-weight: 600 !important;
   154        font-size: 14px !important;
   155        line-height: 14px !important;
   156      }
   157  
   158      .emailFooter div {
   159        font-size: 12px !important;
   160        line-height: 16px !important;
   161        color: rgba(61, 60, 64, 0.56) !important;
   162        padding: 8px 24px 8px 24px !important;
   163      }
   164  
   165      .postCard {
   166        padding: 0px 24px 40px 24px !important;
   167      }
   168  
   169      .messageCard {
   170        background: #FFFFFF !important;
   171        border: 1px solid rgba(61, 60, 64, 0.08) !important;
   172        box-sizing: border-box !important;
   173        box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12) !important;
   174        border-radius: 4px !important;
   175        padding: 32px !important;
   176      }
   177  
   178      .messageAvatar img {
   179        width: 32px !important;
   180        height: 32px !important;
   181        padding: 0px !important;
   182        border-radius: 32px !important;
   183      }
   184  
   185      .messageAvatarCol {
   186        width: 32px !important;
   187      }
   188  
   189      .senderName div {
   190        text-align: left !important;
   191        font-weight: 600 !important;
   192        font-size: 14px !important;
   193        line-height: 20px !important;
   194        color: #3D3C40 !important;
   195        padding: 0px 0px 4px 0px !important;
   196      }
   197  
   198      .senderMessage div {
   199        text-align: left !important;
   200        font-size: 14px !important;
   201        line-height: 20px !important;
   202        color: #3D3C40 !important;
   203        padding: 0px !important;
   204      }
   205  
   206      .senderInfoCol {
   207        width: 394px !important;
   208        padding: 0px 0px 0px 12px !important;
   209      }
   210  
   211      @media all and (min-width: 541px) {
   212        .emailBody {
   213          padding: 32px !important;
   214        }
   215      }
   216  
   217      @media all and (max-width: 540px) and (min-width: 401px) {
   218        .emailBody {
   219          padding: 16px !important;
   220        }
   221  
   222        .messageCard {
   223          padding: 16px !important;
   224        }
   225  
   226        .senderInfoCol {
   227          width: 80% !important;
   228          padding: 0px 0px 0px 12px !important;
   229        }
   230      }
   231  
   232      @media all and (max-width: 400px) {
   233        .emailBody {
   234          padding: 0px !important;
   235        }
   236  
   237        .footerInfo div {
   238          padding: 0px !important;
   239        }
   240  
   241        .messageCard {
   242          padding: 16px !important;
   243        }
   244  
   245        .postCard {
   246          padding: 0px 0px 40px 0px !important;
   247        }
   248  
   249        .senderInfoCol {
   250          width: 80% !important;
   251          padding: 0px 0px 0px 12px !important;
   252        }
   253      }
   254    </style>
   255  </head>
   256  
   257  <body style="word-spacing:normal;">
   258    <div class="emailBody" style="">
   259      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
   260      <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;border-radius:0;max-width:600px;">
   261        <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;border-radius:0;">
   262          <tbody>
   263            <tr>
   264              <td style="direction:ltr;font-size:0px;padding:24px;text-align:center;">
   265                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:552px;" width="552" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
   266                <div style="margin:0px auto;max-width:552px;">
   267                  <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
   268                    <tbody>
   269                      <tr>
   270                        <td style="border-left:1px solid #E5E5E5;border-right:1px solid #E5E5E5;border-top:1px solid #E5E5E5;direction:ltr;font-size:0px;padding:24px;text-align:center;">
   271                          <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:502px;" ><![endif]-->
   272                          <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
   273                            <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
   274                              <tbody>
   275                                <tr>
   276                                  <td align="left" style="font-size:0px;padding:0px;word-break:break-word;">
   277                                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
   278                                      <tbody>
   279                                        <tr>
   280                                          <td style="width:132px;">
   281                                            <img alt="" height="21" src="{{.Props.SiteURL}}/static/images/logo_email_gray.png" style="border:0;display:block;outline:none;text-decoration:none;height:21.76px;width:100%;font-size:13px;" width="132" />
   282                                          </td>
   283                                        </tr>
   284                                      </tbody>
   285                                    </table>
   286                                  </td>
   287                                </tr>
   288                              </tbody>
   289                            </table>
   290                          </div>
   291                          <!--[if mso | IE]></td></tr></table><![endif]-->
   292                        </td>
   293                      </tr>
   294                    </tbody>
   295                  </table>
   296                </div>
   297                <!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:552px;" width="552" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
   298                <div style="margin:0px auto;max-width:552px;">
   299                  <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
   300                    <tbody>
   301                      <tr>
   302                        <td style="border-left:1px solid #E5E5E5;border-right:1px solid #E5E5E5;direction:ltr;font-size:0px;padding:0 60px;text-align:center;">
   303                          <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:430px;" ><![endif]-->
   304                          <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
   305                            <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
   306                              <tbody>
   307                                <tr>
   308                                  <td align="left" class="title" style="font-size:0px;padding:10px 0px;word-break:break-word;">
   309                                    <div style="font-family:Arial;font-size:13px;line-height:1;text-align:left;color:#000000;">{{.Props.Title}}</div>
   310                                  </td>
   311                                </tr>
   312                                <tr>
   313                                  <td align="left" style="font-size:0px;padding:10px 0px;padding-bottom:24px;word-break:break-word;">
   314                                    <div style="font-family:Arial;font-size:16px;line-height:24px;text-align:left;color:#000000;">{{.Props.SubTitle}}</div>
   315                                  </td>
   316                                </tr>
   317                                <tr>
   318                                  <td align="left" vertical-align="middle" class="button" style="font-size:0px;padding:0px;word-break:break-word;">
   319                                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
   320                                      <tr>
   321                                        <td align="center" bgcolor="#FFFFFF" role="presentation" style="border:none;border-radius:4px;border-top:16px;cursor:auto;mso-padding-alt:10px 25px;background:#FFFFFF;" valign="middle">
   322                                          <a href="{{.Props.ButtonURL}}" style="display:inline-block;background:#FFFFFF;color:#ffffff;font-family:Arial;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:4px;" target="_blank">
   323                                            {{.Props.Button}}
   324                                          </a>
   325                                        </td>
   326                                      </tr>
   327                                    </table>
   328                                  </td>
   329                                </tr>
   330                              </tbody>
   331                            </table>
   332                          </div>
   333                          <!--[if mso | IE]></td></tr></table><![endif]-->
   334                        </td>
   335                      </tr>
   336                    </tbody>
   337                  </table>
   338                </div>
   339                <!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:552px;" width="552" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
   340                <div style="margin:0px auto;max-width:552px;">
   341                  <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
   342                    <tbody>
   343                      <tr>
   344                        <td style="border-left:1px solid #E5E5E5;border-right:1px solid #E5E5E5;direction:ltr;font-size:0px;padding:40px;text-align:center;">
   345                          <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:470px;" ><![endif]-->
   346                          <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
   347                            <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
   348                              <tbody>
   349                                <tr>
   350                                  <td align="center" style="font-size:0px;padding:0px;word-break:break-word;">
   351                                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
   352                                      <tbody>
   353                                        <tr>
   354                                          <td style="width:320px;">
   355                                            <img alt="" height="auto" src="{{.Props.SiteURL}}/static/images/add_subscription.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="320" />
   356                                          </td>
   357                                        </tr>
   358                                      </tbody>
   359                                    </table>
   360                                  </td>
   361                                </tr>
   362                              </tbody>
   363                            </table>
   364                          </div>
   365                          <!--[if mso | IE]></td></tr></table><![endif]-->
   366                        </td>
   367                      </tr>
   368                    </tbody>
   369                  </table>
   370                </div>
   371                <!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:552px;" width="552" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
   372                <div style="margin:0px auto;max-width:552px;">
   373                  <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
   374                    <tbody>
   375                      <tr>
   376                        <td style="border-left:1px solid #E5E5E5;border-right:1px solid #E5E5E5;direction:ltr;font-size:0px;padding:24px 24px 24px 24px;text-align:center;">
   377                          <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:502px;" ><![endif]-->
   378                          <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
   379                            <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-top:1px solid #E5E5E5;vertical-align:top;" width="100%">
   380                              <tbody>
   381                                <tr>
   382                                  <td align="left" class="footerTitle" style="font-size:0px;padding:24px 0px 0px 0px;word-break:break-word;">
   383                                    <div style="font-family:Arial;font-size:13px;line-height:1;text-align:left;color:#000000;">{{.Props.QuestionTitle}}</div>
   384                                  </td>
   385                                </tr>
   386                                <tr>
   387                                  <td align="left" style="font-size:0px;padding:0px 0px ;word-break:break-word;">
   388                                    <div style="font-family:Arial;font-size:14px;line-height:20px;text-align:left;color:#3D3C40;">{{.Props.QuestionInfo}}
   389                                      <a href='mailto:{{.Props.SupportEmail}}'>
   390                                        {{.Props.SupportEmail}}
   391                                      </a>
   392                                    </div>
   393                                  </td>
   394                                </tr>
   395                              </tbody>
   396                            </table>
   397                          </div>
   398                          <!--[if mso | IE]></td></tr></table><![endif]-->
   399                        </td>
   400                      </tr>
   401                    </tbody>
   402                  </table>
   403                </div>
   404                <!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:552px;" width="552" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
   405                <div style="margin:0px auto;max-width:552px;">
   406                  <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
   407                    <tbody>
   408                      <tr>
   409                        <td style="border-bottom:1px solid #E5E5E5;border-left:1px solid #E5E5E5;border-right:1px solid #E5E5E5;direction:ltr;font-size:0px;padding:0px 24px 24px 24px;text-align:center;">
   410                          <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:502px;" ><![endif]-->
   411                          <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
   412                            <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-top:1px solid #E5E5E5;vertical-align:top;" width="100%">
   413                              <tbody>
   414                                <tr>
   415                                  <td align="center" class="emailFooter" style="font-size:0px;padding:0px;word-break:break-word;">
   416                                    <div style="font-family:Arial;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.Organization}}
   417                                      {{.Props.FooterV2}}
   418                                    </div>
   419                                  </td>
   420                                </tr>
   421                              </tbody>
   422                            </table>
   423                          </div>
   424                          <!--[if mso | IE]></td></tr></table><![endif]-->
   425                        </td>
   426                      </tr>
   427                    </tbody>
   428                  </table>
   429                </div>
   430                <!--[if mso | IE]></td></tr></table></td></tr></table><![endif]-->
   431              </td>
   432            </tr>
   433          </tbody>
   434        </table>
   435      </div>
   436      <!--[if mso | IE]></td></tr></table><![endif]-->
   437    </div>
   438  </body>
   439  
   440  </html>
   441  
   442  {{end}}