diff --git a/autopost/public/autopost.js b/autopost/public/autopost.js
index 52b3d7e..53125fb 100644
--- a/autopost/public/autopost.js
+++ b/autopost/public/autopost.js
@@ -65,7 +65,7 @@ function updateTable(rows) {
var tr =
'' +
'| ' +
- '' +
+ '' +
' | ' +
'' + esc(row.nom) + ' | ' +
'' + statusText + ' | ' +
diff --git a/autopost/public/checkboxes.css b/autopost/public/checkboxes.css
new file mode 100644
index 0000000..ec884ae
--- /dev/null
+++ b/autopost/public/checkboxes.css
@@ -0,0 +1,141 @@
+/* Checkboxes personnalisées modernes */
+
+/* Style de base pour toutes les checkboxes */
+.checkbox-custom {
+ appearance: none;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ width: 18px;
+ height: 18px;
+ border: 2px solid #4b5563;
+ border-radius: 4px;
+ background: #1f2937;
+ position: relative;
+ cursor: pointer;
+ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+ outline: none;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+}
+
+/* État hover */
+.checkbox-custom:hover {
+ border-color: #6b7280;
+ background: #374151;
+ transform: scale(1.05);
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+/* État focus */
+.checkbox-custom:focus {
+ border-color: #3b82f6;
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+}
+
+/* État checked */
+.checkbox-custom:checked {
+ background: linear-gradient(135deg, #3b82f6, #1d4ed8);
+ border-color: #3b82f6;
+ transform: scale(1.05);
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+}
+
+/* Icône de validation */
+.checkbox-custom:checked::after {
+ content: '';
+ position: absolute;
+ width: 10px;
+ height: 6px;
+ border: 2px solid white;
+ border-top: none;
+ border-right: none;
+ transform: rotate(-45deg);
+ top: 3px;
+ left: 3px;
+ animation: checkmark 0.2s ease-in-out;
+}
+
+/* Animation de la coche */
+@keyframes checkmark {
+ 0% {
+ transform: rotate(-45deg) scale(0);
+ opacity: 0;
+ }
+ 50% {
+ transform: rotate(-45deg) scale(1.2);
+ opacity: 1;
+ }
+ 100% {
+ transform: rotate(-45deg) scale(1);
+ opacity: 1;
+ }
+}
+
+/* État indéterminé pour "Tout sélectionner" */
+.checkbox-custom:indeterminate {
+ background: linear-gradient(135deg, #f59e0b, #d97706);
+ border-color: #f59e0b;
+ transform: scale(1.05);
+ box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
+}
+
+.checkbox-custom:indeterminate::after {
+ content: '';
+ position: absolute;
+ width: 8px;
+ height: 2px;
+ background: white;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ border-radius: 1px;
+ animation: indeterminate 0.2s ease-in-out;
+}
+
+/* Animation de l'état indéterminé */
+@keyframes indeterminate {
+ 0% {
+ width: 0;
+ opacity: 0;
+ }
+ 100% {
+ width: 8px;
+ opacity: 1;
+ }
+}
+
+/* Effet de selection pour les lignes avec checkbox cochée */
+tr:has(.checkbox-custom:checked) {
+ background-color: rgba(59, 130, 246, 0.05) !important;
+ border-left: 3px solid #3b82f6;
+}
+
+/* Animation d'apparition lors du chargement */
+.checkbox-custom {
+ animation: fadeIn 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: scale(0.8);
+ }
+ to {
+ opacity: 1;
+ transform: scale(1);
+ }
+}
+
+/* Amélioration pour les écrans tactiles */
+@media (hover: none) {
+ .checkbox-custom:hover {
+ transform: none;
+ box-shadow: none;
+ }
+
+ .checkbox-custom:active {
+ transform: scale(0.95);
+ }
+}
\ No newline at end of file
diff --git a/autopost/server.js b/autopost/server.js
index ffbeb84..d5d05c1 100644
--- a/autopost/server.js
+++ b/autopost/server.js
@@ -92,7 +92,7 @@ function renderRow(row) {
return `
|
-
+
|
${esc(row.nom)} |
${statusText} |
diff --git a/autopost/views/autopost.html b/autopost/views/autopost.html
index 3f01f3d..be35724 100644
--- a/autopost/views/autopost.html
+++ b/autopost/views/autopost.html
@@ -5,6 +5,7 @@
{{TITLE}}
+
@@ -135,7 +136,7 @@
|
-
+
|
Name |
Status |