diff --git a/README.md b/README.md index 5d93375..0b24d19 100644 --- a/README.md +++ b/README.md @@ -1,33 +1,147 @@ # Zen Garden -... +minimalistic meditation timer to help you find your zen fast + +--> insert gif animation from amiresponsive +--> insert Link and comment where site is deployed +--> insert link to meditation ## UX + +Purpose +- relieve stress +- increase well being +- stress in everyday life +- hard to find time to sit still +- meditate myself and find it very positive +- idea to build something that i can use myself and help others to get into the practice seemed compelling Who? +- site is targeted to users who now basic principles or practices of meditation who are looking for a solution to track their meditation time + Why? +- eventhou it would be great to have unlimited time for meditation like a zen monk everyday life has its demands and we can often only slice a couple of minutes out of the day +- therefor the timer helps to enjoy the meditation sitting without worrying about meditating too long or too short + What? +- core feature functionality of this site is to provide an meditation timer +- start of a session and is signaled by nice bell sound +- user has the option to activate ambient sound, choose the prefered meditation time (5, 10, 15, 20 Minutes) and a background ### User Stories +* As a meditator i want to choose between longer and shorter sessions, so that i can accustom my practice to my liking. +* As a mediator i want to have a count down button after starting the mediation, so that i have time to close my eyes and adjust my seating before the "real" practice starts. +* As a meditator i want to be able to start / stop the timer, so that i can react to interruptions. +* As a meditator i want to be informed when a session is done, so that i know when my time is up. +* As a meditator i want to be able to activate / deactivate whitenoise, so that i have the chance to focus on my meditation in noisy surroundings +* As a mediator i want to keep track of my day-to-day practice, so i keep being motivated even on days where my energy is low +* As a meditator i want to see inspiration quotes, so that my mind has something to ponder on during my day. +* As a meditator i want to have beautiful backgrounds, so that my mind is in a positive state. + ### Wireframes +* wireframes where designed with balsamiq and can be found here: + +* wireframes vs finished project +--> Add table with comparison + +### UI-Design + +* Structure +** single page +** site with 4 Sections: Logo and Settings, Quotes, Timer, Streakbar + +* Colour scheme +** orange as highlighting color and white font colour +** pictures with grey "filter" to standardize the looking + +* font +** "Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types." + + ## Features -... +* Timer incl. Control, Start / Finish Sound + +* Inspirational Quotes + +* Ambient Sound can be activated/deactivated incl. volume controle + +* 7-Day-Streak + +* Background-Image can be switched (Morning, Afternoon, Random) + +* Warm Up & Cool-Down Time can be activated + -### Existing Features +### Finished Features + +* Timer inkl. Control +** Interactive countdown timer with animated circle created through the use of html, css, javascript +** countdown time can be adjusted (5, 10, 15, 20 Minutes) +** countdown can be restored after finishing a session +** countdown can be started, stopped and resumed + +* Inspirational Quotes + +* Ambient Sound can be activated/deactivated incl. volume controle +** integrated soundmanager2 (ADD LINK) to handle playing of songs and support different browser +** integrated start and endbell +** integrated option to play ambient sound (river sound) + +* 7-Day-Streak +** day to day activities are tracked through 2 localstorage variables (Number of Sessions & Date last session completed) +* Background can be switched (Morning, Afternoon, Random) +** depending on the time of the day the user gets a different image +** in the setting modal the user has the chance to manually switch between morning, afternoon or a random background image. +** random background image is pulled from unsplash (https://source.unsplash.com) ### Features Left to Implement -- Another feature idea -### Features for the Feature +* Warm Up & Cool-Down Time can be activated + +### Features for the Future + +* Track amount of completed streaks (e.g. 4 x 7-Day-Streaks) + +* Integrate reward program for multiple completed streaks + +* As user accaptance increases it could be interesting to store the user activities to a server to provide cross device support + +* in order to support cross device support a user data base would also be a helpful feature ## Technologies Used -- [Example](https://example.com) - - The project uses **Example** to simplify DOM manipulation. +Languages + +* HTML5 +* CSS3 +* JavaScript + +Frameworks, Libraries & Programs + +* Bootstrap 4.5.0 +** +* Font Awesome 5.13.0 +** +* SoundManager2 +** SoundManager2 helps with audio() support abroad various browser +* Google Fonts +** +* jQuery +** +* Git +** +* GitHub +** +* Gitpod +** +* Balsamiq +** +* Am I responsive +** ## Testing @@ -35,8 +149,36 @@ What? ### Manual Testing +1. Start Stop of Timer +1. Entering Settings + 1. Switching Meditation-Duration while Timer is playing + + ## Deployment +Deployment via Github Pages +* Log in to GitHub +* Choose prefered GitHub Repository +* Navigate to Repository Settings +* Scroll to GitHub Pages Section +* Set Source from "None" to "Master Branch" + +Working with the Code + +Option A: Make a Local Clone from GitHub Repository (also see https://docs.github.com/en/free-pro-team@latest/github/creating-cloning-and-archiving-repositories/cloning-a-repository) +* Navigate to Mainpage of the repository +* Click on "Code" button +* Choose "Clone with HTTPs" & copy URL +* Open Terminal +* Change the current working directory to prefered location +* Type git clone and past copied URL +```git clone https://github.com/p0wen/zengarden.git``` +* Press Enter to create local clone + +Option B: Fork the repository (also see https://docs.github.com/en/free-pro-team@latest/github/getting-started-with-github/fork-a-repo): +* Navigate to Mainpage of the repository +* Click Fork in the top-right corner +* you sh ## Credits