commit -m "complete"

resources/assets/js/components/demo/voter/home/index.vue

@@ -47,36 +47,39 @@
       </ul>
 
       <!-- Membership Card -->
-      <div id="kad-keahlian" class="kad-keahlian">
+
-        <div class="kad-logo text-center" style="margin: 1px 0;">
+      <div class="kad-keahlian">
-          <img src="/images/KOPKB_Final.png" alt="Logo" style="width: 80px; height: auto;">
+        <div class="kad-logo" style="margin: 1px 0; text-align: center;">
+          <img src="/images/logo_kad.png" alt="Logo"
+            style="width: 130px; height: auto; filter: drop-shadow(3px 3px 4px black);">
+        </div>
+        <div class="no-anggota" style="text-align: right; ">
+          <span class="detail-label" style="font-size: 10px;">NO ANGGOTA:</span>
+          <span class="detail-value" style="font-size: 11px;">{{ data.user.no_anggota }}</span>
         </div>
         <br>
-        <div class="kad-title">KAD KEANGGOTAAN KOPERASI</div>
+        <div class="kad-title">KAD KEANGGOTAAN <br> KOPERASI</div>
         <div class="kad-content">
           <img src="images/KOPKB_Final.png" class="watermark" alt="Watermark">
+          <br>
           <div class="member-details">
             <div class="detail-item">
               <span class="detail-label">NAMA:</span>
               <span class="detail-value">{{ data.user.name }}</span>
             </div>
+
             <div class="detail-item">
               <span class="detail-label">NO KAD PENGENALAN:</span>
               <span class="detail-value">{{ data.user.no_kp }}</span>
             </div>
-            <div class="detail-item">
+
-              <span class="detail-label">NO ANGGOTA:</span>
-              <span class="detail-value">{{ data.user.no_anggota }}</span>
-            </div>
             <div class="detail-item">
               <span class="detail-label">UNIT:</span>
               <span class="detail-value">{{ data.user.unit }}</span>
             </div>
           </div>
+
         </div>
-        <!-- <div class="text-center mt-2">
-          <button class="btn btn-success" onclick="downloadKadKeahlian()" >Muat Turun</button>
-        </div> -->
       </div>
       </div>
 
@@ -106,7 +109,8 @@
                 <tr v-for="(nominee, i) in data.nominees" :key="nominee.id" v-if="nominee.position_id == position.id"
                   @click="viewNomineeDetails(nominee)">
                   <td>
-                  <img :src="createBase64ImageUrl(nominee.photo)" class="thumbnail" style="height: 60px; width: 60px;">
+                    <img :src="createBase64ImageUrl(nominee.photo)" class="thumbnail"
+                      style="height: 60px; width: 60px;">
                   </td>
                   <td>{{ nominee.no_calon }}</td>
                   <td>{{ nominee.name }}</td>
@@ -149,7 +153,7 @@
               </div>
             </div>
             <div class="modal-footer">
-            <button class="btn btn-secondary" @click="closeNomineeModal">Tutup</button>
+              <button class="btn btn-success" @click="closeNomineeModal">Tutup</button>
             </div>
           </div>
         </div>
@@ -158,36 +162,39 @@
 </template>
 
 <script>
-// 
-
 export default {
   data() {
     return {
       nomineeViewed: {},
       showNomineeModal: false,
+      previewData: {},
+      showPreview: false,
     };
   },
+
   filters: {
     formatNumberWithCommas(value) {
       if (!value) return "";
       return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
     },
   },
+
   methods: {
-    createBase64ImageUrl(base64) {
-      return "data:image/png;base64," + base64;
-    },
     viewNomineeDetails(nominee) {
       this.nomineeViewed = { ...nominee };
       this.nomineeViewed.photo = this.createBase64ImageUrl(nominee.photo);
       this.showNomineeModal = true;
     },
+
     closeNomineeModal() {
       this.showNomineeModal = false;
     },
 
-  },
+    createBase64ImageUrl(photo) {
+      return `data:image/jpeg;base64,${photo}`;
     }
+  }
+};
 </script>
 
 
@@ -231,7 +238,7 @@ export default {
   padding: 5px 0;
 }
 
- /* Mobile styles */
+
 @media (max-width: 576px) {
   #view-nominee-modal .modal-dialog {
     max-width: none;
@@ -241,6 +248,8 @@ export default {
     margin-left: 0px;
   }
 
+
+
   #view-nominee-modal .photo-section {
     flex: 0 0 100%;
     /* Set photo section to full width */
@@ -277,12 +286,11 @@ export default {
     background-color: #FFFFBF;
   }
 
-   /* End color (same as start) */
 }
 
 #table-nominee tbody tr:hover {
   animation: pulseBackground 3s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
-   /* Animation duration, timing function, and repetition */
+
 }
 
 .info-label {
@@ -301,7 +309,7 @@ export default {
 
 .small-text {
   font-size: 1.0rem;
-   /* or try 0.85rem if you want even smaller */
+
 }
 
 .watermark {
@@ -310,39 +318,38 @@ export default {
   left: 50%;
   width: 60mm;
   /* adjust size */
-   opacity: 0.08;
+  opacity: 0.09;
   transform: translate(-50%, -50%);
-   z-index: 0;
+  z-index: 5;
 }
 
- /* ===== CUSTOM CARD SIZE ===== */
+
 .kad-keahlian {
   width: 93mm;
-   padding: 0;
+  /* padding: 0; */
   /* adjust size */
   height: 60mm;
   /* adjust size */
   border-radius: 12px;
-   border: 3px solid #3252f0;
+  border: 3px solid #0d0d0e;
+  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.3);
   background: #F2F3F4;
-   /* background: linear-gradient(135deg, #f2f2f2 50%, #413e3e 50%);// /* WHITE BACKGROUND */
   position: relative;
   overflow: hidden;
   font-family: Arial, sans-serif;
-   position: relative;
   /* standard card width */
   padding: 8mm;
   box-sizing: border-box;
   font-weight: bold;
-   font-size: 14px;
+  font-size: 13px;
-   background-color: #fff;
+  color: whitesmoke;
+  background: linear-gradient(90deg, rgba(23, 76, 97, 1) 0%, rgba(37, 48, 105, 1) 50%, rgba(36, 35, 34, 1) 100%);
 }
 
- /* ===== WATERMARK LOGO ONLY ===== */
+
 .kad-keahlian::before {
   content: "";
-   position: absolute;
+  position: relative;
-   /* background: url('/images/KOPKB_Final.png') no-repeat center; */
   background-size: 100%;
   /* adjust watermark size */
   opacity: 0.08;
@@ -353,40 +360,17 @@ export default {
   height: 100%;
 }
 
- /* Title */
+
 .kad-title {
   text-align: center;
-   font-size: 14px;
+  font-size: 13px;
   font-weight: bold;
-   color: #004aad;
+  color: white;
-   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
+  text-shadow: 3px 3px 4px rgb(244, 241, 241);
   position: relative;
   z-index: 5;
 }
 
- /* Content layout */
- .kad-content {
-   display: flex;
-   padding: 0;
-   gap: 10px;
-   margin-top: 5px;
-   position: relative;
-   z-index: 5;
-   /* background-color: #5d8aa8; your desired background color */
-   border-radius: 18px;
-   /* optional: rounded corners */
- }
-
- .kad-details {
-   font-size: 11px;
-   font-weight: bold;
- }
-
- .kad-details div {
-   margin-bottom: 4px;
- }
-
- /* Hide print button during printing */
 .member-details {
   font-family: Arial, sans-serif;
   font-weight: bold;
@@ -394,11 +378,64 @@ export default {
   line-height: 1.4;
   display: flex;
   flex-direction: column;
-   /* vertical stacking */
   gap: 2mm;
+
 }
 
+
+.kad-content {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0;
+  gap: 10px;
+  margin-top: 5px;
+  position: relative;
+  z-index: 5;
+  border-radius: 18px;
+  /* optional: rounded corners */
+}
+
+.kad-details {
+  font-size: 11px;
+  font-weight: bold;
+  margin-bottom: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.kad-details .row {
+  display: flex;
+  justify-content: space-between;
+  /* ⭐ pushes label left, value right */
+}
+
+
+.detail-item {
+  position: relative;
+  top: 5px;
+  right: 5px;
+  text-align: left;
+}
+
+
+
 .detail-label {
-   display: inline-block;
+
+  text-align: left;
+  /* display: inline-block; */
+}
+
+.detail-value {
+  text-align: right;
+}
+
+.no-anggota {
+  position: absolute;
+  top: 5px;
+  right: 8px;
+  text-align: right;
+  z-index: 10;
+  /* keeps text above watermark */
 }
 </style>