Files
2025-07-17 06:17:07 -07:00

675 lines
19 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">
<link rel="stylesheet" href="assets/BigDaddy-RadialMenu.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</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;
z-index: 101;
}
.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>
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 = {
Visible: function (data) {
if (data.visible) {
$('#menu').removeClass('hidden');
} else {
$('#menu').addClass('hidden');
}
},
toggle: function (data) {
if ($('#menu').hasClass('hidden')) {
$('#menu').removeClass('hidden');
} else {
$('#menu').addClass('hidden');
}
},
RenderMenu: function (data) {
Reset();
var d = JSON.parse(data.items);
var x = 0;
$('#menumainlabel').html(data.menuname);
for (x = 0; x < d.items.length; x++) {
tot = x + 1;
if (x > 11) {
//too many to fit so done
} else {
var mi = $('#opt' + (x + 1));
var mih = $('#mih' + (x + 1));
var icon = $('#icon' + (x + 1));
$(mih).attr('data-id', d.items[x].id);
$(mih).attr('data-name', d.items[x].description)
var ii = '';
if (imageExists('assets/img/' + d.items[x].icon + '.svg')) {
ii = d.items[x].icon + '.svg';
} else {
ii = d.items[x].icon + '.png'
}
$(icon).attr('src', 'assets/img/' + ii);
$(mi).removeClass('hidden');
if (event.data.visible) {
$('#menu').removeClass('hidden');
}
if (event.data.back) {
$('#menubackbutton').removeClass('hidden');
} else {
if (!$('#menubackbutton').hasClass('hidden')) $('#menubackbutton').addClass('hidden');
}
}
}
if (x < 12) {
for (let i = 1; i < tot; i++) {
$('#opt' + (i + 1)).css('transform', 'translate(-50%,0%) rotate(' + ((360 / tot) * i) + 'deg)');
$('#icon' + (i + 1)).css('transform', 'translate(-50%,2vh) rotate(-' + ((360 / tot) * i) + 'deg)');
}
for (let i = tot + 1; i < 13; i++) {
$('#opt' + i).remove();
}
}
},
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>
<!-- ****************** START MENU *********************-->
<script>
// menu config options
var menukey = ''; // which key opens menu ex. f1
var keepOpen = true; // true = menu stays open until backspace or esc is pressed, false = you have to hold the menu key down to keep it open
</script>
<div class="hidden menuwrapper" id="menu">
<div class="menu" id="menuHolder"></div>
<div class="menucenter">
<div class="label" id="menumainlabel">??</div>
<div class="hidden center" id="menubackbutton" onclick='CallBack("Back")'><div id="menubacklabel">BACK</div></div>
<div class="label" id="menusecondarylabel">MENU</div>
</div>
</div>
<script type="text/html" id="defaultMenu">
<div class="hidden menuitem" id="opt1" style="transform: translate(-50%, 0) rotate(0);"><div class="menuitemholder" id="mih1" data-id=""><img id="icon1" src="" style="transform: translate(-50%, 2vh) rotate(0);" /></div></div>
<div class="hidden menuitem" id="opt2" style="transform: translate(-50%, 0) rotate(30deg);"><div class="menuitemholder" id="mih2" data-id=""><img id="icon2" src="" style="transform: translate(-50%, 2vh) rotate(-30deg);" /></div></div>
<div class="hidden menuitem" id="opt3" style="transform: translate(-50%, 0) rotate(60deg);"><div class="menuitemholder" id="mih3" data-id=""><img id="icon3" src="" style="transform: translate(-50%, 2vh) rotate(-60deg);" /></div></div>
<div class="hidden menuitem" id="opt4" style="transform: translate(-50%, 0) rotate(90deg);"><div class="menuitemholder" id="mih4" data-id=""><img id="icon4" src="" style="transform: translate(-50%, 2vh) rotate(-90deg);" /></div></div>
<div class="hidden menuitem" id="opt5" style="transform: translate(-50%, 0) rotate(120deg);"><div class="menuitemholder" id="mih5" data-id=""><img id="icon5" src="" style="transform: translate(-50%, 2vh) rotate(-120deg);" /></div></div>
<div class="hidden menuitem" id="opt6" style="transform: translate(-50%, 0) rotate(150deg);"><div class="menuitemholder" id="mih6" data-id=""><img id="icon6" src="" style="transform: translate(-50%, 2vh) rotate(-150deg);" /></div></div>
<div class="hidden menuitem" id="opt7" style="transform: translate(-50%, 0) rotate(180deg);"><div class="menuitemholder" id="mih7" data-id=""><img id="icon7" src="" style="transform: translate(-50%, 2vh) rotate(-180deg);" /></div></div>
<div class="hidden menuitem" id="opt8" style="transform: translate(-50%, 0) rotate(210deg);"><div class="menuitemholder" id="mih8" data-id=""><img id="icon8" src="" style="transform: translate(-50%, 2vh) rotate(-210deg);" /></div></div>
<div class="hidden menuitem" id="opt9" style="transform: translate(-50%, 0) rotate(240deg);"><div class="menuitemholder" id="mih9" data-id=""><img id="icon9" src="" style="transform: translate(-50%, 2vh) rotate(-240deg);" /></div></div>
<div class="hidden menuitem" id="opt10" style="transform: translate(-50%, 0) rotate(270deg);"><div class="menuitemholder" id="mih10" data-id=""><img id="icon10" src="" style="transform: translate(-50%, 2vh) rotate(-270deg);" /></div></div>
<div class="hidden menuitem" id="opt11" style="transform: translate(-50%, 0) rotate(300deg);"><div class="menuitemholder" id="mih11" data-id=""><img id="icon11" src="" style="transform: translate(-50%, 2vh) rotate(-300deg);" /></div></div>
<div class="hidden menuitem" id="opt12" style="transform: translate(-50%, 0) rotate(330deg);"><div class="menuitemholder" id="mih12" data-id=""><img id="icon12" src="" style="transform: translate(-50%, 2vh) rotate(-330deg);" /></div></div>
</script>
<script>
var to;
$(document).ready(function () {
$('.menuitemholder').hover(function () {
clearTimeout(to);
$('.menuitemholder').removeClass('hover');
$(this).addClass('hover');
$('#menusecondarylabel').html($(this).attr('data-name'));
}, function () {
var t = this;
to = setTimeout(function () {
$(t).removeClass('hover');
$('#menusecondarylabel').html('');
}, 400);
});
$('.menuitemholder').click(function () {
CallBack('ItemClick', $(this).attr("data-id"));
});
});
window.addEventListener('keyup', (event) => {
const keyName = event.key;
if (event.key == 'Backspace' || event.key == 'Escape' || (!keepOpen && event.key == menukey)) {
CallBack('MenuClosed');
}
});
function CallBack(f, p) {
var pp = (p != undefined ? p : '');
fetch(`https://${(window.GetParentResourceName ? window.GetParentResourceName() : "nui-frame-app")}/${f}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json; charset=UTF-8',
},
body: JSON.stringify({
"itemId": pp
})
});
}
function Reset() {
$('#menuHolder').html($('#defaultMenu').html());
$('.menuitemholder').hover(function () {
clearTimeout(to);
$('.menuitemholder').removeClass('hover');
$(this).addClass('hover');
$('#menusecondarylabel').html($(this).attr('data-name'));
}, function () {
var t = this;
to = setTimeout(function () {
$(t).removeClass('hover');
$('#menusecondarylabel').html('');
}, 400);
});
$('.menuitemholder').click(function () {
console.log('clicky: ' + $(this).attr("data-id"));
CallBack('ItemClick', $(this).attr("data-id"));
});
return;
for (let i = 1; i <= 12; i++) {
if (!$('#opt' + 1).hasClass('hidden')) $('#opt' + 1).addClass('hidden');
$('#mih' + i).attr('data-id', '');
$('#mih' + i).attr('data-name', '');
$('#icon' + i).attr('src', '');
}
}
function imageExists(image_url) {
var http = new XMLHttpRequest();
http.open('HEAD', image_url, false);
http.send();
return http.status != 404;
}
</script>
<!-- ****************** END MENU *********************-->
</body>
</html>