update: qr code SPJ driver

Views/Admin/Transport/SpjDriver/Home/Index.cshtml

@@ -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;">
+                <div class="absolute bottom-2 right-4 opacity-80 cursor-pointer" style="width: 60px; height: 60px;" id="qrCodeTrigger">
-                    <img src="@Url.Content("~/driver/dlh_type.svg")" alt="DLH Logo" class="w-full h-full object-contain">
+                    <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>

wwwroot/driver/css/watch.css

@@ -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);
   }