v1.0.1/release

copyright & privacy policy. fix update path bug
This commit is contained in:
2021-04-14 21:28:46 -04:00
parent eb63c9c48f
commit 3040c6f064
14 changed files with 573 additions and 63 deletions
-3
View File
@@ -1,3 +0,0 @@
RewriteEngine On
DirectoryIndex index.html
+119
View File
@@ -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 &amp; Developed with ❤ by Alba Rajanibala and Ayushya Amitabh
</div>
</footer>
</body>
</html>
+159
View File
@@ -0,0 +1,159 @@
<!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 | Copyright</title>
</head>
<body>
<div id="root">
<div class="app-container">
<header>
<div class="logo-container">
<div class="logo"></div>
<div class="logo-text-container">
<p data-font="sans-bold">COPYRIGHT</p>
</div>
</div>
</header>
<main>
<div class="intro">
<h3 class="subheader" data-font="sans-bold">© 2021</h3>
<h6 style="display: inline-block;" class="overline" data-font="sans">
Alba Rajanibala
</h6>
<h6 style="display: inline-block;" class="overline" data-font="sans"> &amp; Ayushya Amitabh
</h6>
</div>
<div class="question-container">
<p class="overline" data-font="sans">
Unauthorized copying of this website via any medium is strictly
prohibited. Designed and developed by Alba Rajanibala and Ayushya
Amitabh.
</p>
</div>
<div class="question-container">
<p class="overline" data-font="sans">
All content on this website, unless otherwise cited is the
intellectual property of Alba Rajanibala and Ayushya Amitabh, and
may not be copied, edited, or reproduced without permission.
</p>
</div>
<div class="question-container">
<p class="overline" data-font="sans-italic">
Data shown is based on FDA clinical trials.
</p>
<div class="answers-container">
<a
style="display: block"
class="question"
data-font="sans-italic"
href="https://www.fda.gov/media/144416/download"
>PFizer-BioNTech</a
>
<a
style="display: block"
class="question"
data-font="sans-italic"
href="https://www.fda.gov/media/144637/download"
>Moderna</a
>
<a
style="display: block"
class="question"
data-font="sans-italic"
href="https://www.fda.gov/media/146304/download"
>J&amp;J Janssen</a
>
</div>
</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 &amp; Developed with ❤ by Alba Rajanibala and Ayushya Amitabh
</div>
</footer>
</body>
</html>
+19 -11
View File
@@ -31,7 +31,7 @@
@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)
@import "%PUBLIC_URL%/styles/small.css" only screen and (min-width: 370px)
and (max-width: 767px);
@import "%PUBLIC_URL%/styles/smallmedium.css" only screen and
(min-width: 768px) and (max-width: 1023px);
@@ -116,17 +116,25 @@
<!-- 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 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="%PUBLIC_URL%/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>
<h6 class="overline" data-font="sans">Download</h6>
<a href="%PUBLIC_URL%/vaxandme_chart.pdf">Visualized Chart</a>
</div>
<div>
<div class="overline by" data-font="sans">
Designed &amp; Developed with ❤ by Alba Rajanibala and Ayushya Amitabh
</div>
</footer>
+147
View File
@@ -0,0 +1,147 @@
<!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 | Privacy</title>
</head>
<body>
<div id="root">
<div class="app-container">
<header>
<div class="logo-container">
<div class="logo"></div>
<div class="logo-text-container">
<p data-font="sans-bold">PRIVACY</p>
</div>
</div>
</header>
<main>
<div class="intro">
<h6 class="overline" data-font="sans">What's collected</h6>
<h6 class="overline" data-font="sans">&amp; How it's used</h6>
</div>
<div class="question-container">
<h6 class="subheader" data-font="sans-bold">
USER PERSONAL INFORMATION
</h6>
<div class="answers-container">
<p class="overline" data-font="sans">
No personally indentifiable information or user data is
collected. Vax & Me only uses Google Analytics on it's website
to study website performance, and error prevention.
</p>
</div>
</div>
<div class="question-container">
<h6 class="subheader" data-font="sans-bold">USER ACTIVITY</h6>
<div class="answers-container">
<p class="overline" data-font="sans">
Vax & Me monitors some click, and keystrokes on it's website to
detect functionality errors.
</p>
</div>
</div>
<div class="question-container">
<h6 class="subheader" data-font="sans-bold">USER DATA</h6>
<div class="answers-container">
<p class="overline" data-font="sans">
Volunteered data is linked to Google Analytics Client ID - which
is unique to a device and web-browser combination. This is
required to prevent data duplicacy and is core to the
functionality of Vax & Me.
</p>
</div>
</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 &amp; Developed with ❤ by Alba Rajanibala and Ayushya Amitabh
</div>
</footer>
</body>
</html>
+27 -7
View File
@@ -39,27 +39,32 @@ header {
.logo-container {
display: flex;
width: fit-content;
align-items: center;
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 {
display: none;
justify-content: center;
vertical-align: middle;
flex-direction: column;
flex: 1;
margin-left: 1.5rem;
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;
@@ -189,28 +194,30 @@ header {
}
footer {
font-size: 1.2rem;
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;
}
footer > div {
.link-container > div {
flex: 1;
display: flex;
flex-direction: column;
color: var(--color-primary);
}
footer > div > .overline {
.link-container > div > .overline {
color: var(--color-primary);
}
footer > div:not(:first-of-type) {
.link-container > div:not(:first-of-type) {
margin-top: 3rem;
}
@@ -218,6 +225,16 @@ 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 {
@@ -268,6 +285,9 @@ a {
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 {
+22 -9
View File
@@ -4,11 +4,21 @@ body {
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;
}
@@ -16,6 +26,11 @@ body {
font-size: 4rem;
}
.header {
font-size: 15rem;
letter-spacing: 1.5rem;
}
.overline[data-button] {
display: inline-block;
}
@@ -60,25 +75,23 @@ body {
}
footer {
font-size: 1.7rem;
padding: 5rem 7.5rem;
width: calc(100vw - 15rem);
margin-left: -7.5rem;
}
.link-container {
font-size: 1.7rem;
flex-direction: row;
}
footer > div {
.link-container > div {
flex-direction: column;
flex: 1;
}
footer > div:not(:first-of-type) {
.link-container > 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;
}
+1 -1
View File
@@ -1,5 +1,5 @@
.input-popup {
height: 10rem;
height: 11.5rem;
}
.input-popup.expanded {