improve SIWSL UI

This commit is contained in:
Son NK 2021-04-06 12:06:46 +02:00
parent 9e4ff01b17
commit c715f87526
4 changed files with 65 additions and 19 deletions

View File

@ -1,7 +1,7 @@
{% extends 'default.html' %}
{% extends "sign_in_with_sl_base.html" %}
{% block title %}
Authorization
Authorize {{ client.name }} - Sign in with SimpleLogin
{% endblock %}
{% block head %}
@ -31,9 +31,9 @@
</style>
{% endblock %}
{% block default_content %}
{% block single_content %}
<form class="card" method="post" style="max-width: 40rem; margin: auto">
<form class="card" method="post" style="max-width: 40rem; margin: auto; border-radius: 2%">
{% if not client.approved %}
<div class="alert alert-warning" style="border-bottom: 3px solid;">
<b>{{ client.name }}</b> is in Dev Mode and isn't approved (yet) by SimpleLogin.
@ -75,11 +75,8 @@
</div>
{% endif %}
<div class="text-center mt-4">
<div class="text-center" style="font-size: larger">
<b>{{ client.name }}</b> will receive the following info
<div>
<small class="font-weight-lighter">You can customize the info sent to this app.</small>
</div>
</div>
<hr>

View File

@ -1,15 +1,10 @@
{% extends "base.html" %}
{% extends "sign_in_with_sl_base.html" %}
{% block single_content %}
<div class="card" style="border-radius: 2%">
{% block content %}
<div class="card mx-auto" style="max-width: 600px">
<div class="card-body">
<div class="text-center mb-6">
<a href="{{LANDING_PAGE_URL}}">
<img src="/static/logo.svg" style="background-color: transparent; height: 24px">
</a>
</div>
<div>
<div class="mt-4">
<b>{{ client.name }}</b> would like to have access to your following data:
</div>
@ -28,7 +23,7 @@
</div>
<div>
In order to accept the request, you need to sign in.
Sign in to accept sharing data with <b>{{ client.name }}</b>
</div>
<div class="mt-4">

34
static/siwsl.svg vendored Normal file
View File

@ -0,0 +1,34 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1149" height="215" viewBox="0 0 1149 215">
<defs>
<linearGradient id="linear-gradient" y1="0.5" x2="1" y2="0.5" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#e3156a"/>
<stop offset="1" stop-color="#91187f"/>
</linearGradient>
<clipPath id="clip-Sign_in_with_SimpleLogin_1">
<rect width="1149" height="215"/>
</clipPath>
</defs>
<g id="Sign_in_with_SimpleLogin_1" data-name="Sign in with SimpleLogin 1" clip-path="url(#clip-Sign_in_with_SimpleLogin_1)">
<g id="Group_91" data-name="Group 91" transform="translate(4.742)">
<g id="Group_89" data-name="Group 89" transform="translate(135.258 72)">
<g id="Group_45" data-name="Group 45" transform="translate(0 0)">
<g id="Group_42" data-name="Group 42" transform="translate(9.693 25.366)">
<path id="Path_170" data-name="Path 170" d="M-1477.559,846.681a52.091,52.091,0,0,1-22.694-12.938,52.122,52.122,0,0,1-22.807,12.97,36.921,36.921,0,0,0-.654,6.938,36.906,36.906,0,0,0,22.952,34.016,36.755,36.755,0,0,0,23.8-34.352A37.078,37.078,0,0,0-1477.559,846.681Zm-24.415,27.151h-.007l-13.991-13.991,4.3-4.313,9.7,9.7,15.165-15.169,4.306,4.307Zm24.415-27.151a52.091,52.091,0,0,1-22.694-12.938,52.122,52.122,0,0,1-22.807,12.97,36.921,36.921,0,0,0-.654,6.938,36.906,36.906,0,0,0,22.952,34.016,36.755,36.755,0,0,0,23.8-34.352A37.078,37.078,0,0,0-1477.559,846.681Zm-24.415,27.151h-.007l-13.991-13.991,4.3-4.313,9.7,9.7,15.165-15.169,4.306,4.307Zm1.72-40.089a52.122,52.122,0,0,1-22.807,12.97,36.921,36.921,0,0,0-.654,6.938,36.906,36.906,0,0,0,22.952,34.016,36.755,36.755,0,0,0,23.8-34.352,37.078,37.078,0,0,0-.6-6.633A52.091,52.091,0,0,1-1500.253,833.742Zm-1.72,40.089h-.007l-13.991-13.991,4.3-4.313,9.7,9.7,15.165-15.169,4.306,4.307Zm24.415-27.151a52.091,52.091,0,0,1-22.694-12.938,52.122,52.122,0,0,1-22.807,12.97,36.921,36.921,0,0,0-.654,6.938,36.906,36.906,0,0,0,22.952,34.016,36.755,36.755,0,0,0,23.8-34.352A37.078,37.078,0,0,0-1477.559,846.681Zm-24.415,27.151h-.007l-13.991-13.991,4.3-4.313,9.7,9.7,15.165-15.169,4.306,4.307Zm24.415-27.151a52.091,52.091,0,0,1-22.694-12.938,52.122,52.122,0,0,1-22.807,12.97,36.921,36.921,0,0,0-.654,6.938,36.906,36.906,0,0,0,22.952,34.016,36.755,36.755,0,0,0,23.8-34.352A37.078,37.078,0,0,0-1477.559,846.681Zm-24.415,27.151h-.007l-13.991-13.991,4.3-4.313,9.7,9.7,15.165-15.169,4.306,4.307Z" transform="translate(1523.715 -833.742)" fill="url(#linear-gradient)"/>
</g>
<g id="Group_44" data-name="Group 44">
<g id="Group_43" data-name="Group 43">
<path id="Path_171" data-name="Path 171" d="M-1407.782,826a9.673,9.673,0,0,0-1.406-1.771c-.164-.166-.34-.323-.516-.475a9.328,9.328,0,0,0-5.556-2.256H-1486.4a9.328,9.328,0,0,0-5.556,2.256,4.915,4.915,0,0,0-.51.475,9.129,9.129,0,0,0-1.407,1.758,9.414,9.414,0,0,0-1.394,4.943v3.708l-1.178,1.216-.2.216a60.872,60.872,0,0,1-28.305,16.582c-.271.077-.546.145-.824.216l-1.2.3-.265,1.2c-.093.435-.182.876-.269,1.319a49.834,49.834,0,0,0-.885,9.357,49.318,49.318,0,0,0,8.93,28.4,49.51,49.51,0,0,0,20.707,17.032c.712.315,1.431.611,2.162.9l.688.265.692-.253c.941-.333,1.867-.7,2.783-1.084a49.656,49.656,0,0,0,23.65-21.1h52.947a9.37,9.37,0,0,0,6.1-2.252c.19-.157.361-.315.536-.491a9.847,9.847,0,0,0,1.407-1.767,9.381,9.381,0,0,0,1.394-4.937V830.928A9.447,9.447,0,0,0-1407.782,826Zm-78.541.006c.164-.012.329-.019.5-.019h69.99c.17,0,.334.006.5.019h.739l-.119.108-34.643,30.65a2.212,2.212,0,0,1-2.927,0l-34.641-30.65-.12-.108Zm-4.433,4.924a4.835,4.835,0,0,1,.367-1.866l29.7,26.288-2.119,1.872q-.162-1.1-.379-2.175c-.037-.234-.081-.46-.133-.694l-.256-1.216-1.206-.3c-.29-.076-.58-.145-.871-.221a61.008,61.008,0,0,1-25.1-13.627Zm-5.1,76.46a45.963,45.963,0,0,1-28.564-42.346,45.919,45.919,0,0,1,.82-8.632,64.771,64.771,0,0,0,28.38-16.149,64.785,64.785,0,0,0,28.243,16.11,45.841,45.841,0,0,1,.75,8.261A45.758,45.758,0,0,1-1495.857,907.388Zm29.351-22.706a49.372,49.372,0,0,0,4.252-20.05c0-.619-.013-1.23-.038-1.848l5-4.427,5.006,4.427a2.212,2.212,0,0,0,2.927,0l5.006-4.427,29.618,26.2.139.127Zm55.6-4.937a4.838,4.838,0,0,1-.365,1.86l-29.68-26.256,29.686-26.269a4.869,4.869,0,0,1,.359,1.847Z" transform="translate(1528.394 -821.497)" fill="url(#linear-gradient)"/>
</g>
</g>
</g>
</g>
<text id="Sign_in_with" data-name="Sign in with" transform="translate(289 129)" fill="#3b3639" font-size="64" font-family="HelveticaNeue-Bold, Helvetica Neue" font-weight="700"><tspan x="0" y="0">Sign in with</tspan></text>
<g id="Group_90" data-name="Group 90" transform="translate(-6505 -2246)">
<g id="Group_87" data-name="Group 87" transform="translate(7169 2318)">
<text id="Simple" transform="translate(0 58)" fill="#a0177b" font-size="61" font-family="HelveticaNeue, Helvetica Neue"><tspan x="0" y="0">Simple</tspan></text>
<text id="Login" transform="translate(189 58)" fill="#ae0721" font-size="61" font-family="HelveticaNeue, Helvetica Neue"><tspan x="0" y="0">Login</tspan></text>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 5.0 KiB

View File

@ -0,0 +1,20 @@
{% extends "base.html" %}
{% block content %}
<div class="page-single">
<div class="container">
<div class="row">
<div class="col mx-auto" style="max-width: 48rem">
<div class="text-center mb-6">
<a href="{{LANDING_PAGE_URL}}">
<img src="/static/siwsl.svg" style="background-color: transparent; height: 80px">
</a>
</div>
{% block single_content %}
{% endblock %}
</div>
</div>
</div>
</div>
{% endblock %}