v1.7.9/website donation update
This commit is contained in:
+15
-120
@@ -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
|
||||
necessary servers, development, and other costs.
|
||||
Help keep Watch Party alive and free. Click above to donate, or click below to learn more.
|
||||
</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>
|
||||
<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 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 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 $400.00
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
|
||||
Reference in New Issue
Block a user