changing the layout

abutler911 · Oct 10, 2023 · 8b74dc1 · 8b74dc1
1 parent 43f50a3
commit 8b74dc1
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 65 deletions.
diff --git a/index.html b/index.html
@@ -7,30 +7,42 @@
     <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
-    <div class="header">
-      <h1>EFT Tapping</h1>
-      <hr />
-      <p>
-        Emotional Freedom Techniques (EFT) Tapping is a self-help method
-        designed to help manage stress, anxiety, and emotional imbalances. It
-        combines elements of cognitive therapy with acupressure to provide a
-        holistic approach to emotional well-being. By tapping on specific points
-        on the body while focusing on particular thoughts and emotions, you can
-        work on releasing energy blockages and restoring your mind's balance.
-      </p>
-      <hr />
-    </div>
-    <span id="timer"></span>
-    <div id="affirmation-container">
-      <span id="section-name"></span>
-      <div id="affirmation-display"><!-- Affirmation will go here --></div>
+    <!-- Landing Page -->
+    <div id="landing-page">
+      <div class="header">
+        <h1>EFT Tapping</h1>
+        <hr />
+        <p>
+          Emotional Freedom Techniques (EFT) Tapping is a self-help method
+          designed to help manage stress, anxiety, and emotional imbalances. It
+          combines elements of cognitive therapy with acupressure to provide a
+          holistic approach to emotional well-being. By tapping on specific
+          points on the body while focusing on particular thoughts and emotions,
+          you can work on releasing energy blockages and restoring your mind's
+          balance.
+        </p>
+        <hr />
+        <button id="start-button">Start App</button>
+      </div>
     </div>
 
-    <div class="button-container">
-      <button id="prev-button">Previous</button>
-      <button id="next-button">Next</button>
-      <button id="pause-button">Pause</button>
+    <div id="affirmation-page" style="display: none">
+      <div class="-affirmation-header">Affirmations</div>
+      <div id="timer-container">
+        <span id="timer"></span>
+      </div>
+      <div id="affirmation-container">
+        <span id="section-name"></span>
+        <div id="affirmation-display"></div>
+      </div>
+      <div class="button-container">
+        <button id="prev-button">Previous</button>
+        <button id="next-button">Next</button>
+        <button id="pause-button">Pause</button>
+      </div>
     </div>
+
+    <!-- Footer -->
     <div class="footer">
       <h3>
         made by
@@ -42,6 +54,7 @@ <h3>
         >
       </h3>
     </div>
+
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/script.js b/script.js
@@ -153,6 +153,22 @@ function togglePause() {
   }
 }
 
+function showPage(pageId) {
+  const pages = ["landing-page", "affirmation-page"];
+  pages.forEach((id) => {
+    document.getElementById(id).style.display =
+      id === pageId ? "block" : "none";
+  });
+}
+
+// Initial load shows landing page
+showPage("landing-page");
+
+// Start button event listener to switch to affirmation page
+document.getElementById("start-button").addEventListener("click", () => {
+  showPage("affirmation-page");
+});
+
 // Update display initially
 updateDisplay();
 

diff --git a/styles.css b/styles.css
@@ -1,3 +1,14 @@
+:root {
+  --dark-blue: #29579d;
+  --light-blue: #8aaccf;
+  --green: #97ef99;
+  --white: #fff;
+  --black: #000;
+  --font-small: 0.8rem;
+  --font-medium: 1rem;
+  --font-large: 1.5rem;
+}
+
 @font-face {
   font-family: "Cinzel";
   src: url("fonts/Cinzel-Regular.otf") format("opentype");
@@ -10,7 +21,7 @@
 
 body {
   font-family: "Cinzel", serif;
-  background-color: #000;
+  background-color: var(--black);
   color: #333;
   margin: 0;
   padding: 0;
@@ -19,114 +30,111 @@ body {
   align-items: center;
   justify-content: center;
   min-height: 100vh;
+  animation: backgroundFade 10s infinite alternate;
 }
 
-/* Title styling */
-.header {
-  text-align: justify;
+.header,
+.header p {
+  text-align: center;
   padding: 20px;
-  background-color: #000;
-  margin-bottom: 20px;
-  font-family: "Cinzel", serif;
+  color: var(--white);
+  font-size: var(--font-medium);
+  line-height: 1.5;
+  margin: 0;
 }
 
 .header h1 {
-  font-size: 2.5rem;
-  margin-bottom: 10px;
-  color: #e44d26;
-  text-align: center;
+  font-size: var(--font-large);
+  color: var(--green);
 }
 
-.header p {
-  font-size: 0.9rem;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  font-family: "Cinzel", serif;
-  color: #fff;
+#timer-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
 }
 
-h3 {
-  color: #e44d26;
-}
-/* Timer styling */
-#timer {
-  font-size: 2rem;
-  color: #e44d26;
+#timer,
+button {
+  font-size: var(--font-large);
+  color: var(--green);
 }
+
 #affirmation-container {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 80%;
   min-height: 20vh;
-  background-color: #ffffff;
+  background-color: var(--white);
   border-radius: 12px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   padding: 20px;
   margin-top: 20px;
+  margin: 20px auto;
 }
-/* Affirmation display */
+
 #affirmation-display {
   width: 100%;
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
-  font-size: 2rem;
 }
+
 #section-name {
-  font-size: 0.8rem;
-  /* align-self: flex-start; */
+  font-size: var(--font-small);
   text-align: center;
   color: #555;
 }
 
-/* Button container */
 .button-container {
   display: flex;
   justify-content: center;
-  margin-top: 20px;
 }
 
-/* Button styling */
 button {
   background-color: #8e44ad;
-  color: #fff;
+  color: var(--white);
   border: none;
   padding: 10px 20px;
-  margin: 5px 10px;
+  margin: 5px;
   border-radius: 5px;
   cursor: pointer;
-  font-size: 1.5rem;
-  margin-bottom: 20px;
-  display: block;
   transition: background-color 0.3s ease;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  font-family: "Cinzel", serif;
-  font-weight: 700;
 }
 
 button:hover {
   background-color: #732b91;
 }
 
 .link {
-  color: #e44d26;
+  color: var(--green);
   text-decoration: none;
-  font-size: 1.2rem;
 }
+
 #affirmation-container.breathe {
   animation: breathe 15s ease-in-out 1;
 }
 
 @keyframes breathe {
   0%,
   100% {
-    background-color: #ffffff;
+    background-color: var(--white);
   }
   46.6% {
-    background-color: #00ff00;
+    background-color: var(--green);
+  }
+}
+
+@keyframes backgroundFade {
+  0% {
+    background-color: var(--light-blue);
+  }
+  100% {
+    background-color: var(--dark-blue);
   }
 }