From 8b74dc17f21bbc8e15892cfeb94315da441507df Mon Sep 17 00:00:00 2001 From: abutler911 Date: Tue, 10 Oct 2023 07:39:20 -0600 Subject: [PATCH] changing the layout --- index.html | 55 +++++++++++++++++++------------ script.js | 16 +++++++++ styles.css | 96 +++++++++++++++++++++++++++++------------------------- 3 files changed, 102 insertions(+), 65 deletions(-) diff --git a/index.html b/index.html index 7c8b65d..1b4efeb 100644 --- a/index.html +++ b/index.html @@ -7,30 +7,42 @@ -
-

EFT Tapping

-
-

- 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. -

-
-
- -
- -
+ +
+
+

EFT Tapping

+
+

+ 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. +

+
+ +
-
- - - + + +

made by @@ -42,6 +54,7 @@

>

+ diff --git a/script.js b/script.js index e111376..0f97d64 100644 --- 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 index 41ce6d6..9d8e4bd 100644 --- 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,54 +30,51 @@ 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; @@ -74,38 +82,29 @@ h3 { 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 { @@ -113,10 +112,10 @@ button:hover { } .link { - color: #e44d26; + color: var(--green); text-decoration: none; - font-size: 1.2rem; } + #affirmation-container.breathe { animation: breathe 15s ease-in-out 1; } @@ -124,9 +123,18 @@ button:hover { @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); } }