Mirror
/
app-MAIL-temp
mirror of https://github.com/simple-login/app.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

tweak the UI for onboarding page: use svg instead of png, css change

This commit is contained in:
Son 2022-05-20 09:52:54 +02:00
parent 0e3be23acc
commit 47246d15cf
6 changed files with 27 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
static/images/onboarding-click-icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.4 KiB

4
static/images/onboarding-click-icon.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
static/images/onboarding-right-click.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 27 KiB

12
static/images/onboarding-right-click.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

20
templates/onboarding/final.html
View File

@ -8,42 +8,42 @@
<a class="" 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">
<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-black-50" style="font-size:2rem">Quickly create an alias every time you need an email</h2>
<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.png"
style="width:400px;position:absolute;right:-90px;top:-44px;"
src="/static/images/onboarding-click-icon.svg"
style="width:400px;position:absolute;right:-70px;top:-90px;"
/>
<img
src="/static/images/onboarding-right-click.png"
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: 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) }}
<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>
</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 id="extension-version-text" class="" style="display:none;"></p>
<p id="extension-version-text" class="font-weight-light" style="display:none;"></p>
</div>
</div>

2
templates/onboarding/index.html
View File

@ -8,7 +8,7 @@
<a class="" 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">
<img src="/static/logo.svg" style="width: 12rem" alt="logo">
</picture>
</a>
</div>