Skip to content

Instantly share code, notes, and snippets.

@ar94952

ar94952/covid-screener.markdown

Created October 12, 2020 23:45
Show Gist options
  • Save ar94952/d2568e21752838e538f4e55a6474cc1d to your computer and use it in GitHub Desktop.
Save ar94952/d2568e21752838e538f4e55a6474cc1d to your computer and use it in GitHub Desktop.
Download ZIP
COVID Screener
Raw
index.html
<!doctype html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
<style>
body {
font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 8px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 36px;
margin: 4px 2px;
cursor: pointer;
width: 130px;
}
</style>
<script async type="text/javascript" id="_fed_an_ua_tag" src="https://dap.digitalgov.gov/Universal-Federated-Analytics-Min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<script src="https://kit.fontawesome.com/22dd5ae76f.js" crossorigin="anonymous"></script>
<title>COVID SCREENING</title>
</head>
<body>
<div style="width:80%; margin-left: 10%; margin-top: -10%;">
<div class="ncal_logo">
<img alt=" LOGO" src="https://raw.githubusercontent.com/ar94952/ar94952.github.io/master/img/BeepCo.png" width="100%">
</div>
<div style="text-align: center;">
<h1>COVID SCREENING</h1>
<div style=" font-size: 20px;">
<p>MASK IS REQUIRED FOR YOUR OWN SAFETY</p>
<p>KEEP 6 FT. DISTANCE FROM EVERYONE AROUND YOU</p>
</div>
</div>
</div>
<div style="text-align: center;">
<a onclick="openNav()" class="button">START</a>
</div>
<!-- /////// start overlay questions //////// -->
<div id="myNav" class="overlay">
<div class="questions">
<h1>QUESTION 1</h1>
<p>HAVE YOU HAD A FEVER OR CHILLS IN THE LAST 7 DAYS?</p>
</div>
<div class="overlay-content">
<a onclick="openNav2a()" href="#">YES</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a onclick="openNav2()" href="#">NO</a>
</div>
</div>
<div id="myNav2" class="overlay">
<div class="questions">
<h1>QUESTION 2</h1>
<p>HAVE YOU HAD A NEW OR WORSENING COUGH, SHORTNESS OF BREATH, MUSCLE ACHES, SORE THROAT, OR HEADACHE IN THE PAST 7 DAYS?</p>
</div>
<div class="overlay-content">
<a onclick="openNav3a()" href="#">YES</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a onclick="openNav3()" href="#">NO</a>
</div>
</div>
<div id="myNav3" class="overlay">
<div class="questions">
<h1>QUESTION 3</h1>
<p>IN THE PAST 14 DAYS HAVE YOU HAD UNPROTECTED CONTACT WITH SOMEONE KNOWN TO HAVE TESTED POSITIVE FOR COVID-19?</p>
</div>
<div class="overlay-content">
<a onclick="openNav4a()" href="#">YES</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a onclick="openNav4()" href="#">NO</a>
</div>
</div>
<div id="myNav4" class="overlay">
<div class="questions">
<h1>QUESTION 4</h1>
<p>DID YOUR PRIMARY CARE PROVIDER SEND YOU FOR FLU-LIKE SYMPTOMS?</p>
</div>
<div class="overlay-content">
<a onclick="openNav5a()" href="#">YES</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a onclick="openNav5()" href="#">NO</a>
</div>
</div>
<div id="myNav5" class="overlay">
<div class="questions">
<h1>QUESTION 5</h1>
<p>DUE TO NEW SYMPTOMS, HAVE YOU HAD A COVID-19 SWAB IN THE LAST 14 DAYS?</p>
</div>
<div class="overlay-content">
<a href="warning.html">YES</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a onclick="openNav6()" href="#">NO</a>
</div>
</div>
<div id="myNav6" class="overlay">
<div class="questions">
<h1>QUESTION 6</h1>
<p>DO YOU WORK FOR THE DEPARTMENT OF VETERANS AFFAIRS?</p>
</div>
<div class="overlay-content">
<a onclick="openNavCLC()" href="#">YES</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a onclick="openNavLoc()" href="#">NO</a>
</div>
</div>
<div id="myNavCLC" class="overlay">
<div class="questions">
<h1>CLC/CREC</h1>
<p>ARE YOU GOING TO CLC/CREC TODAY?</p>
</div>
<div class="overlay-content">
<a onclick="openNavTemp()" href="#">YES</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a onclick="openNavClear()">NO</a>
</div>
</div>
<div id="myNavTemp" class="overlaytemp">
<div class="questions">
<h1>BODY TEMPERATURE DATA REQUIRED</h1>
<p>SPEAK WITH THE SCREENER TO OBTAIN BODY TEMPERATURE DATA.</p>
</div>
<div class="overlay-content">
<a onclick="openNavClear()">98.6&deg;F or Below</a>
<a href="https://www.northerncalifornia.va.gov/wellness/warning.html">98.7&deg;F or Above</a>
</div>
</div>
<div id="myNavLoc" class="overlayloc">
<div class="questionsloc">
<p>WHICH FACILITY ARE YOU VISITING TODAY?</p>
</div>
<div class="overlay-contentloc">
<a onclick="openNavPurpChico()" href="#">AUBURN</a>
<a onclick="openNavPurpChico()" href="#">CHICO</a>
<a onclick="openNavPurpB()" href="#">FAIRFIELD/TRAVIS AFB</a>
<a onclick="openNavOak()" href="#">MARE ISLAND</a>
<a onclick="openNavMart()" href="#">MARTINEZ</a>
<a onclick="openNavMather()" href="#">MATHER</a>
<a onclick="openNavMcc()" href="#">MCCLELLAN</a>
<a onclick="openNavOak()" href="#">OAKLAND</a>
<a onclick="openNavRed()" href="#">REDDING</a>
<a onclick="openNavYreka()" href="#">YREKA</a>
<a onclick="openNavOak()" href="#">YUBA</a>
</div>
</div>
<div id="myNavPurpChico" class="overlaytemp">
<div class="questionsloc">
<p>WHAT IS THE PURPOSE OF YOUR VISIT?</p>
</div>
<div class="overlay-contentloc">
<a onclick="openNavClear()">APPOINTMENT</a>
<a href="allclear_visitor.html">VISITING HOSPITALIZED VETERAN</a>
<a href="allclear_lab_chico.html">LABORATORY</a>
<a href="allclear_radiology.html">RADIOLOGY</a>
<a onclick="openNavClear()">I am the caregiver and need to stay with the veteran</a>
</div>
</div>
<div id="myNavPurpB" class="overlaytemp">
<div class="questionsloc">
<p>WHAT IS THE PURPOSE OF YOUR VISIT?</p>
</div>
<div class="overlay-contentloc">
<a href="allclear.html">APPOINTMENT</a>
<a href="allclear_visitor.html">VISITING HOSPITALIZED VETERAN</a>
<a href="allclear_lab_ff.html">LABORATORY</a>
<a href="allclear_radiology.html">RADIOLOGY</a>
<a href="allclear.html">I am the caregiver and need to stay with the veteran</a>
</div>
</div>
<div id="myNavOak" class="overlaytemp">
<div class="questionsloc">
<p>WHAT IS THE PURPOSE OF YOUR VISIT?</p>
</div>
<div class="overlay-contentloc">
<a onclick="openNavClear()">APPOINTMENT</a>
<a href="allclear_visitor.html">VISITING HOSPITALIZED VETERAN</a>
<a href="allclear_lab_oak.html">LABORATORY</a>
<a href="allclear_pharm.html">PHARMACY</a>
<a href="allclear_radiology.html">RADIOLOGY</a>
<a onclick="openNavClear()">I am the caregiver and need to stay with the veteran</a>
</div>
</div>
<div id="myNavMart" class="overlaytemp">
<div class="questionsloc">
<p>WHAT IS THE PURPOSE OF YOUR VISIT?</p>
</div>
<div class="overlay-contentloc">
<a onclick="openNavClear()">APPOINTMENT</a>
<a href="allclear_visitor.html">VISITING HOSPITALIZED VETERAN</a>
<a href="allclear_lab_mart.html">LABORATORY</a>
<a href="allclear_pharm.html">PHARMACY</a>
<a href="allclear_radiology.html">RADIOLOGY</a>
<a onclick="openNavClear()">I am the caregiver and need to stay with the veteran</a>
</div>
</div>
<div id="myNavMather" class="overlaytemp">
<div class="questionsloc">
<p>WHAT IS THE PURPOSE OF YOUR VISIT?</p>
</div>
<div class="overlay-contentloc">
<a onclick="openNavClear()">APPOINTMENT</a>
<a href="allclear_visitor.html">VISITING HOSPITALIZED VETERAN</a>
<a href="allclear_lab.html">LABORATORY</a>
<a href="allclear_pharm.html">PHARMACY</a>
<a href="allclear_radiology.html">RADIOLOGY</a>
<a onclick="openNavClear()">I am the caregiver and need to stay with the veteran</a>
</div>
</div>
<div id="myNavMcc" class="overlaytemp">
<div class="questionsloc">
<p>WHAT IS THE PURPOSE OF YOUR VISIT?</p>
</div>
<div class="overlay-contentloc">
<a onclick="openNavClear()">APPOINTMENT</a>
<a href="allclear_visitor.html">VISITING HOSPITALIZED VETERAN</a>
<a href="allclear_lab_mcc.html">LABORATORY</a>
<a href="allclear_radiology.html">RADIOLOGY</a>
<a onclick="openNavClear()">I am the caregiver and need to stay with the veteran</a>
</div>
</div>
<div id="myNavRed" class="overlaytemp">
<div class="questionsloc">
<p>WHAT IS THE PURPOSE OF YOUR VISIT?</p>
</div>
<div class="overlay-contentloc" style="text-align: center;">
<a onclick="openNavClear()">APPOINTMENT</a>
<a href="allclear_visitor.html">VISITING HOSPITALIZED VETERAN</a>
<a href="allclear_lab_red.html">LABORATORY</a>
<a href="allclear_radiology.html">RADIOLOGY</a>
<a onclick="openNavClear()">I am the caregiver and need to stay with the veteran</a>
</div>
</div>
<div id="myNavYreka" class="overlaytemp">
<div class="questionsloc">
<p>WHAT IS THE PURPOSE OF YOUR VISIT?</p>
</div>
<div class="overlay-contentloc" style="text-align: center;">
<a onclick="openNavClear()">APPOINTMENT</a>
<a href="allclear_visitor.html">VISITING HOSPITALIZED VETERAN</a>
<a onclick="openNavClear()">I am the caregiver and need to stay with the veteran</a>
</div>
</div>
<div id="myNav2a"class="overlay">
<div class="questions">
<h1>QUESTION 2</h1>
<p>HAVE YOU HAD A NEW OR WORSENING COUGH, SHORTNESS OF BREATH, MUSCLE ACHES, SORE THROAT, OR HEADACHE IN THE PAST 7 DAYS?</p>
</div>
<div class="overlay-content">
<a onclick="openNav3a()"href="#">YES</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a onclick="openNav3a()" href="#">NO</a>
</div>
</div>
<div id="myNav3a" class="overlay">
<div class="questions">
<h1>QUESTION 3</h1>
<p>IN THE PAST 14 DAYS HAVE YOU HAD UNPROTECTED CONTACT WITH SOMEONE KNOWN TO HAVE TESTED POSITIVE FOR COVID-19?</p>
</div>
<div class="overlay-content">
<a onclick="openNav4a()" href="#">YES</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a onclick="openNav4a()" href="#">NO</a>
</div>
</div>
<div id="myNav4a" class="overlay">
<div class="questions">
<h1>QUESTION 4</h1>
<p>DID YOUR PRIMARY CARE PROVIDER SEND YOU FOR FLU-LIKE SYMPTOMS?</p>
</div>
<div class="overlay-content">
<a onclick="openNav5a()" href="#">YES</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a onclick="openNav5a()" href="#">NO</a>
</div>
</div>
<div id="myNav5a" class="overlay">
<div class="questions">
<h1>QUESTION 5</h1>
<p>DUE TO NEW SYMPTOMS, HAVE YOU HAD A COVID-19 SWAB IN THE LAST 14 DAYS?</p>
</div>
<div class="overlay-content">
<a href="warning.html">YES</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="warning.html">NO</a>
</div>
</div>
<div id="myNavClear" class="overlayclear">
<div style="text-align: center; margin-left: 5%; height: 100%; width: 90%; ">
<h2><i class="fas fa-check fa-4x"></i></h2>
<h2>OK to proceed</h2>
<h4>Valid for</h4>
<h1 id="datetime"></h1>
<h2>Keep your mask and wrist band on at all times until you leave the premises.</h2>
</div>
<script>
var dt = new Date();
document.getElementById("datetime").innerHTML = dt.toString();
</script>
</div>
<script type="text/javascript">
window.history.forward();
function noBack() {
window.history.forward();
}
</script>
<script language="javascript">
setTimeout(function(){
window.location.reload(1);
}, 7200000);
</script>
</body>
</html>
Raw
script.js
// JavaScript Document
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function openNav2() {
document.getElementById("myNav2").style.width = "100%";
}
function openNav3() {
document.getElementById("myNav3").style.width = "100%";
}
function openNav4() {
document.getElementById("myNav4").style.width = "100%";
}
function openNav5() {
document.getElementById("myNav5").style.width = "100%";
}
function openNav6() {
document.getElementById("myNav6").style.width = "100%";
}
function openNavCLC() {
document.getElementById("myNavCLC").style.width = "100%";
}
function openNavTemp() {
document.getElementById("myNavTemp").style.width = "100%";
}
function openNavLoc() {
document.getElementById("myNavLoc").style.width = "100%";
}
function openNavPurpChico() {
document.getElementById("myNavPurpChico").style.width = "100%";
}
function openNavPurpB() {
document.getElementById("myNavPurpB").style.width = "100%";
}
function openNavOak() {
document.getElementById("myNavOak").style.width = "100%";
}
function openNavMart() {
document.getElementById("myNavMart").style.width = "100%";
}
function openNavMather() {
document.getElementById("myNavMather").style.width = "100%";
}
function openNavMcc() {
document.getElementById("myNavMcc").style.width = "100%";
}
function openNavRed() {
document.getElementById("myNavRed").style.width = "100%";
}
function openNavYreka() {
document.getElementById("myNavYreka").style.width = "100%";
}
function openNav2a() {
document.getElementById("myNav2a").style.width = "100%";
}
function openNav3a() {
document.getElementById("myNav3a").style.width = "100%";
}
function openNav4a() {
document.getElementById("myNav4a").style.width = "100%";
}
function openNav5a() {
document.getElementById("myNav5a").style.width = "100%";
}
function openNavClear() {
document.getElementById("myNavClear").style.width = "100%";
}
Raw
style.css
@charset "utf-8";
/* CSS Document */
body {
font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 21px;
margin: 4px 2px;
cursor: pointer;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: white;
overflow-x: hidden;
transition: 0.5s;
}
.overlayclear {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #008000;
color: white;
overflow-x: hidden;
transition: 0.5s;
}
.overlayb {
height: 100%;
width: 90%;
margin-left: 5%;
position: fixed;
background-color: white;
text-align: center;
transition: 0.5s;
}
.overlaytemp {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: white;
overflow-x: hidden;
transition: 0.5s;
}
.overlayloc {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: white;
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 20%;
width: 100%;
text-align: center;
margin-bottom: 50px;
}
.overlay-contentloc {
position: relative;
width: 100%;
text-align: center;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: white;
display: inline-block;
transition: 0.3s;
background-color: #4CAF50;
width: 90px;
cursor: pointer;
}
.overlayb a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: white;
display: inline-block;
transition: 0.3s;
background-color: #4CAF50;
width: 90px;
cursor: pointer;
}
.overlaytemp a {
padding: 8px;
text-decoration: none;
font-size: 24px;
color: white;
display: inline-block;
transition: 0.3s;
background-color: #4CAF50;
width: 90%;
cursor: pointer;
margin-bottom: 10px;
text-align: center;
}
.overlayloc a {
padding: 5px;
text-decoration: none;
font-size: 17px;
font-weight: bold;
color: white;
display: inline-block;
transition: 0.3s;
background-color: #4CAF50;
width: 90%;
cursor: pointer;
margin-bottom: 10px;
}
.questions {
text-align: center;
margin-top: 80px;
width: 90%;
margin-left: 5%;
}
.questionsloc {
text-align: center;
margin-top: 5px;
width: 90%;
margin-left: 5%;
}
.questions p {
font-size: 22px;
}
.questionsloc p {
font-size: 22px;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
@media only screen and (min-width: 600px) {
.ncal_logo {
width: 40%; margin-left: 30%; margin-top: 10%;
}
}
@ar94952
Copy link
Author

ar94952 commented Oct 12, 2020

Modeled after the first few COVID Screening web app.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment