diff --git a/LICENSE b/LICENSE index aab011a..2a40ad6 100644 --- a/LICENSE +++ b/LICENSE @@ -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 diff --git a/clockIn.html b/clockIn.html index 5aab4aa..74f0fcd 100644 --- a/clockIn.html +++ b/clockIn.html @@ -6,10 +6,11 @@ and open the template in the editor. --> - FichApp + Time Control + diff --git a/css/style.css b/css/style.css index c7eb25e..05d4b4e 100644 --- a/css/style.css +++ b/css/style.css @@ -3,141 +3,143 @@ 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; } -span{ +span { color: #ED4947; } - -.total{ +.total { float: right; font-weight: bold; font-size: 1.4em; margin-top: -40px; } -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: 25%; + padding-bottom: 20px; +} + +.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; + 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; + border-radius: 50%; } -.btnOk:active{ +#invertColor { + filter: invert(100%); +} + +.btnOk:active { background: rgb(130, 136, 31); } - -#txtNombre{ +#txtNombre { padding-top: 0px; padding-left: 10px; float: left; @@ -147,43 +149,44 @@ ul{ 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; } -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; @@ -192,7 +195,7 @@ h3{ text-align: center; } -.in,.inMiddle { +.in, .inMiddle { display: inline; position: static; width: 350px; @@ -201,13 +204,13 @@ h3{ font-size: 2em; color: #fff; text-align: center; - border-radius: 10px; + border-radius: 50%; } .in:active { background: rgb(0, 204, 10); } -.out,.outMiddle{ +.out,.outMiddle { display: inline; position: static; width: 350px; @@ -216,48 +219,48 @@ h3{ font-size: 2em; color: #fff; text-align: center; - border-radius: 10px; + border-radius: 50%; } .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; @@ -266,12 +269,12 @@ header{ -.listHorario{ +.listHorario { margin-top: 20px; width: 100%; overflow: hidden; } -.listHorario .headerLi{ +.listHorario .headerLi { width: 100%; overflow: hidden; border-top: 1px solid #9EA7AC; @@ -279,7 +282,7 @@ header{ } -.listHorario label{ +.listHorario label { float: left; width: calc(100% / 7); text-align: center; @@ -287,12 +290,12 @@ header{ padding: 5px 0; } -.hoy{ +.hoy { background: #9EA7AC; color: #fff; } -.listHorario .time{ +.listHorario .time { float: left; width: calc(100% / 7); text-align: center; @@ -301,7 +304,7 @@ header{ overflow: hidden; } -.listHorario .time img{ +.listHorario .time img { width: 20px; float: left; margin-right: 5px; @@ -309,22 +312,22 @@ header{ margin-top: 7px; } -.listHorario .time p{ +.listHorario .time p { float: left; background: #8DD202; padding: 5px; border-radius: 7px; } -.impar{ +.impar { color: rgba(163,171,38,.90); font-weight: bold; } -.hide{ +.hide { opacity: 0; } -.show{ +.show { opacity: 1; } @@ -336,13 +339,15 @@ 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; @@ -354,12 +359,12 @@ header{ 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,7 +373,7 @@ header{ margin: 15px; } -.btnnoconfirm{ +.btnnoconfirm { float: left; font-size: 1.2em; padding: 18px; @@ -377,13 +382,13 @@ header{ margin: 15px; } -.botonera{ +.botonera { margin: auto; width: 310px; overflow: hidden; } -.loading{ +.loading { display: none; top: 0; left: 0; @@ -391,18 +396,17 @@ header{ 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%); + background: linear-gradient(45deg, rgba(255, 255, 255, .5) 0%, rgb(0, 0, 0, .5) 100%); + background: -moz-linear-gradient(45deg, rgba(255, 255, 255, .5) 0%, rgb(0, 0, 0, .5) 100%); + background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(255, 255, 255, .5)), color-stop(100%, rgb(0, 0, 0, .5))); + background: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .5) 0%, rgb(0, 0, 0, .5) 100%); + background: -o-linear-gradient(45deg, rgba(255, 255, 255, .5) 0%, rgb(0, 0, 0, .5) 100%); + background: -ms-linear-gradient(45deg, rgba(255, 255, 255, .5) 0%, rgb(0, 0, 0, .5) 100%); + 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{ +.loadingcontent { position: fixed; height: 50px; width: 100%; @@ -412,8 +416,6 @@ header{ left: 0; } - - .sk-cube-grid { width: 40px; height: 40px; diff --git a/img/close.svg b/img/close.svg new file mode 100644 index 0000000..4c02d83 --- /dev/null +++ b/img/close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/done.svg b/img/done.svg new file mode 100644 index 0000000..e7f0394 --- /dev/null +++ b/img/done.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/favicon.ico b/img/favicon.ico new file mode 100644 index 0000000..0de7b90 Binary files /dev/null and b/img/favicon.ico differ diff --git a/img/logo.png b/img/logo.png deleted file mode 100644 index cd8e681..0000000 Binary files a/img/logo.png and /dev/null differ diff --git a/img/logo.svg b/img/logo.svg new file mode 100644 index 0000000..b70308d --- /dev/null +++ b/img/logo.svg @@ -0,0 +1,71 @@ + + + + + + + + diff --git a/index.html b/index.html index 86258d7..f7da460 100644 --- a/index.html +++ b/index.html @@ -6,17 +6,18 @@ and open the template in the editor. --> - FichApp + Time Control + -
-

USUARIO

+ +

ID USUARIO

1 @@ -64,7 +65,7 @@ and open the template in the editor.
- ✗ +
@@ -72,9 +73,9 @@ and open the template in the editor. 0
-
+
- ✓ +
diff --git a/js/index.js b/js/index.js index 373da26..1a7e28a 100644 --- 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); @@ -47,7 +47,7 @@ function login() { }, error: function() { $(".loading").fadeOut(200); - $("#txtPin").text("USUARIO"); + $("#txtPin").text("ID USUARIO"); pin = ""; } }); diff --git a/package-lock.json b/package-lock.json index 8e14c92..d594190 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,15 +1,24 @@ { "name": "es.verdnatura.worker-time-control", - "version": "1.0.1", - "lockfileVersion": 1, + "version": "1.0.2", + "lockfileVersion": 3, "requires": true, - "dependencies": { - "fastclick": { + "packages": { + "": { + "name": "es.verdnatura.worker-time-control", + "version": "1.0.2", + "license": "GPL-3.0", + "dependencies": { + "fastclick": "^1.0.6", + "jquery": "^3.6.0" + } + }, + "node_modules/fastclick": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/fastclick/-/fastclick-1.0.6.tgz", "integrity": "sha1-FhYlsnsaWAZAWTa9qaLBkm0Gvmo=" }, - "jquery": { + "node_modules/jquery": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz", "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==" diff --git a/package.json b/package.json index c9d2ef7..b12bd76 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "es.verdnatura.worker-time-control", - "version": "1.0.1", + "version": "1.0.2", "author": "Verdnatura Levante SL", "description": "Fichador", "displayName": "Fichador",