refs #5966 Added Poppins font-face bold css

css/style.css

@@ -2,21 +2,18 @@
     Created on : 29-jul-2019, 11:30:28
     Author     : enrique blasco blanquer
 */
-
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 	user-select: none;
 }
-
 html, body {
     width: 100%;
     height: 100%;
     font-family: 'Poppins', 'Verdana', 'Sans';
     background: #121212;
 }
-
 h1 {
     position: fixed;
     bottom: 20px;
@@ -28,7 +25,6 @@ h1 {
 span {
     color: #ED4947;
 }
-
 .total {
     float: right;
     font-weight: bold;
@@ -36,11 +32,9 @@ span {
     margin-top: -40px;
     color: white;
 }
-
 ul {
     list-style: none;
 }
-
 .pinContainer {
     width: 320px;
     height: 460px;
@@ -56,7 +50,6 @@ ul {
     justify-content: center;
     align-items: center;
 }
-
 #txtPin {
     text-align: center;
     padding: 15px 5px;
@@ -65,7 +58,6 @@ ul {
     font-weight: 400;
     font-size: 1.5em;
 	border-radius: 50px;
-
     display: block;
     width: 310px;
     height: 70px;
@@ -74,12 +66,10 @@ ul {
     overflow: hidden;
     font-size: 26px;
 }
-
 #logo {
     width: 30%;
     padding-bottom: 20px;
 }
-
 .btnPin {
     display: flex;
     align-items: center;
@@ -102,11 +92,9 @@ ul {
     align-items: center;
     justify-content: center;
 }
-
 .btnPinNum:active {
 	background: #333;;
 }
-
 .btnCancel {
     width: 100%;
     height: 100%;
@@ -120,7 +108,6 @@ ul {
 .btnCancel:active {
     background: rgb(172,55,54);
 }
-
 .btnOk {
     width: 100%;
     height: 100%;
@@ -131,15 +118,12 @@ ul {
     color: #fff;
 	border-radius: 50%;
 }
-
 #invertColor {
     filter: invert(100%);
 }
-
 .btnOk:active {
 	background: rgb(130, 136, 31);
 }
-
 #txtNombre {
     padding-top: 0px;
     padding-left: 10px;
@@ -149,12 +133,10 @@ ul {
     font-size: 1.8em;
     font-weight: bold;
 }
-
 .paneles {
     overflow: hidden;
     width: 100%;
 }
-
 .planPanel {
     float: left;
     width: 100%;
@@ -186,7 +168,6 @@ h3 {
     font-weight: normal;
 
 }
-
 .footer {
     display: none;
     position: absolute;
@@ -195,7 +176,6 @@ h3 {
     height: 100px; 
     text-align: center;
 }
-
 .in, .inMiddle {
     display: inline;
     position: static;
@@ -207,7 +187,6 @@ h3 {
     text-align: center;
     border-radius: 50px;
 }
-
 .in:active {
     background: rgb(69, 171, 38,);
 }
@@ -225,32 +204,25 @@ h3 {
     text-align: center;
     border-radius: 50px;
 }
-
 .out:active {
     background: rgb(237,73,71);
 }
-
 .inMiddle {
     background: rgba(210, 172, 2, 0.9);
 }
-
 .outMiddle {
     background: rgba(210, 172, 2, 0.9);
 }
-
 .inMiddle:active {
     background: rgb(210, 172, 2);
 }
-
 .outMiddle:active {
     background: rgb(210, 172, 2);
 }
-
 header {
     overflow: hidden;
     padding: 20px 20px 0px 20px;
 }
-
 .btnSalir {
     float: right;
     background: rgba(237,73,71,.90);
@@ -259,25 +231,22 @@ header {
     color: #fff;
     border-radius: 50px;
 }
-
 .btnSalir:active {
     background: rgb(237,73,71);
 }
-
 #txtIncidencia {
     color: #ED4947;
     font-weight: bold;
     font-size: 1.4em;
     margin-top: 10px;
 }
-
 .listHorario {
     margin-top: 20px;
     width: 100%;
     overflow: hidden;
     text-align: center;
-    justify-content: center; /* Esto alinea horizontalmente en el centro */
+    justify-content: center;
-    align-items: center; /* Esto alinea verticalmente en el centro */
+    align-items: center;
 }
 .listHorario .hrTop {
     width: 100%;
@@ -319,7 +288,6 @@ header {
 .listHorario .time div {
     display: inline-block;
 }
-
 .listHorario .time img {
     width: 20px;
     float: left;
@@ -327,7 +295,6 @@ header {
     margin-top: 8.5px;
     filter: invert(100%);
 }
-
 .listHorario .time p {
     float: left;
     background: #121212;
@@ -337,19 +304,12 @@ header {
     width: 72.5px;
     box-shadow: 0 1px 5px #0003,0 2px 2px #00000024,0 3px 1px -2px #0000001f;
 }
-
-.impar {
-    color: rgba(163,171,38,.90);
-    font-weight: bold;
-}
-
 .hide {
     opacity: 0;
 }
 .show {
     opacity: 1;
 }
-
 .confirm {
     display: none;
     position: fixed;
@@ -365,7 +325,6 @@ header {
     background: #ffcdd2;
     color: #A00;
 }
-
 .contConfirm {
     position: fixed;
     margin: auto;
@@ -377,12 +336,10 @@ header {
     height: 170px;
     text-align: center;
 }
-
 .contConfirm h4 {
     font-size: 2.5em;
     margin-bottom: 20px;
 }
-
 .btnconfirmar {
     float: left;
     font-size: 1.2em;
@@ -391,22 +348,6 @@ header {
     color: #fff;
     margin: 15px;
 }
-
-.btnnoconfirm {
-    float: left;
-    font-size: 1.2em;
-    padding: 18px;
-    background: rgba(237,73,71,.90);
-    color: #fff;
-    margin: 15px;
-}
-
-.botonera {
-    margin: auto;
-    width: 310px;
-    overflow: hidden;
-}
-
 .loading {
     display: none;
     top: 0;
@@ -424,7 +365,6 @@ header {
     background: linear-gradient(45deg, rgba(255, 255, 255, .5) 0%, rgb(0, 0, 0, .5) 100%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#199aa6', endColorstr='#27d88b', GradientType=1 );
 }
-
 .loadingcontent {
     position: fixed;
     height: 50px;
@@ -434,13 +374,11 @@ header {
     bottom: 0;
     left: 0;
 }
-
 .sk-cube-grid {
     width: 40px;
     height: 40px;
     margin:  auto;
 }
-
 .sk-cube-grid .sk-cube {
     width: 33%;
     height: 33%;
@@ -486,7 +424,6 @@ header {
         transform: scale3D(0, 0, 1); 
     }
 }
-
 @keyframes sk-cubeGridScaleDelay {
     0%, 70%, 100% {
         -webkit-transform: scale3D(1, 1, 1);
@@ -500,4 +437,9 @@ header {
 @font-face {
     font-family: 'Poppins';
     src: url('../font/Poppins.ttf') format('truetype');
+}
+@font-face {
+    font-family: 'Poppins';
+    src: url('../font/Poppins-Bold.ttf') format('truetype');
+    font-weight: bold;
 }

js/clockIn.js

@@ -161,13 +161,13 @@ function printTotalHours(timetable) {
 
         $(".listHorario").append('<hr>');
         $(".listHorario").append('<li><div class="time">' + secondsToHm(ifIsEmptyText(timetable[0]["6daysAgoTotal"]))
-                + '</div><div class="time">' + secondsToHm(ifIsEmptyText(timetable[0]["5daysAgoTotal"]))
+                + ' h</div><div class="time">' + secondsToHm(ifIsEmptyText(timetable[0]["5daysAgoTotal"]))
-                + '</div><div class="time">' + secondsToHm(ifIsEmptyText(timetable[0]["4daysAgoTotal"]))
+                + ' h</div><div class="time">' + secondsToHm(ifIsEmptyText(timetable[0]["4daysAgoTotal"]))
-                + '</div><div class="time">' + secondsToHm(ifIsEmptyText(timetable[0]["3daysAgoTotal"]))
+                + ' h</div><div class="time">' + secondsToHm(ifIsEmptyText(timetable[0]["3daysAgoTotal"]))
-                + '</div><div class="time">' + secondsToHm(ifIsEmptyText(timetable[0]["2daysAgoTotal"]))
+                + ' h</div><div class="time">' + secondsToHm(ifIsEmptyText(timetable[0]["2daysAgoTotal"]))
-                + '</div><div class="time">' + secondsToHm(ifIsEmptyText(timetable[0]["1daysAgoTotal"]))
+                + ' h</div><div class="time">' + secondsToHm(ifIsEmptyText(timetable[0]["1daysAgoTotal"]))
-                + '</div><div class="time">' + secondsToHm(ifIsEmptyText(timetable[0]["0daysAgoTotal"]))
+                + ' h</div><div class="time">' + secondsToHm(ifIsEmptyText(timetable[0]["0daysAgoTotal"]))
-                + '</div></li>');
+                + ' h</div></li>');
     
         $(".total").text('Total: ' + 
             secondsToHm(
@@ -178,7 +178,7 @@ function printTotalHours(timetable) {
                 Number(timetable[0]["2daysAgoTotal"]) +
                 Number(timetable[0]["1daysAgoTotal"]) +
                 Number(timetable[0]["0daysAgoTotal"]) 
-            ) + 'h');
+            ) + ' h');
     } else{
         $(".total").text('Total: 0h');     
     }