raditarahman5-cloud
253 lines
5.1 KiB
PHP
253 lines
5.1 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Login - Disnaker Kalbar</title>
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
|
|
|
|
<style>
|
|
:root{
|
|
--primary:#2b3f8f;
|
|
--primary-dark:#1f2f6b;
|
|
--bg:#f4f6fb;
|
|
--muted:#6b7280;
|
|
--border:#e5e7eb;
|
|
}
|
|
|
|
*{margin:0;padding:0;box-sizing:border-box;font-family:'Inter',sans-serif;}
|
|
body{height:100vh;display:flex;}
|
|
|
|
.left{
|
|
width:50%;
|
|
background:
|
|
linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8)),
|
|
url("{{ asset('bg-login.jpeg') }}");
|
|
background-size:cover;
|
|
background-position:center;
|
|
color:white;
|
|
padding:70px;
|
|
display:flex;
|
|
flex-direction:column;
|
|
justify-content:space-between;
|
|
}
|
|
|
|
.brand{display:flex;align-items:center;gap:15px;}
|
|
.brand img{height:100px;}
|
|
|
|
.brand-text{font-size:15px;font-weight:700;}
|
|
|
|
.hero{margin-top:-20px;max-width:520px;}
|
|
|
|
.hero h1{
|
|
font-size:52px;
|
|
font-weight:800;
|
|
line-height:1.3;
|
|
}
|
|
|
|
.hero h1::after{
|
|
content:"";
|
|
display:block;
|
|
width:80px;
|
|
height:4px;
|
|
background:#60a5fa;
|
|
margin-top:15px;
|
|
border-radius:10px;
|
|
}
|
|
|
|
.hero p{
|
|
margin-top:20px;
|
|
color:#dbeafe;
|
|
line-height:1.8;
|
|
}
|
|
|
|
.footer{
|
|
font-size:12px;
|
|
letter-spacing:2px;
|
|
}
|
|
|
|
.right{
|
|
width:50%;
|
|
background:var(--bg);
|
|
display:flex;
|
|
justify-content:center;
|
|
align-items:center;
|
|
}
|
|
|
|
.card{
|
|
width:100%;
|
|
max-width:420px;
|
|
}
|
|
|
|
.card h2{
|
|
font-size:34px;
|
|
margin-bottom:8px;
|
|
}
|
|
|
|
.card p{
|
|
color:var(--muted);
|
|
margin-bottom:25px;
|
|
}
|
|
|
|
.input-group{margin-bottom:18px;}
|
|
|
|
.input-group label{
|
|
font-size:12px;
|
|
color:var(--muted);
|
|
font-weight:600;
|
|
}
|
|
|
|
.input-box{
|
|
display:flex;
|
|
align-items:center;
|
|
border:1px solid var(--border);
|
|
border-radius:12px;
|
|
padding:14px;
|
|
margin-top:6px;
|
|
background:white;
|
|
}
|
|
|
|
.input-box i{
|
|
margin-right:10px;
|
|
color:#9ca3af;
|
|
}
|
|
|
|
.input-box input{
|
|
border:none;
|
|
outline:none;
|
|
width:100%;
|
|
font-size:14px;
|
|
}
|
|
|
|
.btn{
|
|
width:100%;
|
|
padding:14px;
|
|
background:var(--primary);
|
|
color:white;
|
|
border:none;
|
|
border-radius:12px;
|
|
font-weight:600;
|
|
cursor:pointer;
|
|
}
|
|
|
|
.btn:hover{background:var(--primary-dark);}
|
|
|
|
.error{
|
|
background:#fee2e2;
|
|
color:#991b1b;
|
|
padding:10px;
|
|
border-radius:8px;
|
|
margin-bottom:15px;
|
|
font-size:13px;
|
|
}
|
|
|
|
.copy{
|
|
text-align:center;
|
|
font-size:12px;
|
|
margin-top:25px;
|
|
color:#9ca3af;
|
|
}
|
|
|
|
.toggle-password{cursor:pointer;}
|
|
|
|
@media (max-width: 768px) {
|
|
body {
|
|
flex-direction: column;
|
|
height: auto;
|
|
min-height: 100vh;
|
|
}
|
|
.left {
|
|
width: 100%;
|
|
padding: 40px 20px;
|
|
min-height: 350px;
|
|
gap: 30px;
|
|
}
|
|
.hero h1 {
|
|
font-size: 36px;
|
|
}
|
|
.right {
|
|
width: 100%;
|
|
padding: 40px 20px;
|
|
flex: 1;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="left">
|
|
<div class="brand">
|
|
<img src="{{ asset('Kalimantan-Barat-Logo-Vector.png') }}">
|
|
<div class="brand-text">
|
|
DINAS TENAGA KERJA DAN TRANSMIGRASI<br>
|
|
<span style="font-weight:400;font-size:12px;">PROVINSI KALIMANTAN BARAT</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero">
|
|
<h1>Sistem Monitoring<br>Aktivitas Pegawai</h1>
|
|
<p>
|
|
Platform terintegrasi untuk pelaporan aktivitas, pemantauan kinerja pegawai,
|
|
serta tata kelola administrasi yang transparan, akuntabel, dan profesional.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
TRANSPARANSI • AKUNTABILITAS • INTEGRITAS
|
|
</div>
|
|
</div>
|
|
|
|
<div class="right">
|
|
<div class="card">
|
|
|
|
<h2>Selamat Datang</h2>
|
|
<p>Silakan masuk untuk mengakses panel monitoring pegawai.</p>
|
|
|
|
@if(session('error'))
|
|
<div class="error">{{ session('error') }}</div>
|
|
@endif
|
|
|
|
<!-- 🔥 FIX UTAMA DI SINI -->
|
|
<form method="POST" action="{{ route('login.user') }}">
|
|
@csrf
|
|
|
|
<div class="input-group">
|
|
<label>USERNAME</label>
|
|
<div class="input-box">
|
|
<i class="fas fa-user"></i>
|
|
<input type="text" name="username" value="{{ old('username') }}" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<label>KATA SANDI</label>
|
|
<div class="input-box">
|
|
<i class="fas fa-lock"></i>
|
|
<input type="password" name="password" id="password" required>
|
|
<i class="fas fa-eye toggle-password" onclick="togglePassword()"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn">Masuk ke Sistem →</button>
|
|
</form>
|
|
|
|
<div class="copy">
|
|
© 2026 DINAS TENAGA KERJA DAN TRANSMIGRASI <br>
|
|
PROVINSI KALIMANTAN BARAT
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function togglePassword() {
|
|
const input = document.getElementById('password');
|
|
input.type = input.type === 'password' ? 'text' : 'password';
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html> |