238 lines
11 KiB
HTML
238 lines
11 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Banking Services</title>
|
|
<!-- <link rel="stylesheet" href="style.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\\style.css",
|
|
),
|
|
A3API.RequestFile(
|
|
"forge\\forge_client\\addons\\bank\\ui\\_site\\script.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="bank-container">
|
|
<!-- Header Section -->
|
|
<div class="bank-header">
|
|
<div class="bank-logo">
|
|
<!-- <div class="logo-icon">💳</div> -->
|
|
</div>
|
|
<div class="bank-info">
|
|
<h1 class="bank-title">Banking Services</h1>
|
|
<p class="bank-subtitle">Secure Financial Management</p>
|
|
</div>
|
|
<div class="header-actions">
|
|
<button class="action-btn close-btn">Close</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="bank-content">
|
|
<!-- Left Panel - Accounts -->
|
|
<div class="bank-panel">
|
|
<div class="panel-header">
|
|
<h2 class="panel-title">Your Accounts</h2>
|
|
</div>
|
|
<div class="panel-content">
|
|
<!-- Cash Account -->
|
|
<div class="account-card active" data-account="cash">
|
|
<div class="account-header">
|
|
<!-- <span class="account-icon">💵</span> -->
|
|
<div class="account-info">
|
|
<span class="account-name">Cash</span>
|
|
<span class="account-type">Physical Currency</span>
|
|
</div>
|
|
</div>
|
|
<div class="account-balance">
|
|
<span class="balance-label">Available</span>
|
|
<span class="balance-amount">$2,500</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bank Account -->
|
|
<div class="account-card" data-account="bank">
|
|
<div class="account-header">
|
|
<!-- <span class="account-icon">🏦</span> -->
|
|
<div class="account-info">
|
|
<span class="account-name">Bank Account</span>
|
|
<span class="account-type">Savings • Protected</span>
|
|
</div>
|
|
</div>
|
|
<div class="account-balance">
|
|
<span class="balance-label">Available</span>
|
|
<span class="balance-amount">$45,750</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Organization Account -->
|
|
<div class="account-card" data-account="org">
|
|
<div class="account-header">
|
|
<span class="account-icon">🏢</span>
|
|
<div class="account-info">
|
|
<span class="account-name">Organization</span>
|
|
<span class="account-type">Shared • View Only</span>
|
|
</div>
|
|
</div>
|
|
<div class="account-balance">
|
|
<span class="balance-label">Available</span>
|
|
<span class="balance-amount">$125,000</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Center Panel - Actions -->
|
|
<div class="bank-panel panel-main">
|
|
<div class="panel-header">
|
|
<h2 class="panel-title">Quick Actions</h2>
|
|
</div>
|
|
<div class="panel-content">
|
|
<!-- Transfer Form -->
|
|
<div class="action-section">
|
|
<h3 class="section-title">Transfer Funds</h3>
|
|
<div class="transfer-form">
|
|
<div class="form-group">
|
|
<label class="form-label">From</label>
|
|
<select class="form-select" id="transferFrom">
|
|
<option value="cash">Cash ($2,500)</option>
|
|
<option value="bank" selected>Bank Account ($45,750)</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">To</label>
|
|
<select class="form-select" id="transferTo">
|
|
<option value="cash">Cash</option>
|
|
<option value="bank">Bank Account</option>
|
|
<option value="player">Player</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Amount</label>
|
|
<input type="number" class="form-input" id="transferAmount" placeholder="0.00" min="0"
|
|
step="0.01">
|
|
</div>
|
|
<div class="form-group" id="playerIdGroup" style="display: none;">
|
|
<label class="form-label">Player ID</label>
|
|
<input type="text" class="form-input" id="playerId" placeholder="Enter player ID">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="action-section">
|
|
<h3 class="section-title">Quick Access</h3>
|
|
<div class="quick-actions">
|
|
<button class="quick-action-btn" data-action="deposit">
|
|
<!-- <span class="quick-action-icon">⬇️</span> -->
|
|
<span class="quick-action-label">Deposit All Cash</span>
|
|
</button>
|
|
<button class="quick-action-btn" data-action="withdraw">
|
|
<!-- <span class="quick-action-icon">⬆️</span> -->
|
|
<span class="quick-action-label">Withdraw</span>
|
|
</button>
|
|
<button class="quick-action-btn" id="transferBtn">
|
|
<!-- <span class="quick-action-icon">➡️</span> -->
|
|
<span class="quick-action-label">Transfer Funds</span>
|
|
</button>
|
|
<button class="quick-action-btn" data-action="statement">
|
|
<!-- <span class="quick-action-icon">📄</span> -->
|
|
<span class="quick-action-label">View Statement</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Panel - Recent Transactions -->
|
|
<div class="bank-panel">
|
|
<div class="panel-header">
|
|
<h2 class="panel-title">Recent Transactions</h2>
|
|
</div>
|
|
<div class="panel-content">
|
|
<div class="transaction-list">
|
|
<div class="transaction-item">
|
|
<div class="transaction-header">
|
|
<span class="transaction-type deposit">Deposit</span>
|
|
<span class="transaction-amount positive">+$5,000</span>
|
|
</div>
|
|
<div class="transaction-details">
|
|
<span class="transaction-desc">From Cash</span>
|
|
<span class="transaction-time">2 hours ago</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="transaction-item">
|
|
<div class="transaction-header">
|
|
<span class="transaction-type withdrawal">Withdrawal</span>
|
|
<span class="transaction-amount negative">-$1,200</span>
|
|
</div>
|
|
<div class="transaction-details">
|
|
<span class="transaction-desc">To Cash</span>
|
|
<span class="transaction-time">5 hours ago</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="transaction-item">
|
|
<div class="transaction-header">
|
|
<span class="transaction-type transfer">Transfer</span>
|
|
<span class="transaction-amount negative">-$500</span>
|
|
</div>
|
|
<div class="transaction-details">
|
|
<span class="transaction-desc">To Player #1234</span>
|
|
<span class="transaction-time">1 day ago</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="transaction-item">
|
|
<div class="transaction-header">
|
|
<span class="transaction-type deposit">Deposit</span>
|
|
<span class="transaction-amount positive">+$10,000</span>
|
|
</div>
|
|
<div class="transaction-details">
|
|
<span class="transaction-desc">Mission Reward</span>
|
|
<span class="transaction-time">2 days ago</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="transaction-item">
|
|
<div class="transaction-header">
|
|
<span class="transaction-type transfer">Transfer</span>
|
|
<span class="transaction-amount positive">+$2,000</span>
|
|
</div>
|
|
<div class="transaction-details">
|
|
<span class="transaction-desc">From Player #5678</span>
|
|
<span class="transaction-time">3 days ago</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <script src="script.js"></script> -->
|
|
</body>
|
|
|
|
</html>
|