login template done
This commit is contained in:
BlasenhauerJ
parent
0f5756cfb4
commit
3a0727b5cd
|
|
@ -807,6 +807,10 @@ h6 {
|
|||
z-index: 50;
|
||||
}
|
||||
|
||||
.-z-10 {
|
||||
z-index: -10;
|
||||
}
|
||||
|
||||
.order-2 {
|
||||
order: 2;
|
||||
}
|
||||
|
|
@ -908,11 +912,6 @@ h6 {
|
|||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.my-auto {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.my-4 {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
|
|
@ -923,9 +922,9 @@ h6 {
|
|||
margin-right: 0.625rem;
|
||||
}
|
||||
|
||||
.mx-3 {
|
||||
margin-left: 0.75rem;
|
||||
margin-right: 0.75rem;
|
||||
.mx-4 {
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.my-3 {
|
||||
|
|
@ -933,14 +932,19 @@ h6 {
|
|||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.mx-3 {
|
||||
margin-left: 0.75rem;
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
|
||||
.my-5 {
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.mx-4 {
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
.my-6 {
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.mb-1 {
|
||||
|
|
@ -1023,6 +1027,10 @@ h6 {
|
|||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mt-2 {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.mt-0 {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
|
@ -1047,10 +1055,6 @@ h6 {
|
|||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.mt-2 {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.mr-6 {
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
|
|
@ -1071,6 +1075,10 @@ h6 {
|
|||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.mb-8 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.box-content {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
|
@ -1187,10 +1195,18 @@ h6 {
|
|||
max-height: 25rem;
|
||||
}
|
||||
|
||||
.max-h-60 {
|
||||
max-height: 15rem;
|
||||
}
|
||||
|
||||
.max-h-16 {
|
||||
max-height: 4rem;
|
||||
}
|
||||
|
||||
.max-h-80 {
|
||||
max-height: 20rem;
|
||||
}
|
||||
|
||||
.max-h-90 {
|
||||
max-height: 22.5rem;
|
||||
}
|
||||
|
|
@ -1199,12 +1215,8 @@ h6 {
|
|||
max-height: 2rem;
|
||||
}
|
||||
|
||||
.max-h-116 {
|
||||
max-height: 29rem;
|
||||
}
|
||||
|
||||
.max-h-80 {
|
||||
max-height: 20rem;
|
||||
.max-h-30 {
|
||||
max-height: 7.5rem;
|
||||
}
|
||||
|
||||
.min-h-20 {
|
||||
|
|
@ -1227,6 +1239,10 @@ h6 {
|
|||
min-height: 13rem;
|
||||
}
|
||||
|
||||
.min-h-\[55vh\] {
|
||||
min-height: 55vh;
|
||||
}
|
||||
|
||||
.min-h-12 {
|
||||
min-height: 3rem;
|
||||
}
|
||||
|
|
@ -1239,16 +1255,8 @@ h6 {
|
|||
min-height: 85vh;
|
||||
}
|
||||
|
||||
.min-h-\[40vh\] {
|
||||
min-height: 40vh;
|
||||
}
|
||||
|
||||
.min-h-\[45vh\] {
|
||||
min-height: 45vh;
|
||||
}
|
||||
|
||||
.min-h-\[55vh\] {
|
||||
min-height: 55vh;
|
||||
.min-h-screen {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.w-full {
|
||||
|
|
@ -1335,6 +1343,10 @@ h6 {
|
|||
max-width: 10rem;
|
||||
}
|
||||
|
||||
.max-w-120 {
|
||||
max-width: 30rem;
|
||||
}
|
||||
|
||||
.max-w-64 {
|
||||
max-width: 16rem;
|
||||
}
|
||||
|
|
@ -1351,6 +1363,22 @@ h6 {
|
|||
max-width: 300px;
|
||||
}
|
||||
|
||||
.max-w-60 {
|
||||
max-width: 15rem;
|
||||
}
|
||||
|
||||
.max-w-\[460px\] {
|
||||
max-width: 460px;
|
||||
}
|
||||
|
||||
.max-w-\[40px\] {
|
||||
max-width: 40px;
|
||||
}
|
||||
|
||||
.max-w-\[400px\] {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.flex-auto {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
|
@ -1525,10 +1553,6 @@ h6 {
|
|||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -2003,6 +2027,10 @@ h6 {
|
|||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.p-12 {
|
||||
padding: 3rem;
|
||||
}
|
||||
|
||||
.px-2 {
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
|
|
@ -2088,6 +2116,16 @@ h6 {
|
|||
padding-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.px-12 {
|
||||
padding-left: 3rem;
|
||||
padding-right: 3rem;
|
||||
}
|
||||
|
||||
.py-16 {
|
||||
padding-top: 4rem;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
.pb-0 {
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
|
@ -2124,10 +2162,6 @@ h6 {
|
|||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.pt-5 {
|
||||
padding-top: 1.25rem;
|
||||
}
|
||||
|
||||
.pl-6 {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
|
@ -2164,6 +2198,10 @@ h6 {
|
|||
padding-left: 1.75rem;
|
||||
}
|
||||
|
||||
.pt-5 {
|
||||
padding-top: 1.25rem;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
|
@ -3080,10 +3118,19 @@ h6 {
|
|||
grid-column: span 1 / span 1;
|
||||
}
|
||||
|
||||
.sm\:col-span-2 {
|
||||
grid-column: span 2 / span 2;
|
||||
}
|
||||
|
||||
.sm\:col-start-5 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.sm\:my-0 {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.sm\:mx-6 {
|
||||
margin-left: 1.5rem;
|
||||
margin-right: 1.5rem;
|
||||
|
|
@ -3094,11 +3141,6 @@ h6 {
|
|||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.sm\:my-0 {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.sm\:ml-1 {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
|
@ -3107,6 +3149,10 @@ h6 {
|
|||
margin-right: 4rem;
|
||||
}
|
||||
|
||||
.sm\:block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sm\:hidden {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -3198,6 +3244,10 @@ h6 {
|
|||
grid-column: span 7 / span 7;
|
||||
}
|
||||
|
||||
.md\:col-span-1 {
|
||||
grid-column: span 1 / span 1;
|
||||
}
|
||||
|
||||
.md\:my-0 {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
|
|
@ -3249,6 +3299,11 @@ h6 {
|
|||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.md\:bg-white {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.md\:py-4 {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
|
|
@ -3276,6 +3331,10 @@ h6 {
|
|||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.lg\:relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.lg\:order-1 {
|
||||
order: 1;
|
||||
}
|
||||
|
|
@ -3304,6 +3363,10 @@ h6 {
|
|||
grid-column: span 3 / span 3;
|
||||
}
|
||||
|
||||
.lg\:col-span-1 {
|
||||
grid-column: span 1 / span 1;
|
||||
}
|
||||
|
||||
.lg\:mx-8 {
|
||||
margin-left: 2rem;
|
||||
margin-right: 2rem;
|
||||
|
|
@ -3322,6 +3385,18 @@ h6 {
|
|||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.lg\:block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.lg\:flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.lg\:hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.lg\:h-9 {
|
||||
height: 2.25rem;
|
||||
}
|
||||
|
|
@ -3370,6 +3445,21 @@ h6 {
|
|||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.lg\:bg-white {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.lg\:bg-gray-100 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(235 239 244 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.lg\:bg-gray-50 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(248 249 250 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.lg\:text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
|
@ -3477,3 +3567,8 @@ h6 {
|
|||
grid-column: span 2 / span 2;
|
||||
}
|
||||
}
|
||||
|
||||
.\[\&\>\*\]\:bg-primary>* {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(8 85 119 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,138 +8,126 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<title>BunkerWeb UI</title>
|
||||
<link href="images/favicon.ico" rel="icon" type="image/x-icon" />
|
||||
<link href="webfonts/karla.css" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="css/login.css" />
|
||||
<!-- Fonts and icons -->
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="css/dashboard.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="position-fixed bottom-0 end-0 p-3 pt-5 toast-container">
|
||||
{% if error %}
|
||||
<div
|
||||
class="toast fade show"
|
||||
role="alert"
|
||||
aria-live="assertive"
|
||||
aria-atomic="true"
|
||||
>
|
||||
<div class="toast-header">
|
||||
<img
|
||||
src="images/favicon.ico"
|
||||
class="rounded me-2"
|
||||
alt="BunkerWeb icon"
|
||||
width="14"
|
||||
height="14"
|
||||
/>
|
||||
<strong class="me-auto">BunkerWeb</strong>
|
||||
<small style="color: rgb(168, 0, 0)">error</small>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
data-bs-dismiss="toast"
|
||||
aria-label="Close"
|
||||
></button>
|
||||
</div>
|
||||
<div class="toast-body">{{ error }}</div>
|
||||
</div>
|
||||
{% endif %} {% with messages = get_flashed_messages(with_categories=true)
|
||||
%} {% if messages %} {% for category, message in messages %}
|
||||
<div
|
||||
class="toast fade show"
|
||||
role="alert"
|
||||
aria-live="assertive"
|
||||
aria-atomic="true"
|
||||
>
|
||||
<div class="toast-header">
|
||||
<img
|
||||
src="images/favicon.ico"
|
||||
class="rounded me-2"
|
||||
alt="BunkerWeb icon"
|
||||
width="14"
|
||||
height="14"
|
||||
/>
|
||||
<strong class="me-auto">BunkerWeb</strong>
|
||||
<small style="color: rgb(168, 0, 0)">error</small>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
data-bs-dismiss="toast"
|
||||
aria-label="Close"
|
||||
></button>
|
||||
</div>
|
||||
<div class="toast-body">{{ message|safe }}</div>
|
||||
</div>
|
||||
{% endfor %} {% endif %} {% endwith %}
|
||||
{% if error %}
|
||||
<!-- flash message-->
|
||||
{% with messages = get_flashed_messages(with_categories=true) %} {% if
|
||||
messages %} {% for category, message in messages %}
|
||||
<div
|
||||
flash-message
|
||||
class="hidden p-4 mb-1 md:mb-3 md:mr-3 z-[1001] flex flex-col fixed bottom-0 right-0 w-full md:w-1/2 max-w-screen-sm min-h-20 bg-white rounded-lg dark:brightness-110 hover:scale-102 transition shadow-md break-words dark:bg-slate-850 dark:shadow-dark-xl bg-clip-border"
|
||||
>
|
||||
{% if category == 'error' %}
|
||||
<h5 class="text-lg mb-0 text-red-500">error</h5>
|
||||
<p class="text-red-500 mb-0 text-sm">{{ message|safe }}</p>
|
||||
{% endif %} {% if category == 'success' %}
|
||||
<h5 class="text-lg mb-0 text-green-500">success</h5>
|
||||
<p class="text-green-500 mb-0 text-sm">{{ message|safe }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-sm-6 login-section-wrapper">
|
||||
<div class="brand-wrapper d-sm-none">
|
||||
<img
|
||||
src="images/BUNKERWEB-print-hd.png"
|
||||
alt="logo"
|
||||
class="logo"
|
||||
/>
|
||||
</div>
|
||||
<div class="login-wrapper my-auto">
|
||||
<h1 class="login-title">Log in</h1>
|
||||
<form action="login" method="POST" autocomplete="off">
|
||||
<input
|
||||
type="hidden"
|
||||
name="csrf_token"
|
||||
value="{{ csrf_token() }}"
|
||||
/>
|
||||
<input
|
||||
type="hidden"
|
||||
name="next"
|
||||
value="{{ request.values.get('next', '') }}"
|
||||
/>
|
||||
<div class="form-group">
|
||||
<label for="username">Username</label>
|
||||
<input
|
||||
type="username"
|
||||
name="username"
|
||||
id="username"
|
||||
class="form-control"
|
||||
placeholder="Username"
|
||||
required=""
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group mb-4">
|
||||
<label for="password">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
id="password"
|
||||
class="form-control"
|
||||
placeholder="enter your password"
|
||||
required=""
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
name="login"
|
||||
id="login"
|
||||
class="btn btn-block login-btn"
|
||||
type="submit"
|
||||
value="Login"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 px-0 d-none d-sm-block">
|
||||
<div id="particles-js" class="login-img"></div>
|
||||
{% endfor %} {% endif %} {% endwith %} {%endif %}
|
||||
<!-- end flash message-->
|
||||
<!--content -->
|
||||
<main class="grid grid-cols-2 align-middle items-center min-h-screen">
|
||||
<!--form -->
|
||||
<div
|
||||
class="col-span-2 lg:col-span-1 bg-none lg:bg-gray-50 h-full flex flex-col items-center justify-center"
|
||||
>
|
||||
<div class="bg-gray-50 rounded px-12 py-16 w-full max-w-[400px]">
|
||||
<div class="flex justify-center">
|
||||
<img
|
||||
src="images/BUNKERWEB-print-hd-blanc.png"
|
||||
class="lg:hidden max-w-60 max-h-30 mb-6"
|
||||
src="images/BUNKERWEB-print-hd.png"
|
||||
alt="logo"
|
||||
class="images login-logo"
|
||||
class="logo"
|
||||
/>
|
||||
</div>
|
||||
<h1
|
||||
class="hidden lg:block text-center font-bold dark:text-white mb-8"
|
||||
>
|
||||
Log in
|
||||
</h1>
|
||||
<form action="login" method="POST" autocomplete="off">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
|
||||
<input
|
||||
type="hidden"
|
||||
name="next"
|
||||
value="{{ request.values.get('next', '') }}"
|
||||
/>
|
||||
<!-- username inpt-->
|
||||
<div class="flex flex-col relative col-span-12 my-3">
|
||||
<h5
|
||||
class="my-1 transition duration-300 ease-in-out dark:opacity-90 text-md font-bold m-0 dark:text-gray-300"
|
||||
>
|
||||
Username
|
||||
</h5>
|
||||
<input
|
||||
type="username"
|
||||
id="username"
|
||||
name="username"
|
||||
class="col-span-12 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-4 py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500"
|
||||
placeholder="enter username"
|
||||
pattern="(.*?)"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<!-- end username inpt-->
|
||||
<!-- password inpt-->
|
||||
<div class="flex flex-col relative col-span-12 my-3">
|
||||
<h5
|
||||
class="my-1 transition duration-300 ease-in-out dark:opacity-90 text-md font-bold m-0 dark:text-gray-300"
|
||||
>
|
||||
Password
|
||||
</h5>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
class="col-span-12 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-4 py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500"
|
||||
placeholder="enter password"
|
||||
pattern="(.*?)"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<!-- end password inpt-->
|
||||
<div class="flex justify-center">
|
||||
<button
|
||||
type="submit"
|
||||
id="login"
|
||||
name="login"
|
||||
value="login"
|
||||
class="my-4 dark:brightness-90 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-primary hover:bg-primary/80 focus:bg-primary/80 leading-normal text-sm ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
|
||||
>
|
||||
Log in
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end form -->
|
||||
<!-- particles -->
|
||||
<div class="-z-10 fixed lg:relative lg:col-span-1 bg-primary">
|
||||
<div id="particles-js" class="login-img [&>*]:bg-primary"></div>
|
||||
<div class="hidden lg:flex justify-center">
|
||||
<img
|
||||
class="max-w-60 max-h-30"
|
||||
src="images/BUNKERWEB-print-hd-blanc.png"
|
||||
alt="logo"
|
||||
class="images login-logo"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- end particles -->
|
||||
<!-- end content -->
|
||||
<script src="js/tsparticles.bundle.min.js"></script>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="js/popper.min.js"></script>
|
||||
<script src="js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
tsParticles.loadJSON("particles-js", "json/particles.json");
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue