-
Notifications
You must be signed in to change notification settings - Fork 0
/
time.html
240 lines (175 loc) · 8.73 KB
/
time.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
<!DOCTYPE html>
<html>
<title>Life Expectancy Predictor</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="icon" href="static/images/favicon.ico">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", Arial, Helvetica, sans-serif}]
.mySlides {display: none}
</style>
<body class="w3-content w3-border-left w3-border-right" style="background-color:rgba(0,0,0,0.3); border-width:5px;">
<!-- Sidebar/menu -->
<nav class="w3-sidebar w3-light-grey w3-collapse w3-top" style="z-index:3;width:260px" id="mySidebar">
<div class="w3-container w3-display-container w3-padding-16">
<h3>Enter your details:</h3>
<form method="POST" action="{{ url_for('interact_life_expectancy', _anchor='Report') }}">
<p> <label><i class="fa fa-male"></i><i class="fa fa-female"></i> Gender</label><br>
<SELECT class="selectpicker" name="sex" style="width:180px;">
<option value="{{default_sex}}" selected>{{default_sex}}</option> ">
<option value="Female">Female</option>
<option value="Male">Male</option>
<option value="Both">Both</option>
</select>
</p>
<p><label><i class="fa fa-calendar-o"></i> Age</label><BR>
<SELECT class="selectpicker" name="age" required style="width:180px;">
<option value="{{default_age}}" selected>{{default_age}}</option>
{% for age in range(1,100) %}
<option value="{{age}}">{{age}}</option>
{% endfor %}
</SELECT>
</p>
<p><label><i class="fa fa-globe"></i> Country</label><Br>
<SELECT class="selectpicker" name="country" style="width:220px; ">
<option value="{{default_country}}" selected>{{default_country}}</option>
{% for country in country_list %}
<option value="{{country}}">{{country}}</option>
{% endfor %}
</SELECT>
</p>
<BR> <p><button class="w3-button w3-dark-grey" type="submit"><i class="fa fa-clock-o w3-margin-right"></i> Time Left to Live</button></p>
</form>
</div>
</nav>
<!-- Top menu on small screens -->
<header class="w3-bar w3-top w3-hide-large w3-black w3-xlarge">
<span class="w3-bar-item">Time Left To Live</span>
<a href="javascript:void(0)" class="w3-right w3-bar-item w3-button" onclick="w3_open()"><i class="fa fa-bars"></i></a>
</header>
<!-- Overlay effect when opening sidebar on small screens -->
<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
<!-- !PAGE CONTENT! -->
<div class="w3-main w3-white" style="margin-left:260px">
<!-- Push down content on small screens -->
<div class="w3-hide-large" style="margin-top:80px"></div>
<!-- Slideshow Header -->
<div class="w3-container" id="apartment">
<h2 class="w3-text-darkblue" style="text-align:center">LIFE EXPENTANCY PREDICTOR</h2>
<div class="w3-display-container mySlides">
<img src="/static/images/time.jpg" style="width:100%;margin-bottom:-6px">
</div>
</div>
<div id="Report" class="w3-container w3-margin-top" id="Report">
<h4><strong>Report</strong></h4>
<div class="w3-row w3-large">
<div id="Report" class="w3-container w3-margin-top" id="Report">
<p>
<TABLE>
<TR>
{{string_to_print}}
{% for imag in healthy_image_list %}
{% if loop.index == 11 or loop.index == 21
or loop.index == 31 or loop.index == 41
or loop.index == 51 or loop.index == 61
or loop.index == 71 or loop.index == 81 %}
</TR><TR>
{% endif %}
<td><img src={{imag}} width="40" height="40"></td>
{% endfor %}
</TR>
</TABLE>
</p>
</div>
</div>
</div>
<hr>
<div class="w3-container" id="apartment">
<H3>Where Do These Life Coefficients Come From?</H3>
The Time-Left-To-Live calculation is based on the following resources and studies:
<BR><BR>
<H4>World Health Organization (WHO) Global Health Observatory Data</H4>
<a href='http://apps.who.int/gho/data/node.wrapper.imr?x-id=65' target='_blank'>Life expectancy at birth (years)</a>
<BR>
The average number of years that a newborn could expect to live, if he or she were to pass through life exposed to the sex- and age-specific death rates prevailing at the time of his or her birth, for a specific year, in a given country, territory, or geographic area.
<BR>
<a href='http://apps.who.int/gho/indicatorregistry/App_Main/view_indicator.aspx?iid=2977' target='_blank'>Life expectancy at age 60 (years)</a>
<BR>
The average number of years that a person of 60 years old could expect to live, if he or she were to pass through life exposed to the sex- and age-specific death rates prevailing at the time of his or her 60 years, for a specific year, in a given country, territory, or geographic area.
<BR><BR>
<H4>Global Health Estimates 2015: 20 Leading Causes of YLL globally, 2015 and 2000</H4>
The years of life lost (percentage of total) indicator measures the YLL due to a cause as a proportion of the total YLL lost in the population due to premature mortality. YLL are calculated from the number of deaths multiplied by a standard life expectancy at the age at which death occurs.
<BR>For more information see: <a href='http://www.who.int/healthinfo/global_burden_disease/estimates/en/index2.html' target='_blank'>Health statistics and information systems: DISEASE BURDEN</a>
<BR><BR>
<H4>Credit scores, cardiovascular disease risk, and human capital</H4>
<a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4260546/">check it here</a>
<BR><BR>
<H4>Has the relation between income inequality and life expectancy disappeared? Evidence from Italy and top industrialised countries.</H4>
<a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC1733006/">check it here</a>
<BR><BR>
<H4>The Population Health Benefits Of A Healthy Lifestyle: Life Expectancy Increased And Onset Of Disability Delayed.</H4>
<a href="https://www.ncbi.nlm.nih.gov/pubmed/28724530">check it here</a>
<BR><BR>
<p style="text-align:center">
</p>
</div>
<!-- Team Container -->
<div class="w3-container w3-padding-64 w3-center" id="team">
<h2>OUR TEAM</h2>
<p>Meet the team</p>
<div class="w3-row"><br>
<div class="w3-quarter">
<img src="/static/images/0.jpg" style="width:100%; margin-left:2rem;" class="w3-circle w3-hover-opacity">
<h3>Sakshi Patle</h3>
<p>Web Designer</p>
</div>
<div class="w3-quarter">
<img src="static/images/0.jpg" alt="Sakshi patle" style="width:100%; margin-left:10rem;" class="w3-circle w3-hover-opacity">
<h3 style="margin-left:11rem">ShlokBhakar</h3>
<p style="margin-left:12rem">Support</p>
</div>
</div>
<footer class="w3-container w3-padding-16" style="margin-top:32px">
</footer>
<!-- End page content -->
</div>
<script>
// Script to open and close sidebar when on tablets and phones
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
document.getElementById("myOverlay").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
document.getElementById("myOverlay").style.display = "none";
}
// Slideshow Apartment Images
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-opacity-off", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " w3-opacity-off";
}
</script>
</body>
</html>