mirror of
https://github.com/stisla/stisla.git
synced 2025-09-01 12:12:41 +02:00
added new login page (auth-login-2.html)
This commit is contained in:
Muhamad Nauval Azhar
@@ -1939,6 +1939,9 @@ a.dropdown-item {
|
||||
--light: color(light);
|
||||
--dark: color(dark); }
|
||||
|
||||
body, html {
|
||||
min-height: 100%; }
|
||||
|
||||
body {
|
||||
background-color: #f4f6f9;
|
||||
font-size: 14px;
|
||||
@@ -2032,6 +2035,9 @@ a.bb {
|
||||
color: #34395e;
|
||||
font-weight: 600; }
|
||||
|
||||
.text-muted-transparent {
|
||||
color: rgba(255, 255, 255, 0.8); }
|
||||
|
||||
.img-shadow {
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03); }
|
||||
|
||||
@@ -2189,6 +2195,109 @@ pre {
|
||||
.icon-wrap {
|
||||
width: 100%; } }
|
||||
|
||||
.background-walk-y {
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 0%;
|
||||
-webkit-animation-name: backgroundWalkY;
|
||||
animation-name: backgroundWalkY;
|
||||
-webkit-animation-duration: 70s;
|
||||
animation-duration: 70s;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
-webkit-animation-direction: alternate;
|
||||
animation-direction: alternate;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
-webkit-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
background-size: 100%; }
|
||||
|
||||
@media (max-width: 1199.98px) {
|
||||
.background-walk-y {
|
||||
background-size: cover; } }
|
||||
|
||||
.background-walk-x {
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 0%;
|
||||
-webkit-animation-name: backgroundWalkX;
|
||||
animation-name: backgroundWalkX;
|
||||
-webkit-animation-duration: 70s;
|
||||
animation-duration: 70s;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
-webkit-animation-direction: alternate;
|
||||
animation-direction: alternate;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
-webkit-animation-timing-function: linear;
|
||||
animation-timing-function: linear; }
|
||||
|
||||
@-webkit-keyframes backgroundWalkY {
|
||||
0% {
|
||||
background-position: 0 0%; }
|
||||
100% {
|
||||
background-position: 0 100%; } }
|
||||
|
||||
@keyframes backgroundWalkY {
|
||||
0% {
|
||||
background-position: 0 0%; }
|
||||
100% {
|
||||
background-position: 0 100%; } }
|
||||
|
||||
@-webkit-keyframes backgroundWalkX {
|
||||
0% {
|
||||
background-position: 0 0%; }
|
||||
100% {
|
||||
background-position: 100% 0; } }
|
||||
|
||||
@keyframes backgroundWalkX {
|
||||
0% {
|
||||
background-position: 0 0%; }
|
||||
100% {
|
||||
background-position: 100% 0; } }
|
||||
|
||||
.overlay-gradient-bottom:after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: false;
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.65) 100%);
|
||||
z-index: 1; }
|
||||
|
||||
.overlay-gradient-top:after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: false;
|
||||
background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.65) 100%);
|
||||
z-index: 1; }
|
||||
|
||||
.index-1 {
|
||||
z-index: 1 !important; }
|
||||
|
||||
.index-2 {
|
||||
z-index: 2 !important; }
|
||||
|
||||
.index-3 {
|
||||
z-index: 3 !important; }
|
||||
|
||||
.index-4 {
|
||||
z-index: 4 !important; }
|
||||
|
||||
.index-5 {
|
||||
z-index: 5 !important; }
|
||||
|
||||
.absolute-bottom-left {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0; }
|
||||
|
||||
/* 4.2 Section */
|
||||
.section {
|
||||
position: relative;
|
||||
|
||||
BIN
assets/img/unsplash/login-bg.jpg
Normal file
BIN
assets/img/unsplash/login-bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 989 KiB |
@@ -144,6 +144,9 @@ function compile_html() {
|
||||
}
|
||||
|
||||
function watching() {
|
||||
compile_scss();
|
||||
compile_html();
|
||||
|
||||
/**
|
||||
* BrowserSync initialization
|
||||
* @type {Object}
|
||||
|
||||
110
pages/auth-login-2.html
Normal file
110
pages/auth-login-2.html
Normal file
@@ -0,0 +1,110 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
|
||||
<title>Login — Stisla</title>
|
||||
|
||||
<!-- General CSS Files -->
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
|
||||
|
||||
<!-- CSS Libraries -->
|
||||
<link rel="stylesheet" href="../node_modules/bootstrap-social/bootstrap-social.css">
|
||||
|
||||
<!-- Template CSS -->
|
||||
<link rel="stylesheet" href="../assets/css/style.css">
|
||||
<link rel="stylesheet" href="../assets/css/components.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<section class="section">
|
||||
<div class="d-flex flex-wrap align-items-stretch">
|
||||
<div class="col-lg-4 col-md-6 col-12 order-lg-1 min-vh-100 order-2 bg-white">
|
||||
<div class="p-4 m-3">
|
||||
<img src="../assets/img/stisla-fill.svg" alt="logo" width="80" class="shadow-light rounded-circle mb-5 mt-2">
|
||||
<h4 class="text-dark font-weight-normal">Welcome to <span class="font-weight-bold">Stisla</span></h4>
|
||||
<p class="text-muted">Before you get started, you must login or register if you don't already have an account.</p>
|
||||
<form method="POST" action="#" class="needs-validation" novalidate="">
|
||||
<div class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<input id="email" type="email" class="form-control" name="email" tabindex="1" required autofocus>
|
||||
<div class="invalid-feedback">
|
||||
Please fill in your email
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="d-block">
|
||||
<label for="password" class="control-label">Password</label>
|
||||
</div>
|
||||
<input id="password" type="password" class="form-control" name="password" tabindex="2" required>
|
||||
<div class="invalid-feedback">
|
||||
please fill in your password
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" name="remember" class="custom-control-input" tabindex="3" id="remember-me">
|
||||
<label class="custom-control-label" for="remember-me">Remember Me</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group text-right">
|
||||
<a href="auth-forgot-password.html" class="float-left mt-3">
|
||||
Forgot Password?
|
||||
</a>
|
||||
<button type="submit" class="btn btn-primary btn-lg btn-icon icon-right" tabindex="4">
|
||||
Login
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-5 text-center">
|
||||
Don't have an account? <a href="auth-register.html">Create new one</a>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="text-center mt-5 text-small">
|
||||
Copyright © Your Company. Made with 💙 by Stisla
|
||||
<div class="mt-2">
|
||||
<a href="#">Privacy Policy</a>
|
||||
<div class="bullet"></div>
|
||||
<a href="#">Terms of Service</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-8 col-12 order-lg-2 order-1 min-vh-100 background-walk-y position-relative overlay-gradient-bottom" data-background="../assets/img/unsplash/login-bg.jpg">
|
||||
<div class="absolute-bottom-left index-2">
|
||||
<div class="text-light p-5 pb-2">
|
||||
<div class="mb-5 pb-3">
|
||||
<h1 class="mb-2 display-4 font-weight-bold">Good Mornig</h1>
|
||||
<h5 class="font-weight-normal text-muted-transparent">Bali, Indonesia</h5>
|
||||
</div>
|
||||
Photo by <a class="text-light bb" target="_blank" href="https://unsplash.com/photos/a8lTjWJJgLA">Justin Kauffman</a> on <a class="text-light bb" target="_blank" href="https://unsplash.com">Unsplash</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- General JS Scripts -->
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
|
||||
<script src="../assets/js/stisla.js"></script>
|
||||
|
||||
<!-- JS Libraies -->
|
||||
|
||||
<!-- Page Specific JS File -->
|
||||
|
||||
<!-- Template JS File -->
|
||||
<script src="../assets/js/scripts.js"></script>
|
||||
<script src="../assets/js/custom.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
81
sources/pages/auth-login-2.html
Normal file
81
sources/pages/auth-login-2.html
Normal file
@@ -0,0 +1,81 @@
|
||||
{% set title = 'Login' %}
|
||||
{% set page = 'auth-login.html' %}
|
||||
{% set body = false %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block plugins_css %}
|
||||
<link rel="stylesheet" href="../node_modules/bootstrap-social/bootstrap-social.css">
|
||||
{% endblock %}
|
||||
|
||||
{% block content_2 %}
|
||||
<section class="section">
|
||||
<div class="d-flex flex-wrap align-items-stretch">
|
||||
<div class="col-lg-4 col-md-6 col-12 order-lg-1 min-vh-100 order-2 bg-white">
|
||||
<div class="p-4 m-3">
|
||||
<img src="../assets/img/stisla-fill.svg" alt="logo" width="80" class="shadow-light rounded-circle mb-5 mt-2">
|
||||
<h4 class="text-dark font-weight-normal">Welcome to <span class="font-weight-bold">Stisla</span></h4>
|
||||
<p class="text-muted">Before you get started, you must login or register if you don't already have an account.</p>
|
||||
<form method="POST" action="#" class="needs-validation" novalidate="">
|
||||
<div class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<input id="email" type="email" class="form-control" name="email" tabindex="1" required autofocus>
|
||||
<div class="invalid-feedback">
|
||||
Please fill in your email
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="d-block">
|
||||
<label for="password" class="control-label">Password</label>
|
||||
</div>
|
||||
<input id="password" type="password" class="form-control" name="password" tabindex="2" required>
|
||||
<div class="invalid-feedback">
|
||||
please fill in your password
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" name="remember" class="custom-control-input" tabindex="3" id="remember-me">
|
||||
<label class="custom-control-label" for="remember-me">Remember Me</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group text-right">
|
||||
<a href="auth-forgot-password.html" class="float-left mt-3">
|
||||
Forgot Password?
|
||||
</a>
|
||||
<button type="submit" class="btn btn-primary btn-lg btn-icon icon-right" tabindex="4">
|
||||
Login
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-5 text-center">
|
||||
Don't have an account? <a href="auth-register.html">Create new one</a>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="text-center mt-5 text-small">
|
||||
Copyright © Your Company. Made with 💙 by Stisla
|
||||
<div class="mt-2">
|
||||
<a href="#">Privacy Policy</a>
|
||||
<div class="bullet"></div>
|
||||
<a href="#">Terms of Service</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-8 col-12 order-lg-2 order-1 min-vh-100 background-walk-y position-relative overlay-gradient-bottom" data-background="../assets/img/unsplash/login-bg.jpg">
|
||||
<div class="absolute-bottom-left index-2">
|
||||
<div class="text-light p-5 pb-2">
|
||||
<div class="mb-5 pb-3">
|
||||
<h1 class="mb-2 display-4 font-weight-bold">Good Mornig</h1>
|
||||
<h5 class="font-weight-normal text-muted-transparent">Bali, Indonesia</h5>
|
||||
</div>
|
||||
Photo by <a class="text-light bb" target="_blank" href="https://unsplash.com/photos/a8lTjWJJgLA">Justin Kauffman</a> on <a class="text-light bb" target="_blank" href="https://unsplash.com">Unsplash</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
@@ -11,6 +11,17 @@
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
@mixin background_walk($animation-name: backgroundWalkY, $s: 70s) {
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 0%;
|
||||
animation-name: $animation-name;
|
||||
animation-duration: $s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-direction: alternate;
|
||||
animation-fill-mode: forwards;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
@mixin background_spinner($size: 80px) {
|
||||
background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJsb2FkZXItMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQogd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDUwIDUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MCA1MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iIzAwMCIgZD0iTTQzLjkzNSwyNS4xNDVjMC0xMC4zMTgtOC4zNjQtMTguNjgzLTE4LjY4My0xOC42ODNjLTEwLjMxOCwwLTE4LjY4Myw4LjM2NS0xOC42ODMsMTguNjgzaDQuMDY4YzAtOC4wNzEsNi41NDMtMTQuNjE1LDE0LjYxNS0xNC42MTVjOC4wNzIsMCwxNC42MTUsNi41NDMsMTQuNjE1LDE0LjYxNUg0My45MzV6Ij4NCjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZVR5cGU9InhtbCINCiAgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIg0KICB0eXBlPSJyb3RhdGUiDQogIGZyb209IjAgMjUgMjUiDQogIHRvPSIzNjAgMjUgMjUiDQogIGR1cj0iMC42cyINCiAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4NCjwvcGF0aD4NCjwvc3ZnPg0K');
|
||||
background-size: $size;
|
||||
@@ -18,7 +29,7 @@
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
@mixin overlay($z-index: 99, $background-color: rgba(255, 255, 255, 0.5)) {
|
||||
@mixin overlay($z-index: 99, $background-color: rgba(255, 255, 255, 0.5), $background-image: false) {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -26,6 +37,9 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: $background-color;
|
||||
@if $background-image != false {
|
||||
background-image: $background-image;
|
||||
}
|
||||
z-index: $z-index;
|
||||
}
|
||||
|
||||
|
||||
@@ -12,6 +12,10 @@
|
||||
--dark: color(dark);
|
||||
}
|
||||
|
||||
body, html {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: color(body);
|
||||
font-size: $font_size;
|
||||
@@ -123,6 +127,10 @@ a.bb {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.text-muted-transparent {
|
||||
color: rgba(255,255,255,.8);
|
||||
}
|
||||
|
||||
.img-shadow {
|
||||
@include shadow;
|
||||
}
|
||||
@@ -315,3 +323,60 @@ pre {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.background-walk-y {
|
||||
@include background_walk;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
.background-walk-y {
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.background-walk-x {
|
||||
@include background_walk(backgroundWalkX);
|
||||
}
|
||||
|
||||
@keyframes backgroundWalkY {
|
||||
0% {
|
||||
background-position: 0 0%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes backgroundWalkX {
|
||||
0% {
|
||||
background-position: 0 0%;
|
||||
}
|
||||
100% {
|
||||
background-position: 100% 0;
|
||||
}
|
||||
}
|
||||
|
||||
.overlay-gradient-bottom {
|
||||
&:after {
|
||||
@include overlay(1, false, linear-gradient(to bottom, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.65) 100%));
|
||||
}
|
||||
}
|
||||
|
||||
.overlay-gradient-top {
|
||||
&:after {
|
||||
@include overlay(1, false, linear-gradient(to top, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.65) 100%));
|
||||
}
|
||||
}
|
||||
|
||||
.index-1 { z-index: 1 !important; }
|
||||
.index-2 { z-index: 2 !important; }
|
||||
.index-3 { z-index: 3 !important; }
|
||||
.index-4 { z-index: 4 !important; }
|
||||
.index-5 { z-index: 5 !important; }
|
||||
|
||||
.absolute-bottom-left {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user