256 lines
12 KiB
HTML
256 lines
12 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>
|
|
<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\\actor\\ui\\_site\\atm.css",
|
|
),
|
|
A3API.RequestFile(
|
|
"forge\\forge_client\\addons\\actor\\ui\\_site\\atm.js",
|
|
),
|
|
]).then(([css, js]) => {
|
|
const style = document.createElement("style");
|
|
style.textContent = css;
|
|
document.head.appendChild(style);
|
|
|
|
const script = document.createElement("script");
|
|
script.text = js;
|
|
document.head.appendChild(script);
|
|
});
|
|
</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">
|
|
<button class="key-btn" onclick="enterPin('1')">1</button>
|
|
<button class="key-btn" onclick="enterPin('2')">2</button>
|
|
<button class="key-btn" onclick="enterPin('3')">3</button>
|
|
<button class="key-btn" onclick="enterPin('4')">4</button>
|
|
<button class="key-btn" onclick="enterPin('5')">5</button>
|
|
<button class="key-btn" onclick="enterPin('6')">6</button>
|
|
<button class="key-btn" onclick="enterPin('7')">7</button>
|
|
<button class="key-btn" onclick="enterPin('8')">8</button>
|
|
<button class="key-btn" onclick="enterPin('9')">9</button>
|
|
<button class="key-btn key-clear" onclick="clearPin()">Clear</button>
|
|
<button class="key-btn" onclick="enterPin('0')">0</button>
|
|
<button class="key-btn key-enter" onclick="submitPin()">Enter</button>
|
|
</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-icon">💵</span> -->
|
|
<span class="menu-text">Withdraw</span>
|
|
</button>
|
|
<button class="menu-btn" onclick="showView('depositView')">
|
|
<!-- <span class="menu-icon">💰</span> -->
|
|
<span class="menu-text">Deposit</span>
|
|
</button>
|
|
<button class="menu-btn" onclick="showView('transferView')">
|
|
<!-- <span class="menu-icon">↔️</span> -->
|
|
<span class="menu-text">Transfer</span>
|
|
</button>
|
|
<button class="menu-btn" onclick="showView('balanceView')">
|
|
<!-- <span class="menu-icon">📊</span> -->
|
|
<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>
|
|
|
|
<!-- Deposit Screen -->
|
|
<div class="atm-view" id="depositView" style="display: none;">
|
|
<h3>Deposit Cash</h3>
|
|
<div class="deposit-display">
|
|
<div class="deposit-info">
|
|
<p>Available Cash: <span id="availableCash">$2,500</span></p>
|
|
</div>
|
|
<div class="custom-amount">
|
|
<label>Amount to Deposit</label>
|
|
<input type="number" class="amount-input" id="depositInput" placeholder="0.00" min="0"
|
|
step="1">
|
|
</div>
|
|
</div>
|
|
<div class="atm-btn-group">
|
|
<button class="atm-btn atm-btn-primary" onclick="depositAmount()">
|
|
Deposit
|
|
</button>
|
|
<button class="atm-btn atm-btn-full" onclick="depositAll()">
|
|
Deposit All Cash
|
|
</button>
|
|
<button class="atm-btn atm-btn-secondary" onclick="showView('menuView')">
|
|
Back
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Transfer Screen -->
|
|
<div class="atm-view" id="transferView" style="display: none;">
|
|
<h3>Transfer Funds</h3>
|
|
<div class="transfer-display">
|
|
<div class="transfer-form">
|
|
<div class="form-field">
|
|
<label>To Player ID</label>
|
|
<input type="text" class="text-input" id="transferPlayerId"
|
|
placeholder="Enter player ID">
|
|
</div>
|
|
<div class="form-field">
|
|
<label>Amount</label>
|
|
<input type="number" class="amount-input" id="transferAmount" placeholder="0.00" min="0"
|
|
step="1">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="atm-btn-group">
|
|
<button class="atm-btn atm-btn-primary" onclick="transferFunds()">
|
|
Transfer
|
|
</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="showView('menuView')">
|
|
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>
|