refs #5966 Changed style

2023-08-22 13:46:00 +02:00 · 2023-08-22 13:46:00 +02:00 · 97b47bf47d
parent f64265659e
commit 97b47bf47d
12 changed files with 216 additions and 130 deletions
--- 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>
--- a/css/style.css
+++ b/css/style.css
@ -13,23 +13,22 @@
 html, body {
    width: 100%;
    height: 100%;
-    font-family: sans-serif;
-    background: #000;
+    font-family: 'Poppins', 'Verdana', 'Sans';
+    background: #121212;
 }

-
 h1 {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 1em;
-    color: #fff;
+    font-weight: 400;
+    color: white;
 }
 span {
    color: #ED4947;
 }

-
 .total {
    float: right;
    font-weight: bold;
@ -41,56 +40,49 @@ 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;
+    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 {
    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;
+}
+
+#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);
@ -100,23 +92,29 @@ ul{
    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);
+	background: #333;;
 }

 .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 {
    background: rgb(172,55,54);
@ -125,18 +123,22 @@ ul{
 .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%;
+}
+
+#invertColor {
+    filter: invert(100%);
 }

 .btnOk:active {
 	background: rgb(130, 136, 31);
 }

-
 #txtNombre {
    padding-top: 0px;
    padding-left: 10px;
@ -167,7 +169,7 @@ ul{
 .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);
@ -175,6 +177,7 @@ ul{
 }
 h2 {
    font-size: 1.3em;
+    color: white;
 }
 h3 {
    font-size: 1em;
@ -201,7 +204,7 @@ h3{
    font-size: 2em;
    color: #fff;
    text-align: center;
-    border-radius: 10px;
+    border-radius: 50%;
 }

 .in:active {
@ -216,7 +219,7 @@ h3{
    font-size: 2em;
    color: #fff;
    text-align: center;
-    border-radius: 10px;
+    border-radius: 50%;
 }

 .out:active {
@ -228,7 +231,7 @@ h3{
 }

 .outMiddle {
-    background: rgba(226, 86, 4, 0.9);
+    background: rgba(210, 172, 2, 0.9);
 }

 .inMiddle:active {
@ -236,7 +239,7 @@ h3{
 }

 .outMiddle:active {
-    background: rgb(226, 86, 4);
+    background: rgb(210, 172, 2);
 }

 header {
@ -250,7 +253,7 @@ header{
    padding: 5px 30px;
    font-size: 1.2em;
    color: #fff;
-    border-radius: 5px;
+    border-radius: 50px;
 }

 .btnSalir:active {
@ -336,10 +339,12 @@ 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 {
@ -391,17 +396,16 @@ 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 {
    position: fixed;
    height: 50px;
@ -412,8 +416,6 @@ header{
    left: 0;
 }

-
-
 .sk-cube-grid {
    width: 40px;
    height: 40px;
--- 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="m250.923-218.924-31.999-31.999L448.001-480 218.924-709.077l31.999-31.999L480-511.999l229.077-229.077 31.999 31.999L511.999-480l229.077 229.077-31.999 31.999L480-448.001 250.923-218.924Z"/></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="M379.154-258.309 168.616-468.846l32.615-32.23 177.923 177.923 379-379.384 32.614 32.614-411.614 411.614Z"/></svg>
--- a/img/favicon.ico
+++ b/img/favicon.ico
--- 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/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">
@ -74,7 +75,7 @@ and open the template in the editor.
            </div>
            <div class="btnPin">
                <div class="btnOk">
-                    ✓
+                    <img id="invertColor" src="img/done.svg">
                </div>
            </div>
        </div>
--- 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 = "";
        }
    });
--- 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,
+  "packages": {
+    "": {
+      "name": "es.verdnatura.worker-time-control",
+      "version": "1.0.2",
+      "license": "GPL-3.0",
      "dependencies": {
-    "fastclick": {
+        "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=="
--- 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",
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="m250.923-218.924-31.999-31.999L448.001-480 218.924-709.077l31.999-31.999L480-511.999l229.077-229.077 31.999 31.999L511.999-480l229.077 229.077-31.999 31.999L480-448.001 250.923-218.924Z"/></svg>`