Mini\u2011Habitudes Productives \u2013 Widget<\/title>\n <style>\n body { font-family: Arial, sans-serif; margin: 0; padding: 0; }\n .widget-container { max-width: 420px; margin: auto; padding: 20px; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,.08); background: #fff; }\n h2 { margin-top: 0; font-size: 1.4rem; }\n .habit { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #eee; }\n button { padding: 6px 12px; border-radius: 8px; border: none; cursor: pointer; }\n .add-btn { background: #4caf50; color: white; margin-top: 15px; width: 100%; }\n .reset-btn { background: #f44336; color: white; width: 100%; margin-top: 10px; }\n input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 8px; margin-top: 10px; }\n .progress-bar-bg { width: 100%; height: 10px; background: #eee; border-radius: 5px; margin-top: 8px; }\n .progress-bar { height: 10px; background: #4caf50; width: 0%; border-radius: 5px; transition: width 0.3s; }\n <\/style>\n<\/head>\n<body>\n <div class=\"widget-container\">\n <h2>Mini\u2011Habitudes Productives<\/h2>\n <div id=\"habit-list\"><\/div>\n\n <input id=\"new-habit\" type=\"text\" placeholder=\"Nouvelle mini\u2011habitude (ex: boire 1 verre d'eau)\" \/>\n <button class=\"add-btn\" onclick=\"addHabit()\">Ajouter<\/button>\n <button class=\"reset-btn\" onclick=\"resetAll()\">R\u00e9initialiser<\/button>\n <\/div>\n\n <script>\n const listEl = document.getElementById(\"habit-list\");\n\n function save() {\n const habits = [];\n document.querySelectorAll('.habit').forEach(h => {\n habits.push({\n name: h.querySelector('span').textContent,\n done: h.querySelector('input[type=checkbox]').checked\n });\n });\n localStorage.setItem('miniHabits', JSON.stringify(habits));\n updateProgress();\n }\n\n function load() {\n const saved = JSON.parse(localStorage.getItem('miniHabits') || '[]');\n saved.forEach(h => createHabit(h.name, h.done));\n updateProgress();\n }\n\n function createHabit(name, done=false) {\n const div = document.createElement('div');\n div.className = 'habit';\n div.innerHTML = `\n <span>${name}<\/span>\n <input type=\"checkbox\" ${done ? 'checked' : ''} onchange=\"save()\" \/>\n `;\n listEl.appendChild(div);\n }\n\n function addHabit() {\n const input = document.getElementById('new-habit');\n if (!input.value.trim()) return;\n createHabit(input.value.trim());\n input.value = '';\n save();\n }\n\n function resetAll() {\n localStorage.removeItem('miniHabits');\n listEl.innerHTML = '';\n updateProgress();\n }\n\n function updateProgress() {\n let habits = JSON.parse(localStorage.getItem('miniHabits') || '[]');\n let done = habits.filter(h => h.done).length;\n let total = habits.length || 1;\n\n let percent = Math.round(done \/ total * 100);\n\n if (!document.getElementById('progress')) {\n let bar = document.createElement('div');\n bar.className = 'progress-bar-bg';\n bar.innerHTML = '<div id=\"progress\" class=\"progress-bar\"><\/div>';\n document.querySelector('.widget-container').insertBefore(bar, listEl);\n }\n\n document.getElementById('progress').style.width = percent + '%';\n }\n\n load();\n <\/script>\n \n <style>\n .habit span { cursor: pointer; }\n .edit-input { width: 70%; padding: 4px; }\n .delete-btn { background: #e91e63; color: white; border: none; padding: 4px 8px; border-radius: 6px; cursor: pointer; margin-left: 10px; }\n .counter { font-size: 0.9rem; margin: 5px 0 15px; opacity: 0.8; }\n <\/style>\n\n <script>\n function updateCounter() {\n let habits = JSON.parse(localStorage.getItem('miniHabits') || '[]');\n let done = habits.filter(h => h.done).length;\n let total = habits.length;\n const counter = document.querySelector('.counter');\n counter.textContent = total ? `${done} \/ ${total} habitudes compl\u00e9t\u00e9es` : '';\n }\n\n function createHabit(name, done=false) {\n const div = document.createElement('div');\n div.className = 'habit';\n div.innerHTML = `\n <span onclick=\"editHabit(this)\">${name}<\/span>\n <input type=\"checkbox\" ${done ? 'checked' : ''} onchange=\"save()\" \/>\n <button class=\"delete-btn\" onclick=\"deleteHabit(this)\">\u00d7<\/button>\n `;\n listEl.appendChild(div);\n updateCounter();\n }\n\n function editHabit(el) {\n const current = el.textContent;\n el.outerHTML = `<input class='edit-input' value='${current}' onblur='finishEdit(this)' onkeydown='if(event.key==\"Enter\") this.blur()' \/>`;\n }\n\n function finishEdit(input) {\n const value = input.value.trim() || \"Nouvelle habitude\";\n input.outerHTML = `<span onclick=\\\"editHabit(this)\\\">${value}<\/span>`;\n save();\n }\n\n function deleteHabit(btn) {\n btn.parentElement.remove();\n save();\n updateCounter();\n }\n\n const oldSave = save;\n save = function(){ oldSave(); updateCounter(); };\n\n \/\/ Ajouter un compteur en haut\n if (!document.querySelector('.counter')) {\n const c = document.createElement('div');\n c.className = 'counter';\n document.querySelector('.widget-container').insertBefore(c, document.getElementById('habit-list'));\n }\n <\/script>\n\n<\/body>\n<\/html>\n\n\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n\nconst listEl = document.getElementById(\"habit-list\");\nconst counter = document.querySelector(\".counter\");\nconst progressBar = document.getElementById(\"progress\");\n\nfunction save() {\n const habits = [];\n document.querySelectorAll('.habit').forEach(h => {\n habits.push({\n name: h.querySelector('span').textContent,\n done: h.querySelector('input[type=checkbox]').checked\n });\n });\n localStorage.setItem('miniHabits', JSON.stringify(habits));\n updateUI();\n}\n\nfunction load() {\n const saved = JSON.parse(localStorage.getItem('miniHabits') || '[]');\n saved.forEach(h => createHabit(h.name, h.done));\n updateUI();\n}\n\nfunction createHabit(name, done = false) {\n const div = document.createElement(\"div\");\n div.className = \"habit\";\n div.innerHTML = `\n <span onclick=\"editHabit(this)\">${name}<\/span>\n <input type=\"checkbox\" ${done ? \"checked\" : \"\"} onchange=\"save()\" \/>\n <button class=\"delete-btn\" onclick=\"deleteHabit(this)\">\u00d7<\/button>\n `;\n listEl.appendChild(div);\n}\n\nwindow.addHabit = function () {\n const input = document.getElementById(\"new-habit\");\n if (!input.value.trim()) return;\n createHabit(input.value.trim());\n input.value = \"\";\n save();\n};\n\nwindow.resetAll = function () {\n localStorage.removeItem(\"miniHabits\");\n listEl.innerHTML = \"\";\n updateUI();\n};\n\nwindow.deleteHabit = function (btn) {\n btn.parentElement.remove();\n save();\n};\n\nwindow.editHabit = function (el) {\n const current = el.textContent;\n el.outerHTML = `<input class=\"edit-input\" value=\"${current}\" onblur=\"finishEdit(this)\" \/>`;\n};\n\nwindow.finishEdit = function (input) {\n const value = input.value.trim() || \"Nouvelle habitude\";\n input.outerHTML = `<span onclick=\"editHabit(this)\">${value}<\/span>`;\n save();\n};\n\nfunction updateUI() {\n let habits = JSON.parse(localStorage.getItem(\"miniHabits\") || \"[]\");\n let done = habits.filter(h => h.done).length;\n let total = habits.length;\n\n counter.textContent = total ? `${done} \/ ${total} habitudes compl\u00e9t\u00e9es` : \"Aucune habitude encore\";\n\n let percent = total ? Math.round(done \/ total * 100) : 0;\n progressBar.style.width = percent + \"%\";\n}\n\nload();\n});\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>Mini\u2011Habitudes Productives \u2013 Widget Mini\u2011Habitudes Productives Ajouter R\u00e9initialiser<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1965","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/pages\/1965","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/comments?post=1965"}],"version-history":[{"count":3,"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/pages\/1965\/revisions"}],"predecessor-version":[{"id":1968,"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/pages\/1965\/revisions\/1968"}],"wp:attachment":[{"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/media?parent=1965"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1965,"date":"2025-12-09T22:44:31","date_gmt":"2025-12-09T22:44:31","guid":{"rendered":"https:\/\/clubvivremieux.com\/?page_id=1965"},"modified":"2025-12-09T22:49:34","modified_gmt":"2025-12-09T22:49:34","slug":"1965-2","status":"publish","type":"page","link":"https:\/\/clubvivremieux.com\/index.php\/1965-2\/","title":{"rendered":""},"content":{"rendered":"\n\n\n\n \n \n Mini\u2011Habitudes Productives \u2013 Widget<\/title>\n <style>\n body { font-family: Arial, sans-serif; margin: 0; padding: 0; }\n .widget-container { max-width: 420px; margin: auto; padding: 20px; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,.08); background: #fff; }\n h2 { margin-top: 0; font-size: 1.4rem; }\n .habit { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #eee; }\n button { padding: 6px 12px; border-radius: 8px; border: none; cursor: pointer; }\n .add-btn { background: #4caf50; color: white; margin-top: 15px; width: 100%; }\n .reset-btn { background: #f44336; color: white; width: 100%; margin-top: 10px; }\n input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 8px; margin-top: 10px; }\n .progress-bar-bg { width: 100%; height: 10px; background: #eee; border-radius: 5px; margin-top: 8px; }\n .progress-bar { height: 10px; background: #4caf50; width: 0%; border-radius: 5px; transition: width 0.3s; }\n <\/style>\n<\/head>\n<body>\n <div class=\"widget-container\">\n <h2>Mini\u2011Habitudes Productives<\/h2>\n <div id=\"habit-list\"><\/div>\n\n <input id=\"new-habit\" type=\"text\" placeholder=\"Nouvelle mini\u2011habitude (ex: boire 1 verre d'eau)\" \/>\n <button class=\"add-btn\" onclick=\"addHabit()\">Ajouter<\/button>\n <button class=\"reset-btn\" onclick=\"resetAll()\">R\u00e9initialiser<\/button>\n <\/div>\n\n <script>\n const listEl = document.getElementById(\"habit-list\");\n\n function save() {\n const habits = [];\n document.querySelectorAll('.habit').forEach(h => {\n habits.push({\n name: h.querySelector('span').textContent,\n done: h.querySelector('input[type=checkbox]').checked\n });\n });\n localStorage.setItem('miniHabits', JSON.stringify(habits));\n updateProgress();\n }\n\n function load() {\n const saved = JSON.parse(localStorage.getItem('miniHabits') || '[]');\n saved.forEach(h => createHabit(h.name, h.done));\n updateProgress();\n }\n\n function createHabit(name, done=false) {\n const div = document.createElement('div');\n div.className = 'habit';\n div.innerHTML = `\n <span>${name}<\/span>\n <input type=\"checkbox\" ${done ? 'checked' : ''} onchange=\"save()\" \/>\n `;\n listEl.appendChild(div);\n }\n\n function addHabit() {\n const input = document.getElementById('new-habit');\n if (!input.value.trim()) return;\n createHabit(input.value.trim());\n input.value = '';\n save();\n }\n\n function resetAll() {\n localStorage.removeItem('miniHabits');\n listEl.innerHTML = '';\n updateProgress();\n }\n\n function updateProgress() {\n let habits = JSON.parse(localStorage.getItem('miniHabits') || '[]');\n let done = habits.filter(h => h.done).length;\n let total = habits.length || 1;\n\n let percent = Math.round(done \/ total * 100);\n\n if (!document.getElementById('progress')) {\n let bar = document.createElement('div');\n bar.className = 'progress-bar-bg';\n bar.innerHTML = '<div id=\"progress\" class=\"progress-bar\"><\/div>';\n document.querySelector('.widget-container').insertBefore(bar, listEl);\n }\n\n document.getElementById('progress').style.width = percent + '%';\n }\n\n load();\n <\/script>\n \n <style>\n .habit span { cursor: pointer; }\n .edit-input { width: 70%; padding: 4px; }\n .delete-btn { background: #e91e63; color: white; border: none; padding: 4px 8px; border-radius: 6px; cursor: pointer; margin-left: 10px; }\n .counter { font-size: 0.9rem; margin: 5px 0 15px; opacity: 0.8; }\n <\/style>\n\n <script>\n function updateCounter() {\n let habits = JSON.parse(localStorage.getItem('miniHabits') || '[]');\n let done = habits.filter(h => h.done).length;\n let total = habits.length;\n const counter = document.querySelector('.counter');\n counter.textContent = total ? `${done} \/ ${total} habitudes compl\u00e9t\u00e9es` : '';\n }\n\n function createHabit(name, done=false) {\n const div = document.createElement('div');\n div.className = 'habit';\n div.innerHTML = `\n <span onclick=\"editHabit(this)\">${name}<\/span>\n <input type=\"checkbox\" ${done ? 'checked' : ''} onchange=\"save()\" \/>\n <button class=\"delete-btn\" onclick=\"deleteHabit(this)\">\u00d7<\/button>\n `;\n listEl.appendChild(div);\n updateCounter();\n }\n\n function editHabit(el) {\n const current = el.textContent;\n el.outerHTML = `<input class='edit-input' value='${current}' onblur='finishEdit(this)' onkeydown='if(event.key==\"Enter\") this.blur()' \/>`;\n }\n\n function finishEdit(input) {\n const value = input.value.trim() || \"Nouvelle habitude\";\n input.outerHTML = `<span onclick=\\\"editHabit(this)\\\">${value}<\/span>`;\n save();\n }\n\n function deleteHabit(btn) {\n btn.parentElement.remove();\n save();\n updateCounter();\n }\n\n const oldSave = save;\n save = function(){ oldSave(); updateCounter(); };\n\n \/\/ Ajouter un compteur en haut\n if (!document.querySelector('.counter')) {\n const c = document.createElement('div');\n c.className = 'counter';\n document.querySelector('.widget-container').insertBefore(c, document.getElementById('habit-list'));\n }\n <\/script>\n\n<\/body>\n<\/html>\n\n\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n\nconst listEl = document.getElementById(\"habit-list\");\nconst counter = document.querySelector(\".counter\");\nconst progressBar = document.getElementById(\"progress\");\n\nfunction save() {\n const habits = [];\n document.querySelectorAll('.habit').forEach(h => {\n habits.push({\n name: h.querySelector('span').textContent,\n done: h.querySelector('input[type=checkbox]').checked\n });\n });\n localStorage.setItem('miniHabits', JSON.stringify(habits));\n updateUI();\n}\n\nfunction load() {\n const saved = JSON.parse(localStorage.getItem('miniHabits') || '[]');\n saved.forEach(h => createHabit(h.name, h.done));\n updateUI();\n}\n\nfunction createHabit(name, done = false) {\n const div = document.createElement(\"div\");\n div.className = \"habit\";\n div.innerHTML = `\n <span onclick=\"editHabit(this)\">${name}<\/span>\n <input type=\"checkbox\" ${done ? \"checked\" : \"\"} onchange=\"save()\" \/>\n <button class=\"delete-btn\" onclick=\"deleteHabit(this)\">\u00d7<\/button>\n `;\n listEl.appendChild(div);\n}\n\nwindow.addHabit = function () {\n const input = document.getElementById(\"new-habit\");\n if (!input.value.trim()) return;\n createHabit(input.value.trim());\n input.value = \"\";\n save();\n};\n\nwindow.resetAll = function () {\n localStorage.removeItem(\"miniHabits\");\n listEl.innerHTML = \"\";\n updateUI();\n};\n\nwindow.deleteHabit = function (btn) {\n btn.parentElement.remove();\n save();\n};\n\nwindow.editHabit = function (el) {\n const current = el.textContent;\n el.outerHTML = `<input class=\"edit-input\" value=\"${current}\" onblur=\"finishEdit(this)\" \/>`;\n};\n\nwindow.finishEdit = function (input) {\n const value = input.value.trim() || \"Nouvelle habitude\";\n input.outerHTML = `<span onclick=\"editHabit(this)\">${value}<\/span>`;\n save();\n};\n\nfunction updateUI() {\n let habits = JSON.parse(localStorage.getItem(\"miniHabits\") || \"[]\");\n let done = habits.filter(h => h.done).length;\n let total = habits.length;\n\n counter.textContent = total ? `${done} \/ ${total} habitudes compl\u00e9t\u00e9es` : \"Aucune habitude encore\";\n\n let percent = total ? Math.round(done \/ total * 100) : 0;\n progressBar.style.width = percent + \"%\";\n}\n\nload();\n});\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>Mini\u2011Habitudes Productives \u2013 Widget Mini\u2011Habitudes Productives Ajouter R\u00e9initialiser<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1965","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/pages\/1965","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/comments?post=1965"}],"version-history":[{"count":3,"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/pages\/1965\/revisions"}],"predecessor-version":[{"id":1968,"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/pages\/1965\/revisions\/1968"}],"wp:attachment":[{"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/media?parent=1965"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}