ayushya/watchparty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.7.0/donations & rooster teeth fix

Browse Source
This commit is contained in:
ayushya
2020-09-07 00:16:48 -04:00
parent a1bc044d5a
commit 2b6d6d35ad
6 changed files with 61 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/donate/index.html
+38 -21
View File
@@ -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=ASTxEXKWhaXzdXe4CG6wkest7Hmi_agjiPqHjY524USsslz9fnLul_wrG8tauvZ6PCAxIQEanDPvazkh"></script>
<script src="https://www.paypal.com/sdk/js?client-id=AS8qXxrxPOe9yb0yyJwQY_fRkRuXB8AFgeSmCLtkU0_ag9OVYTB3VeNjGwtL34KJZ9EdRYwEC89wfYZE"></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>
</div>
</div>
<div class="text-section">
<div class="info">
<div class="info-text">
<h1 class="title" data-font="sans-bold">DONATE</h1>
</div>
<button onclick="setDonationAmount(10.00); return false;" data-font="sans-bold" class="big-button">DONATE $10.00</button>
</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 id="paypal-donate"></div>
</div>
</div>
</div>