Skip to content
Snippets Groups Projects

Login minimalistic style

Merged Login minimalistic style
feat/styleLogin into main
Merged zaydanA requested to merge feat/styleLogin into main
Compare
and
2 files
+ 77
− 15
Preferences
Compare changes
Files
2
src/views/login.ejs
+ 75
− 13
@@ -8,7 +8,7 @@ body {
@@ -8,7 +8,7 @@ body {
}
}
body {
body {
display: -ms-flexbox;
width: 100vh;
display: flex;
display: flex;
-ms-flex-align: center;
-ms-flex-align: center;
align-items: center;
align-items: center;
@@ -33,8 +33,9 @@ body {
@@ -33,8 +33,9 @@ body {
padding: 10px;
padding: 10px;
font-size: 16px;
font-size: 16px;
}
}
.form-signin .form-control:focus {
z-index: 2;
input{
 
outline: none;
}
}
.form-signin input[type="email"] {
.form-signin input[type="email"] {
margin-bottom: -1px;
margin-bottom: -1px;
@@ -49,17 +50,78 @@ body {
@@ -49,17 +50,78 @@ body {
</style>
</style>
<title><%= title %></title>
<title><%= title %></title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.tailwindcss.com"></script>
 
</head>
</head>
<body class="text-center">
<body class="text-center w-screen flex items-center justify-center fixed">
<form class="form-signin" method="post">
<div class="bg-white flex flex-col w-fit h-fit min-w-4/6 min-h-4/6 rounded-lg border-2 shadow-lg">
<h1 class="h3 mb-3 font-weight-normal">SSO server sign in</h1>
<form class="flex flex-col items-center px-20 py-10" method="post">
<label for="inputEmail" class="sr-only">Email address</label>
<div class="flex flex-row justify-center item-center pr-2 pt-">
<input type="email" name="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
<label for="inputPassword" class="sr-only">Password</label>
width="54.000000pt" height="54pt" viewBox="0 0 154.000000 152.000000"
<input type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required>
preserveAspectRatio="xMidYMid meet">
<div class="checkbox mb-3">
<g transform="translate(0.000000,152.000000) scale(0.100000,-0.100000)"
 
fill="#957c54" stroke="none">
 
<path d="M210 745 l0 -585 590 0 590 0 0 280 0 280 -80 0 -80 0 0 -206 0 -205
 
-22 3 c-23 3 -23 4 -26 206 l-2 202 -75 0 -75 0 0 -205 0 -205 -25 0 -25 0 0
 
205 0 205 -75 0 -75 0 -2 -202 c-3 -202 -3 -203 -25 -206 l-23 -3 0 510 0 511
 
-180 0 -180 0 0 -280 0 -280 75 0 75 0 0 205 0 205 25 0 25 0 0 -436 0 -435
 
-22 3 c-23 3 -23 4 -26 206 l-2 202 -100 0 -100 0 0 305 0 305 -80 0 -80 0 0
 
-585z m208 -302 c-3 -124 -4 -128 -25 -131 -23 -3 -23 -3 -23 127 l0 131 25 0
 
26 0 -3 -127z"/>
 
<path d="M830 1050 l0 -280 280 0 280 0 0 280 0 280 -80 0 -80 0 0 -200 0
 
-200 -125 0 -125 0 0 125 0 125 100 0 100 0 0 75 0 75 -175 0 -175 0 0 -280z"/>
 
<path d="M1030 1055 l0 -75 75 0 75 0 0 75 0 75 -75 0 -75 0 0 -75z"/>
 
</g>
 
</svg>
 
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 
width="100pt" height="60pt" viewBox="0 0 706.000000 179.000000"
 
preserveAspectRatio="xMidYMid meet">
 
<g transform="translate(0.000000,179.000000) scale(0.100000,-0.100000)"
 
fill="#957c54" stroke="none">
 
<path d="M59 1724 l-24 -26 0 -608 0 -608 24 -26 c30 -32 87 -35 122 -7 24 19
 
24 21 27 249 l3 230 49 46 c27 25 56 46 63 46 26 0 53 -32 247 -295 106 -143
 
201 -268 212 -277 11 -10 35 -18 54 -18 47 0 74 29 74 79 0 35 -22 69 -220
 
338 -121 164 -220 307 -220 318 0 13 76 96 211 230 116 116 217 222 225 237
 
33 62 3 118 -63 118 -35 0 -51 -14 -303 -265 -275 -274 -276 -274 -317 -242
 
-10 7 -13 64 -13 224 0 264 -6 283 -94 283 -22 0 -40 -8 -57 -26z"/>
 
<path d="M4945 1360 c-59 -9 -140 -48 -190 -91 l-35 -31 0 36 c0 50 -28 76
 
-83 76 -32 0 -49 -6 -63 -21 -18 -20 -19 -42 -19 -439 0 -397 1 -419 19 -439
 
14 -16 31 -21 67 -21 79 0 79 -1 79 320 0 170 4 290 11 315 31 112 174 168
 
365 142 57 -8 63 -7 83 14 30 33 27 72 -9 102 -16 14 -42 28 -57 31 -61 11
 
-120 13 -168 6z"/>
 
<path d="M2025 1340 c-19 -21 -20 -40 -23 -434 -2 -445 -2 -449 52 -474 30
 
-15 60 -11 91 12 19 14 20 29 25 308 5 319 6 321 67 382 48 49 108 70 198 70
 
127 0 207 -49 245 -150 18 -50 20 -77 20 -307 0 -273 3 -291 54 -315 32 -16
 
69 -9 96 18 19 19 20 34 20 293 0 198 -4 286 -14 323 -32 123 -115 220 -223
 
264 -55 23 -71 24 -323 28 -262 3 -266 3 -285 -18z"/>
 
<path d="M3633 1350 c-270 -57 -421 -362 -317 -640 102 -270 451 -375 717
 
-216 81 49 88 117 14 147 -28 12 -36 10 -96 -23 -36 -20 -93 -42 -127 -49
 
-166 -34 -345 74 -378 228 l-7 32 346 3 c400 3 375 -3 375 102 0 170 -84 312
 
-224 381 -65 32 -83 37 -167 40 -52 2 -113 0 -136 -5z m196 -146 c83 -24 155
 
-112 176 -211 l7 -33 -286 0 c-157 0 -286 4 -286 8 0 57 89 186 151 218 68 35
 
159 42 238 18z"/>
 
<path d="M6431 1345 c-164 -46 -287 -173 -326 -336 -54 -230 46 -459 242 -552
 
l68 -32 269 -3 c149 -2 280 -1 294 3 48 12 55 55 50 315 -4 221 -6 239 -30
 
307 -46 129 -127 217 -254 274 -57 26 -83 32 -164 35 -65 3 -112 -1 -149 -11z
 
m262 -169 c109 -53 174 -174 165 -309 -8 -125 -64 -214 -166 -264 -47 -23 -70
 
-28 -132 -28 -180 1 -304 130 -303 316 1 150 83 265 223 310 51 17 152 5 213
 
-25z"/>
 
<path d="M1362 1327 c-22 -23 -22 -26 -22 -438 0 -404 1 -416 20 -437 31 -33
 
102 -31 129 4 20 26 21 37 21 434 0 397 -1 408 -21 434 -28 35 -95 37 -127 3z"/>
 
<path d="M5564 1329 c-18 -20 -19 -47 -24 -498 l-5 -476 -25 -45 c-33 -59 -98
 
-98 -181 -110 -76 -11 -99 -32 -99 -91 0 -59 26 -79 100 -79 122 0 242 62 308
 
159 68 100 67 85 70 622 3 481 3 486 -18 512 -28 35 -97 38 -126 6z"/>
 
</g>
 
</svg>
</div>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
<label for="inputEmail" class="sr-only">Email address</label>
</form>
<input type="email" name="email" id="inputEmail" class="border-2 border my-2 p-2 rounded-lg" placeholder="Email address" required autofocus>
 
<label for="inputPassword" class="sr-only">Password</label>
 
<input type="password" name="password" id="inputPassword" class="border-2 border p-2 my-2 rounded-lg" placeholder="Password" required>
 
<div class="checkbox mb-3">
 
</div>
 
<button class="btn btn-lg btn-primary btn-block border-2 w-fit px-4 py-2 font-mono rounded-lg bg-[#957c54] text-white hover:bg[#000000]" type="submit">Sign in</button>
 
</form>
 
</div>
</body>
</body>
</html>
</html>
 
\ No newline at end of file