{"id":1493,"date":"2025-12-01T13:00:38","date_gmt":"2025-12-01T13:00:38","guid":{"rendered":"https:\/\/clubvivremieux.com\/?page_id=1493"},"modified":"2025-12-01T13:00:38","modified_gmt":"2025-12-01T13:00:38","slug":"stop-a-la-procrastination","status":"publish","type":"page","link":"https:\/\/clubvivremieux.com\/index.php\/stop-a-la-procrastination\/","title":{"rendered":"Stop \u00e0 la procrastination"},"content":{"rendered":"\n<!-- Tutoriel Stop \u00e0 la procrastination - Version visuelle -->\n<div id=\"procrastination-tutorial\" style=\"max-width:400px; margin:auto; text-align:center; font-family:Arial, sans-serif;\">\n  <h2 style=\"color:#4CAF50;\">Stop \u00e0 la procrastination \ud83d\ude80<\/h2>\n  <p>M\u00e9thode 5 minutes : Mets un timer 5 minutes \u2192 commence la t\u00e2che \u2192 Ton cerveau fera le reste.<\/p>\n\n  <!-- Cercle du timer -->\n  <div style=\"position:relative; width:200px; height:200px; margin:auto;\">\n    <svg id=\"circleTimer\" width=\"200\" height=\"200\">\n      <circle cx=\"100\" cy=\"100\" r=\"90\" stroke=\"#ddd\" stroke-width=\"15\" fill=\"none\"\/>\n      <circle cx=\"100\" cy=\"100\" r=\"90\" stroke=\"#4CAF50\" stroke-width=\"15\" fill=\"none\"\n              stroke-dasharray=\"565.48\" stroke-dashoffset=\"565.48\" transform=\"rotate(-90 100 100)\"\/>\n    <\/svg>\n    <div id=\"timerText\" style=\"position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);\n                font-size:32px; color:#333;\">05:00<\/div>\n  <\/div>\n\n  <div style=\"margin-top:20px;\">\n    <button id=\"startBtn\" style=\"padding:10px 20px; font-size:16px; cursor:pointer;\n            background:#4CAF50; color:white; border:none; border-radius:5px; margin-right:10px;\">Commencer<\/button>\n    <button id=\"resetBtn\" style=\"padding:10px 20px; font-size:16px; cursor:pointer;\n            background:#FF5722; color:white; border:none; border-radius:5px;\">R\u00e9initialiser<\/button>\n  <\/div>\n\n  <div id=\"message\" style=\"margin-top:20px; font-size:18px; color:#FF5722;\"><\/div>\n<\/div>\n\n<script>\nlet timerInterval;\nlet totalTime = 5 * 60; \/\/ 5 minutes\nlet timeLeft = totalTime;\n\nconst startBtn = document.getElementById('startBtn');\nconst resetBtn = document.getElementById('resetBtn');\nconst timerText = document.getElementById('timerText');\nconst messageEl = document.getElementById('message');\nconst circle = document.querySelector('#circleTimer circle:nth-child(2)');\nconst radius = circle.r.baseVal.value;\nconst circumference = 2 * Math.PI * radius;\ncircle.style.strokeDasharray = `${circumference}`;\ncircle.style.strokeDashoffset = `${circumference}`;\n\nfunction updateTimerDisplay(seconds) {\n    let min = Math.floor(seconds \/ 60);\n    let sec = seconds % 60;\n    timerText.textContent = (min<10?'0':'')+min+\":\"+(sec<10?'0':'')+sec;\n    \n    \/\/ Cercle progressif\n    let offset = circumference - (seconds \/ totalTime) * circumference;\n    circle.style.strokeDashoffset = offset;\n\n    \/\/ Couleur changeante\n    if(seconds <= totalTime*0.2) {\n        circle.style.stroke = \"#FF5722\"; \/\/ rouge si <20%\n    } else if(seconds <= totalTime*0.5) {\n        circle.style.stroke = \"#FFC107\"; \/\/ jaune si <50%\n    } else {\n        circle.style.stroke = \"#4CAF50\"; \/\/ vert\n    }\n}\n\nfunction startTimer() {\n    clearInterval(timerInterval);\n    messageEl.textContent = '';\n    timeLeft = totalTime;\n    updateTimerDisplay(timeLeft);\n\n    timerInterval = setInterval(() => {\n        timeLeft--;\n        updateTimerDisplay(timeLeft);\n        if(timeLeft <= 0) {\n            clearInterval(timerInterval);\n            messageEl.textContent = \"\u23f0 C'est termin\u00e9 ! Continuez la t\u00e2che ou prenez un moment de pause.\";\n        }\n    },1000);\n}\n\nfunction resetTimer() {\n    clearInterval(timerInterval);\n    timeLeft = totalTime;\n    updateTimerDisplay(timeLeft);\n    messageEl.textContent = '';\n}\n\nstartBtn.addEventListener('click', startTimer);\nresetBtn.addEventListener('click', resetTimer);\n\n\/\/ Initial display\nupdateTimerDisplay(timeLeft);\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>Stop \u00e0 la procrastination \ud83d\ude80 M\u00e9thode 5 minutes : Mets un timer 5 minutes \u2192 commence la t\u00e2che \u2192 Ton cerveau fera le reste. 05:00 Commencer 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-1493","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/pages\/1493","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=1493"}],"version-history":[{"count":1,"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/pages\/1493\/revisions"}],"predecessor-version":[{"id":1494,"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/pages\/1493\/revisions\/1494"}],"wp:attachment":[{"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/media?parent=1493"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}