v1.7.0/donations & rooster teeth fix

website/donate/index.html

@@ -96,8 +96,7 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       }
     </style>
     <title>Watch Party | Donate</title>
-    <!-- AS8qXxrxPOe9yb0yyJwQY_fRkRuXB8AFgeSmCLtkU0_ag9OVYTB3VeNjGwtL34KJZ9EdRYwEC89wfYZE -->
+    <script src="https://www.paypal.com/sdk/js?client-id=AS8qXxrxPOe9yb0yyJwQY_fRkRuXB8AFgeSmCLtkU0_ag9OVYTB3VeNjGwtL34KJZ9EdRYwEC89wfYZE"></script>
-    <script src="https://www.paypal.com/sdk/js?client-id=ASTxEXKWhaXzdXe4CG6wkest7Hmi_agjiPqHjY524USsslz9fnLul_wrG8tauvZ6PCAxIQEanDPvazkh"></script>
     <script>
       /*
        * G O O G L E 
@@ -114,18 +113,25 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
        */
       function setDonationAmount (v) {
         document.querySelector('#donate input').value = v;
-        document.querySelector('#donate input').dispatchEvent(new Event('input', { bubbles: true }));
+        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})?$/;
-        if (regex.test(ev.target.value)) {
+        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.2";
+          document.querySelector('#paypal-donate').style.opacity= "0.4";
           actions.disable();
         }
       }
@@ -134,12 +140,19 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
        */
        paypal
         .Buttons({
+          style: {
+            color: 'black',
+            shape: 'pill',
+          },
             onInit: function(data, actions) {
-              document.querySelector('#paypal-donate').style.opacity= "0.2";
+              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);
+                });
             },
             createOrder: function(data, actions) {
                 return actions.order.create({
@@ -214,42 +227,46 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
         <h4 data-font="sans-bold" class="sub-title">1 SERVER</h4>
         <img muted autoplay loop src="/media/costs/server1.webp"></video>
         <p data-font="sans" class="body">
-          The cost of a single server for 1 month costs about $0.75
+          The cost of a single server for 1 month costs about $1.00
         </p>
-        <button onclick="setDonationAmount(0.75); return false;" data-font="sans-bold" class="big-button">DONATE $0.75</button>
+        <button onclick="setDonationAmount(1.00); return false;" data-font="sans-bold" class="big-button">DONATE $1.00</button>
       </div>
       <div class="support-card">
         <h4 data-font="sans-bold" class="sub-title">ALL SERVERS</h4>
         <img muted autoplay loop src="/media/costs/server+.webp"></video>
         <p data-font="sans" class="body">
-          The total costs of all servers for 1 month is about $5.00
+          The total costs of all servers for 1 month is about $7.00
         </p>
-        <button onclick="setDonationAmount(5.00); return false;" data-font="sans-bold" class="big-button">DONATE $5.00</button>
+        <button onclick="setDonationAmount(7.00); return false;" data-font="sans-bold" class="big-button">DONATE $7.00</button>
       </div>
       <div class="support-card">
         <h4 data-font="sans-bold" class="sub-title">GROUP CALLS</h4>
         <img muted autoplay loop src="/media/costs/server+.webp"></video>
         <p data-font="sans" class="body">
-          The total costs of managing video and voice call APIs is about $7.00
+          The total costs of managing video and voice call APIs is about $10.00
         </p>
-        <button onclick="setDonationAmount(7.00); return false;" data-font="sans-bold" class="big-button">DONATE $7.00</button>
+        <button onclick="setDonationAmount(10.00); return false;" data-font="sans-bold" class="big-button">DONATE $10.00</button>
-      </div>
-    </div>
-    <div class="text-section">
-      <div class="info">
-        <div class="info-text">
-            <h1 class="title" data-font="sans-bold">DONATE</h1>
-        </div>
       </div>
     </div>
     <div id="donate" class="text-section">
+      <div class="info">
+        <div class="info-text">
+            <h1 class="title" data-font="sans-bold">DONATE</h1>
+        </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="0" required />
+            <input step="0.5" type="number" data-font="sans-bold" value="1.00" min="1.00" required />
+            <a style="display: block;" data-font="sans-bold" class="underlink">MINIMUM DONATION OF $1.00</a>
           </div>
+          <div 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>

website/styles/extrasmall.css

@@ -285,19 +285,23 @@ input::-webkit-inner-spin-button {
 }
 input {
   -moz-appearance: textfield;
-  color: var(--color-primary);
+  color: var(--color-secondary);
   max-width: calc(100% - 10rem);
-  width: 100%;
+  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;
 }
 
 #paypal-donate {
   margin-top: 5rem;
+  display: flex;
 }
 
 footer {

website/styles/large.css

@@ -80,10 +80,24 @@ body {
   z-index: 2;
 }
 
-.features.card-grid .support-card button.big-button:hover {
+.donate.card-grid .support-card button.big-button:hover {
   height: 25% !important;
   padding-left: 10rem;
-  background-color: var(--color-dim);
+}
+
+#donate input {
+  max-width: calc(100% - 15rem);
+  width: 100%;
+}
+
+#donate #paypal-donate {
+  justify-content: center;
+  align-items: center;
+}
+
+#donate .description .underlink {
+  display: block;
+  text-align: center;
 }
 
 footer .end-line {

website/styles/variables.css

@@ -57,5 +57,5 @@ AMITABH, AND MAY NOT BE COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
   background-image: url('/media/logos/FunimationColor.webp');
 }
 .card-grid .support-card#roosterteeth {
-  background-image: url('/media/logos/RoosterTeeth.png');
+  background-image: url('/media/logos/RoosterTeeth.webp');
 }