amar
/
eSPJ
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update: qr code SPJ driver

main
marszayn 2025-08-07 09:21:54 +07:00
parent 12f888fdd8
commit 512eb82743
3 changed files with 136 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
Views/Admin/Transport/SpjDriver/Home/Index.cshtml
View File

@ -60,8 +60,10 @@
<p class="font-bold text-lg tracking-wide">Taman Barito</p>
</div>
<!-- DLH logo -->
<div class="absolute bottom-2 right-4 opacity-80" style="width: 48px; height: 48px;">
<img src="@Url.Content("~/driver/dlh_type.svg")" alt="DLH Logo" class="w-full h-full object-contain">
<div class="absolute bottom-2 right-4 opacity-80 cursor-pointer" style="width: 60px; height: 60px;" id="qrCodeTrigger">
<div class="bg-white p-2 rounded-xl hover:shadow-lg transition-shadow">
<img src="@Url.Content("~/driver/images/qr.png")" alt="DLH Logo" class="w-full h-full object-contain">
</div>
</div>
</div>
</div>
@ -148,6 +150,32 @@
</div>
<!-- QR Code Popup Modal -->
<div id="qrCodeModal" class="fixed inset-0 bg-black/75 items-center justify-center z-50 hidden">
<div class="bg-white rounded-2xl p-6 mx-4 max-w-sm relative">
<!-- Close Button -->
<button id="closeQrModal" class="absolute top-3 right-3 w-8 h-8 bg-gray-200 hover:bg-gray-300 rounded-full flex items-center justify-center transition-colors">
<i class="w-4 h-4 text-gray-600" data-lucide="x"></i>
</button>
<!-- Modal Header -->
<div class="text-center mb-4">
<h3 class="text-lg font-bold text-gray-800">QR Code SPJ</h3>
<p class="text-sm text-gray-600">SPJ/07-2025/PKM/000476</p>
</div>
<!-- QR Code Display -->
<div class="bg-white p-4 rounded-xl border-2 border-gray-200 flex items-center justify-center">
<img src="@Url.Content("~/driver/images/qr.png")" alt="QR Code SPJ" class="w-64 h-64 object-contain">
</div>
<!-- Instructions -->
<div class="mt-4 text-center">
<p class="text-xs text-gray-500">Arahkan QR Code ke scanner untuk verifikasi</p>
</div>
</div>
</div>
<register-block dynamic-section="scripts" key="jsHomeIndex">
<script>
@ -216,4 +244,82 @@ document.addEventListener("DOMContentLoaded", function () {
});
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {
const qrTrigger = document.getElementById("qrCodeTrigger");
const qrModal = document.getElementById("qrCodeModal");
const closeModal = document.getElementById("closeQrModal");
let originalBrightness = null;
let wakeLock = null;
async function setMaxBrightness() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
if ('screen' in navigator && 'brightness' in navigator.screen) {
originalBrightness = navigator.screen.brightness;
navigator.screen.brightness = 1.0;
}
} catch (err) {
console.log('Brightness control not supported:', err);
}
}
async function restoreOriginalBrightness() {
try {
if (wakeLock) {
await wakeLock.release();
wakeLock = null;
}
if ('screen' in navigator && 'brightness' in navigator.screen && originalBrightness !== null) {
navigator.screen.brightness = originalBrightness;
}
} catch (err) {
console.log('Error restoring brightness:', err);
}
}
qrTrigger.addEventListener("click", function () {
qrModal.classList.remove("hidden");
qrModal.classList.add("flex");
setMaxBrightness();
if ('vibrate' in navigator) {
navigator.vibrate(50);
}
});
function closeQrCodeModal() {
qrModal.classList.add("hidden");
qrModal.classList.remove("flex");
restoreOriginalBrightness();
}
closeModal.addEventListener("click", closeQrCodeModal);
qrModal.addEventListener("click", function (e) {
if (e.target === qrModal) {
closeQrCodeModal();
}
});
document.addEventListener("keydown", function (e) {
if (e.key === "Escape" && !qrModal.classList.contains("hidden")) {
closeQrCodeModal();
}
});
document.addEventListener("visibilitychange", function () {
if (document.hidden && !qrModal.classList.contains("hidden")) {
restoreOriginalBrightness();
} else if (!document.hidden && !qrModal.classList.contains("hidden")) {
setMaxBrightness();
}
});
});
</script>
</register-block>

50
wwwroot/driver/css/watch.css
View File

@ -44,7 +44,6 @@
--color-green-700: oklch(52.7% 0.154 150.069);
--color-green-800: oklch(44.8% 0.119 151.328);
--color-emerald-50: oklch(97.9% 0.021 166.113);
--color-emerald-100: oklch(95% 0.052 163.051);
--color-emerald-400: oklch(76.5% 0.177 163.223);
--color-emerald-500: oklch(69.6% 0.17 162.48);
--color-emerald-600: oklch(59.6% 0.145 163.225);
@ -61,16 +60,8 @@
--color-indigo-50: oklch(96.2% 0.018 272.314);
--color-indigo-100: oklch(93% 0.034 272.788);
--color-indigo-300: oklch(78.5% 0.115 274.713);
--color-indigo-400: oklch(67.3% 0.182 276.935);
--color-indigo-600: oklch(51.1% 0.262 276.966);
--color-indigo-700: oklch(45.7% 0.24 277.023);
--color-purple-50: oklch(97.7% 0.014 308.299);
--color-purple-100: oklch(94.6% 0.033 307.174);
--color-purple-400: oklch(71.4% 0.203 305.504);
--color-purple-500: oklch(62.7% 0.265 303.9);
--color-purple-600: oklch(55.8% 0.288 302.321);
--color-pink-50: oklch(97.1% 0.014 343.198);
--color-pink-400: oklch(71.8% 0.202 349.761);
--color-rose-50: oklch(96.9% 0.015 12.422);
--color-rose-500: oklch(64.5% 0.246 16.439);
--color-rose-600: oklch(58.6% 0.253 17.585);
@ -78,7 +69,6 @@
--color-slate-100: oklch(96.8% 0.007 247.896);
--color-slate-200: oklch(92.9% 0.013 255.508);
--color-slate-400: oklch(70.4% 0.04 256.788);
--color-slate-500: oklch(55.4% 0.046 257.417);
--color-slate-600: oklch(44.6% 0.043 257.281);
--color-slate-700: oklch(37.2% 0.044 257.287);
--color-slate-800: oklch(27.9% 0.041 260.031);
@ -113,7 +103,6 @@
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
--font-weight-black: 900;
--tracking-wide: 0.025em;
--tracking-wider: 0.05em;
--tracking-widest: 0.1em;
@ -124,6 +113,7 @@
--radius-xl: 0.75rem;
--radius-2xl: 1rem;
--radius-3xl: 1.5rem;
--radius-4xl: 2rem;
--drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
@ -133,11 +123,7 @@
--animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
--animate-bounce: bounce 1s infinite;
--blur-sm: 8px;
--blur-md: 12px;
--blur-lg: 16px;
--blur-xl: 24px;
--blur-2xl: 40px;
--blur-3xl: 64px;
--default-transition-duration: 150ms;
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
--default-font-family: var(--font-sans);
@ -350,6 +336,12 @@
.top-1\/2 {
top: calc(1/2 * 100%);
}
.top-2 {
top: calc(var(--spacing) * 2);
}
.top-3 {
top: calc(var(--spacing) * 3);
}
.top-4 {
top: calc(var(--spacing) * 4);
}
@ -374,6 +366,9 @@
.right-1 {
right: calc(var(--spacing) * 1);
}
.right-3 {
right: calc(var(--spacing) * 3);
}
.right-4 {
right: calc(var(--spacing) * 4);
}
@ -419,6 +414,9 @@
.left-1\/2 {
left: calc(1/2 * 100%);
}
.left-2 {
left: calc(var(--spacing) * 2);
}
.left-8 {
left: calc(var(--spacing) * 8);
}
@ -839,6 +837,9 @@
.h-50 {
height: calc(var(--spacing) * 50);
}
.h-64 {
height: calc(var(--spacing) * 64);
}
.h-75 {
height: calc(var(--spacing) * 75);
}
@ -923,6 +924,9 @@
.w-50 {
width: calc(var(--spacing) * 50);
}
.w-64 {
width: calc(var(--spacing) * 64);
}
.w-75 {
width: calc(var(--spacing) * 75);
}
@ -1152,13 +1156,6 @@
margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
}
}
.space-x-3 {
:where(& > :not(:last-child)) {
--tw-space-x-reverse: 0;
margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
}
}
.space-x-4 {
:where(& > :not(:last-child)) {
--tw-space-x-reverse: 0;
@ -1216,6 +1213,9 @@
.rounded-3xl {
border-radius: var(--radius-3xl);
}
.rounded-4xl {
border-radius: var(--radius-4xl);
}
.rounded-full {
border-radius: calc(infinity * 1px);
}
@ -1409,6 +1409,12 @@
background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
}
}
.bg-black\/75 {
background-color: color-mix(in srgb, #000 75%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-black) 75%, transparent);
}
}
.bg-blue-50 {
background-color: var(--color-blue-50);
}

BIN
wwwroot/driver/images/qr.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 397 B