mirror of https://github.com/ColorlibHQ/AdminLTE
added login page
Daniel
parent
c40317a29c
commit
41d9d08c55
|
|
@ -0,0 +1,81 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<!-- For RTL verison -->
|
||||
<!-- <html lang="en" dir="rtl"> -->
|
||||
<head>
|
||||
<!-- icheck bootstrap -->
|
||||
@@include('./_head.html', {
|
||||
"path": "../..",
|
||||
"title": "AdminLTE 4 | General Form Elements"
|
||||
})
|
||||
</head>
|
||||
<body class="login-page">
|
||||
<div class="login-box">
|
||||
<div class="login-logo">
|
||||
<a href="../../index2.html"><b>Admin</b>LTE</a>
|
||||
</div>
|
||||
<!-- /.login-logo -->
|
||||
<div class="card">
|
||||
<div class="card-body login-card-body">
|
||||
<p class="login-box-msg">Sign in to start your session</p>
|
||||
|
||||
<form action="../../index3.html" method="post">
|
||||
<div class="input-group mb-3">
|
||||
<input type="email" class="form-control" placeholder="Email">
|
||||
<div class="input-group-text">
|
||||
<span class="fas fa-envelope"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-group mb-3">
|
||||
<input type="password" class="form-control" placeholder="Password">
|
||||
<div class="input-group-text">
|
||||
<span class="fas fa-lock"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-8">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
|
||||
<label class="form-check-label" for="flexCheckDefault">
|
||||
Remember Me
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-4">
|
||||
<div class="d-grid gap-2">
|
||||
<button type="submit" class="btn btn-primary">Sign In</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="social-auth-links text-center mb-3 d-grid gap-2">
|
||||
<p>- OR -</p>
|
||||
<a href="#" class="btn btn-primary">
|
||||
<i class="fab fa-facebook me-2"></i> Sign in using Facebook
|
||||
</a>
|
||||
<a href="#" class="btn btn-danger">
|
||||
<i class="fab fa-google-plus me-2"></i> Sign in using Google+
|
||||
</a>
|
||||
</div>
|
||||
<!-- /.social-auth-links -->
|
||||
|
||||
<p class="mb-1">
|
||||
<a href="forgot-password.html">I forgot my password</a>
|
||||
</p>
|
||||
<p class="mb-0">
|
||||
<a href="register.html" class="text-center">Register a new membership</a>
|
||||
</p>
|
||||
</div>
|
||||
<!-- /.login-card-body -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.login-box -->
|
||||
|
||||
@@include('./_scripts.html', {
|
||||
"path": "../.."
|
||||
})
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -730,7 +730,7 @@ $input-transition: border-color .15s ease-in-out, box-shado
|
|||
// scss-docs-end form-input-variables
|
||||
|
||||
// scss-docs-start form-check-variables
|
||||
$form-check-input-width: 1em !default;
|
||||
$form-check-input-width: 1.125em !default;
|
||||
$form-check-min-height: $font-size-base * $line-height-base !default;
|
||||
$form-check-padding-start: $form-check-input-width + .5em !default;
|
||||
$form-check-margin-bottom: .125rem !default;
|
||||
|
|
|
|||
|
|
@ -23,4 +23,5 @@
|
|||
@import "parts/core";
|
||||
@import "parts/components";
|
||||
@import "parts/extra-components";
|
||||
@import "parts/pages";
|
||||
@import "parts/miscellaneous";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,103 @@
|
|||
//
|
||||
// Pages: Login & Register
|
||||
//
|
||||
|
||||
.login-logo,
|
||||
.register-logo {
|
||||
font-size: 2.1rem;
|
||||
font-weight: 300;
|
||||
margin-bottom: .9rem;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
color: $gray-700;
|
||||
}
|
||||
}
|
||||
|
||||
.login-page,
|
||||
.register-page {
|
||||
align-items: center;
|
||||
background-color: $gray-200;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.login-box,
|
||||
.register-box {
|
||||
width: 360px;
|
||||
|
||||
@media (max-width: map-get($grid-breakpoints, sm)) {
|
||||
margin-top: .5rem;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.login-card-body,
|
||||
.register-card-body {
|
||||
background-color: $white;
|
||||
border-top: 0;
|
||||
color: #666;
|
||||
padding: 20px;
|
||||
|
||||
.input-group {
|
||||
.form-control {
|
||||
border-right: 0;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
|
||||
~ .input-group-prepend .input-group-text,
|
||||
~ .input-group-append .input-group-text {
|
||||
border-color: $input-focus-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-valid {
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
~ .input-group-prepend .input-group-text,
|
||||
~ .input-group-append .input-group-text {
|
||||
border-color: $success;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-invalid {
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
~ .input-group-append .input-group-text {
|
||||
border-color: $danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
background-color: transparent;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
border-left: 0;
|
||||
border-top-right-radius: $border-radius;
|
||||
color: #777;
|
||||
transition: $input-transition;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-box-msg,
|
||||
.register-box-msg {
|
||||
margin: 0;
|
||||
padding: 0 20px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.social-auth-links {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
//
|
||||
// Part: Pages
|
||||
//
|
||||
|
||||
@import "../pages/login_and_register";
|
||||
Loading…
Reference in New Issue