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="http://get.chromewatchparty.com">
          <mark class="cta">
            Get Chrome Extension. It's Free.
          </mark>
        </a>
        <a href="http://get.chromewatchparty.com" class="title">
          <span>
            WATCH PARTY
          </span>
        </a>
        <a class="cta-container" href="./beta.html#request">
          <mark class="cta">
            Request Beta Access
          </mark>
        </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, Disney+, Amazon Prime, & Hulu (Beta) with your favorite
          people
        </p>
        <mark>More Coming Soon.</mark>
      </div>
    </section>
    <section data-page="3">
      <div class="page">
        <div class="row">
          <div class="col image">
            <img src="./hideable.gif" 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="./noauth.gif" 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="./beforeorafter.gif" 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="./timed.gif" 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="./track.jpeg" alt="No time sync" />
          </div>
          <div class="col text">
            Know when your friends pause and play
          </div>
        </div>

        <div class="row">
          <div class="col text left">
            When words aren't enough, <br />
            use a GIF from Giphy
          </div>
          <div class="col image">
            <img src="./giphy.gif" alt="No time sync" />
          </div>
          <div class="col text right">
            When words aren't enough use a GIF from Giphy
          </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>& <a href="https://giphy.com/"> Giphy</a>.
        </span>
      </div>
      <div>
        <span class="full">
          <a href="http://get.chromewatchparty.com">
            <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>