raditarahman5-cloud
270 lines
7.4 KiB
PHP
270 lines
7.4 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 Pontianak</title>
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: 'Poppins', sans-serif;
|
|
}
|
|
|
|
body {
|
|
height: 100vh;
|
|
display: flex;
|
|
overflow: hidden;
|
|
background-color: #f8fafc;
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* --- SISI KIRI (Visual & Branding) --- */
|
|
.left {
|
|
width: 50%;
|
|
background: linear-gradient(135deg, rgba(15, 42, 92, 0.92), rgba(30, 60, 114, 0.85)),
|
|
url('https://www.pontianak.go.id/themes/pontianak/assets/images/gedung-walikota.jpg');
|
|
background-size: cover;
|
|
background-position: center;
|
|
color: white;
|
|
padding: 60px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
}
|
|
|
|
.logo img {
|
|
height: 70px;
|
|
width: auto;
|
|
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
|
|
}
|
|
|
|
.logo h3 {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
letter-spacing: 1px;
|
|
line-height: 1.2;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.mid-content {
|
|
margin-top: auto;
|
|
margin-bottom: auto;
|
|
}
|
|
|
|
.title {
|
|
font-size: 48px;
|
|
font-weight: 800;
|
|
line-height: 1.1;
|
|
margin-bottom: 25px;
|
|
text-shadow: 0 4px 10px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.title::after {
|
|
content: '';
|
|
display: block;
|
|
width: 60px;
|
|
height: 6px;
|
|
background: #3b82f6;
|
|
margin-top: 20px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.desc {
|
|
font-size: 16px;
|
|
line-height: 1.8;
|
|
color: #e2e8f0;
|
|
max-width: 85%;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.footer-left {
|
|
font-size: 11px;
|
|
letter-spacing: 3px;
|
|
color: rgba(255,255,255,0.6);
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* --- SISI KANAN (Form Login) --- */
|
|
.right {
|
|
width: 50%;
|
|
background: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 40px;
|
|
}
|
|
|
|
.form-box {
|
|
width: 100%;
|
|
max-width: 400px;
|
|
}
|
|
|
|
.form-box h2 {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
color: #0f172a;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.form-box p {
|
|
margin-bottom: 40px;
|
|
color: #64748b;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.input-group {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.input-group label {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
color: #1e293b;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.input-group input {
|
|
width: 100%;
|
|
padding: 14px 18px;
|
|
border: 1.5px solid #e2e8f0;
|
|
border-radius: 12px;
|
|
font-size: 14px;
|
|
background: #f8fafc;
|
|
transition: all 0.3s ease;
|
|
outline: none;
|
|
}
|
|
|
|
.input-group input:focus {
|
|
border-color: #3b82f6;
|
|
background: #fff;
|
|
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
|
|
}
|
|
|
|
.btn {
|
|
width: 100%;
|
|
padding: 16px;
|
|
background: #1e3c72;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 12px;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
margin-top: 10px;
|
|
transition: all 0.3s ease;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.btn:hover {
|
|
background: #0f2a5c;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 20px rgba(30, 60, 114, 0.2);
|
|
}
|
|
|
|
.btn:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.footer-right {
|
|
margin-top: 40px;
|
|
font-size: 11px;
|
|
text-align: center;
|
|
color: #94a3b8;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 992px) {
|
|
.left { display: none; }
|
|
.right { width: 100%; background: #f8fafc; }
|
|
.form-box {
|
|
background: white;
|
|
padding: 40px;
|
|
border-radius: 24px;
|
|
box-shadow: 0 10px 25px rgba(0,0,0,0.05);
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
<div class="left">
|
|
<div class="logo">
|
|
<img src="{{ asset('Kalimantan-Barat-Logo-Vector.png') }}" alt="Logo">
|
|
<h3>DINAS TENAGA KERJA<br>KOTA PONTIANAK</h3>
|
|
</div>
|
|
|
|
<div class="mid-content">
|
|
<div class="title">
|
|
Sistem Monitoring <br>
|
|
Aktivitas Pegawai
|
|
</div>
|
|
<div class="desc">
|
|
Platform terintegrasi untuk pelaporan aktivitas pegawai, pemantauan kinerja institusi,
|
|
serta peningkatan kualitas administrasi pemerintahan di lingkungan
|
|
Dinas Tenaga Kerja dan Transmigrasi Kota Pontianak.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-left">
|
|
TRANSPARANSI • AKUNTABILITAS • INTEGRITAS
|
|
</div>
|
|
</div>
|
|
|
|
<div class="right">
|
|
<div class="form-box">
|
|
<h2>Selamat Datang</h2>
|
|
<p>Masuk dengan akun Anda untuk mengakses panel.</p>
|
|
|
|
<form action="{{ route('dashboard') }}" method="GET">
|
|
<div class="input-group">
|
|
<label>Alamat Email</label>
|
|
<input type="email" name="email" placeholder="nama@disnaker.pontianak.go.id" required>
|
|
</div>
|
|
<div class="input-group">
|
|
<label>Kata Sandi</label>
|
|
<input type="password" name="password" placeholder="********" required>
|
|
</div>
|
|
|
|
<button type="submit" class="btn">
|
|
Masuk ke Sistem
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
|
|
</button>
|
|
</form>
|
|
|
|
<div class="footer-right">
|
|
© 2026 DINAS TENAGA KERJA KOTA PONTIANAK
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html> |