v1.7.6/referrer functionality

website/referrer/index.html

@@ -108,11 +108,78 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
   </head>
   <body>
     <div class="heading bubble empty right">
-      <h1 class="title" data-font="sans-bold">WATCH PARTY</h1>
+      <a href="/" class="title underlink" data-font="sans-bold">WATCH PARTY</a>
       <h4 class="sub-title" data-font="sans">
         WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE
       </h4>
+      <div style="margin-top: 5rem" class="text-section">
+        <div id="refer-alert" data-active="true" class="info alert" data-if="success">
+          <div class="info-text">
+            <div>
+              <h1 class="sub-title" data-font="sans-bold">↗ REDIRECTING</h1>
+              <p class="body" data-font="sans">
+                You should be redirected in a few seconds, or checkout the links below.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
+    <script>
+      function checkBrowser() {
+        let userAgentString = navigator.userAgent;
+        let chromeAgent = userAgentString.indexOf('Chrome') > -1;
+        let firefoxAgent = userAgentString.indexOf('Firefox') > -1;
+        return {
+          chrome: chromeAgent,
+          firefox: firefoxAgent,
+        };
+      }
+      const params = new URLSearchParams(window.location.search);
+      if (params.has('type')) {
+        const type = params.get('type');
+        if (type === 'link') {
+          if (params.has('link')) {
+            const linkNode = document.createElement('a');
+            linkNode.classList.add('underlink');
+            linkNode.setAttribute('href', params.get('link'));
+            linkNode.setAttribute('data-font', 'sans-bold');
+            linkNode.innerText = 'GO TO LINK';
+            document.querySelector('#refer-alert .info-text div').appendChild(linkNode);
+            linkNode.click();
+          }
+        } else if (type === 'update') {
+          const whichBrowser = checkBrowser();
+          const linkNode = document.createElement('a');
+          linkNode.classList.add('underlink');
+          linkNode.setAttribute('data-font', 'sans-bold');
+          linkNode.innerText = 'GET UPDATE';
+          if (whichBrowser.chrome) {
+            linkNode.setAttribute('href', 'https://get.chromewatchparty.com');
+          } else if (whichBrowser.firefox) {
+            linkNode.setAttribute('href', 'https://get.firefoxwatchparty.com');
+          }
+          document.querySelector('#refer-alert .info-text div').appendChild(linkNode);
+          linkNode.click();
+        } else if (type === 'review') {
+          const whichBrowser = checkBrowser();
+          const linkNode = document.createElement('a');
+          linkNode.classList.add('underlink');
+          linkNode.setAttribute('data-font', 'sans-bold');
+          linkNode.innerText = 'GET UPDATE';
+          if (whichBrowser.chrome) {
+            linkNode.setAttribute(
+              'href',
+              'https://chrome.google.com/webstore/detail/aelhknjjifbfkdclbekleabcokipdicf/reviews?utm_source=review_widget'
+            );
+          } else if (whichBrowser.firefox) {
+            linkNode.setAttribute('href', 'https://get.firefoxwatchparty.com');
+          }
+          document.querySelector('#refer-alert .info-text div').appendChild(linkNode);
+          linkNode.click();
+        }
+      }
+    </script>
     <div class="overlap">
       <div class="info">
         <a href="https://get.chromewatchparty.com" target="_blank" class="info-card">

website/styles/extralarge.css

@@ -63,6 +63,11 @@ body {
 
 .info {
   width: 70rem;
-  max-width: 70rem;
+  max-width: 70rem !important;
   display: inline-table;
 }
+
+.info.alert {
+  width: 130rem;
+  max-width: 130rem !important;
+}

website/styles/extrasmall.css

@@ -196,6 +196,7 @@ a.big-button::after {
 
 .info.alert[data-active='true'] {
   display: block;
+  width: auto;
 }
 
 .info .info-card {
@@ -213,13 +214,11 @@ a.big-button::after {
 .info .info-card img {
   max-height: 50%;
   height: auto;
-  transition: all ease-in-out 0.1s;
+  transition: all ease-in-out 0.3s;
 }
 
 .info .info-card:hover img {
-  opacity: 0.5;
-  filter: drop-shadow(0px 0px 20px var(--color-tertiary));
-  transform: scale(1.3);
+  transform: scale(1.05);
 }
 
 .info a.info-card::after {

website/styles/large.css

@@ -29,7 +29,7 @@ body {
 }
 
 .info:not(:last-of-type) {
-  margin-right: 6rem;
+  margin-right: 3rem;
 }
 
 .link-section {

website/styles/medium.css

@@ -56,6 +56,15 @@ input {
   display: inline-block;
   max-width: calc(50% - 3rem);
   width: calc(50% - 3rem);
+  margin-right: 3rem;
+}
+
+.info.alert {
+  padding-top: 2.5rem !important;
+}
+
+.info:last-of-type {
+  margin-right: 0;
 }
 
 .heading + .overlap .info:first-of-type {