From cbe7bc3e6f0f60d269ed6e69eef5bd6782d01749 Mon Sep 17 00:00:00 2001
From: Ayushya Amitabh <ayushyamitabh@gmail.com>
Date: Thu, 6 Aug 2020 16:28:07 -0400
Subject: [PATCH] v1.6.0/header fix and website optimization

---
 website/beta/index.html           |  10 ++
 website/changes/index.html        |  11 +++
 website/changes/v1.5.2/index.html |  11 +++
 website/changes/v1.6.0/index.html |  11 +++
 website/copyright/index.html      |  11 +++
 website/font.css                  |   3 +
 website/index.html                | 152 +++++++++++++++++++++++++++++-
 website/scripts/Stickied.js       |  16 +++-
 website/styles/extrasmall.css     |  16 ++++
 website/styles/large.css          |   4 +
 website/styles/medium.css         |   5 +-
 website/welcome/index.html        |  11 +++
 12 files changed, 252 insertions(+), 9 deletions(-)

diff --git a/website/beta/index.html b/website/beta/index.html
index 42ff383..cba0b8f 100644
--- a/website/beta/index.html
+++ b/website/beta/index.html
@@ -15,6 +15,16 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
     <meta http-equiv="refresh" content="0; URL='https://request.chromewatchparty.com'" />
     <title>Watch Party | Beta</title>
   </head>
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-87498806-2">
+  </script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', 'UA-87498806-2');
+  </script>
   <body>
     Redirecting...
   </body>
diff --git a/website/changes/index.html b/website/changes/index.html
index 24c522f..0ebd60a 100644
--- a/website/changes/index.html
+++ b/website/changes/index.html
@@ -33,11 +33,22 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
     <script src="../scripts/Stickied.js"></script>
     <title>Watch Party | Changelog</title>
   </head>
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-87498806-2">
+  </script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', 'UA-87498806-2');
+  </script>
   <body class="copyright">
     <div class="landing">
       <div class="logo-circle"></div>
       <div class="logo-circle"></div>
       <div class="logo-circle"></div>
+      <h1 data-font="serif" class="logo duplicate"><a href="../">WATCH PARTY</a> | CHANGELOG</h1>
       <h1 data-font="serif" class="logo"><a href="../">WATCH PARTY</a> | CHANGELOG</h1>
       <h5 data-font="sans" class="logo-tag">
         WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE
diff --git a/website/changes/v1.5.2/index.html b/website/changes/v1.5.2/index.html
index 380649f..0cd8f0b 100644
--- a/website/changes/v1.5.2/index.html
+++ b/website/changes/v1.5.2/index.html
@@ -33,11 +33,22 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
     <script src="../../scripts/Stickied.js"></script>
     <title>Watch Party | V1.5.2</title>
   </head>
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-87498806-2">
+  </script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', 'UA-87498806-2');
+  </script>
   <body class="copyright welcome">
     <div class="landing">
       <div class="logo-circle"></div>
       <div class="logo-circle"></div>
       <div class="logo-circle"></div>
+      <h1 data-font="serif" class="logo duplicate"><a href="../../">WATCH PARTY</a> | V1.5.2</h1>
       <h1 data-font="serif" class="logo"><a href="../../">WATCH PARTY</a> | V1.5.2</h1>
       <h5 data-font="sans" class="logo-tag">
         WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE
diff --git a/website/changes/v1.6.0/index.html b/website/changes/v1.6.0/index.html
index b0b095c..be34ab4 100644
--- a/website/changes/v1.6.0/index.html
+++ b/website/changes/v1.6.0/index.html
@@ -33,11 +33,22 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
     <script src="../../scripts/Stickied.js"></script>
     <title>Watch Party | V1.6.0</title>
   </head>
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-87498806-2">
+  </script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', 'UA-87498806-2');
+  </script>
   <body class="copyright welcome">
     <div class="landing">
       <div class="logo-circle"></div>
       <div class="logo-circle"></div>
       <div class="logo-circle"></div>
+      <h1 data-font="serif" class="logo duplicate"><a href="../../">WATCH PARTY</a> | V1.6.0</h1>
       <h1 data-font="serif" class="logo"><a href="../../">WATCH PARTY</a> | V1.6.0</h1>
       <h5 data-font="sans" class="logo-tag">
         WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE
diff --git a/website/copyright/index.html b/website/copyright/index.html
index 6af95b1..f9d93ec 100644
--- a/website/copyright/index.html
+++ b/website/copyright/index.html
@@ -33,11 +33,22 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
     <script src="../scripts/Stickied.js"></script>
     <title>Watch Party | Copyright</title>
   </head>
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-87498806-2">
+  </script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', 'UA-87498806-2');
+  </script>
   <body class="copyright">
     <div class="landing">
       <div class="logo-circle"></div>
       <div class="logo-circle"></div>
       <div class="logo-circle"></div>
+      <h1 data-font="serif" class="logo duplicate"><a href="../">WATCH PARTY</a> | COPYRIGHT</h1>
       <h1 data-font="serif" class="logo"><a href="../">WATCH PARTY</a> | COPYRIGHT</h1>
       <h5 data-font="sans" class="logo-tag">
         Copyright &COPY; 2020 Ayushya Amitabh. All Rights Reserved.
diff --git a/website/font.css b/website/font.css
index 1d61f6a..fac8b31 100644
--- a/website/font.css
+++ b/website/font.css
@@ -40,10 +40,13 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
 }
 [data-font='serif'] {
   font-family: 'PixelSplitter', sans-serif;
+  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;
 }
diff --git a/website/index.html b/website/index.html
index dcdb4da..b7b75df 100644
--- a/website/index.html
+++ b/website/index.html
@@ -33,11 +33,22 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
     <script src="./scripts/Stickied.js"></script>
     <title>Watch Party</title>
   </head>
-  <body>
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-87498806-2">
+  </script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', 'UA-87498806-2');
+  </script>
+  <body class="home">
     <div class="landing">
       <div class="logo-circle"></div>
       <div class="logo-circle"></div>
       <div class="logo-circle"></div>
+      <h1 data-font="serif" class="logo duplicate">WATCH PARTY</h1>
       <h1 data-font="serif" class="logo">WATCH PARTY</h1>
       <h5 data-font="sans" class="logo-tag">
         WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE
@@ -55,9 +66,12 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
         <div data-beta-support class="supported-logo" id="googleplay"></div>
         <div data-beta-support class="supported-logo" id="crunchyroll"></div>
       </div>
-      <a data-font="sans-bold" href="https://request.chromewatchparty.com" class="link-button"
-        >Get Chrome Extension</a
-      >
+      <a data-font="sans-bold" href="https://request.chromewatchparty.com" class="link-button duplicate">
+        Get Chrome Extension
+      </a>
+      <a data-font="sans-bold" href="https://request.chromewatchparty.com" class="link-button">
+        Get Chrome Extension
+      </a>
     </div>
     <div class="features">
       <p data-font="sans-bold" class="title subtitle">FEATURES</p>
@@ -104,6 +118,136 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
         </p>
       </div>
     </div>
+    <div id="getting-started" class="pop-features">
+      <p data-font="sans-bold" class="title subtitle">
+        GETTING STARTED
+      </p>
+      <div class="pop-feature alternate">
+        <div id="title-card-container">
+          <div id="title-card">
+            <div data-font="serif" id="fab">WP</div>
+            <div id="sidebar"></div>
+          </div>
+        </div>
+        <div class="explanation">
+          <div>
+            <h4 data-font="sans-bold">TO BE OR NOT TO BE</h4>
+            <p data-font="sans">Watch Party is built to not be in your way. There when you need it, gone when you don't. The sidebar is now resizeable, and now supports having access to Watch Party in fullscreen. (Use the fullscreen button in the sidebar)</p>  
+          </div>
+        </div>
+      </div>
+
+      <div class="pop-feature">
+        <div id="title-card-container">
+          <div id="title-card">
+            <h5 data-font="sans-bold" id="title-card-title">WATCH PARTY</h5>
+            <h3 data-font="sans" id="title-card-subtitle">YOUR PARTY NAME</h3>
+            <p data-font="sans" id="control-notification">
+              Allow chat notification when side panel is closed
+              <span>Notifications show up when the side bar is hidden</span>
+            </p>
+            <p data-font="sans" id="control-autorejoin">
+              Allow Watch Party to auto rejoin
+              <span>Automatically rejoin party if you return to the page within 1 minute</span>
+            </p>
+            <p data-font="sans" id="control-admin">
+              Enable admin only mode
+              <span>Only party admin can sync player and start calls</span>
+            </p>
+          </div>
+        </div>
+        <div class="explanation">
+          <div>
+            <h4 data-font="sans-bold">Stay in control</h4>
+            <p data-font="sans">Find your settings by clicking on title card (when you're in a party) or in the settings panel (when you're creating or joining) </p>  
+          </div>
+        </div>
+      </div>
+
+      <div class="pop-feature alternate">
+        <div id="title-card-container">
+          <div id="title-card">
+            <h5 data-font="sans-bold" id="system-message">Ayushya started the party.</h5>
+
+            <div id="ti">
+              <div id="tn">SOMEONE</div>
+              <div id="tm">
+                <div id="tt">
+                  <span>12:00:00 PM</span>
+                  <div id="ri"></div></div>
+                <p>Hiya buddy!</p>
+              </div>
+            </div>
+            <div id="ti" class="mm">
+              <div id="tn">AYUSHYA</div>
+              <div id="tr">Hiya buddy!
+              </div>
+              <div id="tm">
+                <div id="tt">
+                  <span>12:00:00 PM</span>
+                  <div id="ri"></div></div>
+                <p>OH GOD NO! PLEASE GOD NO! NO!</p>
+              </div>
+            </div>
+            <div id="ti">
+              <div id="tn">SOMEONE</div>
+              <div id="tm">
+                <div id="tt">
+                  <span>12:00:00 PM</span>
+                  <div id="ri"></div>
+                </div>
+                <img src="https://media.giphy.com/media/d10dMmzqCYqQ0/giphy.gif" />
+              </div>
+            </div>
+            <div id="ti" class="mm">
+              <div id="tn">SOMEONE</div>
+              <div id="tr">
+                <img src="https://media.giphy.com/media/d10dMmzqCYqQ0/giphy.gif" /></div>
+              <div id="tm">
+                <div id="tt">
+                  <span>12:00:00 PM</span>
+                  <div id="ri"></div>
+                </div>
+                <p>Let's watch The Office</p>
+              </div>
+            </div>
+
+          </div>
+        </div>
+        <div class="explanation">
+          <div>
+            <h4 data-font="sans-bold">FULL FEATURED CHAT</h4>
+            <p data-font="sans">A brand new, completely revamped chat user interface, now has replies, shows pending messages, and improves the Giphy GIF picker</p>  
+          </div>
+        </div>
+      </div>
+
+      <div class="pop-feature">
+
+        <div id="title-card-container">
+          <div id="title-card">
+            <h5 data-font="sans-bold" id="title-card-title">WATCH PARTY</h5>
+            <h3 data-font="sans" id="title-card-subtitle">ANIME WATCH PARTY</h3>
+            <h6 data-font="sans" id="title-card-tagline">USERS IN PARTY</h6>
+            <p data-font="sans" id="call-user-chip">Ayushya</p>
+            <p data-font="sans" id="call-user-chip">Someone</p>
+            <p data-font="sans" id="call-user-chip">Third Party</p>
+            <p data-font="sans" id="call-user-chip">Won't Stop Talking</p>
+            <h6 data-font="sans" id="title-card-tagline">USERS ON CALL</h6>
+            <p data-font="sans" id="call-user-chip">Ayushya</p>
+            <p data-font="sans" id="call-user-chip" class="not-me-user-chip">Someone</p>
+            <p data-font="sans" id="call-user-chip" class="not-me-user-chip">Won't Stop Talking <input type="range" value="2" min="0" max="10"></p>
+          </div>
+        </div>
+        <div class="explanation">
+          <div>
+            <h4 data-font="sans-bold">MADE FOR YOU & YOUR GANG</h4>
+            <p data-font="sans">See who's in your party, get on a call with your party, and volume control for the person who just won't stop talking. </p>
+          </div>
+        </div>
+      </div>
+
+    </div>
     <footer data-font="sans">
       <p class="title built-with">
         <a href="./copyright/">COPYRIGHT</a> &copy; 2020 AYUSHYA AMITABH. ALL RIGHTS RESERVED.
diff --git a/website/scripts/Stickied.js b/website/scripts/Stickied.js
index 1f6276d..1aecb34 100644
--- a/website/scripts/Stickied.js
+++ b/website/scripts/Stickied.js
@@ -13,25 +13,33 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
 var LOGO_INIT = 0;
 var GET_INIT = 0;
 function handleSticky() {
-  const logo = document.querySelector('.logo');
-  const get = document.querySelector('.landing .link-button');
-  if (window.scrollY >= LOGO_INIT + logo.offsetHeight * 2) {
+  const logo = document.querySelector('.logo.duplicate');
+  const get = document.querySelector('.landing .link-button.duplicate');
+  if (window.scrollY >= LOGO_INIT + logo.offsetHeight) {
     logo.classList.add('stickied');
   } else {
     logo.classList.remove('stickied');
   }
   if (get) {
-    if (window.scrollY >= GET_INIT + get.offsetHeight * 2) {
+    if (window.scrollY >= GET_INIT + get.offsetHeight) {
       get.classList.add('stickied');
     } else {
       get.classList.remove('stickied');
     }
   }
 }
+function handleLogoMargin () {
+  const logo = document.querySelector('.logo.duplicate');
+  if (logo) document.documentElement.style.setProperty('--logo-offset', '-' + logo.offsetHeight + 'px');
+  const linkButton = document.querySelector('.link-button.duplicate');
+  if (linkButton) document.documentElement.style.setProperty('--link-button-offset', '-' + linkButton.offsetHeight + 'px');
+}
 window.onload = function () {
   LOGO_INIT = document.querySelector('.logo').offsetTop;
   GET_INIT = document.querySelector('.landing .link-button')
     ? document.querySelector('.landing .link-button').offsetTop
     : 0;
+  this.handleLogoMargin();
   window.addEventListener('scroll', this.handleSticky);
+  window.addEventListener('resize', this.handleLogoMargin);
 };
diff --git a/website/styles/extrasmall.css b/website/styles/extrasmall.css
index 3e29987..c7e5bf3 100644
--- a/website/styles/extrasmall.css
+++ b/website/styles/extrasmall.css
@@ -76,6 +76,16 @@ body {
   letter-spacing: 2.2rem;
 }
 
+.logo.duplicate {
+  margin-bottom: var(--logo-offset);
+  opacity: 0;
+}
+
+.link-button.duplicate {
+  margin-bottom: var(--link-button-offset);
+  opacity: 0;
+}
+
 .logo-tag {
   color: var(--primary-text);
   font-size: 3.2rem;
@@ -143,6 +153,7 @@ body {
   margin: 2.5rem 0;
   display: table;
   width: fit-content;
+  transform: scale(2.5) translateY(-30%) translateX(1rem);
   border-radius: 100%;
 }
 
@@ -269,6 +280,10 @@ footer .link-button {
   text-transform: uppercase;
 }
 
+.home .pop-features {
+  margin-bottom: 50px;
+}
+
 .pop-features {
   padding: 35px;
   padding-left: 70px;
@@ -496,6 +511,7 @@ div#sidebar {
   border-top-right-radius: 26px;
   border-bottom-right-radius: 26px;
   animation: rectSize 2s linear 0s infinite alternate !important;
+  box-shadow: -5px 0px 50px var(--primary-medium);
 }
 
 /*
diff --git a/website/styles/large.css b/website/styles/large.css
index 9ef7628..e3e8085 100644
--- a/website/styles/large.css
+++ b/website/styles/large.css
@@ -19,6 +19,10 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
   max-width: 45%;
 }
 
+.home .pop-features {
+  margin-bottom: 100px;
+}
+
 .pop-feature {
   flex-direction: row;
 }
diff --git a/website/styles/medium.css b/website/styles/medium.css
index 82d9f57..7fd3635 100644
--- a/website/styles/medium.css
+++ b/website/styles/medium.css
@@ -66,6 +66,7 @@ body {
   width: 100%;
   left: 0;
   top: 0;
+  opacity: 1;
   padding: 3rem 10rem;
   z-index: 999 !important;
 }
@@ -73,6 +74,7 @@ body {
   position: fixed;
   right: 0rem;
   top: 0;
+  opacity: 1;
   border-radius: 0;
   font-size: 2rem;
   z-index: 1999 !important;
@@ -129,6 +131,7 @@ body {
   background-color: black;
   position: absolute;
   top: 13rem;
+  transform: none;
   left: 13rem;
 }
 .feature-card .feature-text {
@@ -296,4 +299,4 @@ footer .link-button {
 }
 .welcome .landing#tips .tip:last-of-type {
   margin-bottom: 3rem;
-}
+}
\ No newline at end of file
diff --git a/website/welcome/index.html b/website/welcome/index.html
index 551e3a4..f89472e 100644
--- a/website/welcome/index.html
+++ b/website/welcome/index.html
@@ -33,11 +33,22 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
     <script src="../scripts/Stickied.js"></script>
     <title>Watch Party | Welcome</title>
   </head>
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-87498806-2">
+  </script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', 'UA-87498806-2');
+  </script>
   <body class="welcome">
     <div class="landing">
       <div class="logo-circle"></div>
       <div class="logo-circle"></div>
       <div class="logo-circle"></div>
+      <h1 data-font="serif" class="logo duplicate"><a href="../">WATCH PARTY</a></h1>
       <h1 data-font="serif" class="logo"><a href="../">WATCH PARTY</a></h1>
       <h5 data-font="sans" class="logo-tag">
         WELCOME TO WATCH PARTY