watchparty/website/index.html

<!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/detail/aelhknjjifbfkdclbekleabcokipdicf/publish-accepted-testers?authuser=0&hl=en"
        >
          <mark class="cta">
            Get Chrome Extension. It's Free.
          </mark>
        </a>
        <a
          href="https://chrome.google.com/webstore/detail/aelhknjjifbfkdclbekleabcokipdicf/publish-accepted-testers?authuser=0&hl=en"
          class="title"
        >
          <span>
            WATCH PARTY
          </span>
        </a>
        <a class="cta-container support" href="https://www.paypal.me/Ayushya">
          <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+ And More Coming 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, <br />
            while staying synced. <br />
            Built to not be in your way but, <br />
            also be there when you need it.
          </div>
        </div>
        <div class="row">
          <div class="col text left">
            No signup or login required.<br />
            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, <br />
            or after the show. <br />
            Just do what you want.
          </div>
        </div>
        <div class="row">
          <div class="col text left">
            What happens in Watch Party, <br />
            stays in Watch Party -<br />
            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">
            What happens in Watch Party, stays in Watch Party - for 24 hours - then it's gone.
          </div>
        </div>
        <div class="row">
          <div class="col image">
            <img src="./placeholder.jpg" alt="No time sync" />
          </div>
          <div class="col text">
            Know when your friends pause and play
          </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
            href="https://chrome.google.com/webstore/detail/aelhknjjifbfkdclbekleabcokipdicf/publish-accepted-testers?authuser=0&hl=en"
          >
            <mark>Get Chrome Extension</mark>
          </a>
        </span>
        <span>
          Help keep Watch Party free -
          <a href="https://www.paypal.me/Ayushya">
            <mark>Support Watch Party</mark>
          </a>
        </span>
      </div>
    </footer>
  </body>
</html>