From bac77cffddebae841b52439b80f415a002c3a238 Mon Sep 17 00:00:00 2001
From: WhyKorp <117651228+whykorp@users.noreply.github.com>
Date: Mon, 11 Mar 2024 19:32:46 +0100
Subject: [PATCH] add another check button

---
 ruty/styles/styletodo.css | 42 ++++++++++++++++++++++++++++++++++++++-
 ruty/todo.php             |  2 +-
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/ruty/styles/styletodo.css b/ruty/styles/styletodo.css
index c915dfe..5bab4e8 100644
--- a/ruty/styles/styletodo.css
+++ b/ruty/styles/styletodo.css
@@ -99,4 +99,44 @@ li.nav2 {
 li.nav2:hover {
     background-color: #b9b9b9;
     transition: 0.3s;
-}
\ No newline at end of file
+}
+
+.checkbox-wrapper input[type="checkbox"] {
+    display: none;
+  }
+  
+  .checkbox-wrapper .terms-label {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+  }
+  
+  .checkbox-wrapper .terms-label .label-text {
+    margin-left: 10px;
+  }
+  
+  .checkbox-wrapper .checkbox-svg {
+    width: 30px;
+    height: 30px;
+  }
+  
+  .checkbox-wrapper .checkbox-box {
+    fill: rgba(207, 205, 205, 0.425);
+    stroke: #8c00ff;
+    stroke-dasharray: 800;
+    stroke-dashoffset: 800;
+    transition: stroke-dashoffset 0.6s ease-in;
+  }
+  
+  .checkbox-wrapper .checkbox-tick {
+    stroke: #8c00ff;
+    stroke-dasharray: 172;
+    stroke-dashoffset: 172;
+    transition: stroke-dashoffset 0.6s ease-in;
+  }
+  
+  .checkbox-wrapper input[type="checkbox"]:checked + .terms-label .checkbox-box,
+    .checkbox-wrapper input[type="checkbox"]:checked + .terms-label .checkbox-tick {
+    stroke-dashoffset: 0;
+  }
+  
\ No newline at end of file
diff --git a/ruty/todo.php b/ruty/todo.php
index 6eafa13..133e0e7 100644
--- a/ruty/todo.php
+++ b/ruty/todo.php
@@ -19,7 +19,7 @@
                 $taskName = $row["task_name"];
                 $completed = $row["completed"] ? "checked" : "";
 
-                echo "<li><input type='checkbox' $completed onchange='updateTask($taskId, this.checked)'> $taskName</li>";
+                echo "<li><div class='checkbox-wrapper'><input id='terms-checkbox-37' name='checkbox' type='checkbox'><label class='terms-label' for='terms-checkbox-37'><svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 200 200' class='checkbox-svg'><mask fill='white' id='path-1-inside-1_476_5-37'><rect height='200' width='200'></rect></mask><rect mask='url(#path-1-inside-1_476_5-37)' stroke-width='40' class='checkbox-box' height='200' width='200'></rect><path stroke-width='15' d='M52 111.018L76.9867 136L149 64' class='checkbox-tick'></path></svg>span class='label-text'>$taskName</span></label></div></li>";
             }
         } else {
             echo "Aucune tâche trouvée.";