From 68b90cd65481b8a1b1a4052e137d693fe22b5707 Mon Sep 17 00:00:00 2001 From: salathiel wekesa <107699372+salawekesa@users.noreply.github.com> Date: Wed, 31 May 2023 00:41:51 +0300 Subject: [PATCH 1/5] landing page --- index.html | 44 +++++++++++++++++++++++++++++ style.css | 82 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ style.js | 20 +++++++++++++ 3 files changed, 146 insertions(+) create mode 100644 index.html create mode 100644 style.css create mode 100644 style.js diff --git a/index.html b/index.html new file mode 100644 index 0000000..7e5eeac --- /dev/null +++ b/index.html @@ -0,0 +1,44 @@ + + + + + + + + + Mind your Mind + + + +
+
+

MindYM

+ +
+ +
+ + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..22b530f --- /dev/null +++ b/style.css @@ -0,0 +1,82 @@ +/* + 1. Use a more-intuitive box-sizing model. +*/ +*, *::before, *::after { + box-sizing: border-box; +} +/* + 2. Remove default margin +*/ +* { + margin: 0; +} +/* + 3. Allow percentage-based heights in the application +*/ +html, body { + height: 100%; +} +/* + Typographic tweaks! + 4. Add accessible line-height + 5. Improve text rendering +*/ +body { + line-height: 1.5; + -webkit-font-smoothing: antialiased; +} +/* + 6. Improve media defaults +*/ +img, picture, video, canvas, svg { + display: block; + max-width: 100%; +} +/* + 7. Remove built-in form typography styles +*/ +input, button, textarea, select { + font: inherit; +} +/* + 8. Avoid text overflows +*/ +p, h1, h2, h3, h4, h5, h6 { + overflow-wrap: break-word; +} +/* + 9. Create a root stacking context +*/ +#root, #__next { + isolation: isolate; +} + +/* + custom css +*/ + +header{ + display: flex; + justify-content: space-between; + align-items: center; + width: 70%; + margin: auto; +} + +header h1{ + color: aliceblue; +} +ul{ + display: flex; + list-style: none; + margin: 0; + padding: 0; + color:white; + gap: 1rem; +} + + +#display{ + width: 100%; + height: 100vh; +} diff --git a/style.js b/style.js new file mode 100644 index 0000000..82bb840 --- /dev/null +++ b/style.js @@ -0,0 +1,20 @@ + +VANTA.HALO({ + el: '#display', + mouseControls: true, + touchControls: true, + gyroControls: false, + minHeight: 200.00, + minWidth: 200.00, + scale: 1.00, + scaleMobile: 1.00 + }) + + //Get Inspired + fetch("https://type.fit/api/quotes") + .then(function(response) { + return response.json(); + }) + .then(function(data) { + console.log(data[1].text); + }); \ No newline at end of file From 84c06a6e19e0b833095877dda61bc1066c2fe360 Mon Sep 17 00:00:00 2001 From: salathiel wekesa <107699372+salawekesa@users.noreply.github.com> Date: Wed, 31 May 2023 02:17:22 +0300 Subject: [PATCH 2/5] quotes page --- assets/icon-dice.svg | 1 + assets/pattern-divider-desktop.svg | 1 + assets/pattern-divider-mobile.svg | 1 + css/quotes.css | 78 ++++++++++++++++++++++++++++++ style.css => css/style.css | 34 ++++++++++++- index.html | 14 +++--- js/quotes.js | 21 ++++++++ style.js => js/style.js | 0 pages/breathing.html | 21 ++++++++ pages/morning-pages.html | 21 ++++++++ pages/quotes.html | 38 +++++++++++++++ 11 files changed, 221 insertions(+), 9 deletions(-) create mode 100644 assets/icon-dice.svg create mode 100644 assets/pattern-divider-desktop.svg create mode 100644 assets/pattern-divider-mobile.svg create mode 100644 css/quotes.css rename style.css => css/style.css (70%) create mode 100644 js/quotes.js rename style.js => js/style.js (100%) create mode 100644 pages/breathing.html create mode 100644 pages/morning-pages.html create mode 100644 pages/quotes.html diff --git a/assets/icon-dice.svg b/assets/icon-dice.svg new file mode 100644 index 0000000..c43bdd9 --- /dev/null +++ b/assets/icon-dice.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/pattern-divider-desktop.svg b/assets/pattern-divider-desktop.svg new file mode 100644 index 0000000..1442839 --- /dev/null +++ b/assets/pattern-divider-desktop.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/pattern-divider-mobile.svg b/assets/pattern-divider-mobile.svg new file mode 100644 index 0000000..5827785 --- /dev/null +++ b/assets/pattern-divider-mobile.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/css/quotes.css b/css/quotes.css new file mode 100644 index 0000000..aa189d3 --- /dev/null +++ b/css/quotes.css @@ -0,0 +1,78 @@ +@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@600&family=Manrope:wght@800&display=swap"); +*, ::before, ::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-size: 28px; + font-weight: 800; + font-family: "Manrope", sans-serif; + height: 100vh; + padding: 2rem; + background-color: hsl(218deg, 23%, 16%); + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; +} + +#advice { + width: 100%; + background-color: hsl(217deg, 19%, 24%); + border-radius: 16px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + padding: 2rem; + position: relative; + line-height: 2.8rem; +} +#advice #counter { + font-size: 12px; + color: hsl(150deg, 100%, 66%); + text-transform: uppercase; +} +#advice #entry { + text-align: center; + color: hsl(193deg, 38%, 86%); + margin-bottom: 2rem; +} +#advice picture { + width: 100%; + display: flex; + justify-content: center; + margin-bottom: 2rem; +} +#advice button { + all: unset; +} +#advice #dice { + display: flex; + justify-content: center; + align-items: center; + width: 70px; + height: 70px; + border-radius: 50%; + background-color: hsl(150deg, 100%, 66%); + position: absolute; + bottom: -40px; + cursor: pointer; +} +@media (min-width: 500px) { + #advice { + width: 500px; + } +} + +.attribution { + font-size: 11px; + text-align: center; + color: hsl(193deg, 38%, 86%); +} + +.attribution a { + color: hsl(228deg, 45%, 44%); +} \ No newline at end of file diff --git a/style.css b/css/style.css similarity index 70% rename from style.css rename to css/style.css index 22b530f..9fd7170 100644 --- a/style.css +++ b/css/style.css @@ -59,20 +59,31 @@ header{ display: flex; justify-content: space-between; align-items: center; - width: 70%; + width: 80%; margin: auto; + padding: 2.5rem; + } header h1{ color: aliceblue; } + +header a{ + text-decoration: none; + color: aliceblue; + +} + ul{ display: flex; + flex-direction: row; list-style: none; margin: 0; padding: 0; color:white; - gap: 1rem; + gap: .8rem; + font-size: 1.2rem; } @@ -80,3 +91,22 @@ ul{ width: 100%; height: 100vh; } + + +@media (max-width: 700px) { + header{ + display: flex; + align-items: flex-start; + } + ul { + display: flex; + flex-grow: 1; + flex-direction: column; + gap: 3rem; + background-color: aliceblue; + width: 100%; + height: 100vh; + color: black; + position: relative; +} +} \ No newline at end of file diff --git a/index.html b/index.html index 7e5eeac..dd2a71e 100644 --- a/index.html +++ b/index.html @@ -4,8 +4,8 @@ - - + + Mind your Mind @@ -14,10 +14,10 @@

MindYM

@@ -38,7 +38,7 @@

MindYM

- + \ No newline at end of file diff --git a/js/quotes.js b/js/quotes.js new file mode 100644 index 0000000..db7cf51 --- /dev/null +++ b/js/quotes.js @@ -0,0 +1,21 @@ +const btn = document.getElementById("dice"); +const counter = document.getElementById("counter"); +const entry = document.getElementById("entry"); + +// console.log("hello"); +//catch errors + +const getAdvice = async () =>{ + const response = await fetch("https://api.adviceslip.com/advice"); + const data = await response.json(); + + console.log(data); + counter.innerHTML = `Advice no # ${data.slip.id}`; + entry.innerHTML = `"${data.slip.advice}"`; + +} +btn.addEventListener('click', function(){ + getAdvice(); +}) + +getAdvice(); \ No newline at end of file diff --git a/style.js b/js/style.js similarity index 100% rename from style.js rename to js/style.js diff --git a/pages/breathing.html b/pages/breathing.html new file mode 100644 index 0000000..a01ac41 --- /dev/null +++ b/pages/breathing.html @@ -0,0 +1,21 @@ + + + + + + + Mind your Mind + + +
+

MindYM

+ +
+

Breathing

+ + \ No newline at end of file diff --git a/pages/morning-pages.html b/pages/morning-pages.html new file mode 100644 index 0000000..cb53fb6 --- /dev/null +++ b/pages/morning-pages.html @@ -0,0 +1,21 @@ + + + + + + + Mind your Mind + + +
+

MindYM

+ +
+

Morning pages

+ + \ No newline at end of file diff --git a/pages/quotes.html b/pages/quotes.html new file mode 100644 index 0000000..d1d8e83 --- /dev/null +++ b/pages/quotes.html @@ -0,0 +1,38 @@ + + + + + > + + + + + + Mind your Mind + + +
+

MindYM

+ +
+ +
+

+

""

+ + + divider + + +
+ + + + + + \ No newline at end of file From dd56b1b1a670296395a87b769e34da9d880b7af8 Mon Sep 17 00:00:00 2001 From: salathiel wekesa <107699372+salawekesa@users.noreply.github.com> Date: Wed, 31 May 2023 12:49:43 +0300 Subject: [PATCH 3/5] breathing page --- css/breathing.css | 44 +++++++++++++++++++++++++++++++ css/morningpages.css | 0 css/quotes.css | 27 +++++++++++++++++-- index.html | 2 +- js/breathing.js | 63 ++++++++++++++++++++++++++++++++++++++++++++ js/style.js | 2 +- pages/breathing.html | 10 +++++++ pages/quotes.html | 13 +++++---- 8 files changed, 150 insertions(+), 11 deletions(-) create mode 100644 css/breathing.css create mode 100644 css/morningpages.css create mode 100644 js/breathing.js diff --git a/css/breathing.css b/css/breathing.css new file mode 100644 index 0000000..0068fdb --- /dev/null +++ b/css/breathing.css @@ -0,0 +1,44 @@ +.container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + } + + .circle-progress { + width: 200px; + height: 200px; + background-color: #eaeaea; + border-radius: 50%; + margin-bottom: 20px; + } + + .circle-grow { + animation: grow 8s linear; + } + + @keyframes grow { + 0% { transform: scale(1); } + 50% { transform: scale(1.2); } + 100% { transform: scale(1); } + } + + .breath-input { + margin-bottom: 10px; + } + + .start { + padding: 10px 20px; + background-color: #4caf50; + color: #fff; + border: none; + border-radius: 4px; + cursor: pointer; + } + + .button-inactive { + pointer-events: none; + opacity: 0.5; + } + \ No newline at end of file diff --git a/css/morningpages.css b/css/morningpages.css new file mode 100644 index 0000000..e69de29 diff --git a/css/quotes.css b/css/quotes.css index aa189d3..718e5bc 100644 --- a/css/quotes.css +++ b/css/quotes.css @@ -10,12 +10,12 @@ body { font-weight: 800; font-family: "Manrope", sans-serif; height: 100vh; - padding: 2rem; + padding: 1rem; background-color: hsl(218deg, 23%, 16%); display: flex; flex-direction: column; align-items: center; - justify-content: space-around; + justify-content: space-between; } #advice { @@ -29,6 +29,7 @@ body { padding: 2rem; position: relative; line-height: 2.8rem; + margin: 10rem; } #advice #counter { font-size: 12px; @@ -75,4 +76,26 @@ body { .attribution a { color: hsl(228deg, 45%, 44%); +} + +header{ + display: flex; + justify-content: center; + align-self: center; + font-size: 20px; +} +header ul{ + display: flex; +} + + +ul{ + display: flex; + flex-direction: row; + list-style: none; + margin: 0; + padding: 0; + color:white; + gap: .8rem; + font-size: 1.2rem; } \ No newline at end of file diff --git a/index.html b/index.html index dd2a71e..b7066b8 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,7 @@
-

MindYM

+

MindYM

Breathing

+
+
+

3

+ + +

Get relaxed, and ready to begin breathing

+
+ + \ No newline at end of file diff --git a/pages/quotes.html b/pages/quotes.html index d1d8e83..81dc789 100644 --- a/pages/quotes.html +++ b/pages/quotes.html @@ -2,24 +2,25 @@ - > + - - + + + Mind your Mind
-

MindYM

+

MindYM

-
+

@@ -31,8 +32,6 @@

-
- \ No newline at end of file From c8d799932acb94bf246f53b7a4b481cde8f15e8a Mon Sep 17 00:00:00 2001 From: salathiel wekesa <107699372+salawekesa@users.noreply.github.com> Date: Wed, 31 May 2023 16:14:42 +0300 Subject: [PATCH 4/5] new changes --- css/breathing.css | 140 ++++++++++++++++++++++++++++++++++++--- css/morningpages.css | 88 ++++++++++++++++++++++++ css/quotes.css | 19 ++++-- css/style.css | 11 ++- js/breathing.js | 34 +++++++--- js/morning.js | 11 +++ pages/breathing.html | 59 +++++++++++++---- pages/morning-pages.html | 26 ++++++-- pages/quotes.html | 30 +++++---- 9 files changed, 357 insertions(+), 61 deletions(-) create mode 100644 js/morning.js diff --git a/css/breathing.css b/css/breathing.css index 0068fdb..79442f7 100644 --- a/css/breathing.css +++ b/css/breathing.css @@ -1,17 +1,95 @@ +/* + 1. Use a more-intuitive box-sizing model. +*/ +*, *::before, *::after { + box-sizing: border-box; +} +/* + 2. Remove default margin +*/ +* { + margin: 0; +} +/* + 3. Allow percentage-based heights in the application +*/ +html, body { + height: 100%; +} +/* + Typographic tweaks! + 4. Add accessible line-height + 5. Improve text rendering +*/ +body { + line-height: 1.5; + -webkit-font-smoothing: antialiased; +} +/* + 6. Improve media defaults +*/ +img, picture, video, canvas, svg { + display: block; + max-width: 100%; +} +/* + 7. Remove built-in form typography styles +*/ +input, button, textarea, select { + font: inherit; +} +/* + 8. Avoid text overflows +*/ +p, h1, h2, h3, h4, h5, h6 { + overflow-wrap: break-word; +} +/* + 9. Create a root stacking context +*/ +#root, #__next { + isolation: isolate; +} + +/* + custom css +*/ + +body{ + background-color: hsl(231.18, 55.56%, 16.86%); + +} + +.cont{ + font-size: 28px; + font-weight: 800; + font-family: "Manrope", sans-serif; + padding: 1rem; + background-color: hsl(231.18, 55.56%, 16.86%); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin-top: 4rem; +} + + .container { display: flex; - flex-direction: column; + flex-direction: row; align-items: center; justify-content: center; - height: 100vh; } .circle-progress { width: 200px; height: 200px; - background-color: #eaeaea; + background-color: #12f7eb; border-radius: 50%; - margin-bottom: 20px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } .circle-grow { @@ -29,9 +107,9 @@ } .start { - padding: 10px 20px; - background-color: #4caf50; - color: #fff; + padding: 7px 16px; + background-color: #2bdcf3; + color: #3c3f3d; border: none; border-radius: 4px; cursor: pointer; @@ -41,4 +119,50 @@ pointer-events: none; opacity: 0.5; } - \ No newline at end of file + +.target{ + border: 2px solid rgb(233, 233, 235); + width: 240px; + height: 240px; + border-radius: 50%; + margin: 0; + display: flex; + justify-content: center; + align-items: center; + padding: 10px 20px; + +} + +.countdown p{ +font-size: 3rem; + +} + +p{ + font-size: 2rem; + color: azure; +} + +.cover{ + display: flex; + justify-content: center; + align-items: center; + width: 80%; +} + +.main, .ins{ + width: 50%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +hr{ + width: 100%; + border: 1px solid rgb(233, 233, 235); +} + +.inst{ + font-size: 16px; +} \ No newline at end of file diff --git a/css/morningpages.css b/css/morningpages.css index e69de29..e63e047 100644 --- a/css/morningpages.css +++ b/css/morningpages.css @@ -0,0 +1,88 @@ +/* + 1. Use a more-intuitive box-sizing model. +*/ +*, *::before, *::after { + box-sizing: border-box; + } + /* + 2. Remove default margin + */ + * { + margin: 0; + } + /* + 3. Allow percentage-based heights in the application + */ + html, body { + height: 100%; + } + /* + Typographic tweaks! + 4. Add accessible line-height + 5. Improve text rendering + */ + body { + line-height: 1.5; + background-color: hsl(218deg, 23%, 16%); + -webkit-font-smoothing: antialiased; + } + /* + 6. Improve media defaults + */ + img, picture, video, canvas, svg { + display: block; + max-width: 100%; + } + /* + 7. Remove built-in form typography styles + */ + input, button, textarea, select { + font: inherit; + } + /* + 8. Avoid text overflows + */ + p, h1, h2, h3, h4, h5, h6 { + overflow-wrap: break-word; + } + /* + 9. Create a root stacking context + */ + #root, #__next { + isolation: isolate; + } + + /* + custom css + */ + + #textareaContainer { + display: flex; + justify-content: center; + align-items: center; + height: 100%; +} + +#textarea { + width: 80%; + height: 80%; + resize: none; + font-size: 18px; + padding: 10px; + background-color: beige; +} + +#wordCount { + position: fixed; + bottom: 10px; + right: 10px; +} + +h1{ + color: aliceblue; +} + +p{ + color: rgb(39, 201, 106); + text-align: center; +} \ No newline at end of file diff --git a/css/quotes.css b/css/quotes.css index 718e5bc..5eabf9a 100644 --- a/css/quotes.css +++ b/css/quotes.css @@ -5,17 +5,21 @@ box-sizing: border-box; } -body { +body{ + background-color: hsl(231.18, 55.56%, 16.86%); + height: 100vh; +} + +.contain { font-size: 28px; font-weight: 800; font-family: "Manrope", sans-serif; - height: 100vh; padding: 1rem; - background-color: hsl(218deg, 23%, 16%); + background-color: hsl(231.18, 55.56%, 16.86%); display: flex; flex-direction: column; align-items: center; - justify-content: space-between; + justify-content: center; } #advice { @@ -80,12 +84,15 @@ body { header{ display: flex; - justify-content: center; + justify-content: space-between; align-self: center; font-size: 20px; + color: hsl(150deg, 100%, 66%); } header ul{ display: flex; + justify-content: space-between; + align-items: center; } @@ -95,7 +102,7 @@ ul{ list-style: none; margin: 0; padding: 0; - color:white; + color: hsl(150deg, 100%, 66%); gap: .8rem; font-size: 1.2rem; } \ No newline at end of file diff --git a/css/style.css b/css/style.css index 9fd7170..1075ea1 100644 --- a/css/style.css +++ b/css/style.css @@ -61,18 +61,17 @@ header{ align-items: center; width: 80%; margin: auto; - padding: 2.5rem; + padding: 1rem; } header h1{ - color: aliceblue; + color: hsl(150deg, 100%, 66%); } header a{ text-decoration: none; - color: aliceblue; - + color: hsl(150deg, 100%, 66%); } ul{ @@ -93,7 +92,7 @@ ul{ } -@media (max-width: 700px) { +/* @media (max-width: 700px) { header{ display: flex; align-items: flex-start; @@ -109,4 +108,4 @@ ul{ color: black; position: relative; } -} \ No newline at end of file +} */ \ No newline at end of file diff --git a/js/breathing.js b/js/breathing.js index 0c999be..a214223 100644 --- a/js/breathing.js +++ b/js/breathing.js @@ -3,6 +3,7 @@ const numberOfBreaths = document.querySelector(".breath-input"); const start = document.querySelector(".start"); const instructions = document.querySelector(".instructions"); const breathsText = document.querySelector(".breaths-text"); +const count = document.querySelector(".countdown"); let breathsLeft = 3; // Watching for selected breaths from user @@ -19,6 +20,8 @@ const growCircle = () => { }, 8000); }; + + // Breathing Instructions const breathTextUpdate = () => { breathsLeft--; @@ -28,8 +31,8 @@ const breathTextUpdate = () => { instructions.innerText = "Hold Breath"; setTimeout(() => { instructions.innerText = "Exhale Breath Slowly"; - }, 4000); - }, 4000); + }, 6000); + }, 5000); }; // Breathing App Function @@ -45,7 +48,7 @@ const breathingApp = () => { } growCircle(); breathTextUpdate(); - }, 12000); + }, 8000); }; // Start Breathing @@ -55,9 +58,24 @@ start.addEventListener("click", () => { setTimeout(() => { instructions.innerText = "Breathing is about to begin..."; setTimeout(() => { - breathingApp(); - growCircle(); - breathTextUpdate(); - }, 2000); - }, 2000); + count.innerText = "3"; + setTimeout(() => { + count.innerText = "2"; + setTimeout(() => { + count.innerText = "1"; + setTimeout(() => { + count.innerText = "0"; + setTimeout(() => { + breathingApp(); + growCircle(); + breathTextUpdate(); + }, 4000); + }, 4000); + + }, 4000); + + }, 4000); + + },4000); + }, 4000); }); \ No newline at end of file diff --git a/js/morning.js b/js/morning.js new file mode 100644 index 0000000..c5df4a7 --- /dev/null +++ b/js/morning.js @@ -0,0 +1,11 @@ +function countWords() { + var text = document.getElementById('textarea').value; + var wordCount = 0; + + if (text.trim() !== '') { + wordCount = text.trim().split(/\s+/).length; + } + + document.getElementById('wordCount').textContent = 'Word Count: ' + wordCount; + +} \ No newline at end of file diff --git a/pages/breathing.html b/pages/breathing.html index b62baa5..2e17857 100644 --- a/pages/breathing.html +++ b/pages/breathing.html @@ -5,26 +5,57 @@ + Mind your Mind
-

MindYM

+

MindYM

-
-

Breathing

-
-
-

3

- - -

Get relaxed, and ready to begin breathing

-
+ + +
+ +
+ +

Relese stress with breath exercise

+
+ +
+ +

Get relaxed, and ready to begin breathing

+ +
+ +
+ +
+
+
+

+
+
+
+ +
+

3

+ + +
+ +
+ + + +
+ +
+ + diff --git a/pages/morning-pages.html b/pages/morning-pages.html index cb53fb6..659795e 100644 --- a/pages/morning-pages.html +++ b/pages/morning-pages.html @@ -4,18 +4,32 @@ + + Mind your Mind
-

MindYM

+

MindYM

-
+ + +

Morning pages

+

Write 500 words nonstop of whatever comers to your mind

+ +
+ +
+ +

Word Count: 0

+ + + + \ No newline at end of file diff --git a/pages/quotes.html b/pages/quotes.html index 81dc789..f29864b 100644 --- a/pages/quotes.html +++ b/pages/quotes.html @@ -8,28 +8,32 @@ - + Mind your Mind

MindYM

-
-

-

""

- - - divider - - +
+ +
+ +
+

+

""

+ + + divider + + +
From 01d71607973f377e1a62d04e217737692af78db2 Mon Sep 17 00:00:00 2001 From: salathiel wekesa <107699372+salawekesa@users.noreply.github.com> Date: Tue, 6 Jun 2023 23:32:53 +0300 Subject: [PATCH 5/5] changes --- css/morningpages.css | 11 +++++++++++ index.html | 9 ++++----- js/morning.js | 5 +++++ pages/breathing.html | 8 ++++---- pages/morning-pages.html | 13 +++++++++---- pages/quotes.html | 11 +++++------ 6 files changed, 38 insertions(+), 19 deletions(-) diff --git a/css/morningpages.css b/css/morningpages.css index e63e047..08fabfe 100644 --- a/css/morningpages.css +++ b/css/morningpages.css @@ -85,4 +85,15 @@ h1{ p{ color: rgb(39, 201, 106); text-align: center; +} + +.droplet { + background-image: url("img/droplet.png"); + background-size: cover; + width: 20px; + height: 20px; + position: absolute; + top: 0; + left: 0; + /* background-color: blue; */ } \ No newline at end of file diff --git a/index.html b/index.html index b7066b8..6f11f11 100644 --- a/index.html +++ b/index.html @@ -4,15 +4,15 @@ - - + + Mind your Mind
-

MindYM

+

MindYM

  • Breathing
  • Morning pages
    • @@ -37,8 +37,7 @@

    MindYM

    - - + \ No newline at end of file diff --git a/js/morning.js b/js/morning.js index c5df4a7..eac5a3e 100644 --- a/js/morning.js +++ b/js/morning.js @@ -8,4 +8,9 @@ function countWords() { document.getElementById('wordCount').textContent = 'Word Count: ' + wordCount; + if (wordCount >= 500) { + document.getElementById('balloonContainer').style.display = 'block'; + } else { + document.getElementById('balloonContainer').style.display = 'none'; + } } \ No newline at end of file diff --git a/pages/breathing.html b/pages/breathing.html index 2e17857..7ee796a 100644 --- a/pages/breathing.html +++ b/pages/breathing.html @@ -4,13 +4,13 @@ - - + + Mind your Mind
    -

    MindYM

    +

    MindYM

    • Breathing
    • Morning pages
      • @@ -57,6 +57,6 @@

      3

      - + \ No newline at end of file diff --git a/pages/morning-pages.html b/pages/morning-pages.html index 659795e..1fbd46d 100644 --- a/pages/morning-pages.html +++ b/pages/morning-pages.html @@ -4,13 +4,13 @@ - - + + Mind your Mind
      -

      MindYM

      +

      MindYM

      + +
      +

      Morning pages

      Write 500 words nonstop of whatever comers to your mind

      + +

      Word Count: 0

      - + \ No newline at end of file diff --git a/pages/quotes.html b/pages/quotes.html index f29864b..bcb1fbd 100644 --- a/pages/quotes.html +++ b/pages/quotes.html @@ -8,12 +8,11 @@ - Mind your Mind
      -

      MindYM

      +

      MindYM

- + \ No newline at end of file