diff --git a/index.html b/index.html index dd79d12..55f4d56 100644 --- a/index.html +++ b/index.html @@ -40,9 +40,9 @@ <h1>Emotional Freedom Journey</h1> </div> <div class="button-container"> - <button id="prev-button">Previous</button> - <button id="next-button">Next</button> - <button id="pause-button">Pause</button> + <button id="prev-button"><i class="fas fa-arrow-left"></i></button> + <button id="pause-button"><i class="fas fa-pause"></i></button> + <button id="next-button"><i class="fas fa-arrow-right"></i></button> </div> </div> @@ -58,7 +58,10 @@ <h3> > </h3> </div> - + <script + src="https://kit.fontawesome.com/082eaaba14.js" + crossorigin="anonymous" + ></script> <script src="script.js"></script> </body> </html> diff --git a/script.js b/script.js index 033582b..afd5a38 100644 --- a/script.js +++ b/script.js @@ -87,7 +87,7 @@ function updateDisplay() { sectionNameElement.textContent = currentSection.section; // Display the meridian point - meridianElement.textContent = `Meridian Point: ${meridianPoints[currentPhraseIndex]}`; + meridianElement.innerHTML = `Meridian Point: <span style="color: #c7522a;">${meridianPoints[currentPhraseIndex]}</span>`; countdownValue = 7; affirmationContainer.classList.remove("breathe"); @@ -160,16 +160,19 @@ function moveToPrev() { } function togglePause() { + const pauseIcon = document.querySelector("#pause-button i"); isPaused = !isPaused; - pauseButton.textContent = isPaused ? "Resume" : "Pause"; if (isPaused) { - // Clear the timer and remove it from the page + // Clear the timer but keep the space clearInterval(countdown); - timerElement.textContent = ""; + timerElement.innerHTML = " "; + pauseButton.textContent = "Resume"; + pauseIcon.classList.remove("fas", "fa-pause"); } else { // Restart the timer if unpaused resetTimer(); + pauseButton.innerHTML = '<i class="fas fa-pause"></i>'; } } diff --git a/styles.css b/styles.css index 809072f..d018cf0 100644 --- a/styles.css +++ b/styles.css @@ -1,7 +1,7 @@ :root { --dark-blue: #29579d; --light-blue: #8aaccf; - --green: #66f368; + --green: #74a892; --white: #fff; --black: #000; --font-small: 0.8rem; @@ -16,7 +16,7 @@ body { font-family: "Cinzel", serif; - background-color: var(--white); + background-color: #fbf2c4; color: #382400; margin: 0; padding: 0; @@ -70,7 +70,7 @@ body { min-height: 20vh; background-color: var(--light-blue); border-radius: 12px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; padding: 10px; margin-top: 20px; margin: 20px auto; @@ -87,15 +87,16 @@ body { } #section-name { - font-size: 1rem; + font-size: 0.8rem; text-align: center; color: #555; + text-transform: uppercase; } #meridian-point { - font-size: var(--font-small); + font-size: 0.8rem; text-align: center; color: #555; - margin-top: 10px; + text-transform: uppercase; } .button-container { @@ -112,7 +113,7 @@ button { border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; font-size: 1.3rem; width: 100%; } @@ -120,7 +121,13 @@ button { button:hover { background-color: var(--light-blue); } - +.footer { + text-align: center; + font-family: "Cinzel", serif; +} +.footer p { + font-size: 0.7rem; +} .link { color: var(--green); text-decoration: none;