archive
This commit is contained in:
Ayushya Amitabh
@@ -0,0 +1,7 @@
|
|||||||
|
.input-popup.expanded {
|
||||||
|
height: 50vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-bar-container {
|
||||||
|
max-width: 25%;
|
||||||
|
}
|
||||||
+475
@@ -0,0 +1,475 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
transition: all ease-in-out 0.2s;
|
||||||
|
color: var(--color-secondary);
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 10px;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
font-size: 10px;
|
||||||
|
padding: 3.75rem;
|
||||||
|
padding-bottom: 0 !important;
|
||||||
|
height: calc(100vh - 3.75rem);
|
||||||
|
overflow-x: hidden;
|
||||||
|
max-width: 100vw;
|
||||||
|
background: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
#root {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-container {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-container {
|
||||||
|
display: flex;
|
||||||
|
width: fit-content;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.logo {
|
||||||
|
background-size: 100%;
|
||||||
|
width: 5rem;
|
||||||
|
height: 5rem;
|
||||||
|
display: inline-block;
|
||||||
|
background-image: url("/logo512.png");
|
||||||
|
}
|
||||||
|
.logo-text-container {
|
||||||
|
justify-content: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
margin-top: 3.5rem;
|
||||||
|
}
|
||||||
|
.logo-text-container p {
|
||||||
|
font-size: 2.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
font-size: 10rem;
|
||||||
|
letter-spacing: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subheader {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overline {
|
||||||
|
font-size: 2rem;
|
||||||
|
letter-spacing: 0.1rem;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overline[data-button] {
|
||||||
|
border-bottom: 1px solid;
|
||||||
|
width: fit-content;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overline[data-button] a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro {
|
||||||
|
margin: 4.5rem 0;
|
||||||
|
display: inline-block;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.question-container {
|
||||||
|
margin: 3.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.question {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.answers-container {
|
||||||
|
margin: 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.answer {
|
||||||
|
display: inline-flex;
|
||||||
|
font-size: 1.8rem;
|
||||||
|
padding: 1.2rem 1.5rem;
|
||||||
|
margin-right: 0.75rem;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
border-radius: 24rem;
|
||||||
|
background-color: var(--color-secondary);
|
||||||
|
color: var(--color-primary);
|
||||||
|
outline: none !important;
|
||||||
|
border: none !important;
|
||||||
|
letter-spacing: 0.2rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.answer.selected {
|
||||||
|
background-color: var(--color-bright);
|
||||||
|
}
|
||||||
|
.answer.unselected {
|
||||||
|
background-color: var(--color-dim);
|
||||||
|
}
|
||||||
|
|
||||||
|
.symptom-container.subheader {
|
||||||
|
margin-top: 5rem;
|
||||||
|
margin-bottom: 2.5rem;
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
.symptom-container.subheader .overline {
|
||||||
|
margin: 1rem 0;
|
||||||
|
}
|
||||||
|
.symptom-container {
|
||||||
|
margin-bottom: 5rem;
|
||||||
|
}
|
||||||
|
.symptom {
|
||||||
|
max-width: 100%;
|
||||||
|
padding: 1.5rem;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-radius: 1rem;
|
||||||
|
transition: border-color ease-in-out 0.4s;
|
||||||
|
transition: box-shadow ease-in-out 0.3s;
|
||||||
|
}
|
||||||
|
.symptom.at-site {
|
||||||
|
background-color: var(--color-dim);
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
.symptom.at-site:first-of-type {
|
||||||
|
border-top-left-radius: 1rem;
|
||||||
|
border-top-right-radius: 1rem;
|
||||||
|
}
|
||||||
|
.symptom.at-site:nth-of-type(3) {
|
||||||
|
border-bottom-left-radius: 1rem;
|
||||||
|
border-bottom-right-radius: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.symptom-emoji {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 3rem;
|
||||||
|
padding: 0.75rem;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.symptom-name {
|
||||||
|
font-size: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.symptom-chance {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
text-align: center;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.symptom-chance:before {
|
||||||
|
content: "EXPERIENCED BY";
|
||||||
|
font-size: 1rem;
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 0.1rem;
|
||||||
|
}
|
||||||
|
.symptom-chance:after {
|
||||||
|
content: "PEOPLE";
|
||||||
|
font-size: 1rem;
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 0.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
padding: 5rem 3.75rem;
|
||||||
|
width: calc(100vw - 7.5rem);
|
||||||
|
margin-left: -3.75rem;
|
||||||
|
background-color: var(--color-secondary-light);
|
||||||
|
}
|
||||||
|
.link-container {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
transition: none !important;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-container > div {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-container > div > .overline {
|
||||||
|
color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-container > div:not(:first-of-type) {
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--color);
|
||||||
|
margin-top: 0.75rem;
|
||||||
|
max-width: fit-content;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-container a {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer .by {
|
||||||
|
color: var(--color-primary);
|
||||||
|
margin-top: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideUp {
|
||||||
|
0% {
|
||||||
|
transform: translateY(300%);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-popup {
|
||||||
|
position: sticky;
|
||||||
|
background-color: var(--color-secondary-light);
|
||||||
|
bottom: 1rem;
|
||||||
|
height: 13.5rem;
|
||||||
|
margin-bottom: 7.5rem;
|
||||||
|
transition: height ease-in-out 0.3s;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 2rem;
|
||||||
|
max-height: 85vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
animation: 0.5s ease-out 0s 1 slideUp;
|
||||||
|
animation-delay: 0.5s;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
transform: translateY(200%);
|
||||||
|
}
|
||||||
|
.input-popup * {
|
||||||
|
color: var(--color-primary);
|
||||||
|
}
|
||||||
|
.input-popup.expanded {
|
||||||
|
height: 80vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.input-popup .input-popup-header-icon {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
.input-popup.expanded .input-popup-header-icon {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
.input-popup-header {
|
||||||
|
padding: 2.5rem;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background-color: var(--color-secondary-light);
|
||||||
|
border-bottom: 1px solid transparent;
|
||||||
|
}
|
||||||
|
.input-popup.expanded .input-popup-header {
|
||||||
|
border-bottom: 1px solid var(--color-tertiary);
|
||||||
|
}
|
||||||
|
.input-popup-header-text {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.input-popup-header-icon {
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: var(--color-primary);
|
||||||
|
outline: none;
|
||||||
|
color: var(--color-secondary);
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-radius: 10rem;
|
||||||
|
height: 5rem;
|
||||||
|
width: 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-popup-body {
|
||||||
|
padding: 2.5rem 2.5rem;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-popup-body .question-container .answers-container .answer {
|
||||||
|
background-color: var(--color-tertiary);
|
||||||
|
}
|
||||||
|
.input-popup-body .question-container .answers-container .answer.selected {
|
||||||
|
background-color: var(--color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-popup-submit {
|
||||||
|
padding: 2.5rem;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 2rem;
|
||||||
|
letter-spacing: 0.3rem;
|
||||||
|
background-color: var(--color-secondary);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.input-popup.expanded .input-popup-submit {
|
||||||
|
position: sticky;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
.input-popup-submit.submitted {
|
||||||
|
background-color: #55c16c;
|
||||||
|
}
|
||||||
|
.input-popup-submit.errored {
|
||||||
|
background-color: #c43d34;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-popup.expanded::-webkit-scrollbar {
|
||||||
|
width: 1.5rem;
|
||||||
|
background-color: var(--color-tertiary);
|
||||||
|
border-radius: 0 4rem 4rem 0;
|
||||||
|
}
|
||||||
|
.input-popup.expanded::-webkit-scrollbar-thumb {
|
||||||
|
width: 1rem;
|
||||||
|
background-color: var(--color-dim);
|
||||||
|
border-radius: 0 4rem 4rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tip-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
padding: 2rem 0;
|
||||||
|
margin: 2rem 0;
|
||||||
|
border-radius: 1rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
.tip-icon {
|
||||||
|
font-size: 3rem;
|
||||||
|
}
|
||||||
|
.tip .overline {
|
||||||
|
font-size: 1.6rem;
|
||||||
|
}
|
||||||
|
.tip .subheader {
|
||||||
|
font-size: 2rem;
|
||||||
|
letter-spacing: 0.2rem;
|
||||||
|
margin-top: 0.4rem;
|
||||||
|
}
|
||||||
|
.tip .header {
|
||||||
|
font-size: 6rem;
|
||||||
|
letter-spacing: 0.5rem;
|
||||||
|
}
|
||||||
|
.tip-container .overline[data-button] {
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
.tip-container .overline[data-button]:first-of-type {
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes loading {
|
||||||
|
0% {
|
||||||
|
width: 0%;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.loading-bar-container {
|
||||||
|
min-height: 2rem;
|
||||||
|
background-color: var(--color-secondary-light);
|
||||||
|
border-radius: 1rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
.loading-bar {
|
||||||
|
position: relative;
|
||||||
|
width: 1rem;
|
||||||
|
min-height: 2rem;
|
||||||
|
background-color: #25d255;
|
||||||
|
border-radius: 1rem;
|
||||||
|
animation: 2s ease-out 0s infinite loading;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-header-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 5rem;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
border: 1px solid var(--color-secondary);
|
||||||
|
border-radius: 1rem;
|
||||||
|
padding: 3rem 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-header-container .symptom-container {
|
||||||
|
margin: 0;
|
||||||
|
flex: 1;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-header-select {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-header-select .overline {
|
||||||
|
font-size: 1.6rem;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.result-header-select .overline.errored {
|
||||||
|
margin-bottom: 0;
|
||||||
|
margin-top: 0.75rem;
|
||||||
|
color: #c43d34;
|
||||||
|
}
|
||||||
|
.result-header-select .overline.success {
|
||||||
|
margin-bottom: 0;
|
||||||
|
margin-top: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-header-select select {
|
||||||
|
background-color: var(--color-tertiary);
|
||||||
|
border-radius: 1rem;
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
outline: none;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (hover: hover) and (pointer: fine) {
|
||||||
|
.answer:hover,
|
||||||
|
.answer.unselected:hover {
|
||||||
|
background-color: var(--color-secondary-light);
|
||||||
|
}
|
||||||
|
.symptom:hover {
|
||||||
|
box-shadow: 0px 0px 100px var(--color-tertiary);
|
||||||
|
background-color: var(--color-primary);
|
||||||
|
}
|
||||||
|
.symptom.at-site:hover {
|
||||||
|
box-shadow: 0px 0px 100px var(--color-dim);
|
||||||
|
background-color: var(--color-secondary-light);
|
||||||
|
color: var(--color-primary);
|
||||||
|
}
|
||||||
|
.symptom.at-site:hover p {
|
||||||
|
color: var(--color-primary);
|
||||||
|
}
|
||||||
|
.input-popup-header-icon:hover {
|
||||||
|
background-color: var(--color-tertiary);
|
||||||
|
}
|
||||||
|
.input-popup-body .question-container .answers-container .answer:hover {
|
||||||
|
background-color: var(--color-bright);
|
||||||
|
}
|
||||||
|
.input-popup-submit:hover {
|
||||||
|
background-color: var(--color-tertiary);
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
Binary file not shown.
+119
@@ -0,0 +1,119 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="icon" href="/favicon.ico" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<meta name="theme-color" content="#000000" />
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="Learn about the expected side effects of COVID-19 Vaccines"
|
||||||
|
/>
|
||||||
|
<link rel="apple-touch-icon" href="/logo192.png" />
|
||||||
|
<link rel="manifest" href="/manifest.json" />
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@import "/styles/variables.css";
|
||||||
|
@import "/styles/variables-dark.css" screen and
|
||||||
|
(prefers-color-scheme: dark);
|
||||||
|
@import "/styles/extrasmall.css";
|
||||||
|
@import "/styles/small.css" only screen and (min-width: 370px)
|
||||||
|
and (max-width: 767px);
|
||||||
|
@import "/styles/smallmedium.css" only screen and
|
||||||
|
(min-width: 768px) and (max-width: 1023px);
|
||||||
|
@import "/styles/medium.css" only screen and
|
||||||
|
(min-width: 1024px);
|
||||||
|
@import "/styles/large.css" only screen and
|
||||||
|
(min-width: 1366px);
|
||||||
|
@import "/styles/extralarge.css" only screen and
|
||||||
|
(min-width: 1921px);
|
||||||
|
@font-face {
|
||||||
|
font-family: "GlacialBold";
|
||||||
|
src: url("/fonts/glacialindifference-bold-webfont.woff2")
|
||||||
|
format("woff2"),
|
||||||
|
url("/fonts/glacialindifference-bold-webfont.woff") format("woff");
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: "GlacialItalic";
|
||||||
|
src: url("/fonts/glacialindifference-italic-webfont.woff2")
|
||||||
|
format("woff2"),
|
||||||
|
url("/fonts/glacialindifference-italic-webfont.woff")
|
||||||
|
format("woff");
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: "Glacial";
|
||||||
|
src: url("/fonts/glacialindifference-regular-webfont.woff2")
|
||||||
|
format("woff2"),
|
||||||
|
url("/fonts/glacialindifference-regular-webfont.woff")
|
||||||
|
format("woff");
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
[data-font="sans"] {
|
||||||
|
font-family: "Glacial", sans-serif;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
[data-font="sans-bold"] {
|
||||||
|
font-family: "GlacialBold", sans-serif;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
[data-font="sans-italic"] {
|
||||||
|
font-family: "GlacialItalic", sans-serif;
|
||||||
|
font-style: italic;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<title>Vax & Me | 404</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root">
|
||||||
|
<div class="app-container">
|
||||||
|
<header>
|
||||||
|
<div class="logo-container">
|
||||||
|
<div class="logo"> </div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<div class="intro">
|
||||||
|
<h1 class="header" data-font="sans-bold">
|
||||||
|
404
|
||||||
|
</h1>
|
||||||
|
<h6 class="overline" data-font="sans">
|
||||||
|
This page doesn't exist.
|
||||||
|
</h6>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<footer data-font="sans">
|
||||||
|
<div class="link-container">
|
||||||
|
<div>
|
||||||
|
<h6 class="overline" data-font="sans">FDA Data Sources</h6>
|
||||||
|
<a href="https://www.fda.gov/media/144416/download">PFizer-BioNTech</a>
|
||||||
|
<a href="https://www.fda.gov/media/144637/download">Moderna</a>
|
||||||
|
<a href="https://www.fda.gov/media/146304/download">J&J Janssen</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h6 class="overline" data-font="sans">Links</h6>
|
||||||
|
<a href="/vaxandme_chart.pdf">Download Chart</a>
|
||||||
|
<a href="/">Home</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h6 class="overline" data-font="sans">Legal</h6>
|
||||||
|
<a href="/copyright">Copyright</a>
|
||||||
|
<a href="/privacy">Privacy</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="overline by" data-font="sans">
|
||||||
|
Designed & Developed with ❤ by Alba Rajanibala and Ayushya Amitabh
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,988 @@
|
|||||||
|
import React from "react";
|
||||||
|
import ReactDOM from "react-dom";
|
||||||
|
import firebase from "firebase/app";
|
||||||
|
import "firebase/functions";
|
||||||
|
|
||||||
|
const FIREBASE_CONFIG = {
|
||||||
|
apiKey: "AIzaSyDKw8HXWRn3dtkIRETv-BxtwnklZIpIkxU",
|
||||||
|
authDomain: "vaxandme.firebaseapp.com",
|
||||||
|
projectId: "vaxandme",
|
||||||
|
storageBucket: "vaxandme.appspot.com",
|
||||||
|
messagingSenderId: "614738281692",
|
||||||
|
appId: "1:614738281692:web:7a89e0af76675e4f0ea019",
|
||||||
|
measurementId: "G-N016TVJ6JC",
|
||||||
|
};
|
||||||
|
|
||||||
|
firebase.initializeApp(FIREBASE_CONFIG);
|
||||||
|
|
||||||
|
if (window.location.host !== "www.vaxand.me") {
|
||||||
|
firebase.functions().useEmulator(window.location.host.split(":")[0], 5001);
|
||||||
|
}
|
||||||
|
|
||||||
|
const fb_functions = firebase.functions();
|
||||||
|
const saveResult = fb_functions.httpsCallable("saveResultV1");
|
||||||
|
const getPastResult = fb_functions.httpsCallable("getPastResultV1");
|
||||||
|
const getStats = fb_functions.httpsCallable("getStatsV1");
|
||||||
|
|
||||||
|
const VAX_NAMES = {
|
||||||
|
PB: "Pfizer-BioNTech",
|
||||||
|
MD: "Moderna",
|
||||||
|
JJ: "J&J Janssen",
|
||||||
|
};
|
||||||
|
|
||||||
|
const VAX_DOSES = {
|
||||||
|
ONE: "Dose 1",
|
||||||
|
TWO: "Dose 2",
|
||||||
|
};
|
||||||
|
|
||||||
|
const VAX_AGES = {
|
||||||
|
"Pfizer-BioNTech": {
|
||||||
|
YOUNGER: "18 - 55",
|
||||||
|
OLDER: "56 & Older",
|
||||||
|
},
|
||||||
|
Moderna: {
|
||||||
|
YOUNGER: "18 - 64",
|
||||||
|
OLDER: "65 & Older",
|
||||||
|
},
|
||||||
|
"J&J Janssen": {
|
||||||
|
YOUNGER: "18 - 59",
|
||||||
|
OLDER: "60 & Older",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const VAX_EFFICACY = {
|
||||||
|
"Pfizer-BioNTech": {
|
||||||
|
"18 - 55": 95.3,
|
||||||
|
"56 & Older": 93.8,
|
||||||
|
},
|
||||||
|
Moderna: {
|
||||||
|
"18 - 64": 95.6,
|
||||||
|
"65 & Older": 86.4,
|
||||||
|
},
|
||||||
|
"J&J Janssen": {
|
||||||
|
"18 - 59": 66.1,
|
||||||
|
"60 & Older": 66.2,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const PB_DOSE1_YOUNGER_RESULT = {
|
||||||
|
"PAIN AT SITE": 1904,
|
||||||
|
"RED AT SITE": 104,
|
||||||
|
"SWELLING AT SITE": 132,
|
||||||
|
FATIGUE: 1085,
|
||||||
|
HEADACHE: 959,
|
||||||
|
"NEED PAIN MED": 638,
|
||||||
|
"MUSCLE PAIN": 487,
|
||||||
|
CHILLS: 321,
|
||||||
|
DIARRHEA: 255,
|
||||||
|
"JOINT PAIN": 251,
|
||||||
|
FEVER: 85,
|
||||||
|
VOMITING: 28,
|
||||||
|
};
|
||||||
|
const PB_DOSE2_YOUNGER_RESULT = {
|
||||||
|
"PAIN AT SITE": 1632,
|
||||||
|
"RED AT SITE": 123,
|
||||||
|
"SWELLING AT SITE": 132,
|
||||||
|
FATIGUE: 1247,
|
||||||
|
HEADACHE: 1085,
|
||||||
|
"NEED PAIN MED": 945,
|
||||||
|
"MUSCLE PAIN": 783,
|
||||||
|
CHILLS: 737,
|
||||||
|
"JOINT PAIN": 459,
|
||||||
|
FEVER: 331,
|
||||||
|
DIARRHEA: 219,
|
||||||
|
VOMITING: 40,
|
||||||
|
};
|
||||||
|
const PB_DOSE1_OLDER_RESULT = {
|
||||||
|
"PAIN AT SITE": 1282,
|
||||||
|
"RED AT SITE": 85,
|
||||||
|
"SWELLING AT SITE": 118,
|
||||||
|
FATIGUE: 615,
|
||||||
|
HEADACHE: 454,
|
||||||
|
"NEED PAIN MED": 358,
|
||||||
|
"MUSCLE PAIN": 251,
|
||||||
|
CHILLS: 113,
|
||||||
|
DIARRHEA: 147,
|
||||||
|
"JOINT PAIN": 155,
|
||||||
|
FEVER: 26,
|
||||||
|
VOMITING: 9,
|
||||||
|
};
|
||||||
|
const PB_DOSE2_OLDER_RESULT = {
|
||||||
|
"PAIN AT SITE": 1098,
|
||||||
|
"RED AT SITE": 120,
|
||||||
|
"SWELLING AT SITE": 124,
|
||||||
|
FATIGUE: 839,
|
||||||
|
HEADACHE: 647,
|
||||||
|
"NEED PAIN MED": 625,
|
||||||
|
"MUSCLE PAIN": 477,
|
||||||
|
CHILLS: 377,
|
||||||
|
"JOINT PAIN": 313,
|
||||||
|
DIARRHEA: 137,
|
||||||
|
FEVER: 181,
|
||||||
|
VOMITING: 11,
|
||||||
|
};
|
||||||
|
const MD_DOSE1_YOUNGER_RESULT = {
|
||||||
|
"PAIN AT SITE": 9908,
|
||||||
|
"RED AT SITE": 344,
|
||||||
|
"SWELLING AT SITE": 2089,
|
||||||
|
HEADACHE: 4030,
|
||||||
|
FATIGUE: 4384,
|
||||||
|
"MUSCLE PAIN": 2699,
|
||||||
|
"JOINT PAIN": 1893,
|
||||||
|
"NAUSEA OR VOMITING": 1068,
|
||||||
|
FEVER: 105,
|
||||||
|
CHILLS: 1051,
|
||||||
|
};
|
||||||
|
const MD_DOSE2_YOUNGER_RESULT = {
|
||||||
|
"PAIN AT SITE": 9873,
|
||||||
|
"RED AT SITE": 982,
|
||||||
|
"SWELLING AT SITE": 3164,
|
||||||
|
FATIGUE: 7430,
|
||||||
|
HEADACHE: 6898,
|
||||||
|
"JOINT PAIN": 4993,
|
||||||
|
CHILLS: 5341,
|
||||||
|
FEVER: 1908,
|
||||||
|
"NAUSEA OR VOMITING": 2348,
|
||||||
|
"MUSCLE PAIN": 6769,
|
||||||
|
};
|
||||||
|
const MD_DOSE1_OLDER_RESULT = {
|
||||||
|
"PAIN AT SITE": 2782,
|
||||||
|
"RED AT SITE": 86,
|
||||||
|
"SWELLING AT SITE": 396,
|
||||||
|
HEADACHE: 921,
|
||||||
|
FATIGUE: 1251,
|
||||||
|
"MUSCLE PAIN": 742,
|
||||||
|
"JOINT PAIN": 618,
|
||||||
|
"NAUSEA OR VOMITING": 194,
|
||||||
|
CHILLS: 202,
|
||||||
|
FEVER: 10,
|
||||||
|
};
|
||||||
|
const MD_DOSE2_OLDER_RESULT = {
|
||||||
|
"PAIN AT SITE": 3070,
|
||||||
|
"RED AT SITE": 275,
|
||||||
|
"SWELLING AT SITE": 715,
|
||||||
|
FATIGUE: 2152,
|
||||||
|
HEADACHE: 1704,
|
||||||
|
"MUSCLE PAIN": 1739,
|
||||||
|
"JOINT PAIN": 1291,
|
||||||
|
CHILLS: 1141,
|
||||||
|
"NAUSEA OR VOMITING": 437,
|
||||||
|
FEVER: 370,
|
||||||
|
};
|
||||||
|
const JJ_YOUNGER_RESULT = {
|
||||||
|
"PAIN AT SITE": 1193,
|
||||||
|
"RED AT SITE": 184,
|
||||||
|
"SWELLING AT SITE": 142,
|
||||||
|
HEADACHE: 905,
|
||||||
|
FATIGUE: 891,
|
||||||
|
"MUSCLE PAIN": 796,
|
||||||
|
"NEED PAIN MED": 538,
|
||||||
|
"NAUSEA OR VOMITING": 315,
|
||||||
|
FEVER: 261,
|
||||||
|
};
|
||||||
|
const JJ_OLDER_RESULT = {
|
||||||
|
"PAIN AT SITE": 439,
|
||||||
|
"RED AT SITE": 61,
|
||||||
|
"SWELLING AT SITE": 36,
|
||||||
|
HEADACHE: 401,
|
||||||
|
FATIGUE: 392,
|
||||||
|
"MUSCLE PAIN": 317,
|
||||||
|
"NAUSEA OR VOMITING": 162,
|
||||||
|
"NEED PAIN MED": 130,
|
||||||
|
FEVER: 41,
|
||||||
|
};
|
||||||
|
|
||||||
|
const VAX_COUNTS = {
|
||||||
|
"Pfizer-BioNTech": {
|
||||||
|
"Dose 1": {
|
||||||
|
"18 - 55": 2291,
|
||||||
|
"56 & Older": 1802,
|
||||||
|
},
|
||||||
|
"Dose 2": {
|
||||||
|
"18 - 55": 2098,
|
||||||
|
"56 & Older": 1660,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
Moderna: {
|
||||||
|
"Dose 1": {
|
||||||
|
"18 - 64": 11406,
|
||||||
|
"65 & Older": 3762,
|
||||||
|
},
|
||||||
|
"Dose 2": {
|
||||||
|
"18 - 64": 10985,
|
||||||
|
"65 & Older": 3692,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
"J&J Janssen": {
|
||||||
|
"18 - 59": 2036,
|
||||||
|
"60 & Older": 1320,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const VAX_RESULTS = {
|
||||||
|
"Pfizer-BioNTech": {
|
||||||
|
"Dose 1": {
|
||||||
|
"18 - 55": PB_DOSE1_YOUNGER_RESULT,
|
||||||
|
"56 & Older": PB_DOSE1_OLDER_RESULT,
|
||||||
|
},
|
||||||
|
"Dose 2": {
|
||||||
|
"18 - 55": PB_DOSE2_YOUNGER_RESULT,
|
||||||
|
"56 & Older": PB_DOSE2_OLDER_RESULT,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
Moderna: {
|
||||||
|
"Dose 1": {
|
||||||
|
"18 - 64": MD_DOSE1_YOUNGER_RESULT,
|
||||||
|
"65 & Older": MD_DOSE1_OLDER_RESULT,
|
||||||
|
},
|
||||||
|
"Dose 2": {
|
||||||
|
"18 - 64": MD_DOSE2_YOUNGER_RESULT,
|
||||||
|
"65 & Older": MD_DOSE2_OLDER_RESULT,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
"J&J Janssen": {
|
||||||
|
"18 - 59": JJ_YOUNGER_RESULT,
|
||||||
|
"60 & Older": JJ_OLDER_RESULT,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const ICONS = {
|
||||||
|
"PAIN AT SITE": "💪",
|
||||||
|
"RED AT SITE": "🔴",
|
||||||
|
"SWELLING AT SITE": "💢",
|
||||||
|
FATIGUE: "🥱",
|
||||||
|
HEADACHE: "🤕",
|
||||||
|
"NEED PAIN MED": "💊",
|
||||||
|
"MUSCLE PAIN": "😫",
|
||||||
|
CHILLS: "🥶",
|
||||||
|
DIARRHEA: "💩",
|
||||||
|
"JOINT PAIN": "🦵",
|
||||||
|
FEVER: "🤒",
|
||||||
|
VOMITING: "🤮",
|
||||||
|
"NAUSEA OR VOMITING": "🤮",
|
||||||
|
};
|
||||||
|
|
||||||
|
const DATA_CHOICES = {
|
||||||
|
VNM: "Vax&Me Only",
|
||||||
|
VNM_FDA: "Vax&Me + FDA",
|
||||||
|
FDA: "FDA Only",
|
||||||
|
};
|
||||||
|
|
||||||
|
class App extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
name: "",
|
||||||
|
dose: "",
|
||||||
|
age: "",
|
||||||
|
gid: "",
|
||||||
|
showInputPopup: false,
|
||||||
|
answers: {},
|
||||||
|
fetchedResult: {},
|
||||||
|
stats: {},
|
||||||
|
loading: true,
|
||||||
|
dataSource: DATA_CHOICES.FDA,
|
||||||
|
loadingMessage: "Gettings stats...",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
componentDidMount() {
|
||||||
|
const params = window.location.pathname
|
||||||
|
.toUpperCase()
|
||||||
|
.split("/")
|
||||||
|
.filter((v) => v.length > 0);
|
||||||
|
if (params) {
|
||||||
|
if (params[0] && VAX_NAMES[params[0]]) {
|
||||||
|
const name = VAX_NAMES[params[0]];
|
||||||
|
this.setState({ name });
|
||||||
|
switch (name) {
|
||||||
|
case VAX_NAMES.PB:
|
||||||
|
case VAX_NAMES.MD:
|
||||||
|
if (params[1] && VAX_DOSES[params[1]]) {
|
||||||
|
const dose = VAX_DOSES[params[1]];
|
||||||
|
this.setState({ dose });
|
||||||
|
if (params[2] && VAX_AGES[name][params[2]]) {
|
||||||
|
const age = VAX_AGES[name][params[2]];
|
||||||
|
this.setState({ age });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case VAX_NAMES.JJ:
|
||||||
|
if (params[1] && VAX_AGES[name][params[1]]) {
|
||||||
|
const age = VAX_AGES[name][params[1]];
|
||||||
|
this.setState({ age });
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getStats()
|
||||||
|
.then((v) => {
|
||||||
|
// GET & SET STATS
|
||||||
|
this.setState({
|
||||||
|
stats: v.data,
|
||||||
|
loadingMessage: "Checking for existing answers...",
|
||||||
|
dataSource: DATA_CHOICES.VNM_FDA,
|
||||||
|
});
|
||||||
|
// HAS GID?
|
||||||
|
if (window.gtag) {
|
||||||
|
// GET GID
|
||||||
|
window.gtag("get", "G-7VZCY223NG", "client_id", (client_id) => {
|
||||||
|
// GOT GID?
|
||||||
|
if (!!client_id) {
|
||||||
|
// SAVE GID
|
||||||
|
this.setState({ gid: client_id });
|
||||||
|
// GET PAST ANSWER FOR GID
|
||||||
|
getPastResult({ gid: client_id })
|
||||||
|
.then((v) => {
|
||||||
|
const { data } = v;
|
||||||
|
if (!!data) {
|
||||||
|
const { name, age, dose } = data;
|
||||||
|
this.setState({
|
||||||
|
name,
|
||||||
|
age,
|
||||||
|
dose,
|
||||||
|
showInputPopup: true,
|
||||||
|
fetchedResult: data,
|
||||||
|
answers: data,
|
||||||
|
loading: false,
|
||||||
|
});
|
||||||
|
const inputPopupSubmit = document.querySelector(
|
||||||
|
".input-popup-submit"
|
||||||
|
);
|
||||||
|
if (inputPopupSubmit) {
|
||||||
|
inputPopupSubmit.classList.add("submitted");
|
||||||
|
inputPopupSubmit.innerHTML = "UPDATE ANSWER";
|
||||||
|
}
|
||||||
|
window.localStorage.setItem("hasExistingAnswer", true);
|
||||||
|
} else {
|
||||||
|
this.setState({ loading: false });
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.error("ERROR Getting Past Answer", err);
|
||||||
|
this.setState({ loading: false });
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.setState({ loading: false });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.setState({ loading: false });
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.error("ERROR GETTING STATS", err);
|
||||||
|
this.setState({ loading: false });
|
||||||
|
});
|
||||||
|
}
|
||||||
|
shouldShowDoses = () => {
|
||||||
|
const { name, loading } = this.state;
|
||||||
|
if (loading) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return name && (name === VAX_NAMES.PB || name === VAX_NAMES.MD);
|
||||||
|
};
|
||||||
|
shouldShowAgeGroup = () => {
|
||||||
|
const { name, dose, loading } = this.state;
|
||||||
|
if (loading) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
switch (name) {
|
||||||
|
case VAX_NAMES.JJ:
|
||||||
|
return true;
|
||||||
|
case VAX_NAMES.MD:
|
||||||
|
case VAX_NAMES.PB:
|
||||||
|
return !!dose;
|
||||||
|
default:
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
shouldShowResults = () => {
|
||||||
|
const { name, dose, age, loading } = this.state;
|
||||||
|
if (loading) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
switch (name) {
|
||||||
|
case VAX_NAMES.JJ:
|
||||||
|
return !!age;
|
||||||
|
case VAX_NAMES.MD:
|
||||||
|
case VAX_NAMES.PB:
|
||||||
|
return !!dose && !!age;
|
||||||
|
default:
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
getResults = () => {
|
||||||
|
const { name, dose, age, loading } = this.state;
|
||||||
|
if (loading) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
switch (name) {
|
||||||
|
case VAX_NAMES.JJ:
|
||||||
|
return VAX_RESULTS[name][age];
|
||||||
|
case VAX_NAMES.MD:
|
||||||
|
case VAX_NAMES.PB:
|
||||||
|
return VAX_RESULTS[name][dose][age];
|
||||||
|
default:
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
copyShareLink = () => {
|
||||||
|
const { name, dose, age } = this.state;
|
||||||
|
let SHARE_URL = window.location.host;
|
||||||
|
const serialize_name = Object.keys(VAX_NAMES).filter(
|
||||||
|
(k) => VAX_NAMES[k] === name
|
||||||
|
)[0];
|
||||||
|
const serialize_dose = Object.keys(VAX_DOSES).filter(
|
||||||
|
(k) => VAX_DOSES[k] === dose
|
||||||
|
)[0];
|
||||||
|
const serialize_age = Object.keys(VAX_AGES[name]).filter(
|
||||||
|
(k) => VAX_AGES[name][k] === age
|
||||||
|
)[0];
|
||||||
|
if (serialize_name) {
|
||||||
|
SHARE_URL += `/${serialize_name}`;
|
||||||
|
}
|
||||||
|
if (serialize_dose) {
|
||||||
|
SHARE_URL += `/${serialize_dose}`;
|
||||||
|
}
|
||||||
|
if (serialize_age) {
|
||||||
|
SHARE_URL += `/${serialize_age}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const copyTextInput = document.createElement("input");
|
||||||
|
document.body.appendChild(copyTextInput);
|
||||||
|
copyTextInput.value = SHARE_URL.toLowerCase();
|
||||||
|
copyTextInput.select();
|
||||||
|
document.execCommand("copy");
|
||||||
|
copyTextInput.remove();
|
||||||
|
|
||||||
|
document.querySelector("#share-result").innerHTML = "Copied Link";
|
||||||
|
setTimeout(() => {
|
||||||
|
document.querySelector("#share-result").innerHTML = "Share ↗";
|
||||||
|
}, 1500);
|
||||||
|
};
|
||||||
|
updateAnswers = (symptom, dose) => {
|
||||||
|
const { answers } = this.state;
|
||||||
|
const newAnswers = Object.assign({}, answers);
|
||||||
|
if (!!dose) {
|
||||||
|
if (!newAnswers[dose]) {
|
||||||
|
newAnswers[dose] = {};
|
||||||
|
}
|
||||||
|
if (newAnswers[dose][symptom]) {
|
||||||
|
newAnswers[dose][symptom] = !newAnswers[dose][symptom];
|
||||||
|
} else {
|
||||||
|
newAnswers[dose][symptom] = true;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (newAnswers[symptom]) {
|
||||||
|
newAnswers[symptom] = !newAnswers[symptom];
|
||||||
|
} else {
|
||||||
|
newAnswers[symptom] = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.setState({ answers: newAnswers });
|
||||||
|
};
|
||||||
|
submitAnswer = () => {
|
||||||
|
document.querySelector(".input-popup-submit").innerHTML = "SENDING...";
|
||||||
|
const { name, dose, age, answers, gid } = this.state;
|
||||||
|
const result = this.getResults();
|
||||||
|
const symptoms = {};
|
||||||
|
delete answers.name;
|
||||||
|
delete answers.dose;
|
||||||
|
delete answers.age;
|
||||||
|
if (!!dose) {
|
||||||
|
symptoms[VAX_DOSES.ONE] = {};
|
||||||
|
symptoms[VAX_DOSES.TWO] = {};
|
||||||
|
Object.keys(VAX_DOSES).forEach((dose) => {
|
||||||
|
Object.keys(result).forEach((symptom) => {
|
||||||
|
symptoms[VAX_DOSES[dose]][symptom] = false;
|
||||||
|
if (answers[VAX_DOSES[dose]] && answers[VAX_DOSES[dose]][symptom]) {
|
||||||
|
symptoms[VAX_DOSES[dose]][symptom] = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
Object.keys(result).forEach((symptom) => {
|
||||||
|
symptoms[symptom] = false;
|
||||||
|
if (answers[symptom]) {
|
||||||
|
symptoms[symptom] = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const submitAnswers = Object.assign({}, symptoms, {
|
||||||
|
name,
|
||||||
|
dose,
|
||||||
|
age,
|
||||||
|
gid,
|
||||||
|
});
|
||||||
|
saveResult(submitAnswers)
|
||||||
|
.then(() => {
|
||||||
|
delete submitAnswers.gid;
|
||||||
|
this.setState({ fetchedResult: submitAnswers });
|
||||||
|
const inputPopupSubmit = document.querySelector(".input-popup-submit");
|
||||||
|
if (inputPopupSubmit.classList.contains("errored")) {
|
||||||
|
inputPopupSubmit.classList.remove("errored");
|
||||||
|
}
|
||||||
|
if (!inputPopupSubmit.classList.contains("submitted")) {
|
||||||
|
inputPopupSubmit.classList.add("submitted");
|
||||||
|
}
|
||||||
|
inputPopupSubmit.innerHTML = "THANK YOU!";
|
||||||
|
setTimeout(() => {
|
||||||
|
inputPopupSubmit.innerHTML = "UPDATE ANSWER";
|
||||||
|
}, 1500);
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
const inputPopupSubmit = document.querySelector(".input-popup-submit");
|
||||||
|
if (!inputPopupSubmit.classList.contains("errored")) {
|
||||||
|
inputPopupSubmit.classList.add("errored");
|
||||||
|
}
|
||||||
|
if (inputPopupSubmit.classList.contains("submitted")) {
|
||||||
|
inputPopupSubmit.classList.remove("submitted");
|
||||||
|
}
|
||||||
|
inputPopupSubmit.innerHTML = "UH OH...UNABLE TO SEND";
|
||||||
|
setTimeout(() => {
|
||||||
|
inputPopupSubmit.innerHTML = "TRY AGAIN";
|
||||||
|
}, 1500);
|
||||||
|
console.error("ERROR Saving Answer", err);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
getAnswerOptions = (answerDose) => {
|
||||||
|
const { answers, dose } = this.state;
|
||||||
|
const result = this.getResults();
|
||||||
|
return (
|
||||||
|
<div className="question-container" key={`answer-dose-${answerDose}`}>
|
||||||
|
{!!answerDose ? (
|
||||||
|
<h6 className="overline" data-font="sans">
|
||||||
|
{answerDose}
|
||||||
|
</h6>
|
||||||
|
) : null}
|
||||||
|
<p className="question" data-font="sans">
|
||||||
|
{dose === VAX_DOSES.ONE && answerDose === VAX_DOSES.TWO
|
||||||
|
? "(You can comeback later to tell us about Dose 2)"
|
||||||
|
: "(Select all side effects that you experienced)"}
|
||||||
|
</p>
|
||||||
|
<div className="answers-container">
|
||||||
|
{Object.keys(result).map((symptom) => (
|
||||||
|
<button
|
||||||
|
key={`ans-${answerDose}-${symptom}`}
|
||||||
|
data-font="sans-bold"
|
||||||
|
className={`answer${
|
||||||
|
!!answerDose
|
||||||
|
? answers[answerDose] && answers[answerDose][symptom]
|
||||||
|
? " selected"
|
||||||
|
: ""
|
||||||
|
: answers[symptom]
|
||||||
|
? " selected"
|
||||||
|
: ""
|
||||||
|
}`}
|
||||||
|
onClick={() => this.updateAnswers(symptom, answerDose)}
|
||||||
|
>
|
||||||
|
{symptom}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
getStatForSymptom = (symptom) => {
|
||||||
|
const { dataSource, name, dose, age, stats } = this.state;
|
||||||
|
switch (dataSource) {
|
||||||
|
case DATA_CHOICES.FDA:
|
||||||
|
if (!!dose) {
|
||||||
|
return Math.ceil(
|
||||||
|
(VAX_RESULTS[name][dose][age][symptom] /
|
||||||
|
VAX_COUNTS[name][dose][age]) *
|
||||||
|
10
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return Math.ceil(
|
||||||
|
(VAX_RESULTS[name][age][symptom] / VAX_COUNTS[name][age]) * 10
|
||||||
|
);
|
||||||
|
}
|
||||||
|
case DATA_CHOICES.VNM:
|
||||||
|
if (Object.keys(stats).length > 0) {
|
||||||
|
if (!!dose) {
|
||||||
|
return Math.ceil(
|
||||||
|
(stats[name][dose][age][symptom] / stats[name][dose][age].count) *
|
||||||
|
10
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return Math.ceil(
|
||||||
|
(stats[name][age][symptom] / stats[name][age].count) * 10
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
case DATA_CHOICES.VNM_FDA:
|
||||||
|
let symptomCount = 0;
|
||||||
|
let totalCount = 0;
|
||||||
|
if (Object.keys(stats).length > 0) {
|
||||||
|
if (!!dose) {
|
||||||
|
symptomCount =
|
||||||
|
VAX_RESULTS[name][dose][age][symptom] +
|
||||||
|
stats[name][dose][age][symptom];
|
||||||
|
totalCount =
|
||||||
|
VAX_COUNTS[name][dose][age] + stats[name][dose][age].count;
|
||||||
|
} else {
|
||||||
|
symptomCount =
|
||||||
|
VAX_RESULTS[name][age][symptom] + stats[name][age][symptom];
|
||||||
|
totalCount = VAX_COUNTS[name][age] + stats[name][age].count;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
symptomCount = VAX_RESULTS[name][dose][age][symptom];
|
||||||
|
totalCount = VAX_COUNTS[name][dose][age];
|
||||||
|
}
|
||||||
|
return Math.ceil((symptomCount / totalCount) * 10);
|
||||||
|
default:
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
getSampleSize = () => {
|
||||||
|
const { dataSource, name, dose, age, stats } = this.state;
|
||||||
|
switch (dataSource) {
|
||||||
|
case DATA_CHOICES.FDA:
|
||||||
|
if (!!dose) {
|
||||||
|
return VAX_COUNTS[name][dose][age];
|
||||||
|
} else {
|
||||||
|
return VAX_COUNTS[name][age];
|
||||||
|
}
|
||||||
|
case DATA_CHOICES.VNM:
|
||||||
|
if (Object.keys(stats).length > 0) {
|
||||||
|
if (!!dose) {
|
||||||
|
return stats[name][dose][age].count;
|
||||||
|
} else {
|
||||||
|
return stats[name][age].count;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
case DATA_CHOICES.VNM_FDA:
|
||||||
|
let totalCount = 0;
|
||||||
|
if (Object.keys(stats).length > 0) {
|
||||||
|
if (!!dose) {
|
||||||
|
totalCount =
|
||||||
|
VAX_COUNTS[name][dose][age] + stats[name][dose][age].count;
|
||||||
|
} else {
|
||||||
|
totalCount = VAX_COUNTS[name][age] + stats[name][age].count;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
totalCount = VAX_COUNTS[name][dose][age];
|
||||||
|
}
|
||||||
|
return totalCount;
|
||||||
|
default:
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
render() {
|
||||||
|
const {
|
||||||
|
name,
|
||||||
|
dose,
|
||||||
|
age,
|
||||||
|
showInputPopup,
|
||||||
|
loading,
|
||||||
|
fetchedResult,
|
||||||
|
dataSource,
|
||||||
|
loadingMessage,
|
||||||
|
stats,
|
||||||
|
} = this.state;
|
||||||
|
let result = {};
|
||||||
|
let resultAtSite = {};
|
||||||
|
if (this.shouldShowResults()) {
|
||||||
|
result = Object.assign({}, this.getResults());
|
||||||
|
Object.keys(result).forEach((s) => {
|
||||||
|
if (s.includes("AT SITE")) {
|
||||||
|
resultAtSite[s] = result[s];
|
||||||
|
delete result[s];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div className="app-container">
|
||||||
|
<header>
|
||||||
|
<div className="logo-container">
|
||||||
|
<div className="logo"> </div>
|
||||||
|
</div>
|
||||||
|
<div className="intro">
|
||||||
|
<h6 className="overline" data-font="sans">
|
||||||
|
Getting vaccinated?
|
||||||
|
</h6>
|
||||||
|
<h3 className="subheader" data-font="sans-bold">
|
||||||
|
Find out what to expect.
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
{loading ? (
|
||||||
|
<div className="loading-container">
|
||||||
|
<p className="question" data-font="sans">
|
||||||
|
{loadingMessage}
|
||||||
|
</p>
|
||||||
|
<div className="loading-bar-container">
|
||||||
|
<div className="loading-bar"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
{!loading ? (
|
||||||
|
<div className="question-container">
|
||||||
|
<p className="question" data-font="sans">
|
||||||
|
Select Vaccine
|
||||||
|
</p>
|
||||||
|
<div className="answers-container">
|
||||||
|
{Object.values(VAX_NAMES).map((v) => (
|
||||||
|
<button
|
||||||
|
key={`name-group-${v}`}
|
||||||
|
onClick={() =>
|
||||||
|
this.setState({
|
||||||
|
name: v,
|
||||||
|
dose: "",
|
||||||
|
age: "",
|
||||||
|
answers: v === fetchedResult.name ? fetchedResult : {},
|
||||||
|
showInputPopup: false,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
data-font="sans-bold"
|
||||||
|
className={`vaccine answer${name === v ? " selected" : ""}${
|
||||||
|
name && name !== v ? " unselected" : ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{v}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
{this.shouldShowDoses() ? (
|
||||||
|
<div className="question-container">
|
||||||
|
<p className="question" data-font="sans">
|
||||||
|
Select Dose
|
||||||
|
</p>
|
||||||
|
<div className="answers-container">
|
||||||
|
{Object.values(VAX_DOSES).map((v) => (
|
||||||
|
<button
|
||||||
|
key={`dose-group-${v}`}
|
||||||
|
onClick={() =>
|
||||||
|
this.setState({
|
||||||
|
dose: v,
|
||||||
|
age: "",
|
||||||
|
showInputPopup: false,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
data-font="sans-bold"
|
||||||
|
className={`dose answer${dose === v ? " selected" : ""}${
|
||||||
|
dose && dose !== v ? " unselected" : ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{v}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{this.shouldShowAgeGroup() ? (
|
||||||
|
<div className="question-container">
|
||||||
|
<p className="question" data-font="sans">
|
||||||
|
Select Age Group
|
||||||
|
</p>
|
||||||
|
<div className="answers-container">
|
||||||
|
{Object.values(VAX_AGES[name]).map((v) => (
|
||||||
|
<button
|
||||||
|
key={`age-group-${v}`}
|
||||||
|
onClick={() =>
|
||||||
|
this.setState({
|
||||||
|
age: v,
|
||||||
|
showInputPopup: false,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
data-font="sans-bold"
|
||||||
|
className={`age answer${age === v ? " selected" : ""}${
|
||||||
|
age && age !== v ? " unselected" : ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{v}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{this.shouldShowResults() ? (
|
||||||
|
<div className="result-header-container">
|
||||||
|
<div className="symptom-container subheader">
|
||||||
|
<h3 data-font="sans-bold">Here's what to expect.</h3>
|
||||||
|
<h6
|
||||||
|
id="share-result"
|
||||||
|
onClick={this.copyShareLink}
|
||||||
|
className="overline"
|
||||||
|
data-font="sans"
|
||||||
|
data-button
|
||||||
|
>
|
||||||
|
Share ↗
|
||||||
|
</h6>
|
||||||
|
<h6 className="overline" data-font="sans" data-button>
|
||||||
|
<a href="/vaxandme_chart.pdf">Download Chart ↗</a>
|
||||||
|
</h6>
|
||||||
|
</div>
|
||||||
|
<div className="result-header-select">
|
||||||
|
<h6 className="overline" data-font="sans">
|
||||||
|
Use data from:
|
||||||
|
</h6>
|
||||||
|
<select
|
||||||
|
disabled={Object.keys(stats).length < 1}
|
||||||
|
onChange={(e) =>
|
||||||
|
this.setState({ dataSource: e.target.value })
|
||||||
|
}
|
||||||
|
value={dataSource}
|
||||||
|
>
|
||||||
|
{Object.keys(DATA_CHOICES).map((dataKey) => (
|
||||||
|
<option key={dataKey}>{DATA_CHOICES[dataKey]}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
<h6 className="overline success" data-font="sans">
|
||||||
|
Based on
|
||||||
|
{` ${this.getSampleSize()
|
||||||
|
.toString()
|
||||||
|
.replace(/\B(?=(\d{3})+(?!\d))/g, ",")} `}
|
||||||
|
individual experiences
|
||||||
|
</h6>
|
||||||
|
{Object.keys(stats).length < 1 ? (
|
||||||
|
<h6 className="overline errored" data-font="sans">
|
||||||
|
Failed to get stats from Vax&Me
|
||||||
|
</h6>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{this.shouldShowResults() ? (
|
||||||
|
<div className="tip-container">
|
||||||
|
{/* <div className="tip-icon">ⓘ</div> */}
|
||||||
|
<div className="tip">
|
||||||
|
<h6 className="subheader" data-font="sans">
|
||||||
|
NET EFFICACY
|
||||||
|
</h6>
|
||||||
|
<h3 className="header" data-font="sans-bold">
|
||||||
|
{VAX_EFFICACY[name][age]}%
|
||||||
|
</h3>
|
||||||
|
<h6
|
||||||
|
className="overline"
|
||||||
|
style={{ wordBreak: "break-word" }}
|
||||||
|
data-font="sans"
|
||||||
|
>
|
||||||
|
of vaccine trial participants who took the <u>{name}</u>{" "}
|
||||||
|
vaccine (in the <u>{age}</u> age group) did not get COVID-19
|
||||||
|
</h6>
|
||||||
|
<h6 className="overline" data-font="sans" data-button>
|
||||||
|
<a href="#data-sources">See Data Sources ↗</a>
|
||||||
|
</h6>
|
||||||
|
<h6 className="overline" data-font="sans" data-button>
|
||||||
|
<a
|
||||||
|
target="_blank"
|
||||||
|
href="https://www.gavi.org/vaccineswork/what-difference-between-efficacy-and-effectiveness"
|
||||||
|
rel="noreferrer"
|
||||||
|
>
|
||||||
|
What is efficacy? ↗
|
||||||
|
</a>
|
||||||
|
</h6>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{this.shouldShowResults() ? (
|
||||||
|
<div className="symptom-container">
|
||||||
|
{Object.keys(resultAtSite).map((symptom) => (
|
||||||
|
<div className="symptom at-site" key={`symptom-${symptom}`}>
|
||||||
|
<span className="symptom-emoji">{ICONS[symptom]}</span>
|
||||||
|
<p data-font="sans" className="symptom-name">
|
||||||
|
{symptom}
|
||||||
|
</p>
|
||||||
|
<p data-font="sans-bold" className="symptom-chance">
|
||||||
|
{this.getStatForSymptom(symptom)}/10
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{Object.keys(result).map((symptom) => (
|
||||||
|
<div className="symptom" key={`symptom-${symptom}`}>
|
||||||
|
<span className="symptom-emoji">{ICONS[symptom]}</span>
|
||||||
|
<p data-font="sans" className="symptom-name">
|
||||||
|
{symptom}
|
||||||
|
</p>
|
||||||
|
<p data-font="sans-bold" className="symptom-chance">
|
||||||
|
{this.getStatForSymptom(symptom)}/10
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</main>
|
||||||
|
{this.shouldShowResults() ? (
|
||||||
|
<div className={`input-popup${showInputPopup ? " expanded" : ""}`}>
|
||||||
|
<div
|
||||||
|
className="input-popup-header"
|
||||||
|
onClick={() => this.setState({ showInputPopup: !showInputPopup })}
|
||||||
|
>
|
||||||
|
<div className="input-popup-header-text">
|
||||||
|
<h6 className="overline" data-font="sans">
|
||||||
|
Already vaxxed?
|
||||||
|
</h6>
|
||||||
|
<h3 className="subheader" data-font="sans-bold">
|
||||||
|
Tell us how it went.
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
data-font="sans"
|
||||||
|
className="subheader input-popup-header-icon"
|
||||||
|
onClick={() =>
|
||||||
|
this.setState({ showInputPopup: !showInputPopup })
|
||||||
|
}
|
||||||
|
>
|
||||||
|
▼
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{showInputPopup ? (
|
||||||
|
<div className="input-popup-body">
|
||||||
|
<p className="question" data-font="sans">
|
||||||
|
I am in age group <strong>{age}</strong> and got the
|
||||||
|
<strong> {name}</strong> vaccine. I experienced:
|
||||||
|
</p>
|
||||||
|
{this.shouldShowDoses()
|
||||||
|
? Object.keys(VAX_DOSES).map((dose) =>
|
||||||
|
this.getAnswerOptions(VAX_DOSES[dose])
|
||||||
|
)
|
||||||
|
: this.getAnswerOptions()}
|
||||||
|
<div className="question-container">
|
||||||
|
<p className="question" data-font="sans">
|
||||||
|
You can comeback and update your experience at any time!
|
||||||
|
</p>
|
||||||
|
<p className="question" data-font="sans">
|
||||||
|
(Just use the same device)
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
{showInputPopup ? (
|
||||||
|
<div
|
||||||
|
onClick={this.submitAnswer}
|
||||||
|
className="input-popup-submit"
|
||||||
|
data-font="sans-bold"
|
||||||
|
>
|
||||||
|
SUBMIT
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ReactDOM.render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<App />
|
||||||
|
</React.StrictMode>,
|
||||||
|
document.querySelector("#root")
|
||||||
|
);
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
body {
|
||||||
|
padding: 15rem;
|
||||||
|
padding-top: 10rem;
|
||||||
|
height: calc(100vh - 10rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
width: 10rem;
|
||||||
|
height: 10rem;
|
||||||
|
}
|
||||||
|
.symptom {
|
||||||
|
max-width: 25rem;
|
||||||
|
height: 25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
padding: 5rem 15rem;
|
||||||
|
width: calc(100vw - 30rem);
|
||||||
|
margin-left: -15rem;
|
||||||
|
}
|
||||||
|
.input-popup {
|
||||||
|
height: 10rem;
|
||||||
|
}
|
||||||
|
.input-popup.expanded {
|
||||||
|
height: 55vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-bar-container {
|
||||||
|
max-width: 35%;
|
||||||
|
}
|
||||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
@@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"short_name": "Vax&Me",
|
||||||
|
"name": "Vax And Me",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "favicon.ico",
|
||||||
|
"sizes": "64x64 32x32 24x24 16x16",
|
||||||
|
"type": "image/x-icon"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "logo192.png",
|
||||||
|
"type": "image/png",
|
||||||
|
"sizes": "192x192"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "logo512.png",
|
||||||
|
"type": "image/png",
|
||||||
|
"sizes": "512x512"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"start_url": ".",
|
||||||
|
"display": "standalone",
|
||||||
|
"theme_color": "#000000",
|
||||||
|
"background_color": "#ffffff"
|
||||||
|
}
|
||||||
+135
@@ -0,0 +1,135 @@
|
|||||||
|
body {
|
||||||
|
padding: 7.5rem;
|
||||||
|
padding-top: 5rem;
|
||||||
|
height: calc(100vh - 5rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-container {
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
.logo {
|
||||||
|
width: 7.5rem;
|
||||||
|
height: 7.5rem;
|
||||||
|
}
|
||||||
|
.logo-text-container {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-left: 1.5rem;
|
||||||
|
border-left: 1px solid var(--color-secondary);
|
||||||
|
padding-left: 1.5rem;
|
||||||
|
}
|
||||||
|
.intro .overline {
|
||||||
|
font-size: 3rem;
|
||||||
|
}
|
||||||
|
.intro .subheader {
|
||||||
|
font-size: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
font-size: 15rem;
|
||||||
|
letter-spacing: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overline[data-button] {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.overline[data-button]:not(:first-of-type) {
|
||||||
|
margin-left: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.symptom {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 20rem;
|
||||||
|
height: 20rem;
|
||||||
|
display: inline-flex;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
.symptom-emoji {
|
||||||
|
font-size: 3.5rem;
|
||||||
|
padding: 0.75rem;
|
||||||
|
}
|
||||||
|
.symptom-name {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.symptom-chance {
|
||||||
|
font-size: 2.4rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.symptom-chance:before {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
.symptom-chance:after {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
.symptom.at-site:first-of-type {
|
||||||
|
border-radius: 0;
|
||||||
|
border-top-left-radius: 1rem;
|
||||||
|
border-bottom-left-radius: 1rem;
|
||||||
|
}
|
||||||
|
.symptom.at-site:nth-of-type(3) {
|
||||||
|
border-radius: 0;
|
||||||
|
border-top-right-radius: 1rem;
|
||||||
|
border-bottom-right-radius: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
padding: 5rem 7.5rem;
|
||||||
|
width: calc(100vw - 15rem);
|
||||||
|
margin-left: -7.5rem;
|
||||||
|
}
|
||||||
|
.link-container {
|
||||||
|
font-size: 1.7rem;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
.link-container > div {
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.link-container > div:not(:first-of-type) {
|
||||||
|
margin-left: 3rem;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-popup {
|
||||||
|
height: 10rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-popup.expanded {
|
||||||
|
height: 55vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-bar-container {
|
||||||
|
max-width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tip-container .overline[data-button] {
|
||||||
|
margin-top: 2rem;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
.tip-container .overline[data-button]:last-of-type {
|
||||||
|
margin-left: 1.2rem;
|
||||||
|
}
|
||||||
|
.tip {
|
||||||
|
padding-left: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-header-container {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-header-container .symptom-container {
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-header-select {
|
||||||
|
margin-top: 0rem;
|
||||||
|
width: fit-content;
|
||||||
|
padding-left: 3rem;
|
||||||
|
border-left: 1px solid var(--color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-header-select select {
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
.input-popup {
|
||||||
|
height: 11.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-popup.expanded {
|
||||||
|
height: 85vh;
|
||||||
|
}
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
.input-popup {
|
||||||
|
height: 11rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-popup.expanded {
|
||||||
|
height: 65vh;
|
||||||
|
}
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
:root {
|
||||||
|
--color-primary: black;
|
||||||
|
--color-secondary: white;
|
||||||
|
--color-secondary-light: rgb(185, 185, 185);
|
||||||
|
--color-tertiary: rgb(105, 105, 105);
|
||||||
|
--color-bright: #636363;
|
||||||
|
--color-dim: #352f2f;
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
:root {
|
||||||
|
--color-primary: white;
|
||||||
|
--color-secondary: black;
|
||||||
|
--color-secondary-light: rgb(56, 56, 56);
|
||||||
|
--color-tertiary: rgba(185, 185, 185, 0.459);
|
||||||
|
--color-bright: #575757;
|
||||||
|
--color-dim: #aeadb0;
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user