more style changes

index.html

@@ -21,9 +21,11 @@ <h1>EFT Tapping</h1>
       <hr />
     </div>
     <span id="timer"></span>
-    <div id="affirmation-display">
-      <!-- Affirmation will go here -->
+    <div id="affirmation-container">
+      <span id="section-name"></span>
+      <div id="affirmation-display"><!-- Affirmation will go here --></div>
     </div>
+
     <div class="button-container">
       <button id="prev-button">Previous</button>
       <button id="next-button">Next</button>

script.js

@@ -60,22 +60,23 @@ let countdown;
 let countdownValue = 5;
 
 const displayElement = document.getElementById("affirmation-display");
+const sectionNameElement = document.getElementById("section-name");
 const timerElement = document.getElementById("timer");
 const prevButton = document.getElementById("prev-button");
 const nextButton = document.getElementById("next-button");
 const pauseButton = document.getElementById("pause-button");
 
 function updateDisplay() {
-  if (
-    currentPhraseIndex < affirmationSections[currentSectionIndex].phrases.length
-  ) {
-    displayElement.textContent =
-      affirmationSections[currentSectionIndex].phrases[currentPhraseIndex];
+  const currentSection = affirmationSections[currentSectionIndex];
+  if (currentPhraseIndex < currentSection.phrases.length) {
+    displayElement.textContent = currentSection.phrases[currentPhraseIndex];
+    sectionNameElement.textContent = currentSection.section; // Set the section name
     countdownValue = 7;
     displayElement.classList.remove("breathe");
   } else {
     displayElement.textContent =
       "Place a hand on your heart and belly, and take three deep breaths.";
+    sectionNameElement.textContent = ""; // Clear the section name during the breathing part
     countdownValue = 15;
     displayElement.classList.add("breathe");
   }

styles.css

@@ -57,24 +57,34 @@ h3 {
   padding: 0px 20px;
   border-radius: 10px;
 }
-
-/* Affirmation display */
-#affirmation-display {
-  width: 80%;
-  min-height: 20vh;
+#affirmation-container {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-content: center;
-  text-align: center;
+  width: 80%;
+  min-height: 20vh;
   background-color: #ffffff;
   border-radius: 12px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   padding: 20px;
   margin-top: 20px;
+}
+/* Affirmation display */
+#affirmation-display {
+  width: 100%;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
   font-size: 2rem;
-  margin-bottom: 20px;
 }
-
+#section-name {
+  font-size: 0.8rem;
+  align-self: flex-start;
+  /* margin-bottom: 10px; */
+  color: #555;
+}
 /* Button container */
 .button-container {
   display: flex;