|
9
|
1 <!DOCTYPE html>
|
|
|
2 <html lang="es">
|
|
|
3
|
|
|
4 <head>
|
|
|
5 <meta charset="UTF-8">
|
|
|
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
7 <title>Redirección con Gin</title>
|
|
|
8 <style>
|
|
|
9 body {
|
|
|
10 font-family: Arial, sans-serif;
|
|
|
11 background-color: #f0f0f0;
|
|
|
12 display: flex;
|
|
|
13 justify-content: center;
|
|
|
14 align-items: center;
|
|
|
15 height: 100vh;
|
|
|
16 margin: 0;
|
|
|
17 }
|
|
|
18
|
|
|
19 .container {
|
|
|
20 text-align: center;
|
|
|
21 background-color: white;
|
|
|
22 padding: 20px;
|
|
|
23 border-radius: 8px;
|
|
|
24 box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
|
|
25 }
|
|
|
26
|
|
|
27 h1 {
|
|
|
28 margin-bottom: 20px;
|
|
|
29 }
|
|
|
30
|
|
|
31 .btn {
|
|
|
32 background-color: #4CAF50;
|
|
|
33 color: white;
|
|
|
34 padding: 10px 20px;
|
|
|
35 margin: 10px;
|
|
|
36 border: none;
|
|
|
37 border-radius: 5px;
|
|
|
38 cursor: pointer;
|
|
|
39 font-size: 16px;
|
|
|
40 transition: background-color 0.3s ease;
|
|
|
41 }
|
|
|
42
|
|
|
43 .btn:hover {
|
|
|
44 background-color: #45a049;
|
|
|
45 }
|
|
|
46
|
|
|
47 #tiempo-mostrar {
|
|
|
48 font-size: 20px;
|
|
|
49 margin-top: 10px;
|
|
|
50 }
|
|
|
51 </style>
|
|
|
52 </head>
|
|
|
53
|
|
|
54 <body>
|
|
|
55 <div class="container">
|
|
|
56 <h1>Minutos del timer</h1>
|
|
|
57 <div>
|
|
|
58 <button id="decrementar-btn" class="btn">-</button>
|
|
|
59 <span id="tiempo-mostrar">0</span>
|
|
|
60 <button id="incrementar-btn" class="btn">+</button>
|
|
|
61 </div>
|
|
|
62 <br>
|
|
|
63 <form action="/timer" method="POST" id="form-timer">
|
|
|
64 <input type="hidden" id="tiempo-oculto" name="time" value="0">
|
|
|
65 <br>
|
|
|
66 <button type="button" id="btn-auth" class="btn">Ir a Auth</button>
|
|
|
67 <button type="submit" class="btn">Ir a Connect</button>
|
|
|
68 </form>
|
|
|
69 </div>
|
|
|
70
|
|
|
71 <script>
|
|
|
72 const disminuirBtn = document.getElementById('decrementar-btn');
|
|
|
73 const aumentarBtn = document.getElementById('incrementar-btn');
|
|
|
74 const mostrarTiempo = document.getElementById('tiempo-mostrar');
|
|
|
75 const tiempoInput = document.getElementById('tiempo-oculto');
|
|
|
76 const formTimer = document.getElementById('form-timer');
|
|
|
77 const btnAuth = document.getElementById('btn-auth');
|
|
|
78
|
|
|
79 let tiempo = 0;
|
|
|
80
|
|
|
81 disminuirBtn.addEventListener('click', function () {
|
|
|
82 if (tiempo > 0) {
|
|
|
83 tiempo--;
|
|
|
84 mostrarTiempo.textContent = tiempo;
|
|
|
85 tiempoInput.value = tiempo;
|
|
|
86 }
|
|
|
87 });
|
|
|
88
|
|
|
89 aumentarBtn.addEventListener('click', function () {
|
|
|
90 tiempo++;
|
|
|
91 mostrarTiempo.textContent = tiempo;
|
|
|
92 tiempoInput.value = tiempo;
|
|
|
93 });
|
|
|
94
|
|
|
95 formTimer.addEventListener('submit', function () {
|
|
|
96 tiempoInput.value = tiempo * 60;
|
|
|
97 });
|
|
|
98
|
|
|
99 btnAuth.addEventListener('click', function () {
|
|
|
100 window.location.href = '/auth';
|
|
|
101 });
|
|
|
102 </script>
|
|
|
103
|
|
|
104 </body>
|
|
|
105
|
|
|
106 </html> |
