V0.0.9 / Styling Done
This commit is contained in:
@@ -3,9 +3,6 @@
|
|||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@testing-library/jest-dom": "^5.11.10",
|
|
||||||
"@testing-library/react": "^11.2.6",
|
|
||||||
"@testing-library/user-event": "^12.8.3",
|
|
||||||
"react": "^17.0.2",
|
"react": "^17.0.2",
|
||||||
"react-dom": "^17.0.2",
|
"react-dom": "^17.0.2",
|
||||||
"react-scripts": "4.0.3",
|
"react-scripts": "4.0.3",
|
||||||
|
|||||||
@@ -0,0 +1,3 @@
|
|||||||
|
RewriteEngine On
|
||||||
|
|
||||||
|
DirectoryIndex index.html
|
||||||
+57
-2
@@ -1,6 +1,20 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<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" />
|
<meta charset="utf-8" />
|
||||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
@@ -17,8 +31,10 @@
|
|||||||
@import "%PUBLIC_URL%/styles/variables-dark.css" screen and
|
@import "%PUBLIC_URL%/styles/variables-dark.css" screen and
|
||||||
(prefers-color-scheme: dark);
|
(prefers-color-scheme: dark);
|
||||||
@import "%PUBLIC_URL%/styles/extrasmall.css";
|
@import "%PUBLIC_URL%/styles/extrasmall.css";
|
||||||
@import "%PUBLIC_URL%/styles/small.css" only screen and (min-width: 768px)
|
@import "%PUBLIC_URL%/styles/small.css" only screen and (min-width: 400px)
|
||||||
and (max-width: 1024px);
|
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
|
@import "%PUBLIC_URL%/styles/medium.css" only screen and
|
||||||
(min-width: 1024px);
|
(min-width: 1024px);
|
||||||
@import "%PUBLIC_URL%/styles/large.css" only screen and
|
@import "%PUBLIC_URL%/styles/large.css" only screen and
|
||||||
@@ -71,9 +87,48 @@
|
|||||||
background-image: url("%PUBLIC_URL%/logo512.png");
|
background-image: url("%PUBLIC_URL%/logo512.png");
|
||||||
}
|
}
|
||||||
</style>
|
</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>
|
<title>Vax & Me</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -0,0 +1,3 @@
|
|||||||
|
.input-popup.expanded {
|
||||||
|
height: 40vh;
|
||||||
|
}
|
||||||
|
|||||||
+188
-27
@@ -2,6 +2,8 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
transition: all ease-in-out 0.2s;
|
transition: all ease-in-out 0.2s;
|
||||||
|
color: var(--color-secondary);
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
@@ -9,9 +11,14 @@ html {
|
|||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
padding: 3.75rem;
|
padding: 3.75rem;
|
||||||
height: calc(100vh - 7.5rem);
|
padding-bottom: 0 !important;
|
||||||
|
height: calc(100vh - 3.75rem);
|
||||||
|
overflow-x: hidden;
|
||||||
|
max-width: 100vw;
|
||||||
|
background: var(--color-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
#root {
|
#root {
|
||||||
@@ -19,18 +26,19 @@ body {
|
|||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
#root > div {
|
.app-container {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#root > div > main {
|
header {
|
||||||
flex: 1;
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-container {
|
.logo-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
width: fit-content;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
@@ -41,18 +49,16 @@ body {
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
.logo-text-container {
|
.logo-text-container {
|
||||||
display: inline-flex;
|
display: none;
|
||||||
align-items: center;
|
justify-content: center;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
flex-direction: column;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
margin-left: 1.5rem;
|
margin-left: 1.5rem;
|
||||||
}
|
}
|
||||||
.logo-text-container p {
|
.logo-text-container p {
|
||||||
font-size: 2.4rem;
|
font-size: 2.4rem;
|
||||||
}
|
}
|
||||||
.logo-text-container p:last-of-type {
|
|
||||||
margin-left: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subheader {
|
.subheader {
|
||||||
font-size: 2.5rem;
|
font-size: 2.5rem;
|
||||||
@@ -65,8 +71,24 @@ body {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.overline[data-button] {
|
||||||
|
border-bottom: 1px solid;
|
||||||
|
width: fit-content;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overline[data-button] a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
.intro {
|
.intro {
|
||||||
margin: 4.5rem 0;
|
margin: 4.5rem 0;
|
||||||
|
display: inline-block;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.question-container {
|
||||||
|
margin: 3.5rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.question {
|
.question {
|
||||||
@@ -93,11 +115,6 @@ body {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.answer:hover,
|
|
||||||
.answer:focus {
|
|
||||||
background-color: var(--color-secondary-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
.answer.selected {
|
.answer.selected {
|
||||||
background-color: var(--color-bright);
|
background-color: var(--color-bright);
|
||||||
}
|
}
|
||||||
@@ -107,10 +124,15 @@ body {
|
|||||||
|
|
||||||
.symptom-container.subheader {
|
.symptom-container.subheader {
|
||||||
margin-top: 5rem;
|
margin-top: 5rem;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 2.5rem;
|
||||||
display: block !important;
|
display: block !important;
|
||||||
}
|
}
|
||||||
|
.symptom-container.subheader .overline {
|
||||||
|
margin: 1rem 0;
|
||||||
|
}
|
||||||
|
.symptom-container {
|
||||||
|
margin-bottom: 5rem;
|
||||||
|
}
|
||||||
.symptom {
|
.symptom {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 1.5rem;
|
padding: 1.5rem;
|
||||||
@@ -151,14 +173,6 @@ body {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
.symptom:hover {
|
|
||||||
box-shadow: 0px 0px 100px var(--color-dim);
|
|
||||||
background-color: var(--color-primary);
|
|
||||||
}
|
|
||||||
.symptom.at-site:hover {
|
|
||||||
background-color: var(--color-bright);
|
|
||||||
color: var(--color-primary);
|
|
||||||
}
|
|
||||||
.symptom-chance:before {
|
.symptom-chance:before {
|
||||||
content: "EXPERIENCED BY";
|
content: "EXPERIENCED BY";
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
@@ -176,5 +190,152 @@ body {
|
|||||||
|
|
||||||
footer {
|
footer {
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
padding: 1.5rem;
|
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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+22
-1
@@ -1,5 +1,26 @@
|
|||||||
body {
|
body {
|
||||||
padding: 15rem;
|
padding: 15rem;
|
||||||
padding-top: 10rem;
|
padding-top: 10rem;
|
||||||
height: calc(100vh - 25rem);
|
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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,26 +1,33 @@
|
|||||||
body {
|
body {
|
||||||
padding: 7.5rem;
|
padding: 7.5rem;
|
||||||
padding-top: 5rem;
|
padding-top: 5rem;
|
||||||
height: calc(100vh - 12.5rem);
|
height: calc(100vh - 5rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
width: 7.5rem;
|
width: 7.5rem;
|
||||||
height: 7.5rem;
|
height: 7.5rem;
|
||||||
}
|
}
|
||||||
.logo-text-container {
|
|
||||||
flex-direction: column;
|
.intro .overline {
|
||||||
justify-content: center;
|
font-size: 3rem;
|
||||||
align-items: flex-start;
|
|
||||||
}
|
}
|
||||||
.logo-text-container p:last-of-type {
|
.intro .subheader {
|
||||||
margin-left: 0;
|
font-size: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overline[data-button] {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.overline[data-button]:not(:first-of-type) {
|
||||||
|
margin-left: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.symptom {
|
.symptom {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 20rem;
|
max-width: 20rem;
|
||||||
display: inline-block;
|
height: 20rem;
|
||||||
|
display: inline-flex;
|
||||||
margin-bottom: 0.75rem;
|
margin-bottom: 0.75rem;
|
||||||
}
|
}
|
||||||
.symptom-emoji {
|
.symptom-emoji {
|
||||||
@@ -51,7 +58,31 @@ body {
|
|||||||
border-top-right-radius: 1rem;
|
border-top-right-radius: 1rem;
|
||||||
border-bottom-right-radius: 1rem;
|
border-bottom-right-radius: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
font-size: 1.7rem;
|
font-size: 1.7rem;
|
||||||
padding: 1.5rem;
|
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;
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
:root {
|
:root {
|
||||||
--color-primary: white;
|
--color-primary: white;
|
||||||
--color-secondary: black;
|
--color-secondary: black;
|
||||||
--color-secondary-light: rgb(87, 87, 87);
|
--color-secondary-light: rgb(56, 56, 56);
|
||||||
--color-tertiary: #f7f6f6;
|
--color-tertiary: rgba(185, 185, 185, 0.459);
|
||||||
--color-bright: rgb(25, 48, 122);
|
--color-bright: #575757;
|
||||||
--color-dim: rgb(138, 154, 209);
|
--color-dim: #aeadb0;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
}
|
}
|
||||||
|
|||||||
Binary file not shown.
+213
-33
@@ -131,7 +131,6 @@ const MD_DOSE2_OLDER_RESULT = {
|
|||||||
"NAUSEA / VOMITING": "1",
|
"NAUSEA / VOMITING": "1",
|
||||||
FEVER: "1",
|
FEVER: "1",
|
||||||
};
|
};
|
||||||
|
|
||||||
const JJ_YOUNGER_RESULT = {
|
const JJ_YOUNGER_RESULT = {
|
||||||
"PAIN AT SITE": "6",
|
"PAIN AT SITE": "6",
|
||||||
"RED AT SITE": "1",
|
"RED AT SITE": "1",
|
||||||
@@ -185,9 +184,9 @@ const VAX_RESULTS = {
|
|||||||
const ICONS = {
|
const ICONS = {
|
||||||
"PAIN AT SITE": "💪",
|
"PAIN AT SITE": "💪",
|
||||||
"RED AT SITE": "🔴",
|
"RED AT SITE": "🔴",
|
||||||
"SWELLING AT SITE": "⭕",
|
"SWELLING AT SITE": "💢",
|
||||||
FATIGUE: "🥱",
|
FATIGUE: "🥱",
|
||||||
HEADACHE: "🤯",
|
HEADACHE: "🤕",
|
||||||
"NEED PAIN MED": "💊",
|
"NEED PAIN MED": "💊",
|
||||||
"MUSCLE PAIN": "😫",
|
"MUSCLE PAIN": "😫",
|
||||||
CHILLS: "🥶",
|
CHILLS: "🥶",
|
||||||
@@ -205,8 +204,50 @@ class App extends React.Component {
|
|||||||
name: "",
|
name: "",
|
||||||
dose: "",
|
dose: "",
|
||||||
age: "",
|
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 });
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
shouldShowAgeGroup = () => {
|
shouldShowAgeGroup = () => {
|
||||||
const { name, dose } = this.state;
|
const { name, dose } = this.state;
|
||||||
switch (name) {
|
switch (name) {
|
||||||
@@ -243,13 +284,81 @@ class App extends React.Component {
|
|||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
render() {
|
copyShareLink = () => {
|
||||||
const { name, dose, age } = this.state;
|
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,
|
||||||
|
});
|
||||||
|
setTimeout(() => {
|
||||||
|
document.querySelector(".input-popup-submit").innerHTML = "THANK YOU!";
|
||||||
|
document.querySelector(".input-popup-submit").classList.add("submitted");
|
||||||
|
setTimeout(() => {
|
||||||
|
document.querySelector(".input-popup-submit").innerHTML =
|
||||||
|
"UPDATE ANSWER";
|
||||||
|
}, 1500);
|
||||||
|
}, 1500);
|
||||||
|
console.log(submitAnswers);
|
||||||
|
};
|
||||||
|
render() {
|
||||||
|
const { name, dose, age, showInputPopup, answers } = this.state;
|
||||||
let result = {};
|
let result = {};
|
||||||
let resultAtSite = {};
|
let resultAtSite = {};
|
||||||
if (this.shouldShowResults()) {
|
if (this.shouldShowResults()) {
|
||||||
result = Object.assign({}, this.getResults());
|
result = Object.assign({}, this.getResults());
|
||||||
Object.keys(result).map((s) => {
|
Object.keys(result).forEach((s) => {
|
||||||
if (s.includes("AT SITE")) {
|
if (s.includes("AT SITE")) {
|
||||||
resultAtSite[s] = result[s];
|
resultAtSite[s] = result[s];
|
||||||
delete result[s];
|
delete result[s];
|
||||||
@@ -257,24 +366,25 @@ class App extends React.Component {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<div>
|
<div className="app-container">
|
||||||
<div className="logo-container">
|
<header>
|
||||||
<div className="logo"> </div>
|
<div className="logo-container">
|
||||||
<div className="logo-text-container">
|
<div className="logo"> </div>
|
||||||
<p data-font="sans-bold">VAX</p>
|
<div className="logo-text-container">
|
||||||
<p data-font="sans">& ME</p>
|
<p data-font="sans-bold">VAX</p>
|
||||||
|
<p data-font="sans">& ME</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<main>
|
|
||||||
<div className="intro">
|
<div className="intro">
|
||||||
<h6 className="overline" data-font="sans">
|
<h6 className="overline" data-font="sans">
|
||||||
Getting vaccinated?
|
Getting vaccinated?
|
||||||
</h6>
|
</h6>
|
||||||
<h3 className="subheader" data-font="sans-bold">
|
<h3 className="subheader" data-font="sans-bold">
|
||||||
Find out what to expect
|
Find out what to expect.
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
<div className="question-container">
|
<div className="question-container">
|
||||||
<p className="question" data-font="sans-italic">
|
<p className="question" data-font="sans-italic">
|
||||||
Select Vaccine
|
Select Vaccine
|
||||||
@@ -285,8 +395,8 @@ class App extends React.Component {
|
|||||||
key={`name-group-${v}`}
|
key={`name-group-${v}`}
|
||||||
onClick={() => this.setState({ name: v, dose: "", age: "" })}
|
onClick={() => this.setState({ name: v, dose: "", age: "" })}
|
||||||
data-font="sans-bold"
|
data-font="sans-bold"
|
||||||
className={`answer ${name === v ? "selected" : ""} ${
|
className={`vaccine answer${name === v ? " selected" : ""}${
|
||||||
name && name !== v ? "unselected" : ""
|
name && name !== v ? " unselected" : ""
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{v}
|
{v}
|
||||||
@@ -306,8 +416,8 @@ class App extends React.Component {
|
|||||||
key={`dose-group-${v}`}
|
key={`dose-group-${v}`}
|
||||||
onClick={() => this.setState({ dose: v, age: "" })}
|
onClick={() => this.setState({ dose: v, age: "" })}
|
||||||
data-font="sans-bold"
|
data-font="sans-bold"
|
||||||
className={`answer ${dose === v ? "selected" : ""} ${
|
className={`dose answer${dose === v ? " selected" : ""}${
|
||||||
dose && dose !== v ? "unselected" : ""
|
dose && dose !== v ? " unselected" : ""
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{v}
|
{v}
|
||||||
@@ -328,8 +438,8 @@ class App extends React.Component {
|
|||||||
key={`age-group-${v}`}
|
key={`age-group-${v}`}
|
||||||
onClick={() => this.setState({ age: v })}
|
onClick={() => this.setState({ age: v })}
|
||||||
data-font="sans-bold"
|
data-font="sans-bold"
|
||||||
className={`answer ${age === v ? "selected" : ""} ${
|
className={`age answer${age === v ? " selected" : ""}${
|
||||||
age && age !== v ? "unselected" : ""
|
age && age !== v ? " unselected" : ""
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{v}
|
{v}
|
||||||
@@ -340,9 +450,21 @@ class App extends React.Component {
|
|||||||
) : null}
|
) : null}
|
||||||
|
|
||||||
{this.shouldShowResults() ? (
|
{this.shouldShowResults() ? (
|
||||||
<h3 className="symptom-container subheader" data-font="sans-bold">
|
<div className="symptom-container subheader">
|
||||||
Here's what to expect
|
<h3 data-font="sans-bold">Here's what to expect.</h3>
|
||||||
</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}
|
) : null}
|
||||||
|
|
||||||
{this.shouldShowResults() ? (
|
{this.shouldShowResults() ? (
|
||||||
@@ -372,16 +494,74 @@ class App extends React.Component {
|
|||||||
</div>
|
</div>
|
||||||
) : null}
|
) : null}
|
||||||
</main>
|
</main>
|
||||||
<footer data-font="sans">
|
{this.shouldShowResults() ? (
|
||||||
<div>
|
<div className={`input-popup${showInputPopup ? " expanded" : ""}`}>
|
||||||
All data shown is sourced from FDA report on vaccine efficacy.
|
<div
|
||||||
Updated on April 6th, 2021.
|
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>
|
</div>
|
||||||
<div>
|
) : null}
|
||||||
Designed & Developed with ❤ by Alba Rajanibala and Ayushya
|
|
||||||
Amitabh
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user