diff --git a/README.md b/README.md index f0c2a66..611663c 100644 --- a/README.md +++ b/README.md @@ -53,7 +53,7 @@ This is the current status, based on what I've managed to test so far! [sutarto-2012]: https://doi.org/10.1080%2F10803548.2012.11076959 "A.P. Sutarto, M.N.A Wahab & N.M. Zin (2012) Resonant Breathing Biofeedback Training for Stress Reduction Among Manufacturing Operators, Internat. J. of Occupational Safety and Ergonomics, 18:4, 549-561, DOI: 10.1080/10803548.2012.11076959; Retrieved 04-April-2020" [moss-2004]: https://bfe.org/articles/issue1_final.pdf -"Moss D. Heart rate variability (HRV) biofeedback. Psychophysiology Today. 2004;(1):4–11. Retrieved 04-April-2020."" +"Moss D. Heart rate variability (HRV) biofeedback. Psychophysiology Today. 2004;(1):4–11. Retrieved 04-April-2020." [eddie]: https://eddiestern.com/the-breathing-app/ [android]: https://play.google.com/store/apps/details?id=org.ayny.breathingapp# "The Breathing App, on Google Play for Android." diff --git a/docs/lib/animate.css b/docs/lib/animate.css index 83f590b..bf85f40 100644 --- a/docs/lib/animate.css +++ b/docs/lib/animate.css @@ -15,7 +15,7 @@ 100% { r: 5%; } /* 1s - hold */ } -/* A duration of 10 seconds equates to 6 breathes per second ;). +/* A duration of 10 seconds equates to 6 breaths per minute ;). See: [moss-2004] & [sutarto-2012] in the README. */ diff --git a/docs/lib/app-about.html b/docs/lib/app-about.html index 19050ec..32a2d17 100644 --- a/docs/lib/app-about.html +++ b/docs/lib/app-about.html @@ -11,7 +11,7 @@ } .app-about { - background: #fff; + background: #e8e8e8; border-top: 3px solid black; color: #333; bottom: 0; @@ -53,7 +53,7 @@ } .app-about .close-btn { - background: #ccc; + background: #d8d8d8; border: 2px solid #888; border-radius: 50%; color: #222; @@ -64,6 +64,8 @@ margin: 1rem; height: 3.6rem; width: 3.6rem; + + padding-bottom: .3rem; } .app-about .close-btn:hover, diff --git a/docs/lib/index.js b/docs/lib/index.js index e472e42..c6d792b 100644 --- a/docs/lib/index.js +++ b/docs/lib/index.js @@ -21,6 +21,8 @@ const $BREATH = document.querySelector('#breath'); ga('create', 'UA-8330079-9', 'auto'); ga('send', 'pageview'); +urlSetAnimationDuration(); + let isPlaying = false; ['click', 'keypress'].map(evName => { @@ -29,6 +31,23 @@ let isPlaying = false; $PAUSE_BTN.addEventListener(evName, ev => togglePlayPause(ev)); }); +/** + * A duration of 10 seconds equates to 6 breaths per minute ;). + * 12s ~~ 5 breaths/min. + * 10s ~~ 6 bpm. + * 8s ~~ 7.5 bpm. + * + * @see [moss-2004] & [sutarto-2012] in the README. + */ +function urlSetAnimationDuration () { + const M_DUR = window.location.search.match(/duration=(\d{1,2}(\.\d)?s)/); + const DURATION = M_DUR ? M_DUR[1] : '10s'; + + console.warn('animation-duration:', DURATION); + + $BREATH.style.animationDuration = DURATION; +} + function togglePlayPause (ev) { ev.preventDefault();