tasks-master/index.html at main · jemgdevp/tasks-master · 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
119
120
121
122
123
124
125
126
127
<!doctype html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TaskMaster</title>
  </head>
  <body>
    <script type="module" src="/src/main.js"></script>
    <header class="bg-green-100 p-6 flex items-center justify-center shadow-md">
      <h1 class="text-3xl font-extrabold">TaskMaster</h1>
    </header>

    <h1 class="text-center text-xl text-gray-700 my-6">Gestión de Tareas</h1>

    <div id="contenedor-todo" class="container mx-auto px-4 flex flex-col md:flex-row gap-8 items-start">
      <aside id="contenedor-menus" class="bg-teal-500 p-6 rounded-lg text-white w-full md:w-64">
        <p class="font-semibold mb-4">Opciones</p>
        <div id="contenedor-opciones" class="flex flex-col gap-4">
          <div class="flex flex-col gap-2">
            <button id="btn-añadir" class="btn btn-primary w-full flex items-center justify-center gap-2">
              <img src="/src/assets/agregar.png" alt="" class="w-5 h-5" /> Añadir
            </button>
            <button id="btn-buscar" class="btn btn-secondary w-full flex items-center justify-center gap-2">
              <img src="/src/assets/buscar.png" alt="" class="w-5 h-5" /> Buscar
            </button>
          </div>

          <div class="flex flex-col gap-2">
            <button id="btn-mostrar" class="btn btn-accent w-full flex items-center justify-center gap-2">
              <img src="/src/assets/mostrar.png" alt="" class="w-5 h-5" /> Mostrar
            </button>
            <button id="btn-cantidad" class="btn btn-ghost w-full flex items-center justify-center gap-2">
              <img src="/src/assets/cantidad.png" alt="" class="w-5 h-5" /> Cantidad
            </button>
          </div>
        </div>
      </aside>

      <div id="contenedor-formulario" class="hidden bg-white p-6 rounded-lg shadow w-full md:w-2/3">
        <div id="campo-tarea-registrar" class="flex gap-4 items-center mb-4">
          <label for="label-nombre-tarea" class="w-40">Nombre Tarea:</label>
          <input id="label-nombre-tarea" type="text" placeholder="Ingrese la tarea que desea registrar" class="input input-bordered w-full" />
        </div>
        <div id="campo-tarea-registrar" class="flex gap-4 items-center mb-4">
          <label for="label-fecha-limite" class="w-40">Fecha Límite:</label>
          <input type="date" name="" id="label-fecha-limite" class="input input-bordered" />
        </div>
        <div id="campo-tarea-registrar" class="flex gap-4 items-center mb-4">
          <label for="label-prioridad" class="w-40">Prioridad:</label>
          <select name="" id="label-prioridad" class="select select-bordered">
            <option value="Prioridad Alta">Prioridad Alta</option>
            <option value="Prioridad Media">Prioridad Media</option>
            <option value="Prioridad Baja">Prioridad Baja</option>
          </select>
        </div>
        <div id="campo-tarea-registrar" class="flex gap-4 justify-center">
          <button id="btn-accion-cerrar" class="btn btn-outline">Cerrar</button>
          <button id="btn-accion-añadir" class="btn btn-primary">Añadir</button>
        </div>
      </div>

      <div id="contenedor-enlistar" class="hidden bg-white p-6 rounded-lg shadow w-full md:w-2/3">
        <div class="space-y-4">
          <div class="flex justify-between font-semibold text-gray-700">
            <h4>#</h4>
            <h4>Nombre</h4>
            <h4>Fecha Límite</h4>
            <h4>Prioridad</h4>
          </div>

          <div class="bg-gray-100 rounded p-4">
            <div id="enlistar-elementos" class="space-y-2"></div>
          </div>

          <div class="flex justify-center">
            <button id="btn-salir-enlistar" class="btn">Cerrar</button>
          </div>
        </div>
      </div>

      <div id="contenedor-buscar" class="hidden bg-white p-6 rounded-lg shadow w-full md:w-2/3">
        <div class="space-y-4">
          <div class="flex items-center gap-4 buscar-campo">
            <label for="label-prioridad-buscar" class="font-medium">Seleccione una prioridad:</label>
            <select id="label-prioridad-buscar" class="select select-bordered hidden">
              <option value="Prioridad Alta">Prioridad Alta</option>
              <option value="Prioridad Media">Prioridad Media</option>
              <option value="Prioridad Baja">Prioridad Baja</option>
            </select>
          </div>

          <div class="flex justify-between font-semibold text-gray-700">
            <h4>#</h4>
            <h4>Nombre</h4>
            <h4>Fecha Límite</h4>
            <h4>Prioridad</h4>
          </div>

          <div class="bg-gray-100 rounded p-4">
            <div id="buscar-elementos" class="space-y-2"></div>
          </div>

          <div class="flex justify-center">
            <button id="btn-salir-buscar" class="btn">Cerrar</button>
          </div>
        </div>
      </div>

      <div id="contenedor-cantidad" class="hidden bg-white p-6 rounded-lg shadow w-full md:w-2/3">
        <div class="cantidad-submenu space-y-4 text-center">
          <div class="cantidad-title text-gray-700">
            <h2>La cantidad de tareas que hay registradas son:</h2>
          </div>

          <div class="cantidad-subtitle text-2xl font-bold">
            <h2 id="cantidad-tareas" class="cantidad-tareas"></h2>
          </div>

          <div class="flex justify-center">
            <button id="btn-salir-cantidad" class="btn">Cerrar</button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>