new styling

html/scripts/index.js

@@ -31,28 +31,33 @@ $(document).ready(function(){
                 $('#signature').text(userInfo.firstname + " " + userInfo.lastname);
                 $('#nationality').text(nationality);
                 $('#expires').text("02/09/2031");
+                $('#class').text('');
 
                 if (licenseType == 'driver') {
                     if (licenseData != null) {
                         Object.keys(licenseData).forEach(function(key) {
                             var licenseType = licenseData[key].type;
 
                             if (licenseType == 'drive_bike') {
+                                $('#nationality').text('');
                                 licenseType = 'motorcyclist';
                                 classType = 'C';
                             } else if (licenseType == 'drive_truck') {
+                                $('#nationality').text('');
                                 licenseType = 'trucker';
                                 classType = 'A';
                             } else if (licenseType == 'drive') {
+                                $('#nationality').text('');
                                 licenseType = 'driver';
                                 classType = 'B';
                             }
 
                             if (licenseType == 'motorcyclist' || licenseType == 'trucker' || licenseType == 'driver') {
                                 $('img').hide();
                                 $('#licenses').append('<p class="licenseType">'+licenseType+'</p>');
-                                $('#nationality').hide();
                                 $('#class').append('<p class="classType">'+classType+'</p>');
+                                $('#gender').text("");
+                                $('#job').text("");
                             }
                         });
                     }
@@ -64,17 +69,12 @@ $(document).ready(function(){
             }
             } else if (licenseType == 'weapon') {
                 $('img').hide();
-                $('#lastname').css('color', '#c7c7c7');
                 $('#lastname').text(userInfo.lastname);
-                $('#firstname').css('color', '#c7c7c7');
                 $('#firstname').text(userInfo.firstname);
-                $('#dob').css('color', '#c7c7c7');
                 $('#dob').text(userInfo.dateofbirth);
-                $('#signature').hide();
-                $('#expires').css('color', '#c7c7c7');
                 $('#expires').text("06/01/2027");
-                $('#job').hide();
-
+                $('#job').text("");
+                $('#class').text("");
                 $('#identity-card').css('background', 'url(assets/images/weapon.png)');
                 }
                 $('#identity-card').show();

html/styles.css

@@ -12,7 +12,7 @@ body, html {
 p {
     padding: 0;
     margin: 0;
-    color: #000;
+    color: #c7c7c7;
     font-size: 12px;
     font-family: 'Poppins', sans-serif;
 }
@@ -61,9 +61,9 @@ p {
 
 .female {
     position: absolute;
-    top: 63px;
+    top: 58px;
     left: 30px;
-    width: 95px;
+    width: 100px;
     display: none;
 }
 
@@ -89,21 +89,13 @@ p {
 
 #signature {
     position: absolute;
-    bottom: 15px;
-    left: 50%;
-    transform: translateX(-50%);
+    bottom: 40px;
+    left: 145px;
     font-family: BetterYesterday;
-    font-size: 48px;
+    font-size: 44px;
     color: white;
 }
 
-.signature {
-    position: absolute;
-    bottom: 50px;
-    left: 50%;
-    transform: translateX(-50%);
-}
-
 #licenses {
     position: absolute;
     top: 23px;
@@ -117,6 +109,7 @@ p {
     text-transform: uppercase;
     font-weight: bold;
     text-align: center;
+    text-shadow: 1px 1px #000;
 }
 
 #class {
@@ -126,6 +119,7 @@ p {
 }
 
 .classType {
+    color: #d4d4d4;
     margin-left: 5px;
     float: left;
 }