ui.html

<style>
  body {
    margin: 0;
    padding: 16px;
    font-family: Inter, sans-serif;
    font-size: 12px;
    line-height: 16px;
    color: #0a3a3e;
    background-color: #bddde033;
  }

  a,
  a:visited {
    color: #19676c;
    text-underline-offset: 2px;
  }

  a:hover {
    color: #114e52;
  }

  ul,
  ol {
    padding-left: 1.2em;
  }

  li {
    margin-bottom: 6px;
  }

  input {
    border-color: #19676c;
    padding: 4px 6px;
    border-width: 1px;
    border-radius: 4px;
  }

  input::placeholder {
    opacity: 0.6;
  }

  button {
    color: #ffffff;
    background-color: #114e52;
    border: none;
    border-radius: 4px;
    padding: 4px 12px;
  }

  button:hover {
    background-color: #0a3a3e;
  }

  footer {
    display: flex;
    justify-content: space-between;
  }

  footer p {
    margin: 0;
  }

  footer span {
    opacity: 0.6;
  }

  .block {
    margin-bottom: 2em;
  }

  .subscription_form {
    display: flex;
    gap: 4px;
    margin-top: 12px;
  }

  .subscription_form input {
    flex-grow: 1;
  }

  .email_error {
    color: #ff6347;
  }

  ._hidden {
    display: none;
  }
</style>
<div class="block features">
  <h2>What will you get?</h2>
  <ul>
    <li>Unlimited zoom locking time</li>
    <li>Three zoom dimensions to lock: 50%, 100%, 200%</li>
    <li>All future updates</li>
  </ul>
</div>
<div class="block instruction">
  <h2>Steps to buy</h2>
  <ol>
    <li>
      Go to the <a href="https://eduhund.gumroad.com/l/fixiq">Fixiq page</a> on
      Gumroad and join the monthly subscription. In the order provide a valid
      email and your name to continue
    </li>
    <li>
      Wait 1-2 minutes (while we receive your subscription details) and enter
      the email you provided on Gumroad
    </li>
    <form class="subscription_form" onsubmit="checkSubscription(event)">
      <input type="email" placeholder="type@email.here" />
      <button type="submit">Check</button>
    </form>
    <span id="email_error" class="email_error _hidden"
      >We can't find this email</span
    >
  </ol>
  <p>When succeed, this modal will close and you can start using the plugin.</p>
  <p>
    Please <a href="mailto:we@eduhund.com">contact us</a> if you experience any
    problems.
  </p>
</div>
<footer>
  <p><strong>Fixiq</strong> <span>v.1.0</span></p>
  <p>
    <a href="https://nebel.im">Roman Nebel</a> from
    <a href="https://eduhund.com">eduHund</a>
  </p>
</footer>
<script>
  function checkSubscription(event) {
    event.preventDefault();
    document.querySelector("#email_error")?.classList?.add("_hidden");
    const email = event.target[0]?.value;
    parent.postMessage(
      {
        pluginMessage: {
          type: "checkEmail",
          email,
        },
      },
      "*"
    );
  }

  onmessage = (event) => {
    const { type } = event.data.pluginMessage;

    switch (type) {
      case "invalidEmail":
        document.querySelector("#email_error")?.classList?.remove("_hidden");
    }
  };
</script>