changing the layout

abutler911 · Oct 10, 2023 · bb83712 · bb83712
1 parent 591d091
commit bb83712
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -10,7 +10,7 @@
     <!-- Landing Page -->
     <div id="landing-page">
       <div class="header">
-        <h1>EFT Tapping</h1>
+        <h1>Emotional Freedom Journey</h1>
         <hr />
         <p>
           Emotional Freedom Techniques (EFT) Tapping is a self-help method
@@ -27,7 +27,7 @@ <h1>EFT Tapping</h1>
     </div>
 
     <div id="affirmation-page" style="display: none">
-      <div class="affirmation-header">Affirmations</div>
+      <div class="affirmation-header">Mindful Moments</div>
 
       <div id="timer-container">
         <span id="timer"></span>
@@ -36,6 +36,7 @@ <h1>EFT Tapping</h1>
       <div id="affirmation-container">
         <span id="section-name"></span>
         <div id="affirmation-display"></div>
+        <span id="meridian-point"></span>
       </div>
 
       <div class="button-container">

diff --git a/script.js b/script.js
@@ -53,6 +53,17 @@ const affirmationSections = [
   },
 ];
 
+const meridianPoints = [
+  "Top of the head",
+  "Third eye",
+  "Temporal",
+  "Under the eye",
+  "Under nose",
+  "Chin",
+  "Collarbone",
+  "Under arm",
+];
+
 let currentSectionIndex = 0;
 let currentPhraseIndex = 0;
 let isPaused = false;
@@ -69,16 +80,25 @@ const pauseButton = document.getElementById("pause-button");
 function updateDisplay() {
   const affirmationContainer = document.getElementById("affirmation-container");
   const currentSection = affirmationSections[currentSectionIndex];
+  const meridianElement = document.getElementById("meridian-point"); // New element for the meridian point
 
   if (currentPhraseIndex < currentSection.phrases.length) {
     displayElement.textContent = currentSection.phrases[currentPhraseIndex];
     sectionNameElement.textContent = currentSection.section;
+
+    // Display the meridian point
+    meridianElement.textContent = `Meridian Point: ${meridianPoints[currentPhraseIndex]}`;
+
     countdownValue = 7;
     affirmationContainer.classList.remove("breathe");
   } else {
     displayElement.textContent =
       "Place a hand on your heart and belly, and take three deep breaths.";
     sectionNameElement.textContent = "";
+
+    // Clear the meridian point when not applicable
+    meridianElement.textContent = "";
+
     countdownValue = 15;
     affirmationContainer.classList.add("breathe");
   }

diff --git a/styles.css b/styles.css
@@ -1,7 +1,7 @@
 :root {
   --dark-blue: #29579d;
   --light-blue: #8aaccf;
-  --green: #97ef99;
+  --green: #66f368;
   --white: #fff;
   --black: #000;
   --font-small: 0.8rem;
@@ -14,15 +14,10 @@
   src: url("fonts/Cinzel-Regular.otf") format("opentype");
 }
 
-@font-face {
-  font-family: "Brilliant Mastaka";
-  src: url("fonts/Brilliant.ttf") format("truetype");
-}
-
 body {
   font-family: "Cinzel", serif;
   background-color: var(--white);
-  color: #333;
+  color: #382400;
   margin: 0;
   padding: 0;
   display: flex;
@@ -43,16 +38,17 @@ body {
 }
 
 .header h1 {
-  font-size: 3rem;
+  font-size: 2rem;
   color: var(--green);
 }
 
 .affirmation-header {
   text-align: center;
   padding: 20px;
-  color: var(--black);
-  font-size: 3rem;
+  color: var(--white);
+  font-size: 2.3rem;
   line-height: 1.5;
+  background-color: var(--light-blue);
 }
 #timer-container {
   display: flex;
@@ -62,7 +58,7 @@ body {
 }
 
 #timer {
-  font-size: 5rem;
+  font-size: 3rem;
   color: var(--green);
 }
 
@@ -95,6 +91,12 @@ body {
   text-align: center;
   color: #555;
 }
+#meridian-point {
+  font-size: var(--font-small);
+  text-align: center;
+  color: #555;
+  margin-top: 10px;
+}
 
 .button-container {
   display: flex;