190 lines
8.2 KiB
HTML
190 lines
8.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ATM</title>
|
|
<!-- <script src="store.js"></script> -->
|
|
<!-- <link rel="stylesheet" href="atm.css" /> -->
|
|
<!--
|
|
Dynamic Resource Loading
|
|
The following script loads CSS and JavaScript files dynamically using the A3API
|
|
This approach is used instead of static HTML imports to work with Arma 3's file system
|
|
-->
|
|
<script>
|
|
Promise.all([
|
|
A3API.RequestFile(
|
|
"forge\\forge_client\\addons\\bank\\ui\\_site\\atm.css",
|
|
),
|
|
A3API.RequestFile(
|
|
"forge\\forge_client\\addons\\bank\\ui\\_site\\store.js",
|
|
),
|
|
A3API.RequestFile(
|
|
"forge\\forge_client\\addons\\bank\\ui\\_site\\atm.js",
|
|
),
|
|
]).then(([css, storeJs, atmJs]) => {
|
|
const style = document.createElement("style");
|
|
style.textContent = css;
|
|
document.head.appendChild(style);
|
|
|
|
const store = document.createElement("script");
|
|
store.text = storeJs;
|
|
document.head.appendChild(store);
|
|
|
|
const atm = document.createElement("script");
|
|
atm.text = atmJs;
|
|
document.head.appendChild(atm);
|
|
});
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="atm-container">
|
|
<div class="atm-screen">
|
|
<!-- Header -->
|
|
<div class="atm-header">
|
|
<div class="atm-logo">💳</div>
|
|
<div class="atm-title">AUTOMATED TELLER</div>
|
|
</div>
|
|
|
|
<!-- Main Content Area -->
|
|
<div class="atm-content" id="atmContent">
|
|
<!-- Welcome Screen -->
|
|
<div class="atm-view" id="welcomeView">
|
|
<div class="welcome-message">
|
|
<div class="welcome-icon">👤</div>
|
|
<h2>Welcome</h2>
|
|
<p>Insert your card to begin</p>
|
|
</div>
|
|
<button class="atm-btn atm-btn-primary" onclick="showView('pinView')">
|
|
Insert Card
|
|
</button>
|
|
</div>
|
|
|
|
<!-- PIN Entry Screen -->
|
|
<div class="atm-view" id="pinView" style="display: none;">
|
|
<div class="pin-entry">
|
|
<h3>Enter PIN</h3>
|
|
<div class="pin-display">
|
|
<span class="pin-dot"></span>
|
|
<span class="pin-dot"></span>
|
|
<span class="pin-dot"></span>
|
|
<span class="pin-dot"></span>
|
|
</div>
|
|
<div class="keypad" id="keypad">
|
|
<!-- Keypad buttons will be generated by JavaScript -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Menu Screen -->
|
|
<div class="atm-view" id="menuView" style="display: none;">
|
|
<div class="account-summary">
|
|
<div class="summary-item">
|
|
<span class="summary-label">Cash</span>
|
|
<span class="summary-value" id="cashBalance">$2,500</span>
|
|
</div>
|
|
<div class="summary-item">
|
|
<span class="summary-label">Bank</span>
|
|
<span class="summary-value" id="bankBalance">$45,750</span>
|
|
</div>
|
|
</div>
|
|
<div class="menu-options">
|
|
<button class="menu-btn" onclick="showView('withdrawView')">
|
|
<span class="menu-text">Withdraw</span>
|
|
</button>
|
|
<button class="menu-btn" onclick="showView('balanceView')">
|
|
<span class="menu-text">Balance</span>
|
|
</button>
|
|
</div>
|
|
<button class="atm-btn atm-btn-secondary" onclick="exitATM()">
|
|
Exit
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Withdraw Screen -->
|
|
<div class="atm-view" id="withdrawView" style="display: none;">
|
|
<h3>Withdraw Cash</h3>
|
|
<div class="withdraw-display">
|
|
<div class="quick-amounts">
|
|
<button class="amount-btn" onclick="withdrawAmount(100)">$100</button>
|
|
<button class="amount-btn" onclick="withdrawAmount(500)">$500</button>
|
|
<button class="amount-btn" onclick="withdrawAmount(1000)">$1,000</button>
|
|
<button class="amount-btn" onclick="withdrawAmount(2000)">$2,000</button>
|
|
</div>
|
|
<div class="custom-amount">
|
|
<label>Custom Amount</label>
|
|
<input type="number" class="amount-input" id="withdrawInput" placeholder="0.00" min="0"
|
|
step="1">
|
|
</div>
|
|
</div>
|
|
<div class="atm-btn-group">
|
|
<button class="atm-btn atm-btn-primary" onclick="withdrawCustom()">
|
|
Withdraw
|
|
</button>
|
|
<button class="atm-btn atm-btn-secondary" onclick="showView('menuView')">
|
|
Back
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Balance Screen -->
|
|
<div class="atm-view" id="balanceView" style="display: none;">
|
|
<h3>Account Balance</h3>
|
|
<div class="balance-display">
|
|
<div class="balance-item">
|
|
<span class="balance-label">Cash on Hand</span>
|
|
<span class="balance-amount" id="cashBalanceDetail">$2,500</span>
|
|
</div>
|
|
<div class="balance-item">
|
|
<span class="balance-label">Bank Account</span>
|
|
<span class="balance-amount" id="bankBalanceDetail">$45,750</span>
|
|
</div>
|
|
<div class="balance-item balance-total">
|
|
<span class="balance-label">Total Assets</span>
|
|
<span class="balance-amount" id="totalBalance">$48,250</span>
|
|
</div>
|
|
</div>
|
|
<button class="atm-btn atm-btn-secondary" onclick="showView('menuView')">
|
|
Back
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Transaction Success Screen -->
|
|
<div class="atm-view" id="successView" style="display: none;">
|
|
<div class="transaction-result success">
|
|
<div class="result-icon">✓</div>
|
|
<h3>Transaction Complete</h3>
|
|
<p id="successMessage">Your transaction was successful</p>
|
|
</div>
|
|
<button class="atm-btn atm-btn-primary" onclick="showView('menuView')">
|
|
Continue
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Transaction Error Screen -->
|
|
<div class="atm-view" id="errorView" style="display: none;">
|
|
<div class="transaction-result error">
|
|
<div class="result-icon">✗</div>
|
|
<h3>Transaction Failed</h3>
|
|
<p id="errorMessage">An error occurred</p>
|
|
</div>
|
|
<button class="atm-btn atm-btn-secondary" onclick="goBackFromError()">
|
|
Back
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="atm-footer">
|
|
<div class="footer-text">Secure Banking • 24/7 Access</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <script src="atm.js"></script> -->
|
|
</body>
|
|
|
|
</html>
|