v1.0.0/release
This commit is contained in:
Generated
+16937
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,36 @@
|
||||
{
|
||||
"name": "vaxandme",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"firebase": "^8.4.1",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-scripts": "4.0.3",
|
||||
"web-vitals": "^1.1.1"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
RewriteEngine On
|
||||
|
||||
DirectoryIndex index.html
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,134 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Google Tag Manager -->
|
||||
<script>
|
||||
(function (w, d, s, l, i) {
|
||||
w[l] = w[l] || [];
|
||||
w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
|
||||
var f = d.getElementsByTagName(s)[0],
|
||||
j = d.createElement(s),
|
||||
dl = l != "dataLayer" ? "&l=" + l : "";
|
||||
j.async = true;
|
||||
j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
|
||||
f.parentNode.insertBefore(j, f);
|
||||
})(window, document, "script", "dataLayer", "GTM-K4XHBR6");
|
||||
</script>
|
||||
<!-- End Google Tag Manager -->
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/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="%PUBLIC_URL%/logo192.png" />
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
|
||||
<style>
|
||||
@import "%PUBLIC_URL%/styles/variables.css";
|
||||
@import "%PUBLIC_URL%/styles/variables-dark.css" screen and
|
||||
(prefers-color-scheme: dark);
|
||||
@import "%PUBLIC_URL%/styles/extrasmall.css";
|
||||
@import "%PUBLIC_URL%/styles/small.css" only screen and (min-width: 400px)
|
||||
and (max-width: 767px);
|
||||
@import "%PUBLIC_URL%/styles/smallmedium.css" only screen and
|
||||
(min-width: 768px) and (max-width: 1023px);
|
||||
@import "%PUBLIC_URL%/styles/medium.css" only screen and
|
||||
(min-width: 1024px);
|
||||
@import "%PUBLIC_URL%/styles/large.css" only screen and
|
||||
(min-width: 1366px);
|
||||
@import "%PUBLIC_URL%/styles/extralarge.css" only screen and
|
||||
(min-width: 1921px);
|
||||
@font-face {
|
||||
font-family: "GlacialBold";
|
||||
src: url("%PUBLIC_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("%PUBLIC_URL%/fonts/glacialindifference-italic-webfont.woff2")
|
||||
format("woff2"),
|
||||
url("%PUBLIC_URL%/fonts/glacialindifference-italic-webfont.woff")
|
||||
format("woff");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Glacial";
|
||||
src: url("%PUBLIC_URL%/fonts/glacialindifference-regular-webfont.woff2")
|
||||
format("woff2"),
|
||||
url("%PUBLIC_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;
|
||||
}
|
||||
.logo {
|
||||
background-image: url("%PUBLIC_URL%/logo512.png");
|
||||
}
|
||||
</style>
|
||||
<!-- Google Analytics -->
|
||||
<script
|
||||
async
|
||||
src="https://www.googletagmanager.com/gtag/js?id=G-7VZCY223NG"
|
||||
></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
gtag("js", new Date());
|
||||
gtag("config", "G-7VZCY223NG");
|
||||
</script>
|
||||
<title>Vax & Me</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Google Tag Manager (noscript) -->
|
||||
<noscript>
|
||||
<iframe
|
||||
src="https://www.googletagmanager.com/ns.html?id=GTM-K4XHBR6"
|
||||
height="0"
|
||||
width="0"
|
||||
style="display: none; visibility: hidden"
|
||||
>
|
||||
</iframe>
|
||||
</noscript>
|
||||
<!-- End Google Tag Manager (noscript) -->
|
||||
<div id="root"></div>
|
||||
<footer data-font="sans">
|
||||
<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">Download</h6>
|
||||
<a href="%PUBLIC_URL%/vaxandme_chart.pdf">Visualized Chart</a>
|
||||
</div>
|
||||
<div>
|
||||
Designed & Developed with ❤ by Alba Rajanibala and Ayushya Amitabh
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
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"
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
.input-popup.expanded {
|
||||
height: 40vh;
|
||||
}
|
||||
@@ -0,0 +1,341 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
transition: all ease-in-out 0.2s;
|
||||
color: var(--color-secondary);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 10px;
|
||||
}
|
||||
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;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.logo {
|
||||
background-size: 100%;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
display: inline-block;
|
||||
}
|
||||
.logo-text-container {
|
||||
display: none;
|
||||
justify-content: center;
|
||||
vertical-align: middle;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
.logo-text-container p {
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
|
||||
.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 {
|
||||
font-size: 1.2rem;
|
||||
padding: 5rem 3.75rem;
|
||||
width: calc(100vw - 7.5rem);
|
||||
margin-left: -3.75rem;
|
||||
background-color: var(--color-secondary-light);
|
||||
transition: none !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
footer > div {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
footer > div > .overline {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
footer > div:not(:first-of-type) {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color);
|
||||
margin-top: 0.75rem;
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
@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: 1s;
|
||||
animation-fill-mode: forwards;
|
||||
transform: translateY(300%);
|
||||
}
|
||||
.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 var(--color-tertiary);
|
||||
}
|
||||
.input-popup-header-text {
|
||||
flex: 1;
|
||||
}
|
||||
.input-popup-header-icon {
|
||||
cursor: pointer;
|
||||
background-color: var(--color-secondary);
|
||||
outline: none;
|
||||
color: var(--color-primary);
|
||||
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;
|
||||
}
|
||||
|
||||
@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);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
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: 50vh;
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
body {
|
||||
padding: 7.5rem;
|
||||
padding-top: 5rem;
|
||||
height: calc(100vh - 5rem);
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 7.5rem;
|
||||
height: 7.5rem;
|
||||
}
|
||||
|
||||
.intro .overline {
|
||||
font-size: 3rem;
|
||||
}
|
||||
.intro .subheader {
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.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 {
|
||||
font-size: 1.7rem;
|
||||
padding: 5rem 7.5rem;
|
||||
width: calc(100vw - 15rem);
|
||||
margin-left: -7.5rem;
|
||||
flex-direction: row;
|
||||
}
|
||||
footer > div {
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
footer > div:not(:first-of-type) {
|
||||
margin-left: 3rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
footer > div:last-of-type {
|
||||
flex: 3;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.input-popup {
|
||||
height: 10rem;
|
||||
}
|
||||
|
||||
.input-popup.expanded {
|
||||
height: 55vh;
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
.input-popup {
|
||||
height: 10rem;
|
||||
}
|
||||
|
||||
.input-popup.expanded {
|
||||
height: 85vh;
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
.input-popup {
|
||||
height: 10rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
Binary file not shown.
@@ -0,0 +1,633 @@
|
||||
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.startsWith("localhost")) {
|
||||
firebase.functions().useEmulator("localhost", 5001);
|
||||
}
|
||||
const fb_functions = firebase.functions();
|
||||
const saveResult = fb_functions.httpsCallable("saveResult");
|
||||
const getPastResult = fb_functions.httpsCallable("getPastResult");
|
||||
|
||||
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 PB_DOSE1_YOUNGER_RESULT = {
|
||||
"PAIN AT SITE": "8",
|
||||
"RED AT SITE": "1",
|
||||
"SWELLING AT SITE": "1",
|
||||
FATIGUE: "5",
|
||||
HEADACHE: "4",
|
||||
"NEED PAIN MED": "3",
|
||||
"MUSCLE PAIN": "2",
|
||||
CHILLS: "1",
|
||||
DIRRHEA: "1",
|
||||
"JOINT PAIN": "1",
|
||||
FEVER: "<1",
|
||||
VOMITING: "<1",
|
||||
};
|
||||
const PB_DOSE2_YOUNGER_RESULT = {
|
||||
"PAIN AT SITE": "8",
|
||||
"RED AT SITE": "1",
|
||||
"SWELLING AT SITE": "1",
|
||||
FATIGUE: "6",
|
||||
HEADACHE: "5",
|
||||
"NEED PAIN MED": "5",
|
||||
"MUSCLE PAIN": "4",
|
||||
CHILLS: "4",
|
||||
"JOINT PAIN": "2",
|
||||
FEVER: "2",
|
||||
DIRRHEA: "1",
|
||||
VOMITING: "<1",
|
||||
};
|
||||
const PB_DOSE1_OLDER_RESULT = {
|
||||
"PAIN AT SITE": "7",
|
||||
"RED AT SITE": "1",
|
||||
"SWELLING AT SITE": "1",
|
||||
FATIGUE: "3",
|
||||
HEADACHE: "3",
|
||||
"NEED PAIN MED": "2",
|
||||
"MUSCLE PAIN": "1",
|
||||
CHILLS: "1",
|
||||
DIRRHEA: "1",
|
||||
"JOINT PAIN": "1",
|
||||
FEVER: "<1",
|
||||
VOMITING: "<1",
|
||||
};
|
||||
const PB_DOSE2_OLDER_RESULT = {
|
||||
"PAIN AT SITE": "7",
|
||||
"RED AT SITE": "1",
|
||||
"SWELLING AT SITE": "1",
|
||||
FATIGUE: "5",
|
||||
HEADACHE: "4",
|
||||
"NEED PAIN MED": "4",
|
||||
"MUSCLE PAIN": "3",
|
||||
CHILLS: "2",
|
||||
"JOINT PAIN": "2",
|
||||
DIRRHEA: "1",
|
||||
FEVER: "1",
|
||||
VOMITING: "<1",
|
||||
};
|
||||
const MD_DOSE1_YOUNGER_RESULT = {
|
||||
"PAIN AT SITE": "9",
|
||||
"RED AT SITE": "<1",
|
||||
"SWELLING AT SITE": "<1",
|
||||
HEADACHE: "4",
|
||||
FATIGUE: "4",
|
||||
"MUSCLE PAIN": "2",
|
||||
"JOINT PAIN": "2",
|
||||
"NAUSEA / VOMITING": "1",
|
||||
FEVER: "1",
|
||||
CHILLS: "1",
|
||||
};
|
||||
const MD_DOSE2_YOUNGER_RESULT = {
|
||||
"PAIN AT SITE": "9",
|
||||
"RED AT SITE": "1",
|
||||
"SWELLING AT SITE": "1",
|
||||
FATIGUE: "7",
|
||||
HEADACHE: "6",
|
||||
"JOINT PAIN": "5",
|
||||
CHILLS: "5",
|
||||
FEVER: "2",
|
||||
"NAUSEA / VOMITING": "2",
|
||||
"MUSCLE PAIN": "1",
|
||||
};
|
||||
const MD_DOSE1_OLDER_RESULT = {
|
||||
"PAIN AT SITE": "7",
|
||||
"RED AT SITE": "<1",
|
||||
"SWELLING AT SITE": "<1",
|
||||
HEADACHE: "3",
|
||||
FATIGUE: "3",
|
||||
"MUSCLE PAIN": "2",
|
||||
"JOINT PAIN": "2",
|
||||
"NAUSEA / VOMITING": "1",
|
||||
CHILLS: "1",
|
||||
FEVER: "<1",
|
||||
};
|
||||
const MD_DOSE2_OLDER_RESULT = {
|
||||
"PAIN AT SITE": "8",
|
||||
"RED AT SITE": "1",
|
||||
"SWELLING AT SITE": "1",
|
||||
FATIGUE: "6",
|
||||
HEADACHE: "5",
|
||||
"MUSCLE PAIN": "5",
|
||||
"JOINT PAIN": "4",
|
||||
CHILLS: "3",
|
||||
"NAUSEA / VOMITING": "1",
|
||||
FEVER: "1",
|
||||
};
|
||||
const JJ_YOUNGER_RESULT = {
|
||||
"PAIN AT SITE": "6",
|
||||
"RED AT SITE": "1",
|
||||
"SWELLING AT SITE": "1",
|
||||
HEADACHE: "4",
|
||||
FATIGUE: "4",
|
||||
"MUSCLE PAIN": "4",
|
||||
"NEED PAIN MED": "3",
|
||||
"NAUSEA / VOMITING": "2",
|
||||
FEVER: "1",
|
||||
};
|
||||
const JJ_OLDER_RESULT = {
|
||||
"PAIN AT SITE": "3",
|
||||
"RED AT SITE": "<1",
|
||||
"SWELLING AT SITE": "<1",
|
||||
HEADACHE: "3",
|
||||
FATIGUE: "3",
|
||||
"MUSCLE PAIN": "2",
|
||||
"NAUSEA / VOMITING": "1",
|
||||
"NEED PAIN MED": "1",
|
||||
FEVER: "<1",
|
||||
};
|
||||
|
||||
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: "🥶",
|
||||
DIRRHEA: "💩",
|
||||
"JOINT PAIN": "🦵",
|
||||
FEVER: "🤒",
|
||||
VOMITING: "🤮",
|
||||
"NAUSEA / VOMITING": "🤮",
|
||||
};
|
||||
|
||||
class App extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
name: "",
|
||||
dose: "",
|
||||
age: "",
|
||||
gid: "",
|
||||
showInputPopup: false,
|
||||
answers: {},
|
||||
};
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (window.gtag) {
|
||||
window.gtag("get", "G-7VZCY223NG", "client_id", (client_id) => {
|
||||
this.setState({ gid: client_id });
|
||||
getPastResult({ gid: client_id }).then((v) => {
|
||||
const { data } = v;
|
||||
if (!!data) {
|
||||
const { name, age, dose } = data;
|
||||
this.setState({ name, age, dose, showInputPopup: true });
|
||||
delete data.name;
|
||||
delete data.age;
|
||||
delete data.dose;
|
||||
this.setState({ answers: data });
|
||||
const inputPopupSubmit = document.querySelector(
|
||||
".input-popup-submit"
|
||||
);
|
||||
inputPopupSubmit.classList.add("submitted");
|
||||
inputPopupSubmit.innerHTML = "UPDATE ANSWER";
|
||||
}
|
||||
}).catch(err => console.error('ERROR Getting Past Answer', err));
|
||||
});
|
||||
}
|
||||
}
|
||||
shouldShowAgeGroup = () => {
|
||||
const { name, dose } = this.state;
|
||||
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 } = this.state;
|
||||
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 } = this.state;
|
||||
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) => {
|
||||
const { answers } = this.state;
|
||||
const newAnswers = Object.assign({}, answers);
|
||||
if (answers[symptom]) {
|
||||
newAnswers[symptom] = !answers[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 = Object.assign({}, this.getResults());
|
||||
const symptoms = {};
|
||||
Object.keys(result).forEach((symptom) => {
|
||||
symptoms[symptom] = false;
|
||||
});
|
||||
const submitAnswers = Object.assign({}, symptoms, answers, {
|
||||
name,
|
||||
dose,
|
||||
age,
|
||||
gid,
|
||||
});
|
||||
saveResult(submitAnswers).then(() => {
|
||||
const inputPopupSubmit = document.querySelector(".input-popup-submit");
|
||||
if (!inputPopupSubmit.classList.contains("submitted")) {
|
||||
inputPopupSubmit.classList.add("submitted");
|
||||
}
|
||||
inputPopupSubmit.innerHTML = "THANK YOU!";
|
||||
setTimeout(() => {
|
||||
inputPopupSubmit.innerHTML = "UPDATE ANSWER";
|
||||
}, 1500);
|
||||
}).catch(err => console.error('ERROR Saving Answer', err));;
|
||||
};
|
||||
render() {
|
||||
const { name, dose, age, showInputPopup, answers } = 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 className="logo-text-container">
|
||||
<p data-font="sans-bold">VAX</p>
|
||||
<p data-font="sans">& ME</p>
|
||||
</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>
|
||||
<div className="question-container">
|
||||
<p className="question" data-font="sans-italic">
|
||||
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: {},
|
||||
showInputPopup: false,
|
||||
})
|
||||
}
|
||||
data-font="sans-bold"
|
||||
className={`vaccine answer${name === v ? " selected" : ""}${
|
||||
name && name !== v ? " unselected" : ""
|
||||
}`}
|
||||
>
|
||||
{v}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{name && (name === VAX_NAMES.PB || name === VAX_NAMES.MD) ? (
|
||||
<div className="question-container">
|
||||
<p className="question" data-font="sans-italic">
|
||||
Select Dose
|
||||
</p>
|
||||
<div className="answers-container">
|
||||
{Object.values(VAX_DOSES).map((v) => (
|
||||
<button
|
||||
key={`dose-group-${v}`}
|
||||
onClick={() =>
|
||||
this.setState({
|
||||
dose: v,
|
||||
age: "",
|
||||
answers: {},
|
||||
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-italic">
|
||||
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,
|
||||
answers: {},
|
||||
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="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>
|
||||
) : 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">
|
||||
{resultAtSite[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">
|
||||
{result[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>
|
||||
<div className="input-popup-body">
|
||||
<p className="question" data-font="sans">
|
||||
I am in age group <strong>{age}</strong> and got
|
||||
<strong>{!!dose ? ` ${dose} ` : ""}</strong>
|
||||
{!!dose ? `of` : ""} the
|
||||
<strong> {name}</strong> vaccine. I experienced:
|
||||
</p>
|
||||
<div className="question-container">
|
||||
<p className="question" data-font="sans-italic">
|
||||
(Select all side effects that you experienced)
|
||||
</p>
|
||||
<div className="answers-container">
|
||||
{Object.keys(resultAtSite).map((symptom) => (
|
||||
<button
|
||||
key={`ans-${symptom}`}
|
||||
data-font="sans-bold"
|
||||
className={`answer${answers[symptom] ? " selected" : ""}`}
|
||||
onClick={() => this.updateAnswers(symptom)}
|
||||
>
|
||||
{symptom}
|
||||
</button>
|
||||
))}
|
||||
{Object.keys(result).map((symptom) => (
|
||||
<button
|
||||
key={`ans-${symptom}`}
|
||||
data-font="sans-bold"
|
||||
className={`answer${answers[symptom] ? " selected" : ""}`}
|
||||
onClick={() => this.updateAnswers(symptom)}
|
||||
>
|
||||
{symptom}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
onClick={this.submitAnswer}
|
||||
className="input-popup-submit"
|
||||
data-font="sans-bold"
|
||||
>
|
||||
SUBMIT
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
document.querySelector("#root")
|
||||
);
|
||||
Reference in New Issue
Block a user