From 21c05dfc3b8b6f7a3733ad05b4b3c0062b0379ca Mon Sep 17 00:00:00 2001
From: ZanJereb <zan_jereb@hotmail.com>
Date: Thu, 22 Feb 2024 14:47:22 +0100
Subject: [PATCH] Update en-airdrop-claim.html

---
 .../src/templates/mail/en-airdrop-claim.html  | 723 ++++++++++++++++--
 1 file changed, 666 insertions(+), 57 deletions(-)
diff --git a/backend/src/templates/mail/en-airdrop-claim.html b/backend/src/templates/mail/en-airdrop-claim.html
index 4443324..298114a 100644
--- a/backend/src/templates/mail/en-airdrop-claim.html
+++ b/backend/src/templates/mail/en-airdrop-claim.html
@@ -3,88 +3,697 @@
   <head>
     <meta charset="UTF-8" />
     <title>Airdrop claim</title>
-    <link
-      href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap"
-      rel="stylesheet"
-    />
+
     <style type="text/css">
+      /* CONFIG STYLES Please do not delete and edit CSS styles below */
+      /* IMPORTANT THIS STYLES MUST BE ON FINAL EMAIL */
+      #outlook a {
+        padding: 0;
+      }
+
+      .ExternalClass {
+        width: 100%;
+      }
+
+      .ExternalClass,
+      .ExternalClass p,
+      .ExternalClass span,
+      .ExternalClass font,
+      .ExternalClass td,
+      .ExternalClass div {
+        line-height: 100%;
+      }
+
+      .button {
+        mso-style-priority: 100 !important;
+        text-decoration: none !important;
+      }
+
+      a[x-apple-data-detectors] {
+        color: inherit !important;
+        text-decoration: none !important;
+        font-size: inherit !important;
+        font-family: inherit !important;
+        font-weight: inherit !important;
+        line-height: inherit !important;
+      }
+
+      [data-ogsb] .button {
+        border-width: 0 !important;
+        padding: 16px 40px 16px 40px !important;
+      }
+
+      /*
+        END OF IMPORTANT
+        */
+      s {
+        text-decoration: line-through;
+      }
+
+      html,
       body {
-        font-family: "Open Sans", sans-serif;
-        margin: 0;
+        width: 100%;
+        -webkit-text-size-adjust: 100%;
+        -ms-text-size-adjust: 100%;
+      }
+
+      body {
+        font-family: 'arial', 'helvetica neue', 'helvetica', 'sans-serif';
+      }
+
+      table {
+        mso-table-lspace: 0pt;
+        mso-table-rspace: 0pt;
+        border-collapse: collapse;
+        border-spacing: 0px;
+      }
+
+      table td,
+      html,
+      body,
+      .wrapper {
         padding: 0;
-        background-color: #ffffff;
-        margin-top: 50px;
+        margin: 0;
+      }
+
+      .content,
+      .header,
+      .footer {
+        table-layout: fixed !important;
+        width: 100%;
       }
 
       img {
-        width: 150px;
-        margin: 0 0 30px 30px;
+        display: block;
+        border: 0;
+        outline: none;
+        text-decoration: none;
+        -ms-interpolation-mode: bicubic;
       }
 
-      h1 {
-        font-size: 24px;
-        color: #203142;
-        margin: 0 30px 30px 30px;
-        padding: 0 30px 0 0;
+      table tr {
+        border-collapse: collapse;
       }
 
-      p {
-        font-size: 18px;
-        margin: 0 30px 20px 30px;
+      p,
+      hr {
+        margin: 0;
+      }
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5 {
+        margin: 0;
+        line-height: 120%;
+        mso-line-height-rule: exactly;
+        font-family: 'arial', 'helvetica neue', 'helvetica', 'sans-serif';
+      }
+
+      p,
+      ul li,
+      ol li,
+      a {
+        -webkit-text-size-adjust: none;
+        -ms-text-size-adjust: none;
+        mso-line-height-rule: exactly;
+      }
+
+      .left {
+        float: left;
+      }
+
+      .right {
+        float: right;
+      }
+
+      .p5 {
+        padding: 5px;
+      }
+
+      .p5t {
+        padding-top: 5px;
+      }
+
+      .p5b {
+        padding-bottom: 5px;
+      }
+
+      .p5l {
+        padding-left: 5px;
+      }
+
+      .p5r {
+        padding-right: 5px;
+      }
+
+      .p10 {
+        padding: 10px;
+      }
+
+      .p10t {
+        padding-top: 10px;
+      }
+
+      .p10b {
+        padding-bottom: 10px;
+      }
+
+      .p10l {
+        padding-left: 10px;
+      }
+
+      .p10r {
+        padding-right: 10px;
+      }
+
+      .p15 {
+        padding: 15px;
+      }
+
+      .p15t {
+        padding-top: 15px;
+      }
+
+      .p15b {
+        padding-bottom: 15px;
+      }
+
+      .p15l {
+        padding-left: 15px;
+      }
+
+      .p15r {
+        padding-right: 15px;
+      }
+
+      .p20 {
+        padding: 20px;
+      }
+
+      .p20t {
+        padding-top: 20px;
+      }
+
+      .p20b {
+        padding-bottom: 20px;
+      }
+
+      .p20l {
+        padding-left: 20px;
+      }
+
+      .p20r {
+        padding-right: 20px;
+      }
+
+      .p25 {
+        padding: 25px;
+      }
+
+      .p25t {
+        padding-top: 25px;
+      }
+
+      .p25b {
+        padding-bottom: 25px;
+      }
+
+      .p25l {
+        padding-left: 25px;
+      }
+
+      .p25r {
+        padding-right: 25px;
+      }
+
+      .p30 {
+        padding: 30px;
+      }
+
+      .p30t {
+        padding-top: 30px;
+      }
+
+      .p30b {
+        padding-bottom: 30px;
+      }
+
+      .p30l {
+        padding-left: 30px;
       }
 
-      span {
+      .p30r {
+        padding-right: 30px;
+      }
+
+      .p35 {
+        padding: 35px;
+      }
+
+      .p35t {
+        padding-top: 35px;
+      }
+
+      .p35b {
+        padding-bottom: 35px;
+      }
+
+      .p35l {
+        padding-left: 35px;
+      }
+
+      .p35r {
+        padding-right: 35px;
+      }
+
+      .p40 {
+        padding: 40px;
+      }
+
+      .p40t {
+        padding-top: 40px;
+      }
+
+      .p40b {
+        padding-bottom: 40px;
+      }
+
+      .p40l {
+        padding-left: 40px;
+      }
+
+      .p40r {
+        padding-right: 40px;
+      }
+
+      .menu td {
+        border: 0;
+      }
+
+      .menu td a img {
+        display: inline-block !important;
+      }
+
+      /* END CONFIG STYLES */
+      a {
+        text-decoration: underline;
+      }
+
+      p,
+      ul li,
+      ol li {
+        font-family: 'arial', 'helvetica neue', 'helvetica', 'sans-serif';
+        line-height: 150%;
+      }
+
+      ul li,
+      ol li {
+        margin-bottom: 15px;
+        margin-left: 0;
+      }
+
+      .menu td a {
+        text-decoration: none;
         display: block;
+        font-family: 'arial', 'helvetica neue', 'helvetica', 'sans-serif';
+      }
+
+      .wrapper {
+        width: 100%;
+        height: 100%;
+        background-image: none;
+        background-repeat: repeat;
+        background-position: center top;
+      }
+
+      .content-body {
+        background-color: #ffffff;
+      }
+
+      .content-body p,
+      .content-body ul li,
+      .content-body ol li {
+        color: #141721;
+        font-size: 18px;
+      }
+
+      .content-body a {
+        color: #78dce8;
+        font-size: 18px;
+      }
+
+      .footer {
+        background-color: transparent;
+        background-image: none;
+        background-repeat: repeat;
+        background-position: center top;
+      }
+
+      .footer-body {
+        background-color: #ffffff;
+      }
+
+      .footer-body p,
+      .footer-body ul li,
+      .footer-body ol li {
+        color: #141721;
+        font-size: 18px;
+      }
+
+      .footer-body a {
+        color: #141721;
+        font-size: 16px;
+      }
+
+      .infoblock,
+      .infoblock p,
+      .infoblock ul li,
+      .infoblock ol li {
+        line-height: 120%;
         font-size: 14px;
-        margin: 0 30px 0 30px;
+        color: #141721;
       }
 
-      a {
-        color: rgb(228, 178, 0);
+      .infoblock a {
+        font-size: 14px;
+        color: #141721;
       }
 
-      .main-content {
-        max-width: 600px;
-        padding: 30px 0 30px 0;
-        border-radius: 10px;
+      h1 {
+        font-size: 36px;
+        color: #000000;
       }
 
-      .logo-title {
+      h2 {
+        font-size: 30px;
         color: #000000;
-        font-size: 44px;
       }
+
+      h3 {
+        font-size: 24px;
+        color: #000000;
+      }
+
+      a.button,
+      button.button {
+        border-style: solid;
+        border-color: #78dce8;
+        border-width: 16px 40px 16px 40px;
+        display: inline-block;
+        background: #78dce8;
+        font-size: 16px;
+        font-weight: 700;
+        font-family: 'arial', 'helvetica neue', 'helvetica', 'sans-serif';
+        color: #141721;
+        text-decoration: none;
+        width: auto;
+        text-align: center;
+      }
+
+      .button-border {
+        border-style: solid;
+        border-color: #78dce8;
+        background: #ffffff;
+        border-width: 0px 0px 0px 0px;
+        display: inline-block;
+        width: auto;
+      }
+
+      a.button-outline,
+      button.button-outline {
+        border-style: solid;
+        border-color: transparent;
+        border-width: 12px;
+        display: inline-block;
+        background: #ffffff;
+        font-size: 16px;
+        font-weight: 700;
+        font-family: 'arial', 'helvetica neue', 'helvetica', 'sans-serif';
+        color: #141721;
+        text-decoration: none;
+        width: auto;
+        text-align: center;
+      }
+
+      .button-outline-border {
+        border-style: solid;
+        border-color: #141721;
+        background: #ffffff;
+        border-width: 1px 1px 1px 1px;
+        display: inline-block;
+        width: auto;
+      }
+
+      /* RESPONSIVE STYLES Please do not delete and edit CSS styles below. If you don't need responsive layout, please delete this section. */
+      @media only screen and (max-width: 600px) {
+        p,
+        ul li,
+        ol li,
+        a {
+          line-height: 150% !important;
+        }
+
+        h1,
+        h2,
+        h3,
+        h1 a,
+        h2 a,
+        h3 a {
+          line-height: 120% !important;
+        }
+
+        h1 {
+          font-size: 30px !important;
+          text-align: center;
+        }
+
+        h2 {
+          font-size: 26px !important;
+          text-align: center;
+        }
+
+        h3 {
+          font-size: 22px !important;
+          text-align: center;
+        }
+
+        *[class='gmail-fix'] {
+          display: none !important;
+        }
+
+        .m-txt-c,
+        .m-txt-c h1,
+        .m-txt-c h2,
+        .m-txt-c h3 {
+          text-align: center !important;
+        }
+
+        .m-txt-r,
+        .m-txt-r h1,
+        .m-txt-r h2,
+        .m-txt-r h3 {
+          text-align: right !important;
+        }
+
+        .m-txt-l,
+        .m-txt-l h1,
+        .m-txt-l h2,
+        .m-txt-l h3 {
+          text-align: left !important;
+        }
+
+        .m-txt-r img,
+        .m-txt-c img,
+        .m-txt-l img {
+          display: inline !important;
+        }
+
+        .button-border {
+          display: block !important;
+        }
+
+        a.button,
+        button.button {
+          display: block !important;
+          border-width: 10px 0px 10px 0px !important;
+        }
+
+        .btn-fw {
+          border-width: 10px 0px !important;
+          text-align: center !important;
+        }
+
+        .adaptive table,
+        .btn-fw,
+        .btn-fw-brdr,
+        .left,
+        .right {
+          width: 100% !important;
+        }
+
+        .content table,
+        .header table,
+        .footer table,
+        .content,
+        .footer,
+        .header {
+          width: 100% !important;
+          max-width: 600px !important;
+        }
+
+        .adapt-td {
+          display: block !important;
+          width: 100% !important;
+        }
+
+        .adapt-img {
+          width: 100% !important;
+          height: auto !important;
+        }
+
+        .m-p0 {
+          padding: 0px !important;
+        }
+
+        .m-p0r {
+          padding-right: 0px !important;
+        }
+
+        .m-p0l {
+          padding-left: 0px !important;
+        }
+
+        .m-p0t {
+          padding-top: 0px !important;
+        }
+
+        .m-p0b {
+          padding-bottom: 0 !important;
+        }
+
+        .m-p20b {
+          padding-bottom: 20px !important;
+        }
+
+        .mobile-hidden,
+        .hidden {
+          display: none !important;
+        }
+
+        .menu td {
+          width: 1% !important;
+        }
+
+        table.table-not-adapt {
+          width: auto !important;
+        }
+      }
+
+      /* END RESPONSIVE STYLES */
     </style>
   </head>
 
   <body>
-    <table width="100%">
-      <tr>
-        <td align="left">
-          <table class="main-content">
-            <tr>
-              <td align="left">
-                <h1>Claim your NFT</h1>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <p>Claim your nft test</p>
-                <br /><br />
-                <p><a href="{{link}}" target="_blank">link to claim</a></p>
-                <br /><br />
-                <p>Explain airdrop</p>
-                <p>mode descriptions</p>
-              </td>
-            </tr>
-            <tr>
-              <td align="left">
-                <img src="cid:logo.png" />
-              </td>
-            </tr>
-          </table>
-        </td>
-      </tr>
+    <table class="wrapper" width="100%" cellspacing="0" cellpadding="0">
+      <tbody>
+        <tr>
+          <td valign="top">
+            <!-- LOGO -->
+            <table class="content" cellspacing="0" cellpadding="0" align="center">
+              <tbody>
+                <tr>
+                  <td align="center">
+                    <table
+                      class="header-body"
+                      width="480"
+                      cellspacing="0"
+                      cellpadding="0"
+                      align="center"
+                    >
+                      <tbody>
+                        <tr>
+                          <td class="p20t p40b p20r" align="left">
+                            <table width="100%" cellspacing="0" cellpadding="0">
+                              <tbody>
+                                <tr>
+                                  <td align="left" style="font-size: 0">
+                                    <a href="https://apillon.io" target="_blank">
+                                      <img
+                                        src="data:image/png;base64,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"
+                                        width="180"
+                                      />
+                                    </a>
+                                  </td>
+                                </tr>
+                              </tbody>
+                            </table>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <!-- Content -->
+            <table class="content" cellspacing="0" cellpadding="0" align="center">
+              <tbody>
+                <tr>
+                  <td align="center">
+                    <table
+                      class="content-body"
+                      width="480"
+                      style="background-color: #ffffff"
+                      cellspacing="0"
+                      cellpadding="0"
+                      bgcolor="#ffffff"
+                      align="center"
+                    >
+                      <tbody>
+                        <tr>
+                          <td valign="top" align="left">
+                            <table width="100%" cellspacing="0" cellpadding="0">
+                              <tbody>
+                                <tr>
+                                  <td class="p25b" align="left">
+                                    <h1>Claim your NFT</h1>
+                                  </td>
+                                </tr>
+                                <tr>
+                                  <td class="p30b" align="left">
+                                    <p>Claim your nft: test</p>
+                                  </td>
+                                </tr>
+                                <tr>
+                                  <td class="p15t p30b" align="left">
+                                    <span class="button-border">
+                                      <a href="{{link}}" class="button" target="_blank">
+                                        Link to claim
+                                      </a>
+                                    </span>
+                                  </td>
+                                </tr>
+                                <tr>
+                                  <td class="p15t p40b" align="left">
+                                    <p>Explain airdrop</p>
+                                    <p>mode descriptions</p>
+                                  </td>
+                                </tr>
+                              </tbody>
+                            </table>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </td>
+        </tr>
+      </tbody>
     </table>
-    <br /><br />
   </body>
-</html>
+</html>
\ No newline at end of file
