TaskMaster/FormAdd.html at main · Pelpav/TaskMaster · 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
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="fr">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>TaskMaster</title>
  <link rel="stylesheet" href="CSS/style.css" />
  <link href="CSS/navbar.css" rel="stylesheet" />

  <link rel="stylesheet" href="libs/bootstrap-5.0.2/dist/css/bootstrap.min.css" />
  <script src="libs/jquery-3.6.4.min.js"></script>
  <!-- <script src="js/main.js"></script> -->
</head>

<body style="background-color: #222327">
  <div class="container">
    <h1 style="display: inline">TaskMaster</h1>

    <div id="no-tasks" class="text-center">
      <p>Vous n'avez pas encore ajouté de tâches.</p>
      <button id="add-task-button" class="btn btn-primary">+</button>
    </div>

    <div id="tasks" style="display: none">
      <table>
        <td>
          <button id="btnAddTask" class="btn btn-primary">+</button>
        </td>
        <td>
          <span class="btn btn-primary"><ion-icon name="trash-outline"></ion-icon></span>
        </td>
      </table>
    </div>

    <div id="task-form" style="backdrop-filter: blur(10px); position: fixed; top: 0; left:0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 1;">
      <form>
        <div class="form-group">
          <label for="task-title">Titre de la tâche</label>
          <input type="text" class="form-control" id="task-title" required />
        </div>

        <div class="form-group mt-3">
          <label for="task-description">Description</label>
          <textarea class="form-control" id="task-description" rows="3" required></textarea>
        </div>

        <div class="form-group mt-3">
          <label for="task-due-date">Date d'échéance</label>
          <input type="date" class="form-control" id="task-due-date" required />
        </div>

        <div class="form-group mt-3">
          <label for="task-priority">Priorité</label>
          <select class="form-control" id="task-priority" required>
            <option value="1">Haute</option>
            <option value="2">Moyenne</option>
            <option value="3" selected>Basse</option>
          </select>
        </div>

        <div class="d-flex justify-content-between gap-3 mt-3">
          <button id="btnAddTaskList" class="btn btn-primary w-100">
            Ajouter
          </button>
          <button id="btnCancelAddTask" type="reset" class="btn btn-danger w-100">
            Annuler
          </button>
        </div>
      </form>
    </div>

    <div style="float: left" id="check"></div>

    <div id="result">
      <div id="task-list" style="overflow-y: scroll; height: 65vh;">
        <!-- La liste des tâches sera générée dynamiquement ici -->

      </div>
    </div>
  </div>

  <footer id="footer" class="fixed-bottom bg-light" style="z-index: 9999">
    <div class="container">
      <div class="row">
        <div class="col-12 col-md-4">
          <div class="d-flex justify-content-center">
            <div class="navbar">
              <ul>
                <li class="list active">
                  <a href="#">
                    <span class="icon"><ion-icon name="home-outline"></ion-icon></span>
                    <span class="text" style="text-align: center">Accueil</span>
                  </a>
                </li>

                <li class="list">
                  <a href="#">
                    <span class="icon"><ion-icon name="person-outline"></ion-icon></span>
                    <span class="text" style="text-align: center">À Propos</span>
                  </a>
                </li>

                <li class="list">
                  <a href="#">
                    <span class="icon"><ion-icon name="reader-outline"></ion-icon></span>
                    <span class="text" style="text-align: center">Tâches</span>
                  </a>
                </li>
                <div class="indicator"></div>
              </ul>
            </div>
          </div>
          <script>
            const list = document.querySelectorAll(".list");
            function activeLink() {
              list.forEach((item) => item.classList.remove("active"));
              this.classList.add("active");
            }
            list.forEach((item) =>
              item.addEventListener("click", activeLink)
            );
          </script>

          <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
          <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
          <script src="js/formAdd.js"></script>
        </div>
      </div>
    </div>
  </footer>
</body>

</html>