4.21.3

app/templates/onboarding/final.html

@@ -0,0 +1,77 @@
+{% extends "base.html" %}
+
+{% block content %}
+
+  <div class="flex-fill align-items-center mt-8">
+    <!-- Image container -->
+    <div class="mt-4 mb-4 text-center" style="display:block;">
+      <a href="{{ url_for('dashboard.index') }}">
+        <picture>
+          <source media="(max-width: 650px)" srcset="/static/logo.svg">
+          <img src="/static/logo.svg" style="width: 12rem" alt="logo">
+        </picture>
+      </a>
+    </div>
+    <!-- Text container -->
+    <div class="mt-8 text-center" style="margin-bottom: 120px">
+      <h2 class="text-black-75" style="font-size:2rem">Quickly create an alias every time you need an email</h2>
+    </div>
+    <!-- Input + button container -->
+    <div class="mt-8"
+         style="display:grid;
+                place-items:center;
+                width:1024px;
+                margin:auto;
+                position:relative;">
+      <img src="/static/images/onboarding-click-icon.svg"
+           style="width:400px;
+                  position:absolute;
+                  right:-70px;
+                  top:-90px;"/>
+      <img src="/static/images/onboarding-right-click.svg"
+           style="position:absolute;
+                  width:440px;
+                  right:-20px;
+                  top:25px;"/>
+      <div style="width: 25rem; display: block">
+        <form method="post">
+          {{ form.csrf_token }}
+          {{ form.email(class="p-3", type="email", autofocus="true", placeholder="email", style="border: 1px solid black; border-radius: 2px; width:100%") }}
+          {{ render_field_errors(form.email) }}
+          <button type="submit"
+                  class="p-4 mt-2 text-decoration-none"
+                  style="background:black;color:white; width:10rem; border-radius: 4px">
+            Send me an email
+          </button>
+        </form>
+      </div>
+    </div>
+    <div class="text-center" style="margin-top:350px">
+      <p style="font-size: 1rem">
+        For advanced options please use our
+        <a href="{{ url_for("dashboard.index") }}">web dashboard</a>
+      </p>
+      <p id="extension-version-text"
+         class="font-weight-light"
+         style="display:none;"></p>
+    </div>
+  </div>
+  <script type="text/javascript">
+    const extensionVersionTextElement = document.getElementById("extension-version-text");
+    window.addEventListener("message", (event) => {
+        if (!event.data) return;
+        if (!event.data.tag) return;
+        if (event.data.tag === "EXTENSION_INSTALLED_RESPONSE") {
+            const eventData = event.data.data;
+            if (!eventData) return;
+
+            extensionVersionTextElement.style.display = "block";
+            extensionVersionTextElement.textContent = `Extension version: ${eventData.version}`;
+        }
+    });
+    setTimeout(function() {
+        const data = { tag: "EXTENSION_INSTALLED_QUERY" };
+        window.postMessage(data, "/");
+    }, 300); // Give some time to the extension for registering the listener
+  </script>
+{% endblock %}