edit homepage

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

@@ -1,35 +1,79 @@
 <template>
+
     <div class="row col-md-10 col-md-offset-1">
+        <div class="text-center mb-4">
+            <img src="/images/banner-mat28.jpg" alt="Banner" class="img-fluid"
+                style="width: 100%; max-height: 400px; object-fit: cover;">
+        </div>
+
+        <div style="margin-bottom: 20px;"></div> <!-- You can adjust the px value as needed -->
+
         <div class="col-md-4">
-            <h4>Maklumat Anggota</h4>
+            <div class="p-2 mb-3 text-center"
+                style="background-color: #007bff; color: white; font-weight: bold; font-size: 1.6rem; border-radius: 4px;">
+                Maklumat Anggota
+            </div>
             <hr />
-            <ul class="list-group">
+            <ul class="list-group" style="font-weight: bold;">
-                <li class="list-group-item"><b>Nama : </b>{{ data.user.name }}</li>
+                <li class="list-group-item">
-                <li class="list-group-item"><b>No. Kad Pengenalan : </b>{{ data.user.no_kp }}</li>
+                    <span class="info-label">NAMA</span>
-                <li class="list-group-item"><b>No. Anggota : </b>{{ data.user.no_anggota }}
+                    <span class="info-separator">:</span>
-                <li class="list-group-item"><b>Unit : </b>{{ data.user.unit }}</li>
+                    <span class="info-value">{{ data.user.name }}</span>
-                <li class="list-group-item"><b>Saham :</b> RM {{ data.user.saham | formatNumberWithCommas() }}</li>
+                </li>
-                <li class="list-group-item"><b>Yuran :</b> RM {{ data.user.yuran | formatNumberWithCommas() }}</li>
+                <li class="list-group-item">
+                    <span class="info-label">NO KAD PENGENALAN</span>
+                    <span class="info-separator">:</span>
+                    <span class="info-value">{{ data.user.no_kp }}</span>
+                </li>
+                <li class="list-group-item">
+                    <span class="info-label">NO ANGGOTA</span>
+                    <span class="info-separator">:</span>
+                    <span class="info-value">{{ data.user.no_anggota }}</span>
+                </li>
+                <li class="list-group-item">
+                    <span class="info-label">UNIT</span>
+                    <span class="info-separator">:</span>
+                    <span class="info-value">{{ data.user.unit }}</span>
+                </li>
+                <li class="list-group-item">
+                    <span class="info-label">SAHAM</span>
+                    <span class="info-separator">:</span>
+                    <span class="info-value">RM {{ data.user.saham | formatNumberWithCommas() }}</span>
+                </li>
+                <li class="list-group-item">
+                    <span class="info-label">YURAN</span>
+                    <span class="info-separator">:</span>
+                    <span class="info-value">RM {{ data.user.yuran | formatNumberWithCommas() }}</span>
+                </li>
                 <li class="list-group-item" v-if="data.election.status == 1">
-                    <center>Undian belum bermula</center>
+                    <span class="info-label">STATUS UNDIAN</span>
-                </li>
+                    <span class="info-separator">:</span>
-                <li class="list-group-item" v-if="data.election.status == 2 && !hasVoted()">
+                    <span class="info-value">Belum bermula</span>
-                    <center>
-                        <router-link v-if="data.user.saham >= 500 && data.user.kehadiran != 0" :to="{ name: 'Vote' }" class="btn btn-primary">
-                            Undi Sekarang
-                        </router-link>
-                        <router-link v-if="data.user.saham >= 500" :to="{ name: 'Attendance' }" class="btn btn-info">
-                            Daftar Kehadiran Sekarang
-                        </router-link>
-                        <div v-else class="alert alert-danger" role="alert">
-                            Saham minima tidak mencukupi untuk pengundian
-                        </div>
-                    </center>
                 </li>
             </ul>
+
+
+            <li class="list-group-item" v-if="data.election.status == 2 && !hasVoted()">
+                <center>
+                    <router-link v-if="data.user.saham >= 500 && data.user.kehadiran != 0" :to="{ name: 'Vote' }"
+                        class="btn btn-warning">
+                        Undi Sekarang
+                    </router-link>
+                    <router-link v-if="data.user.saham >= 500" :to="{ name: 'Attendance' }" class="btn btn-success">
+                        Daftar Kehadiran
+                    </router-link>
+                    <div v-else class="alert alert-danger" role="alert">
+                        Saham minima tidak mencukupi untuk pengundian
+                    </div>
+                </center>
+            </li>
+            </ul>
             <div v-if="hasVoted()">
                 <hr />
-                <h4>Maklumat Undian Anda</h4>
+                <div class="p-2 mb-3 text-center"
+                    style="background-color: #007bff; color: white; font-weight: bold; font-size: 1.6rem; border-radius: 4px;">
+                    Maklumat Undian Anda
+                </div>
                 <hr />
                 <ul class="list-group">
                     <li class="list-group-item" v-for="result in data.result">
@@ -40,7 +84,10 @@
         </div>
 
         <div class="col-md-8">
-            <h4>Maklumat Calon</h4>
+            <div class="p-2 mb-3 text-center"
+                style="background-color: #007bff; color: white; font-weight: bold; font-size: 1.6rem; border-radius: 4px;">
+                Maklumat Calon
+            </div>
             <hr />
             <small>Tekan gambar untuk maklumat calon</small>
             <div class="panel panel-primary" v-for="position in data.positions">
@@ -182,7 +229,7 @@ export default {
         },
 
         viewNomineeDetails: function (nominee) {
-            this.nomineeViewed = {...nominee};
+            this.nomineeViewed = { ...nominee };
             this.nomineeViewed.photo = this.createBase64ImageUrl(nominee.photo);
             $('#view-nominee-modal').modal();
         },
@@ -202,28 +249,37 @@ export default {
 
 <style>
 #view-nominee-modal .modal-dialog {
-    max-width: 850px; /* Set a maximum width */
+    max-width: 850px;
-    width: 100%; /* Ensure full width on smaller screens */
+    /* Set a maximum width */
+    width: 100%;
+    /* Ensure full width on smaller screens */
 }
 
 #view-nominee-modal .nominee-viewed-photo {
-    width: 100%; /* Ensure the photo fills the container */
+    width: 100%;
-    height: auto; /* Maintain aspect ratio */
+    /* Ensure the photo fills the container */
+    height: auto;
+    /* Maintain aspect ratio */
 }
 
 #view-nominee-modal .content {
     display: flex;
-    flex-wrap: wrap; /* Allow content to wrap on smaller screens */
+    flex-wrap: wrap;
+    /* Allow content to wrap on smaller screens */
 }
 
 #view-nominee-modal .photo-section {
-    flex: 0 0 40%; /* Set a flexible width for the photo section */
+    flex: 0 0 40%;
-    max-width: 300px; /* Set a maximum width */
+    /* Set a flexible width for the photo section */
-    margin-right: 20px; /* Add space between photo and details */
+    max-width: 300px;
+    /* Set a maximum width */
+    margin-right: 20px;
+    /* Add space between photo and details */
 }
 
 #view-nominee-modal .detail-section {
-    flex: 1; /* Take remaining space */
+    flex: 1;
+    /* Take remaining space */
 }
 
 #view-nominee-modal span {
@@ -242,14 +298,19 @@ export default {
     }
 
     #view-nominee-modal .photo-section {
-        flex: 0 0 100%; /* Set photo section to full width */
+        flex: 0 0 100%;
-        max-width: none; /* Remove max-width */
+        /* Set photo section to full width */
-        margin-right: 0; /* Remove right margin */
+        max-width: none;
-        margin-bottom: 20px; /* Add space between photo and details */
+        /* Remove max-width */
+        margin-right: 0;
+        /* Remove right margin */
+        margin-bottom: 20px;
+        /* Add space between photo and details */
     }
 
     #view-nominee-modal .detail-section {
-        flex: 0 0 100%; /* Set detail section to full width */
+        flex: 0 0 100%;
+        /* Set detail section to full width */
     }
 }
 
@@ -258,13 +319,44 @@ export default {
 }
 
 @keyframes pulseBackground {
-    0% { background-color: #FFFFBF; } /* Start color */
+    0% {
-    50% { background-color: #ffffff; } /* Middle color (white) */
+        background-color: #FFFFBF;
-    100% { background-color: #FFFFBF; } /* End color (same as start) */
+    }
+
+    /* Start color */
+    50% {
+        background-color: #ffffff;
+    }
+
+    /* Middle color (white) */
+    100% {
+        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 */
+    animation: pulseBackground 3s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
+    /* Animation duration, timing function, and repetition */
 }
 
+.info-label {
+    display: inline-block;
+    width: 100px;
+}
+
+.info-separator {
+    display: inline-block;
+    width: 5px;
+}
+
+.info-value {
+    display: inline-block;
+}
+
+.small-text {
+    font-size: 1.0rem;
+    /* or try 0.85rem if you want even smaller */
+}
 </style>