diff --git a/README.md b/README.md index 7d52ee5..a57a985 100644 --- a/README.md +++ b/README.md @@ -419,6 +419,17 @@ In order to run this project you need: +
  • +
    +Just Relax +

    The Just Relax App is a breathing exercise web application built with HTML, CSS, and JavaScript (ES6+). It guides users through a breathing exercise by animating visual cues and displaying text prompts such as "Breathe In," "Hold," and "Breathe Out." This helps users relax and practice mindfulness.

    + +
    +
    • +

    (back to top)

    diff --git a/Source-Code/JustRelax/index.html b/Source-Code/JustRelax/index.html new file mode 100644 index 0000000..796e484 --- /dev/null +++ b/Source-Code/JustRelax/index.html @@ -0,0 +1,24 @@ + + + + + + + Just Relax App + + + + +

    Just Relax !!

    +
    +
    +

    +
    + +
    +
    +
    + + + + \ No newline at end of file diff --git a/Source-Code/JustRelax/script.js b/Source-Code/JustRelax/script.js new file mode 100644 index 0000000..e7098fe --- /dev/null +++ b/Source-Code/JustRelax/script.js @@ -0,0 +1,32 @@ +/* eslint-disable no-use-before-define */ +const container = document.querySelector('.container'); +const text = document.querySelector('#text'); + +const TOTAL_TIME = 7500; +const BREATHE_TIME = (TOTAL_TIME / 5) * 2; +const HOLD_TIME = TOTAL_TIME / 7; + +// Start the animation +const startBreathingAnimation = () => { + animateBreathing(); + setInterval(animateBreathing, TOTAL_TIME); +}; + +const animateBreathing = () => { + text.textContent = 'Breathe In!'; + container.classList.add('grow'); + container.classList.remove('shrink'); + + setTimeout(() => { + text.textContent = 'Hold...'; + + setTimeout(() => { + text.textContent = 'Breathe Out!'; + container.classList.add('shrink'); + container.classList.remove('grow'); + }, HOLD_TIME); + }, BREATHE_TIME); +}; + +// Initialize the animation +startBreathingAnimation(); diff --git a/Source-Code/JustRelax/style.css b/Source-Code/JustRelax/style.css new file mode 100644 index 0000000..447fe0c --- /dev/null +++ b/Source-Code/JustRelax/style.css @@ -0,0 +1,116 @@ +@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@550;700&display=swap'); + +* { + box-sizing: border-box; +} + +body { + background: linear-gradient(90deg, #5567b7, #53a0ad); + color: rgb(243, 250, 235); + font-family: 'Dancing Script', sans-serif; + font-size: large; + font-weight: 500; + min-height: 100vh; + overflow: hidden; + display: flex; + align-items: center; + flex-direction: column; + margin: 0; +} + +.container { + display: flex; + align-items: center; + justify-content: center; + height: 300px; + width: 300px; + margin: auto; + position: relative; + transform: scale(1); +} + +.gradient-circle { + background: + conic-gradient( + #5567b7 0%, + #954ca4 40%, + #fff 40%, + #fff 60%, + #53afb3 60%, + #53a0ad 100% + ); + height: 320px; + width: 320px; + position: absolute; + top: -10px; + left: -10px; + z-index: -2; + border-radius: 50%; +} + +.circle { + background-color: rgb(2, 16, 43); + height: 100%; + width: 100%; + position: absolute; + top: 0; + left: 0; + z-index: -1; + border-radius: 50%; +} + +.pointer-container { + position: absolute; + top: -40px; + left: 140px; + width: 20px; + height: 190px; + animation: rotate 7.5s linear forwards infinite; + transform-origin: bottom center; +} + +.pointer { + background-color: lavender; + border-radius: 50%; + height: 20px; + width: 20px; + display: block; +} + +.container.grow { + animation: grow 3s linear forwards; +} + +.container.shrink { + animation: shrink 3s linear forwards; +} + +@keyframes rotate { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } +} + +@keyframes grow { + from { + transform: scale(1); + } + + to { + transform: scale(1.2); + } +} + +@keyframes shrink { + from { + transform: scale(1.2); + } + + to { + transform: scale(1); + } +}