mirror of
https://github.com/ND-Framework/ND_Core.git
synced 2026-08-17 22:06:02 +01:00
Add files via upload
This commit is contained in:
Andyyy7666
GitHub
44
ND_ATMs/source/ui/index.html
Normal file
44
ND_ATMs/source/ui/index.html
Normal file
@@ -0,0 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" data-auto-a11y="true"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
||||
<script src="script.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body>
|
||||
<section id="overlay">
|
||||
<div id="info">
|
||||
<img src="https://i.imgur.com/NCgZtVe.png" id="logo">
|
||||
<p id="date"></p>
|
||||
<p id="time"></p>
|
||||
<hr id="redline">
|
||||
<hr id="redbox">
|
||||
<p id="welcome">Welcome back</p>
|
||||
<h1 id="playername"></h1>
|
||||
</div>
|
||||
<form id="atm">
|
||||
<p id="balance"></p>
|
||||
<input id="enteredAmount" class="input" type="number" placeholder="AMOUNT" min="20" max="2500">
|
||||
<button id="withdrawButton" class="input" type="submit" form="atm"><i class="fas fa-coins"></i> WITHDRAW</button>
|
||||
<button id="depositButton" class="input" type="submit" form="atm"><i class="fas fa-credit-card"></i> DEPOSIT</button>
|
||||
</form>
|
||||
<div id="loader"></div>
|
||||
<div id="confirmationScreen">
|
||||
<p id="confirmText">Are you sure you'd like to perform this action</p>
|
||||
<button id="confirmButton" class="input"><i class="fas fa-check-circle"></i> CONFIRM</button>
|
||||
<button id="cancelButton" type="reset" form="atm" class="input"><i class="fas fa-times-circle"></i> CANCEL</button>
|
||||
</div>
|
||||
<div id="successScreen">
|
||||
<p id="confirmText">Success!</p>
|
||||
<button type="reset" form="atm" class="input mainMenuButton"><i class="fas fa-chevron-circle-left"></i> BACK TO MAIN MENU</button>
|
||||
</div>
|
||||
<div id="failedScreen">
|
||||
<p id="confirmText">Failed!</p>
|
||||
<button type="reset" form="atm" class="input mainMenuButton"><i class="fas fa-chevron-circle-left"></i> BACK TO MAIN MENU</button>
|
||||
</div>
|
||||
<button id="closeButton" type="reset" form="atm" class="input"><i class="fas fa-sign-out-alt"></i> EXIT</button>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
132
ND_ATMs/source/ui/script.js
Normal file
132
ND_ATMs/source/ui/script.js
Normal file
@@ -0,0 +1,132 @@
|
||||
$(function() {
|
||||
function display(bool) {
|
||||
if (bool) {
|
||||
$("#overlay").show();
|
||||
} else {
|
||||
$("#overlay").hide();
|
||||
}
|
||||
}
|
||||
function atmDisplay(bool) {
|
||||
if (bool) {
|
||||
$("#atm").show();
|
||||
$("#loader, #confirmationScreen, #successScreen, #failedScreen").hide();
|
||||
return;
|
||||
}
|
||||
$("#atm").hide();
|
||||
}
|
||||
function loader(bool) {
|
||||
if (bool) {
|
||||
$("#loader").show();
|
||||
$("#atm, #confirmationScreen, #successScreen, #failedScreen").hide();
|
||||
return;
|
||||
}
|
||||
$("#loader").hide();
|
||||
}
|
||||
function confirmationScreen(bool) {
|
||||
if (bool) {
|
||||
$("#confirmationScreen").show();
|
||||
$("#atm, #loader, #successScreen, #failedScreen").hide();
|
||||
return;
|
||||
}
|
||||
$("#confirmationScreen").hide();
|
||||
}
|
||||
function successScreen(bool) {
|
||||
if (bool) {
|
||||
$("#successScreen").show()
|
||||
$("#confirmationScreen, #atm, #loader, #failedScreen").hide();
|
||||
return;
|
||||
}
|
||||
$("#successScreen").hide();
|
||||
}
|
||||
function failedScreen(bool) {
|
||||
if (bool) {
|
||||
$("#failedScreen").show()
|
||||
$("#confirmationScreen, #atm, #loader, #successScreen").hide();
|
||||
return;
|
||||
}
|
||||
$("#failedScreen").hide();
|
||||
}
|
||||
display(false);
|
||||
atmDisplay(true);
|
||||
loader(false);
|
||||
confirmationScreen(false);
|
||||
successScreen(false);
|
||||
|
||||
const today = new Date();
|
||||
let action;
|
||||
|
||||
window.addEventListener("message", function(event) {
|
||||
const item = event.data;
|
||||
$("#balance").text(item.balance);
|
||||
if (item.status) {
|
||||
display(true);
|
||||
$("#playername").text(item.playerName);
|
||||
$("#date").text(`${item.date}, ${today.toLocaleDateString("en-US", {year: "numeric", month: "long", day: "numeric"})}`);
|
||||
$("#time").text(item.time);
|
||||
} else if (item.status === false) {
|
||||
display(false);
|
||||
}
|
||||
if (item.success) {
|
||||
loader(false);
|
||||
successScreen(true);
|
||||
} else if (item.success === false) {
|
||||
loader(false);
|
||||
failedScreen(true);
|
||||
}
|
||||
})
|
||||
|
||||
$("button[type=submit]").click(function () {
|
||||
action = $(this).text();
|
||||
});
|
||||
|
||||
$("#confirmButton").click(function() {
|
||||
$.post(`https://${GetParentResourceName()}/sound`);
|
||||
confirmationScreen(false);
|
||||
loader(true);
|
||||
$.post(`https://${GetParentResourceName()}/useATM`, JSON.stringify({
|
||||
action: action,
|
||||
amount: $("#enteredAmount").val()
|
||||
}));
|
||||
$("#enteredAmount").val("");
|
||||
return false;
|
||||
})
|
||||
|
||||
$("#cancelButton").click(function() {
|
||||
$.post(`https://${GetParentResourceName()}/sound`);
|
||||
confirmationScreen(false);
|
||||
loader(true);
|
||||
setTimeout(() => {
|
||||
loader(false);
|
||||
atmDisplay(true);
|
||||
}, 300);
|
||||
return false;
|
||||
})
|
||||
|
||||
$("#atm").submit(function() {
|
||||
$.post(`https://${GetParentResourceName()}/sound`);
|
||||
atmDisplay(false);
|
||||
loader(true);
|
||||
setTimeout(() => {
|
||||
loader(false);
|
||||
confirmationScreen(true);
|
||||
}, 300);
|
||||
return false;
|
||||
})
|
||||
|
||||
$(".mainMenuButton").click(function() {
|
||||
$.post(`https://${GetParentResourceName()}/sound`);
|
||||
successScreen(false);
|
||||
failedScreen(false);
|
||||
loader(true);
|
||||
setTimeout(() => {
|
||||
loader(false);
|
||||
atmDisplay(true);
|
||||
}, 300);
|
||||
return false;
|
||||
})
|
||||
|
||||
$("#closeButton").click(function() {
|
||||
$.post(`https://${GetParentResourceName()}/close`);
|
||||
return;
|
||||
})
|
||||
});
|
||||
212
ND_ATMs/source/ui/style.css
Normal file
212
ND_ATMs/source/ui/style.css
Normal file
@@ -0,0 +1,212 @@
|
||||
body {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
#overlay {
|
||||
display: none;
|
||||
position: absolute;
|
||||
height: 60vh;
|
||||
width: 50vw;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
border-radius: 10px;
|
||||
background-image: linear-gradient(rgb(255, 255, 255), rgb(199, 199, 199));
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#logo {
|
||||
position: absolute;
|
||||
width: 300px;
|
||||
top: 2vh;
|
||||
left: 6vw;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#date {
|
||||
position: absolute;
|
||||
top: 3.5vh;
|
||||
right: 6vw;
|
||||
color: black;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#time {
|
||||
position: absolute;
|
||||
font-weight: 500;
|
||||
top: -0.7vh;
|
||||
right: 6vw;
|
||||
color: black;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
#balance {
|
||||
position: absolute;
|
||||
top: 23vh;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;;
|
||||
font-weight: 500;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
color: black;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#confirmText {
|
||||
position: absolute;
|
||||
top: 26vh;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;;
|
||||
font-weight: 500;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
color: black;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#redline {
|
||||
position: absolute;
|
||||
height: 1vh;
|
||||
width: 80%;
|
||||
top: 9vh;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
background-color: red;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#redbox {
|
||||
position: absolute;
|
||||
height: 5vh;
|
||||
width: 80%;
|
||||
top: 11vh;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
background-color: red;
|
||||
background-image: linear-gradient(rgb(204, 2, 2), rgb(255, 0, 0));
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#playername {
|
||||
position: absolute;
|
||||
top: 13vh;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#welcome {
|
||||
position: absolute;
|
||||
top: 11.5vh;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.input {
|
||||
height: 4vh;
|
||||
width: 7.3vw;
|
||||
background-color: rgb(255, 0, 0);
|
||||
font-weight: 1000;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
margin: auto;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;;
|
||||
transition: 50ms;
|
||||
}
|
||||
|
||||
.input:hover {
|
||||
transition: 50ms;
|
||||
background-color: rgb(214, 2, 2);
|
||||
}
|
||||
|
||||
#enteredAmount {
|
||||
position: absolute;
|
||||
width: 15.8vw;
|
||||
top: 28vh;
|
||||
left: 0;
|
||||
right: 0;
|
||||
color: black;
|
||||
background-color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#withdrawButton {
|
||||
position: absolute;
|
||||
top: 36.5vh;
|
||||
left: 17vw;
|
||||
}
|
||||
|
||||
#depositButton {
|
||||
position: absolute;
|
||||
top: 36.5vh;
|
||||
right: 17vw;
|
||||
}
|
||||
|
||||
.mainMenuButton {
|
||||
position: absolute;
|
||||
width: 10vw;
|
||||
top: 34vh;
|
||||
right: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#closeButton {
|
||||
position: absolute;
|
||||
height: 4.8vh;
|
||||
width: 80%;
|
||||
top: 50vh;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#confirmButton{
|
||||
position: absolute;
|
||||
top: 33vh;
|
||||
left: 17vw;
|
||||
}
|
||||
|
||||
#cancelButton {
|
||||
position: absolute;
|
||||
top: 33vh;
|
||||
right: 17vw;
|
||||
}
|
||||
|
||||
#confirmationScreen {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#loader {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
border: 16px solid #d1d1d1;
|
||||
border-radius: 50%;
|
||||
border-top: 16px solid red;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
Reference in New Issue
Block a user