GNUsocial
/
gnu-social
4
0
Fork 1
Code Issues Releases Wiki Activity

[UI] Left panel template and Login page CSS work done

This commit is contained in:
rainydaysavings 2020-07-23 23:48:49 +01:00 committed by Hugo Sales
parent 3ba46a9a60
commit 0dc3d3023e
Signed by: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
13 changed files with 617 additions and 392 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
public/assets/css/base.css
View File

@ -130,105 +130,4 @@ b {
stroke: currentColor;
fill: currentColor;
align-self: center;
}
/*-------------------------------------*/
/* LEFT PANEL -------------------------*/
.navbar {
width: var(--nav-size);
height: calc(100vh - (3 * var(--unit-size)));
position: fixed;
background-color: rgba(0, 0, 0, 0.40);
margin-top: calc(3 * var(--main-size));
}
.navbar {
left: -15em;
top: 0;
transition: 0.3s ease;
display: block;
left: 0;
top: 0;
transition: 0.3s ease;
}
.navbar a {
display: block;
color: #91B9D0;
margin-left: var(--unit-size);
margin-bottom: var(--small-size);
font-size: var(--medium-size);
}
.navbar a:nth-child(1) {
margin-top: var(--unit-size);
}
.navbar a:hover {
color: #F6F6F6;
transition: all 0.8s ease;
}
.icon-menu label {
display: none;
cursor: pointer
}
#toggle {
display: none;
}
#toggle:checked+.navbar {
display: block;
left: 0;
top: 0;
transition: 0.3s ease;
}
.profile {
display: flex;
flex-wrap: wrap;
background-color: rgba(0, 0, 0, 0.20);
padding: var(--unit-size);
font-size: var(--small-size);
margin-bottom: var(--unit-size);
vertical-align: middle;
}
.icon-avatar {
order: 1;
height: calc(5 * var(--unit-size));
weight: auto;
width: 25%;
margin-right: var(--small-size);
}
.info {
order: 2;
}
.info #nick {
order: 1;
margin-bottom: var(--small-size);
}
.info .tags {
order: 2;
margin-bottom: var(--small-size);
}
.info .stats {
order: 3;
}
.info .tags i {
color: #91B9D0;
}
.info .tags i:last-child {
margin-left: var(--small-size);
}
.stats span:last-child {
margin-left: var(--small-size);
}
}

112
public/assets/css/base_mid.css
View File

@ -158,114 +158,4 @@ b {
stroke: currentColor;
fill: currentColor;
align-self: center;
}
/*-------------------------------------*/
/* LEFT PANEL -------------------------*/
.navbar {
width: var(--nav-size);
height: calc(100vh - (3 * var(--unit-size)));
position: fixed;
background: rgb(51,61,71);
background: -moz-linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
background: -webkit-linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
background: linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#333d47",endColorstr="#272e36",GradientType=1);
margin-top: calc(3 * var(--main-size));
}
.navbar {
left: -100%;
top:0;
transition: 0.3s ease;
}
.navbar a {
display: block;
color: #91B9D0;
margin-left: var(--unit-size);
margin-bottom: var(--small-size);
font-size: var(--medium-size);
}
.navbar a:nth-child(1) {
margin-top: var(--unit-size);
}
.navbar a:hover {
color: #F6F6F6;
transition: all 0.8s ease;
}
.icon-menu label {
display: block;
cursor: pointer
}
#toggle {
position: absolute;
z-index: 2;
cursor: pointer;
opacity: 0;
}
.left-panel input[type=checkbox] {
transform: scale(2);
-ms-transform: scale(2);
-webkit-transform: scale(2);
padding: 10px;
}
#toggle:checked~.navbar {
display: block;
left: 0;
top: 0;
transition: 0.3s ease;
}
.profile {
display: flex;
flex-wrap: wrap;
background-color: rgba(0, 0, 0, 0.20);
padding: var(--unit-size);
font-size: var(--small-size);
margin-bottom: var(--unit-size);
vertical-align: middle;
}
.icon-avatar {
order: 1;
height: calc(5 * var(--unit-size));
weight: auto;
width: 25%;
margin-right: var(--small-size);
}
.info {
order: 2;
}
.info #nick {
order: 1;
margin-bottom: var(--small-size);
}
.info .tags {
order: 2;
margin-bottom: var(--small-size);
}
.info .stats {
order: 3;
}
.info .tags i {
color: #91B9D0;
}
.info .tags i:last-child {
margin-left: var(--small-size);
}
.stats span:last-child {
margin-left: var(--small-size);
}
}

114
public/assets/css/base_small.css
View File

@ -153,116 +153,4 @@ b {
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
/*-------------------------------------*/
/* LEFT PANEL -------------------------*/
.navbar {
width: 100%;
height: calc(100vh - (3 * var(--unit-size)));
position: fixed;
background: rgb(51,61,71);
background: -moz-linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
background: -webkit-linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
background: linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#333d47",endColorstr="#272e36",GradientType=1);
margin-top: calc(3 * var(--main-size));
}
.navbar {
left: -100%;
top:0;
transition: 0.3s ease;
}
.navbar a {
display: block;
color: #91B9D0;
margin-left: var(--unit-size);
margin-bottom: var(--small-size);
font-size: var(--medium-size);
}
.navbar a:nth-child(1) {
margin-top: var(--unit-size);
}
.navbar a:hover {
color: #F6F6F6;
transition: all 0.8s ease;
}
label {
display: block;
cursor: pointer
}
#toggle {
position: absolute;
z-index: 2;
cursor: pointer;
width: var(--unit-size);
height: var(--unit-size);
opacity: 0;
}
.left-panel input[type=checkbox] {
transform: scale(2);
-ms-transform: scale(2);
-webkit-transform: scale(2);
padding: 10px;
}
#toggle:checked~.navbar {
display: block;
left: 0;
top: 0;
transition: 0.3s ease;
}
.profile {
display: flex;
flex-wrap: wrap;
background-color: rgba(0, 0, 0, 0.20);
padding: var(--unit-size);
font-size: var(--small-size);
margin-bottom: var(--unit-size);
vertical-align: middle;
}
.icon-avatar {
order: 1;
height: calc(5 * var(--unit-size));
weight: auto;
width: 25%;
margin-right: var(--small-size);
}
.info {
order: 2;
}
.info #nick {
order: 1;
margin-bottom: var(--small-size);
}
.info .tags {
order: 2;
margin-bottom: var(--small-size);
}
.info .stats {
order: 3;
}
.info .tags i {
color: #91B9D0;
}
.info .tags i:last-child {
margin-left: var(--small-size);
}
.stats span:last-child {
margin-left: var(--small-size);
}
}

98
public/assets/css/left/left.css Normal file
View File

@ -0,0 +1,98 @@
.navbar {
width: var(--nav-size);
height: calc(100vh - (3 * var(--unit-size)));
position: fixed;
background-color: rgba(0, 0, 0, 0.40);
margin-top: calc(3 * var(--main-size));
}
.navbar {
left: -15em;
top: 0;
transition: 0.3s ease;
display: block;
left: 0;
top: 0;
transition: 0.3s ease;
}
.navbar a {
display: block;
color: #91B9D0;
margin-left: var(--unit-size);
margin-bottom: var(--small-size);
font-size: var(--medium-size);
}
.navbar a:nth-child(1) {
margin-top: var(--unit-size);
}
.navbar a:hover {
color: #F6F6F6;
transition: all 0.8s ease;
}
.icon-menu label {
display: none;
cursor: pointer
}
#toggle {
display: none;
}
#toggle:checked+.navbar {
display: block;
left: 0;
top: 0;
transition: 0.3s ease;
}
.profile {
display: flex;
flex-wrap: wrap;
background-color: rgba(0, 0, 0, 0.20);
padding: var(--unit-size);
font-size: var(--small-size);
margin-bottom: var(--unit-size);
vertical-align: middle;
}
.icon-avatar {
order: 1;
height: calc(5 * var(--unit-size));
weight: auto;
width: 25%;
margin-right: var(--small-size);
}
.info {
order: 2;
}
.info #nick {
order: 1;
margin-bottom: var(--small-size);
}
.info .tags {
order: 2;
margin-bottom: var(--small-size);
}
.info .stats {
order: 3;
}
.info .tags i {
color: #91B9D0;
}
.info .tags i:last-child {
margin-left: var(--small-size);
}
.stats span:last-child {
margin-left: var(--small-size);
}

107
public/assets/css/left/left_mid.css Normal file
View File

@ -0,0 +1,107 @@
.navbar {
width: var(--nav-size);
height: calc(100vh - (3 * var(--unit-size)));
position: fixed;
background: rgb(51,61,71);
background: -moz-linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
background: -webkit-linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
background: linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#333d47",endColorstr="#272e36",GradientType=1);
margin-top: calc(3 * var(--main-size));
}
.navbar {
left: -100%;
top:0;
transition: 0.3s ease;
}
.navbar a {
display: block;
color: #91B9D0;
margin-left: var(--unit-size);
margin-bottom: var(--small-size);
font-size: var(--medium-size);
}
.navbar a:nth-child(1) {
margin-top: var(--unit-size);
}
.navbar a:hover {
color: #F6F6F6;
transition: all 0.8s ease;
}
.icon-menu label {
display: block;
cursor: pointer
}
#toggle {
position: absolute;
z-index: 2;
cursor: pointer;
opacity: 0;
}
.left-panel input[type=checkbox] {
transform: scale(2);
-ms-transform: scale(2);
-webkit-transform: scale(2);
padding: 10px;
}
#toggle:checked~.navbar {
display: block;
left: 0;
top: 0;
transition: 0.3s ease;
}
.profile {
display: flex;
flex-wrap: wrap;
background-color: rgba(0, 0, 0, 0.20);
padding: var(--unit-size);
font-size: var(--small-size);
margin-bottom: var(--unit-size);
vertical-align: middle;
}
.icon-avatar {
order: 1;
height: calc(5 * var(--unit-size));
weight: auto;
width: 25%;
margin-right: var(--small-size);
}
.info {
order: 2;
}
.info #nick {
order: 1;
margin-bottom: var(--small-size);
}
.info .tags {
order: 2;
margin-bottom: var(--small-size);
}
.info .stats {
order: 3;
}
.info .tags i {
color: #91B9D0;
}
.info .tags i:last-child {
margin-left: var(--small-size);
}
.stats span:last-child {
margin-left: var(--small-size);
}

109
public/assets/css/left/left_small.css Normal file
View File

@ -0,0 +1,109 @@
.navbar {
width: 100%;
height: calc(100vh - (3 * var(--unit-size)));
position: fixed;
background: rgb(51,61,71);
background: -moz-linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
background: -webkit-linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
background: linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#333d47",endColorstr="#272e36",GradientType=1);
margin-top: calc(3 * var(--main-size));
}
.navbar {
left: -100%;
top:0;
transition: 0.3s ease;
}
.navbar a {
display: block;
color: #91B9D0;
margin-left: var(--unit-size);
margin-bottom: var(--small-size);
font-size: var(--medium-size);
}
.navbar a:nth-child(1) {
margin-top: var(--unit-size);
}
.navbar a:hover {
color: #F6F6F6;
transition: all 0.8s ease;
}
label {
display: block;
cursor: pointer
}
#toggle {
position: absolute;
z-index: 2;
cursor: pointer;
width: var(--unit-size);
height: var(--unit-size);
opacity: 0;
}
.left-panel input[type=checkbox] {
transform: scale(2);
-ms-transform: scale(2);
-webkit-transform: scale(2);
padding: 10px;
}
#toggle:checked~.navbar {
display: block;
left: 0;
top: 0;
transition: 0.3s ease;
}
.profile {
display: flex;
flex-wrap: wrap;
background-color: rgba(0, 0, 0, 0.20);
padding: var(--unit-size);
font-size: var(--small-size);
margin-bottom: var(--unit-size);
vertical-align: middle;
}
.icon-avatar {
order: 1;
height: calc(5 * var(--unit-size));
weight: auto;
width: 25%;
margin-right: var(--small-size);
}
.info {
order: 2;
}
.info #nick {
order: 1;
margin-bottom: var(--small-size);
}
.info .tags {
order: 2;
margin-bottom: var(--small-size);
}
.info .stats {
order: 3;
}
.info .tags i {
color: #91B9D0;
}
.info .tags i:last-child {
margin-left: var(--small-size);
}
.stats span:last-child {
margin-left: var(--small-size);
}

62
public/assets/css/login/login.css Normal file
View File

@ -0,0 +1,62 @@
.content {
display: flex;
flex-wrap: wrap;
margin-top: calc(3 * var(--main-size));
justify-content: center;
align-items: center;
margin-left: var(--nav-size);
margin-right: 0;
}
form {
font-size: var(--medium-size);
background-color: #00000050;
padding: calc(2 * var(--unit-size)) calc(3 * var(--unit-size)) calc(3 * var(--unit-size));
border-radius: var(--unit-size);
margin-top: calc(2 * var(--unit-size));
margin-right: var(--side-margin);
margin-left: var(--side-margin);
box-shadow: 0 0 60px -20px rgba(0, 0, 0, 0.75);
}
h1 {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: var(--main-size);
margin-bottom: var(--medium-size);
}
label {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
width: 100%;
}
input[type=text],
input[type=password]
{
margin-top: calc(var(--unit-size) * 0.5);
background-color: rgba(0, 0, 0, 0.30);
color: #f6f6f6;
border-style: none;
padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
border-radius: calc(var(--unit-size) * 0.5);
font-size: var(--medium-size);
}
.pair {
float:left;
width: 100%;
margin-bottom: var(--medium-size);
}
.pair input {
display: block;
}
.checkbox label {
font-family: "Open Sans", sans-serif;
font-size: var(--medium-size);
font-weight: normal;
}

62
public/assets/css/login/login_mid.css Normal file
View File

@ -0,0 +1,62 @@
.content {
display: flex;
flex-wrap: wrap;
margin-top: calc(3 * var(--main-size));
justify-content: center;
align-items: center;
margin-left: 0;
margin-right: 0;
}
form {
font-size: var(--medium-size);
background-color: #00000050;
padding: calc(2 * var(--unit-size)) calc(3 * var(--unit-size)) calc(3 * var(--unit-size));
border-radius: var(--unit-size);
margin-top: calc(2 * var(--unit-size));
margin-right: var(--side-margin);
margin-left: var(--side-margin);
box-shadow: 0 0 60px -20px rgba(0, 0, 0, 0.75);
}
h1 {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: var(--main-size);
margin-bottom: var(--medium-size);
}
label {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
width: 100%;
}
input[type=text],
input[type=password]
{
margin-top: calc(var(--unit-size) * 0.5);
background-color: rgba(0, 0, 0, 0.30);
color: #f6f6f6;
border-style: none;
padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
border-radius: calc(var(--unit-size) * 0.5);
font-size: var(--medium-size);
}
.pair {
float:left;
width: 100%;
margin-bottom: var(--medium-size);
}
.pair input {
display: block;
}
.checkbox label {
font-family: "Open Sans", sans-serif;
font-size: var(--medium-size);
font-weight: normal;
}

62
public/assets/css/login/login_small.css Normal file
View File

@ -0,0 +1,62 @@
.content {
display: flex;
flex-wrap: wrap;
margin-top: calc(3 * var(--main-size));
justify-content: center;
align-items: center;
margin-left: 0;
margin-right: 0;
}
form {
font-size: var(--medium-size);
background-color: #00000050;
padding: calc(2 * var(--unit-size)) calc(3 * var(--unit-size)) calc(3 * var(--unit-size));
border-radius: var(--unit-size);
margin-top: calc(2 * var(--unit-size));
margin-right: var(--side-margin);
margin-left: var(--side-margin);
box-shadow: 0 0 60px -20px rgba(0, 0, 0, 0.75);
}
h1 {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: var(--main-size);
margin-bottom: var(--medium-size);
}
label {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
width: 100%;
}
input[type=text],
input[type=password]
{
margin-top: calc(var(--unit-size) * 0.5);
background-color: rgba(0, 0, 0, 0.30);
color: #f6f6f6;
border-style: none;
padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
border-radius: calc(var(--unit-size) * 0.5);
font-size: var(--medium-size);
}
.pair {
float:left;
width: 100%;
margin-bottom: var(--medium-size);
}
.pair input {
display: block;
}
.checkbox label {
font-family: "Open Sans", sans-serif;
font-size: var(--medium-size);
font-weight: normal;
}

40
templates/base.html.twig
View File

@ -54,42 +54,8 @@
{% block header %}
<div id='header'>
<div id='top'>
<div id='left-panel'>
<input type="checkbox" id="toggle">
<div class="icon-menu">
<label for="toggle" id='menu'></label>
</div>
<div class='navbar'>
<div class='profile'>
<svg class="icon icon-avatar">
<use xlink:href="#icon-avatar"></use>
</svg>
<div class="info">
<b id="nick">someone</b>
<div class="tags">
<i>coffee addict</i>
<i>lazy</i>
</div>
<div class="stats">
<span>
<b>1337</b>
Followers</span>
<span>
<b>42</b>
Following</span>
</div>
</div>
</div>
<a href='#'>Bookmarks</a>
<a href='#'>Happenings</a>
<a href='#'>Messages</a>
<a href='#'>Replies</a>
<a href='#'>Favourites</a>
<a href='#'>Reverse Favs</a>
<a href="{{ path('settings_profile') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'settings_' %}active{% endif %}'>Settings</a>
<a href='#'>Logout</a>
</div>
</div>
{% block left %}
{% endblock left %}
<nav id='instance'>
<a href="#">
<svg class="icon icon-logo">
@ -102,7 +68,7 @@
</svg>
</div>
</div>
{% endblock %}
{% endblock header%}
{% block nav %}{% endblock %}
{% block body %}{% endblock %}

13
templates/faq/base.html.twig
View File

@ -1,6 +1,7 @@
{% extends 'base.html.twig' %}
{% extends 'left/left.html.twig' %}
{% block meta %}{{ parent() }}
{% block meta %}
{{ parent() }}
{% endblock %}
{% block title %}{% endblock %}
@ -12,7 +13,13 @@
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/faq/faq_small.css') }}" media="screen and (max-width: 750px)">
{% endblock %}
{% block header %}{{ parent() }}
{% block header %}
{{ parent() }}
{% endblock %}
{% block left %}
{{ parent() }}
{% endblock %}
{% block javascripts %}{% endblock %}

61
templates/left/left.html.twig Normal file
View File

@ -0,0 +1,61 @@
{% extends '/base.html.twig' %}
{% block stylesheets %}
{{ parent() }}
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/left/left.css') }}" media="screen and (min-width: 1300px)">
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/left/left_mid.css') }}" media="screen and (max-width: 1300px)">
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/left/left_small.css') }}" media="screen and (max-width: 750px)">
{% endblock %}
{% block left %}
{% if app.user %}
<div id='left-panel'>
<input type="checkbox" id="toggle">
<div class="icon-menu">
<label for="toggle" id='menu'></label>
</div>
<div class='navbar'>
<div class='profile'>
<svg class="icon icon-avatar">
<use xlink:href="#icon-avatar"></use>
</svg>
<div class="info">
<b id="nick">{{ app.user.username }}</b>
<div class="tags">
<i>coffee addict</i>
<i>lazy</i>
</div>
<div class="stats">
<span>
<b>1337</b>
Followers</span>
<span>
<b>42</b>
Following</span>
</div>
</div>
</div>
<a href='#'>Bookmarks</a>
<a href='#'>Happenings</a>
<a href='#'>Messages</a>
<a href='#'>Replies</a>
<a href='#'>Favourites</a>
<a href='#'>Reverse Favs</a>
<a href="{{ path('settings_profile') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'settings_' %}active{% endif %}'>Settings</a>
<a href='#'>Logout</a>
</div>
</div>
{% else %}
<div id='left-panel'>
<input type="checkbox" id="toggle">
<div class="icon-menu">
<label for="toggle" id='menu'></label>
</div>
<div class='navbar'>
<a href="{{ path('login') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'login' %}active{% endif %}'>Login</a>
<a href='#'>Register</a>
</div>
</div>
{% endif %}
{% endblock %}

66
templates/security/login.html.twig
View File

@ -1,34 +1,48 @@
{% extends 'base.html.twig' %}
{% extends 'left_panel.html.twig' %}
{% block stylesheets %}
{{ parent() }}
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/login/login.css') }}" media="screen and (min-width: 1300px)">
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/login/login_mid.css') }}" media="screen and (max-width: 1300px)">
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/login/login_small.css') }}" media="screen and (max-width: 750px)">
{% endblock %}
{% block title %}Log in!{% endblock %}
{% block body %}
<form method="post">
{% if error %}
<div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
{% endif %}
<div class='content'>
<form method="post">
{% if error %}
<div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
{% endif %}
{% if app.user %}
<div class="mb-3">
You are logged in as {{ app.user.username }}, <a href="{{ path('app_logout') }}">Logout</a>
{% if app.user %}
<div class="mb-3">
You are logged in as {{ app.user.username }}, <a href="{{ path('app_logout') }}">Logout</a>
</div>
{% endif %}
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<div class='pair'>
<label for="inputNickname">Nickname</label>
<input type="text" value="{{ last_username }}" name="nickname" id="inputNickname" class="form-control" required autofocus>
</div>
{% endif %}
<div class='pair' id='pass'>
<label for="inputPassword">Password</label>
<input type="password" name="password" id="inputPassword" class="form-control" required>
</div>
<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<label for="inputNickname">Nickname</label>
<input type="text" value="{{ last_username }}" name="nickname" id="inputNickname" class="form-control" required autofocus>
<label for="inputPassword">Password</label>
<input type="password" name="password" id="inputPassword" class="form-control" required>
<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
<div class="checkbox mb-3">
<label>
<input type="checkbox" name="_remember_me"> Remember me
</label>
</div>
<div class="checkbox mb-3">
<label>
<input type="checkbox" name="_remember_me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary" type="submit">
Sign in
</button>
</form>
{% endblock %}
<button class="btn btn-lg btn-primary" type="submit">
Sign in
</button>
</form>
</div>
{% endblock body %}