notesnook-sync-server_custo…/Streetwriters.Identity/Templates/EmailConfirmedPage.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Email Confirmed - Notesnook</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family:
          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
          Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
        background: #ffffff;
        height: 100vh;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        font-size: 16px;
      }

      .main {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2rem;
      }

      .icon-wrapper {
        background: #e8f5e9;
        border-radius: 100px;
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .icon-wrapper svg {
        width: 72px;
        height: 72px;
        fill: #008837;
      }

      .heading {
        font-size: 2.5em;
        font-weight: 700;
        text-align: center;
        margin-top: 20px;
        color: #000;
      }

      .subheading {
        font-size: 1.5em;
        font-weight: 600;
        text-align: center;
        margin-top: 8px;
        color: #5b5b5b;
      }

      .body-text {
        font-size: 1.2em;
        text-align: center;
        margin-top: 8px;
        color: #808080;
        word-wrap: break-word;
      }

      .footer {
        background: #f0f0f0;
        padding: 40px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      .footer-heading {
        font-size: 1.2em;
        font-weight: bold;
        text-align: center;
      }

      .footer-subtext {
        font-size: 1em;
        text-align: center;
        margin-top: 8px;
        color: #5b5b5b;
      }

      .social-icons {
        display: flex;
        gap: 8px;
        margin-top: 20px;
      }

      .social-icons a {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #5b5b5b;
        cursor: pointer;
        text-decoration: none;
      }

      .social-icons a:hover svg {
        opacity: 0.8;
      }

      .social-icons svg {
        width: 30px;
        height: 30px;
      }

      .promo-text {
        font-size: 0.85em;
        text-align: center;
        margin-top: 8px;
        color: #5b5b5b;
      }

      .promo-text .hashtag {
        font-weight: bold;
        color: #008837;
      }

      @media (max-width: 480px) {
        body {
          font-size: 14px;
        }
      }

      @media (min-width: 769px) {
        body {
          font-size: 18px;
        }
      }
    </style>
  </head>
  <body>
    <div class="main">
      <div class="icon-wrapper">
        <!-- Mail Check Icon -->
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path
            d="M13 19C13 18.66 13.04 18.33 13.09 18H4V8L12 13L20 8V13.09C20.72 13.21 21.39 13.46 22 13.81V6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H13.09C13.04 19.67 13 19.34 13 19M20 6L12 11L4 6H20M17.75 22.16L15 19.16L16.16 18L17.75 19.59L21.34 16L22.5 17.41L17.75 22.16"
          />
        </svg>
      </div>
      <h1 class="heading">Huzzah!</h1>
      <p class="subheading">{{subheading}}</p>
      <p class="body-text">
        Thank you for choosing end-to-end encrypted note taking. Now you can
        sync your notes to unlimited devices.
      </p>
    </div>

    <div class="footer">
      <h2 class="footer-heading">Share Notesnook with friends!</h2>
      <p class="footer-subtext">Because where's the fun in nookin' alone?</p>
      <div class="social-icons">
        <!-- Discord -->
        <a
          href="https://discord.com/invite/zQBK97EE22"
          target="_blank"
          rel="noopener noreferrer"
          title="Discord"
        >
          <svg viewBox="0 0 24 24" fill="currentColor">
            <path
              d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"
            />
          </svg>
        </a>
        <!-- Twitter -->
        <a
          href="https://twitter.com/notesnook"
          target="_blank"
          rel="noopener noreferrer"
          title="Twitter"
        >
          <svg viewBox="0 0 24 24" fill="currentColor">
            <path
              d="M23.953 4.57a10 10 0 0 1-2.825.775 4.958 4.958 0 0 0 2.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 0 0-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 0 0-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 0 1-2.228-.616v.06a4.923 4.923 0 0 0 3.946 4.827 4.996 4.996 0 0 1-2.212.085 4.936 4.936 0 0 0 4.604 3.417 9.867 9.867 0 0 1-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 0 0 7.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0 0 24 4.59z"
            />
          </svg>
        </a>
        <!-- Reddit -->
        <a
          href="https://reddit.com/r/Notesnook"
          target="_blank"
          rel="noopener noreferrer"
          title="Reddit"
        >
          <svg viewBox="0 0 24 24" fill="currentColor">
            <path
              d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z"
            />
          </svg>
        </a>
      </div>
      <p class="promo-text">
        Use <span class="hashtag">#notesnook</span> and get a chance to win free
        promo codes.
      </p>
    </div>
  </body>
</html>