Initial commit for combined ProjectKP
This commit is contained in:
raditarahman5-cloud
@@ -0,0 +1,253 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user