added new colors

abutler911 · Oct 10, 2023 · 39e0049 · 39e0049
1 parent 29c39d6
commit 39e0049
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 16 deletions.
diff --git 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
@@ -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 = "&nbsp;";
+    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
@@ -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,15 +113,21 @@ 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%;
 }
 
 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;