v1.0.0-beta/public site

firebase.json

@@ -2,6 +2,15 @@
   "functions": {
     "predeploy": [
       "npm --prefix \"$RESOURCE_DIR\" run lint"
+    ],
+    "source": "functions"
+  },
+  "hosting": {
+    "public": "website",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
     ]
   }
 }

public/manifest.json

@@ -28,13 +28,13 @@
       "css": ["/static/css/app.css"]
     }
   ],
-  "web_accessible_resources": ["logo192.png"],
+  "web_accessible_resources": ["android-icon-192x192.png"],
   "icons": {
-    "16": "favicon.ico",
-    "32": "favicon.ico",
-    "64": "favicon.ico",
-    "128": "logo192.png",
-    "512": "logo512.png"
+    "16": "favicon-16x16.png",
+    "32": "favicon-32x32.png",
+    "96": "favicon-96x96.png",
+    "144": "android-icon-144x144.png",
+    "192": "android-icon-192x192.png"
   },
   "manifest_version": 2
 }

src/index.css

@@ -137,8 +137,8 @@ body.amazon-prime textarea:focus {
   right: -2rem !important;
   border: 1px solid white;
   background-color: black !important;
-  /* background-image: url('/logo192.png'); */
-  background-image: url('chrome-extension://__MSG_@@extension_id__/logo192.png');
+  /* background-image: url('/android-icon-192x192.png'); */
+  background-image: url('chrome-extension://__MSG_@@extension_id__/android-icon-192x192.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: 2rem;

website/404.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="font.css" />
+    <link rel="stylesheet" type="text/css" href="style.css" />
+    <title>Watch Party</title>
+  </head>
+  <body>
+    <section>
+      <div class="page" style="background-color: rgba(0, 0, 0, 0.7);">
+        <a class="cta-container" href="https://chrome.google.com/webstore/category/extensions">
+          <mark class="cta">
+            That page doesn't exist, but you can still get the Chrome Extension.
+          </mark>
+        </a>
+        <a href="https://chrome.google.com/webstore/category/extensions" class="title">
+          <span>
+            WATCH PARTY
+          </span>
+        </a>
+        <a class="cta-container support" href="https://www.">
+          <mark class="cta">
+            ▶ Go To Home ◀
+          </mark>
+        </a>
+      </div>
+    </section>
+    <footer>
+      <div>
+        <span class="full">© Ayushya Amitabh, 2020</span>
+        <span
+          >Built with ❤️ for <a href="https://www.google.com/chrome/">Google Chrome</a> using
+          <a href="https://firebase.google.com/">Firebase</a>,
+          <a href="https://material-ui.com/">Material-UI</a>,
+          <a href="https://reactjs.org/">React JS </a>&
+          <a href="https://nodejs.org/en/">Node.js</a>.</span
+        >
+      </div>
+      <div>
+        <span class="full">
+          <a>
+            <mark>Get Chrome Extension</mark>
+          </a>
+        </span>
+        <span>
+          Help keep Watch Party free -
+          <a>
+            <mark>Support Watch Party</mark>
+          </a>
+        </span>
+      </div>
+    </footer>
+  </body>
+</html>

website/font.css

@@ -0,0 +1,31 @@
+@font-face {
+  font-family: 'PixelSplitter';
+  src: url('pixelsplitter-bold-webfont.woff2') format('woff2'),
+    url('pixelsplitter-bold-webfont.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'GlacialBold';
+  src: url('glacialindifference-bold-webfont.woff2') format('woff2'),
+    url('glacialindifference-bold-webfont.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'GlacialItalic';
+  src: url('glacialindifference-italic-webfont.woff2') format('woff2'),
+    url('glacialindifference-italic-webfont.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Glacial';
+  src: url('glacialindifference-regular-webfont.woff2') format('woff2'),
+    url('glacialindifference-regular-webfont.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+* {
+  font-family: 'PixelSplitter', sans-serif;
+}

website/index.html

@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="apple-touch-icon" sizes="57x57" href="apple-icon-57x57.png" />
+    <link rel="apple-touch-icon" sizes="60x60" href="apple-icon-60x60.png" />
+    <link rel="apple-touch-icon" sizes="72x72" href="apple-icon-72x72.png" />
+    <link rel="apple-touch-icon" sizes="76x76" href="apple-icon-76x76.png" />
+    <link rel="apple-touch-icon" sizes="114x114" href="apple-icon-114x114.png" />
+    <link rel="apple-touch-icon" sizes="120x120" href="apple-icon-120x120.png" />
+    <link rel="apple-touch-icon" sizes="144x144" href="apple-icon-144x144.png" />
+    <link rel="apple-touch-icon" sizes="152x152" href="apple-icon-152x152.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="apple-icon-180x180.png" />
+    <link rel="icon" type="image/png" sizes="192x192" href="android-icon-192x192.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
+    <link rel="manifest" href="manifest.json" />
+    <meta name="msapplication-TileImage" content="ms-icon-144x144.png" />
+    <link rel="stylesheet" type="text/css" href="font.css" />
+    <link rel="stylesheet" type="text/css" href="style.css" />
+    <title>Watch Party</title>
+  </head>
+  <body>
+    <script>
+      window.onload = function () {
+        let originalTitlePosition = null;
+        window.addEventListener('scroll', function (ev) {
+          const title = document.getElementsByClassName('title')[0];
+          const support = document.getElementsByClassName('support')[0];
+
+          if (originalTitlePosition === null) originalTitlePosition = title.offsetTop;
+          if (window.scrollY > originalTitlePosition) {
+            support.classList.add('stickied');
+            title.classList.add('stickied');
+          } else {
+            support.classList.remove('stickied');
+            title.classList.remove('stickied');
+          }
+        });
+      };
+    </script>
+    <section>
+      <div class="page">
+        <a class="cta-container" href="https://chrome.google.com/webstore/category/extensions">
+          <mark class="cta">
+            Get Chrome Extension. It's Free.
+          </mark>
+        </a>
+        <a href="https://chrome.google.com/webstore/category/extensions" class="title">
+          <span>
+            WATCH PARTY
+          </span>
+        </a>
+        <a
+          class="cta-container support"
+          href="https://chrome.google.com/webstore/category/extensions"
+        >
+          <mark class="cta">
+            Support Watch Party
+          </mark>
+        </a>
+      </div>
+    </section>
+    <section data-page="2">
+      <div class="page">
+        <img src="./intro.gif" alt="Watch Party Intro" />
+        <p>Watch your favorites on Netflix, Hulu & Amazon Prime with your favorite people</p>
+        <mark>Disney+ coming next, and more soon</mark>
+      </div>
+    </section>
+    <section data-page="3">
+      <div class="page">
+        <div class="row">
+          <div class="col image">
+            <img src="./placeholder.jpg" alt="No time sync" />
+          </div>
+          <div class="col text">
+            Hide the chat - focus on the show, while staying synced. Built to not be in your way
+            but, also be there when you need it.
+          </div>
+        </div>
+        <div class="row">
+          <div class="col text left">
+            No signup or login required. Just ready to go.
+          </div>
+          <div class="col image">
+            <img src="./placeholder.jpg" alt="No time sync" />
+          </div>
+          <div class="col text right">
+            No signup or login required. Just ready to go.
+          </div>
+        </div>
+        <div class="row">
+          <div class="col image">
+            <img src="./placeholder.jpg" alt="No time sync" />
+          </div>
+          <div class="col text">
+            Start the party before the show, or after the show. Just do what you want.
+          </div>
+        </div>
+        <div class="row">
+          <div class="col text left">
+            What happens in Watch Party, stays in Watch Party. For 24 hours, then it's gone.
+          </div>
+          <div class="col image">
+            <img src="./placeholder.jpg" alt="No time sync" />
+          </div>
+          <div class="col text right">
+            No signup or login required. Just ready to go.
+          </div>
+        </div>
+        <div class="row">
+          <div class="col image">
+            <img src="./placeholder.jpg" alt="No time sync" />
+          </div>
+          <div class="col text">
+            Watch Party can't sync the video time - this is prevented by the streaming services for
+            anti-piracy. Watch Party will let you know when people pause and play though.
+          </div>
+        </div>
+      </div>
+    </section>
+    <footer>
+      <div>
+        <span class="full">© Ayushya Amitabh, 2020</span>
+        <span
+          >Built with ❤️ for <a href="https://www.google.com/chrome/">Google Chrome</a> using
+          <a href="https://firebase.google.com/">Firebase</a>,
+          <a href="https://material-ui.com/">Material-UI</a>,
+          <a href="https://reactjs.org/">React JS </a>&
+          <a href="https://nodejs.org/en/">Node.js</a>.</span
+        >
+      </div>
+      <div>
+        <span class="full">
+          <a>
+            <mark>Get Chrome Extension</mark>
+          </a>
+        </span>
+        <span>
+          Help keep Watch Party free -
+          <a>
+            <mark>Support Watch Party</mark>
+          </a>
+        </span>
+      </div>
+    </footer>
+  </body>
+</html>

website/manifest.json

@@ -0,0 +1,46 @@
+{
+  "name": "Watch Party",
+  "short_name": "WP",
+  "display": "browser",
+  "start_url": ".",
+  "theme_color": "#c0f300",
+  "background_color": "black",
+  "icons": [
+    {
+      "src": "/android-icon-36x36.png",
+      "sizes": "36x36",
+      "type": "image/png",
+      "density": "0.75"
+    },
+    {
+      "src": "/android-icon-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png",
+      "density": "1.0"
+    },
+    {
+      "src": "/android-icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "density": "1.5"
+    },
+    {
+      "src": "/android-icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "density": "2.0"
+    },
+    {
+      "src": "/android-icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "density": "3.0"
+    },
+    {
+      "src": "/android-icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "density": "4.0"
+    }
+  ]
+}

website/style.css

@@ -0,0 +1,246 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+body {
+  height: 100vh;
+  background-color: black;
+}
+a {
+  text-decoration: none;
+  cursor: pointer;
+}
+section {
+  height: 100%;
+  background-image: url('./static.gif');
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+section > .page {
+  height: 100%;
+  background: linear-gradient(
+    0deg,
+    rgba(50, 50, 50, 0.8) 0%,
+    rgba(75, 75, 75, 0.5) 25%,
+    rgba(150, 150, 150, 0.2) 100%
+  );
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.cta {
+  font-family: 'GlacialBold';
+  background-color: black;
+  color: #c0f300;
+  padding: 0.5rem 1rem;
+  letter-spacing: 0.2rem;
+  transition: all ease-in-out 0.3s;
+}
+.title {
+  text-align: center;
+  color: #c0f300;
+  font-size: 5rem;
+  padding: 1rem 5rem;
+  border: 5px solid black;
+  border-radius: 5rem;
+  margin: 2rem 0;
+  transition: all ease-in-out 0.3s;
+  cursor: pointer;
+}
+.title > span {
+  filter: drop-shadow(-10px 10px 0px black);
+}
+.title:hover {
+  background-color: black;
+}
+section[data-page='2'] .page {
+  background: linear-gradient(
+    0deg,
+    rgba(0, 0, 0, 1) 0%,
+    rgba(43, 43, 43, 1) 65%,
+    rgba(50, 50, 50, 0.8) 100%
+  );
+}
+section[data-page='2'] .page img {
+  width: 95%;
+  margin: 0 auto;
+  height: auto;
+  border-radius: 2rem;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
+  margin-bottom: 2rem;
+}
+section[data-page='2'] .page p {
+  font-family: 'Glacial';
+  font-size: 2.5rem;
+  word-break: keep-all;
+  word-wrap: break-word;
+  max-width: 95%;
+  text-align: center;
+  margin-bottom: 2rem;
+  color: white;
+  padding: 2px 0;
+}
+section[data-page='2'] .page mark {
+  font-family: 'GlacialBold';
+  padding: 2.5px 10px;
+  font-size: 2rem;
+  background-color: black;
+  color: #c0f300;
+}
+section[data-page='3'] {
+  height: fit-content;
+}
+section[data-page='3'] .page {
+  background: black;
+  display: block;
+}
+section[data-page='3'] .page * {
+  color: #c0f300;
+  font-family: 'Glacial';
+}
+
+.row {
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  border-bottom: 1px solid white;
+  margin-bottom: 0;
+  width: 65%;
+}
+.row:last-child {
+  border-bottom: none;
+}
+.col.text {
+  padding: 2rem 0;
+  text-align: left;
+  color: #909090 !important;
+  flex: 1;
+  font-size: 1.7rem;
+}
+.col.image {
+  padding: 0;
+  justify-self: center;
+  display: flex;
+  justify-content: center;
+}
+.col img {
+  width: 100%;
+  height: auto;
+  margin: 2rem 0;
+  position: relative;
+  border-radius: 1.5rem;
+}
+.col.text.left {
+  display: none;
+}
+footer {
+  padding: 2.5rem 4rem;
+}
+footer,
+footer * {
+  color: white;
+  font-family: 'Glacial';
+}
+footer > div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 15px;
+}
+footer > div > span.full {
+  flex: 1;
+}
+footer mark {
+  background-color: #c0f300;
+  color: black;
+  padding: 2.5px 7px;
+}
+.suport {
+  transition: all ease-in-out 0.3s;
+}
+
+@media screen and (min-device-width: 1360px) {
+  .cta {
+    font-size: 1rem;
+  }
+  .support.stickied .cta {
+    letter-spacing: 0rem;
+  }
+  .support.stickied {
+    position: fixed;
+    top: 2rem;
+    right: 2rem;
+  }
+  .title.stickied {
+    position: fixed;
+    top: 1rem;
+    left: 1rem;
+    margin: 0;
+    font-size: 1rem;
+    padding: 0.5rem 1.5rem;
+    background: black;
+  }
+  section[data-page='2'] .page img {
+    width: 55%;
+  }
+  section[data-page='2'] .page p {
+    max-width: 55%;
+    font-size: 1.5rem;
+  }
+  section[data-page='2'] .page mark {
+    font-size: 1rem;
+  }
+  section[data-page='3'] .page {
+    padding-top: 15rem;
+  }
+  .row {
+    margin: 0 auto;
+    display: flex;
+    flex-direction: row;
+    width: 65%;
+    margin-bottom: 5rem;
+    border-bottom: none;
+  }
+  .col.text {
+    color: #909090 !important;
+    flex: 1;
+    padding-left: 5rem;
+    font-size: 1.7rem;
+  }
+  .col.text.right {
+    display: none;
+  }
+  .col.text.left {
+    display: block;
+    text-align: right;
+    padding-left: 0;
+    padding-right: 5rem;
+  }
+  .col img {
+    width: auto;
+    height: 20rem;
+    position: relative;
+    border-radius: 1.5rem;
+  }
+  .col.image {
+    padding: 0;
+    justify-self: center;
+    display: flex;
+    justify-content: center;
+  }
+}
+@media screen and (max-device-width: 1360px) {
+  section[data-page='2'] .page img {
+    width: 75%;
+  }
+  section[data-page='2'] .page p {
+    font-size: 1.25rem;
+  }
+  section[data-page='2'] .page mark {
+    font-size: 1rem;
+  }
+  .col.text {
+    font-size: 1.25rem;
+  }
+}