Updated check-in page interface

static/css/qr_destination.css

@@ -348,15 +348,15 @@ body {
 }
 
 .success-icon {
-    display: inline-flex;
+    display: none; /* Change back to 'inline-flex' to display icon */
     align-items: center;
     justify-content: center;
-    width: 100px;
+    width: 50px;
-    height: 100px;
+    height: 50px;
     background: var(--success-color) !important;
     color: var(--white) !important;
     border-radius: 50%;
-    font-size: 3rem;
+    font-size: 1.5rem;
     margin-bottom: 1.5rem;
     animation: successPulse 1s ease-out;
 }

static/js/qr_destination.js

@@ -378,7 +378,15 @@ function handleCheckinSuccess(data) {
     showLocalizedStatusMessage("success", "success");
   }
 
-  // Hide form (PRESERVED FROM ORIGINAL)
+  // Hide the entire checkin-card (includes instruction header and form)
+  const checkinCard = document.querySelector(".checkin-card");
+  if (checkinCard) {
+    checkinCard.style.display = "none";
+    checkinCard.classList.remove("active");
+    checkinCard.classList.add("hidden-after-success");
+  }
+
+  // Also hide form separately for backward compatibility (PRESERVED FROM ORIGINAL)
   const form = document.getElementById("checkinForm");
   if (form) {
     form.style.display = "none";
@@ -465,7 +473,15 @@ function handleCheckinSuccess(data) {
 
 // NEW: Reset form for new check-in
 function resetForNewCheckin() {
-  // Show form again
+  // Show checkin-card again (includes instruction header and form)
+  const checkinCard = document.querySelector(".checkin-card");
+  if (checkinCard) {
+    checkinCard.style.display = "block";
+    checkinCard.classList.add("active");
+    checkinCard.classList.remove("hidden-after-success");
+  }
+
+  // Show form again (PRESERVED FROM ORIGINAL)
   const form = document.getElementById("checkinForm");
   if (form) {
     form.style.display = "block";

templates/qr_destination.html

@@ -552,14 +552,14 @@
       }
 
       .success-icon {
-        width: 100px;
+        width: 50px;
-        height: 100px;
+        height: 50px;
         border-radius: 50%;
-        display: flex;
+        display: none; /* Change back to 'flex' to display icon */
         align-items: center;
         justify-content: center;
         margin: 0 auto 1.5rem;
-        font-size: 3rem;
+        font-size: 1.5rem;
         color: white;
       }