merge branch gh-pages into branch main

Merge gh-pages into default branch == main

Author: maelgruand1

index.html

@@ -14,7 +14,7 @@ <h1 class="title">TaskManager</h1>
     <div class="navbar">
         <button class="left">Acceuil</button>
         <button class="left">Tasks</button>
-        <a id="profile"><img src="./icon/profile.png" alt="Profile"></a>
+        <a id="profile" onclick="alert('Indisponible pour le moment')"><img src="profile.png" alt="Profile"></a>
     </div>
     <div id="login">
         <input type="text" id="name" placeholder="name">

index.js

@@ -9,11 +9,9 @@ const tasksDiv = document.getElementById('tasks');
 const seeKanbanBtn = document.getElementById('seeKanban');
 const seeTableBtn = document.getElementById('seeTable');
 
-// Objet pour stocker les informations utilisateur
-const user = {
-    name: '',
-    email: ''
-};
+// Vérification et chargement des données depuis localStorage
+let user = JSON.parse(localStorage.getItem('user')) || { name: '', email: '' };
+let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
 
 // Fonction de validation des informations utilisateur
 function validateUser() {
@@ -29,6 +27,9 @@ function validateUser() {
     user.name = name;
     user.email = email;
 
+    // Sauvegarder dans localStorage
+    localStorage.setItem('user', JSON.stringify(user));
+
     message.innerText = `Connexion réussie. Bienvenue, ${user.name} !`;
     message.style.color = "green";
 
@@ -52,10 +53,7 @@ function displayProfile() {
     addTaskBtn.addEventListener('click', addTask);
 }
 
-// Tableau pour stocker les tâches (vide par défaut)
-const tasks = [];
-
-// Fonction pour afficher les tâches en vue Kanban
+// Fonction pour afficher les tâches en vue Kanban ou Table
 function displayTasks(view) {
     tasksDiv.innerHTML = ""; // Réinitialisation des tâches
 
@@ -112,7 +110,7 @@ function displayTasks(view) {
                 deleteTask(index);
             });
         });
-        
+
         // Ajout des événements de modification pour chaque tâche dans le tableau
         const modifyBtns = document.querySelectorAll('.modify');
         modifyBtns.forEach((btn) => {
@@ -132,6 +130,10 @@ function addTask() {
     if (newTask !== '') {
         tasks.push(newTask);
         taskInput.value = '';
+
+        // Sauvegarder dans localStorage
+        localStorage.setItem('tasks', JSON.stringify(tasks));
+
         displayTasks("kanban"); // On affiche par défaut en Kanban
     } else {
         alert("Veuillez entrer une tâche valide.");
@@ -141,6 +143,10 @@ function addTask() {
 // Fonction pour supprimer une tâche
 function deleteTask(index) {
     tasks.splice(index, 1);
+
+    // Sauvegarder dans localStorage
+    localStorage.setItem('tasks', JSON.stringify(tasks));
+
     displayTasks("kanban");
 }
 
@@ -150,6 +156,10 @@ function modifyTask(index) {
 
     if (newTask !== null && newTask.trim() !== "") {
         tasks[index] = newTask.trim();
+
+        // Sauvegarder dans localStorage
+        localStorage.setItem('tasks', JSON.stringify(tasks));
+
         displayTasks("kanban");  // Mettre à jour la vue Kanban
         displayTasks("table");   // Mettre à jour la vue Table
     }
@@ -159,3 +169,13 @@ function modifyTask(index) {
 seeKanbanBtn.addEventListener("click", () => displayTasks("kanban"));
 seeTableBtn.addEventListener("click", () => displayTasks("table"));
 validateBtn.addEventListener("click", validateUser);
+
+// Charger les données initiales si disponibles dans localStorage
+if (user.name && user.email) {
+    message.innerText = `Connexion réussie. Bienvenue, ${user.name} !`;
+    message.style.color = "green";
+    displayProfile();
+} else {
+    message.innerText = "Veuillez vous connecter.";
+    message.style.color = "red";
+}

styles.css

@@ -53,7 +53,8 @@ body {
 
 /* Formulaire de login */
 #login {
-  width: 300px;
+  width: 90%;
+  max-width: 400px;
   margin: 20px auto;
   padding: 20px;
   background-color: #fff;
@@ -100,7 +101,8 @@ body {
 
 /* Section profil utilisateur */
 #profile-sect {
-  width: 300px;
+  width: 90%;
+  max-width: 400px;
   margin: 20px auto;
   padding: 20px;
   background-color: #fff;
@@ -112,7 +114,8 @@ body {
 
 /* Affichage des tâches */
 #tasks {
-  width: 60%;
+  width: 90%;
+  max-width: 800px;
   margin: 20px auto;
   padding: 20px;
   background-color: #fff;
@@ -136,7 +139,8 @@ body {
   padding: 15px;
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  width: 200px;
+  width: 100%;
+  max-width: 250px;
   text-align: center;
   margin-bottom: 10px;
   transition: transform 0.3s;
@@ -146,9 +150,59 @@ body {
   transform: translateY(-5px);
 }
 
+.task-card button {
+  background-color: #f44336;
+  color: white;
+  border: none;
+  padding: 5px 10px;
+  margin-top: 10px;
+  cursor: pointer;
+  border-radius: 5px;
+  transition: background-color 0.3s;
+}
+
+.task-card button:hover {
+  background-color: #e53935;
+}
+
+/* Vue Table */
+#tasks table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 20px;
+}
+
+#tasks table th,
+#tasks table td {
+  padding: 10px;
+  text-align: left;
+  border-bottom: 1px solid #ddd;
+}
+
+#tasks table th {
+  background-color: #4caf50;
+  color: white;
+}
+
+#tasks table td button {
+  background-color: #f44336;
+  color: white;
+  border: none;
+  padding: 5px 10px;
+  margin-right: 5px;
+  cursor: pointer;
+  border-radius: 5px;
+  transition: background-color 0.3s;
+}
+
+#tasks table td button:hover {
+  background-color: #e53935;
+}
+
 /* Vue options */
 #vue {
-  width: 60%;
+  width: 90%;
+  max-width: 800px;
   margin: 20px auto;
   padding: 20px;
   background-color: #fff;
@@ -173,3 +227,84 @@ body {
 #vue button:hover {
   background-color: #45a049;
 }
+
+/* Section Ajouter Tâche */
+#profile-sect input[type="text"] {
+  width: 75%;
+  padding: 10px;
+  margin-top: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  outline: none;
+}
+
+#profile-sect button {
+  width: 20%;
+  padding: 10px;
+  background-color: #4caf50;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  margin-top: 10px;
+  font-weight: bold;
+}
+
+#profile-sect button:hover {
+  background-color: #45a049;
+}
+
+/* Responsive Design - Mobile First */
+@media (max-width: 768px) {
+  .navbar {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .navbar button {
+    width: 100%;
+    margin: 5px 0;
+  }
+
+  #profile-sect input[type="text"],
+  #profile-sect button {
+    width: 100%;
+  }
+
+  #tasks {
+    width: 100%;
+  }
+
+  .task-card {
+    width: 100%;
+    max-width: 100%;
+  }
+
+  #vue {
+    width: 100%;
+  }
+}
+
+/* Responsive Design - Tablettes et au-delà */
+@media (min-width: 769px) {
+  .navbar {
+    flex-direction: row;
+  }
+
+  .task-card {
+    width: 45%;
+    max-width: 250px;
+  }
+
+  #tasks {
+    width: 60%;
+  }
+
+  #profile-sect {
+    width: 50%;
+  }
+
+  #vue {
+    width: 60%;
+  }
+}