-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
96 lines (77 loc) · 3.93 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Posture Correction Alarm | Posture Monitoring System</title>
<link rel="icon" href="images/webcam.png" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"
type="text/javascript"
></script>
<link href="https://fonts.googleapis.com/css2?family=PT+Sans&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/ml5.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="video.js"></script>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="container p-5 mt-10" >
<div class="row total">
<div class="col-lg-5 p-3">
<h2 id="head">Posture Correction</h2>
<div id="hl"></div>
</div>
<div class="col-lg-1" id="vl"></div>
<div class="col-lg-6 p-2">
<div class="container">
<div class="row" id="dev-summary">
<div class="col-lg-6 mt-2 sub-left">
<h2 id="dev" >Please sit straight</h2>
</div>
<!--
<div class="col-lg-6 sub-right">
<img src="images/logo.png" class="tfimage" width="300px" height="45px">
</div> -->
</div>
</div>
</div>
</div>
</div>
<!-- <div class="alert alert-warning alert-dismissible fade show" role="alert">
Please click Allow in the Alert Box Displayed to experience this Poster Detection Alarm System
</div> -->
<marquee id="info">Please Allow your Camera Permission to access the Project.We respect your Privacy.The video Captured will not be sent to Server..</marquee>
<div class="top-buffer">
<div class="leftdiv">
<div id="video" class="video-cont">
</div>
</div>
<div class="rightdiv">
<h3 align="left" id="div-heading">Welcome to Posture Correction Alarm</h3>
<hr>
<p align="left" style="text-justify:inter-word;">
This project is mainly designed for the people who are doing Work at Home(WFH). We used to sit infront of the Computer for long times neglecting the Posture. But this leads to Severe Back Pain. By Switching on, It automatically detects the Posture if you move left or right from the Screen and will notify you with a Warning Sound, and it Blurs the Screen.
</p>
<h5 style="color:#7D8E95;text-align: left;">Instructions to Use:</h5>
<ul align="left">
<li>Click the Start Button Below to start Capturing</li>
<li>Now the System recongnises the position of Eyes, and keeps it as Default.</li>
<li>Now, Move right or Left from the initial direction before</li>
<li>You will notice a Warning Sound and the Screen gets Blurred.</li>
<li>Until you sit in a Right Posture i.e, Initial Posture the Warning Sound will not terminate.</li>
</ul>
<button onClick="start()" id="startstop">
Click here to Experience
</button>
</div>
</div>
<!-- Audio Tag -->
<audio id="audioElement">
<source src="alert1.mp3" type="audio/mp3" />
</audio>
<!-- Video Div -->
<!-- Start Stop Button -->
</body>
</html>