4.21.3
This commit is contained in:
47
app/templates/onboarding/account_activated.html
Normal file
47
app/templates/onboarding/account_activated.html
Normal file
@ -0,0 +1,47 @@
|
||||
{% 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="my-6 text-center">
|
||||
<h2 style="color:black;font-size:2rem">Welcome!</h2>
|
||||
</div>
|
||||
<div class="px-8" style="width:675px;margin:auto;">
|
||||
<div class="my-6">
|
||||
<p style="font-size: 1.2em;">Quickly create aliases everywhere using our {{ browser_name }} extension</p>
|
||||
<a class="px-4 py-3 mt-4 text-decoration-none text-center"
|
||||
style="background:black;
|
||||
color:white;
|
||||
display:block;
|
||||
width:50%;"
|
||||
href="{{ extension_link }}">
|
||||
Install {{ browser_name }} extension
|
||||
</a>
|
||||
</div>
|
||||
<hr style="margin-top: 75px">
|
||||
<div style="margin-top: 75px">
|
||||
<p style="font-size: 1.2em;">Or install the extension later and start discovering our features on our web app</p>
|
||||
<a class="px-4 py-3 mt-4 text-decoration-none text-center"
|
||||
style="background:white;
|
||||
color:black;
|
||||
border-radius: 2px;
|
||||
border:1px solid black;
|
||||
display:block;
|
||||
width:50%;"
|
||||
href="{{ url_for('dashboard.index') }}">
|
||||
Continue to our web app
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
77
app/templates/onboarding/final.html
Normal file
77
app/templates/onboarding/final.html
Normal file
@ -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 %}
|
57
app/templates/onboarding/index.html
Normal file
57
app/templates/onboarding/index.html
Normal file
@ -0,0 +1,57 @@
|
||||
{% 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 mb-4 text-center">
|
||||
<h2 class="text-dark" style="font-size:2rem">Let's take back control of your inbox!</h2>
|
||||
</div>
|
||||
<div class="mt-8 text-center">
|
||||
{% if current_user != None and current_user.is_authenticated %}
|
||||
|
||||
<h2 class="text-black-50" style="font-size:2rem">Performing the extension setup...</h2>
|
||||
{% else %}
|
||||
<a class="mx-6 p-4 text-decoration-none"
|
||||
style="background:black;
|
||||
color:white;"
|
||||
href="{{ url_for('auth.register', next=url_for('onboarding.setup_done')) }}">
|
||||
Create a new account
|
||||
</a>
|
||||
<a class="mx-6 p-4 text-decoration-none"
|
||||
style="background:white;
|
||||
color:black;
|
||||
border-radius: 2px;
|
||||
border:1px solid black;"
|
||||
href="{{ url_for('auth.login', next=url_for('onboarding.setup_done')) }}">
|
||||
I already have an account
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% if current_user != None and current_user.is_authenticated %}
|
||||
|
||||
<script type="text/javascript">
|
||||
let counterIterations = 5;
|
||||
let extensionSetupIntervalId = setInterval(function() {
|
||||
counterIterations--;
|
||||
if (counterIterations === 0) {
|
||||
clearInterval(extensionSetupIntervalId);
|
||||
return;
|
||||
}
|
||||
|
||||
const data = { tag: "PERFORM_EXTENSION_SETUP" };
|
||||
window.postMessage(data, "/");
|
||||
}, 300); // Send it many times, in case the extension had not registered the listener yet
|
||||
</script>
|
||||
{% endif %}
|
||||
{% endblock %}
|
33
app/templates/onboarding/setup_done.html
Normal file
33
app/templates/onboarding/setup_done.html
Normal file
@ -0,0 +1,33 @@
|
||||
{% 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: 24rem" alt="logo">
|
||||
</picture>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Text container -->
|
||||
<div class="mt-8 mb-4 text-center">
|
||||
<h2 class="text-black-50" style="font-size:2rem">Performing the extension setup...</h2>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
let counterIterations = 5;
|
||||
let extensionSetupIntervalId = setInterval(function() {
|
||||
counterIterations--;
|
||||
if (counterIterations === 0) {
|
||||
clearInterval(extensionSetupIntervalId);
|
||||
return;
|
||||
}
|
||||
|
||||
const data = { tag: "PERFORM_EXTENSION_SETUP" };
|
||||
window.postMessage(data, "/");
|
||||
}, 300); // Send it many times, in case the extension had not registered the listener yet
|
||||
</script>
|
||||
{% endblock %}
|
Reference in New Issue
Block a user