├── .gitattributes
├── .gitignore
├── LICENSE.md
├── README.md
├── netlify.toml
├── package-lock.json
├── package.json
├── public
├── assets
│ ├── cartoon
│ │ ├── happydev.png
│ │ ├── happydev.svg
│ │ ├── neutraldev.png
│ │ ├── neutraldev.svg
│ │ ├── saddev.png
│ │ ├── saddev.svg
│ │ ├── smileydev.png
│ │ └── smileydev.svg
│ ├── exercise.png
│ ├── fire-symbol.ico
│ ├── fire-symbol.png
│ ├── sidebar
│ │ ├── backlogo.png
│ │ ├── backlogo2.png
│ │ ├── earlogi.png
│ │ ├── eyelogo.png
│ │ ├── eyelogo2.png
│ │ ├── home.png
│ │ └── settings.png
│ ├── traianglelogo2.png
│ └── trianglelogo.png
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
├── robots.txt
└── sw.js
└── src
├── App.css
├── App.js
├── components
├── charts
│ ├── BarChart.js
│ ├── LineChart.js
│ └── PieChart.js
├── core
│ ├── Modal.js
│ ├── Nav.js
│ ├── Score.js
│ ├── Sidebar.js
│ ├── TimerClock.js
│ └── Toggles.js
└── onboarding
│ ├── Onboarding.js
│ ├── OnboardingBackCare.js
│ ├── OnboardingBackTrain.js
│ ├── OnboardingHow.js
│ ├── OnboardingName.js
│ ├── OnboardingNotifs.js
│ └── OnboardingSteps.js
├── constants
└── about.constant.js
├── css
├── base
│ ├── reset.css
│ └── root.css
├── components
│ ├── alert.css
│ ├── modal.css
│ ├── nav.css
│ ├── sidebar.css
│ ├── timerclock.css
│ └── toggle.css
├── pages
│ ├── care.css
│ ├── dashboard.css
│ ├── onboarding.css
│ └── trainback.css
├── style.css
└── utilities
│ ├── colors.css
│ ├── container.css
│ ├── display.css
│ ├── flex.css
│ ├── grid.css
│ ├── spacing.css
│ └── typography.css
├── index.css
├── index.js
├── screens
├── Aboutus.js
├── BackCare.js
├── Dashboard.js
├── EarCare.js
├── Exercise.js
├── EyeCare.js
├── HowtoUse.js
└── TrainBackCare.js
└── services
├── datahandling.js
└── notifications.js
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 Siddhi Gate
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Dev Care: One stop solution to take care of your health as developers 👩💻
2 | One-stop solution to take care of your health as developers. Dev Care will help you to take care of your back, eyes, and ears while working. The solutions we are working with are as follows:
3 |
4 | ## Features
5 |
6 | ### Back health:
7 | For back health, the app has the feature of posture detection. It detects your posture at regular intervals and reminds you to sit straight if you are not.
8 |
9 |
10 | ### Eyes health:
11 |
12 | To relax your eyes there is a 20-20-20 rule which states that:
13 |
14 | > For every 20 minutes spent looking at a screen, a person should look at something 20 feet away for 20 seconds
15 |
16 | This exercise relaxes our eyes and reduces eye strain. The app reminds you to follow this exercise at regular intervals.
17 |
18 |
19 | ### Ear health:
20 |
21 | For ear health, there is a 60-60 rule:
22 |
23 | > Only turn your device volume up to 60% and listen for no more than 60 minutes per day
24 |
25 | The app checks if you are using earphones for longer than 60 minutes and reminds you to control your earphone usage if it is becoming unhealthy.
26 |
27 |
28 |
29 | ## App walkthrough✨
30 |
31 | ### Onboarding👋
32 |
33 | When a user visits the app for the first time, initial information and instructions are displayed to the user to make them familiar with the app. This app doesn’t require a login or signup.
34 |
35 | 
36 |
37 |
38 | ### Posture detection initial setup🧍♂️
39 |
40 | The app first needs to understand what a good posture is and what a bad posture is. For that, you’ll need to click at least 10 pictures for both cases. The app will learn from those images what a correct and incorrect posture is. After which, at regular intervals, the app will be able to check your posture and further inform you if it is not correct.
41 |
42 |
43 | 
44 |
45 | ### Dashboard 🏠
46 |
47 | The dashboard displays the countdown timer. You can start and stop it whenever you want. You can opt to select only a few options to receive notifications for between back care, eye care, and ear care. Additionally, the app has a sweet cartoon creator whose mood will depend on how effectively you use this app.
48 | 
49 |
50 |
51 | ### Reminders 🔔
52 |
53 | You’ll receive reminders for doing the exercise, if your posture is incorrect and if you are using your earphones more than the limit at regular intervals.
54 |
55 | 
56 |
57 | ### Analysis📊
58 |
59 | Dev Care will perform an analysis of your habits and visualize them through different charts. For back care, a pie chart is used to visualize how many times you are found sitting in good and bad posture. For eye care, a line chart is used to depict how many times a day you follow the exercise. For ear care, a bar graph is used to depict the daily usage of earphones.
60 |
61 |
62 | 
63 |
64 |
65 | ## Technologies and Tools used🛠
66 | - [React JS](https://reactjs.org/)
67 | - [TensorFlow JS](https://www.tensorflow.org/js)
68 | - [Chart JS](https://www.chartjs.org/)
69 |
--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [[redirects]]
2 | from = "/*"
3 | to = "/index.html"
4 | status = 200
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "dev-care",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@tensorflow-models/knn-classifier": "^1.2.2",
7 | "@tensorflow-models/mobilenet": "^2.1.0",
8 | "@tensorflow/tfjs": "^3.13.0",
9 | "@testing-library/jest-dom": "^5.16.2",
10 | "@testing-library/react": "^12.1.2",
11 | "@testing-library/user-event": "^13.5.0",
12 | "react": "^17.0.2",
13 | "react-chartjs-2": "^4.0.1",
14 | "react-countdown": "^2.3.2",
15 | "react-dom": "^17.0.2",
16 | "react-router-dom": "^6.2.1",
17 | "react-scripts": "5.0.0",
18 | "react-webcam": "^6.0.1",
19 | "web-vitals": "^2.1.4"
20 | },
21 | "scripts": {
22 | "start": "react-scripts start",
23 | "build": "CI= react-scripts build",
24 | "test": "react-scripts test",
25 | "eject": "react-scripts eject"
26 | },
27 | "eslintConfig": {
28 | "extends": [
29 | "react-app",
30 | "react-app/jest"
31 | ]
32 | },
33 | "browserslist": {
34 | "production": [
35 | ">0.2%",
36 | "not dead",
37 | "not op_mini all"
38 | ],
39 | "development": [
40 | "last 1 chrome version",
41 | "last 1 firefox version",
42 | "last 1 safari version"
43 | ]
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/public/assets/cartoon/happydev.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/siddhigate/dev-care-app/1231a8fb9d9d66af7660c97ba9fc893d75a790cd/public/assets/cartoon/happydev.png
--------------------------------------------------------------------------------
/public/assets/cartoon/happydev.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/assets/cartoon/neutraldev.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/siddhigate/dev-care-app/1231a8fb9d9d66af7660c97ba9fc893d75a790cd/public/assets/cartoon/neutraldev.png
--------------------------------------------------------------------------------
/public/assets/cartoon/neutraldev.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/assets/cartoon/saddev.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/siddhigate/dev-care-app/1231a8fb9d9d66af7660c97ba9fc893d75a790cd/public/assets/cartoon/saddev.png
--------------------------------------------------------------------------------
/public/assets/cartoon/saddev.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/assets/cartoon/smileydev.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/siddhigate/dev-care-app/1231a8fb9d9d66af7660c97ba9fc893d75a790cd/public/assets/cartoon/smileydev.png
--------------------------------------------------------------------------------
/public/assets/cartoon/smileydev.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/assets/exercise.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/siddhigate/dev-care-app/1231a8fb9d9d66af7660c97ba9fc893d75a790cd/public/assets/exercise.png
--------------------------------------------------------------------------------
/public/assets/fire-symbol.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/siddhigate/dev-care-app/1231a8fb9d9d66af7660c97ba9fc893d75a790cd/public/assets/fire-symbol.ico
--------------------------------------------------------------------------------
/public/assets/fire-symbol.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/siddhigate/dev-care-app/1231a8fb9d9d66af7660c97ba9fc893d75a790cd/public/assets/fire-symbol.png
--------------------------------------------------------------------------------
/public/assets/sidebar/backlogo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/siddhigate/dev-care-app/1231a8fb9d9d66af7660c97ba9fc893d75a790cd/public/assets/sidebar/backlogo.png
--------------------------------------------------------------------------------
/public/assets/sidebar/backlogo2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/siddhigate/dev-care-app/1231a8fb9d9d66af7660c97ba9fc893d75a790cd/public/assets/sidebar/backlogo2.png
--------------------------------------------------------------------------------
/public/assets/sidebar/earlogi.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/siddhigate/dev-care-app/1231a8fb9d9d66af7660c97ba9fc893d75a790cd/public/assets/sidebar/earlogi.png
--------------------------------------------------------------------------------
/public/assets/sidebar/eyelogo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/siddhigate/dev-care-app/1231a8fb9d9d66af7660c97ba9fc893d75a790cd/public/assets/sidebar/eyelogo.png
--------------------------------------------------------------------------------
/public/assets/sidebar/eyelogo2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/siddhigate/dev-care-app/1231a8fb9d9d66af7660c97ba9fc893d75a790cd/public/assets/sidebar/eyelogo2.png
--------------------------------------------------------------------------------
/public/assets/sidebar/home.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/siddhigate/dev-care-app/1231a8fb9d9d66af7660c97ba9fc893d75a790cd/public/assets/sidebar/home.png
--------------------------------------------------------------------------------
/public/assets/sidebar/settings.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/siddhigate/dev-care-app/1231a8fb9d9d66af7660c97ba9fc893d75a790cd/public/assets/sidebar/settings.png
--------------------------------------------------------------------------------
/public/assets/traianglelogo2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/siddhigate/dev-care-app/1231a8fb9d9d66af7660c97ba9fc893d75a790cd/public/assets/traianglelogo2.png
--------------------------------------------------------------------------------
/public/assets/trianglelogo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/siddhigate/dev-care-app/1231a8fb9d9d66af7660c97ba9fc893d75a790cd/public/assets/trianglelogo.png
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/siddhigate/dev-care-app/1231a8fb9d9d66af7660c97ba9fc893d75a790cd/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | Dev Care
28 |
29 |
30 |
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/siddhigate/dev-care-app/1231a8fb9d9d66af7660c97ba9fc893d75a790cd/public/logo192.png
--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/siddhigate/dev-care-app/1231a8fb9d9d66af7660c97ba9fc893d75a790cd/public/logo512.png
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/public/sw.js:
--------------------------------------------------------------------------------
1 | self.addEventListener('notificationclick', function(event) {
2 |
3 | if (!event.action) {
4 | // Was a normal notification click
5 | console.log(event.notification.data)
6 | self.clients.openWindow(event.notification.data+'exercise')
7 | console.log('Notification Click.');
8 | event.notification.close();
9 | return;
10 | }
11 |
12 | switch (event.action) {
13 | case 'exercise-action':
14 | console.log('Do exercise');
15 | self.clients.openWindow(event.notification.data+'exercise')
16 | break;
17 | case 'posture-action':
18 | console.log('Incorrect posture');
19 | break;
20 | default:
21 | console.log(`Unknown action clicked: '${event.action}'`);
22 | break;
23 | }
24 | });
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | height: 40vmin;
7 | pointer-events: none;
8 | }
9 |
10 | @media (prefers-reduced-motion: no-preference) {
11 | .App-logo {
12 | animation: App-logo-spin infinite 20s linear;
13 | }
14 | }
15 |
16 | .App-header {
17 | background-color: #282c34;
18 | min-height: 100vh;
19 | display: flex;
20 | flex-direction: column;
21 | align-items: center;
22 | justify-content: center;
23 | font-size: calc(10px + 2vmin);
24 | color: white;
25 | }
26 |
27 | .App-link {
28 | color: #61dafb;
29 | }
30 |
31 | @keyframes App-logo-spin {
32 | from {
33 | transform: rotate(0deg);
34 | }
35 | to {
36 | transform: rotate(360deg);
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import "./css/style.css";
2 | import { BrowserRouter, Routes, Route } from "react-router-dom";
3 | import Dashboard from "./screens/Dashboard";
4 | import BackCare from "./screens/BackCare";
5 | import EyeCare from "./screens/EyeCare";
6 | import EarCare from "./screens/EarCare";
7 | import Exercise from "./screens/Exercise";
8 | import TrainBackCare from "./screens/TrainBackCare";
9 | import AboutUs from "./screens/Aboutus";
10 | import HowtoUse from "./screens/HowtoUse";
11 |
12 | function App() {
13 | return (
14 |
15 |
16 | } />
17 | } />
18 | } />
19 | } />
20 | } />
21 | } />
22 | } />
23 | } />
24 |
25 |
26 | );
27 | }
28 |
29 | export default App;
30 |
--------------------------------------------------------------------------------
/src/components/charts/BarChart.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import {
3 | Chart as ChartJS,
4 | CategoryScale,
5 | LinearScale,
6 | BarElement,
7 | Title,
8 | Tooltip,
9 | Legend,
10 | } from 'chart.js';
11 | import { Bar } from 'react-chartjs-2';
12 |
13 | ChartJS.register(
14 | CategoryScale,
15 | LinearScale,
16 | BarElement,
17 | Title,
18 | Tooltip,
19 | Legend
20 | );
21 |
22 | export const options = {
23 | responsive: true,
24 | maintainAspectRatio: false,
25 | plugins: {
26 | title: {
27 | display: true,
28 | text: 'Ear Care Analysis',
29 | },
30 | },
31 | };
32 |
33 | const labels = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
34 |
35 |
36 | export function BarChart() {
37 |
38 | const [earData, setEarData] = useState([0,0,0,0,0,0,0])
39 |
40 |
41 | useEffect(() => {
42 | let earData = JSON.parse(localStorage.getItem("eardata"));
43 | setEarData(earData);
44 | }, [])
45 |
46 | const data = {
47 | labels,
48 | datasets: [
49 | {
50 | label: 'Earphone Usage Time',
51 | data: earData,
52 | backgroundColor: 'rgba(0, 153, 246, 0.5)',
53 | }
54 | ],
55 | };
56 |
57 | return ;
58 | }
59 |
--------------------------------------------------------------------------------
/src/components/charts/LineChart.js:
--------------------------------------------------------------------------------
1 | import {
2 | Chart as ChartJS,
3 | CategoryScale,
4 | LinearScale,
5 | PointElement,
6 | LineElement,
7 | Title,
8 | Tooltip,
9 | Legend,
10 | Filler,
11 | } from "chart.js";
12 | import { useState, useEffect } from "react";
13 | import { Line } from "react-chartjs-2";
14 |
15 | ChartJS.register(
16 | CategoryScale,
17 | LinearScale,
18 | PointElement,
19 | LineElement,
20 | Title,
21 | Tooltip,
22 | Legend,
23 | Filler
24 | );
25 |
26 |
27 | export function LineChart() {
28 | const [eyeData, setEyeData] = useState([0, 0, 0, 0, 0, 0, 0]);
29 |
30 | useEffect(() => {
31 | let eyedata = JSON.parse(localStorage.getItem("eyedata"));
32 | setEyeData(eyedata);
33 | }, []);
34 |
35 | const labels = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
36 | const data = {
37 | labels: labels,
38 | datasets: [
39 | {
40 | label: "Eye Care Exercises Analysis",
41 | fill: true,
42 | data: eyeData,
43 | borderColor: "rgba(0, 153, 246, 0.5)",
44 | backgroundColor: "rgba(0, 153, 246, 0.2)",
45 | responsive: true,
46 | },
47 | ],
48 | };
49 |
50 |
51 | return (
52 |
59 | );
60 | }
61 |
--------------------------------------------------------------------------------
/src/components/charts/PieChart.js:
--------------------------------------------------------------------------------
1 | import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
2 | import { useState, useEffect } from 'react';
3 | import { Pie } from 'react-chartjs-2';
4 |
5 | ChartJS.register(ArcElement, Tooltip, Legend);
6 |
7 | const PieChart = () => {
8 |
9 | const [badcount, setBadCount] = useState(0);
10 | const [goodcount, setGoodCount] = useState(0);
11 |
12 | useEffect(() => {
13 | let badpostureCount = Number(localStorage.getItem("badposturecount"));
14 | let goodpostureCount = Number(localStorage.getItem("goodposturecount"));
15 |
16 | if(badpostureCount) {
17 | setBadCount(badpostureCount);
18 | }
19 | if(goodpostureCount) {
20 | setGoodCount(goodpostureCount)
21 | }
22 | }, [])
23 |
24 |
25 | const data = {
26 | labels: ['Bad posture', 'Good posture'],
27 | datasets: [
28 | {
29 | label: '# count',
30 | data: [badcount, goodcount],
31 | backgroundColor: [
32 | 'rgba(220, 38, 38, 0.7)',
33 | 'rgba(0, 153, 246, 0.7)',
34 |
35 | ],
36 | borderColor: [
37 | 'rgba(220, 38, 38, 1)',
38 | 'rgba(0, 153, 246, 1)',
39 |
40 | ],
41 | borderWidth: 1,
42 |
43 |
44 | },
45 | ],
46 | };
47 |
48 | if(badcount === 0 & goodcount === 0){
49 | return
50 |
51 |
Start using this feature to view the graph analysis here!
52 |
6 |
7 | {children}
8 |
9 |
8 |
9 |
10 |
11 |
devcare
12 |
13 |
14 |
6 |
7 |
8 | You are taking good care of your health!
9 |
10 |
6 | {minutes} : {seconds}
7 |
8 | );
9 | };
10 |
11 | export default TimerClock;
12 |
--------------------------------------------------------------------------------
/src/components/core/Toggles.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 |
3 | const Toggles = ({
4 | backOption,
5 | setBackOption,
6 | eyeOption,
7 | setEyeOption,
8 | soundOption,
9 | setSoundOption,
10 | }) => {
11 | return (
12 |
13 |
14 |
Back Care:
15 |
16 |
26 |
27 |
28 |
29 |
Eye Care:
30 |
31 |
41 |
42 |
43 |
44 |
Ear Care:
45 |
46 |
56 |
57 |
58 |
6 |
7 |
8 | Back Care
9 |
10 |
14 |
15 |
16 |
17 |
18 |
19 | Take pictures of good and bad
20 | posture{" "}
21 |
22 |
23 | App will learn the difference
24 | between them
25 |
26 |
27 | Notify you if you are in bad posture
28 |
29 |
30 |
31 |
32 |
38 |
39 |
7 |
8 |
9 | Back Care
10 |
11 |
15 |
16 |
17 |
18 |
19 |
20 | Lets teach our app what a
21 | good posture and a bad posture is{" "}
22 |
23 |
24 |
25 |
26 |
27 |
30 |
31 |
32 |
6 |
7 |
8 | How?
9 |
10 |
14 |
15 |
16 |
17 |
18 |
19 | Detect your posture and
20 | notify
21 |
22 |
23 | Reminder for an exercise
24 |
25 |
26 | Analysis of your habits
27 |
28 |
29 |
30 |
31 |
37 |
38 |
24 |
25 |
26 | Hello!
27 |
28 |
32 |
33 |
57 |
10 |
11 |
12 | Reminder
13 |
14 |
18 |
19 |
20 |
21 |
22 |
23 | Allow Notifications to remind you
24 |
25 |
26 |
27 |
28 |
34 |
35 |
6 |
7 |
8 | Features
9 |
10 |
14 |
15 |
16 |
17 |
18 | We help you to take care of your:{" "}
19 |
20 |
21 |
22 | Back
23 |
24 |
25 | Eye
26 |
27 |
28 | Ear
29 |
30 |
31 |
32 |
33 |
39 |
40 |
11 |
12 |
13 |
14 | About Us
15 |
16 |
17 | {AboutText.PageHeadingText}
18 |
19 |
20 |
Back health
21 |
22 | {AboutText.BackHealthText}
23 |
24 |
25 |
Eye health
26 |
27 | {AboutText.EyeHealthText}
28 |
29 |
30 |
Ear health
31 |
32 | {AboutText.EarHealthText}
33 |
34 |
36 |
37 |
16 |
17 |
18 |
19 | Back Care
20 |
23 |
24 |
25 |
26 |
How it works?
27 |
Find out how this feature works
28 |
34 |
35 |
36 |
Take new pics
37 |
38 | Will help the app to determine whether you are sitting in
39 | correct posture or not
40 |
41 |
42 |
{" "}
45 |
46 |
47 |
48 |
49 |
53 |
57 |
setShowModal(false)}
67 | >
68 |
69 | Back Care
70 |
71 |
75 |
76 |
77 |
78 |
79 |
80 | Take pictures of good and
81 | bad posture{" "}
82 |
83 |
84 | App will learn the
85 | difference between them
86 |
87 |
88 | Notify you if you are in bad
89 | posture
90 |
91 |
92 |
93 |
94 |
100 |
101 |
225 |
226 |
227 | Hello {name && {name}}👋
228 |
229 |
230 |
231 |
238 |
246 |
247 |
248 |
249 |
252 | {isStarted && (
253 |
256 | )}
257 |
258 |
259 |
261 |
262 |
263 |
16 |
17 |
18 |
19 | Ear Care
20 |
21 |
22 |
23 |
24 |
25 |
26 |
How it works?
27 |
Find out how this feature works
28 |
34 |
35 |
36 |
Ear Exercises
37 |
38 | Get to know how to take care of your ears.
39 |
40 |
46 |
47 |
48 |
49 |
54 |
58 |
setshowHowModal(false)}
68 | >
69 |
70 | Ear Care
71 |
72 |
77 |
78 |
79 |
80 |
81 |
82 | {" "}
83 | It is recommended to use
84 | earphones max for 60 minutes per day.{" "}
85 |
86 |
87 | We will remind you when u
88 | reach the time limit.
89 |
90 |
91 | We will visualize your
92 | earphone usage time through chart
93 |
94 | {/*
This will help your eyes to relax.
*/}
95 |
96 |
97 |
98 |
104 |
105 |
112 |
116 |
setExerciseModal(false)}
126 | >
127 |
128 | Ear Care
129 |
130 |
135 |
136 |
137 |
138 |
139 |
Follow 60-60 rule.
140 |
141 | Use earphones maximum for 60
142 | minutes per day.
143 |
144 |
145 | Keep the volume 60%
146 | maximum.
147 |
148 | {/*
This will help your eyes to relax.
*/}
149 |
150 |
151 |
152 |
158 |
159 |
7 |
Take care👋
8 |
9 |
16 |
17 |
Look 20 feet away for 20 seconds.
18 |
19 |
25 |
26 |
33 |
Hurray!
34 |
35 |
42 |
43 |
44 | Yayy! You have done the exercise. You can close this tab now.
45 |
46 |
47 |
48 |
49 |
66 |
67 | {isDone ? (
68 |
69 | ) : (
70 |
71 | )}
72 |
73 |
74 | );
75 | };
76 |
77 | export default Exercise;
78 |
--------------------------------------------------------------------------------
/src/screens/EyeCare.js:
--------------------------------------------------------------------------------
1 | import Nav from "../components/core/Nav";
2 | import Sidebar from "../components/core/Sidebar";
3 | import "../css/style.css";
4 | import { LineChart } from "../components/charts/LineChart";
5 | import { useState } from "react";
6 | import Modal from "../components/core/Modal";
7 |
8 | function EyeCare() {
9 | const [showHowModal, setshowHowModal] = useState(false);
10 | const [showexerciseModal, setExerciseModal] = useState(false);
11 |
12 | return (
13 | <>
14 |
15 |
16 |
17 |
18 |
19 | Eye Care
20 |
21 |
22 |
23 |
24 |
25 |
26 |
How it works?
27 |
Find out how this feature works
28 |
34 |
35 |
36 |
Eye Exercises
37 |
38 | Get to know some eye exercises to relax your eyes.
39 |
40 |
46 |
47 |
48 |
49 |
54 |
58 |
setshowHowModal(false)}
68 | >
69 |
70 | Eye Care
71 |
72 |
77 |
78 |
79 |
80 |
81 |
82 | {" "}
83 | We will help you to relax your
84 | eyes.{" "}
85 |
86 |
87 | We will remind you every 20
88 | minutes
89 |
90 |
91 | Click on the notification and
92 | do the given exercise
93 |
94 |
95 |
96 |
97 |
103 |
104 |
111 |
115 | setExerciseModal(false)}
125 | >
126 |
127 | Eye Care
128 |
129 |
130 |
135 |
136 |
137 |
138 | {" "}
139 | Every 20 minutes you spend looking at the screen look 20 feet
140 | away for 20 seconds.
141 |
142 |
143 |
144 |
145 |
151 |
152 |
11 |
12 |
13 |
14 | How to use?
15 |
16 |
17 | Dev care will help you to take care of your health as
18 | developers.
19 |
20 |
21 |
Back care
22 |
23 |
24 | -
25 | Teach the app what a good and bad posture is{" "}
26 |
35 | Here
36 |
37 |
38 | - Click atleast 5 pictures in good and bad posture is
39 | -
40 | Test the posture detection, click more pics for more
41 | accurate results
42 |
43 | - Come back to home and start the timer
44 | -
45 | Every 20 minutes the app will check your posture and will
46 | remind you if it is incorrect
47 |
48 |
49 |
50 |
51 |
Eye care
52 |
53 |
54 | - Start the timer
55 | -
56 | Every 20 minutes the app will remind you to do an exercise
57 |
58 | - Click on the notification
59 | -
60 | The app will navigate you to an exercise page. Click on Done
61 | when u r done doing the exercise
62 |
63 | -
64 | The exercise is to look 20 feet away for 20 seconds every 20
65 | minutes to relax our eyes.
66 |
67 |
68 |
69 |
70 |
Ear care
71 |
72 |
73 | - Click on the toggle button of Ear care on dashboard
74 | - Give earphone permission
75 | -
76 | Now after 40 minutes the app will remind you that you are
77 | reaching the daily limit of earphone usage time
78 |
79 | -
80 | It is advisable to use earphones for maximum 60 minutes a
81 | day at a maximum of 60% volume
82 |
83 |
84 |
85 |
87 |
88 |
101 |
102 |
103 |
104 | Teach this app 👩🏫
105 |
106 | Teach this app the difference between good posture and bad posture
107 |
108 |
109 |
110 |
116 | {" "}
117 |
131 |
132 |
133 |
134 | {saving && (
135 |
139 | Please wait. The app is learning about your posture.
140 |
141 | )}
142 |
145 |
148 |
155 | {isTrained && (
156 |
159 | )}
160 | {isTrained && result &&
{result}
}
161 | {isTrained && (
162 |
163 | {" "}
164 |
165 | {" "}
166 |
167 | Back to home
168 |
169 |
170 |
171 | )}
172 |
173 |
175 |
176 | {isError && (
177 |
178 |
179 |
Error
180 |
181 |
188 |
189 |
190 | Problem with camera. Can't use this feature :(
191 |
192 |
193 |
194 |
197 |
198 |
199 |
201 | )}
202 |
203 | {showModal && (
204 |
205 |
206 |
207 |
208 | Back Care
209 |
210 |
214 |
215 |
216 |
217 |
218 |
219 | Take pictures of good
220 | and bad posture{" "}
221 |
222 |
223 | Click on Done to finish
224 |
225 |
226 | More the pics
227 | better it will be to detect{" "}
228 |
229 |
230 |
231 |
232 |
238 |
239 |
241 | )}
242 |
243 | {showAlert && (
244 |
245 | We don't save your data. Everything resides only on your browser.{" "}
246 | setShowAlert(false)}
249 | >
250 |
251 | )}
252 |
253 | {showDoneModal && (
254 |
255 |
256 |
setShowDoneModal(false)}
265 | >
266 |
267 |
268 | Yayy!
269 |
270 |
274 |
275 |
276 |
277 |
278 |
279 | Now the app knows what a correct posture is. We are ready to
280 | use the app now!
281 |
282 |
283 |
284 |
285 |
286 |
295 |
296 |
297 |
306 |
307 |
309 | )}
310 |