v1.1.1/release styling fixes, add links

fix stylings

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "vaxandme"
+  }
+}

.gitignore

@@ -0,0 +1,30 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+*/node_modules
+/.pnp
+.pnp.js
+.firebase
+
+# testing
+/coverage
+
+# production
+*/build
+*/lib
+*/exportDB
+firebaseSecret.json
+
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+*.cache
+*/*.log*

firebase.json

@@ -0,0 +1,75 @@
+{
+  "hosting": {
+    "public": "website/build",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "/copyright",
+        "destination": "/copyright.html"
+      },
+      {
+        "source": "/privacy",
+        "destination": "/privacy.html"
+      },
+      {
+        "source": "/jj",
+        "destination": "/index.html"
+      },
+      {
+        "source": "/pb",
+        "destination": "/index.html"
+      },
+      {
+        "source": "/md",
+        "destination": "/index.html"
+      },
+      {
+        "source": "/jj/**",
+        "destination": "/index.html"
+      },
+      {
+        "source": "/pb/**",
+        "destination": "/index.html"
+      },
+      {
+        "source": "/md/**",
+        "destination": "/index.html"
+      },
+      {
+        "source": "**",
+        "destination": "/404.html"
+      }
+    ]
+  },
+  "functions": {
+    "predeploy": [
+      "npm --prefix \"$RESOURCE_DIR\" run lint",
+      "npm --prefix \"$RESOURCE_DIR\" run build"
+    ],
+    "source": "functions",
+    "ignore": [
+      "functions/scripts"
+    ]
+  },
+  "emulators": {
+    "functions": {
+      "host": "192.168.86.46",
+      "port": 5001
+    },
+    "firestore": {
+      "host": "192.168.86.46",
+      "port": 8080
+    },
+    "hosting": {
+      "host": "192.168.86.46",
+      "port": 5000
+    },
+    "ui": {
+      "enabled": true
+    }
+  }
+}

functions/.eslintrc.js

@@ -0,0 +1,29 @@
+module.exports = {
+  root: true,
+  env: {
+    es6: true,
+    node: true,
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:import/typescript",
+    "google",
+    "plugin:@typescript-eslint/recommended",
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: ["tsconfig.json", "tsconfig.dev.json"],
+    sourceType: "module",
+    tsconfigRootDir: __dirname,
+  },
+  ignorePatterns: [
+    "/lib/**/*", // Ignore built files.
+    "/scripts/**/*", // Ignore scripts
+  ],
+  plugins: ["@typescript-eslint", "import"],
+  rules: {
+    quotes: ["error", "double"],
+  },
+};

functions/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "vaxandme-api",
+  "scripts": {
+    "lint": "eslint --ext .js,.ts .",
+    "build": "tsc",
+    "serve": "npm run build && firebase emulators:start --import ./exportDB",
+    "shell": "npm run build && firebase functions:shell",
+    "start": "npm run shell",
+    "deploy": "firebase deploy --only functions",
+    "logs": "firebase functions:log"
+  },
+  "engines": {
+    "node": "12"
+  },
+  "main": "lib/index.js",
+  "dependencies": {
+    "firebase-admin": "^9.2.0",
+    "firebase-functions": "^3.11.0"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^3.9.1",
+    "@typescript-eslint/parser": "^3.8.0",
+    "eslint": "^7.6.0",
+    "eslint-config-google": "^0.14.0",
+    "eslint-plugin-import": "^2.22.0",
+    "firebase-functions-test": "^0.2.0",
+    "typescript": "^3.8.0"
+  },
+  "private": true
+}

functions/scripts/updateCounts.js

@@ -0,0 +1,185 @@
+const admin = require("firebase-admin");
+const firebaseSecret = require("../src/firebaseSecret.json");
+
+
+admin.initializeApp({
+  credential: admin.credential.cert(firebaseSecret),
+});
+
+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",
+  },
+};
+
+// PFIZER COUNTS
+admin.firestore().collection("results")
+    .where("name", "==", VAX_NAMES.PB)
+    .where("dose", "in", [VAX_DOSES.ONE, VAX_DOSES.TWO])
+    .where("age", "==", VAX_AGES[VAX_NAMES.PB].YOUNGER)
+    .get()
+    .then((docs) => {
+      console.log("PB_ONE_YOUNGER", docs.docs.length);
+      admin.firestore()
+          .collection("stats")
+          .doc(VAX_NAMES.PB)
+          .update({
+            [`${VAX_DOSES.ONE}.${VAX_AGES[VAX_NAMES.PB].YOUNGER}.count`]:
+                  docs.docs.length,
+          });
+    });
+admin.firestore().collection("results")
+    .where("name", "==", VAX_NAMES.PB)
+    .where("dose", "==", VAX_DOSES.TWO)
+    .where("age", "==", VAX_AGES[VAX_NAMES.PB].YOUNGER)
+    .get()
+    .then((docs) => {
+      console.log("PB_TWO_YOUNGER", docs.docs.length);
+      admin.firestore()
+          .collection("stats")
+          .doc(VAX_NAMES.PB)
+          .update({
+            [`${VAX_DOSES.TWO}.${VAX_AGES[VAX_NAMES.PB].YOUNGER}.count`]:
+                  docs.docs.length,
+          });
+    });
+admin.firestore().collection("results")
+    .where("name", "==", VAX_NAMES.PB)
+    .where("dose", "in", [VAX_DOSES.ONE, VAX_DOSES.TWO])
+    .where("age", "==", VAX_AGES[VAX_NAMES.PB].OLDER)
+    .get()
+    .then((docs) => {
+      console.log("PB_ONE_OLDER", docs.docs.length);
+      admin.firestore()
+          .collection("stats")
+          .doc(VAX_NAMES.PB)
+          .update({
+            [`${VAX_DOSES.ONE}.${VAX_AGES[VAX_NAMES.PB].OLDER}.count`]:
+                  docs.docs.length,
+          });
+    });
+admin.firestore().collection("results")
+    .where("name", "==", VAX_NAMES.PB)
+    .where("dose", "==", VAX_DOSES.TWO)
+    .where("age", "==", VAX_AGES[VAX_NAMES.PB].OLDER)
+    .get()
+    .then((docs) => {
+      console.log("PB_TWO_OLDER", docs.docs.length);
+      admin.firestore()
+          .collection("stats")
+          .doc(VAX_NAMES.PB)
+          .update({
+            [`${VAX_DOSES.TWO}.${VAX_AGES[VAX_NAMES.PB].OLDER}.count`]:
+                  docs.docs.length,
+          });
+    });
+// MODERNA COUNTS
+admin.firestore().collection("results")
+    .where("name", "==", VAX_NAMES.MD)
+    .where("dose", "in", [VAX_DOSES.ONE, VAX_DOSES.TWO])
+    .where("age", "==", VAX_AGES[VAX_NAMES.MD].YOUNGER)
+    .get()
+    .then((docs) => {
+      console.log("MD_ONE_YOUNGER", docs.docs.length);
+      admin.firestore()
+          .collection("stats")
+          .doc(VAX_NAMES.MD)
+          .update({
+            [`${VAX_DOSES.ONE}.${VAX_AGES[VAX_NAMES.MD].YOUNGER}.count`]:
+                  docs.docs.length,
+          });
+    });
+admin.firestore().collection("results")
+    .where("name", "==", VAX_NAMES.MD)
+    .where("dose", "==", VAX_DOSES.TWO)
+    .where("age", "==", VAX_AGES[VAX_NAMES.MD].YOUNGER)
+    .get()
+    .then((docs) => {
+      console.log("MD_TWO_YOUNGER", docs.docs.length);
+      admin.firestore()
+          .collection("stats")
+          .doc(VAX_NAMES.MD)
+          .update({
+            [`${VAX_DOSES.TWO}.${VAX_AGES[VAX_NAMES.MD].YOUNGER}.count`]:
+                  docs.docs.length,
+          });
+    });
+admin.firestore().collection("results")
+    .where("name", "==", VAX_NAMES.MD)
+    .where("dose", "in", [VAX_DOSES.ONE, VAX_DOSES.TWO])
+    .where("age", "==", VAX_AGES[VAX_NAMES.MD].OLDER)
+    .get()
+    .then((docs) => {
+      console.log("MD_ONE_OLDER", docs.docs.length);
+      admin.firestore()
+          .collection("stats")
+          .doc(VAX_NAMES.MD)
+          .update({
+            [`${VAX_DOSES.ONE}.${VAX_AGES[VAX_NAMES.MD].OLDER}.count`]:
+                  docs.docs.length,
+          });
+    });
+admin.firestore().collection("results")
+    .where("name", "==", VAX_NAMES.MD)
+    .where("dose", "==", VAX_DOSES.TWO)
+    .where("age", "==", VAX_AGES[VAX_NAMES.MD].OLDER)
+    .get()
+    .then((docs) => {
+      console.log("MD_TWO_OLDER", docs.docs.length);
+      admin.firestore()
+          .collection("stats")
+          .doc(VAX_NAMES.MD)
+          .update({
+            [`${VAX_DOSES.TWO}.${VAX_AGES[VAX_NAMES.MD].OLDER}.count`]:
+                  docs.docs.length,
+          });
+    });
+// J&J COUNTS
+admin.firestore().collection("results")
+    .where("name", "==", VAX_NAMES.JJ)
+    .where("age", "==", VAX_AGES[VAX_NAMES.JJ].YOUNGER)
+    .get()
+    .then((docs) => {
+      console.log("JJ_YOUNGER", docs.docs.length);
+      admin.firestore()
+          .collection("stats")
+          .doc(VAX_NAMES.JJ)
+          .update({
+            [`${VAX_AGES[VAX_NAMES.JJ].YOUNGER}.count`]:
+                  docs.docs.length,
+          });
+    });
+admin.firestore().collection("results")
+    .where("name", "==", VAX_NAMES.JJ)
+    .where("age", "==", VAX_AGES[VAX_NAMES.JJ].OLDER)
+    .get()
+    .then((docs) => {
+      console.log("JJ_OLDER", docs.docs.length);
+      admin.firestore()
+          .collection("stats")
+          .doc(VAX_NAMES.JJ)
+          .update({
+            [`${VAX_AGES[VAX_NAMES.JJ].OLDER}.count`]:
+                  docs.docs.length,
+          });
+    });

functions/src/index.ts

@@ -0,0 +1,509 @@
+import * as functions from "firebase-functions";
+import * as admin from "firebase-admin";
+import * as firebaseSecret from "./firebaseSecret.json";
+
+const params = {
+  type: firebaseSecret.type,
+  projectId: firebaseSecret.project_id,
+  privateKeyId: firebaseSecret.private_key_id,
+  privateKey: firebaseSecret.private_key,
+  clientEmail: firebaseSecret.client_email,
+  clientId: firebaseSecret.client_id,
+  authUri: firebaseSecret.auth_uri,
+  tokenUri: firebaseSecret.token_uri,
+  authProviderX509CertUrl: firebaseSecret.auth_provider_x509_cert_url,
+  clientC509CertUrl: firebaseSecret.client_x509_cert_url,
+};
+
+admin.initializeApp({
+  credential: admin.credential.cert(params),
+});
+
+const VAX_NAMES: Record<string, string> = {
+  PB: "Pfizer-BioNTech",
+  MD: "Moderna",
+  JJ: "J&J Janssen",
+};
+
+const VAX_DOSES: Record<string, string> = {
+  ONE: "Dose 1",
+  TWO: "Dose 2",
+};
+
+const VAX_AGES: Record<string, Record<string, string>> = {
+  "Pfizer-BioNTech": {
+    YOUNGER: "18 - 55",
+    OLDER: "56 & Older",
+  },
+  "Moderna": {
+    YOUNGER: "18 - 64",
+    OLDER: "65 & Older",
+  },
+  "J&J Janssen": {
+    YOUNGER: "18 - 59",
+    OLDER: "60 & Older",
+  },
+};
+
+type SaveResultRequestData = {
+  name?: string;
+  age?: string;
+  dose?: string;
+  gid?: string;
+} & {
+  [x: string]: boolean;
+} & {
+  [y: string]: Record<string, boolean>;
+};
+
+const serializeGaId = (_gaid: string | undefined): string => {
+  if (_gaid) {
+    return _gaid.split(".").join("|");
+  }
+  return "";
+};
+
+const addResultToStats = async (data: SaveResultRequestData) => {
+  const cleanData: SaveResultRequestData = Object.assign({}, data);
+  delete cleanData.name;
+  delete cleanData.dose;
+  delete cleanData.age;
+  delete cleanData.gid;
+  const updateDoc: Record<string, admin.firestore.FieldValue> = {
+    count: admin.firestore.FieldValue.increment(1),
+  };
+  if (data.name === VAX_NAMES.PB || data.name === VAX_NAMES.MD) {
+    if (data.dose === VAX_DOSES.ONE) {
+      updateDoc[
+          `${VAX_DOSES.ONE}.${data.age}.count`
+      ] = admin.firestore.FieldValue.increment(1);
+    } else if (data.dose === VAX_DOSES.TWO) {
+      updateDoc[
+          `${VAX_DOSES.ONE}.${data.age}.count`
+      ] = admin.firestore.FieldValue.increment(1);
+      updateDoc[
+          `${VAX_DOSES.TWO}.${data.age}.count`
+      ] = admin.firestore.FieldValue.increment(1);
+    }
+    Object.keys(VAX_DOSES).forEach((doseKey: string) => {
+      const dose: string = VAX_DOSES[doseKey];
+      Object.keys(cleanData[dose]).forEach((symptom: string) => {
+        if (cleanData[dose][symptom]) {
+          let updateDocSymptom = symptom.replace("/", "OR");
+          if (symptom === "DIARRHEA") {
+            updateDocSymptom = "DIRRHEA";
+          }
+          updateDoc[
+              `${dose}.${data.age}.${updateDocSymptom}`
+          ] = admin.firestore.FieldValue.increment(1);
+        }
+      });
+    });
+  } else {
+    updateDoc[`${data.age}.count`] = admin.firestore.FieldValue.increment(1);
+    Object.keys(cleanData).forEach((symptom: string) => {
+      let updateDocSymptom = symptom.replace("/", "OR");
+      if (symptom === "DIARRHEA") {
+        updateDocSymptom = "DIRRHEA";
+      }
+      updateDoc[
+          `${data.age}.${updateDocSymptom}`
+      ] = admin.firestore.FieldValue.increment(1);
+    });
+  }
+  if (data.name) {
+    admin.firestore().collection("stats").doc(data.name).update(updateDoc);
+  }
+};
+
+const removeResultFromStats = async (data: FirebaseFirestore.DocumentData) => {
+  const cleanData: SaveResultRequestData = Object.assign({}, data);
+  delete cleanData.name;
+  delete cleanData.dose;
+  delete cleanData.age;
+  delete cleanData.gid;
+  const updateDoc: Record<string, admin.firestore.FieldValue> = {
+    count: admin.firestore.FieldValue.increment(-1),
+  };
+  if (data.name === VAX_NAMES.PB || data.name === VAX_NAMES.MD) {
+    Object.keys(VAX_DOSES).forEach((doseKey: string) => {
+      const dose: string = VAX_DOSES[doseKey];
+      Object.keys(cleanData[dose]).forEach((symptom: string) => {
+        if (cleanData[dose][symptom]) {
+          let updateDocSymptom = symptom.replace("/", "OR");
+          if (symptom === "DIARRHEA") {
+            updateDocSymptom = "DIRRHEA";
+          }
+          updateDoc[
+              `${dose}.${data.age}.${updateDocSymptom}`
+          ] = admin.firestore.FieldValue.increment(-1);
+        }
+      });
+    });
+  } else {
+    Object.keys(cleanData).forEach((symptom: string) => {
+      let updateDocSymptom = symptom.replace("/", "OR");
+      if (symptom === "DIARRHEA") {
+        updateDocSymptom = "DIRRHEA";
+      }
+      updateDoc[
+          `${data.age}.${updateDocSymptom}`
+      ] = admin.firestore.FieldValue.increment(-1);
+    });
+  }
+  admin.firestore().collection("stats").doc(data.name).update(updateDoc);
+};
+
+/**
+ * FUNCTIONS FROM V1.1.0 TO CURRENT
+ */
+export const getStatsV1 = functions.https.onCall(async () => {
+  const stats = await admin.firestore().collection("stats").get();
+  const docs = stats.docs.map((docSnap) => ({
+    name: docSnap.id,
+    result: docSnap.data(),
+  }));
+  const returnData: Record<string, unknown> = {};
+  docs.forEach((vaxResult) => {
+    if (vaxResult.name === VAX_NAMES.PB || vaxResult.name === VAX_NAMES.MD) {
+      Object.keys(VAX_DOSES).forEach((doseKey) => {
+        const dose: string = VAX_DOSES[doseKey];
+        Object.keys(VAX_AGES[vaxResult.name]).forEach((ageKey) => {
+          const age: string = VAX_AGES[vaxResult.name][ageKey];
+          if (vaxResult.result[dose][age]["NAUSEA / VOMITING"] >= 0) {
+            if (vaxResult.result[dose][age]["NAUSEA OR VOMITING"] >= 0) {
+              vaxResult.result[dose][age]["NAUSEA OR VOMITING"] +=
+                vaxResult.result[dose][age]["NAUSEA / VOMITING"];
+            } else {
+              vaxResult.result[dose][age]["NAUSEA OR VOMITING"] =
+                vaxResult.result[dose][age]["NAUSEA / VOMITING"];
+            }
+          }
+          if (vaxResult.result[dose][age]["DIRRHEA"] >= 0) {
+            if (vaxResult.result[dose][age]["DIARRHEA"] >= 0) {
+              vaxResult.result[dose][age]["DIARRHEA"] +=
+                vaxResult.result[dose][age]["DIRRHEA"];
+            } else {
+              vaxResult.result[dose][age]["DIARRHEA"] =
+                vaxResult.result[dose][age]["DIRRHEA"];
+            }
+          }
+        });
+      });
+    } else {
+      Object.keys(VAX_AGES[vaxResult.name]).forEach((ageKey) => {
+        const age: string = VAX_AGES[vaxResult.name][ageKey];
+        if (vaxResult.result[age]["NAUSEA / VOMITING"] >= 0) {
+          if (vaxResult.result[age]["NAUSEA OR VOMITING"] >= 0) {
+            vaxResult.result[age]["NAUSEA OR VOMITING"] +=
+              vaxResult.result[age]["NAUSEA / VOMITING"];
+          } else {
+            vaxResult.result[age]["NAUSEA OR VOMITING"] =
+              vaxResult.result[age]["NAUSEA / VOMITING"];
+          }
+        }
+        if (vaxResult.result[age]["DIRRHEA"] >= 0) {
+          if (vaxResult.result[age]["DIARRHEA"] >= 0) {
+            vaxResult.result[age]["DIARRHEA"] +=
+              vaxResult.result[age]["DIRRHEA"];
+          } else {
+            vaxResult.result[age]["DIARRHEA"] =
+              vaxResult.result[age]["DIRRHEA"];
+          }
+        }
+      });
+    }
+    returnData[vaxResult.name] = {};
+    returnData[vaxResult.name] = vaxResult.result;
+  });
+  return returnData;
+});
+
+export const saveResultV1 = functions.https.onCall(
+    async (data: SaveResultRequestData, context) => {
+      if (!!data && !!context) {
+        if (!!data.name && !!data.age && !!data.gid) {
+          const {gid} = data;
+          // Get existing result
+          const existingResult = await admin
+              .firestore()
+              .collection("results")
+              .doc(serializeGaId(gid))
+              .get()
+              .then((docSnap) => docSnap.data());
+          // Update user result
+          const cleanData: SaveResultRequestData = Object.assign({}, data);
+          delete cleanData.gid;
+          if (cleanData.dose && cleanData.dose === VAX_DOSES.ONE) {
+            Object.keys(cleanData[VAX_DOSES.TWO]).forEach((symptom) => {
+              if (cleanData[VAX_DOSES.TWO][symptom] === true) {
+                cleanData.dose = VAX_DOSES.TWO;
+                data.dose = VAX_DOSES.TWO;
+              }
+            });
+          }
+          await admin
+              .firestore()
+              .collection("results")
+              .doc(serializeGaId(gid))
+              .set(cleanData);
+          // No existing result
+          if (existingResult === undefined) {
+            await addResultToStats(data);
+          } else {
+            await removeResultFromStats(existingResult);
+            await addResultToStats(data);
+          }
+        }
+      }
+    }
+);
+
+export const getPastResultV1 = functions.https.onCall(
+    async (data: { gid: string }, context) => {
+      if (!!data && !!context) {
+        const {gid} = data;
+        let hasToUpdateDb = false;
+        const existingData: admin.firestore.DocumentData | undefined =
+        await admin
+            .firestore()
+            .collection("results")
+            .doc(serializeGaId(gid))
+            .get()
+            .then((doc) => doc.data());
+        if (existingData) {
+          const returnData:
+          | admin.firestore.DocumentData
+          | undefined = Object.assign({}, existingData);
+          if (
+            existingData.name === VAX_NAMES.PB ||
+          existingData.name === VAX_NAMES.MD
+          ) {
+            Object.keys(VAX_DOSES).forEach((doseKey: string) => {
+              const dose: string = VAX_DOSES[doseKey];
+              if (!existingData[dose]) {
+                hasToUpdateDb = true;
+                const temp: Record<string, unknown> = {};
+                Object.keys(existingData).forEach((symptom) => {
+                  if (
+                    symptom !== "name" &&
+                  symptom !== "age" &&
+                  symptom !== "dose"
+                  ) {
+                    if (existingData.dose === dose) {
+                      temp[symptom] = existingData[symptom];
+                      delete returnData[symptom];
+                    } else {
+                      temp[symptom] = false;
+                    }
+                  }
+                });
+                returnData[dose] = temp;
+              }
+              if (returnData[dose]["NAUSEA / VOMITING"]) {
+                returnData[dose]["NAUSEA OR VOMITING"] =
+                returnData[dose]["NAUSEA / VOMITING"];
+              }
+              if (returnData[dose]["DIRRHEA"]) {
+                returnData[dose]["DIARRHEA"] = returnData["DIRRHEA"];
+              }
+            });
+          } else {
+            if (returnData["NAUSEA / VOMITING"]) {
+              returnData["NAUSEA OR VOMITING"] =
+                returnData["NAUSEA / VOMITING"];
+            }
+            if (returnData["DIRRHEA"]) {
+              returnData["DIARRHEA"] = returnData["DIRRHEA"];
+            }
+          }
+          if (hasToUpdateDb) {
+            await admin
+                .firestore()
+                .collection("results")
+                .doc(serializeGaId(gid))
+                .set(returnData);
+          }
+          return returnData;
+        }
+      }
+      return undefined;
+    }
+);
+
+/**
+ * FUNCTIONS FROM V1.0.0 TO V1.0.1
+ */
+export const saveResult = functions.https.onCall(
+    async (data: SaveResultRequestData, context) => {
+      if (!!data && !!context) {
+        const {gid} = data;
+        const docId: string = serializeGaId(gid);
+        const docData: Record<string, string | boolean> =
+          Object.assign({}, data);
+        delete docData.gid;
+        const existingData = await admin
+            .firestore()
+            .collection("results")
+            .doc(docId)
+            .get()
+            .then((doc) => doc.data());
+        if (
+          existingData !== undefined &&
+        existingData !== docData &&
+        existingData.name === docData.name
+        ) {
+        // DATA EXISTS FOR USER
+        // BUT DIFF DATA SENT FOR UPDATE
+          await admin.firestore().collection("results").doc(docId).set(docData);
+          delete docData.age;
+          delete docData.name;
+          delete docData.dose;
+          const updateDoc: Record<string, admin.firestore.FieldValue> = {};
+          Object.keys(docData).forEach((symptom: string) => {
+          // IF WAS TRUE, NOW FALSE = -1
+          // IF WAS TRUE, NOW TRUE = 0
+          // IF WAS FALSE, NOW TRUE = +1
+          // IF WAS FALSE, NOW FALSE = 0
+            let incrementValue = 0;
+            if (existingData[symptom] === true && docData[symptom] === false) {
+              incrementValue = -1;
+            } else if (
+              existingData[symptom] === false &&
+            docData[symptom] === true
+            ) {
+              incrementValue = 1;
+            }
+            if (data.dose) {
+              updateDoc[
+                  `${data.dose}.${data.age}.${symptom.replace("/", "OR")}`
+              ] = admin.firestore.FieldValue.increment(incrementValue);
+            } else {
+              updateDoc[
+                  `${data.age}.${symptom.replace("/", "OR")}`
+              ] = admin.firestore.FieldValue.increment(incrementValue);
+            }
+          });
+          if (data.name) {
+            admin
+                .firestore()
+                .collection("stats")
+                .doc(data.name)
+                .update(updateDoc);
+          }
+        } else if (
+          existingData !== undefined &&
+        existingData !== docData &&
+        existingData.name !== docData.name
+        ) {
+        // UNDO DATA FOR OLD VAX
+        // DECREMENT VALUES FOR EACH SYMPTOM ON OLD VAX
+          const undoDoc: Record<string, admin.firestore.FieldValue> = {
+            count: admin.firestore.FieldValue.increment(-1),
+          };
+          Object.keys(existingData).forEach((symptom: string) => {
+            if (symptom !== "name" && symptom !== "dose" && symptom !== "age") {
+              if (existingData[symptom] === true) {
+                if (existingData.dose) {
+                  undoDoc[`${existingData.dose}.${existingData.age}.${
+                    symptom.replace("/", "OR")}`
+                  ] = admin.firestore.FieldValue.increment(-1);
+                } else {
+                  undoDoc[
+                      `${existingData.age}.${symptom.replace("/", "OR")}`
+                  ] = admin.firestore.FieldValue.increment(-1);
+                }
+              }
+            }
+          });
+          admin
+              .firestore()
+              .collection("stats")
+              .doc(existingData.name)
+              .update(undoDoc);
+          // PROCESS NEW DATA FOR USE
+          // SAVE USER DATA
+          await admin.firestore().collection("results").doc(docId).set(docData);
+          delete docData.age;
+          delete docData.name;
+          delete docData.dose;
+          // INCREMENT TOTAL RESPONSE COUNT
+          const updateDoc: Record<string, admin.firestore.FieldValue> = {
+            count: admin.firestore.FieldValue.increment(1),
+          };
+          // INCREMENT VALUES FOR EACH SYMPTOM
+          Object.keys(docData).forEach((symptom: string) => {
+            if (docData[symptom] === true) {
+              if (data.dose) {
+                updateDoc[
+                    `${data.dose}.${data.age}.${symptom.replace("/", "OR")}`
+                ] = admin.firestore.FieldValue.increment(1);
+              } else {
+                updateDoc[
+                    `${data.age}.${symptom.replace("/", "OR")}`
+                ] = admin.firestore.FieldValue.increment(1);
+              }
+            }
+          });
+          if (data.name) {
+            admin
+                .firestore()
+                .collection("stats")
+                .doc(data.name)
+                .update(updateDoc);
+          }
+        } else if (existingData === undefined) {
+        // DATA DOESN'T EXIST FOR USER
+        // SAVE USER DATA
+          await admin.firestore().collection("results").doc(docId).set(docData);
+          delete docData.age;
+          delete docData.name;
+          delete docData.dose;
+          // INCREMENT TOTAL RESPONSE COUNT
+          const updateDoc: Record<string, admin.firestore.FieldValue> = {
+            count: admin.firestore.FieldValue.increment(1),
+          };
+          // INCREMENT VALUES FOR EACH SYMPTOM
+          Object.keys(docData).forEach((symptom: string) => {
+            if (docData[symptom] === true) {
+              if (data.dose) {
+                updateDoc[
+                    `${data.dose}.${data.age}.${symptom.replace("/", "OR")}`
+                ] = admin.firestore.FieldValue.increment(1);
+              } else {
+                updateDoc[
+                    `${data.age}.${symptom.replace("/", "OR")}`
+                ] = admin.firestore.FieldValue.increment(1);
+              }
+            }
+          });
+          if (data.name) {
+            admin
+                .firestore()
+                .collection("stats")
+                .doc(data.name)
+                .update(updateDoc);
+          }
+        }
+      }
+    }
+);
+
+export const getPastResult = functions.https.onCall(async (data, context) => {
+  if (!!data && !!context) {
+    const {gid} = data;
+    const existingData: admin.firestore.DocumentData | undefined = await admin
+        .firestore()
+        .collection("results")
+        .doc(serializeGaId(gid))
+        .get()
+        .then((doc) => doc.data());
+    if (existingData) {
+      if (existingData["NAUSEA / VOMITING"]) {
+        existingData["NAUSEA OR VOMITING"] = existingData["NAUSEA / VOMITING"];
+      }
+      return existingData;
+    }
+  }
+  return undefined;
+});

functions/tsconfig.dev.json

@@ -0,0 +1,5 @@
+{
+  "include": [
+    ".eslintrc.js"
+  ]
+}

functions/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "noImplicitReturns": true,
+    "noUnusedLocals": true,
+    "outDir": "lib",
+    "sourceMap": true,
+    "strict": true,
+    "target": "es2017",
+    "resolveJsonModule": true
+  },
+  "compileOnSave": true,
+  "include": [
+    "src"
+  ]
+}

functions/ui-debug.log

@@ -0,0 +1 @@
+Web / API server started at http://localhost:4000

index.html

@@ -1,124 +0,0 @@
-<!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;
-    }
-
-    .logo {
-      background-image: url("logo512.png");
-    }
-
-    header#archived {
-      background: rgb(149 40 40 / 48%);
-      border-radius: 2rem;
-      position: fixed;
-      padding: 1rem 2rem;
-      font-size: 1.5rem;
-      letter-spacing: 1.5px;
-      text-transform: uppercase;
-      z-index: 99;
-      backdrop-filter: blur(7px);
-      font-family: "GlacialBold";
-      left: 15rem;
-      right: 15rem;
-      top: 3rem;
-    }
-  </style>
-  <script async src="https://www.googletagmanager.com/gtag/js?id=G-7VZCY223NG"></script>
-  <script>function gtag() { dataLayer.push(arguments) } window.dataLayer = window.dataLayer || [], gtag("js", new Date), gtag("config", "G-7VZCY223NG")</script>
-  <title>Vax & Me</title>
-</head>
-
-<body><noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-K4XHBR6" height="0" width="0"
-  style="display:none;visibility:hidden"></iframe></noscript>
-  <header id="archived">
-    <div>⚠️ Project has been archived.</div>
-  </header>
-  <div id="root"></div>
-  <footer data-font="sans">
-    <div class="link-container">
-      <div id="data-sources">
-        <h6 class="overline" data-font="sans">FDA Data Sources</h6><a id="fda-pfizer"
-          href="https://www.fda.gov/media/144416/download">PFizer-BioNTech</a> <a id="fda-moderna"
-          href="https://www.fda.gov/media/144637/download">Moderna</a> <a id="fda-j&j"
-          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="index.html">Home</a> <a target="_blank"
-          href="https://www.gavi.org/vaccineswork/what-difference-between-efficacy-and-effectiveness"
-          rel="noreferrer">What is efficacy? ↗</a>
-      </div>
-      <div>
-        <h6 class="overline" data-font="sans">Legal</h6><a href="copyright.html">Copyright</a> <a
-          href="privacy.html">Privacy</a>
-      </div>
-    </div>
-    <div class="overline by" data-font="sans">Designed &amp; Developed with ❤ by Alba Rajanibala and Ayushya Amitabh
-    </div>
-  </footer>
-  <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
-  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
-  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
-  <script type="text/babel" src="index.js"></script>
-</body>
-
-</html>

website/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "vaxandme",
+  "version": "1.1.1",
+  "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",
+    "deploy": "firebase deploy --only hosting",
+    "serve": "firebase serve --only hosting"
+  },
+  "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"
+    ]
+  }
+}

website/public/404.html

@@ -1,119 +1,119 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
-<html lang="en">
+<html lang="en">
-  <head>
+  <head>
-    <meta charset="utf-8" />
+    <meta charset="utf-8" />
-    <link rel="icon" href="favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+    <meta name="theme-color" content="#000000" />
-    <meta
+    <meta
-      name="description"
+      name="description"
-      content="Learn about the expected side effects of COVID-19 Vaccines"
+      content="Learn about the expected side effects of COVID-19 Vaccines"
-    />
+    />
-    <link rel="apple-touch-icon" href="logo192.png" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
-    <link rel="manifest" href="manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
-
+
-    <style>
+    <style>
-      @import "styles/variables.css";
+      @import "/styles/variables.css";
-      @import "styles/variables-dark.css" screen and
+      @import "/styles/variables-dark.css" screen and
-        (prefers-color-scheme: dark);
+        (prefers-color-scheme: dark);
-      @import "styles/extrasmall.css";
+      @import "/styles/extrasmall.css";
-      @import "styles/small.css" only screen and (min-width: 370px)
+      @import "/styles/small.css" only screen and (min-width: 370px)
-        and (max-width: 767px);
+        and (max-width: 767px);
-      @import "styles/smallmedium.css" only screen and
+      @import "/styles/smallmedium.css" only screen and
-        (min-width: 768px) and (max-width: 1023px);
+        (min-width: 768px) and (max-width: 1023px);
-      @import "styles/medium.css" only screen and
+      @import "/styles/medium.css" only screen and
-        (min-width: 1024px);
+        (min-width: 1024px);
-      @import "styles/large.css" only screen and
+      @import "/styles/large.css" only screen and
-        (min-width: 1366px);
+        (min-width: 1366px);
-      @import "styles/extralarge.css" only screen and
+      @import "/styles/extralarge.css" only screen and
-        (min-width: 1921px);
+        (min-width: 1921px);
-      @font-face {
+      @font-face {
-        font-family: "GlacialBold";
+        font-family: "GlacialBold";
-        src: url("fonts/glacialindifference-bold-webfont.woff2")
+        src: url("/fonts/glacialindifference-bold-webfont.woff2")
-            format("woff2"),
+            format("woff2"),
-          url("fonts/glacialindifference-bold-webfont.woff") format("woff");
+          url("/fonts/glacialindifference-bold-webfont.woff") format("woff");
-        font-weight: normal;
+        font-weight: normal;
-        font-style: normal;
+        font-style: normal;
-        font-display: swap;
+        font-display: swap;
-      }
+      }
-      @font-face {
+      @font-face {
-        font-family: "GlacialItalic";
+        font-family: "GlacialItalic";
-        src: url("fonts/glacialindifference-italic-webfont.woff2")
+        src: url("/fonts/glacialindifference-italic-webfont.woff2")
-            format("woff2"),
+            format("woff2"),
-          url("fonts/glacialindifference-italic-webfont.woff")
+          url("/fonts/glacialindifference-italic-webfont.woff")
-            format("woff");
+            format("woff");
-        font-weight: normal;
+        font-weight: normal;
-        font-style: normal;
+        font-style: normal;
-        font-display: swap;
+        font-display: swap;
-      }
+      }
-      @font-face {
+      @font-face {
-        font-family: "Glacial";
+        font-family: "Glacial";
-        src: url("fonts/glacialindifference-regular-webfont.woff2")
+        src: url("/fonts/glacialindifference-regular-webfont.woff2")
-            format("woff2"),
+            format("woff2"),
-          url("fonts/glacialindifference-regular-webfont.woff")
+          url("/fonts/glacialindifference-regular-webfont.woff")
-            format("woff");
+            format("woff");
-        font-weight: normal;
+        font-weight: normal;
-        font-style: normal;
+        font-style: normal;
-        font-display: swap;
+        font-display: swap;
-      }
+      }
-      [data-font="sans"] {
+      [data-font="sans"] {
-        font-family: "Glacial", sans-serif;
+        font-family: "Glacial", sans-serif;
-        font-display: swap;
+        font-display: swap;
-      }
+      }
-      [data-font="sans-bold"] {
+      [data-font="sans-bold"] {
-        font-family: "GlacialBold", sans-serif;
+        font-family: "GlacialBold", sans-serif;
-        font-display: swap;
+        font-display: swap;
-      }
+      }
-      [data-font="sans-italic"] {
+      [data-font="sans-italic"] {
-        font-family: "GlacialItalic", sans-serif;
+        font-family: "GlacialItalic", sans-serif;
-        font-style: italic;
+        font-style: italic;
-        font-display: swap;
+        font-display: swap;
-      }
+      }
-    </style>
+    </style>
-    <title>Vax & Me | 404</title>
+    <title>Vax & Me | 404</title>
-  </head>
+  </head>
-  <body>
+  <body>
-    <div id="root">
+    <div id="root">
-        <div class="app-container">
+        <div class="app-container">
-            <header>
+            <header>
-                <div class="logo-container">
+                <div class="logo-container">
-                  <div class="logo"> </div>
+                  <div class="logo"> </div>
-                </div>
+                </div>
-              </header>
+              </header>
-              <main>
+              <main>
-                <div class="intro">
+                <div class="intro">
-                  <h1 class="header" data-font="sans-bold">
+                  <h1 class="header" data-font="sans-bold">
-                    404
+                    404
-                  </h1>
+                  </h1>
-                  <h6 class="overline" data-font="sans">
+                  <h6 class="overline" data-font="sans">
-                    This page doesn't exist.
+                    This page doesn't exist.
-                  </h6>
+                  </h6>
-                </div>
+                </div>
-              </main>
+              </main>
-        </div>
+        </div>
-    </div>
+    </div>
-    <footer data-font="sans">
+    <footer data-font="sans">
-      <div class="link-container">
+      <div class="link-container">
-        <div>
+        <div>
-          <h6 class="overline" data-font="sans">FDA Data Sources</h6>
+          <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/144416/download">PFizer-BioNTech</a>
-          <a href="https://www.fda.gov/media/144637/download">Moderna</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>
+          <a href="https://www.fda.gov/media/146304/download">J&J Janssen</a>
-        </div>
+        </div>
-        <div>
+        <div>
-          <h6 class="overline" data-font="sans">Links</h6>
+          <h6 class="overline" data-font="sans">Links</h6>
-          <a href="vaxandme_chart.pdf">Download Chart</a>
+          <a href="/vaxandme_chart.pdf">Download Chart</a>
-          <a href="index.html">Home</a>
+          <a href="/">Home</a>
-        </div>
+        </div>
-        <div>
+        <div>
-          <h6 class="overline" data-font="sans">Legal</h6>
+          <h6 class="overline" data-font="sans">Legal</h6>
-          <a href="copyright.html">Copyright</a>
+          <a href="/copyright">Copyright</a>
-          <a href="privacy.html">Privacy</a>
+          <a href="/privacy">Privacy</a>
-        </div>
+        </div>
-      </div>
+      </div>
-      <div class="overline by" data-font="sans">
+      <div class="overline by" data-font="sans">
-        Designed &amp; Developed with ❤ by Alba Rajanibala and Ayushya Amitabh
+        Designed &amp; Developed with ❤ by Alba Rajanibala and Ayushya Amitabh
-      </div>
+      </div>
-    </footer>
+    </footer>
-  </body>
+  </body>
-</html>
+</html>

website/public/copyright.html

@@ -1,159 +1,159 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
-<html lang="en">
+<html lang="en">
-  <head>
+  <head>
-    <meta charset="utf-8" />
+    <meta charset="utf-8" />
-    <link rel="icon" href="favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+    <meta name="theme-color" content="#000000" />
-    <meta
+    <meta
-      name="description"
+      name="description"
-      content="Learn about the expected side effects of COVID-19 Vaccines"
+      content="Learn about the expected side effects of COVID-19 Vaccines"
-    />
+    />
-    <link rel="apple-touch-icon" href="logo192.png" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
-    <link rel="manifest" href="manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
-
+
-    <style>
+    <style>
-      @import "styles/variables.css";
+      @import "/styles/variables.css";
-      @import "styles/variables-dark.css" screen and
+      @import "/styles/variables-dark.css" screen and
-        (prefers-color-scheme: dark);
+        (prefers-color-scheme: dark);
-      @import "styles/extrasmall.css";
+      @import "/styles/extrasmall.css";
-      @import "styles/small.css" only screen and (min-width: 370px) and
+      @import "/styles/small.css" only screen and (min-width: 370px) and
-        (max-width: 767px);
+        (max-width: 767px);
-      @import "styles/smallmedium.css" only screen and (min-width: 768px) and
+      @import "/styles/smallmedium.css" only screen and (min-width: 768px) and
-        (max-width: 1023px);
+        (max-width: 1023px);
-      @import "styles/medium.css" only screen and (min-width: 1024px);
+      @import "/styles/medium.css" only screen and (min-width: 1024px);
-      @import "styles/large.css" only screen and (min-width: 1366px);
+      @import "/styles/large.css" only screen and (min-width: 1366px);
-      @import "styles/extralarge.css" only screen and (min-width: 1921px);
+      @import "/styles/extralarge.css" only screen and (min-width: 1921px);
-      @font-face {
+      @font-face {
-        font-family: "GlacialBold";
+        font-family: "GlacialBold";
-        src: url("fonts/glacialindifference-bold-webfont.woff2")
+        src: url("/fonts/glacialindifference-bold-webfont.woff2")
-            format("woff2"),
+            format("woff2"),
-          url("fonts/glacialindifference-bold-webfont.woff") format("woff");
+          url("/fonts/glacialindifference-bold-webfont.woff") format("woff");
-        font-weight: normal;
+        font-weight: normal;
-        font-style: normal;
+        font-style: normal;
-        font-display: swap;
+        font-display: swap;
-      }
+      }
-      @font-face {
+      @font-face {
-        font-family: "GlacialItalic";
+        font-family: "GlacialItalic";
-        src: url("fonts/glacialindifference-italic-webfont.woff2")
+        src: url("/fonts/glacialindifference-italic-webfont.woff2")
-            format("woff2"),
+            format("woff2"),
-          url("fonts/glacialindifference-italic-webfont.woff") format("woff");
+          url("/fonts/glacialindifference-italic-webfont.woff") format("woff");
-        font-weight: normal;
+        font-weight: normal;
-        font-style: normal;
+        font-style: normal;
-        font-display: swap;
+        font-display: swap;
-      }
+      }
-      @font-face {
+      @font-face {
-        font-family: "Glacial";
+        font-family: "Glacial";
-        src: url("fonts/glacialindifference-regular-webfont.woff2")
+        src: url("/fonts/glacialindifference-regular-webfont.woff2")
-            format("woff2"),
+            format("woff2"),
-          url("fonts/glacialindifference-regular-webfont.woff") format("woff");
+          url("/fonts/glacialindifference-regular-webfont.woff") format("woff");
-        font-weight: normal;
+        font-weight: normal;
-        font-style: normal;
+        font-style: normal;
-        font-display: swap;
+        font-display: swap;
-      }
+      }
-      [data-font="sans"] {
+      [data-font="sans"] {
-        font-family: "Glacial", sans-serif;
+        font-family: "Glacial", sans-serif;
-        font-display: swap;
+        font-display: swap;
-      }
+      }
-      [data-font="sans-bold"] {
+      [data-font="sans-bold"] {
-        font-family: "GlacialBold", sans-serif;
+        font-family: "GlacialBold", sans-serif;
-        font-display: swap;
+        font-display: swap;
-      }
+      }
-      [data-font="sans-italic"] {
+      [data-font="sans-italic"] {
-        font-family: "GlacialItalic", sans-serif;
+        font-family: "GlacialItalic", sans-serif;
-        font-style: italic;
+        font-style: italic;
-        font-display: swap;
+        font-display: swap;
-      }
+      }
-    </style>
+    </style>
-    <title>Vax & Me | Copyright</title>
+    <title>Vax & Me | Copyright</title>
-  </head>
+  </head>
-  <body>
+  <body>
-    <div id="root">
+    <div id="root">
-      <div class="app-container">
+      <div class="app-container">
-        <header>
+        <header>
-          <div class="logo-container">
+          <div class="logo-container">
-            <div class="logo"></div>
+            <div class="logo"></div>
-            <div class="logo-text-container">
+            <div class="logo-text-container">
-              <p data-font="sans-bold">COPYRIGHT</p>
+              <p data-font="sans-bold">COPYRIGHT</p>
-            </div>
+            </div>
-          </div>
+          </div>
-        </header>
+        </header>
-        <main>
+        <main>
-          <div class="intro">
+          <div class="intro">
-            <h3 class="subheader" data-font="sans-bold">© 2021</h3>
+            <h3 class="subheader" data-font="sans-bold">© 2021</h3>
-            <h6 style="display: inline-block;" class="overline" data-font="sans">
+            <h6 style="display: inline-block;" class="overline" data-font="sans">
-              Alba Rajanibala
+              Alba Rajanibala
-            </h6>
+            </h6>
-            <h6 style="display: inline-block;" class="overline" data-font="sans"> &amp; Ayushya Amitabh
+            <h6 style="display: inline-block;" class="overline" data-font="sans"> &amp; Ayushya Amitabh
-            </h6>
+            </h6>
-          </div>
+          </div>
-          <div class="question-container">
+          <div class="question-container">
-            <p class="overline" data-font="sans">
+            <p class="overline" data-font="sans">
-              Unauthorized copying of this website via any medium is strictly
+              Unauthorized copying of this website via any medium is strictly
-              prohibited. Designed and developed by Alba Rajanibala and Ayushya
+              prohibited. Designed and developed by Alba Rajanibala and Ayushya
-              Amitabh.
+              Amitabh.
-            </p>
+            </p>
-          </div>
+          </div>
-          <div class="question-container">
+          <div class="question-container">
-            <p class="overline" data-font="sans">
+            <p class="overline" data-font="sans">
-              All content on this website, unless otherwise cited is the
+              All content on this website, unless otherwise cited is the
-              intellectual property of Alba Rajanibala and Ayushya Amitabh, and
+              intellectual property of Alba Rajanibala and Ayushya Amitabh, and
-              may not be copied, edited, or reproduced without permission.
+              may not be copied, edited, or reproduced without permission.
-            </p>
+            </p>
-          </div>
+          </div>
-          <div class="question-container">
+          <div class="question-container">
-            <p class="overline" data-font="sans-italic">
+            <p class="overline" data-font="sans-italic">
-              Data shown is based on FDA clinical trials.
+              Data shown is based on FDA clinical trials.
-            </p>
+            </p>
-            <div class="answers-container">
+            <div class="answers-container">
-              <a
+              <a
-                style="display: block"
+                style="display: block"
-                class="question"
+                class="question"
-                data-font="sans-italic"
+                data-font="sans-italic"
-                href="https://www.fda.gov/media/144416/download"
+                href="https://www.fda.gov/media/144416/download"
-                >PFizer-BioNTech</a
+                >PFizer-BioNTech</a
-              >
+              >
-              <a
+              <a
-                style="display: block"
+                style="display: block"
-                class="question"
+                class="question"
-                data-font="sans-italic"
+                data-font="sans-italic"
-                href="https://www.fda.gov/media/144637/download"
+                href="https://www.fda.gov/media/144637/download"
-                >Moderna</a
+                >Moderna</a
-              >
+              >
-              <a
+              <a
-                style="display: block"
+                style="display: block"
-                class="question"
+                class="question"
-                data-font="sans-italic"
+                data-font="sans-italic"
-                href="https://www.fda.gov/media/146304/download"
+                href="https://www.fda.gov/media/146304/download"
-                >J&amp;J Janssen</a
+                >J&amp;J Janssen</a
-              >
+              >
-            </div>
+            </div>
-          </div>
+          </div>
-        </main>
+        </main>
-      </div>
+      </div>
-    </div>
+    </div>
-    <footer data-font="sans">
+    <footer data-font="sans">
-      <div class="link-container">
+      <div class="link-container">
-        <div>
+        <div>
-          <h6 class="overline" data-font="sans">FDA Data Sources</h6>
+          <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/144416/download">PFizer-BioNTech</a>
-          <a href="https://www.fda.gov/media/144637/download">Moderna</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>
+          <a href="https://www.fda.gov/media/146304/download">J&J Janssen</a>
-        </div>
+        </div>
-        <div>
+        <div>
-          <h6 class="overline" data-font="sans">Links</h6>
+          <h6 class="overline" data-font="sans">Links</h6>
-          <a href="vaxandme_chart.pdf">Download Chart</a>
+          <a href="/vaxandme_chart.pdf">Download Chart</a>
-          <a href="index.html">Home</a>
+          <a href="/">Home</a>
-        </div>
+        </div>
-        <div>
+        <div>
-          <h6 class="overline" data-font="sans">Legal</h6>
+          <h6 class="overline" data-font="sans">Legal</h6>
-          <a href="copyright.html">Copyright</a>
+          <a href="/copyright">Copyright</a>
-          <a href="privacy.html">Privacy</a>
+          <a href="/privacy">Privacy</a>
-        </div>
+        </div>
-      </div>
+      </div>
-      <div class="overline by" data-font="sans">
+      <div class="overline by" data-font="sans">
-        Designed &amp; Developed with ❤ by Alba Rajanibala and Ayushya Amitabh
+        Designed &amp; Developed with ❤ by Alba Rajanibala and Ayushya Amitabh
-      </div>
+      </div>
-    </footer>
+    </footer>
-  </body>
+  </body>
-</html>
+</html>

website/public/index.html

@@ -0,0 +1,149 @@
+<!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: 370px)
+        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 class="link-container">
+        <div id="data-sources">
+          <h6 class="overline" data-font="sans">FDA Data Sources</h6>
+          <a id="fda-pfizer" href="https://www.fda.gov/media/144416/download">PFizer-BioNTech</a>
+          <a id="fda-moderna" href="https://www.fda.gov/media/144637/download">Moderna</a>
+          <a id="fda-j&j" 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>
+          <a
+            target="_blank"
+            href="https://www.gavi.org/vaccineswork/what-difference-between-efficacy-and-effectiveness"
+            rel="noreferrer"
+          >
+            What is efficacy? ↗
+          </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>

website/public/privacy.html

@@ -1,147 +1,147 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
-<html lang="en">
+<html lang="en">
-  <head>
+  <head>
-    <meta charset="utf-8" />
+    <meta charset="utf-8" />
-    <link rel="icon" href="favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+    <meta name="theme-color" content="#000000" />
-    <meta
+    <meta
-      name="description"
+      name="description"
-      content="Learn about the expected side effects of COVID-19 Vaccines"
+      content="Learn about the expected side effects of COVID-19 Vaccines"
-    />
+    />
-    <link rel="apple-touch-icon" href="logo192.png" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
-    <link rel="manifest" href="manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
-
+
-    <style>
+    <style>
-      @import "styles/variables.css";
+      @import "/styles/variables.css";
-      @import "styles/variables-dark.css" screen and
+      @import "/styles/variables-dark.css" screen and
-        (prefers-color-scheme: dark);
+        (prefers-color-scheme: dark);
-      @import "styles/extrasmall.css";
+      @import "/styles/extrasmall.css";
-      @import "styles/small.css" only screen and (min-width: 370px) and
+      @import "/styles/small.css" only screen and (min-width: 370px) and
-        (max-width: 767px);
+        (max-width: 767px);
-      @import "styles/smallmedium.css" only screen and (min-width: 768px) and
+      @import "/styles/smallmedium.css" only screen and (min-width: 768px) and
-        (max-width: 1023px);
+        (max-width: 1023px);
-      @import "styles/medium.css" only screen and (min-width: 1024px);
+      @import "/styles/medium.css" only screen and (min-width: 1024px);
-      @import "styles/large.css" only screen and (min-width: 1366px);
+      @import "/styles/large.css" only screen and (min-width: 1366px);
-      @import "styles/extralarge.css" only screen and (min-width: 1921px);
+      @import "/styles/extralarge.css" only screen and (min-width: 1921px);
-      @font-face {
+      @font-face {
-        font-family: "GlacialBold";
+        font-family: "GlacialBold";
-        src: url("fonts/glacialindifference-bold-webfont.woff2")
+        src: url("/fonts/glacialindifference-bold-webfont.woff2")
-            format("woff2"),
+            format("woff2"),
-          url("fonts/glacialindifference-bold-webfont.woff") format("woff");
+          url("/fonts/glacialindifference-bold-webfont.woff") format("woff");
-        font-weight: normal;
+        font-weight: normal;
-        font-style: normal;
+        font-style: normal;
-        font-display: swap;
+        font-display: swap;
-      }
+      }
-      @font-face {
+      @font-face {
-        font-family: "GlacialItalic";
+        font-family: "GlacialItalic";
-        src: url("fonts/glacialindifference-italic-webfont.woff2")
+        src: url("/fonts/glacialindifference-italic-webfont.woff2")
-            format("woff2"),
+            format("woff2"),
-          url("fonts/glacialindifference-italic-webfont.woff") format("woff");
+          url("/fonts/glacialindifference-italic-webfont.woff") format("woff");
-        font-weight: normal;
+        font-weight: normal;
-        font-style: normal;
+        font-style: normal;
-        font-display: swap;
+        font-display: swap;
-      }
+      }
-      @font-face {
+      @font-face {
-        font-family: "Glacial";
+        font-family: "Glacial";
-        src: url("fonts/glacialindifference-regular-webfont.woff2")
+        src: url("/fonts/glacialindifference-regular-webfont.woff2")
-            format("woff2"),
+            format("woff2"),
-          url("fonts/glacialindifference-regular-webfont.woff") format("woff");
+          url("/fonts/glacialindifference-regular-webfont.woff") format("woff");
-        font-weight: normal;
+        font-weight: normal;
-        font-style: normal;
+        font-style: normal;
-        font-display: swap;
+        font-display: swap;
-      }
+      }
-      [data-font="sans"] {
+      [data-font="sans"] {
-        font-family: "Glacial", sans-serif;
+        font-family: "Glacial", sans-serif;
-        font-display: swap;
+        font-display: swap;
-      }
+      }
-      [data-font="sans-bold"] {
+      [data-font="sans-bold"] {
-        font-family: "GlacialBold", sans-serif;
+        font-family: "GlacialBold", sans-serif;
-        font-display: swap;
+        font-display: swap;
-      }
+      }
-      [data-font="sans-italic"] {
+      [data-font="sans-italic"] {
-        font-family: "GlacialItalic", sans-serif;
+        font-family: "GlacialItalic", sans-serif;
-        font-style: italic;
+        font-style: italic;
-        font-display: swap;
+        font-display: swap;
-      }
+      }
-    </style>
+    </style>
-    <title>Vax & Me | Privacy</title>
+    <title>Vax & Me | Privacy</title>
-  </head>
+  </head>
-  <body>
+  <body>
-    <div id="root">
+    <div id="root">
-      <div class="app-container">
+      <div class="app-container">
-        <header>
+        <header>
-          <div class="logo-container">
+          <div class="logo-container">
-            <div class="logo"></div>
+            <div class="logo"></div>
-            <div class="logo-text-container">
+            <div class="logo-text-container">
-              <p data-font="sans-bold">PRIVACY</p>
+              <p data-font="sans-bold">PRIVACY</p>
-            </div>
+            </div>
-          </div>
+          </div>
-        </header>
+        </header>
-        <main>
+        <main>
-          <div class="intro">
+          <div class="intro">
-            <h6 class="overline" data-font="sans">What's collected</h6>
+            <h6 class="overline" data-font="sans">What's collected</h6>
-            <h6 class="overline" data-font="sans">&amp; How it's used</h6>
+            <h6 class="overline" data-font="sans">&amp; How it's used</h6>
-          </div>
+          </div>
-          <div class="question-container">
+          <div class="question-container">
-            <h6 class="subheader" data-font="sans-bold">
+            <h6 class="subheader" data-font="sans-bold">
-              USER PERSONAL INFORMATION
+              USER PERSONAL INFORMATION
-            </h6>
+            </h6>
-            <div class="answers-container">
+            <div class="answers-container">
-              <p class="overline" data-font="sans">
+              <p class="overline" data-font="sans">
-                No personally indentifiable information or user data is
+                No personally indentifiable information or user data is
-                collected. Vax & Me only uses Google Analytics on it's website
+                collected. Vax & Me only uses Google Analytics on it's website
-                to study website performance, and error prevention.
+                to study website performance, and error prevention.
-              </p>
+              </p>
-            </div>
+            </div>
-          </div>
+          </div>
-          <div class="question-container">
+          <div class="question-container">
-            <h6 class="subheader" data-font="sans-bold">USER ACTIVITY</h6>
+            <h6 class="subheader" data-font="sans-bold">USER ACTIVITY</h6>
-            <div class="answers-container">
+            <div class="answers-container">
-              <p class="overline" data-font="sans">
+              <p class="overline" data-font="sans">
-                Vax & Me monitors some click, and keystrokes on it's website to
+                Vax & Me monitors some click, and keystrokes on it's website to
-                detect functionality errors.
+                detect functionality errors.
-              </p>
+              </p>
-            </div>
+            </div>
-          </div>
+          </div>
-          <div class="question-container">
+          <div class="question-container">
-            <h6 class="subheader" data-font="sans-bold">USER DATA</h6>
+            <h6 class="subheader" data-font="sans-bold">USER DATA</h6>
-            <div class="answers-container">
+            <div class="answers-container">
-              <p class="overline" data-font="sans">
+              <p class="overline" data-font="sans">
-                Volunteered data is linked to Google Analytics Client ID - which
+                Volunteered data is linked to Google Analytics Client ID - which
-                is unique to a device and web-browser combination. This is
+                is unique to a device and web-browser combination. This is
-                required to prevent data duplicacy and is core to the
+                required to prevent data duplicacy and is core to the
-                functionality of Vax & Me.
+                functionality of Vax & Me.
-              </p>
+              </p>
-            </div>
+            </div>
-          </div>
+          </div>
-        </main>
+        </main>
-      </div>
+      </div>
-    </div>
+    </div>
-    <footer data-font="sans">
+    <footer data-font="sans">
-      <div class="link-container">
+      <div class="link-container">
-        <div>
+        <div>
-          <h6 class="overline" data-font="sans">FDA Data Sources</h6>
+          <h6 class="overline" data-font="sans">FDA Data Sources</h6>
-          <a href="https://www.fda.gov/media/144416/download"
+          <a href="https://www.fda.gov/media/144416/download"
-            >PFizer-BioNTech</a
+            >PFizer-BioNTech</a
-          >
+          >
-          <a href="https://www.fda.gov/media/144637/download">Moderna</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>
+          <a href="https://www.fda.gov/media/146304/download">J&J Janssen</a>
-        </div>
+        </div>
-        <div>
+        <div>
-          <h6 class="overline" data-font="sans">Links</h6>
+          <h6 class="overline" data-font="sans">Links</h6>
-          <a href="vaxandme_chart.pdf">Download Chart</a>
+          <a href="/vaxandme_chart.pdf">Download Chart</a>
-          <a href="index.html">Home</a>
+          <a href="/">Home</a>
-        </div>
+        </div>
-        <div>
+        <div>
-          <h6 class="overline" data-font="sans">Legal</h6>
+          <h6 class="overline" data-font="sans">Legal</h6>
-          <a href="copyright.html">Copyright</a>
+          <a href="/copyright">Copyright</a>
-          <a href="privacy.html">Privacy</a>
+          <a href="/privacy">Privacy</a>
-        </div>
+        </div>
-      </div>
+      </div>
-      <div class="overline by" data-font="sans">
+      <div class="overline by" data-font="sans">
-        Designed &amp; Developed with ❤ by Alba Rajanibala and Ayushya Amitabh
+        Designed &amp; Developed with ❤ by Alba Rajanibala and Ayushya Amitabh
-      </div>
+      </div>
-    </footer>
+    </footer>
-  </body>
+  </body>
-</html>
+</html>

website/public/styles/extralarge.css

@@ -1,7 +1,7 @@
-.input-popup.expanded {
+.input-popup.expanded {
-  height: 50vh;
+  height: 50vh;
-}
+}
-
+
-.loading-bar-container {
+.loading-bar-container {
-  max-width: 25%;
+  max-width: 25%;
-}
+}

website/public/styles/extrasmall.css

@@ -1,475 +1,475 @@
-* {
+* {
-  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);
+  color: var(--color-secondary);
-  user-select: none;
+  user-select: none;
-}
+}
-
+
-html {
+html {
-  font-size: 10px;
+  font-size: 10px;
-  scroll-behavior: smooth;
+  scroll-behavior: smooth;
-}
+}
-body {
+body {
-  display: flex;
+  display: flex;
-  flex-direction: column;
+  flex-direction: column;
-  font-size: 10px;
+  font-size: 10px;
-  padding: 3.75rem;
+  padding: 3.75rem;
-  padding-bottom: 0 !important;
+  padding-bottom: 0 !important;
-  height: calc(100vh - 3.75rem);
+  height: calc(100vh - 3.75rem);
-  overflow-x: hidden;
+  overflow-x: hidden;
-  max-width: 100vw;
+  max-width: 100vw;
-  background: var(--color-primary);
+  background: var(--color-primary);
-}
+}
-
+
-#root {
+#root {
-  flex: 1;
+  flex: 1;
-  display: flex;
+  display: flex;
-}
+}
-
+
-.app-container {
+.app-container {
-  flex: 1;
+  flex: 1;
-}
+}
-
+
-header {
+header {
-  display: flex;
+  display: flex;
-  justify-content: center;
+  justify-content: center;
-  flex-direction: column;
+  flex-direction: column;
-}
+}
-
+
-.logo-container {
+.logo-container {
-  display: flex;
+  display: flex;
-  width: fit-content;
+  width: fit-content;
-  justify-content: center;
+  justify-content: center;
-  flex-direction: column;
+  flex-direction: column;
-}
+}
-.logo {
+.logo {
-  background-size: 100%;
+  background-size: 100%;
-  width: 5rem;
+  width: 5rem;
-  height: 5rem;
+  height: 5rem;
-  display: inline-block;
+  display: inline-block;
-  background-image: url("../logo512.png");
+  background-image: url("/logo512.png");
-}
+}
-.logo-text-container {
+.logo-text-container {
-  justify-content: center;
+  justify-content: center;
-  vertical-align: middle;
+  vertical-align: middle;
-  flex-direction: column;
+  flex-direction: column;
-  flex: 1;
+  flex: 1;
-  margin-top: 3.5rem;
+  margin-top: 3.5rem;
-}
+}
-.logo-text-container p {
+.logo-text-container p {
-  font-size: 2.4rem;
+  font-size: 2.4rem;
-}
+}
-
+
-.header {
+.header {
-  font-size: 10rem;
+  font-size: 10rem;
-  letter-spacing: 1rem;
+  letter-spacing: 1rem;
-}
+}
-
+
-.subheader {
+.subheader {
-  font-size: 2.5rem;
+  font-size: 2.5rem;
-  margin: 0;
+  margin: 0;
-}
+}
-
+
-.overline {
+.overline {
-  font-size: 2rem;
+  font-size: 2rem;
-  letter-spacing: 0.1rem;
+  letter-spacing: 0.1rem;
-  margin: 0;
+  margin: 0;
-}
+}
-
+
-.overline[data-button] {
+.overline[data-button] {
-  border-bottom: 1px solid;
+  border-bottom: 1px solid;
-  width: fit-content;
+  width: fit-content;
-  cursor: pointer;
+  cursor: pointer;
-}
+}
-
+
-.overline[data-button] a {
+.overline[data-button] a {
-  text-decoration: none;
+  text-decoration: none;
-}
+}
-
+
-.intro {
+.intro {
-  margin: 4.5rem 0;
+  margin: 4.5rem 0;
-  display: inline-block;
+  display: inline-block;
-  width: fit-content;
+  width: fit-content;
-}
+}
-
+
-.question-container {
+.question-container {
-  margin: 3.5rem 0;
+  margin: 3.5rem 0;
-}
+}
-
+
-.question {
+.question {
-  font-size: 2rem;
+  font-size: 2rem;
-}
+}
-
+
-.answers-container {
+.answers-container {
-  margin: 1rem 0;
+  margin: 1rem 0;
-}
+}
-
+
-.answer {
+.answer {
-  display: inline-flex;
+  display: inline-flex;
-  font-size: 1.8rem;
+  font-size: 1.8rem;
-  padding: 1.2rem 1.5rem;
+  padding: 1.2rem 1.5rem;
-  margin-right: 0.75rem;
+  margin-right: 0.75rem;
-  margin-bottom: 0.75rem;
+  margin-bottom: 0.75rem;
-  border-radius: 24rem;
+  border-radius: 24rem;
-  background-color: var(--color-secondary);
+  background-color: var(--color-secondary);
-  color: var(--color-primary);
+  color: var(--color-primary);
-  outline: none !important;
+  outline: none !important;
-  border: none !important;
+  border: none !important;
-  letter-spacing: 0.2rem;
+  letter-spacing: 0.2rem;
-  text-transform: uppercase;
+  text-transform: uppercase;
-  cursor: pointer;
+  cursor: pointer;
-}
+}
-
+
-.answer.selected {
+.answer.selected {
-  background-color: var(--color-bright);
+  background-color: var(--color-bright);
-}
+}
-.answer.unselected {
+.answer.unselected {
-  background-color: var(--color-dim);
+  background-color: var(--color-dim);
-}
+}
-
+
-.symptom-container.subheader {
+.symptom-container.subheader {
-  margin-top: 5rem;
+  margin-top: 5rem;
-  margin-bottom: 2.5rem;
+  margin-bottom: 2.5rem;
-  display: block !important;
+  display: block !important;
-}
+}
-.symptom-container.subheader .overline {
+.symptom-container.subheader .overline {
-  margin: 1rem 0;
+  margin: 1rem 0;
-}
+}
-.symptom-container {
+.symptom-container {
-  margin-bottom: 5rem;
+  margin-bottom: 5rem;
-}
+}
-.symptom {
+.symptom {
-  max-width: 100%;
+  max-width: 100%;
-  padding: 1.5rem;
+  padding: 1.5rem;
-  flex-direction: column;
+  flex-direction: column;
-  justify-content: center;
+  justify-content: center;
-  align-items: center;
+  align-items: center;
-  border: 1px solid transparent;
+  border: 1px solid transparent;
-  border-radius: 1rem;
+  border-radius: 1rem;
-  transition: border-color ease-in-out 0.4s;
+  transition: border-color ease-in-out 0.4s;
-  transition: box-shadow ease-in-out 0.3s;
+  transition: box-shadow ease-in-out 0.3s;
-}
+}
-.symptom.at-site {
+.symptom.at-site {
-  background-color: var(--color-dim);
+  background-color: var(--color-dim);
-  border-radius: 0;
+  border-radius: 0;
-}
+}
-.symptom.at-site:first-of-type {
+.symptom.at-site:first-of-type {
-  border-top-left-radius: 1rem;
+  border-top-left-radius: 1rem;
-  border-top-right-radius: 1rem;
+  border-top-right-radius: 1rem;
-}
+}
-.symptom.at-site:nth-of-type(3) {
+.symptom.at-site:nth-of-type(3) {
-  border-bottom-left-radius: 1rem;
+  border-bottom-left-radius: 1rem;
-  border-bottom-right-radius: 1rem;
+  border-bottom-right-radius: 1rem;
-}
+}
-
+
-.symptom-emoji {
+.symptom-emoji {
-  text-align: center;
+  text-align: center;
-  font-size: 3rem;
+  font-size: 3rem;
-  padding: 0.75rem;
+  padding: 0.75rem;
-  display: block;
+  display: block;
-}
+}
-.symptom-name {
+.symptom-name {
-  font-size: 2rem;
+  font-size: 2rem;
-  text-align: center;
+  text-align: center;
-  display: block;
+  display: block;
-}
+}
-.symptom-chance {
+.symptom-chance {
-  font-size: 1.8rem;
+  font-size: 1.8rem;
-  text-align: center;
+  text-align: center;
-  display: block;
+  display: block;
-}
+}
-.symptom-chance:before {
+.symptom-chance:before {
-  content: "EXPERIENCED BY";
+  content: "EXPERIENCED BY";
-  font-size: 1rem;
+  font-size: 1rem;
-  display: block;
+  display: block;
-  text-align: center;
+  text-align: center;
-  letter-spacing: 0.1rem;
+  letter-spacing: 0.1rem;
-}
+}
-.symptom-chance:after {
+.symptom-chance:after {
-  content: "PEOPLE";
+  content: "PEOPLE";
-  font-size: 1rem;
+  font-size: 1rem;
-  display: block;
+  display: block;
-  text-align: center;
+  text-align: center;
-  letter-spacing: 0.1rem;
+  letter-spacing: 0.1rem;
-}
+}
-
+
-footer {
+footer {
-  padding: 5rem 3.75rem;
+  padding: 5rem 3.75rem;
-  width: calc(100vw - 7.5rem);
+  width: calc(100vw - 7.5rem);
-  margin-left: -3.75rem;
+  margin-left: -3.75rem;
-  background-color: var(--color-secondary-light);
+  background-color: var(--color-secondary-light);
-}
+}
-.link-container {
+.link-container {
-  font-size: 1.2rem;
+  font-size: 1.2rem;
-  transition: none !important;
+  transition: none !important;
-  display: flex;
+  display: flex;
-  flex-direction: column;
+  flex-direction: column;
-}
+}
-
+
-.link-container > div {
+.link-container > div {
-  flex: 1;
+  flex: 1;
-  display: flex;
+  display: flex;
-  flex-direction: column;
+  flex-direction: column;
-  color: var(--color-primary);
+  color: var(--color-primary);
-}
+}
-
+
-.link-container > div > .overline {
+.link-container > div > .overline {
-  color: var(--color-primary);
+  color: var(--color-primary);
-}
+}
-
+
-.link-container > div:not(:first-of-type) {
+.link-container > div:not(:first-of-type) {
-  margin-top: 3rem;
+  margin-top: 3rem;
-}
+}
-
+
-a {
+a {
-  color: var(--color);
+  color: var(--color);
-  margin-top: 0.75rem;
+  margin-top: 0.75rem;
-  max-width: fit-content;
+  max-width: fit-content;
-
+
-}
+}
-
+
-.link-container a {
+.link-container a {
-  font-size: 1.8rem;
+  font-size: 1.8rem;
-}
+}
-
+
-footer .by {
+footer .by {
-  color: var(--color-primary);
+  color: var(--color-primary);
-  margin-top: 4rem;
+  margin-top: 4rem;
-}
+}
-
+
-@keyframes slideUp {
+@keyframes slideUp {
-  0% {
+  0% {
-    transform: translateY(300%);
+    transform: translateY(300%);
-  }
+  }
-  100% {
+  100% {
-    transform: translateY(0);
+    transform: translateY(0);
-  }
+  }
-}
+}
-
+
-.input-popup {
+.input-popup {
-  position: sticky;
+  position: sticky;
-  background-color: var(--color-secondary-light);
+  background-color: var(--color-secondary-light);
-  bottom: 1rem;
+  bottom: 1rem;
-  height: 13.5rem;
+  height: 13.5rem;
-  margin-bottom: 7.5rem;
+  margin-bottom: 7.5rem;
-  transition: height ease-in-out 0.3s;
+  transition: height ease-in-out 0.3s;
-  overflow: hidden;
+  overflow: hidden;
-  border-radius: 2rem;
+  border-radius: 2rem;
-  max-height: 85vh;
+  max-height: 85vh;
-  display: flex;
+  display: flex;
-  flex-direction: column;
+  flex-direction: column;
-  animation: 0.5s ease-out 0s 1 slideUp;
+  animation: 0.5s ease-out 0s 1 slideUp;
-  animation-delay: 0.5s;
+  animation-delay: 0.5s;
-  animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
-  transform: translateY(200%);
+  transform: translateY(200%);
-}
+}
-.input-popup * {
+.input-popup * {
-  color: var(--color-primary);
+  color: var(--color-primary);
-}
+}
-.input-popup.expanded {
+.input-popup.expanded {
-  height: 80vh;
+  height: 80vh;
-  overflow-y: auto;
+  overflow-y: auto;
-}
+}
-.input-popup .input-popup-header-icon {
+.input-popup .input-popup-header-icon {
-  transform: rotate(180deg);
+  transform: rotate(180deg);
-}
+}
-.input-popup.expanded .input-popup-header-icon {
+.input-popup.expanded .input-popup-header-icon {
-  transform: rotate(0deg);
+  transform: rotate(0deg);
-}
+}
-.input-popup-header {
+.input-popup-header {
-  padding: 2.5rem;
+  padding: 2.5rem;
-  position: sticky;
+  position: sticky;
-  top: 0;
+  top: 0;
-  display: flex;
+  display: flex;
-  flex-direction: row;
+  flex-direction: row;
-  justify-content: center;
+  justify-content: center;
-  align-items: center;
+  align-items: center;
-  background-color: var(--color-secondary-light);
+  background-color: var(--color-secondary-light);
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid transparent;
-}
+}
-.input-popup.expanded .input-popup-header {
+.input-popup.expanded .input-popup-header {
-  border-bottom: 1px solid var(--color-tertiary);
+  border-bottom: 1px solid var(--color-tertiary);
-}
+}
-.input-popup-header-text {
+.input-popup-header-text {
-  flex: 1;
+  flex: 1;
-}
+}
-.input-popup-header-icon {
+.input-popup-header-icon {
-  cursor: pointer;
+  cursor: pointer;
-  background-color: var(--color-primary);
+  background-color: var(--color-primary);
-  outline: none;
+  outline: none;
-  color: var(--color-secondary);
+  color: var(--color-secondary);
-  border: 1px solid transparent;
+  border: 1px solid transparent;
-  border-radius: 10rem;
+  border-radius: 10rem;
-  height: 5rem;
+  height: 5rem;
-  width: 5rem;
+  width: 5rem;
-}
+}
-
+
-.input-popup-body {
+.input-popup-body {
-  padding: 2.5rem 2.5rem;
+  padding: 2.5rem 2.5rem;
-  flex: 1;
+  flex: 1;
-}
+}
-
+
-.input-popup-body .question-container .answers-container .answer {
+.input-popup-body .question-container .answers-container .answer {
-  background-color: var(--color-tertiary);
+  background-color: var(--color-tertiary);
-}
+}
-.input-popup-body .question-container .answers-container .answer.selected {
+.input-popup-body .question-container .answers-container .answer.selected {
-  background-color: var(--color-secondary);
+  background-color: var(--color-secondary);
-}
+}
-
+
-.input-popup-submit {
+.input-popup-submit {
-  padding: 2.5rem;
+  padding: 2.5rem;
-  text-align: center;
+  text-align: center;
-  font-size: 2rem;
+  font-size: 2rem;
-  letter-spacing: 0.3rem;
+  letter-spacing: 0.3rem;
-  background-color: var(--color-secondary);
+  background-color: var(--color-secondary);
-  cursor: pointer;
+  cursor: pointer;
-}
+}
-.input-popup.expanded .input-popup-submit {
+.input-popup.expanded .input-popup-submit {
-  position: sticky;
+  position: sticky;
-  bottom: 0;
+  bottom: 0;
-}
+}
-.input-popup-submit.submitted {
+.input-popup-submit.submitted {
-  background-color: #55c16c;
+  background-color: #55c16c;
-}
+}
-.input-popup-submit.errored {
+.input-popup-submit.errored {
-  background-color: #c43d34;
+  background-color: #c43d34;
-}
+}
-
+
-.input-popup.expanded::-webkit-scrollbar {
+.input-popup.expanded::-webkit-scrollbar {
-  width: 1.5rem;
+  width: 1.5rem;
-  background-color: var(--color-tertiary);
+  background-color: var(--color-tertiary);
-  border-radius: 0 4rem 4rem 0;
+  border-radius: 0 4rem 4rem 0;
-}
+}
-.input-popup.expanded::-webkit-scrollbar-thumb {
+.input-popup.expanded::-webkit-scrollbar-thumb {
-  width: 1rem;
+  width: 1rem;
-  background-color: var(--color-dim);
+  background-color: var(--color-dim);
-  border-radius: 0 4rem 4rem 0;
+  border-radius: 0 4rem 4rem 0;
-}
+}
-
+
-.tip-container {
+.tip-container {
-  display: flex;
+  display: flex;
-  flex-direction: row;
+  flex-direction: row;
-  padding: 2rem 0;
+  padding: 2rem 0;
-  margin: 2rem 0;
+  margin: 2rem 0;
-  border-radius: 1rem;
+  border-radius: 1rem;
-  margin-bottom: 2rem;
+  margin-bottom: 2rem;
-}
+}
-.tip-icon {
+.tip-icon {
-  font-size: 3rem;
+  font-size: 3rem;
-}
+}
-.tip .overline {
+.tip .overline {
-  font-size: 1.6rem;
+  font-size: 1.6rem;
-}
+}
-.tip .subheader {
+.tip .subheader {
-  font-size: 2rem;
+  font-size: 2rem;
-  letter-spacing: 0.2rem;
+  letter-spacing: 0.2rem;
-  margin-top: 0.4rem;
+  margin-top: 0.4rem;
-}
+}
-.tip .header {
+.tip .header {
-  font-size: 6rem;
+  font-size: 6rem;
-  letter-spacing: 0.5rem;
+  letter-spacing: 0.5rem;
-}
+}
-.tip-container .overline[data-button] {
+.tip-container .overline[data-button] {
-  margin-top: 1rem;
+  margin-top: 1rem;
-}
+}
-.tip-container .overline[data-button]:first-of-type {
+.tip-container .overline[data-button]:first-of-type {
-  margin-top: 2rem;
+  margin-top: 2rem;
-}
+}
-
+
-@keyframes loading {
+@keyframes loading {
-  0% {
+  0% {
-    width: 0%;
+    width: 0%;
-  }
+  }
-  100% {
+  100% {
-    width: 100%;
+    width: 100%;
-  }
+  }
-}
+}
-.loading-bar-container {
+.loading-bar-container {
-  min-height: 2rem;
+  min-height: 2rem;
-  background-color: var(--color-secondary-light);
+  background-color: var(--color-secondary-light);
-  border-radius: 1rem;
+  border-radius: 1rem;
-  margin-top: 1rem;
+  margin-top: 1rem;
-}
+}
-.loading-bar {
+.loading-bar {
-  position: relative;
+  position: relative;
-  width: 1rem;
+  width: 1rem;
-  min-height: 2rem;
+  min-height: 2rem;
-  background-color: #25d255;
+  background-color: #25d255;
-  border-radius: 1rem;
+  border-radius: 1rem;
-  animation: 2s ease-out 0s infinite loading;
+  animation: 2s ease-out 0s infinite loading;
-}
+}
-
+
-.result-header-container {
+.result-header-container {
-  display: flex;
+  display: flex;
-  align-items: center;
+  align-items: center;
-  margin-top: 5rem;
+  margin-top: 5rem;
-  flex-direction: column;
+  flex-direction: column;
-  margin-bottom: 2rem;
+  margin-bottom: 2rem;
-  border: 1px solid var(--color-secondary);
+  border: 1px solid var(--color-secondary);
-  border-radius: 1rem;
+  border-radius: 1rem;
-  padding: 3rem 2rem;
+  padding: 3rem 2rem;
-}
+}
-
+
-.result-header-container .symptom-container {
+.result-header-container .symptom-container {
-  margin: 0;
+  margin: 0;
-  flex: 1;
+  flex: 1;
-  width: 100%;
+  width: 100%;
-}
+}
-
+
-.result-header-select {
+.result-header-select {
-  width: 100%;
+  width: 100%;
-  margin-top: 2rem;
+  margin-top: 2rem;
-}
+}
-
+
-.result-header-select .overline {
+.result-header-select .overline {
-  font-size: 1.6rem;
+  font-size: 1.6rem;
-  margin-bottom: 0.75rem;
+  margin-bottom: 0.75rem;
-}
+}
-
+
-
+
-.result-header-select .overline.errored {
+.result-header-select .overline.errored {
-  margin-bottom: 0;
+  margin-bottom: 0;
-  margin-top: 0.75rem;
+  margin-top: 0.75rem;
-  color: #c43d34;
+  color: #c43d34;
-}
+}
-.result-header-select .overline.success {
+.result-header-select .overline.success {
-  margin-bottom: 0;
+  margin-bottom: 0;
-  margin-top: 0.75rem;
+  margin-top: 0.75rem;
-}
+}
-
+
-.result-header-select select {
+.result-header-select select {
-  background-color: var(--color-tertiary);
+  background-color: var(--color-tertiary);
-  border-radius: 1rem;
+  border-radius: 1rem;
-  padding: 1rem 2rem;
+  padding: 1rem 2rem;
-  outline: none;
+  outline: none;
-  width: 100%;
+  width: 100%;
-}
+}
-
+
-@media (hover: hover) and (pointer: fine) {
+@media (hover: hover) and (pointer: fine) {
-  .answer:hover,
+  .answer:hover,
-  .answer.unselected:hover {
+  .answer.unselected:hover {
-    background-color: var(--color-secondary-light);
+    background-color: var(--color-secondary-light);
-  }
+  }
-  .symptom:hover {
+  .symptom:hover {
-    box-shadow: 0px 0px 100px var(--color-tertiary);
+    box-shadow: 0px 0px 100px var(--color-tertiary);
-    background-color: var(--color-primary);
+    background-color: var(--color-primary);
-  }
+  }
-  .symptom.at-site:hover {
+  .symptom.at-site:hover {
-    box-shadow: 0px 0px 100px var(--color-dim);
+    box-shadow: 0px 0px 100px var(--color-dim);
-    background-color: var(--color-secondary-light);
+    background-color: var(--color-secondary-light);
-    color: var(--color-primary);
+    color: var(--color-primary);
-  }
+  }
-  .symptom.at-site:hover p {
+  .symptom.at-site:hover p {
-    color: var(--color-primary);
+    color: var(--color-primary);
-  }
+  }
-  .input-popup-header-icon:hover {
+  .input-popup-header-icon:hover {
-    background-color: var(--color-tertiary);
+    background-color: var(--color-tertiary);
-  }
+  }
-  .input-popup-body .question-container .answers-container .answer:hover {
+  .input-popup-body .question-container .answers-container .answer:hover {
-    background-color: var(--color-bright);
+    background-color: var(--color-bright);
-  }
+  }
-  .input-popup-submit:hover {
+  .input-popup-submit:hover {
-    background-color: var(--color-tertiary);
+    background-color: var(--color-tertiary);
-  }
+  }
-}
+}

website/public/styles/large.css

@@ -1,30 +1,30 @@
-body {
+body {
-  padding: 15rem;
+  padding: 15rem;
-  padding-top: 10rem;
+  padding-top: 10rem;
-  height: calc(100vh - 10rem);
+  height: calc(100vh - 10rem);
-}
+}
-
+
-.logo {
+.logo {
-  width: 10rem;
+  width: 10rem;
-  height: 10rem;
+  height: 10rem;
-}
+}
-.symptom {
+.symptom {
-  max-width: 25rem;
+  max-width: 25rem;
-  height: 25rem;
+  height: 25rem;
-}
+}
-
+
-footer {
+footer {
-  padding: 5rem 15rem;
+  padding: 5rem 15rem;
-  width: calc(100vw - 30rem);
+  width: calc(100vw - 30rem);
-  margin-left: -15rem;
+  margin-left: -15rem;
-}
+}
-.input-popup {
+.input-popup {
-  height: 10rem;
+  height: 10rem;
-}
+}
-.input-popup.expanded {
+.input-popup.expanded {
-  height: 55vh;
+  height: 55vh;
-}
+}
-
+
-.loading-bar-container {
+.loading-bar-container {
-  max-width: 35%;
+  max-width: 35%;
-}
+}

website/public/styles/medium.css

@@ -1,135 +1,135 @@
-body {
+body {
-  padding: 7.5rem;
+  padding: 7.5rem;
-  padding-top: 5rem;
+  padding-top: 5rem;
-  height: calc(100vh - 5rem);
+  height: calc(100vh - 5rem);
-}
+}
-
+
-.logo-container {
+.logo-container {
-  flex-direction: row;
+  flex-direction: row;
-  align-items: center;
+  align-items: center;
-  justify-content: flex-start;
+  justify-content: flex-start;
-}
+}
-.logo {
+.logo {
-  width: 7.5rem;
+  width: 7.5rem;
-  height: 7.5rem;
+  height: 7.5rem;
-}
+}
-.logo-text-container {
+.logo-text-container {
-  margin-top: 0;
+  margin-top: 0;
-  margin-left: 1.5rem;
+  margin-left: 1.5rem;
-  border-left: 1px solid var(--color-secondary);
+  border-left: 1px solid var(--color-secondary);
-  padding-left: 1.5rem;
+  padding-left: 1.5rem;
-}
+}
-.intro .overline {
+.intro .overline {
-  font-size: 3rem;
+  font-size: 3rem;
-}
+}
-.intro .subheader {
+.intro .subheader {
-  font-size: 4rem;
+  font-size: 4rem;
-}
+}
-
+
-.header {
+.header {
-  font-size: 15rem;
+  font-size: 15rem;
-  letter-spacing: 1.5rem;
+  letter-spacing: 1.5rem;
-}
+}
-
+
-.overline[data-button] {
+.overline[data-button] {
-  display: inline-block;
+  display: inline-block;
-}
+}
-.overline[data-button]:not(:first-of-type) {
+.overline[data-button]:not(:first-of-type) {
-  margin-left: 1.5rem;
+  margin-left: 1.5rem;
-}
+}
-
+
-.symptom {
+.symptom {
-  width: 100%;
+  width: 100%;
-  max-width: 20rem;
+  max-width: 20rem;
-  height: 20rem;
+  height: 20rem;
-  display: inline-flex;
+  display: inline-flex;
-  margin-bottom: 0.75rem;
+  margin-bottom: 0.75rem;
-}
+}
-.symptom-emoji {
+.symptom-emoji {
-  font-size: 3.5rem;
+  font-size: 3.5rem;
-  padding: 0.75rem;
+  padding: 0.75rem;
-}
+}
-.symptom-name {
+.symptom-name {
-  font-size: 2.5rem;
+  font-size: 2.5rem;
-  text-align: center;
+  text-align: center;
-}
+}
-.symptom-chance {
+.symptom-chance {
-  font-size: 2.4rem;
+  font-size: 2.4rem;
-  text-align: center;
+  text-align: center;
-}
+}
-.symptom-chance:before {
+.symptom-chance:before {
-  font-size: 1.5rem;
+  font-size: 1.5rem;
-}
+}
-.symptom-chance:after {
+.symptom-chance:after {
-  font-size: 1.5rem;
+  font-size: 1.5rem;
-}
+}
-.symptom.at-site:first-of-type {
+.symptom.at-site:first-of-type {
-  border-radius: 0;
+  border-radius: 0;
-  border-top-left-radius: 1rem;
+  border-top-left-radius: 1rem;
-  border-bottom-left-radius: 1rem;
+  border-bottom-left-radius: 1rem;
-}
+}
-.symptom.at-site:nth-of-type(3) {
+.symptom.at-site:nth-of-type(3) {
-  border-radius: 0;
+  border-radius: 0;
-  border-top-right-radius: 1rem;
+  border-top-right-radius: 1rem;
-  border-bottom-right-radius: 1rem;
+  border-bottom-right-radius: 1rem;
-}
+}
-
+
-footer {
+footer {
-  padding: 5rem 7.5rem;
+  padding: 5rem 7.5rem;
-  width: calc(100vw - 15rem);
+  width: calc(100vw - 15rem);
-  margin-left: -7.5rem;
+  margin-left: -7.5rem;
-}
+}
-.link-container {
+.link-container {
-  font-size: 1.7rem;
+  font-size: 1.7rem;
-  flex-direction: row;
+  flex-direction: row;
-}
+}
-.link-container > div {
+.link-container > div {
-  flex-direction: column;
+  flex-direction: column;
-  flex: 1;
+  flex: 1;
-}
+}
-.link-container > div:not(:first-of-type) {
+.link-container > div:not(:first-of-type) {
-  margin-left: 3rem;
+  margin-left: 3rem;
-  margin-top: 0;
+  margin-top: 0;
-}
+}
-
+
-.input-popup {
+.input-popup {
-  height: 10rem;
+  height: 10rem;
-}
+}
-
+
-.input-popup.expanded {
+.input-popup.expanded {
-  height: 55vh;
+  height: 55vh;
-}
+}
-
+
-.loading-bar-container {
+.loading-bar-container {
-  max-width: 50%;
+  max-width: 50%;
-}
+}
-
+
-.tip-container .overline[data-button] {
+.tip-container .overline[data-button] {
-  margin-top: 2rem;
+  margin-top: 2rem;
-  margin-left: 0;
+  margin-left: 0;
-}
+}
-.tip-container .overline[data-button]:last-of-type {
+.tip-container .overline[data-button]:last-of-type {
-  margin-left: 1.2rem;
+  margin-left: 1.2rem;
-}
+}
-.tip {
+.tip {
-  padding-left: 2rem;
+  padding-left: 2rem;
-}
+}
-
+
-.result-header-container {
+.result-header-container {
-  flex-direction: row;
+  flex-direction: row;
-}
+}
-
+
-.result-header-container .symptom-container {
+.result-header-container .symptom-container {
-  width: fit-content;
+  width: fit-content;
-}
+}
-
+
-.result-header-select {
+.result-header-select {
-  margin-top: 0rem;
+  margin-top: 0rem;
-  width: fit-content;
+  width: fit-content;
-  padding-left: 3rem;
+  padding-left: 3rem;
-  border-left: 1px solid var(--color-secondary);
+  border-left: 1px solid var(--color-secondary);
-}
+}
-
+
-.result-header-select select {
+.result-header-select select {
-  width: fit-content;
+  width: fit-content;
-}
+}

website/public/styles/small.css

@@ -1,7 +1,7 @@
-.input-popup {
+.input-popup {
-  height: 11.5rem;
+  height: 11.5rem;
-}
+}
-
+
-.input-popup.expanded {
+.input-popup.expanded {
-  height: 85vh;
+  height: 85vh;
-}
+}

website/public/styles/smallmedium.css

@@ -1,7 +1,7 @@
-.input-popup {
+.input-popup {
-  height: 11rem;
+  height: 11rem;
-}
+}
-
+
-.input-popup.expanded {
+.input-popup.expanded {
-  height: 65vh;
+  height: 65vh;
-}
+}

website/public/styles/variables-dark.css

@@ -1,9 +1,9 @@
-:root {
+:root {
-  --color-primary: black;
+  --color-primary: black;
-  --color-secondary: white;
+  --color-secondary: white;
-  --color-secondary-light: rgb(185, 185, 185);
+  --color-secondary-light: rgb(185, 185, 185);
-  --color-tertiary: rgb(105, 105, 105);
+  --color-tertiary: rgb(105, 105, 105);
-  --color-bright: #636363;
+  --color-bright: #636363;
-  --color-dim: #352f2f;
+  --color-dim: #352f2f;
-  font-size: 10px;
+  font-size: 10px;
-}
+}

website/public/styles/variables.css

@@ -1,9 +1,9 @@
-:root {
+:root {
-  --color-primary: white;
+  --color-primary: white;
-  --color-secondary: black;
+  --color-secondary: black;
-  --color-secondary-light: rgb(56, 56, 56);
+  --color-secondary-light: rgb(56, 56, 56);
-  --color-tertiary: rgba(185, 185, 185, 0.459);
+  --color-tertiary: rgba(185, 185, 185, 0.459);
-  --color-bright: #575757;
+  --color-bright: #575757;
-  --color-dim: #aeadb0;
+  --color-dim: #aeadb0;
-  font-size: 10px;
+  font-size: 10px;
-}
+}