pelayanan_pelatihan/resources/views/login/index.blade.php
2023-11-20 12:03:38 +00:00

419 lines
14 KiB
PHP

{{-- <!DOCTYPE html>
<html>
<head>
<title>KEMENDESA | PELAYANAN PELATIHAN</title>
<link href="assets-login-landing/img/Kemendes_Logo.png" rel="icon">
<!-- Favicons -->
<link rel="stylesheet" type="text/css" href="assets-login/css/style.css">
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,600,600i,700,700i"
rel="stylesheet">
<script src="https://kit.fontawesome.com/a81368914c.js"></script>
<!-- Template Main CSS File -->
<link href="assets-login-landing/css/style.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="login">
<div class="container">
<div class="img">
<img src="assets-login-landing/img/login.svg" class="img-fluid animated" id="moving-login-img">
</div>
<div class="login-content">
<form action="/login" method="POST">
@csrf
@if (session()->has('errorLogin'))
<div class="alert alert-danger" role="alert">
{{ session('errorLogin') }}
</div>
@endif
<h1 class="title">Selamat Datang!</h1>
<p>Silahkan Masukan Email dan Password Anda</p>
<div class="input-div one">
<div class="i">
<i class="fas fa-user"></i>
</div>
<div class="div">
<h5>Email</h5>
<input type="email" class="input" name="email">
</div>
</div>
<div class="input-div pass">
<div class="i">
<i class="fas fa-lock"></i>
</div>
<div class="div">
<h5>Password</h5>
<input type="password" class="input" name="password">
</div>
</div>
<input type="submit" class="btn" value="Login" style="color: #fff;">
</form>
</div>
</div>
</div>
<script>
const inputs = document.querySelectorAll(".input");
function addcl() {
let parent = this.parentNode.parentNode;
parent.classList.add("focus");
}
function remcl() {
let parent = this.parentNode.parentNode;
if (this.value == "") {
parent.classList.remove("focus");
}
}
inputs.forEach(input => {
input.addEventListener("focus", addcl);
input.addEventListener("blur", remcl);
});
</script>
</body>
</html> --}}
{{-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Log In | Hyper - Responsive Bootstrap 5 Admin Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
<meta content="Coderthemes" name="author" />
<!-- App favicon -->
<link rel="shortcut icon" href="assets/images/favicon.ico">
<!-- App css -->
<link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/app.min.css" rel="stylesheet" type="text/css" id="light-style" />
<link href="assets/css/app-dark.min.css" rel="stylesheet" type="text/css" id="dark-style" />
</head>
<body class="loading authentication-bg"
data-layout-config='{"leftSideBarTheme":"dark","layoutBoxed":false, "leftSidebarCondensed":false, "leftSidebarScrollable":false,"darkMode":false, "showRightSidebarOnStart": true}'>
<div class="account-pages pt-2 pt-sm-5 pb-4 pb-sm-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-xxl-4 col-lg-5">
<div class="card">
<!-- Logo -->
<div class="card-header pt-4 pb-4 text-center bg-primary">
<a href="index.html">
<span><img src="assets/images/logo.png" alt="" height="18"></span>
</a>
</div>
<div class="card-body p-4">
<div class="text-center w-75 m-auto">
<h4 class="text-dark-50 text-center pb-0 fw-bold">Sign In</h4>
<p class="text-muted mb-4">Enter your email address and password to access admin panel.
</p>
</div>
<form action="/login" method="POST">
@csrf
@if (session()->has('errorLogin'))
<div class="alert alert-danger" role="alert">
{{ session('errorLogin') }}
</div>
@endif
<div class="mb-3">
<label for="emailaddress" class="form-label">Email address</label>
<input class="form-control" type="email" name="email" required=""
placeholder="Enter your email">
</div>
<label for="password" class="form-label">Password</label>
<div class="input-group input-group-merge">
<input type="password" name="password" class="form-control"
placeholder="Enter your password">
<div class="input-group-text" data-password="false">
<span class="password-eye"></span>
</div>
</div>
</div>
<div class="mb-3 mb-0 text-center">
<button class="btn btn-primary" type="submit"> Log In </button>
</div>
</form>
</div> <!-- end card-body -->
</div>
<!-- end card -->
<div class="row mt-3">
<div class="col-12 text-center">
<p class="text-muted">Don't have an account? <a href="pages-register.html"
class="text-muted ms-1"><b>Sign Up</b></a></p>
</div> <!-- end col -->
</div>
<!-- end row -->
</div> <!-- end col -->
</div>
<!-- end row -->
</div>
<!-- end container -->
</div>
<!-- end page -->
<footer class="footer footer-alt">
2018 - 2021 © Hyper - Coderthemes.com
</footer>
<!-- bundle -->
<script src="assets/js/vendor.min.js"></script>
<script src="assets/js/app.min.js"></script>
</body>
</html> --}}
<!DOCTYPE html>
<html>
<head>
<title>KEMENDESA | PELAYANAN PELATIHAN</title>
<link href="assets-login-landing/img/Kemendes_Logo.png" rel="icon">
<!-- Favicons -->
{{-- <link rel="stylesheet" type="text/css" href="assets-login/css/style.css"> --}}
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,600,600i,700,700i"
rel="stylesheet">
<script src="https://kit.fontawesome.com/a81368914c.js"></script>
<!-- Template Main CSS File -->
{{-- <link href="assets-login-landing/css/style.css" rel="stylesheet"> --}}
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: Poppins;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.bg-img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
.wrapper {
position: relative;
}
.login-card {
border-radius: 10px;
background: #fff;
padding: 75px 50px 100px 50px;
width: 100%;
max-width: 400px;
box-shadow: 0 30px 60px 0 rgba(0, 0, 0, 0.3);
text-align: center;
margin: 0;
}
.icon {
width: 40%;
margin-bottom: 10px;
}
.title {
color: #1D2732;
text-align: center;
font-size: 1.3rem;
font-style: normal;
font-weight: 600;
line-height: normal;
margin-bottom: .5rem;
}
.text {
color: #1D2732;
font-size: .8rem;
font-weight: 500;
margin-bottom: 1rem;
}
.input-login {
width: 100%;
height: 40px;
border-radius: .5rem;
border: none;
background: #F8F8F8;
padding: 10px;
margin: 5px 0;
}
.input-login:focus {
outline: none;
border: 1px solid #d9d9d9;
}
.btn-login {
width: 100%;
height: 40px;
border: none;
color: #fff;
border-radius: .5rem;
background: #009C98;
box-shadow: -2px 4px 4px 0px rgba(0, 0, 0, 0.10);
padding: 0;
font-weight: 600;
font-size: 11px;
transition: transform 0.3s ease;
margin-top: 20px;
}
.btn-login:hover {
transform: translateY(-5px);
}
.footer {
color: #1D2732;
font-size: 0.6rem;
font-style: normal;
font-weight: 400;
line-height: normal;
padding: 0;
margin: 75px 0 0 0;
}
</style>
</head>
<body>
{{-- <div class="login">
<div class="container">
<div class="img">
<img src="assets-login-landing/img/login.svg" class="img-fluid animated" id="moving-login-img">
</div>
<div class="login-content">
<form action="/login" method="POST">
@csrf
@if (session()->has('errorLogin'))
<div class="alert alert-danger" role="alert">
{{ session('errorLogin') }}
</div>
@endif
<h1 class="title">Selamat Datang!</h1>
<p>Silahkan Masukan Email dan Password Anda</p>
<div class="input-div one">
<div class="i">
<i class="fas fa-user"></i>
</div>
<div class="div">
<h5>Email</h5>
<input type="email" class="input" name="email">
</div>
</div>
<div class="input-div pass">
<div class="i">
<i class="fas fa-lock"></i>
</div>
<div class="div">
<h5>Password</h5>
<input type="password" class="input" name="password">
</div>
</div>
<input type="submit" class="btn" value="Login" style="color: #fff;">
</form>
</div>
</div>
</div>
<script>
const inputs = document.querySelectorAll(".input");
function addcl() {
let parent = this.parentNode.parentNode;
parent.classList.add("focus");
}
function remcl() {
let parent = this.parentNode.parentNode;
if (this.value == "") {
parent.classList.remove("focus");
}
}
inputs.forEach(input => {
input.addEventListener("focus", addcl);
input.addEventListener("blur", remcl);
});
</script> --}}
<img class="bg-img" src="assets-login-landing/img/login_bg.png" alt="">
<div class="wrapper">
<!-- <div class="card login-card p-2" id="formContent"> -->
<div class="card login-card" id="formContent">
<!-- <img class="card-img-top icon" src="assets/img/logo-green.png" alt="login logo"> -->
<img class="icon" src="assets-login-landing/img/logo.png" alt="login logo">
<div>
<p class="title">Selamat Datang</p>
<p class="text">Lakukan login terlebih dahulu untuk memulai.</p>
</div>
<div class="card-body">
<form action="/login" method="POST">
@csrf
@if (session()->has('errorLogin'))
<div class="alert alert-danger" role="alert">
{{ session('errorLogin') }}
</div>
@endif
<div class="row">
<div class="col">
<div class="form-group">
<input type="email" ngModel placeholder="Email" name="email"
class="form-control input-login" required />
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="form-group">
<input type="password" ngModel placeholder="Password" name="password"
class="form-control input-login" required />
</div>
</div>
</div>
<input type="submit" class="btn btn-info btn-lg btn-block btn-login" value="Login">
</form>
<div>
<!-- <a class="">Forgot Password?</a> -->
</div>
</div>
</div>
</div>
</body>
</html>