raditarahman5-cloud
215 lines
6.6 KiB
PHP
215 lines
6.6 KiB
PHP
<!DOCTYPE html>
|
||
<html lang="id">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Panel Petugas – Disnakertrans Prov. Kalbar</title>
|
||
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script src="https://unpkg.com/lucide@latest"></script>
|
||
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||
|
||
<style>
|
||
/* ─── RESET + FONT ─── */
|
||
*, *::before, *::after {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
font-family: 'Outfit', sans-serif;
|
||
}
|
||
|
||
body {
|
||
background: #F2F5FB;
|
||
color: #334155;
|
||
}
|
||
|
||
/* ─── SCROLLBAR ─── */
|
||
::-webkit-scrollbar { width: 6px; }
|
||
::-webkit-scrollbar-track { background: #f1f5f9; }
|
||
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
|
||
|
||
/* ─── VARIABLES ─── */
|
||
:root {
|
||
--primary: #1d4ed8;
|
||
--primary-soft: #e0e7ff;
|
||
--border: #e5e7eb;
|
||
--text: #111827;
|
||
--muted: #6b7280;
|
||
}
|
||
|
||
/* ─── CARD ─── */
|
||
.card {
|
||
background: #fff;
|
||
border: 1px solid var(--border);
|
||
border-radius: 16px;
|
||
padding: 28px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
/* ─── FORM GRID ─── */
|
||
.form-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 16px;
|
||
}
|
||
|
||
/* ─── LABEL ─── */
|
||
.label {
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: var(--muted);
|
||
margin-bottom: 6px;
|
||
display: block;
|
||
letter-spacing: 0.03em;
|
||
}
|
||
|
||
/* ─── INPUT ─── */
|
||
.input {
|
||
width: 100%;
|
||
padding: 12px 14px;
|
||
border: 1px solid var(--border);
|
||
border-radius: 10px;
|
||
font-size: 14px;
|
||
font-family: 'Outfit', sans-serif;
|
||
background: #fff;
|
||
color: var(--text);
|
||
transition: .2s;
|
||
}
|
||
.input:focus {
|
||
outline: none;
|
||
border-color: var(--primary);
|
||
box-shadow: 0 0 0 3px rgba(29,78,216,.1);
|
||
}
|
||
.readonly {
|
||
background: #f3f4f6;
|
||
color: #6b7280;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
/* ─── TEXTAREA ─── */
|
||
.textarea {
|
||
width: 100%;
|
||
padding: 14px;
|
||
border: 1px solid var(--border);
|
||
border-radius: 10px;
|
||
font-size: 14px;
|
||
font-family: 'Outfit', sans-serif;
|
||
color: var(--text);
|
||
min-height: 140px;
|
||
resize: vertical;
|
||
transition: .2s;
|
||
}
|
||
.textarea:focus {
|
||
outline: none;
|
||
border-color: var(--primary);
|
||
box-shadow: 0 0 0 3px rgba(29,78,216,.1);
|
||
}
|
||
|
||
/* ─── UPLOAD BOX ─── */
|
||
.upload-box {
|
||
border: 2px dashed var(--border);
|
||
padding: 30px;
|
||
text-align: center;
|
||
border-radius: 14px;
|
||
cursor: pointer;
|
||
display: block;
|
||
transition: .2s;
|
||
}
|
||
.upload-box:hover {
|
||
background: #f9fafb;
|
||
border-color: var(--primary);
|
||
}
|
||
|
||
/* ─── BUTTON ─── */
|
||
.btn {
|
||
width: 100%;
|
||
padding: 14px;
|
||
border: none;
|
||
border-radius: 12px;
|
||
background: var(--primary);
|
||
color: #fff;
|
||
font-weight: 600;
|
||
font-size: 15px;
|
||
font-family: 'Outfit', sans-serif;
|
||
cursor: pointer;
|
||
transition: .2s;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
.btn:hover {
|
||
background: #1e40af;
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 4px 12px rgba(29,78,216,.3);
|
||
}
|
||
.btn:active {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* ─── RESPONSIVE ─── */
|
||
@media (max-width: 768px) {
|
||
.form-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
main {
|
||
padding: 20px 0 !important;
|
||
}
|
||
.card {
|
||
padding: 20px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
@include('user.layouts.navbar')
|
||
|
||
<main style="padding: 40px 0;">
|
||
<div style="max-width: 860px; margin: auto; padding: 0 24px;">
|
||
@yield('content')
|
||
</div>
|
||
</main>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||
<script>
|
||
lucide.createIcons();
|
||
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
document.querySelectorAll('[onclick^="return confirm"]').forEach(function(btn) {
|
||
const match = btn.getAttribute('onclick').match(/confirm\('([^']+)'\)/);
|
||
if (match) {
|
||
const message = match[1];
|
||
btn.removeAttribute('onclick');
|
||
|
||
btn.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
const form = btn.closest('form');
|
||
|
||
Swal.fire({
|
||
title: 'Konfirmasi',
|
||
text: message,
|
||
icon: 'question',
|
||
showCancelButton: true,
|
||
confirmButtonColor: '#3b82f6',
|
||
cancelButtonColor: '#64748b',
|
||
confirmButtonText: 'Ya, Lanjutkan',
|
||
cancelButtonText: 'Batal',
|
||
reverseButtons: true,
|
||
customClass: {
|
||
confirmButton: 'rounded-xl',
|
||
cancelButton: 'rounded-xl mr-2'
|
||
}
|
||
}).then((result) => {
|
||
if (result.isConfirmed) {
|
||
if (form) {
|
||
form.submit();
|
||
} else if(btn.getAttribute('href')) {
|
||
window.location.href = btn.getAttribute('href');
|
||
}
|
||
}
|
||
});
|
||
});
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |