KingMcDonalds
498 lines
13 KiB
HTML
498 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="nl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700,900&display=swap" id="font" />
|
|
<link href="https://fonts.googleapis.com/css2?family=News+Cycle&family=Yanone+Kaffeesatz&display=swap" rel="stylesheet" />
|
|
<link rel="stylesheet" href="Notify.css">
|
|
|
|
</head>
|
|
<body style="font-family: 'Montserrat';">
|
|
|
|
<style>
|
|
#ATM {
|
|
width: 600px;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
background: linear-gradient(0deg, rgb(204, 252, 208), white);
|
|
transform: translate(-50%, -50%);
|
|
padding: 25px;
|
|
border-radius: 25px;
|
|
opacity: 0;
|
|
transition: opacity 1s;
|
|
}
|
|
|
|
.balanceInfoBank, .balanceInfoCash {
|
|
width: 100%;
|
|
height: 50px;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.closeBtn {
|
|
position: absolute;
|
|
top: 15px;
|
|
right: 14px;
|
|
z-index: 13;
|
|
width: 20px;
|
|
height: 20px;
|
|
color: red;
|
|
}
|
|
|
|
.closeBtn svg {
|
|
fill: red;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.DepositBtn {
|
|
width: 45%;
|
|
left: 20px;
|
|
float: left;
|
|
}
|
|
|
|
.WithdrawBtn {
|
|
width: 45%;
|
|
right: 20px;
|
|
float:right;
|
|
}
|
|
|
|
#ATM img {
|
|
width: 60%;
|
|
left: 50%;
|
|
position: relative;
|
|
transform: translate(-50%, 0);
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
#trans {
|
|
display:none;
|
|
position: relative;
|
|
width: 100%;
|
|
top: -22px;
|
|
z-index: 0;
|
|
}
|
|
|
|
#transtype {
|
|
text-align: center;
|
|
}
|
|
|
|
#main {
|
|
display:block;
|
|
z-index: 1;
|
|
position:relative;
|
|
}
|
|
|
|
.btn {
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
background: rgb(0, 99, 8);
|
|
height: 45px;
|
|
border: 1px dotted white;
|
|
margin-bottom: 10px;
|
|
margin-top: 10px;
|
|
right: 20px;
|
|
color: white;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
padding-top: 20px;
|
|
border-radius: 35px;
|
|
}
|
|
|
|
.cancel {
|
|
background: rgb(255, 216, 0);
|
|
height: 25px;
|
|
font-weight: normal;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
input[type="text"] {
|
|
width: 97%;
|
|
height: 40px;
|
|
border-radius: 5px;
|
|
border: 1px solid lightgrey;
|
|
padding-left: 10px;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
left: 50%;
|
|
width: 50%;
|
|
position: relative;
|
|
transform: translate(-50%, 0);
|
|
text-align:center;
|
|
}
|
|
|
|
.error {
|
|
position: relative;
|
|
height: 50px;
|
|
color: red;
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
}
|
|
|
|
.fee {
|
|
text-align: center;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: red;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
</style>
|
|
|
|
<div id="notification1"></div>
|
|
|
|
<div id="progressui">
|
|
<svg viewBox="0 0 100 100" id="progress-circle">
|
|
<circle cx="50" cy="50" r="45" class="mask" />
|
|
<circle cx="50" cy="50" r="45" id="progress-circle-gage" class="guage" />
|
|
</svg>
|
|
<div id="progress-percent">0%</div>
|
|
<div id="progress-circle-text"></div>
|
|
</div>
|
|
<div id="textui"></div>
|
|
|
|
<!--
|
|
MONEY UI
|
|
-->
|
|
|
|
<div id="ATM">
|
|
<div class="container">
|
|
<img src="img/fleeca.png">
|
|
<div class="closeBtn" onclick="ExitAtm();"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z" /></svg></div>
|
|
<div class="balanceInfoBank">BANK BALANCE: <span id="balanceB">0</span></div>
|
|
<div class="balanceInfoCash">CASH BALANCE: <span id="balanceC">0</span></div>
|
|
<div class="error"></div>
|
|
<div class="fee"></div>
|
|
<div id="main">
|
|
<div class="btn DepositBtn" onclick="Trans('DEPOSIT')">MAKE A DEPOSIT</div>
|
|
<div class="btn WithdrawBtn" onclick="Trans('WITHDRAWL')">MAKE A WITHDRAWL</div>
|
|
</div>
|
|
<div id="trans">
|
|
<h1 id="transtype">DEPOSIT</h1>
|
|
<div class="form">
|
|
<input type="text" id="atmamount" placeholder="Enter Amount" data-type="currency" pattern="^\$\d{1,3}(,\d{3})*(\.\d+)?$" value="0.00"/>
|
|
<div class="btn atbtn" onclick="SubmitTrans();">SUBMIT TRANSACTION</div>
|
|
<div class="btn cancel" onclick="CancelTrans();">CANCEL TRANSACTION</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="PAY"></div>
|
|
|
|
<div id="PAYDEBT"></div>
|
|
|
|
<div id="tester" style="font-size: 24px; color: white; font-weight: bold;"></div>
|
|
|
|
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
|
|
|
|
<script>
|
|
var increment = 10;
|
|
var audio = null;
|
|
|
|
let cash = undefined;
|
|
let bank = undefined;
|
|
|
|
function rgba(hex, opacity) {
|
|
hex = hex.replace('#', '');
|
|
redColor = parseInt(hex.substring(0, 2), 16);
|
|
greenColor = parseInt(hex.substring(2, 4), 16);
|
|
blueColor = parseInt(hex.substring(4, 6), 16);
|
|
|
|
result = 'rgba(' + redColor + ',' + greenColor + ',' + blueColor + ',' + opacity / 100 + ')';
|
|
return result;
|
|
}
|
|
|
|
window.onload = function () {
|
|
|
|
var ttext = document.querySelector('#progress-circle-text');
|
|
var ptext = document.querySelector('#progress-percent');
|
|
var p = document.querySelector('#progress-circle-gage');
|
|
var stext = document.querySelector('#textui');
|
|
var ntext = document.querySelector('#notification1');
|
|
var turnoff = null;
|
|
var notifyturnoff = null;
|
|
|
|
var eventCallback = {
|
|
setIncrement: function (data) {
|
|
increment = data.bank * 1; //force number
|
|
$('#atmamount').attr("placeholder", "Enter Amount in increments of $" + increment);
|
|
},
|
|
setFee: function (data) {
|
|
fee = data.bank * 1; //force number
|
|
if (fee > 0) $('.fee').html("A transaction fee of $" + fee.toFixed(2) + " will be charged.");
|
|
},
|
|
atm: function (data) {
|
|
$('#balanceB').html(data.bank.replace('¤', '$'));
|
|
$('#balanceC').html(data.cash.replace('¤', '$'));
|
|
$('#main').show();
|
|
$('#trans').hide();
|
|
$('#atmamount').val('');
|
|
$('#ATM').css('opacity', '1');
|
|
},
|
|
|
|
atmerror: function (data) {
|
|
$('#ATM').css('opacity', '1');
|
|
$('.error').html(data.message);
|
|
setTimeout(function () {
|
|
$('.error').html('');
|
|
}, 5000);
|
|
},
|
|
|
|
// Notify
|
|
toggleProgressNotify: function (data) {
|
|
if (data.task == true) { document.querySelector('#progressui').style.opacity = '1'; }
|
|
if (data.task == false) {
|
|
document.querySelector('#progressui').style.opacity = '0';
|
|
ttext.innerHTML = '';
|
|
ptext.innerHTML = '0%';
|
|
}
|
|
},
|
|
|
|
displayProgressNotifyText: function (data) {
|
|
if (turnoff != null) {
|
|
clearTimeout(turnoff);
|
|
turnoff = null;
|
|
}
|
|
document.querySelector('#textui').style.opacity = '1';
|
|
stext.innerHTML = data.text;
|
|
turnoff = setTimeout(function () { document.querySelector('#textui').style.opacity = '0'; }, data.time);
|
|
},
|
|
|
|
updatePogressNotify: function (data) {
|
|
var percent = data.percent;
|
|
if (percent * 1 > 0) {
|
|
p.style.strokeDashoffset = 278 - ((percent / 100) * 278);
|
|
ptext.innerHTML = percent + '%';
|
|
}
|
|
ttext.innerHTML = data.text;
|
|
},
|
|
|
|
displayNotifyText: function (data) {
|
|
//$('#tester').html(data.action + ' ' + data.value);
|
|
if (notifyturnoff != null) {
|
|
clearTimeout(notifyturnoff);
|
|
notifyturnoff = null;
|
|
}
|
|
ntext.style.opacity = '1';
|
|
ntext.innerHTML = data.value;
|
|
notifyturnoff = setTimeout(function () { ntext.style.opacity = '0'; }, data.time);
|
|
},
|
|
|
|
|
|
sound: function (file = null, args = null) {
|
|
if (audio != null) {
|
|
audio.pause();
|
|
}
|
|
|
|
audio = new Audio(file);
|
|
if (audio != null && args['loop'] != null) {
|
|
audio.loop = args['loop'];
|
|
}
|
|
if (audio != null && args['volume'] != null) {
|
|
audio.volume = args['volume'];
|
|
}
|
|
audio.play();
|
|
|
|
},
|
|
|
|
|
|
};
|
|
|
|
window.addEventListener('message', function (event) {
|
|
eventCallback[event.data.action](event.data);
|
|
});
|
|
|
|
}
|
|
|
|
|
|
function round(n) {
|
|
let a = parseInt(n / increment, increment) * increment;
|
|
let b = a + increment;
|
|
return (n - a > b - n) ? b : a;
|
|
}
|
|
|
|
function Trans(type) {
|
|
$('#transtype').html(type);
|
|
$('#main').hide();
|
|
$('#trans').show();
|
|
$('#atmamount').focus();
|
|
}
|
|
|
|
async function SubmitTrans() {
|
|
//formatCurrency($('#atmamount'));
|
|
var a = $('#atmamount').val().replace(',','');
|
|
if ($('#transtype').html() == 'DEPOSIT') {
|
|
if (!isNaN(a)) {
|
|
const response = await fetch(`https://${GetParentResourceName()}/AtmDeposit`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json; charset=UTF-8',
|
|
},
|
|
body: JSON.stringify({
|
|
amount: a
|
|
})
|
|
});
|
|
if (!response.ok) {
|
|
AtmError('There was an error with your transaction.');
|
|
}
|
|
} else {
|
|
AtmError('Not a valid amount');
|
|
}
|
|
} else {
|
|
if (!isNaN(a)) {
|
|
const response = await fetch(`https://${GetParentResourceName()}/AtmWithdrawl`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json; charset=UTF-8',
|
|
},
|
|
body: JSON.stringify({
|
|
amount: a
|
|
})
|
|
});
|
|
if (!response.ok) {
|
|
AtmError('There was an error with your transaction.');
|
|
}
|
|
} else {
|
|
AtmError('Not a valid amount');
|
|
}
|
|
}
|
|
}
|
|
|
|
function AtmError(error) {
|
|
$('#ATM').css('opacity', '1');
|
|
$('.error').html(error);
|
|
setTimeout(function () {
|
|
$('.error').html('');
|
|
}, 5000);
|
|
}
|
|
|
|
function CancelTrans() {
|
|
$('#main').show();
|
|
$('#trans').hide();
|
|
$('#atmamount').val('');
|
|
}
|
|
|
|
function ExitAtm() {
|
|
$('#main').show();
|
|
$('#trans').hide();
|
|
$('#atmamount').val('');
|
|
fetch(`https://${GetParentResourceName()}/ExitAtm`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json; charset=UTF-8',
|
|
},
|
|
});
|
|
$('#ATM').css('opacity', '0');
|
|
}
|
|
|
|
function imageExists(image_url) {
|
|
|
|
var http = new XMLHttpRequest();
|
|
|
|
http.open('HEAD', image_url, false);
|
|
http.send();
|
|
|
|
return http.status != 404;
|
|
|
|
}
|
|
|
|
function numberWithCommas(x) {
|
|
return x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
|
|
}
|
|
|
|
var timeout;
|
|
$("input[data-type='currency']").on({
|
|
keyup: function () {
|
|
clearTimeout(timeout);
|
|
var t = $(this);
|
|
timeout = setTimeout(function () { formatCurrency($(t)); }, 1000);
|
|
},
|
|
blur: function () {
|
|
//formatCurrency($(this), "blur");
|
|
}
|
|
});
|
|
|
|
|
|
function formatNumber(n) {
|
|
// format number 1000000 to 1,234,567
|
|
return n.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",")
|
|
}
|
|
|
|
|
|
function formatCurrency(input, blur) {
|
|
// appends $ to value, validates decimal side
|
|
// and puts cursor back in right position.
|
|
|
|
// get input value
|
|
var input_val = round($(input).val()) + '';
|
|
|
|
// don't validate empty input
|
|
if (input_val === "") { return; }
|
|
|
|
// original length
|
|
var original_len = input_val.length;
|
|
|
|
// initial caret position
|
|
var caret_pos = input.prop("selectionStart");
|
|
|
|
// check for decimal
|
|
if (input_val.indexOf(".") >= 0) {
|
|
|
|
// get position of first decimal
|
|
// this prevents multiple decimals from
|
|
// being entered
|
|
var decimal_pos = input_val.indexOf(".");
|
|
|
|
// split number by decimal point
|
|
var left_side = input_val.substring(0, decimal_pos);
|
|
var right_side = input_val.substring(decimal_pos);
|
|
|
|
// add commas to left side of number
|
|
left_side = formatNumber(left_side);
|
|
|
|
// validate right side
|
|
right_side = formatNumber(right_side);
|
|
|
|
// On blur make sure 2 numbers after decimal
|
|
if (blur === "blur") {
|
|
right_side += "00";
|
|
}
|
|
|
|
// Limit decimal to only 2 digits
|
|
right_side = right_side.substring(0, 2);
|
|
|
|
// join number by .
|
|
input_val = left_side + "." + right_side;
|
|
|
|
} else {
|
|
// no decimal entered
|
|
// add commas to number
|
|
// remove all non-digits
|
|
input_val = formatNumber(input_val);
|
|
input_val = input_val;
|
|
|
|
// final formatting
|
|
if (blur === "blur") {
|
|
input_val += ".00";
|
|
}
|
|
}
|
|
|
|
// send updated string to input
|
|
input.val(input_val);
|
|
|
|
// put caret back in the right position
|
|
var updated_len = input_val.length;
|
|
caret_pos = updated_len - original_len + caret_pos;
|
|
input[0].setSelectionRange(caret_pos, caret_pos);
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html> |