397 lines
15 KiB
HTML
397 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de" >
|
|
<!-- Header -->
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link rel="stylesheet" href="package://assets/css/atm/atm.css">
|
|
<audio id="click">
|
|
<source src="package://assets/sound/atm/click.ogg" type="audio/ogg">
|
|
</audio>
|
|
</head>
|
|
<!-- Content -->
|
|
|
|
<body>
|
|
<div class="atm">
|
|
<div class="content">
|
|
<div class="button">
|
|
<div class="b-left">
|
|
<div class="b" onclick="tosite(2)"></div>
|
|
<div class="b" onclick="tosite(3)"></div>
|
|
<div class="b" onclick="tosite(4)"></div>
|
|
<div class="b" onclick="tosite(5)"></div>
|
|
</div>
|
|
<div class="b-right">
|
|
<div class="b2" onclick="tosite(6)"></div>
|
|
<div class="b2" onclick="tosite(7)"></div>
|
|
<div class="b2" onclick="ExitATM();"></div>
|
|
<div class="b2"></div>
|
|
</div>
|
|
</div>
|
|
<div class="screen">
|
|
|
|
<div class="site1 show">
|
|
<div class="header">
|
|
<div class="title">BANKAUTOMAT - SAN ANDREAS</div>
|
|
<div class="menus">
|
|
<div class="bg-box1">Einzahlen</div>
|
|
<div class="bg-box2">Auszahlen</div>
|
|
<div class="bg-box3">Überweisen</div>
|
|
<div class="bg-box4">Kontostand</div>
|
|
<div class="bg-box5">Informationen</div>
|
|
<div class="bg-box6">Verlauf</div>
|
|
<div class="bg-box7">Karte Auswerfen</div>
|
|
<div class="bg-box8"></div>
|
|
</div>
|
|
</div>
|
|
<div class="circle"></div>
|
|
<div class="circle2"></div>
|
|
</div>
|
|
|
|
<div class="site2 hidden">
|
|
<div class="header">
|
|
<div class="title">BANKAUTOMAT - SAN ANDREAS</div>
|
|
<div class="sub-title">
|
|
Geld Einzahlen
|
|
</div>
|
|
<input class="input" name="einzahlen" type="number" placeholder="Betrag">
|
|
</div>
|
|
<div class="back">Zurück</div>
|
|
<div class="circle"></div>
|
|
<div class="circle2"></div>
|
|
|
|
<div class="helper">
|
|
<div class="button">
|
|
<div class="b-left">
|
|
<div class="b" onclick="tosite(2)"></div>
|
|
<div class="b"></div>
|
|
<div class="b"></div>
|
|
<div class="b"></div>
|
|
</div>
|
|
<div class="b-right">
|
|
<div class="b2"></div>
|
|
<div class="b2"></div>
|
|
<div class="b2"></div>
|
|
<div class="b2"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="site3 hidden">
|
|
<div class="header">
|
|
<div class="title">BANKAUTOMAT - SAN ANDREAS</div>
|
|
<div class="sub-title">
|
|
Geld Auszahlen
|
|
</div>
|
|
<input class="input" name="auszahlen" type="number" placeholder="Betrag">
|
|
</div>
|
|
<div class="back2">Zurück</div>
|
|
<div class="circle"></div>
|
|
<div class="circle2"></div>
|
|
<div class="helper">
|
|
<div class="button">
|
|
<div class="b-left">
|
|
<div class="b"></div>
|
|
<div class="b" onclick="tosite(3)"></div>
|
|
<div class="b"></div>
|
|
<div class="b"></div>
|
|
</div>
|
|
<div class="b-right">
|
|
<div class="b2"></div>
|
|
<div class="b2"></div>
|
|
<div class="b2"></div>
|
|
<div class="b2"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="site4 hidden">
|
|
<div class="header">
|
|
<div class="title">BANKAUTOMAT - SAN ANDREAS</div>
|
|
<div class="sub-title">
|
|
Überweisen
|
|
</div>
|
|
<input class="input" name="ueberweisen_kontonummer" type="number" placeholder="Kontonummer" style="margin-bottom:1vw;">
|
|
<input class="input" name="ueberweisen_betrag" type="number" placeholder="Betrag">
|
|
</div>
|
|
<div class="back3">Zurück</div>
|
|
<div class="circle"></div>
|
|
<div class="circle2"></div>
|
|
<div class="helper">
|
|
<div class="button">
|
|
<div class="b-left">
|
|
<div class="b"></div>
|
|
<div class="b"></div>
|
|
<div class="b" onclick="tosite(4)"></div>
|
|
<div class="b"></div>
|
|
</div>
|
|
<div class="b-right">
|
|
<div class="b2"></div>
|
|
<div class="b2"></div>
|
|
<div class="b2"></div>
|
|
<div class="b2"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="site5 hidden">
|
|
<div class="header">
|
|
<div class="title">BANKAUTOMAT - SAN ANDREAS</div>
|
|
<div class="sub-title">
|
|
Kontostand
|
|
</div>
|
|
<div class="input2">Kontostand :
|
|
<span class="kstand">0</span>$
|
|
</div>
|
|
|
|
</div>
|
|
<div class="back4">Zurück</div>
|
|
<div class="circle"></div>
|
|
<div class="circle2"></div>
|
|
<div class="helper">
|
|
<div class="button">
|
|
<div class="b-left">
|
|
<div class="b"></div>
|
|
<div class="b"></div>
|
|
<div class="b"></div>
|
|
<div class="b" onclick="tosite(5)"></div>
|
|
</div>
|
|
<div class="b-right">
|
|
<div class="b2"></div>
|
|
<div class="b2"></div>
|
|
<div class="b2"></div>
|
|
<div class="b2"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="site6 hidden">
|
|
<div class="header">
|
|
<div class="title">BANKAUTOMAT - SAN ANDREAS</div>
|
|
<div class="sub-title">
|
|
Informationen
|
|
</div>
|
|
<div class="input3">Konto-Informationen : <br>
|
|
<span class="kinfo">Keine Informationen Vorhanden</span>
|
|
</div>
|
|
</div>
|
|
<div class="back5">Zurück</div>
|
|
<div class="circle"></div>
|
|
<div class="circle2"></div>
|
|
<div class="helper">
|
|
<div class="button">
|
|
<div class="b-left">
|
|
<div class="b"></div>
|
|
<div class="b"></div>
|
|
<div class="b"></div>
|
|
<div class="b"></div>
|
|
</div>
|
|
<div class="b-right">
|
|
<div class="b2" onclick="tosite(6)"></div>
|
|
<div class="b2"></div>
|
|
<div class="b2"></div>
|
|
<div class="b2"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="site7 hidden">
|
|
<div class="header">
|
|
<div class="title">BANKAUTOMAT - SAN ANDREAS</div>
|
|
<div class="sub-title">
|
|
Verlauf
|
|
</div>
|
|
<div class="input3">Konto-Verlauf : <br>
|
|
<span class="kverlauf">Keine Verläufe Vorhanden</span>
|
|
</div>
|
|
</div>
|
|
<div class="back6">Zurück</div>
|
|
<div class="circle"></div>
|
|
<div class="circle2"></div>
|
|
<div class="helper">
|
|
<div class="button">
|
|
<div class="b-left">
|
|
<div class="b"></div>
|
|
<div class="b"></div>
|
|
<div class="b"></div>
|
|
<div class="b"></div>
|
|
</div>
|
|
<div class="b-right">
|
|
<div class="b2"></div>
|
|
<div class="b2" onclick="tosite(7)"></div>
|
|
<div class="b2"></div>
|
|
<div class="b2"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="site8 hidden">
|
|
<div class="header">
|
|
<div class="title">BANKAUTOMAT - SAN ANDREAS</div>
|
|
<div class="sub-title">
|
|
Geld Auszahlen
|
|
</div>
|
|
<input class="input" type="number" placeholder="Betrag">
|
|
</div>
|
|
<div class="back7">Zurück</div>
|
|
<div class="circle"></div>
|
|
<div class="circle2"></div>
|
|
<div class="helper">
|
|
<div class="button">
|
|
<div class="b-left">
|
|
<div class="b"></div>
|
|
<div class="b"></div>
|
|
<div class="b"></div>
|
|
<div class="b"></div>
|
|
</div>
|
|
<div class="b-right">
|
|
<div class="b2"></div>
|
|
<div class="b2"></div>
|
|
<div class="b2" onclick="tosite(8)"></div>
|
|
<div class="b2" ></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="hidden" style="display:none"></div>
|
|
<div class="numpad">
|
|
<div class="randombox"></div>
|
|
<div class="bz1">
|
|
<div class="b3" onclick="addToCurrentInput(1);">1</div>
|
|
<div class="b3" onclick="addToCurrentInput(4);">4</div>
|
|
<div class="b3" onclick="addToCurrentInput(7);">7</div></div>
|
|
<div class="bz2">
|
|
<div class="b3" onclick="addToCurrentInput(2);">2</div>
|
|
<div class="b3" onclick="addToCurrentInput(5);">5</div>
|
|
<div class="b3" onclick="addToCurrentInput(8);">8</div>
|
|
<div class="b3" onclick="addToCurrentInput(0);">0</div></div>
|
|
<div class="bz3">
|
|
<div class="b3" onclick="addToCurrentInput(3);">3</div>
|
|
<div class="b3" onclick="addToCurrentInput(6);">6</div>
|
|
<div class="b3" onclick="addToCurrentInput(9);">9</div></div>
|
|
<div class="bz5">
|
|
<div class="b3e" onclick="cancel();">ABBRUCH</div>
|
|
<div class="b4e" onclick="submit();">BESTÄTIGUNG</div></div>
|
|
<div class="bz4">
|
|
<div class="b4"></div>
|
|
<div class="bz6">
|
|
<div class="b7"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div id="invisible" style="display:none"></div>
|
|
<script src="package://assets/js/jquery-3.1.1.min.js"></script>
|
|
<script src="package://assets/js/bootstrap.min.js"></script>
|
|
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
|
|
<script type="text/javascript">
|
|
|
|
var currentSite;
|
|
|
|
function tosite(site) {
|
|
if($('.hidden').is(":hidden")) {
|
|
$('.site1').toggleClass("hidden");
|
|
$('.site' + site).toggleClass("hidden");
|
|
$('.site' + site).toggleClass("show");
|
|
currentSite = site;
|
|
console.log(currentSite);
|
|
document.getElementsByClassName('input')[0].value = null;
|
|
document.getElementsByClassName('input')[1].value = null;
|
|
playClick();
|
|
}
|
|
}
|
|
|
|
function playClick() {
|
|
var audio = document.getElementById("click");
|
|
audio.play();
|
|
}
|
|
|
|
function receiveInformation(Kn, Ks, verlauf)
|
|
{
|
|
document.getElementsByClassName("kstand")[0].innerHTML = Ks;
|
|
document.getElementsByClassName("kinfo")[0].innerHTML = "Kontonummer: " + Kn;
|
|
document.getElementsByClassName("kverlauf")[0].innerHTML = verlauf;
|
|
}
|
|
|
|
function submit()
|
|
{
|
|
//Geld einzahlen
|
|
if (currentSite == 2) {
|
|
if (getCurrentInputValue() != undefined && getCurrentInputValue() != null && getCurrentInputValue() != "") {
|
|
console.log(getCurrentInputValue());
|
|
mp.trigger("CEF:atmAction", 0, getCurrentInputValue(), 0);
|
|
}
|
|
}
|
|
//Geld auszahlen
|
|
else if (currentSite == 3) {
|
|
if (getCurrentInputValue() != undefined && getCurrentInputValue() != null && getCurrentInputValue() != "") {
|
|
console.log(getCurrentInputValue());
|
|
mp.trigger("CEF:atmAction", 1, getCurrentInputValue(), 0);
|
|
}
|
|
}
|
|
//Geld überweisen
|
|
else if (currentSite == 4) {
|
|
var Value = getCurrentInputValue();
|
|
if (Value != undefined && Value != null && Value != "") {
|
|
console.log(Value[0] + " " + Value[1]);
|
|
mp.trigger("CEF:atmAction", 2, Value[0], Value[1]);
|
|
}
|
|
}
|
|
}
|
|
|
|
function cancel() {
|
|
document.getElementsByName('einzahlen')[0].value = null;
|
|
document.getElementsByName('auszahlen')[0].value = null;
|
|
}
|
|
|
|
function getCurrentInputValue() {
|
|
if (currentSite == 2) {
|
|
return document.getElementsByName('einzahlen')[0].value;
|
|
}
|
|
else if (currentSite == 3) {
|
|
return document.getElementsByName('auszahlen')[0].value;
|
|
}
|
|
else if (currentSite == 4) {
|
|
var kontonum = document.getElementsByName('ueberweisen_kontonummer')[0].value;
|
|
var betrag = document.getElementsByName('ueberweisen_betrag')[0].value;
|
|
if (betrag != undefined && betrag != null && betrag != "" && kontonum != "" && kontonum != undefined && kontonum != null) {
|
|
var array = [kontonum, betrag];
|
|
return array;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
function addToCurrentInput(number) {
|
|
if (currentSite == 2) {
|
|
document.getElementsByName('einzahlen')[0].value = document.getElementsByName('einzahlen')[0].value + '' + number;
|
|
}
|
|
else if (currentSite == 3) {
|
|
document.getElementsByName('auszahlen')[0].value = document.getElementsByName('auszahlen')[0].value + '' + number;
|
|
}
|
|
}
|
|
|
|
function ExitATM() {
|
|
playClick();
|
|
mp.trigger("CEF:closeATM");
|
|
}
|
|
|
|
function action(ac)
|
|
{
|
|
mp.trigger("atmAction", ac);
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|