tweak the UI for onboarding page: use svg instead of png, css change
This commit is contained in:
parent
0e3be23acc
commit
47246d15cf
Binary file not shown.
Before Width: | Height: | Size: 6.4 KiB |
4
static/images/onboarding-click-icon.svg
Normal file
4
static/images/onboarding-click-icon.svg
Normal file
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
Before Width: | Height: | Size: 27 KiB |
12
static/images/onboarding-right-click.svg
Normal file
12
static/images/onboarding-right-click.svg
Normal file
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 82 KiB |
|
@ -8,42 +8,42 @@
|
||||||
<a class="" href="{{ url_for('dashboard.index') }}">
|
<a class="" href="{{ url_for('dashboard.index') }}">
|
||||||
<picture>
|
<picture>
|
||||||
<source media="(max-width: 650px)" srcset="/static/logo.svg">
|
<source media="(max-width: 650px)" srcset="/static/logo.svg">
|
||||||
<img src="/static/logo.svg" style="width: 24rem" alt="logo">
|
<img src="/static/logo.svg" style="width: 12rem" alt="logo">
|
||||||
</picture>
|
</picture>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Text container -->
|
<!-- Text container -->
|
||||||
<div class="mt-8 mb-4 text-center">
|
<div class="mt-8 text-center" style="margin-bottom: 120px">
|
||||||
<h2 class="text-black-50" style="font-size:2rem">Quickly create an alias every time you need an email</h2>
|
<h2 class="text-black-75" style="font-size:2rem">Quickly create an alias every time you need an email</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- Input + button container -->
|
<!-- Input + button container -->
|
||||||
<div class="mt-8" style="display:grid; place-items:center;width:1024px;margin:auto;position:relative;">
|
<div class="mt-8" style="display:grid; place-items:center;width:1024px;margin:auto;position:relative;">
|
||||||
<img
|
<img
|
||||||
src="/static/images/onboarding-click-icon.png"
|
src="/static/images/onboarding-click-icon.svg"
|
||||||
style="width:400px;position:absolute;right:-90px;top:-44px;"
|
style="width:400px;position:absolute;right:-70px;top:-90px;"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<img
|
<img
|
||||||
src="/static/images/onboarding-right-click.png"
|
src="/static/images/onboarding-right-click.svg"
|
||||||
style="position:absolute;width:440px;right:-20px;top:25px;"
|
style="position:absolute;width:440px;right:-20px;top:25px;"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div style="width: 25rem; display: block">
|
<div style="width: 25rem; display: block">
|
||||||
<form method="post">
|
<form method="post">
|
||||||
{{ form.csrf_token }}
|
{{ form.csrf_token }}
|
||||||
{{ form.email(class="p-3", type="email", autofocus="true", placeholder="email", style="border: 2px solid black; border-radius: 2px; width:100%") }}
|
{{ 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) }}
|
{{ render_field_errors(form.email) }}
|
||||||
<button type="submit" class="p-4 mt-2 text-decoration-none" style="background:black;color:white; width:10rem">Send me an email</button>
|
<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>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="text-center" style="margin-top:250px">
|
<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 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="" style="display:none;"></p>
|
<p id="extension-version-text" class="font-weight-light" style="display:none;"></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -8,7 +8,7 @@
|
||||||
<a class="" href="{{ url_for('dashboard.index') }}">
|
<a class="" href="{{ url_for('dashboard.index') }}">
|
||||||
<picture>
|
<picture>
|
||||||
<source media="(max-width: 650px)" srcset="/static/logo.svg">
|
<source media="(max-width: 650px)" srcset="/static/logo.svg">
|
||||||
<img src="/static/logo.svg" style="width: 24rem" alt="logo">
|
<img src="/static/logo.svg" style="width: 12rem" alt="logo">
|
||||||
</picture>
|
</picture>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue