juandevgroup.github.io/pin-j.html at main · JuanDEvGroup/juandevgroup.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html>
<head>
  <title>Pin de 4 números</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
    }
    .pin-container {
      width: 300px;
      margin: 40px auto;
      text-align: center;
      background-color: #fff;
      padding: 20px;
      border: 1px solid #ddd;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    .pin-input {
      width: 40px;
      height: 40px;
      font-size: 24px;
      text-align: center;
      border: 1px solid #ccc;
      margin: 10px;
      border-radius: 5px;
    }
    .pin-input:focus {
      border-color: #aaa;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    }
    #submit-btn {
      width: 100%;
      height: 40px;
      font-size: 18px;
      background-color: #4CAF50;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    #submit-btn:hover {
      background-color: #3e8e41;
    }
    .error-msg {
      color: #f00;
      font-size: 16px;
      margin-top: 10px;
      display: none;
    }
    h2 {
      color: #fff;
      background-color: #4CAF50;
      padding: 10px;
      border-radius: 10px 10px 0 0;
    }
  </style>
</head>
<body>
  <div class="pin-container">
    <h2>Introduce el pin de 4 números</h2>
    <input type="password" id="pin1" class="pin-input" maxlength="1">
    <input type="password" id="pin2" class="pin-input" maxlength="1">
    <input type="password" id="pin3" class="pin-input" maxlength="1">
    <input type="password" id="pin4" class="pin-input" maxlength="1">
    <button id="submit-btn">Enviar</button>
    <div class="error-msg" id="error-msg">Pin incorrecto, inténtalo de nuevo.</div>
  </div>

  <script>
    const pin1 = document.getElementById('pin1');
    const pin2 = document.getElementById('pin2');
    const pin3 = document.getElementById('pin3');
    const pin4 = document.getElementById('pin4');
    const submitBtn = document.getElementById('submit-btn');
    const errorMSG = document.getElementById('error-msg');

    pin1.addEventListener('input', () => {
      if (pin1.value.length === 1) {
        pin2.focus();
      }
    });

    pin2.addEventListener('input', () => {
      if (pin2.value.length === 1) {
        pin3.focus();
      }
    });

    pin3.addEventListener('input', () => {
      if (pin3.value.length === 1) {
        pin4.focus();
      }
    });

    pin4.addEventListener('input', () => {
      if (pin4.value.length === 1) {
        submitBtn.focus();
      }
    });

    submitBtn.addEventListener('click', () => {
      const pinValue = `${pin1.value}${pin2.value}${pin3.value}${pin4.value}`;
      if (pinValue === '7272') {
        localStorage.setItem('id_usuario', '1');
        localStorage.setItem('nombre_usuario', 'Usuario');
        window.open('https://sites.google.com/view/p-ecosystem/ry743r4yty48tty4t777584ty4y87fhbrgfrgf4747r4y74ry4r47fjvfbjvbjkskyf7e87rf7r', '_blank');
      } else {
        errorMSG.style.display = 'block';
        setTimeout(() => {
          errorMSG.style.display = 'none';
        }, 2000);
      }
    });
  </script>
</body>
</html>