v1.7.9/website donation update

website/copyright/index.html

@@ -24,7 +24,12 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" href="/icons/favicon.png" />
     <link rel="manifest" href="/manifest.json" />
-    <link rel="preload" as="font" href="/fonts/glacialindifference-bold-webfont.woff" crossorigin />
+    <link
+      rel="preload"
+      as="font"
+      href="/fonts/glacialindifference-bold-webfont.woff"
+      crossorigin
+    />
     <link
       rel="preload"
       as="font"
@@ -56,49 +61,54 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       crossorigin
     />
     <style>
-      @import '/styles/variables.css';
+      @import "/styles/variables.css";
-      @import '/styles/variables-dark.css' screen and (prefers-color-scheme: dark);
+      @import "/styles/variables-dark.css" screen and
+        (prefers-color-scheme: dark);
 
-      @import '/styles/extrasmall.css';
+      @import "/styles/extrasmall.css";
-      @import '/styles/small.css' only screen and (min-width: 768px) and (max-width: 1024px);
+      @import "/styles/small.css" only screen and (min-width: 768px) and
-      @import '/styles/medium.css' only screen and (min-width: 1024px);
+        (max-width: 1024px);
-      @import '/styles/large.css' only screen and (min-width: 1366px);
+      @import "/styles/medium.css" only screen and (min-width: 1024px);
-      @import '/styles/extralarge.css' only screen and (min-width: 1921px);
+      @import "/styles/large.css" only screen and (min-width: 1366px);
+      @import "/styles/extralarge.css" only screen and (min-width: 1921px);
 
       @font-face {
-        font-family: 'GlacialBold';
+        font-family: "GlacialBold";
-        src: url('/fonts/glacialindifference-bold-webfont.woff2') format('woff2'),
+        src: url("/fonts/glacialindifference-bold-webfont.woff2")
-          url('/fonts/glacialindifference-bold-webfont.woff') format('woff');
+            format("woff2"),
+          url("/fonts/glacialindifference-bold-webfont.woff") format("woff");
         font-weight: normal;
         font-style: normal;
         font-display: swap;
       }
       @font-face {
-        font-family: 'GlacialItalic';
+        font-family: "GlacialItalic";
-        src: url('/fonts/glacialindifference-italic-webfont.woff2') format('woff2'),
+        src: url("/fonts/glacialindifference-italic-webfont.woff2")
-          url('/fonts/glacialindifference-italic-webfont.woff') format('woff');
+            format("woff2"),
+          url("/fonts/glacialindifference-italic-webfont.woff") format("woff");
         font-weight: normal;
         font-style: normal;
         font-display: swap;
       }
       @font-face {
-        font-family: 'Glacial';
+        font-family: "Glacial";
-        src: url('/fonts/glacialindifference-regular-webfont.woff2') format('woff2'),
+        src: url("/fonts/glacialindifference-regular-webfont.woff2")
-          url('/fonts/glacialindifference-regular-webfont.woff') format('woff');
+            format("woff2"),
+          url("/fonts/glacialindifference-regular-webfont.woff") format("woff");
         font-weight: normal;
         font-style: normal;
         font-display: swap;
       }
-      [data-font='sans'] {
+      [data-font="sans"] {
-        font-family: 'Glacial', sans-serif;
+        font-family: "Glacial", sans-serif;
         font-display: swap;
       }
-      [data-font='sans-bold'] {
+      [data-font="sans-bold"] {
-        font-family: 'GlacialBold', sans-serif;
+        font-family: "GlacialBold", sans-serif;
         font-display: swap;
       }
-      [data-font='sans-italic'] {
+      [data-font="sans-italic"] {
-        font-family: 'GlacialItalic', sans-serif;
+        font-family: "GlacialItalic", sans-serif;
         font-style: italic;
         font-display: swap;
       }
@@ -109,9 +119,9 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       function gtag() {
         dataLayer.push(arguments);
       }
-      gtag('js', new Date());
+      gtag("js", new Date());
 
-      gtag('config', 'UA-87498806-2');
+      gtag("config", "UA-87498806-2");
     </script>
   </head>
   <body>
@@ -120,13 +130,25 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       <h4 class="sub-title" data-font="sans">
         WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE
       </h4>
-      <a href="https://get.firefoxwatchparty.com" class="big-button" data-font="sans">
+      <a
+        href="https://get.firefoxwatchparty.com"
+        class="big-button"
+        data-font="sans"
+      >
         GET FIREFOX ADD-ON
       </a>
-      <a href="https://get.edgewatchparty.com" class="big-button" data-font="sans">
+      <a
+        href="https://get.edgewatchparty.com"
+        class="big-button"
+        data-font="sans"
+      >
         GET EDGE ADD-ON
       </a>
-      <a href="https://get.chromewatchparty.com" class="big-button" data-font="sans">
+      <a
+        href="https://get.chromewatchparty.com"
+        class="big-button"
+        data-font="sans"
+      >
         GET CHROME EXTENSION
       </a>
     </div>
@@ -135,77 +157,108 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
         <div class="info-text">
           <div>
             <h4 class="sub-title" data-font="sans-bold">Copyright</h4>
-            <h4 class="sub-title" data-font="sans-bold">2020 Ayushya Amitabh</h4>
+            <h4 class="sub-title" data-font="sans-bold">
-            <h4 class="sub-title" data-font="sans-bold">All Rights Reserved.</h4>
+              2020 Ayushya Amitabh
+            </h4>
+            <h4 class="sub-title" data-font="sans-bold">
+              All Rights Reserved.
+            </h4>
           </div>
           <div>
             <p data-font="sans" class="body">
-              Unauthorized copying of this website and Watch Party's Chrome Extension app, via any
+              Unauthorized copying of this website and Watch Party's Chrome
-              medium is strictly prohibited. Written by Ayushya Amitabh.
+              Extension app, via any medium is strictly prohibited. Written by
+              Ayushya Amitabh.
             </p>
-            <a data-font="sans-bold" class="underlink" href="mailto:admin@chromewatchparty.com">
+            <a
+              data-font="sans-bold"
+              class="underlink"
+              href="mailto:admin@chromewatchparty.com"
+            >
               CONTACT
             </a>
             <p data-font="sans" class="body">
-              All content on this website and in Watch Party's chrome extension app, unless
+              All content on this website and in Watch Party's chrome extension
-              otherwise cited are the sole intellectual property of Ayushya Amitabh, and may not be
+              app, unless otherwise cited are the sole intellectual property of
-              copied, edited, or reproduced without permission.
+              Ayushya Amitabh, and may not be copied, edited, or reproduced
+              without permission.
             </p>
             <p data-font="sans" class="body">
-              Netflix logo is a trademark and intellectual property of Netflix, inc.
+              Netflix logo is a trademark and intellectual property of Netflix,
+              inc.
             </p>
             <p data-font="sans" class="body">
-              Disney+ logo is a trademark and intellectual property of The Walt Disney Company
+              Disney+ logo is a trademark and intellectual property of The Walt
+              Disney Company
             </p>
             <p data-font="sans" class="body">
-              Prime logo is a trademark and intellectual property of Amazon.com, Inc.
+              Prime logo is a trademark and intellectual property of Amazon.com,
+              Inc.
             </p>
             <p data-font="sans" class="body">
-              Youtube logo is a trademark and intellectual property of Google, Inc.
+              Youtube logo is a trademark and intellectual property of Google,
+              Inc.
             </p>
             <p data-font="sans" class="body">
               Hulu logo is a trademark and intellectual property of Hulu, LLC.
             </p>
             <p data-font="sans" class="body">
-              Hbo now and hbo max logos are trademark and intellectual property of WarnerMedia
+              Hbo now and hbo max logos are trademark and intellectual property
-              Direct, LLC.
+              of WarnerMedia Direct, LLC.
             </p>
             <p data-font="sans" class="body">
-              Peacock TV logo is a trademark and intellectual property of Peacock TV & NBC
+              Peacock TV logo is a trademark and intellectual property of
-              Universal.
+              Peacock TV & NBC Universal.
             </p>
             <p data-font="sans" class="body">
-              Google Play Movies & TV logo is a trademark and intellectual property of Google, Inc.
+              Google Play Movies & TV logo is a trademark and intellectual
+              property of Google, Inc.
             </p>
             <p data-font="sans" class="body">
-              Crunchyroll logo is a trademark and intellectual property of Crunchyroll and Ellation,
+              Crunchyroll logo is a trademark and intellectual property of
+              Crunchyroll and Ellation, Inc.
+            </p>
+            <p data-font="sans" class="body">
+              Apple TV + logo is a trademark and intellectual property of Apple,
               Inc.
             </p>
             <p data-font="sans" class="body">
-              Apple TV + logo is a trademark and intellectual property of Apple, Inc.
+              Rakuten Viki logo is a trademark and intellectual property of
+              Rakuten Group
             </p>
             <p data-font="sans" class="body">
-              Rakuten Viki logo is a trademark and intellectual property of Rakuten Group
+              Funimation logo is a trademark and intellectual property of
+              Funimation Global Group, LLC.
             </p>
             <p data-font="sans" class="body">
-              Funimation logo is a trademark and intellectual property of Funimation Global Group,
+              Rooster Teeth logo is a trademark and intellectual property of
-              LLC.
+              Rooster Teeth Productions, LLC.
-            </p>
-            <p data-font="sans" class="body">
-              Rooster Teeth logo is a trademark and intellectual property of Rooster Teeth
-              Productions, LLC.
             </p>
             <p data-font="sans" class="body">
               Stan logo is a trademark and intellectual property of Stan Group.
             </p>
             <p data-font="sans" class="body">
-              Hotstar logo is a trademark and intellectual property of Home Box Office, Inc.
+              Hotstar logo is a trademark and intellectual property of Home Box
+              Office, Inc.
             </p>
             <p data-font="sans" class="body">
-              Google Chrome logo is a trademark and intellectual property of Google, Inc.
+              Airtel XStream logo is a trademark and intellectual property of
+              Wynk Limited.
             </p>
             <p data-font="sans" class="body">
-              Firefox logo is a trademark and intellectual property of Mozilla, Inc.
+              Vimeo logo is a trademark and intellectual property of Vimeo, Inc.
+            </p>
+            <p data-font="sans" class="body">
+              Dailymotion logo is a trademark and intellectual property of
+              Dailymotion.
+            </p>
+            <p data-font="sans" class="body">
+              Google Chrome logo is a trademark and intellectual property of
+              Google, Inc.
+            </p>
+            <p data-font="sans" class="body">
+              Firefox logo is a trademark and intellectual property of Mozilla,
+              Inc.
             </p>
           </div>
         </div>
@@ -225,8 +278,12 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
           >
             Give Feedback
           </a>
-          <a class="underlink" href="/welcome" data-font="sans">Getting Started</a>
+          <a class="underlink" href="/welcome" data-font="sans"
-          <a class="underlink" href="/donate" data-font="sans"> Support Watch Party </a>
+            >Getting Started</a
+          >
+          <a class="underlink" href="/donate" data-font="sans">
+            Support Watch Party
+          </a>
           <a
             class="underlink"
             target="_blank"
@@ -254,22 +311,46 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
         </div>
         <div class="link-list">
           <h6 class="link-list-title" data-font="sans-bold">FOR DEVELOPERS</h6>
-          <a class="underlink" target="_blank" href="https://firebase.google.com" data-font="sans"
+          <a
+            class="underlink"
+            target="_blank"
+            href="https://firebase.google.com"
+            data-font="sans"
             >Firebase</a
           >
-          <a class="underlink" target="_blank" href="https://material-ui.com" data-font="sans"
+          <a
+            class="underlink"
+            target="_blank"
+            href="https://material-ui.com"
+            data-font="sans"
             >Material UI</a
           >
-          <a class="underlink" target="_blank" href="https://dolby.io" data-font="sans"
+          <a
+            class="underlink"
+            target="_blank"
+            href="https://dolby.io"
+            data-font="sans"
             >Dolby Voxeet</a
           >
-          <a class="underlink" target="_blank" href="https://reactjs.org" data-font="sans"
+          <a
+            class="underlink"
+            target="_blank"
+            href="https://reactjs.org"
+            data-font="sans"
             >React JS</a
           >
-          <a class="underlink" target="_blank" href="https://nodejs.org" data-font="sans"
+          <a
+            class="underlink"
+            target="_blank"
+            href="https://nodejs.org"
+            data-font="sans"
             >Node JS</a
           >
-          <a class="underlink" target="_blank" href="http://developers.giphy.com" data-font="sans"
+          <a
+            class="underlink"
+            target="_blank"
+            href="http://developers.giphy.com"
+            data-font="sans"
             >Giphy</a
           >
         </div>
@@ -288,9 +369,14 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       </div>
       <div class="end-line">
         <a class="underlink" data-font="sans">
-          Built with ♥ for Google Chrome, Microsoft Edge & Mozilla Firefox by Ayushya Amitabh
+          Built with ♥ for Google Chrome, Microsoft Edge & Mozilla Firefox by
+          Ayushya Amitabh
         </a>
-        <a class="underlink" target="_blank" href="https://instagram.com/chromewatchparty">
+        <a
+          class="underlink"
+          target="_blank"
+          href="https://instagram.com/chromewatchparty"
+        >
           <svg
             height="4rem"
             viewBox="0 0 511 511.9"
@@ -308,7 +394,11 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
             />
           </svg>
         </a>
-        <a class="underlink" target="_blank" href="https://www.reddit.com/r/ChromeWatchParty/">
+        <a
+          class="underlink"
+          target="_blank"
+          href="https://www.reddit.com/r/ChromeWatchParty/"
+        >
           <svg
             id="Bold"
             enable-background="new 0 0 24 24"
@@ -322,7 +412,11 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
             />
           </svg>
         </a>
-        <a class="underlink" target="_blank" href="mailto:admin@chromewatchparty.com">
+        <a
+          class="underlink"
+          target="_blank"
+          href="mailto:admin@chromewatchparty.com"
+        >
           <svg
             version="1.1"
             id="Capa_1"

website/donate/index.html

@@ -98,7 +98,6 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       }
     </style>
     <title>Watch Party | Donate</title>
-    <script src="https://www.paypal.com/sdk/js?client-id=AS8qXxrxPOe9yb0yyJwQY_fRkRuXB8AFgeSmCLtkU0_ag9OVYTB3VeNjGwtL34KJZ9EdRYwEC89wfYZE&disable-funding=credit"></script>
     <script>
       /*
        * G O O G L E 
@@ -110,72 +109,6 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       }
       gtag('js', new Date());
       gtag('config', 'UA-87498806-2');
-      /*
-       * I N T E R N A L 
-       */
-      function setDonationAmount (v) {
-        document.querySelector('#donate input').value = v;
-        document.querySelector('#donate input').dispatchEvent(new Event('change', { bubbles: true }));
-        document.querySelector('#donate').scrollIntoView({
-            behavior: 'smooth'
-        });
-      }
-      function validateAndUpdate(ev, actions, change = false) {
-        var regex = /^[1-9]\d*(?:\.\d{0,2})?$/;
-        var numVal = Number.parseFloat(ev.target.value);
-        if (change === true) {
-            numVal = numVal.toFixed(2);
-          }
-        if (regex.test(numVal)) {
-          document.querySelector('#paypal-donate').style.opacity= "1";
-        if (change === true) {
-            document.querySelector('#donate input').value = numVal;
-          }
-          actions.enable();
-        } else {
-          document.querySelector('#paypal-donate').style.opacity= "0.4";
-          actions.disable();
-        }
-      }
-      /*
-       * P A Y P A L
-       */
-       paypal
-        .Buttons({
-          style: {
-            color: 'black',
-            shape: 'pill',
-          },
-            onInit: function(data, actions) {
-                document.querySelector('#paypal-donate').style.opacity= "0.4";
-                actions.disable();
-                document.querySelector('#donate input').addEventListener('input', function (ev) {
-                  validateAndUpdate(ev, actions);
-                });
-                document.querySelector('#donate input').addEventListener('change', function (ev) {
-                  validateAndUpdate(ev, actions, true);
-                });
-                document.querySelector('#paypal-donate').parentElement.style.display = "flex";
-            },
-            createOrder: function(data, actions) {
-                return actions.order.create({
-                    purchase_units: [{
-                        amount: {
-                            value: document.querySelector('#donate input').value,
-                        },
-                    }, ],
-                });
-            },
-            onApprove: function(data, actions) {
-                return actions.order.capture().then(function(details) {
-                    document.querySelector('.info.alert').querySelector('h1.sub-title').innerText += details.payer.name.given_name.toUpperCase() + "!";
-                    document.querySelector('.info.alert').querySelector('p.body').innerHTML += `<br /> You donated (${details.purchase_units[0].amount.currency_code}) ${details.purchase_units[0].amount.value}.`;
-                    document.querySelector('.info.alert').querySelector('a.underlink').setAttribute('href', `mailto:admin@chromewatchparty.com?subject=Question About Donation&body=DONATION DETAILS%0D%0A NAME: ${details.payer.name.given_name + " " + details.payer.name.surname}%0D%0A EMAIL: ${details.payer.email_address}%0D%0A DONATION: (${details.purchase_units[0].amount.currency_code}) ${details.purchase_units[0].amount.value}%0D%0A DATE: ${details.create_time}`);
-                    document.querySelector('.info.alert').setAttribute('data-active', true);
-                });
-            },
-        })
-        .render('#paypal-donate');
     </script>
   </head>
   <body>
@@ -211,12 +144,15 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
           </svg>
         </div>
         <div class="info-text">
-          <h4 class="sub-title" data-font="sans-bold">DONATE</h4>
+          <form class="paypal body" action="https://www.paypal.com/donate" method="post" target="_top">
+            <input type="hidden" name="hosted_button_id" value="N9EL2V9ZSCTWC" />
+            <input type="image" src="/media/costs/donate.webp" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" />
+            <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
+          </form>
           <p class="body" data-font="sans">
-            Help keep Watch Party alive and free. Please consider donating to help me support the
+            Help keep Watch Party alive and free. Click above to donate, or click below to learn more.
-            necessary servers, development, and other costs.
           </p>
-          <a href="#donate" class="underlink" data-font="sans-bold"> DONATE NOW </a>
+          <a href="#costs" class="underlink" data-font="sans-bold"> SEE WHAT IT COSTS TO RUN WATCH PARTY </a>
         </div>
       </div>
     </div>
@@ -234,7 +170,7 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
         </div>
       </div>
     </div>   
-    <div class="donate overlap features card-grid">
+    <div id="costs" class="donate overlap features card-grid">
       <div class="support-card">
         <h4 data-font="sans-bold" class="sub-title">COFFEE</h4>
         <div class="img-wrapper"> 
@@ -243,7 +179,6 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
         <p data-font="sans" class="body">
           Get me a cup of coffee for $2.00, helps me crank out the updates
         </p>
-        <button onclick="setDonationAmount(2.00); return false;" data-font="sans-bold" class="big-button">DONATE $2.00</button>
       </div>
       <div class="support-card">
         <h4 data-font="sans-bold" class="sub-title">1 SERVER</h4>
@@ -253,17 +188,6 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
         <p data-font="sans" class="body">
           The cost of a single server for 1 month costs about $3.00
         </p>
-        <button onclick="setDonationAmount(3.00); return false;" data-font="sans-bold" class="big-button">DONATE $3.00</button>
-      </div>
-      <div class="support-card">
-        <h4 data-font="sans-bold" class="sub-title">GROUP CALLS</h4>
-        <div class="img-wrapper"> 
-          <img src="/media/costs/dolby.webp"></img>
-        </div>
-        <p data-font="sans" class="body">
-          The total costs of managing video and voice call APIs is about $10.00
-        </p>
-        <button onclick="setDonationAmount(10.00); return false;" data-font="sans-bold" class="big-button">DONATE $10.00</button>
       </div>
       <div class="support-card">
         <h4 data-font="sans-bold" class="sub-title">SUBSCRIPTIONS</h4>
@@ -273,7 +197,6 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
         <p data-font="sans" class="body">
           Cost of subscriptions to add support for new streaming services $15.00
         </p>
-        <button onclick="setDonationAmount(15.00); return false;" data-font="sans-bold" class="big-button">DONATE $15.00</button>
       </div>
       <div class="support-card">
         <h4 data-font="sans-bold" class="sub-title">ALL SERVERS</h4>
@@ -283,43 +206,15 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
         <p data-font="sans" class="body">
           The total costs of all servers for 1 month is about $27.00
         </p>
-        <button onclick="setDonationAmount(7.00); return false;" data-font="sans-bold" class="big-button">DONATE $27.00</button>
       </div>
+      <div class="support-card">
+        <h4 data-font="sans-bold" class="sub-title">GROUP CALLS</h4>
+        <div class="img-wrapper"> 
+          <img src="/media/costs/dolby.webp"></img>
         </div>
-    <div id="donate" class="text-section">
+        <p data-font="sans" class="body">
-      <div class="info">
+          The total costs of managing video and voice call APIs is about $400.00
-        <div class="info-text">
+        </p>
-            <h1 class="title" data-font="sans-bold">DONATE</h1>
-        </div>
-      </div>
-      <div class="info alert" data-if="success">
-        <div class="info-text">
-          <div>
-            <h1 class="sub-title" data-font="sans-bold">🎉 THANK YOU FOR YOUR DONATION, </h1>
-            <p class="body" data-font="sans">You helped keep Watch Party alive and free for everyone.</p>
-            <a target="_blank" class="underlink" href="mailto:admin@chromewatchparty.com?subject=Question About Donation" data-font="sans-bold">QUESTION ABOUT DONATION</a>
-          </div>
-        </div>
-      </div>
-      <div class="info">
-        <div class="info-text">
-          <div>
-            <h4 class="sub-title" data-font="sans-bold">AMOUNT <code>$(US)</code></h4>
-            <input step="0.5" type="number" data-font="sans-bold" value="0.00" min="1.00" required />
-            <a style="display: block;" data-font="sans-bold" class="underlink">MINIMUM DONATION OF $1.00</a>
-          </div>
-          <div style="display: none; flex-direction: column;" class="description">
-            <div id="paypal-donate"></div>
-            <a data-font="sans-bold" class="underlink">
-              WATCH PARTY DOES NOT HANDLE ANY OF YOUR BILLING INFORMATION
-            </a>
-          </div>
-        </div>
-      </div>
-      <div class="info">
-        <div class="info-text">
-          <a href="https://paypal.me/ChromeWatchParty" target="_blank" style="display: block;" data-font="sans-bold" class="underlink">DONATE DIRECTLY ON PAYPAL</a>
-        </div>
       </div>
     </div>
     <footer>

website/donate/thanks.html

@@ -0,0 +1,343 @@
+<!DOCTYPE html>
+<!-----------------------------------------------------------------------
+Copyright (C) Ayushya Amitabh - All Rights Reserved
+Unauthorized copying of this file, via any medium is strictly prohibited
+Proprietary and confidential
+Written by Ayushya Amitabh <admin@chromewatchparty.com>, 2020 
+https://www.chromewatchparty.com/copyright
+=========================================================================
+ALL CONTENT ON WATCH PARTY'S WEBSITE OR IN WATCH PARTY'S CHROME EXTENSION APP, UNLESS OTHERWISE
+CITED ARE THE SOLE INTELLECTUAL PROPERTY OF AYUSHYA AMITABH, AND MAY NOT BE
+COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
+------------------------------------------------------------------------->
+<html>
+  <head>
+    <meta
+      name="description"
+      content="Watch Party syncs streamed content across devices. Watch your favorites, with your favorite people."
+    />
+    <meta
+      name="keywords"
+      content="watch party, sharing, video call, voice phone, free, chrome, firefox, netflix, hulu, disney plus, prime video, youtube, hbo, peacock tv, google play, crunchyroll, apple tv, viki, funimation, roosterteeth, stan, hotstar"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <link rel="icon" href="/icons/favicon.png" />
+    <link rel="manifest" href="/manifest.json" />
+    <link
+      rel="preload"
+      as="font"
+      href="/fonts/glacialindifference-bold-webfont.woff"
+      crossorigin
+    />
+    <link
+      rel="preload"
+      as="font"
+      href="/fonts/glacialindifference-bold-webfont.woff2"
+      crossorigin
+    />
+    <link
+      rel="preload"
+      as="font"
+      href="/fonts/glacialindifference-italic-webfont.woff"
+      crossorigin
+    />
+    <link
+      rel="preload"
+      as="font"
+      href="/fonts/glacialindifference-italic-webfont.woff2"
+      crossorigin
+    />
+    <link
+      rel="preload"
+      as="font"
+      href="/fonts/glacialindifference-regular-webfont.woff"
+      crossorigin
+    />
+    <link
+      rel="preload"
+      as="font"
+      href="/fonts/glacialindifference-regular-webfont.woff2"
+      crossorigin
+    />
+    <style>
+      @import "/styles/variables.css";
+      @import "/styles/variables-dark.css" screen and
+        (prefers-color-scheme: dark);
+
+      @import "/styles/extrasmall.css";
+      @import "/styles/small.css" only screen and (min-width: 768px) and
+        (max-width: 1024px);
+      @import "/styles/medium.css" only screen and (min-width: 1024px);
+      @import "/styles/large.css" only screen and (min-width: 1366px);
+      @import "/styles/extralarge.css" only screen and (min-width: 1921px);
+
+      @font-face {
+        font-family: "GlacialBold";
+        src: url("/fonts/glacialindifference-bold-webfont.woff2")
+            format("woff2"),
+          url("/fonts/glacialindifference-bold-webfont.woff") format("woff");
+        font-weight: normal;
+        font-style: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: "GlacialItalic";
+        src: url("/fonts/glacialindifference-italic-webfont.woff2")
+            format("woff2"),
+          url("/fonts/glacialindifference-italic-webfont.woff") format("woff");
+        font-weight: normal;
+        font-style: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: "Glacial";
+        src: url("/fonts/glacialindifference-regular-webfont.woff2")
+            format("woff2"),
+          url("/fonts/glacialindifference-regular-webfont.woff") format("woff");
+        font-weight: normal;
+        font-style: normal;
+        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;
+      }
+      [data-font="sans-italic"] {
+        font-family: "GlacialItalic", sans-serif;
+        font-style: italic;
+        font-display: swap;
+      }
+    </style>
+    <title>Watch Party | Thank You!</title>
+    <script>
+      /*
+       * G O O G L E
+       * A N A L Y T I C S
+       */
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+      gtag("config", "UA-87498806-2");
+    </script>
+  </head>
+  <body>
+    <div class="heading bubble empty right">
+      <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: 10rem; margin-bottom: -10rem"
+        class="text-section"
+      >
+        <div data-active="true" class="info alert" data-active="true">
+          <div class="info-text">
+            <div>
+              <h1 class="sub-title" data-font="sans-bold">
+                🎉 THANK YOU FOR YOUR DONATION!
+              </h1>
+              <p class="body" data-font="sans">
+                You helped keep Watch Party alive and free for everyone.
+              </p>
+              <a
+                target="_blank"
+                class="underlink"
+                href="mailto:admin@chromewatchparty.com?subject=Question About Donation"
+                data-font="sans-bold"
+                >ASK ABOUT DONATION</a
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <footer>
+      <div class="link-section">
+        <div class="link-list">
+          <h6 class="link-list-title" data-font="sans-bold">FOR USERS</h6>
+          <a class="underlink" href="/welcome#tips" data-font="sans">FAQ</a>
+          <a class="underlink" href="/changes" data-font="sans">Changelog</a>
+          <a
+            class="underlink"
+            target="_blank"
+            href="mailto:admin@chromewatchparty.com?subject=User Feedback"
+            data-font="sans"
+          >
+            Give Feedback
+          </a>
+          <a class="underlink" href="/welcome" data-font="sans"
+            >Getting Started</a
+          >
+          <a class="underlink" href="/donate" data-font="sans">
+            Support Watch Party
+          </a>
+          <a
+            class="underlink"
+            target="_blank"
+            href="https://get.firefoxwatchparty.com"
+            data-font="sans"
+          >
+            Get Firefox Add-On
+          </a>
+          <a
+            class="underlink"
+            target="_blank"
+            href="https://get.edgewatchparty.com"
+            data-font="sans"
+          >
+            Get Edge Add-On
+          </a>
+          <a
+            class="underlink"
+            target="_blank"
+            href="https://get.chromewatchparty.com"
+            data-font="sans"
+          >
+            Get Chrome Extension
+          </a>
+        </div>
+        <div class="link-list">
+          <h6 class="link-list-title" data-font="sans-bold">FOR DEVELOPERS</h6>
+          <a
+            class="underlink"
+            target="_blank"
+            href="https://firebase.google.com"
+            data-font="sans"
+            >Firebase</a
+          >
+          <a
+            class="underlink"
+            target="_blank"
+            href="https://material-ui.com"
+            data-font="sans"
+            >Material UI</a
+          >
+          <a
+            class="underlink"
+            target="_blank"
+            href="https://dolby.io"
+            data-font="sans"
+            >Dolby Voxeet</a
+          >
+          <a
+            class="underlink"
+            target="_blank"
+            href="https://reactjs.org"
+            data-font="sans"
+            >React JS</a
+          >
+          <a
+            class="underlink"
+            target="_blank"
+            href="https://nodejs.org"
+            data-font="sans"
+            >Node JS</a
+          >
+          <a
+            class="underlink"
+            target="_blank"
+            href="http://developers.giphy.com"
+            data-font="sans"
+            >Giphy</a
+          >
+        </div>
+        <div class="link-list">
+          <h6 class="link-list-title" data-font="sans-bold">LEGAL & OTHER</h6>
+          <a class="underlink" data-font="sans">© 2020, Ayushya Amitabh</a>
+          <a class="underlink" href="/copyright" data-font="sans">Copyright</a>
+          <a
+            class="underlink"
+            target="_blank"
+            href="https://linkedin.com/in/ayushyamitabh"
+            data-font="sans"
+            >About Creator</a
+          >
+        </div>
+      </div>
+      <div class="end-line">
+        <a class="underlink" data-font="sans">
+          Built with ♥ for Google Chrome, Microsoft Edge & Mozilla Firefox by
+          Ayushya Amitabh
+        </a>
+        <a
+          class="underlink"
+          target="_blank"
+          href="https://instagram.com/chromewatchparty"
+        >
+          <svg
+            height="4rem"
+            viewBox="0 0 511 511.9"
+            width="4rem"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"
+            />
+            <path
+              d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"
+            />
+            <path
+              d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"
+            />
+          </svg>
+        </a>
+        <a
+          class="underlink"
+          target="_blank"
+          href="https://www.reddit.com/r/ChromeWatchParty/"
+        >
+          <svg
+            id="Bold"
+            enable-background="new 0 0 24 24"
+            height="4rem"
+            viewBox="0 0 24 24"
+            width="4rem"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="m21.325 9.308c-.758 0-1.425.319-1.916.816-1.805-1.268-4.239-2.084-6.936-2.171l1.401-6.406 4.461 1.016c0 1.108.89 2.013 1.982 2.013 1.113 0 2.008-.929 2.008-2.038s-.889-2.038-2.007-2.038c-.779 0-1.451.477-1.786 1.129l-4.927-1.108c-.248-.067-.491.113-.557.365l-1.538 7.062c-2.676.113-5.084.928-6.895 2.197-.491-.518-1.184-.837-1.942-.837-2.812 0-3.733 3.829-1.158 5.138-.091.405-.132.837-.132 1.268 0 4.301 4.775 7.786 10.638 7.786 5.888 0 10.663-3.485 10.663-7.786 0-.431-.045-.883-.156-1.289 2.523-1.314 1.594-5.115-1.203-5.117zm-15.724 5.41c0-1.129.89-2.038 2.008-2.038 1.092 0 1.983.903 1.983 2.038 0 1.109-.89 2.013-1.983 2.013-1.113.005-2.008-.904-2.008-2.013zm10.839 4.798c-1.841 1.868-7.036 1.868-8.878 0-.203-.18-.203-.498 0-.703.177-.18.491-.18.668 0 1.406 1.463 6.07 1.488 7.537 0 .177-.18.491-.18.668 0 .207.206.207.524.005.703zm-.041-2.781c-1.092 0-1.982-.903-1.982-2.011 0-1.129.89-2.038 1.982-2.038 1.113 0 2.008.903 2.008 2.038-.005 1.103-.895 2.011-2.008 2.011z"
+            />
+          </svg>
+        </a>
+        <a
+          class="underlink"
+          target="_blank"
+          href="mailto:admin@chromewatchparty.com"
+        >
+          <svg
+            version="1.1"
+            id="Capa_1"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            x="0px"
+            y="0px"
+            width="4rem"
+            height="4rem"
+            viewBox="0 0 512 512"
+            style="enable-background: new 0 0 512 512"
+            xml:space="preserve"
+          >
+            <g>
+              <g>
+                <path
+                  d="M467,61H45C20.218,61,0,81.196,0,106v300c0,24.72,20.128,45,45,45h422c24.72,0,45-20.128,45-45V106
+             C512,81.28,491.872,61,467,61z M460.786,91L256.954,294.833L51.359,91H460.786z M30,399.788V112.069l144.479,143.24L30,399.788z
+              M51.213,421l144.57-144.57l50.657,50.222c5.864,5.814,15.327,5.795,21.167-0.046L317,277.213L460.787,421H51.213z M482,399.787
+             L338.213,256L482,112.212V399.787z"
+                />
+              </g>
+            </g>
+          </svg>
+        </a>
+      </div>
+    </footer>
+  </body>
+</html>

website/styles/extralarge.css

@@ -32,15 +32,6 @@ body {
   display: initial !important;
 }
 
-.donate.card-grid {
-  display: block;
-  overflow: auto;
-}
-
-.donate.card-grid .support-card {
-  display: inline-flex !important;
-}
-
 .text-section .info {
   width: 100%;
   max-width: 150rem;

website/styles/extrasmall.css

@@ -28,35 +28,13 @@ body {
   overflow-x: hidden;
 }
 
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-input {
-  -moz-appearance: textfield;
-  color: var(--color-secondary);
-  max-width: calc(100% - 6.5rem - 2px);
-  width: calc(100% - 6.5rem - 2px);
-  max-width: --webkit-fill-available;
-  margin: 2.5rem 0;
-  padding: 1.5rem;
-  font-size: 10rem;
-  border-radius: 2.5rem;
-  outline: none;
-  letter-spacing: 4px;
-  background-color: var(--color-primary);
-  border: 2px solid var(--color-dim);
-  padding-left: 5rem;
-}
-
 a {
   color: var(--color-secondary);
 }
 
 a[href]::after {
   display: inline-block;
-  content: '↗';
+  content: "↗";
   margin-left: 1rem;
   transition: all ease-in-out 0.2s;
   color: var(--color-secondary);
@@ -193,7 +171,7 @@ a.big-button::after {
   align-items: center;
 }
 
-.info.alert[data-active='true'] {
+.info.alert[data-active="true"] {
   display: block;
   width: auto;
 }
@@ -283,7 +261,7 @@ a.big-button::after {
 }
 
 .card-grid::after {
-  content: '.';
+  content: ".";
   opacity: 0;
   margin-right: 50rem;
 }
@@ -362,17 +340,6 @@ a.big-button::after {
   transition: all ease-in-out 0.2s;
   height: 7.2rem;
 }
-
-#paypal-donate {
-  margin-top: 5rem;
-  display: flex;
-  flex: 1;
-  background-color: var(--color-dim);
-  padding: 2.5rem;
-  border-radius: 2.5rem;
-  margin-bottom: 2.5rem;
-}
-
 footer {
   margin-top: 20rem;
 }
@@ -397,7 +364,6 @@ footer {
   opacity: 0.5;
 }
 
-
 footer .end-line .underlink::after {
   content: unset;
 }
@@ -425,3 +391,16 @@ footer .end-line .underlink svg:hover {
   justify-content: center;
   align-items: center;
 }
+
+.paypal {
+  display: flex;
+  justify-content: center;
+  background-color: var(--color-bright);
+  border-radius: 2.5rem;
+}
+
+.paypal input {
+  max-width: 100%;
+  max-height: 15rem;
+  outline: none !important;
+}

website/styles/large.css

@@ -60,7 +60,7 @@ body {
 }
 
 .features.card-grid .support-card::before {
-  content: '';
+  content: "";
   width: 10rem;
   height: 10rem;
   position: absolute;
@@ -83,26 +83,6 @@ body {
   z-index: 2;
 }
 
-.donate.card-grid .support-card button.big-button:hover {
-  height: 35% !important;
-  padding-left: 10rem;
-}
-
-#donate input {
-  max-width: calc(100% - 10.5rem);
-  width: 100%;
-}
-
-#donate #paypal-donate {
-  justify-content: center;
-  align-items: center;
-}
-
-#donate .description .underlink {
-  display: block;
-  text-align: center;
-}
-
 footer .end-line {
   border-top: 1px solid var(--color-secondary);
   padding-top: 2.5rem;

website/styles/medium.css

@@ -30,10 +30,6 @@ a.title {
   font-size: 2.5rem;
 }
 
-input {
-  max-width: calc(100% - 9.5rem - 2px);
-}
-
 .big-button {
   display: inline-block;
   font-size: 1.8rem;