-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
74 lines (71 loc) · 3.81 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Calculadora de pagos</title>
</head>
<body>
<div>
<div class="titulo">
<h1>Visualizador de fechas de corte y pago en tarjetas de crédito</h1>
</div>
</div>
<div class="inputs">
<label for="fechaPago">Fecha de pago:</label>
<input type="number" id="fechaPago" />
<label for="fechaCorte">Fecha de corte:</label>
<input type="number" id="fechaCorte" />
<label for="mesesTotales">Desplazamiento meses: </label>
<input type="number" id="mesesTotales" value="1" max="6" style="width: 5rem; flex: 1" />
<button onclick="actualizarCalendario()">Confirmar</button>
</div>
<div class="tutorial">
<details>
<summary style="background-color: yellow; padding: 10px; width: 200px; margin: 0 auto; border-radius: 10px; margin-top: 10px; margin-bottom: 10px">
ℹ️ ¿Cómo usar? ℹ️
</summary>
<div style="background-color: #efffeb; padding: 10px; border-radius: 10px; border: 1px solid #999">
<h4>Instrucciones</h4>
<ol style="text-align: left; display: flex; flex-direction: column; gap: 10px">
<li>Ingrese su fecha de corte y pago</li>
<li>El desplazamiento de meses se refiere a cuántos meses hacia atrás y hacia adelante quiere ver a partir del mes actual.</li>
</ol>
<h4>¿Qué significan los colores en los días?</h4>
<ul style="text-align: left">
<p><span style="background-color: #3a9d23; padding: 3px 5px; color: white; border-radius: 5px">Verde:</span> Días de corte</p>
<p><span style="background-color: #ff0000; padding: 3px 5px; color: white; border-radius: 5px">Rojo:</span> Días de pago</p>
</ul>
<h4>¿Qué significan los colores en los bordes?</h4>
<ul style="text-align: left; display: flex; flex-direction: column; gap: 10px">
<li>Los colores en los bordes indican que días están en un periodo, ya sea de fecha de corte o de fecha de pago</li>
<li>Los colores cambian para distinguir cuando hay un cambio de periodo, en el momento que hay una fecha de corte o de pago.</li>
<div style="display: flex; flex-direction: row; flex-wrap: nowrap; gap: 5px; align-items: center">
<div style="background-color: #3a9d23; padding: 3px; width: 60px; height: 10px; color: white; border-radius: 5px"></div>
→
<div style="background-color: #b7c000; padding: 3px; width: 60px; height: 10px; color: white; border-radius: 5px"></div>
</div>
<div style="display: flex; flex-direction: row; flex-wrap: nowrap; gap: 5px; align-items: center">
<div style="background-color: #ff0000; padding: 3px; width: 60px; height: 10px; color: white; border-radius: 5px"></div>
→
<div style="background-color: orange; padding: 3px; width: 60px; height: 10px; color: white; border-radius: 5px"></div>
</div>
</ul>
</div>
</details>
</div>
<div class="calendar-container"></div>
<footer style="position: fixed; bottom: 0; align-items: center; left: 0; width: 100%; background-color: #eee; color: black; padding: 10px; text-align: center">
Cristopher Paiz -
<script>
document.write(new Date().getFullYear());
</script>
| Proyecto:
<a href="https://github.com/CristopherPaiz/pago-corte-tarjetas" style="color: black"
><img src="https://cdn.svgporn.com/logos/github-icon.svg" alt="GitHub" style="width: 20px; vertical-align: text-bottom"
/></a>
</footer>
<script src="script.js"></script>
</body>
</html>