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
+37 -20
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>
</div>
</div>
website/media/logos/RoosterTeeth.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 19 KiB

website/media/logos/RoosterTeeth.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

website/styles/extrasmall.css
+6 -2
View File
@@ -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
+16 -2
View File
@@ -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
+1 -1
View File
@@ -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');
}