-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
127 lines (112 loc) · 5.84 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Covid-19 Predictor</title>
<!-- Favicon -->
<link href="./resources/img/favicon.ico" rel="icon" type="image/x-icon" />
<!-- JQuery script (added jQuery script here because Bootstrap JS requires JQuery)-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/30961db8e4.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./resources/css/style.css">
</head>
<body>
<header>
<div class="logo">
<img src="./resources/img/logo.webp" alt="">
<p>COVID-19<br />PREDICTOR</p>
</div>
<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#chart_1">CHARTS</a></li>
</ul>
</nav>
</header>
<main>
<div class="stats">
<p class="update-date">Last updated on : </p>
<div class="latest-report">
<div class="country">
<div class="name">Loading...</div>
<div class="change-country">change</div>
<div class="search-country hide">
<div class="search-box">
<input type="text" id="search-input" placeholder="Search Country...">
<img class="close" src="./resources/img/close.svg" alt="">
</div>
<div class="country-list" id="dynamic-country-list"></div>
</div>
</div>
<div class="total-cases">
<div class="title">Total Cases</div>
<div class="value">0</div>
<div class="new-value">+</div>
<div class="rate-value"></div>
</div>
<div class="recovered">
<div class="title">Recovered</div>
<div class="value">0</div>
<div class="new-value">+</div>
<div class="rate-value"></div>
</div>
<div class="deaths">
<div class="title">Deaths</div>
<div class="value">0</div>
<div class="new-value">+</div>
<div class="rate-value"></div>
</div>
</div>
<div class="row body-row conatiner-fluid">
<div id="regions_div"></div>
</div>
<div class="row body-row conatiner-fluid">
<div class="chart col-lg-6 col-md-12 graph1">
<canvas id="chart_1"></canvas>
<p>Graph above shows actual cases and predicted cases in future. The predictions were built using an epidemiology model SIR and coded in python. More info on SIR Model can be found <a href="https://idmod.org/docs/general/model-sir.html">here</a></p>
</div>
<div class="chart col-lg-6 graph2">
<canvas id="chart_2"></canvas>
<p>Above graph shows countries already recovered from the pandemic and countries yet to recover. The countries at the beginning of the spread start from the top left corner and gradually as the spread comes to an end, it reaches to the bottom right corner of the graph. Countries that have crossed this pink line and gone on the right side of it are considered to have been recovered from the coronavirus spread.
</p>
</div>
</div>
<div class="row body-row conatiner-fluid">
<div class="chart col-lg-6 col-md-12 bottom-chart graph3">
<canvas id="chart_3"></canvas>
</div>
<div class="chart col-lg-6 col-md-12 bottom-chart graph4">
<canvas id="chart_4"></canvas>
</div>
<p>Above 2 graphs can help in understanding when countries may reach the peak of the virus spread. Graph on the left shows Actual % cases and Recovery + Death % cases. These 2 lines have to move towards each other and cross each other.
The graph on the right shows confirmed cases and Recovery + Death cases, when these 2 lines converge and the lines on the left side graph also converge, it can be assumed that a peak is about to occur.</p>
</div>
</div>
</main>
<footer>
<div class="copyright">
<p>Copyright © 2020 Shreoshi Roy & Anshuman Roy</p>
</div>
<div class="contact-icons">
<a href="https://in.linkedin.com/in/shreoshi-roy"><i class="social-icon fab fa-linkedin fa-lg"></i></a>
<a href="https://github.com/shreoshi-roy/Covid-19-Predictor"><i class="social-icon fab fa-github fa-lg"></i></a>
<a href="https://in.linkedin.com/in/anshuman-roy-710b572b"><i class="social-icon fab fa-linkedin fa-lg"></i></a>
</div>
</footer>
<!-- Google Geochart script -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<!-- ChartJS and its plugin scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha256-R4pqcOYV8lt7snxMQO/HSbVCFRPMdrhAFMH+vr9giYI=" crossorigin="anonymous"></script>
<script src="https://rawgit.com/chartjs/chartjs-plugin-annotation/master/chartjs-plugin-annotation.js"></script>
<!-- <script language="JavaScript" src="http://www.geoplugin.net/javascript.gp" type="text/javascript"></script> -->
<!-- Custom JS scripts -->
<script src="resources/js/countries.js"></script>
<script src="resources/js/app.js"></script>
</body>
</html>