Merge pull request 'master' (#13) from test into master

Reviewed-on: #13
2023-08-29 07:24:10 +00:00 · 2023-08-29 07:24:10 +00:00 · 6b906be140
parent 3198684f27 550089b966
commit 6b906be140
23 changed files with 349 additions and 371 deletions
--- a/3
+++ b/3
@ -8,7 +8,7 @@ RUN apt-get update \
        ca-certificates \
        gnupg2 \
        libfontconfig \
-    && curl -sL https://deb.nodesource.com/setup_12.x | bash - \
+    && curl -sL https://deb.nodesource.com/setup_20.x | bash - \
    && apt-get install -y --no-install-recommends \
        nodejs \
    && apt-get purge -y --auto-remove \
@ -22,6 +22,7 @@ RUN npm install --only=prod
 COPY js js
 COPY css css
 COPY img img
+COPY font font
 COPY \
    LICENSE \
    README.md \
--- a/2
+++ b/2
@ -1,4 +1,4 @@
-Copyright (C) 2021 - Verdnatura Levante S.L.
+Copyright (C) 2023 - Verdnatura Levante S.L.

 This package is free software; you can redistribute it and/or modify
 it under the terms of the GNU General Public License as published by
--- a/clockIn.html
+++ b/clockIn.html
@ -6,10 +6,11 @@ and open the template in the editor.
 -->
 <html>
    <head>
-        <title>FichApp</title>
+        <title>Time Control</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/style.css" rel="stylesheet" type="text/css"/>
+        <link rel="icon" type="image/png" href="img/favicon.ico">
        <script src="node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script>
        <script src="node_modules/fastclick/lib/fastclick.js" type="text/javascript"></script>
    </head>
@ -26,7 +27,7 @@ and open the template in the editor.
            <div class="planPanel">
                <div class="container">
                    <h2>Tus fichadas</h2>
-                    <h3>Situación de los ultimos 7 días</h3> 
+                    <h3>Situación de los últimos 7 días</h3> 
                    <div class="total"></div>
                    <ul class="listHorario">
                    </ul>
@ -42,24 +43,6 @@ and open the template in the editor.
            <div class="out">Fin jornada</div>
        </div> 

-        <p></p>
-    
-        <div class="loading">
-            <div class="loadingcontent">
-                <div class="sk-cube-grid">
-                    <div class="sk-cube sk-cube1"></div>
-                    <div class="sk-cube sk-cube2"></div>
-                    <div class="sk-cube sk-cube3"></div>
-                    <div class="sk-cube sk-cube4"></div>
-                    <div class="sk-cube sk-cube5"></div>
-                    <div class="sk-cube sk-cube6"></div>
-                    <div class="sk-cube sk-cube7"></div>
-                    <div class="sk-cube sk-cube8"></div>
-                    <div class="sk-cube sk-cube9"></div>
-                </div>
-            </div>
-        </div>
-
        <div class="confirm">
            <div class="contConfirm">
                <h4 class="txtConfirm"></h4>
--- a/css/style.css
+++ b/css/style.css
@ -2,188 +2,177 @@
    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{
+html, body {
    width: 100%;
    height: 100%;
-    font-family: sans-serif;
-    background: #000;
+    font-family: 'Poppins', 'Verdana', 'Sans';
+    background: #121212;
 }
-
-
-h1{
+h1 {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 1em;
-    color: #fff;
+    font-weight: 400;
+    color: white;
+    opacity: 50%;
 }
-span{
+span {
    color: #ED4947;
 }
-
-
-.total{
+.total {
    float: right;
    font-weight: bold;
    font-size: 1.4em;
-    margin-top: -40px;
+    margin-top: -45px;
+    color: white;
 }
-
-ul{
+ul {
    list-style: none;
 }
-
-.pinLogin{
-        background-image: url(../img/logo.png);
-        background-size: cover;
-        background-position: center;
-        background-repeat: no-repeat;
-}
-
-#logoVerd{
-    width: 200px;
-    margin: 20px;
-}
-
-#logoVerdHeader{
-    width: 50px;
-    margin: 0;
-    position: fixed;
-    top: 12px;
-    left: 20px;
-}
-
-
-
-.pinContainer{
-    width: 350px;
+.pinContainer {
+    width: 320px;
    height: 460px;
    position: fixed;
    top: 0;
-    bottom: 0;
+    bottom: 21%;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
 }
-
-#txtPin{
+#txtPin {
    text-align: center;
    padding: 15px 5px;
-    background: rgba(255,255,255,.90);
-    border: none;
-    font-weight: bold;
+    background: white;
+    line-height: 40px;
+    font-weight: 400;
    font-size: 1.5em;
-	border-radius: 5px;
-
+	border-radius: 50px;
    display: block;
-    width: 250px;
+    width: 310px;
+    height: 70px;
    margin: auto;
    margin-bottom: 10px;
+    overflow: hidden;
+    font-size: 26px;
 }
-
-.btnPin{
+#logo {
+    width: 30%;
+    padding-bottom: 20px;
+    pointer-events: none;
+}
+.btnPin {
+    display: flex;
+    align-items: center;
+    justify-content: center;
    float: left;
    width: calc(100% / 3);
-    height: calc(500px/5);
+    height: calc(500px / 5);
    padding: 5px;
 }
-.btnPinNum{
+.btnPinNum {
    width: 100%;
    height: 100%;
    font-size: 2.5em;
-    background: rgba(255,255,255,.90);
-    padding-top: 21px;
-	border-radius: 5px;
+    background: #292929;
+    color: white;
+    margin: auto;
+	border-radius: 48%;
+    font-weight: 400;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
-
-.btnPinNum:active{
-	background: rgb(255,255,255);
+.btnPinNum:active {
+	background: #333;
 }
-
-.btnCancel{
+.btnCancel {
    width: 100%;
    height: 100%;
-    font-size: 2.5em;
-    padding-top: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
    background: rgba(237,73,71,.90);
-    color: #fff;
-	border-radius: 5px;
+    color: white;
+	border-radius: 50%;
 }
-.btnCancel:active{
+.btnCancel:active {
    background: rgb(172,55,54);
 }
-
-.btnOk{
+.btnOk {
    width: 100%;
    height: 100%;
-    font-size: 2.5em;
-    padding-top: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
    background: rgba(163,171,38,.90);
-    color: #fff;
-	border-radius: 5px;
+    color: white;
+	border-radius: 50%;
 }
-
-.btnOk:active{
+#invertColor {
+    filter: invert(100%);
+    pointer-events: none;
+}
+.btnOk:active {
 	background: rgb(130, 136, 31);
 }
-
-
-#txtNombre{
+#txtNombre {
    padding-top: 0px;
    padding-left: 10px;
    float: left;
-    color: #fff;
+    color: white;
    text-align: right;
    font-size: 1.8em;
    font-weight: bold;
 }
-
-.paneles{
+.paneles {
    overflow: hidden;
    width: 100%;
 }
-
-.planPanel{
+.planPanel {
    float: left;
    width: 100%;
    padding: 20px 20px 0 20px;
    height: auto;
 }
-.problemsPanel{
+.problemsPanel {
    float: left;
    width: 100%;
    height: auto;
    padding: 20px;
 }
-.container{
+.container {
    width: 100%;
    height: 100%;
-    background: rgba(255,255,255,.90);
+    background: #292929;
    padding: 20px;
    overflow: hidden;
    box-shadow: 0 0 5px rgba(0,0,0,.2);
    border-radius: 8px;
+    animation: slideIn 0.4s ease-in-out;
 }
-h2{
+h2 {
    font-size: 1.3em;
+    color: white;
 }
-h3{
+h3 {
    font-size: 1em;
    color: #9EA7AC;
    font-weight: normal;

 }
-
-.footer{
+.footer {
    display: none;
    position: absolute;
    bottom: 0;
@ -191,23 +180,27 @@ h3{
    height: 100px; 
    text-align: center;
 }
-
-.in,.inMiddle {
+.footer {
+    animation: faceIn 0.2s ease-in-out;
+}
+.in, .inMiddle {
    display: inline;
    position: static;
    width: 350px;
-    background: rgba(0, 204, 10, .90);
+    background: rgba(69, 171, 38, 0.9);
    padding: 20px 40px;
    font-size: 2em;
    color: #fff;
    text-align: center;
-    border-radius: 10px;
+    border-radius: 50px;
 }
-
 .in:active {
-    background: rgb(0, 204, 10);
+    background: rgb(53, 131, 29);
 }
-.out,.outMiddle{
+.out {
+    margin-left: 30px;
+}
+.out, .outMiddle {
    display: inline;
    position: static;
    width: 350px;
@ -216,118 +209,117 @@ h3{
    font-size: 2em;
    color: #fff;
    text-align: center;
-    border-radius: 10px;
+    border-radius: 50px;
 }
-
 .out:active {
    background: rgb(237,73,71);
 }
-
-.inMiddle{
+.inMiddle {
    background: rgba(210, 172, 2, 0.9);
 }
-
-.outMiddle{
-    background: rgba(226, 86, 4, 0.9);
+.outMiddle {
+    background: rgba(210, 172, 2, 0.9);
 }
-
-.inMiddle:active{
+.inMiddle:active {
    background: rgb(210, 172, 2);
 }
-
-.outMiddle:active{
-    background: rgb(226, 86, 4);
+.outMiddle:active {
+    background: rgb(210, 172, 2);
 }
-
-header{
+header {
    overflow: hidden;
    padding: 20px 20px 0px 20px;
 }
-
-.btnSalir{
+.btnSalir {
    float: right;
    background: rgba(237,73,71,.90);
    padding: 5px 30px;
    font-size: 1.2em;
    color: #fff;
-    border-radius: 5px;
+    border-radius: 50px;
 }
-
-.btnSalir:active{
+.btnSalir:active {
    background: rgb(237,73,71);
 }
-
-#txtIncidencia{
+#txtIncidencia {
    color: #ED4947;
    font-weight: bold;
    font-size: 1.4em;
    margin-top: 10px;
 }
-
-
-
-.listHorario{
+.listHorario {
    margin-top: 20px;
    width: 100%;
    overflow: hidden;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
 }
-.listHorario .headerLi{
+.listHorario .hrTop {
    width: 100%;
    overflow: hidden;
    border-top: 1px solid #9EA7AC;
-    padding-bottom: 10px;
-
+    padding-bottom: 5px;
 }
-
-.listHorario label{
+/* Transparent borders because <hr> doesn't allow margin */
+.listHorario hr {
+    padding-top: 5px;
+    margin-bottom: 15px;
+    border-bottom: 1px solid #9EA7AC;
+    border-left: 1px solid transparent;
+    border-right: 1px solid transparent;
+    border-top: 1px solid transparent;
+}
+.listHorario label {
    float: left;
    width: calc(100% / 7);
    text-align: center;
    font-weight: bold;
    padding: 5px 0;
+    color: white;

 }
-.hoy{
+.hoy {
    background: #9EA7AC;
-    color: #fff;
+    border-radius: 25px 25px 0px 0px;
+    color: black !important;
 }
-
-.listHorario .time{
+.listHorario .time {
    float: left;
    width: calc(100% / 7);
-    text-align: center;
-    padding: 5px 0;
    font-size: 1.2em;
    overflow: hidden;
-
+    color: white;
 }
-.listHorario .time img{
+.listHorario .time div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+.listHorario .time img {
    width: 20px;
    float: left;
    margin-right: 5px;
-    margin-left: 15px;
-    margin-top: 7px;
+    filter: invert(100%);
+    pointer-events: none;
 }
-
-.listHorario .time p{
+.listHorario .time p {
    float: left;
-    background: #8DD202;
-    padding: 5px;
-    border-radius: 7px;
+    background: #121212;
+    padding: 2px;
+    border-radius: 24px;
+    color: white;
+    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{
+.hide {
    opacity: 0;
 }
-.show{
+.show {
    opacity: 1;
 }
-
 .confirm {
    display: none;
    position: fixed;
@ -336,13 +328,14 @@ header{
    width: 100%;
    height: 100%;
    color: #fff;
-    background: #8DD202;
+    background: #BBFFBB;
+    color: #363;
 }
 .confirm.confirmKO {
-    background: rgba(237,73,71);
+    background: #ffcdd2;
+    color: #A00;
 }
-
-.contConfirm{
+.contConfirm {
    position: fixed;
    margin: auto;
    top:0;
@ -353,13 +346,11 @@ header{
    height: 170px;
    text-align: center;
 }
-
-.contConfirm h4{
+.contConfirm h4 {
    font-size: 2.5em;
    margin-bottom: 20px;
 }
-
-.btnconfirmar{
+.btnconfirmar {
    float: left;
    font-size: 1.2em;
    padding: 18px;
@ -368,110 +359,31 @@ header{
    margin: 15px;
 }

-.btnnoconfirm{
-    float: left;
-    font-size: 1.2em;
-    padding: 18px;
-    background: rgba(237,73,71,.90);
-    color: #fff;
-    margin: 15px;
+@keyframes slideIn {
+    0% {
+        transform: translateY(-100%);
+        opacity: 0;
+    }
+    100% {
+        transform: translateY(0);
+        opacity: 1;
+    }
 }
-
-.botonera{
-    margin: auto;
-    width: 310px;
-    overflow: hidden;
-}
-
-.loading{
-    display: none;
-    top: 0;
-    left: 0;
-    position: fixed;
-    z-index: 999;
-    width: 100%;
-    height: 100%;
-    background: rgba(25,154,166,1);
-    background: -moz-linear-gradient(45deg, rgba(25,154,166,1) 0%, rgba(39,216,139,1) 100%);
-    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(25,154,166,1)), color-stop(100%, rgba(39,216,139,1)));
-    background: -webkit-linear-gradient(45deg, rgba(25,154,166,1) 0%, rgba(39,216,139,1) 100%);
-    background: -o-linear-gradient(45deg, rgba(25,154,166,1) 0%, rgba(39,216,139,1) 100%);
-    background: -ms-linear-gradient(45deg, rgba(25,154,166,1) 0%, rgba(39,216,139,1) 100%);
-    background: linear-gradient(45deg, rgba(25,154,166,1) 0%, rgba(39,216,139,1) 100%);
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#199aa6', endColorstr='#27d88b', GradientType=1 );
-}
-
-
-.loadingcontent{
-    position: fixed;
-    height: 50px;
-    width: 100%;
-    margin: auto;
-    top: 0;
-    bottom: 0;
-    left: 0;
-}
-
-
-
-.sk-cube-grid {
-    width: 40px;
-    height: 40px;
-    margin:  auto;
-}
-
-.sk-cube-grid .sk-cube {
-    width: 33%;
-    height: 33%;
-    background-color: #fff;
-    float: left;
-    -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
-    animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; 
-}
-.sk-cube-grid .sk-cube1 {
-    -webkit-animation-delay: 0.2s;
-    animation-delay: 0.2s; }
-.sk-cube-grid .sk-cube2 {
-    -webkit-animation-delay: 0.3s;
-    animation-delay: 0.3s; }
-.sk-cube-grid .sk-cube3 {
-    -webkit-animation-delay: 0.4s;
-    animation-delay: 0.4s; }
-.sk-cube-grid .sk-cube4 {
-    -webkit-animation-delay: 0.1s;
-    animation-delay: 0.1s; }
-.sk-cube-grid .sk-cube5 {
-    -webkit-animation-delay: 0.2s;
-    animation-delay: 0.2s; }
-.sk-cube-grid .sk-cube6 {
-    -webkit-animation-delay: 0.3s;
-    animation-delay: 0.3s; }
-.sk-cube-grid .sk-cube7 {
-    -webkit-animation-delay: 0s;
-    animation-delay: 0s; }
-.sk-cube-grid .sk-cube8 {
-    -webkit-animation-delay: 0.1s;
-    animation-delay: 0.1s; }
-.sk-cube-grid .sk-cube9 {
-    -webkit-animation-delay: 0.2s;
-    animation-delay: 0.2s; }
-
-@-webkit-keyframes sk-cubeGridScaleDelay {
-    0%, 70%, 100% {
-        -webkit-transform: scale3D(1, 1, 1);
-        transform: scale3D(1, 1, 1);
-    } 35% {
-        -webkit-transform: scale3D(0, 0, 1);
-        transform: scale3D(0, 0, 1); 
+@keyframes faceIn {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
    }
 }

-@keyframes sk-cubeGridScaleDelay {
-    0%, 70%, 100% {
-        -webkit-transform: scale3D(1, 1, 1);
-        transform: scale3D(1, 1, 1);
-    } 35% {
-        -webkit-transform: scale3D(0, 0, 1);
-        transform: scale3D(0, 0, 1);
-    } 
+@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;
 }
--- a/font/Poppins-Bold.ttf
+++ b/font/Poppins-Bold.ttf
--- a/font/Poppins.ttf
+++ b/font/Poppins.ttf
--- a/img/close.svg
+++ b/img/close.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M480-432.261 272.87-225.13q-10.196 10.195-23.87 10.195-13.674 0-23.87-10.195-10.195-10.196-10.195-23.87 0-13.674 10.195-23.87L432.261-480 225.13-687.13q-10.195-10.196-10.195-23.87 0-13.674 10.195-23.87 10.196-10.195 23.87-10.195 13.674 0 23.87 10.195L480-527.739 687.13-734.87q10.196-10.195 23.87-10.195 13.674 0 23.87 10.195 10.195 10.196 10.195 23.87 0 13.674-10.195 23.87L527.739-480 734.87-272.87q10.195 10.196 10.195 23.87 0 13.674-10.195 23.87-10.196 10.195-23.87 10.195-13.674 0-23.87-10.195L480-432.261Z"/></svg>
--- a/img/done.svg
+++ b/img/done.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M378-338.218 737.891-697.87q10.294-10.195 24.419-10.195t24.32 10.248q10.196 10.248 10.196 24.441t-10.196 24.485L402.109-264.37q-10.283 10.196-24.152 10.196-13.87 0-24.066-10.196L172.37-445.891q-10.196-10.358-9.816-24.571.381-14.212 10.629-24.408 10.248-10.195 24.441-10.195t24.485 10.195L378-338.218Z"/></svg>
--- a/img/favicon.ico
+++ b/img/favicon.ico
--- a/img/in.png
+++ b/img/in.png
--- a/img/in.svg
+++ b/img/in.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M676.195-445.935H188.087q-14.674 0-24.37-9.695-9.695-9.696-9.695-24.37 0-14.674 9.695-24.37 9.696-9.695 24.37-9.695h488.108L456.13-734.13q-10.195-10.196-10.334-24.031-.139-13.835 10.076-24.091 10.215-10.292 24.085-10.172 13.869.12 24.152 10.315l278 278q5.456 5.518 7.945 11.482 2.49 5.963 2.49 12.654 0 6.69-2.49 12.635-2.489 5.945-7.945 11.447l-278.239 278q-10.555 10.435-24.169 10.435t-23.81-10.491q-10.195-10.213-10.195-23.85 0-13.638 10.195-23.833l220.304-220.305Z"/></svg>
--- a/img/logo.png
+++ b/img/logo.png
--- a/img/logo.svg
+++ b/img/logo.svg
@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0.00 0.00 1192.00 1192.00">
+<path fill="#8abb28" d="
+  M 631.17 333.43
+  C 660.52 258.92 720.25 182.84 803.25 166.49
+  Q 808.86 165.39 825.98 163.08
+  Q 966.26 144.23 1106.42 125.28
+  A 0.57 0.55 87.0 0 1 1107.05 125.86
+  C 1105.40 182.31 1103.42 238.79 1101.26 295.22
+  Q 1098.67 362.81 1073.06 425.28
+  C 1042.57 499.70 982.13 573.27 898.34 587.76
+  Q 895.85 588.19 878.54 590.53
+  Q 740.59 609.17 600.48 628.12
+  Q 598.97 628.32 599.14 626.82
+  C 599.78 620.96 599.72 614.34 599.88 608.25
+  C 600.89 571.32 602.67 523.90 604.09 481.75
+  Q 604.93 456.55 605.61 446.75
+  Q 609.64 388.09 631.17 333.43
+  Z"
+/>
+<path fill="#8abb28" d="
+  M 389.58 267.53
+  C 459.94 270.37 506.64 327.82 525.33 390.81
+  C 534.83 422.80 538.24 454.21 537.16 487.50
+  Q 535.07 552.28 532.73 617.06
+  Q 532.44 625.03 532.51 634.87
+  A 2.89 2.88 86.0 0 1 530.02 637.74
+  Q 399.63 655.43 267.76 673.34
+  C 163.55 687.50 106.33 588.25 97.78 499.73
+  C 95.67 477.89 95.77 461.04 96.92 434.18
+  C 98.75 391.28 99.85 348.34 101.39 305.51
+  A 0.84 0.83 -3.3 0 1 102.11 304.71
+  Q 236.99 286.42 371.99 268.19
+  Q 379.80 267.13 389.58 267.53
+  Z"
+/>
+<path fill="#8abb28" d="
+  M 678.83 907.84
+  C 639.27 907.28 612.10 874.67 601.69 839.26
+  Q 594.64 815.25 595.11 790.18
+  Q 595.49 770.19 598.14 702.63
+  Q 598.16 702.14 598.65 702.07
+  Q 669.55 692.44 740.39 682.91
+  Q 753.48 681.15 760.30 681.56
+  C 790.25 683.36 814.01 704.65 826.55 731.22
+  Q 841.38 762.63 840.37 799.07
+  Q 839.17 842.80 837.47 886.68
+  A 0.81 0.80 89.6 0 1 836.71 887.46
+  Q 833.32 887.64 829.73 888.13
+  Q 764.23 897.07 698.73 906.00
+  Q 684.66 907.92 678.83 907.84
+  Z"
+/>
+<path fill="#8abb28" d="
+  M 246.54 772.04
+  Q 270.48 752.78 300.25 745.74
+  Q 306.54 744.25 319.96 742.45
+  Q 422.69 728.61 525.46 714.64
+  Q 526.14 714.55 526.11 715.23
+  C 524.34 756.04 523.37 796.93 521.94 837.75
+  C 519.54 906.05 491.06 978.57 437.09 1022.84
+  Q 407.07 1047.47 368.50 1052.69
+  Q 262.23 1067.07 157.16 1081.36
+  Q 155.73 1081.56 155.77 1080.12
+  Q 156.70 1049.37 157.67 1019.94
+  C 158.74 987.17 159.19 962.04 160.52 946.01
+  C 165.97 880.38 194.50 813.93 246.54 772.04
+  Z"
+/>
+</svg>
--- a/img/middle.png
+++ b/img/middle.png
--- a/img/middle.svg
+++ b/img/middle.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M188.087-445.935q-14.424 0-24.245-9.871-9.82-9.871-9.82-24.369 0-14.499 9.82-24.195 9.821-9.695 24.245-9.695h583.826q14.424 0 24.364 9.871 9.941 9.871 9.941 24.369 0 14.499-9.941 24.195-9.94 9.695-24.364 9.695H188.087Z"/></svg>
--- a/img/out.png
+++ b/img/out.png
--- a/img/out.svg
+++ b/img/out.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M283.805-445.935 503.87-225.87q10.195 10.218 10.315 24 .119 13.783-10.076 24.083-10.196 10.331-24.066 10.211-13.869-.12-24.152-10.315l-278-278q-5.456-5.518-7.945-11.482-2.49-5.963-2.49-12.654 0-6.69 2.49-12.635 2.489-5.945 7.945-11.447L456.13-782.348q10.555-10.196 24.169-10.196t23.81 10.196q10.195 10.435 10.195 24.093t-10.195 23.885L283.805-514.065h488.108q14.644 0 24.474 9.695 9.831 9.696 9.831 24.37 0 14.674-9.831 24.37-9.83 9.695-24.474 9.695H283.805Z"/></svg>
--- a/index.html
+++ b/index.html
@ -6,17 +6,18 @@ and open the template in the editor.
 -->
 <html>
    <head>
-        <title>FichApp</title>
+        <title>Time Control</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/style.css" rel="stylesheet" type="text/css"/>
+        <link rel="icon" type="image/png" href="img/favicon.ico">
        <script src="node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script>
        <script src="node_modules/fastclick/lib/fastclick.js" type="text/javascript"></script>
    </head>
    <body class="pinLogin">
-       
        <div class="pinContainer">
-            <p id="txtPin">USUARIO</p>
+            <img id="logo" src="img/logo.svg"/>
+            <p id="txtPin">ID USUARIO</p>
            <div class="btnPin btnnum">
                <div class="btnPinNum">
                    1
@ -64,7 +65,7 @@ and open the template in the editor.
            </div>
            <div class="btnPin">
                <div class="btnCancel">
-                    ✗
+                    <img id="invertColor" src="img/close.svg">
                </div>
            </div>
            <div class="btnPin btnnum">
@ -72,31 +73,15 @@ and open the template in the editor.
                    0
                </div>
            </div>
-            <div class="btnPin ">
+            <div class="btnPin">
                <div class="btnOk">
-                    ✓
+                    <img id="invertColor" src="img/done.svg">
                </div>
            </div>
        </div>
        <h1>
            developed with <span>&hearts;</span> by Verdnatura
        </h1>
-
-        <div class="loading">
-            <div class="loadingcontent">
-                <div class="sk-cube-grid">
-                    <div class="sk-cube sk-cube1"></div>
-                    <div class="sk-cube sk-cube2"></div>
-                    <div class="sk-cube sk-cube3"></div>
-                    <div class="sk-cube sk-cube4"></div>
-                    <div class="sk-cube sk-cube5"></div>
-                    <div class="sk-cube sk-cube6"></div>
-                    <div class="sk-cube sk-cube7"></div>
-                    <div class="sk-cube sk-cube8"></div>
-                    <div class="sk-cube sk-cube9"></div>
-                </div>
-            </div>
-        </div>
        
        <div class="confirm">
            <div class="contConfirm">
--- a/js/clockIn.js
+++ b/js/clockIn.js
@ -52,10 +52,10 @@ function fichar(direction) {
                printErrores(msg);
                setTimeout(function () {
                    cerrar();
-                }, 3000);
+                }, 2000);
            }else {
                $(".confirm").fadeIn(200);
-                $(".txtConfirm").append('FICHADA REGISTRADA');
+                $(".txtConfirm").append('Fichada registrada correctamente');
                setTimeout(function () {
                    cerrar();
                }, 1000);
@ -102,72 +102,85 @@ function printTimetable(timetable) {
        dated.setDate(dated.getDate() + 1);
    }
   $(".listHorario").append('<label class="hoy">HOY</label>');
-   $(".listHorario").append('<li class="headerLi"></li>');
+   $(".listHorario").append('<li class="hrTop"></li>');
   
    for (var i = 0; i < timetable.length; i++) {
         
        $(".listHorario").append(
            '<li>' +
                '<div class="time ' + ifIsEmpty(timetable[i]["6daysAgo"]) + '">' +
-                    '<img src="' + ifIsEmptyImage(timetable[i]["6daysAgoDirection"]) + '" />' +
-                    '<p>' + ifIsEmptyText(timetable[i]["6daysAgo"]) + '</p>' +
+                    '<div>' +
+                        '<img src="' + ifIsEmptyImage(timetable[i]["6daysAgoDirection"]) + '" />' +
+                        '<p>' + ifIsEmptyText(timetable[i]["6daysAgo"]) + '</p>' +
+                    '</div>' +
                '</div>' +
                '<div class="time ' + ifIsEmpty(timetable[i]["5daysAgo"]) + '">' +
-                    '<img src="' + ifIsEmptyImage(timetable[i]["5daysAgoDirection"]) + '" />' +
-                    '<p>' + ifIsEmptyText(timetable[i]["5daysAgo"]) + '</p>'+
+                    '<div>' +
+                        '<img src="' + ifIsEmptyImage(timetable[i]["5daysAgoDirection"]) + '" />' +
+                        '<p>' + ifIsEmptyText(timetable[i]["5daysAgo"]) + '</p>'+
+                    '</div>' +
                '</div>' +
                '<div class="time ' + ifIsEmpty(timetable[i]["4daysAgo"]) + '">' +
-                    '<img src="' + ifIsEmptyImage(timetable[i]["4daysAgoDirection"]) + '" />' +
-                    '<p>' + ifIsEmptyText(timetable[i]["4daysAgo"]) + '</p>'+
+                    '<div>' +
+                        '<img src="' + ifIsEmptyImage(timetable[i]["4daysAgoDirection"]) + '" />' +
+                        '<p>' + ifIsEmptyText(timetable[i]["4daysAgo"]) + '</p>'+
+                    '</div>' +
                '</div>' +
                '<div class="time ' + ifIsEmpty(timetable[i]["3daysAgo"]) + '">' +
-                    '<img src="' + ifIsEmptyImage(timetable[i]["3daysAgoDirection"]) + '" />' +
-                    '<p>' + ifIsEmptyText(timetable[i]["3daysAgo"]) + '</p>'+
+                    '<div>' +
+                        '<img src="' + ifIsEmptyImage(timetable[i]["3daysAgoDirection"]) + '" />' +
+                        '<p>' + ifIsEmptyText(timetable[i]["3daysAgo"]) + '</p>'+
+                    '</div>' +
                '</div>' +
                '<div class="time ' + ifIsEmpty(timetable[i]["2daysAgo"]) + '">' +
-                    '<img src="' + ifIsEmptyImage(timetable[i]["2daysAgoDirection"]) + '" />' +
-                    '<p>' + ifIsEmptyText(timetable[i]["2daysAgo"]) + '</p>'+
+                    '<div>' +
+                        '<img src="' + ifIsEmptyImage(timetable[i]["2daysAgoDirection"]) + '" />' +
+                        '<p>' + ifIsEmptyText(timetable[i]["2daysAgo"]) + '</p>'+
+                    '</div>' +
                '</div>' + 
                '<div class="time ' + ifIsEmpty(timetable[i]["1daysAgo"]) + '">' +
-                    '<img src="' + ifIsEmptyImage(timetable[i]["1daysAgoDirection"]) + '" />' +
-                    '<p>' + ifIsEmptyText(timetable[i]["1daysAgo"]) + '</p>'+
+                    '<div>' +
+                        '<img src="' + ifIsEmptyImage(timetable[i]["1daysAgoDirection"]) + '" />' +
+                        '<p>' + ifIsEmptyText(timetable[i]["1daysAgo"]) + '</p>'+
+                    '</div>' +
                '</div>' +
                '<div class="time ' + ifIsEmpty(timetable[i]["0daysAgo"]) + '">' +
-                    '<img src="' + ifIsEmptyImage(timetable[i]["0daysAgoDirection"]) + '" />' +
-                    '<p>' + ifIsEmptyText(timetable[i]["0daysAgo"]) + '</p>'+
+                    '<div>' +
+                        '<img src="' + ifIsEmptyImage(timetable[i]["0daysAgoDirection"]) + '" />' +
+                        '<p>' + ifIsEmptyText(timetable[i]["0daysAgo"]) + '</p>'+
+                    '</div>' +
                '</div>' +
            '</li>'
        );
-        
    }
    printTotalHours(timetable);
-   
 }

 function printTotalHours(timetable) {
-    if(timetable.length>0) {
+    if(timetable.length > 0) {

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

 }
@ -189,7 +202,7 @@ function weekDays() {


 function printErrores(errores) {
-    var error ='';
+    var error = '';
    for (var i = 0; i < errores.length; i++) {
        if (errores[i].error) {
           error += errores[i].error + "<br>";
@ -208,9 +221,9 @@ function ifIsEmpty(value) {

 function ifIsEmptyImage(value) {
    if (value.trim().length === 0) {
-        return "img/in.png";
+        return "img/in.svg";
    } else {
-        return "img/" + value + ".png";
+        return "img/" + value + ".svg";
    }
 }

@ -223,7 +236,6 @@ function ifIsEmptyText(value) {
 }

 function cerrar(){
-    $(".loading").fadeIn(200); 
    localStorage.removeItem("userData");
    setTimeout(function () {
    window.location='index.html';
--- a/js/index.js
+++ b/js/index.js
@ -21,7 +21,7 @@ function setEvents() {

    $(".btnCancel").on("click", function () {
        pin = "";
-        $("#txtPin").text("USUARIO");
+        $("#txtPin").text("ID USUARIO");
    });

    $(".btnOk").on("click", login);
@ -31,12 +31,10 @@ function setEvents() {
        setTimeout(function () {
            window.location = "clockIn.html";
            }, 200);
-        $(".loading").fadeOut(200);     
    });
 }

 function login() {
-    $(".loading").fadeIn(200);
    $.post({
        urlPath: 'login',
        jsonData: [pin],
@ -46,8 +44,7 @@ function login() {
            window.location = "clockIn.html";
        },
        error: function() {
-            $(".loading").fadeOut(200);
-            $("#txtPin").text("USUARIO");
+            $("#txtPin").text("ID USUARIO");
            pin = "";
        }
    });
--- a/js/main.js
+++ b/js/main.js
@ -13,7 +13,7 @@ function printError(msg){
    setTimeout(function() {
        $(".confirm").fadeOut(200);
        setTimeout(confirmReset, 200);
-    }, 1500);
+    }, 2300);
 }

 $.ajaxPrefilter(function(xhr) {
--- a/package-lock.json
+++ b/package-lock.json
@ -1,18 +1,31 @@
 {
-  "name": "es.verdnatura.worker-time-control",
-  "version": "1.0.1",
-  "lockfileVersion": 1,
+  "name": "worker-time-control",
+  "version": "1.0.2",
+  "lockfileVersion": 3,
  "requires": true,
-  "dependencies": {
-    "fastclick": {
+  "packages": {
+    "": {
+      "name": "worker-time-control",
+      "version": "1.0.2",
+      "license": "GPL-3.0",
+      "dependencies": {
+        "fastclick": "^1.0.6",
+        "jquery": "^3.7.0"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=8"
+      }
+    },
+    "node_modules/fastclick": {
      "version": "1.0.6",
      "resolved": "https://registry.npmjs.org/fastclick/-/fastclick-1.0.6.tgz",
      "integrity": "sha1-FhYlsnsaWAZAWTa9qaLBkm0Gvmo="
    },
-    "jquery": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
-      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
+    "node_modules/jquery": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.0.tgz",
+      "integrity": "sha512-umpJ0/k8X0MvD1ds0P9SfowREz2LenHsQaxSohMZ5OMNEU2r0tf8pdeEFTHMFxWVxKNyU9rTtK3CWzUCTKJUeQ=="
    }
  }
 }
--- a/package.json
+++ b/package.json
@ -1,20 +1,19 @@
 {
-  "name": "es.verdnatura.worker-time-control",
-  "version": "1.0.1",
+  "name": "worker-time-control",
+  "version": "1.0.2",
  "author": "Verdnatura Levante SL",
-  "description": "Fichador",
-  "displayName": "Fichador",
-  "main": "index.js",
+  "description": "Verdnatura Time Control",
  "license": "GPL-3.0",
  "repository": {
    "type": "git",
-    "url": "https://gitea.verdnatura.es/verdnatura/vn-database"
+    "url": "https://gitea.verdnatura.es/verdnatura/worker-time-control"
  },
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+  "engines": {
+    "node": ">=14",
+    "npm": ">=8"
  },
  "dependencies": {
    "fastclick": "^1.0.6",
-    "jquery": "^3.6.0"
+    "jquery": "^3.7.0"
  }
 }
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M480-432.261 272.87-225.13q-10.196 10.195-23.87 10.195-13.674 0-23.87-10.195-10.195-10.196-10.195-23.87 0-13.674 10.195-23.87L432.261-480 225.13-687.13q-10.195-10.196-10.195-23.87 0-13.674 10.195-23.87 10.196-10.195 23.87-10.195 13.674 0 23.87 10.195L480-527.739 687.13-734.87q10.196-10.195 23.87-10.195 13.674 0 23.87 10.195 10.195 10.196 10.195 23.87 0 13.674-10.195 23.87L527.739-480 734.87-272.87q10.195 10.196 10.195 23.87 0 13.674-10.195 23.87-10.196 10.195-23.87 10.195-13.674 0-23.87-10.195L480-432.261Z"/></svg>
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M378-338.218 737.891-697.87q10.294-10.195 24.419-10.195t24.32 10.248q10.196 10.248 10.196 24.441t-10.196 24.485L402.109-264.37q-10.283 10.196-24.152 10.196-13.87 0-24.066-10.196L172.37-445.891q-10.196-10.358-9.816-24.571.381-14.212 10.629-24.408 10.248-10.195 24.441-10.195t24.485 10.195L378-338.218Z"/></svg>`