Skip to content

B
Backend Server
Commit 6688b988 authored by SpinShare's avatar SpinShare
Browse files
Options

finish login redesign

parent fc4c2b08
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 469 additions and 267 deletions
public/assets/css/login.css
View file @ 6688b988
.section-login {
display: flex;
justify-content: center;
align-items: center;
.section-login header {
background: rgba(0, 0, 0, 0.5);
padding: 50px;
padding-bottom: 0px;
}
.box {
width: 800px;
min-height: 400px;
background: rgba(255, 255, 255, 0.1);
display: grid;
grid-template-columns: 4fr 6fr;
border-radius: 6px;
overflow: hidden;
.section-login header .title {
font-size: 32px;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 15px;
font-family: 'Oswald', sans-serif;
}
.box .text {
padding: 25px;
.section-login header .tabs {
display: flex;
}
.box .text .title {
letter-spacing: 0.25em;
.section-login header .tabs .tab {
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 15px;
letter-spacing: 0.25em;
padding: 15px 40px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background: rgba(0, 0, 0, 0.6);
color: rgba(255, 255, 255, 0.4);
transition: 0.2s ease-in-out all;
text-decoration: none;
}
.section-login header .tabs .tab:not(.active):hover {
cursor: pointer;
background: #272c2e;
color: rgba(255, 255, 255, 0.75);
}
.section-login header .tabs .tab.active {
opacity: 1;
color: #ffffff;
background: #212629;
}
.section-login .security-content {
padding: 100px;
width: 600px;
text-align: center;
margin: 0 auto;
}
.section-login .security-content img {
width: 100%;
max-height: 200px;
margin-bottom: 50px;
}
.box .text .flashbang {
.section-login .security-content .flashbang {
padding: 10px;
margin-bottom: 25px;
border: 2px solid #fff;
width: 100%;
border-radius: 6px;
}
.box .text .flashbang.flashbang-success {
.section-login .security-content .flashbang.flashbang-success {
background: rgba(121, 223, 90, 0.1);
border-color: #79df5a;
color: #79df5a;
}
.box .text .flashbang.flashbang-error {
.section-login .security-content .flashbang.flashbang-error {
background: rgba(197, 65, 76, 0.1);
border-color: #c5414c;
color: #c5414c;
}
.box .text ul {
padding: 10px;
margin: 0;
margin-bottom: 25px;
list-style-type: none;
border: 2px solid #fff;
width: 100%;
border-radius: 6px;
background: rgba(197, 65, 76, 0.1);
border-color: #c5414c;
color: #c5414c;
.section-login .security-content form {
display: grid;
grid-template-rows: 1fr;
grid-gap: 15px;
}
.box .text input[type="text"],
.box .text input[type="password"],
.box .text input[type="email"] {
.section-login .security-content form select,
.section-login .security-content form input[type="text"],
.section-login .security-content form input[type="password"],
.section-login .security-content form input[type="email"] {
width: 100%;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #fff;
background: rgba(255, 255, 255, 0.2);
text-transform: uppercase;
font-weight: 700;
border-radius: 4px;
padding: 7px 14px;
margin-bottom: 15px;
border: 0px;
transition: 0.2s ease-in-out background, 0.2s ease-in-out color;
text-transform: initial;
font-weight: normal;
}
.box .text input[type="text"]:hover,
.box .text input[type="password"]:hover,
.box .text input[type="email"]:hover {
.section-login .security-content form select:hover,
.section-login .security-content form input[type="text"]:hover,
.section-login .security-content form input[type="password"]:hover,
.section-login .security-content form input[type="email"]:hover {
background: rgba(255, 255, 255, 0.4);
color: #fff;
cursor: text;
}
.box .text input[type="text"]:focus,
.box .text input[type="password"]:focus,
.box .text input[type="email"]:focus {
.section-login .security-content form select:focus,
.section-login .security-content form input[type="text"]:focus,
.section-login .security-content form input[type="password"]:focus,
.section-login .security-content form input[type="email"]:focus {
outline: 0;
}
.box .text input[type="text"]::placeholder,
.box .text input[type="password"]::placeholder,
.box .text input[type="email"]::placeholder {
.section-login .security-content form select::placeholder,
.section-login .security-content form input[type="text"]::placeholder,
.section-login .security-content form input[type="password"]::placeholder,
.section-login .security-content form input[type="email"]::placeholder {
color: rgba(255, 255, 255, 0.6);
}
.box .text input[type="text"] option,
.box .text input[type="password"] option,
.box .text input[type="email"] option {
.section-login .security-content form select option,
.section-login .security-content form input[type="text"] option,
.section-login .security-content form input[type="password"] option,
.section-login .security-content form input[type="email"] option {
background: #222;
text-transform: initial;
}
.box .text input[type="text"]:disabled,
.box .text input[type="password"]:disabled,
.box .text input[type="email"]:disabled {
.section-login .security-content form select:disabled,
.section-login .security-content form input[type="text"]:disabled,
.section-login .security-content form input[type="password"]:disabled,
.section-login .security-content form input[type="email"]:disabled {
opacity: 0.4;
}
.box .text .actions {
display: flex;
justify-content: flex-end;
}
.box .text .actions .button {
margin-left: 5px;
}
.box .text p {
line-height: 1.5em;
}
.box .illustration {
background: linear-gradient(135deg, #fd2f85, #7a34ec);
display: flex;
padding: 25px;
justify-content: center;
align-items: center;
}
.box .illustration img {
width: 80%;
max-height: 80%;
.section-login .security-content p {
line-height: 1.5;
opacity: 0.6;
}
public/assets/css/login.less
View file @ 6688b988
.section-login {
display: flex;
justify-content: center;
align-items: center;
padding: 50px;
}
.box {
width: 800px;
min-height: 400px;
background: rgba(255,255,255,0.1);
display: grid;
grid-template-columns: 4fr 6fr;
border-radius: 6px;
overflow: hidden;
& .text {
padding: 25px;
& header {
background: rgba(0,0,0,0.5);
padding: 50px;
padding-bottom: 0px;
& .title {
letter-spacing: 0.25em;
font-size: 14px;
font-weight: bold;
font-size: 32px;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 15px;
font-family: 'Oswald', sans-serif;
}
& .tabs {
display: flex;
& .tab {
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.25em;
padding: 15px 40px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background: rgba(0,0,0,0.6);
color: rgba(255,255,255,0.4);
transition: 0.2s ease-in-out all;
text-decoration: none;
&:not(.active):hover {
cursor: pointer;
background: #272c2e;
color: rgba(255,255,255,0.75);
}
&.active {
opacity: 1;
color: rgba(255,255,255,1);
background: #212629;
}
}
}
}
& .security-content {
padding: 100px;
width: 600px;
text-align: center;
margin: 0 auto;
& img {
width: 100%;
max-height: 200px;
margin-bottom: 50px;
}
& .flashbang {
padding: 10px;
margin-bottom: 25px;
border: 2px solid #fff;
width: 100%;
border-radius: 6px;
&.flashbang-success {
background: rgba(121, 223, 90, 0.1);
border-color: #79df5a;
......@@ -41,75 +71,45 @@
color: #c5414c;
}
}
& ul {
padding: 10px;
margin: 0;
margin-bottom: 25px;
list-style-type: none;
border: 2px solid #fff;
width: 100%;
border-radius: 6px;
background: rgba(197, 65, 76, 0.1);
border-color: #c5414c;
color: #c5414c;
}
& input[type="text"], & input[type="password"], & input[type="email"] {
width: 100%;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #fff;
background: rgba(255,255,255,0.2);
text-transform: uppercase;
font-weight: 700;
border-radius: 4px;
padding: 7px 14px;
margin-bottom: 15px;
border: 0px;
transition: 0.2s ease-in-out background, 0.2s ease-in-out color;
text-transform: initial;
font-weight: normal;
&:hover {
background: rgba(255,255,255,0.4);
color: #fff;
cursor: text;
}
&:focus {
outline: 0;
}
&::placeholder {
color: rgba(255,255,255,0.6);
}
& option {
background: #222;
text-transform: initial;
}
&:disabled {
opacity: 0.4;
}
}
& .actions {
display: flex;
justify-content: flex-end;
& .button {
margin-left: 5px;
& form {
display: grid;
grid-template-rows: 1fr;
grid-gap: 15px;
& select, & input[type="text"], & input[type="password"], & input[type="email"] {
width: 100%;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #fff;
background: rgba(255,255,255,0.2);
border-radius: 4px;
padding: 7px 14px;
border: 0px;
transition: 0.2s ease-in-out background, 0.2s ease-in-out color;
&:hover {
background: rgba(255,255,255,0.4);
color: #fff;
}
&:focus {
outline: 0;
}
&::placeholder {
color: rgba(255,255,255,0.6);
}
& option {
background: #222;
text-transform: initial;
}
&:disabled {
opacity: 0.4;
}
}
}
& p {
line-height: 1.5em;
}
}
& .illustration {
background: linear-gradient(135deg, #fd2f85, #7a34ec);
display: flex;
padding: 25px;
justify-content: center;
align-items: center;
& img {
width: 80%;
max-height: 80%;
line-height: 1.5;
opacity: 0.6;
}
}
}
\ No newline at end of file
public/assets/img/illustration-404.svg 0 → 100644
View file @ 6688b988
<svg id="a706cf1c-1654-439b-8fcf-310eb7aa0e00" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="1120.59226" height="777.91584" viewBox="0 0 1120.59226 777.91584"><title>not found</title><circle cx="212.59226" cy="103" r="64" fill="#ff6584"/><path d="M563.68016,404.16381c0,151.01141-89.77389,203.73895-200.51559,203.73895S162.649,555.17522,162.649,404.16381,363.16457,61.04208,363.16457,61.04208,563.68016,253.1524,563.68016,404.16381Z" transform="translate(-39.70387 -61.04208)" fill="#f2f2f2"/><polygon points="316.156 523.761 318.21 397.378 403.674 241.024 318.532 377.552 319.455 320.725 378.357 207.605 319.699 305.687 319.699 305.687 321.359 203.481 384.433 113.423 321.621 187.409 322.658 0 316.138 248.096 316.674 237.861 252.547 139.704 315.646 257.508 309.671 371.654 309.493 368.625 235.565 265.329 309.269 379.328 308.522 393.603 308.388 393.818 308.449 394.99 293.29 684.589 313.544 684.589 315.974 535.005 389.496 421.285 316.156 523.761" fill="#3f3d56"/><path d="M1160.29613,466.01367c0,123.61-73.4842,166.77-164.13156,166.77s-164.13156-43.16-164.13156-166.77S996.16457,185.15218,996.16457,185.15218,1160.29613,342.40364,1160.29613,466.01367Z" transform="translate(-39.70387 -61.04208)" fill="#f2f2f2"/><polygon points="950.482 552.833 952.162 449.383 1022.119 321.4 952.426 433.154 953.182 386.639 1001.396 294.044 953.382 374.329 953.382 374.329 954.741 290.669 1006.369 216.952 954.954 277.514 955.804 124.11 950.467 327.188 950.906 318.811 898.414 238.464 950.064 334.893 945.173 428.327 945.027 425.847 884.514 341.294 944.844 434.608 944.232 446.293 944.123 446.469 944.173 447.428 931.764 684.478 948.343 684.478 950.332 562.037 1010.514 468.952 950.482 552.833" fill="#3f3d56"/><ellipse cx="554.59226" cy="680.47903" rx="554.59226" ry="28.03433" fill="#3f3d56"/><ellipse cx="892.44491" cy="726.79663" rx="94.98858" ry="4.80162" fill="#3f3d56"/><ellipse cx="548.71959" cy="773.11422" rx="94.98858" ry="4.80162" fill="#3f3d56"/><ellipse cx="287.94432" cy="734.27887" rx="217.01436" ry="10.96996" fill="#3f3d56"/><circle cx="97.08375" cy="566.26982" r="79" fill="#2f2e41"/><rect x="99.80546" y="689.02332" width="24" height="43" transform="translate(-31.32451 -62.31008) rotate(0.67509)" fill="#2f2e41"/><rect x="147.80213" y="689.58887" width="24" height="43" transform="translate(-31.31452 -62.87555) rotate(0.67509)" fill="#2f2e41"/><ellipse cx="119.54569" cy="732.61606" rx="7.5" ry="20" transform="translate(-654.1319 782.47948) rotate(-89.32491)" fill="#2f2e41"/><ellipse cx="167.55414" cy="732.18168" rx="7.5" ry="20" transform="translate(-606.25475 830.05533) rotate(-89.32491)" fill="#2f2e41"/><circle cx="99.31925" cy="546.29477" r="27" fill="#fff"/><circle cx="99.31925" cy="546.29477" r="9" fill="#3f3d56"/><path d="M61.02588,552.94636c-6.04185-28.64075,14.68758-57.26483,46.30049-63.93367s62.13813,11.14292,68.18,39.78367-14.97834,38.93-46.59124,45.59886S67.06774,581.58712,61.02588,552.94636Z" transform="translate(-39.70387 -61.04208)" fill="#e22c78"/><path d="M257.29613,671.38411c0,55.07585-32.73985,74.3063-73.13,74.3063q-1.40351,0-2.80255-.0312c-1.87139-.04011-3.72494-.1292-5.55619-.254-36.45135-2.57979-64.77127-22.79937-64.77127-74.02113,0-53.00843,67.73872-119.89612,72.827-124.84633l.00892-.00889c.19608-.19159.29409-.28516.29409-.28516S257.29613,616.30827,257.29613,671.38411Z" transform="translate(-39.70387 -61.04208)" fill="#e22c78"/><path d="M181.50168,737.26482l26.747-37.37367-26.81386,41.4773-.07125,4.29076c-1.87139-.04011-3.72494-.1292-5.55619-.254l2.88282-55.10258-.0223-.42775.049-.0802.27179-5.20415-26.88076-41.5798,26.96539,37.67668.06244,1.105,2.17874-41.63324-23.0132-42.96551,23.29391,35.6583,2.26789-86.31419.00892-.294v.28516l-.37871,68.064,22.91079-26.98321-23.00435,32.84678-.60595,37.27566L204.18523,621.958l-21.4805,41.259-.33863,20.723,31.05561-49.79149-31.17146,57.023Z" transform="translate(-39.70387 -61.04208)" fill="#3f3d56"/><circle cx="712.48505" cy="565.41532" r="79" fill="#2f2e41"/><rect x="741.77716" y="691.82355" width="24" height="43" transform="translate(-215.99457 191.86399) rotate(-17.08345)" fill="#2f2e41"/><rect x="787.6593" y="677.72286" width="24" height="43" transform="matrix(0.95588, -0.29376, 0.29376, 0.95588, -209.82788, 204.72037)" fill="#2f2e41"/><ellipse cx="767.887" cy="732.00275" rx="20" ry="7.5" transform="translate(-220.8593 196.83312) rotate(-17.08345)" fill="#2f2e41"/><ellipse cx="813.47537" cy="716.94619" rx="20" ry="7.5" transform="translate(-214.42477 209.56103) rotate(-17.08345)" fill="#2f2e41"/><circle cx="708.52153" cy="545.71023" r="27" fill="#fff"/><circle cx="708.52153" cy="545.71023" r="9" fill="#3f3d56"/><path d="M657.35526,578.74316c-14.48957-25.43323-3.47841-59.016,24.59412-75.0092s62.57592-8.34055,77.06549,17.09268-2.39072,41.6435-30.46325,57.63671S671.84483,604.17639,657.35526,578.74316Z" transform="translate(-39.70387 -61.04208)" fill="#e22c78"/><path d="M611.29613,661.29875c0,50.55711-30.05368,68.20979-67.13,68.20979q-1.28835,0-2.57261-.02864c-1.71785-.03682-3.41933-.1186-5.10033-.23313-33.46068-2.36813-59.45707-20.92878-59.45707-67.948,0-48.65932,62.18106-110.05916,66.85186-114.60322l.00819-.00817c.18-.17587.27-.26177.27-.26177S611.29613,610.74164,611.29613,661.29875Z" transform="translate(-39.70387 -61.04208)" fill="#e22c78"/><path d="M541.72029,721.77424l24.55253-34.30732-24.6139,38.07426-.0654,3.93872c-1.71785-.03682-3.41933-.1186-5.10033-.23313l2.6463-50.58165-.02047-.39266.045-.07361.24949-4.77718-24.67531-38.16836,24.753,34.58547.05731,1.01433,2-38.21741-21.12507-39.44039L541.80616,625.928l2.08182-79.23247.00819-.26994v.26177l-.34764,62.47962,21.031-24.76934-21.11693,30.15184-.55624,34.21735,19.63634-32.839-19.71812,37.87389-.31085,19.0228,28.50763-45.70631-28.614,52.34448Z" transform="translate(-39.70387 -61.04208)" fill="#3f3d56"/><path d="M875.29613,682.38411c0,55.07585-32.73985,74.3063-73.13,74.3063q-1.4035,0-2.80255-.0312c-1.87139-.04011-3.72494-.1292-5.55619-.254-36.45135-2.57979-64.77127-22.79937-64.77127-74.02113,0-53.00843,67.73872-119.89612,72.827-124.84633l.00892-.00889c.19608-.19159.29409-.28516.29409-.28516S875.29613,627.30827,875.29613,682.38411Z" transform="translate(-39.70387 -61.04208)" fill="#e22c78"/><path d="M799.50168,748.26482l26.747-37.37367-26.81386,41.4773-.07125,4.29076c-1.87139-.04011-3.72494-.1292-5.55619-.254l2.88282-55.10258-.0223-.42775.049-.0802.27179-5.20415L770.108,654.01076l26.96539,37.67668.06244,1.105,2.17874-41.63324-23.0132-42.96551,23.29391,35.6583,2.26789-86.31419.00892-.294v.28516l-.37871,68.064,22.91079-26.98321-23.00435,32.84678-.606,37.27566L822.18523,632.958l-21.4805,41.259-.33863,20.723,31.05561-49.79149-31.17146,57.023Z" transform="translate(-39.70387 -61.04208)" fill="#3f3d56"/><ellipse cx="721.51694" cy="656.82212" rx="12.40027" ry="39.5" transform="translate(-220.83517 966.22323) rotate(-64.62574)" fill="#2f2e41"/><ellipse cx="112.51694" cy="651.82212" rx="12.40027" ry="39.5" transform="translate(-574.07936 452.71367) rotate(-68.15829)" fill="#2f2e41"/></svg>
\ No newline at end of file
public/assets/img/illustration-forgotpassword.svg 0 → 100644
View file @ 6688b988
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="fafd2220-3b39-4538-bdd8-5627e33a2e32"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1097.1 811.8"
style="enable-background:new 0 0 1097.1 811.8;" xml:space="preserve">
<style type="text/css">
.st0{fill:#3A1425;enable-background:new ;}
.st1{fill:#EDC9B7;}
.st2{opacity:7.000000e-02;enable-background:new ;}
.st3{opacity:0.1;enable-background:new ;}
.st4{fill:#E22C78;}
.st5{opacity:0.15;fill:#FFFFFF;enable-background:new ;}
.st6{fill:#5B474B;}
</style>
<path class="st0" d="M11.8,430C29.2,504.2,66,568.3,124,599.4c120.7,64.6,392.9,31.3,596.1-7c102.6-19.3,195.8-72.5,264.5-151.2
L11.8,430z"/>
<path class="st0" d="M1077.2,80.7H965.7c-5.3,0-9.6-4.3-9.6-9.6s4.3-9.6,9.6-9.6H985c-5.3,0-9.6-4.3-9.6-9.6s4.3-9.6,9.6-9.6h-13.8
c-5.3,0-9.6-4.3-9.6-9.6s4.3-9.6,9.6-9.6h58.2c-12.9-6-28-10.3-45.4-12.5c-158.6-20.4-215.3-6.9-235.3,7
c-24.7,17.1-52.2,29.7-81.5,35.7c-97.9,20.2-280.9,44.5-446.8-7.8c-82.5-26-143.8,17.9-180.5,91.3h1056.6
c-1.4-21.3-5.5-41-13.1-58.2C1081.7,79.9,1079.5,80.7,1077.2,80.7z"/>
<path class="st0" d="M2.4,275.1c-4.3,43.2-2.8,86.7,4.3,129.5l978.7,35.8c27.2-31.3,50.1-66.2,68-103.7L2.4,275.1z M389.5,367.4
h-19.3c5.3,0,9.6,4.3,9.6,9.6c0,5.3-4.3,9.6-9.6,9.6H258.7c-5.3,0-9.6-4.3-9.6-9.6c0-5.3,4.3-9.6,9.6-9.6H278
c-5.3,0-9.6-4.3-9.6-9.6c0-5.3,4.3-9.6,9.6-9.6l0,0h-13.8c-5.3,0-9.6-4.3-9.6-9.6c0-5.3,4.3-9.6,9.6-9.6l0,0h111.5
c5.3,0,9.6,4.3,9.6,9.6c0,5.3-4.3,9.6-9.6,9.6h13.8c5.3,0,9.6,4.3,9.6,9.6S394.8,367.4,389.5,367.4L389.5,367.4z"/>
<path class="st0" d="M1096.6,137.3l-1068.5,26c-13,33.4-21.6,71.2-25.6,110.3h1075.3c7-23,12.2-46.5,15.5-70.3
C1096.6,180.3,1097.9,158,1096.6,137.3z M219.5,222.4h-19.3c5.3,0,9.6,4.3,9.6,9.6s-4.3,9.6-9.6,9.6H88.7c-5.3,0-9.6-4.3-9.6-9.6
s4.3-9.6,9.6-9.6H108c-5.3,0-9.6-4.3-9.6-9.6s4.3-9.6,9.6-9.6H94.2c-5.3,0-9.6-4.3-9.6-9.6s4.3-9.6,9.6-9.6h111.5
c5.3,0,9.6,4.3,9.6,9.6s-4.3,9.6-9.6,9.6h13.8c5.3,0,9.6,4.3,9.6,9.6S224.8,222.4,219.5,222.4z"/>
<path class="st1" d="M614.8,466.3l-20,191l-107,34c0,0-139-26-103-101c25.6-53.3,24.9-148.7,22.4-199.3c-1-20.5-2.4-33.7-2.4-33.7
s182-159,167-16c-2.9,27.7-3.1,49.3-1.5,66.3C577.1,478,614.8,466.3,614.8,466.3z"/>
<path class="st2" d="M614.8,466.3l-20,191l-107,34c0,0-139-26-103-101c25.6-53.3,24.9-148.7,22.4-199.3c-1-20.5-2.4-33.7-2.4-33.7
s182-159,167-16c-2.9,27.7-3.1,49.3-1.5,66.3C577.1,478,614.8,466.3,614.8,466.3z"/>
<path class="st3" d="M571.8,338.3c-2.9,27.7-3.1,49.3-1.5,66.3c-52.6,28.7-117.4,22.1-163.2-16.5c-1-20.5-2.4-33.7-2.4-33.7
S586.8,195.3,571.8,338.3z"/>
<circle class="st1" cx="500.8" cy="271.3" r="145"/>
<path class="st4" d="M872.1,811.3H210.7c-21.6,0-39.7-16.2-42.2-37.6l-6.6-57.4c-23-153,84-176,84-176l117-54l46.5-43.5
c-15,57,98.5,175.5,98.5,175.5l0,0c0.7-0.7,1.4-1.4,2.1-2.2c3.1-3.3,10.4-11.7,27.5-32.4c6.1-7.4,13.5-16.4,22.4-27.4
c42.8-52.6,20.8-114.8,14.3-127.6l-0.4-0.8c-0.3-0.5-0.4-0.8-0.6-1.1l0,0c0-0.1-0.1-0.2-0.2-0.3c0-0.1-0.1-0.1-0.1-0.2l55,43
c0,0,2.1,0.6,6,1.7c21.4,6,96.6,28.3,166,61.3c57.5,27.3,95.8,153.4,113.6,226.4C919.9,785.5,899.6,811.3,872.1,811.3z"/>
<path class="st4" d="M668.8,582.3c-9-9-70-20-70-20c2,24-72,61-72,61l5.5,188h-35.5l-6-169l17-24l0,0l2.1-2.2
c9.9-10.2,19-21,27.5-32.4c6.1-7.4,13.5-16.4,22.4-27.4c42.8-52.6,20.8-114.8,14.3-127.6l-0.4-0.8c-0.2-0.5-0.4-0.8-0.6-1.1l0,0
c0-0.1-0.1-0.2-0.2-0.3c0-0.1-0.1-0.1-0.1-0.2l0,0c0,0,18-4,50,30c4.1,4.5,7.8,9.4,11,14.7C659.8,512.7,676.7,590.2,668.8,582.3z"/>
<path class="st3" d="M668.8,582.3c-9-9-70-20-70-20c2,24-72,61-72,61l5.5,188h-35.5l-6-169l17-24l0,0l2.1-2.2
c9.9-10.2,19-21,27.5-32.4c6.1-7.4,13.5-16.4,22.4-27.4c42.8-52.6,20.8-114.8,14.3-127.6l-0.4-0.8c-0.2-0.5-0.4-0.8-0.6-1.1l0,0
c0-0.1-0.1-0.2-0.2-0.3c0-0.1-0.1-0.1-0.1-0.2l0,0c0,0,18-4,50,30c4.1,4.5,7.8,9.4,11,14.7C659.8,512.7,676.7,590.2,668.8,582.3z"/>
<path class="st3" d="M261.8,659.3c0,0,47,96,49.5,152.5"/>
<polygon class="st3" points="773.8,714.3 760.3,811.8 773.8,811.8 "/>
<path class="st3" d="M272.3,811.8l74.5-169.5c0,0,21-40,26-80s32-103,32-103s67-85,98-73s-27,57-27,57s85,33,27,131s-59,80-59,80
l-28.5,157.5H272.3z"/>
<path class="st1" d="M270.3,811.8l74.5-169.5c0,0,21-40,26-80c3.2-25.4,15.3-60.2,23.6-82.1c5.5-14.3,13.5-27.6,23.7-39
c21.7-24.2,61-63.3,82.7-54.9c31,12-27,57-27,57s85,33,27,131s-59,80-59,80l-28.5,157.5H270.3z"/>
<circle class="st5" cx="545.3" cy="189.8" r="3"/>
<circle class="st5" cx="531.3" cy="195.8" r="3"/>
<path class="st3" d="M397.8,88.6c14.5-4.7,30.5-3.7,44.4-9.9c18.8-8.4,30.6-28.8,50.1-35.4c8.7-2.9,18.1-2.8,27.2-1.9
c29.3,3,57.2,14.1,80.7,31.9c19.3,14.7,37.4,34.7,61.6,36.3c5.8,0.4,11.8-0.4,17.5,0.8c14.8,3.2,23.7,18.5,28,33
c10,34.8,4.3,72.3-15.7,102.6c-5.5,8.2-12.2,16.2-13.5,26c-1.3,9.6,2.8,19.5,0.4,28.9c-2,7.8-8,13.8-13.8,19.3
c-20.2,19.1-40.8,37.7-61.8,55.8c-10.9-34.8,5.1-72.2,2.6-108.5c-1-14.2-6-29.6-18.5-36.3c-11.7-6.2-26.6-3-38.5-9
c-13.2-6.6-18.6-22.4-28.6-33.3c-17-18.6-46.5-21-70.3-12.6s-43.2,25.7-62,42.5l-34.2,30.6c-6.7-7.5-1.6-19.1,2-28.5
c5.4-14.1,6.6-29.3,6.2-44.2c-0.3-12-4.4-23.9-4.2-35.5C358,118.1,376.2,95.5,397.8,88.6z"/>
<path class="st6" d="M397.8,85.6c14.5-4.7,30.5-3.7,44.4-9.9c18.8-8.4,30.6-28.8,50.1-35.4c8.7-2.9,18.1-2.8,27.2-1.9
c29.3,3,57.2,14.1,80.7,31.9c19.3,14.7,37.4,34.7,61.6,36.3c5.8,0.4,11.8-0.4,17.5,0.8c14.8,3.2,23.7,18.5,28,33
c10,34.8,4.3,72.3-15.7,102.6c-5.5,8.2-12.2,16.2-13.5,26c-1.3,9.6,2.8,19.5,0.4,28.9c-2,7.8-8,13.8-13.8,19.3
c-20.2,19.1-40.8,37.7-61.8,55.8c-10.9-34.8,5.1-72.2,2.6-108.5c-1-14.2-6-29.6-18.5-36.3c-11.7-6.2-26.6-3-38.5-9
c-13.2-6.6-18.6-22.4-28.6-33.3c-17-18.6-46.5-21-70.3-12.6s-43.2,25.7-62,42.5l-34.2,30.6c-6.7-7.5-1.6-19.1,2-28.5
c5.4-14.1,6.6-29.3,6.2-44.2c-0.3-12-4.4-23.9-4.2-35.5C358,115.1,376.2,92.5,397.8,85.6z"/>
</svg>
public/assets/img/illustration-login.svg
View file @ 6688b988
This diff is collapsed.
public/assets/img/illustration-register.svg 0 → 100644
View file @ 6688b988
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="a9d5c6ed-9ea4-42a3-ab78-5bac3f9dde90"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 924.4 599.9"
style="enable-background:new 0 0 924.4 599.9;" xml:space="preserve">
<style type="text/css">
.st0{fill:#4F1D36;}
.st1{fill:#3A1425;}
.st2{fill:#404066;}
.st3{fill:#FFFFFF;}
.st4{fill:#3F3D56;}
.st5{fill:#E22C78;}
</style>
<path class="st0" d="M426,307.3c-30.6,113.6-95.4,213-213,213S0,424.9,0,307.3s124-136.1,213-213C393.8-61.9,521-45.5,426,307.3z"/>
<ellipse class="st1" cx="215.6" cy="520.7" rx="170" ry="23.1"/>
<circle class="st2" cx="206.4" cy="407.7" r="79"/>
<rect x="170.4" y="469.7" class="st2" width="24" height="43"/>
<rect x="218.4" y="469.7" class="st2" width="24" height="43"/>
<ellipse class="st2" cx="190.4" cy="513.2" rx="20" ry="7.5"/>
<ellipse class="st2" cx="238.4" cy="512.2" rx="20" ry="7.5"/>
<circle class="st3" cx="208.4" cy="387.7" r="27"/>
<circle class="st4" cx="208.4" cy="387.7" r="9"/>
<path class="st5" d="M129.8,334.3c-6.4-28.6,14-57.4,45.5-64.5s62.3,10.4,68.6,39s-14.5,39.1-46.1,46.1S136.1,362.8,129.8,334.3z"/>
<circle class="st2" cx="179.4" cy="180.7" r="79"/>
<rect x="143.4" y="242.7" class="st2" width="24" height="43"/>
<rect x="191.4" y="242.7" class="st2" width="24" height="43"/>
<ellipse class="st2" cx="163.4" cy="286.2" rx="20" ry="7.5"/>
<ellipse class="st2" cx="211.4" cy="285.2" rx="20" ry="7.5"/>
<circle class="st3" cx="181.4" cy="160.7" r="27"/>
<circle class="st4" cx="181.4" cy="160.7" r="9"/>
<path class="st5" d="M102.8,107.3c-6.4-28.6,14-57.4,45.5-64.5s62.3,10.4,68.6,39s-14.5,39.1-46.1,46.1S109.1,135.8,102.8,107.3z"/>
<ellipse transform="matrix(0.357 -0.9341 0.9341 0.357 49.2045 313.6335)" class="st2" cx="252.4" cy="121.1" rx="39.5" ry="12.4"/>
<ellipse transform="matrix(0.4285 -0.9035 0.9035 0.4285 -78.5024 164.0335)" class="st2" cx="90.4" cy="144.1" rx="12.4" ry="39.5"/>
<path class="st3" d="M140.6,209.2c0,7.7,19.9,23,42,23s42.8-21.8,42.8-29.5s-20.7,1.5-42.8,1.5S140.6,201.5,140.6,209.2z"/>
<path class="st0" d="M924.4,354c0,81.8-48.6,110.4-108.7,110.4S707.1,435.9,707.1,354s108.7-185.9,108.7-185.9
S924.4,272.2,924.4,354z"/>
<polygon class="st5" points="811.8,451.9 812.9,383.4 859.2,298.7 813.1,372.7 813.6,341.9 845.5,280.6 813.7,333.7 813.7,333.7
814.6,278.4 848.8,229.6 814.8,269.7 815.3,168.1 811.8,302.5 812.1,297 777.3,243.8 811.5,307.6 808.3,369.5 808.2,367.8
768.1,311.9 808.1,373.6 807.7,381.4 807.6,381.5 807.6,382.1 799.4,539.1 810.4,539.1 811.7,458 851.5,396.4 "/>
<ellipse class="st1" cx="804.1" cy="539.1" rx="37.8" ry="11.2"/>
<ellipse class="st1" cx="634.6" cy="576.7" rx="170" ry="23.1"/>
<circle class="st2" cx="636.6" cy="458.2" r="79"/>
<rect x="648.6" y="520.2" class="st2" width="24" height="43"/>
<rect x="600.6" y="520.2" class="st2" width="24" height="43"/>
<ellipse transform="matrix(0.866 -0.5 0.5 0.866 -202.4631 379.8605)" class="st2" cx="607.6" cy="567.7" rx="20" ry="7.5"/>
<ellipse transform="matrix(0.866 -0.5 0.5 0.866 -196.1663 403.3605)" class="st2" cx="654.6" cy="567.7" rx="20" ry="7.5"/>
<circle class="st3" cx="634.6" cy="438.2" r="27"/>
<circle class="st4" cx="625.4" cy="426.7" r="9"/>
<path class="st5" d="M713.2,384.8c6.4-28.6-14-57.4-45.5-64.5c-31.5-7-62.3,10.4-68.6,39s14.5,39.1,46.1,46.1
C676.6,412.5,706.9,413.3,713.2,384.8z"/>
<ellipse transform="matrix(0.3935 -0.9193 0.9193 0.3935 -52.1724 783.0698)" class="st2" cx="567.4" cy="431.1" rx="12.4" ry="39.5"/>
<ellipse transform="matrix(0.3935 -0.9193 0.9193 0.3935 -11.132 951.2767)" class="st2" cx="715.4" cy="484.1" rx="12.4" ry="39.5"/>
<path class="st3" d="M652.4,492.7c0,9.9-8.1,18-18,18c-9.9,0-18-8.1-18-18s8.1-12,18-12C644.3,480.7,652.4,482.8,652.4,492.7z"/>
</svg>
templates/bundles/FOSUserBundle/Registration/register.html.twig
View file @ 6688b988
{% extends 'base.html.twig' %}
{% extends 'bundles/FOSUserBundle/base.html.twig' %}
{% block title %}Register{% endblock %}
{% set sectionTitle = 'Create a new account!' %}
{% block content %}
<section class="section-login">
<div class="box">
<div class="text">
<div class="title">Register</div>
{% block securityContent %}
<div class="security-content">
<img src="{{ asset('assets/img/illustration-register.svg') }}" alt="Illustration for Register" />
{{ form_start(form) }}
{{ form_errors(form.email) }}
{{ form_errors(form.username) }}
{{ form_errors(form.plainPassword.first) }}
{{ form_errors(form.plainPassword.second) }}
{{ form_start(form) }}
{{ form_errors(form.email) }}
{{ form_errors(form.username) }}
{{ form_errors(form.plainPassword.first) }}
{{ form_errors(form.plainPassword.second) }}
{{ form_widget(form.email, {'attr': {'placeholder': 'Email'}}) }}
{{ form_widget(form.username, {'attr': {'placeholder': 'Username'}}) }}
{{ form_widget(form.plainPassword.first, {'attr': {'placeholder': 'Password'}}) }}
{{ form_widget(form.plainPassword.second, {'attr': {'placeholder': 'Password (again)'}}) }}
<div class="actions">
<input class="button" type="submit" value="{{ 'registration.submit'|trans({}, 'FOSUserBundle') }}" />
<a class="button" href="{{ path('fos_user_security_login') }}">Login</a>
</div>
{{ form_rest(form) }}
{{ form_end(form) }}
</div>
<div class="illustration">
<img src="{{ asset('assets/img/illustration-login.svg') }}" alt="Login Illustration" />
</div>
</div>
</section>
{% endblock content %}
{% block styles %}
<link rel="stylesheet" href="{{ asset('assets/css/login.css') }}" />
{% endblock %}
\ No newline at end of file
{{ form_widget(form.email, {'attr': {'placeholder': 'Email'}}) }}
{{ form_widget(form.username, {'attr': {'placeholder': 'Username'}}) }}
{{ form_widget(form.plainPassword.first, {'attr': {'placeholder': 'Password'}}) }}
{{ form_widget(form.plainPassword.second, {'attr': {'placeholder': 'Password (again)'}}) }}
<input class="button" type="submit" value="{{ 'registration.submit'|trans({}, 'FOSUserBundle') }}" />
{{ form_rest(form) }}
{{ form_end(form) }}
</div>
{% endblock securityContent %}
\ No newline at end of file
templates/bundles/FOSUserBundle/Resetting/check_email.html.twig 0 → 100644
View file @ 6688b988
{% trans_default_domain 'FOSUserBundle' %}
{% extends 'bundles/FOSUserBundle/base.html.twig' %}
{% set sectionTitle = 'Forgot your password?' %}
{% block securityContent %}
<div class="security-content">
<img src="{{ asset('assets/img/illustration-confirm.svg') }}" alt="Illustration for Forgot Password" />
<p>{{ 'resetting.check_email'|trans({'%tokenLifetime%': tokenLifetime}) }}<br /><br /></p>
<a href="{{ path('fos_user_security_login') }}" class="button button-center">Login</a>
</div>
{% endblock securityContent %}
\ No newline at end of file
templates/bundles/FOSUserBundle/Resetting/request.html.twig 0 → 100644
View file @ 6688b988
{% trans_default_domain 'FOSUserBundle' %}
{% extends 'bundles/FOSUserBundle/base.html.twig' %}
{% set sectionTitle = 'Forgot your password?' %}
{% block securityContent %}
<div class="security-content">
<img src="{{ asset('assets/img/illustration-forgotpassword.svg') }}" alt="Illustration for Forgot Password" />
<form action="{{ path('fos_user_resetting_send_email') }}" method="POST" class="fos_user_resetting_request">
<input type="text" id="username" name="username" required="required" placeholder="{{ 'resetting.request.username'|trans }}" />
<input type="submit" class="button" value="{{ 'resetting.request.submit'|trans }}" />
</form>
</div>
{% endblock securityContent %}
\ No newline at end of file
templates/bundles/FOSUserBundle/Security/login.html.twig
View file @ 6688b988
{% extends 'base.html.twig' %}
{% extends 'bundles/FOSUserBundle/base.html.twig' %}
{% block title %}Login{% endblock %}
{% set sectionTitle = 'Welcome back!' %}
{% block content %}
<section class="section-login">
<div class="box">
<div class="text">
<div class="title">Login</div>
{% if error %}
<div class="flashbang flashbang-error">{{ error.message }}</div>
{% endif %}
{% block securityContent %}
<div class="security-content">
<img src="{{ asset('assets/img/illustration-login.svg') }}" alt="Illustration for Login" />
<form action="{{ path("fos_user_security_check") }}" method="post">
<input type="text" name="_username" value="{{ last_username }}" placeholder="Username" />
<input type="password" name="_password" placeholder="Password" />
{% if error %}
<div class="flashbang flashbang-error">{{ error.message }}</div>
{% endif %}
<div class="actions">
<input class="button" type="submit" id="_submit" name="_submit" value="{{ 'security.login.submit'|trans({}, 'FOSUserBundle') }}" />
<a class="button" href="{{ path('fos_user_registration_register') }}">Register</a>
</div>
<form action="{{ path("fos_user_security_check") }}" method="post">
<input type="text" name="_username" value="{{ last_username }}" placeholder="Username" />
<input type="password" name="_password" placeholder="Password" />
<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}"/>
</form>
</div>
<div class="illustration">
<img src="{{ asset('assets/img/illustration-login.svg') }}" alt="Login Illustration" />
</div>
</div>
</section>
{% endblock content %}
<input class="button" type="submit" id="_submit" name="_submit" value="{{ 'security.login.submit'|trans({}, 'FOSUserBundle') }}" />
{% block styles %}
<link rel="stylesheet" href="{{ asset('assets/css/login.css') }}" />
{% endblock %}
\ No newline at end of file
<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}"/>
</form>
</div>
{% endblock securityContent %}
\ No newline at end of file
templates/bundles/FOSUserBundle/base.html.twig 0 → 100644
View file @ 6688b988
{% extends 'base.html.twig' %}
{% block title %}{{ sectionTitle }}{% endblock %}
{% block content %}
<section class="section-login">
<header>
<div class="title">{{ sectionTitle }}</div>
<div class="tabs">
<a class="tab {% if app.request.attributes.get('_route') == 'fos_user_security_login' %}active{% endif %}" href="{{ path('fos_user_security_login') }}">Login</a>
<a class="tab {% if app.request.attributes.get('_route') == 'fos_user_registration_register' %}active{% endif %}" href="{{ path('fos_user_registration_register') }}">Register</a>
<a class="tab {% if app.request.attributes.get('_route') == 'fos_user_resetting_request' or app.request.attributes.get('_route') == 'fos_user_resetting_check_email' %}active{% endif %}" href="{{ path('fos_user_resetting_request') }}">Forgot Password</a>
</div>
</header>
{% block securityContent %}
{% endblock %}
</section>
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ asset('assets/css/login.css') }}" />
{% endblock %}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment