added bootstrap animation to percentage of infection
This commit is contained in:
Luis Aleixo
parent
c8270aee79
commit
3b7959a01d
2 changed files with 159 additions and 56 deletions
|
|
@ -1,85 +1,174 @@
|
|||
#body {
|
||||
top: 10px;
|
||||
left: 20px;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
padding: 20px;
|
||||
top: 10px;
|
||||
left: 20px;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
text-align: center;
|
||||
font-size: 13pt;
|
||||
padding-bottom: 15pt;
|
||||
text-align: center;
|
||||
font-size: 13pt;
|
||||
padding-bottom: 15pt;
|
||||
}
|
||||
|
||||
p.data_italic {
|
||||
font-style: italic;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
p.data_title {
|
||||
font-weight: bold;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
p.data_text {
|
||||
padding-left: 30px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
p.data_subtext {
|
||||
padding-left: 60px;
|
||||
margin-left: -3em;
|
||||
padding-left: 60px;
|
||||
margin-left: -3em;
|
||||
}
|
||||
|
||||
p.result_title {
|
||||
font-weight: bold;
|
||||
font-size: 15pt;
|
||||
font-weight: bold;
|
||||
font-size: 15pt;
|
||||
}
|
||||
|
||||
p.image {
|
||||
text-align: center;
|
||||
font-size: 13pt;
|
||||
text-align: center;
|
||||
font-size: 13pt;
|
||||
}
|
||||
|
||||
p.disclaimer {
|
||||
font-size: 12pt;
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
p.notes {
|
||||
font-size: 10pt;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
.red_bkg {
|
||||
color: #000000;
|
||||
background-color: #CD5C5C;
|
||||
text-decoration: none;
|
||||
color: #000000;
|
||||
background-color: #CD5C5C;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.yellow_bkg {
|
||||
color: #000000;
|
||||
background-color: #FFFF00;
|
||||
text-decoration: none;
|
||||
color: #000000;
|
||||
background-color: #FFFF00;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.green_bkg {
|
||||
color: #000000;
|
||||
background-color: #90EE90;
|
||||
text-decoration: none;
|
||||
color: #000000;
|
||||
background-color: #90EE90;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.icon_button {
|
||||
border: none;
|
||||
background: none;
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.icon_button:focus { outline:0 !important; }
|
||||
.icon_button:focus {
|
||||
outline: 0 !important;
|
||||
}
|
||||
|
||||
.nav-tabs .nav-item .nav-link.active {
|
||||
font-weight: bold;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.nav-tabs .nav-item .nav-link{
|
||||
color: black;
|
||||
.nav-tabs .nav-item .nav-link {
|
||||
color: black;
|
||||
}
|
||||
|
||||
|
||||
/* CSS for the animation */
|
||||
|
||||
.green-1 {
|
||||
background-color: green!important;
|
||||
background-image: linear-gradient(90deg, #0f9403, #85fd55);
|
||||
}
|
||||
|
||||
.yellow-2 {
|
||||
background-color: yellow!important;
|
||||
background-image: linear-gradient(90deg, #fdf255, #fffb00);
|
||||
}
|
||||
|
||||
.orange-3 {
|
||||
background-color: orange!important;
|
||||
background-image: linear-gradient(90deg, #fd5581, #fd8b55);
|
||||
}
|
||||
|
||||
.red-4 {
|
||||
background-color: #ed184f!important;
|
||||
background-image: linear-gradient(90deg, #fd5581, #fd8b55);
|
||||
}
|
||||
|
||||
.intro-banner-vdo-play-btn {
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
border-radius: 100px;
|
||||
z-index: 1
|
||||
}
|
||||
|
||||
.intro-banner-vdo-play-btn i {
|
||||
line-height: 56px;
|
||||
font-size: 30px
|
||||
}
|
||||
|
||||
.intro-banner-vdo-play-btn .ripple {
|
||||
position: absolute;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
z-index: -1;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
opacity: 0;
|
||||
margin: -80px 0 0 -80px;
|
||||
border-radius: 100px;
|
||||
-webkit-animation: ripple 1.8s infinite;
|
||||
animation: ripple 1.8s infinite
|
||||
}
|
||||
|
||||
@-webkit-keyframes ripple {
|
||||
0% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0)
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ripple {
|
||||
0% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0)
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1)
|
||||
}
|
||||
}
|
||||
|
||||
.intro-banner-vdo-play-btn .ripple:nth-child(2) {
|
||||
animation-delay: .3s;
|
||||
-webkit-animation-delay: .3s
|
||||
}
|
||||
|
||||
.intro-banner-vdo-play-btn .ripple:nth-child(3) {
|
||||
animation-delay: .6s;
|
||||
-webkit-animation-delay: .6s
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
{% extends "base/calculator.report.html.j2" %}
|
||||
|
||||
{% block report_summary %}
|
||||
|
||||
<span
|
||||
{% if ((prob_inf > 15) or (expected_new_cases >= 1)) %}
|
||||
><div class="alert alert-danger" role="alert">
|
||||
|
|
@ -20,30 +21,43 @@
|
|||
{% endif %}
|
||||
</span>
|
||||
|
||||
{% if (prob_inf > 5) %}
|
||||
<div class="d-flex align-self-center">
|
||||
{% if scale_warning.level == "green-1" %}
|
||||
<div class="alert alert-dark" role="alert" style="height:fit-content">
|
||||
Note: the current CERN COVID Scale is <b>Green - 1</b>, which means the incidence rate in the local community is <b>{{scale_warning.incidence_rate}}</b>. Align your risk assessment with the guidance and instructions provided by the HSE Unit.
|
||||
<div class="d-flex flex-row">
|
||||
{% if (prob_inf > 5) %}
|
||||
<div class="d-flex align-self-center w-75">
|
||||
{% if scale_warning.level == "green-1" %}
|
||||
<div class="alert alert-dark" role="alert" style="height:fit-content">
|
||||
Note: the current CERN COVID Scale is <b>Green - 1</b>, which means the incidence rate in the local community is <b>{{scale_warning.incidence_rate}}</b>. Align your risk assessment with the guidance and instructions provided by the HSE Unit.
|
||||
</div>
|
||||
{% elif scale_warning.level == "yellow-2" %}
|
||||
<div class="alert alert-dark" role="alert" style="height:fit-content">
|
||||
Note: the current CERN COVID Scale is <b>Yellow - 2</b>, which means the incidence rate in the local community is <b>{{scale_warning.incidence_rate}}</b>. There is a reduced chance that asymptomatic or pre-symptomatic infected individuals circulate within the CERN site which, during this stage, corresponds to an average daily on-site access {{scale_warning.onsite_access}}. See with your supervisor if this scenario is acceptable.
|
||||
</div>
|
||||
{% elif scale_warning.level == "orange-3" %}
|
||||
<div class="alert alert-dark" role="alert" style="height:fit-content">
|
||||
Warning: the current CERN COVID Scale is <b>Orange - 3</b>, which means the incidence rate in the local community is <b>{{scale_warning.incidence_rate}}</b>. There is a slight chance that asymptomatic or pre-symptomatic infected individuals circulate within the CERN site which, during this stage, corresponds to an average daily on-site access {{scale_warning.onsite_access}}. See with your supervisor if any additional measures can be applied (ALARA).
|
||||
</div>
|
||||
{% elif scale_warning.level == "red-4" %}
|
||||
<div class="alert alert-dark" role="alert" style="height:fit-content">
|
||||
Warning: the current CERN COVID Scale is <b>Red - 4</b>, which means the incidence rate in the local community is <b>{{scale_warning.incidence_rate}}</b>. There is a strong chance that asymptomatic or pre-symptomatic infected individuals circulate within the CERN site which, during this stage, corresponds to an average daily on-site access {{scale_warning.onsite_access}}. Please reduce the value below the threshold of <b>{{scale_warning.threshold}}</b>.
|
||||
</div>
|
||||
{% else %}
|
||||
<p><b>Note:</b> The CERN COVID Level is not specified.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% elif scale_warning.level == "yellow-2" %}
|
||||
<div class="alert alert-dark" role="alert" style="height:fit-content">
|
||||
Note: the current CERN COVID Scale is <b>Yellow - 2</b>, which means the incidence rate in the local community is <b>{{scale_warning.incidence_rate}}</b>. There is a reduced chance that asymptomatic or pre-symptomatic infected individuals circulate within the CERN site which, during this stage, corresponds to an average daily on-site access {{scale_warning.onsite_access}}. See with your supervisor if this scenario is acceptable.
|
||||
</div>
|
||||
{% elif scale_warning.level == "orange-3" %}
|
||||
<div class="alert alert-dark" role="alert" style="height:fit-content">
|
||||
Warning: the current CERN COVID Scale is <b>Orange - 3</b>, which means the incidence rate in the local community is <b>{{scale_warning.incidence_rate}}</b>. There is a slight chance that asymptomatic or pre-symptomatic infected individuals circulate within the CERN site which, during this stage, corresponds to an average daily on-site access {{scale_warning.onsite_access}}. See with your supervisor if any additional measures can be applied (ALARA).
|
||||
</div>
|
||||
{% elif scale_warning.level == "red-4" %}
|
||||
<div class="alert alert-dark" role="alert" style="height:fit-content">
|
||||
Warning: the current CERN COVID Scale is <b>Red - 4</b>, which means the incidence rate in the local community is <b>{{scale_warning.incidence_rate}}</b>. There is a strong chance that asymptomatic or pre-symptomatic infected individuals circulate within the CERN site which, during this stage, corresponds to an average daily on-site access {{scale_warning.onsite_access}}. Please reduce the value below the threshold of <b>{{scale_warning.threshold}}</b>.
|
||||
</div>
|
||||
{% else %}
|
||||
<p><b>Note:</b> The CERN COVID Level is not specified.</p>
|
||||
|
||||
{% endif %}
|
||||
|
||||
<div class="w-25 align-self-center">
|
||||
<div class="intro-banner-vdo-play-btn {{scale_warning.level}} m-auto">
|
||||
<b style="color: #00000099">{{prob_inf | non_zero_percentage}}</b>
|
||||
<i class="glyphicon glyphicon-play whiteText" aria-hidden="true"></i>
|
||||
<span class="ripple {{scale_warning.level}}"></span>
|
||||
<span class="ripple {{scale_warning.level}}"></span>
|
||||
<span class="ripple {{scale_warning.level}}"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
|
||||
{% if ((prob_inf > 15) or (expected_new_cases >= 1)) %}
|
||||
This exceeds the authorised risk threshold or number of expected new cases.
|
||||
|
|
|
|||
Loading…
Reference in a new issue