-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
377 lines (339 loc) · 21.4 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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-icon.png">
<link rel="icon" type="image/png" sizes="96x96" href="assets/img/favicon.png">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Heart Disease Predictor</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<link href="assets/css/gaia.css" rel="stylesheet"/>
<!-- Fonts and icons -->
<link href='https://fonts.googleapis.com/css?family=Cambo|Poppins:400,600' rel='stylesheet' type='text/css'>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
<link href="assets/css/fonts/pe-icon-7-stroke.css" rel="stylesheet">
</head>
<body>
<script src="http://code.jquery.com/jquery.js"></script>
<nav class="navbar navbar-default navbar-transparent navbar-fixed-top" color-on-scroll="200">
<!-- if you want to keep the navbar hidden you can add this class to the navbar "navbar-burger"-->
<div class="container">
<div class="navbar-header">
<button id="menu-toggle" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar bar1"></span>
<span class="icon-bar bar2"></span>
<span class="icon-bar bar3"></span>
</button>
<div class="navbar-brand">
Welcome To Heart Risk Predictor
</div>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right navbar-uppercase">
<li>
<a href="" target="_blank">Home</a>
</li>
<li class="dropdown">
<!-- <a href="#gaia" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-share-alt"></i> Share
</a> -->
<ul class="dropdown-menu dropdown-danger">
<li>
<a href="#"><i class="fa fa-facebook-square"></i> Facebook</a>
</li>
<li>
<a href="#"><i class="fa fa-twitter"></i> Twitter</a>
</li>
<li>
<a href="#"><i class="fa fa-instagram"></i> Instagram</a>
</li>
</ul>
</li>
<li>
<!-- <a href="http://www.creative-tim.com/product/gaia-bootstrap-template" class="btn btn-danger btn-fill">Free Download</a> -->
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>
<div class="section section-header">
<div class="parallax filter filter-color-red">
<div class="image"
style="background-image: url('assets/img/healthy_lifestyle_heart.jpg')">
</div>
<div class="container">
<div class="content">
<div class="title-area">
<!-- <p>Free Demo</p> -->
<h1 class="title-modern">We're here, Because we Care</h1>
<h3>Fill up a Simple Survey and get to know about all the possible heart risks that you may have, ahead of time.
So, that you can enjoy a healthy life, all the time:)</h3>
<div class="separator line-separator">♦</div>
</div>
<div id= "getStarted" class="button-get-started">
<div class="btn btn-white btn-fill btn-lg">
Get Started
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section">
<div class="container">
<div class="row">
<div id="services" class="title-area">
<h2>Our Services</h2>
<div class="separator separator-danger">✻</div>
<p class="description">We urge you to live a healthy lifestyle, by predicting any heart risks, that you may suffer from, ahead of time.</p>
</div>
</div>
<div class="row">
<div id="stats" style="cursor: pointer;" class="col-md-6">
<div class="info-icon">
<div class="icon text-danger">
<i class="pe-7s-graph1"></i>
</div>
<div><h3>Statistics</h3></div>
<p class="description">We extract meaningful information from our and provide legitimate stats on the various aspects, for instance the frequency of attacks based on the age.</p>
</div>
</div>
<div class="col-md-6">
<div class="info-icon">
<div class="icon text-danger">
<i class="pe-7s-note2"></i>
</div>
<h3>Forms</h3>
<p class="description">Fill up a Simple Survey and get to know about the health of you heart.</p>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Lifestyle Form</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<label>1) Age:</label>
<input class = "form-control" id = "age" type="number" min="0">
<label>2) Gender:</label>
<div class="radio"><label> <input type="radio" name="gender" value="1">Male</label></div>
<div class="radio"><label><input type="radio" name="gender" value="0">Female</label></div>
<label>3) Chest Pain Type:</label> <select id="cp" class = "form-control">
<option value="0" selected="True">None</option>
<option value="1">Typical Angina</option>
<option value="2">Atypical Angina</option>
<option value="3">Non-Anginal Pain</option>
<option value="4">Asymptomatic</option>
</select>
<label>4) Resting Blood Pressure:</label> <input class = "form-control" type="text" id="rbp" placeholder="(in mm Hg)" size="20%">
<label>5) Serum Cholestrol:</label> <input type="text" class = "form-control" id="chol" placeholder="(in mg/dl)">
<label>6) Is Your Fasting Blood Sugar > 120 mg/dl:</label>
<div class="radio"><label><input type="radio" name="fbs" value=1>True</label></div>
<div class="radio"><label><input type="radio" name="fbs" value=0>False</label></div>
<label>7) Resting Electrocardiographic Results:</label>
<div class="radio"><label><input type="radio" name="restecg" value=0>Normal</label></div>
<div class="radio"><label><input type="radio" name="restecg" value=1>Having ST-T wave abnormality (T wave inversions and/or ST elevation or depression of > 0.05 mV)</label></div>
<div class="radio"><label><input type="radio" name="restecg" value=2>Showing probable or definite left ventricular hypertrophy by Estes' criteria</label></div>
<label>8) Maximum Heart Rate Achieved:</label> <input type="text" class = "form-control" id="thalach">
<label>9) Exercise Induced Angina:</label>
<div class="radio"><label><input type="radio" name="exang" value=0>NO</label></div>
<div class="radio"><label><input type="radio" name="exang" value=1>YES</label></div>
<label>10) ST depression induced by exercise relative to rest:</label><input type="text" class = "form-control" id="oldpeak">
<label>11) The slope of the peak exercise ST segment:</label> <br>
<div class="radio"><label><input type="radio" name="slope" value=1>Upsloping</label></div>
<div class="radio"><label><input type="radio" name="slope" value=2>Flat</label></div>
<div class="radio"><label><input type="radio" name="slope" value=3>Downsloping</label></div>
<label>12) Number of major vessels (0-3) colored by flourosopy:</label><input class = "form-control" type="number" id="ca" min="0" max="3">
<label>13) Thalassemia:</label> <input type="number" class = "form-control" id="thal" min="0" max="7">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button id="send_data" type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!--Modal 2-->
<div class="modal fade" id="exampleModalLong2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Lifestyle Form</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<label>1) Age:</label>
<input class = "form-control" id = "age_short" type="number" min="0">
<label>2) Gender:</label>
<div class="radio"><label> <input type="radio" name="gender" value="1">Male</label></div>
<div class="radio"><label><input type="radio" name="gender" value="0">Female</label></div>
<label>3) Chest Pain Type:</label> <select id="cp" class = "form-control">
<option value="0" selected="True">None</option>
<option value="1">Typical Angina</option>
<option value="2">Atypical Angina</option>
<option value="3">Non-Anginal Pain</option>
<option value="4">Asymptomatic</option>
</select>
<label>4) Resting Blood Pressure:</label> <input class = "form-control" type="text" id="rbp_short" placeholder="(in mm Hg)" size="20%">
<label>5) Serum Cholestrol:</label> <input type="text" class = "form-control" id="chol_short" placeholder="(in mg/dl)">
<label>6) Is Your Fasting Blood Sugar > 120 mg/dl:</label>
<div class="radio"><label><input type="radio" name="fbs" value=1>True</label></div>
<div class="radio"><label><input type="radio" name="fbs" value=0>False</label></div>
<label>7) Maximum Heart Rate Achieved:</label> <input type="text" class = "form-control" id="thalach_short">
<label>8) Exercise Induced Angina:</label>
<div class="radio"><label><input type="radio" name="exang" value=0>NO</label></div>
<div class="radio"><label><input type="radio" name="exang" value=1>YES</label></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button id="send_less_data" type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!--Modal 3 stats-->
<div class="modal fade" id="exampleModalLong3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div style="width: 1200px" class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Statistics</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div><h3>1) Heart Risks comparison in Males vs Females</h3><img src="output_1_0.png"></div>
<div><h3>2) Plot for Probability of Heart Risks at Different Ages</h3><img src="output_2_0.png"></div>
<div><h3>3) Accuracy plot for different values of K(Doctor's Version)</h3><img src="output_3_0.png"></div>
<div><h3>4) Accuracy plot for different values of K(Common Version)</h3><img src="output_5_0.png"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="section section-our-clients-freebie">
<div class="container">
<div class="title-area">
<div class="separator separator-danger">∎</div><br>
<div class="row">
<div id="formfordoc" style="cursor: pointer;" class="col-md-6">
<h3 class="subtitle text-gray">Are You A Doctor?</h3>
<a href="#testimonial1" role="tab" data-toggle="tab">
<div style="margin-left: auto; margin-right: auto;" class="image-clients">
<img style="height: 7em; width: 8em;" alt="..." class="img-circle" src="assets/img/faces/femaledoc.jpg"/>
</div>
</a>
</div>
<div id = "formforelse" style="cursor: pointer;" class="col-md-6">
<h3 class="subtitle text-gray">Everyone Else</h3>
<a href="#testimonial3" role="tab" data-toggle="tab">
<div style="margin-left: auto; margin-right: auto;" class="image-clients">
<img style="height: 7em; width: 8em;" alt="..." class="img-circle" src="assets/img/faces/face_2.jpg"/>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="section section-our-team-freebie">
<div class="parallax filter filter-color-black">
<div class="image" style="background-image:url('assets/img/header-2.jpeg')">
</div>
<div class="container">
<div class="content">
<div class="row">
<div class="title-area">
<h2>Who We Are</h2>
<div class="separator separator-danger">✻</div>
<p class="description">We're Masters' students from Concordia University who're really passionate about Computer Science and have a vision to make the world a better place to live.</p>
</div>
</div>
<div class="team">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="row">
<div class="col-md-4">
<div class="card card-member">
<div class="content">
<div class="avatar avatar-danger">
<img alt="..." style="height: 7em; width: 10em;" class="img-circle" src="assets/img/faces/Jasraj.png"/>
</div>
<div class="description">
<h3 class="title">Jasraj Singh Bedi</h3>
<p class="small-text">Co-Awesome Software Architect</p>
<p class="description">Jasraj Bedi is currently pursuing his master’s degree in software engineering. He has a keen interest in building full stack applications, web development and learning about new technologies. Jasraj is assisting Corowave Inc. to build an analytical dashboard.</p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card card-member">
<div class="content">
<div class="avatar avatar-danger">
<img alt="..." style="height: 7em; width: 7em;" class="img-circle" src="assets/img/faces/kritika.png"/>
</div>
<div class="description">
<h3 class="title"> Kritika Sharma</h3>
<p class="small-text">Co-Awesome Frontend Developer</p>
<p class="description">I am a dynamic independent girl who came here in Canada with a vision to achieve great success in the Corporate World, and be an inspiration to other girls and actually act as a catalyst in the process of empowering women all over the world.</p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card card-member">
<div class="content">
<div class="avatar avatar-danger">
<img alt="..." style="height: 7em; width: 10em;" class="img-circle" src="assets/img/faces/pranav.png"/>
</div>
<div class="description">
<h3 class="title">Pranav Bhatia</h3>
<p class="small-text">Co-Awesome Backend Developer</p>
<p class="description">Pranav Bhatia is currently pursuing his master’s degree in software engineering. He has a keen interest in building full stack applications, web development and learning about new technologies. Pranav is assisting Go Gap Inc. to build Customer Relationship Management Softwares.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id = "success_alert" class="alert alert-success" role="alert">
You seem to be just fine, but don't take this for granted, Exercise and Eat Healthy to Stay this way!:)
</div>
<div id = "failure_alert" class="alert alert-danger" role="alert">
You have a high probability of having a heart disease, Go see a Doctor Now!
</div>
<footer class="footer footer-big footer-color-black" data-color="black">
</footer>
</body>
<!-- core js files -->
<script src="assets/js/jquery.min.js" type="text/javascript"></script>
<script src="assets/js/bootstrap.js" type="text/javascript"></script>
<!-- js library for devices recognition -->
<script type="text/javascript" src="assets/js/modernizr.js"></script>
<!-- script for google maps -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<!-- file where we handle all the script from the Gaia - Bootstrap Template -->
<script type="text/javascript" src="assets/js/gaia.js"></script>
<script type="text/javascript" src="js/socket.io.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</html>