mirror of https://github.com/ColorlibHQ/AdminLTE
added login page
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-end form-input-variables
|
||||||
|
|
||||||
// scss-docs-start form-check-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-min-height: $font-size-base * $line-height-base !default;
|
||||||
$form-check-padding-start: $form-check-input-width + .5em !default;
|
$form-check-padding-start: $form-check-input-width + .5em !default;
|
||||||
$form-check-margin-bottom: .125rem !default;
|
$form-check-margin-bottom: .125rem !default;
|
||||||
|
|
|
@ -23,4 +23,5 @@
|
||||||
@import "parts/core";
|
@import "parts/core";
|
||||||
@import "parts/components";
|
@import "parts/components";
|
||||||
@import "parts/extra-components";
|
@import "parts/extra-components";
|
||||||
|
@import "parts/pages";
|
||||||
@import "parts/miscellaneous";
|
@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