.pomodoro-general { margin: auto; font-family: 'Arial', sans-serif; background-color: #181818; color: #fff; display: flex; justify-content: space-evenly; align-items: center; border: 1px solid black; position: fixed; flex-direction: column; border-top-left-radius:1rem; border-top-right-radius:1rem; width:100vw !important; height: 190px; left:0px; bottom:0px !important; } .conseil { font-size:14px; width:80%; margin:auto; padding-top:10px; } .playerButton { padding-top:10px; } .pomodoro-container { font-family: 'Arial', sans-serif; color: #fff; display: flex; justify-content: center; align-items: center; display: flex; flex-direction: column; border-top-left-radius:1rem; border-top-right-radius:1rem; width:100vw !important; bottom:0px !important; } .pomodoro-item { width: 100%; text-align: center } .label { font-size: 0.7rem; text-transform: uppercase; color: #ffd800; } .row-pomodoro { text-align: center; display: flex; justify-content: center; align-items: center; } .buttonRow { display: flex; justify-content: center; column-gap: 40px; } .lengthTime { display: inline-block; padding: 0 20px 0 20px; font-size: 35px; } .btn-updown { font-size: 45px; width: 80px; border: none; cursor: pointer; color: #fff; background: transparent !important; } .btn-controller { border: none; cursor: pointer; font-size: 1.5rem; background-color: transparent; color: #fff; } /* Pomodoro item row */ #timeLeft { font-size: 25px; font-weight: 700; } // Tableau de vos phrases var phrases = [ "Chaque rep compte. Tu es plus proche de ton objectif à chaque effort.", "La douleur d'aujourd'hui est la force de demain. Reste fort.", "N'oublie pas de respirer profondément entre les séries pour maximiser la récupération.", "L'hydratation est la clé. N'oublie pas de boire de l'eau pendant ton entraînement.", "Visualise ton succès. Chaque levée te rapproche de ton but.", "Concentration et forme sont tes meilleurs alliés. Garde le focus.", "Petits progrès = Grands changements. Célèbre chaque victoire.", "La récupération est aussi importante que l'entraînement. Prends soin de toi.", "La constance est le secret. Sois régulier dans tes entraînements.", "Chaque jour est une nouvelle chance de devenir plus fort.", "La perfection n'est pas atteignable, mais la poursuivre permet d'attraper l'excellence.", "Pense à ta posture. Une bonne forme minimise les risques de blessures.", "La motivation vient et part, mais l'habitude reste. Crée une routine.", "L'intensité bat la durée. Concentre-toi sur la qualité, pas seulement la quantité.", "Le sommeil est essentiel à la récupération. Assure-toi de bien dormir.", "Alimente ton corps avec les bons nutriments pour mieux récupérer et grandir.", "Chaque kilo soulevé te rapproche de ton objectif. Continue à pousser.", "Les jours difficiles sont ceux qui renforcent le plus. Ne lâche pas.", "Le dépassement de soi commence où ta zone de confort se termine.", "La progression n'est pas linéaire. Sois patient et persévérant.", "Ton plus grand adversaire est toi-même. Surpasse-toi.", "Garde une attitude positive, même lors des jours difficiles.", "L'échec fait partie du processus. Apprends et avance.", "Fais de la récupération une priorité. Stretching et repos sont clés.", "Sois attentif à ta nutrition pour soutenir tes efforts en salle.", "Définis des objectifs clairs et mesurables pour guider ton évolution.", "La discipline te mènera là où la motivation ne peut pas.", "Un esprit fort dans un corps fort. Cultive les deux.", "Rappelle-toi pourquoi tu as commencé lorsque c'est difficile.", "Le changement est un processus. Apprécie chaque étape.", "Chaque séance est une bataille. Deviens un guerrier.", "La seule limite est celle que tu t'imposes.", "Sois fier de toi. Chaque entraînement est une victoire.", "Reste concentré sur tes objectifs. La vision claire mène au succès.", "Pousse jusqu'à ce que l'impossible devienne possible.", "La fatigue est temporaire, mais la fierté est éternelle.", "L'effort d'aujourd'hui est l'investissement dans ton futur.", "Ton corps peut supporter presque tout. C'est ton esprit que tu dois convaincre.", "L'unique mauvais entraînement est celui que tu n'as pas fait.", "N'hésite pas à écouter de la musique pour donner de l'énergie à ton entraînement.", "Reste hydraté, reste énergique. L'eau est ton carburant.", ]; // Fonction pour mettre à jour la div avec une phrase aléatoire function afficherConseil() { var indice = Math.floor(Math.random() * phrases.length); // Sélectionne un indice aléatoire document.querySelector('.conseil').innerHTML = phrases[indice]; } // Change la phrase toutes les 10 secondes setInterval(afficherConseil, 10000); // Affiche le premier conseil immédiatement au chargement de la page afficherConseil(); /* Variables DOM */ const buttonPlay = document.getElementById('buttonPlay'); const playIcon = document.getElementById('playIcon'); const buttonReset = document.getElementById('buttonReset'); const timeLeftDOM = document.getElementById('timeLeft'); const sessionLengthDOM = document.getElementById('sessionLength'); const breakLengthDOM = document.getElementById('breakLength'); const sessionDecrement = document.getElementById('sessionDecrement'); const sessionIncrement = document.getElementById('sessionIncrement'); const breakDecrement = document.getElementById('breakDecrement'); const breakIncrement = document.getElementById('breakIncrement'); /* Variables */ const arrayTime = timeLeftDOM.innerText.split(":"); let timeLeft = parseInt(arrayTime[0] * 60) + parseInt(arrayTime[1]); // timeLeft en secondes let playIsClicked = true; let isSession = false; let breakLength = 5*60; let timeLength = 1*60; function convertSeconds(seconds) { return { minutes: Math.floor(seconds / 60), // nombre de minutes seconds: seconds % 60 // nombre de secondes } } let interval; /* Handle play/pause Button */ buttonPlay.addEventListener('click', () => { // Chrono start (play) if(playIsClicked) { if(interval) { clearInterval(interval) } interval = setInterval(handleTime, 1000); function handleTime() { // Chrono finit if(timeLeft { let lengthValue = document.getElementById('sessionLength').value; let resultSeconds = lengthValue * 60; // On conserve la conversion en secondes pour le calcul let resultMinutes = Math.floor(resultSeconds / 60); let resultRemainderSeconds = resultSeconds % 60; timeLeftDOM.innerText = `${('0' + resultMinutes).slice(-2)}:${('0' + resultRemainderSeconds).slice(-2)}`; if(!playIsClicked) { buttonPlay.click(); } }); /* Handle length button */ function handleLengthButton(lengthValue, htmlElement, isAddition, isBreakLength) { if(lengthValue == -0.25) { return; } document.getElementById('sessionLength').value = lengthValue; let resultSeconds = lengthValue * 60; // On conserve la conversion en secondes pour le calcul let resultMinutes = Math.floor(resultSeconds / 60); let resultRemainderSeconds = resultSeconds % 60; htmlElement.innerText = resultMinutes; // Met à jour l'affichage en minutes if(!playIsClicked) { buttonPlay.click(); } if(!isBreakLength) { timeLength = resultSeconds; timeLeftDOM.innerText = `${('0' + resultMinutes).slice(-2)}:${('0' + resultRemainderSeconds).slice(-2)}`; timeLeft = resultSeconds; } else { breakLength = resultSeconds; } } // Ajuster les événements pour les boutons d'incrément et de décrément pour prendre en compte le changement d'unité sessionDecrement.addEventListener('click', () => { handleLengthButton(parseFloat(document.getElementById('sessionLength').value) - 0.25, sessionLengthDOM, false, false); // Multiplie par 60 pour convertir en secondes }); sessionIncrement.addEventListener('click', () => { handleLengthButton(parseFloat(document.getElementById('sessionLength').value) + 0.25, sessionLengthDOM, true, false); // Multiplie par 60 pour convertir en secondes });