ATM MENU INTERFACE - COMPLETE CODE
DOCUMENTATION
Project Overview
A fully functional retro-futuristic terminal-style ATM interface built with HTML, CSS,
and JavaScript. Features authentic cyberpunk aesthetics with neon green accents,
glowing effects, and smooth animations.
Default PIN: 1234
Starting Balance: $5000
FILE 1: HTML ([Link])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NEXUS ATM - Retro Terminal Interface</title>
<link rel="stylesheet" href="[Link]">
<link href="[Link]
family=IBM+Plex+Mono:wght@400;600;700&family=Space+Mono:wght@400;700&display=s
rel="stylesheet">
</head>
<body>
<div class="atm-container">
<div class="atm-machine">
<!-- Header -->
<div class="atm-header">
<h1 class="atm-title">NEXUS ATM</h1>
<div class="atm-logo">⬢</div>
</div>
<!-- Main Display -->
<div class="atm-display">
<div id="screen-content" class="screen-content">
<!-- Dynamic content will be inserted here by JavaScript
-->
</div>
</div>
<!-- Keypad (visible only on login screen) -->
<div id="keypad-section" class="atm-keypad" style="display:
none;">
<div class="keypad-grid">
<button class="keypad-button"
onclick="handlePinInput('1')">1</button>
<button class="keypad-button"
onclick="handlePinInput('2')">2</button>
<button class="keypad-button"
onclick="handlePinInput('3')">3</button>
<button class="keypad-button"
onclick="handlePinInput('4')">4</button>
<button class="keypad-button"
onclick="handlePinInput('5')">5</button>
<button class="keypad-button"
onclick="handlePinInput('6')">6</button>
<button class="keypad-button"
onclick="handlePinInput('7')">7</button>
<button class="keypad-button"
onclick="handlePinInput('8')">8</button>
<button class="keypad-button"
onclick="handlePinInput('9')">9</button>
<button class="keypad-button"
onclick="handlePinInput('0')">0</button>
<button class="keypad-button clear"
onclick="handleClear()">CLR</button>
<button class="keypad-button enter"
onclick="handleLogin()">ENT</button>
</div>
</div>
<!-- Footer -->
<div class="atm-footer">
<div class="footer-text">THANK YOU FOR BANKING WITH
NEXUS</div>
</div>
</div>
</div>
<script src="[Link]"></script>
</body>
</html>
FILE 2: CSS ([Link])
/* ============================================
RETRO-FUTURISTIC ATM INTERFACE STYLES
Design Philosophy: Terminal-inspired cyberpunk aesthetic
with neon green accents and authentic ATM experience
============================================ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%);
font-family: 'IBM Plex Mono', monospace;
color: #00ff41;
overflow: hidden;
height: 100vh;
}
/* ============================================
MAIN CONTAINER & MACHINE STRUCTURE
============================================ */
.atm-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%);
}
.atm-machine {
width: 100%;
max-width: 500px;
background: linear-gradient(145deg, #0f1729, #1a2847);
border: 3px solid #00ff41;
border-radius: 20px;
box-shadow:
0 0 40px rgba(0, 255, 65, 0.3),
0 0 80px rgba(0, 217, 255, 0.1),
inset 0 0 20px rgba(0, 255, 65, 0.05);
overflow: hidden;
animation: machineGlow 3s ease-in-out infinite;
}
@keyframes machineGlow {
0%, 100% {
box-shadow:
0 0 40px rgba(0, 255, 65, 0.3),
0 0 80px rgba(0, 217, 255, 0.1),
inset 0 0 20px rgba(0, 255, 65, 0.05);
}
50% {
box-shadow:
0 0 50px rgba(0, 255, 65, 0.4),
0 0 100px rgba(0, 217, 255, 0.15),
inset 0 0 30px rgba(0, 255, 65, 0.08);
}
}
/* ============================================
HEADER SECTION
============================================ */
.atm-header {
background: linear-gradient(90deg, #00ff41 0%, #00d9ff 100%);
padding: 20px;
text-align: center;
position: relative;
overflow: hidden;
}
.atm-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: repeating-linear-gradient(
0deg,
rgba(0, 0, 0, 0.15),
rgba(0, 0, 0, 0.15) 1px,
transparent 1px,
transparent 2px
);
pointer-events: none;
animation: scanlines 8s linear infinite;
}
@keyframes scanlines {
0% {
transform: translateY(0);
}
100% {
transform: translateY(10px);
}
}
.atm-title {
font-family: 'Space Mono', monospace;
font-size: 32px;
font-weight: 700;
color: #0a0e27;
text-transform: uppercase;
letter-spacing: 3px;
margin: 0;
text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.3);
position: relative;
z-index: 1;
}
.atm-logo {
font-size: 24px;
color: #0a0e27;
margin-top: 10px;
animation: pulse 2s ease-in-out infinite;
position: relative;
z-index: 1;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
}
/* ============================================
DISPLAY SCREEN
============================================ */
.atm-display {
background: linear-gradient(135deg, #0a0e27 0%, #0f1a2e 100%);
padding: 30px;
min-height: 400px;
border-bottom: 2px solid #00ff41;
position: relative;
overflow: hidden;
}
.atm-display::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: repeating-linear-gradient(
0deg,
rgba(0, 255, 65, 0.03),
rgba(0, 255, 65, 0.03) 1px,
transparent 1px,
transparent 2px
);
pointer-events: none;
animation: displayScanlines 6s linear infinite;
}
@keyframes displayScanlines {
0% {
transform: translateY(0);
}
100% {
transform: translateY(4px);
}
}
.screen-content {
position: relative;
z-index: 2;
}
.screen-header {
font-size: 18px;
font-weight: 700;
color: #00ff41;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 20px;
text-shadow: 0 0 10px rgba(0, 255, 65, 0.5);
border-bottom: 2px solid #00ff41;
padding-bottom: 10px;
}
.screen-body {
color: #00ff41;
}
.status-line {
font-size: 14px;
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 1px;
opacity: 0.9;
}
.divider {
height: 1px;
background: linear-gradient(90deg, transparent, #00ff41, transparent);
margin: 15px 0;
opacity: 0.5;
}
/* ============================================
INPUT SECTIONS
============================================ */
.input-section {
margin-bottom: 20px;
}
.label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 8px;
color: #00d9ff;
font-weight: 600;
}
.pin-display {
font-size: 28px;
letter-spacing: 8px;
background: rgba(0, 255, 65, 0.1);
border: 2px solid #00ff41;
padding: 15px;
text-align: center;
font-weight: 700;
text-shadow: 0 0 10px rgba(0, 255, 65, 0.6);
border-radius: 5px;
animation: pinGlow 1s ease-in-out infinite;
}
@keyframes pinGlow {
0%, 100% {
box-shadow: inset 0 0 10px rgba(0, 255, 65, 0.2);
}
50% {
box-shadow: inset 0 0 20px rgba(0, 255, 65, 0.4);
}
}
.amount-input {
width: 100%;
padding: 12px;
background: rgba(0, 255, 65, 0.05);
border: 2px solid #00ff41;
color: #00ff41;
font-family: 'IBM Plex Mono', monospace;
font-size: 16px;
text-align: center;
border-radius: 5px;
text-transform: uppercase;
letter-spacing: 1px;
}
.amount-input::placeholder {
color: rgba(0, 255, 65, 0.5);
}
.amount-input:focus {
outline: none;
box-shadow: 0 0 15px rgba(0, 255, 65, 0.6), inset 0 0 10px rgba(0, 255,
65, 0.2);
}
/* ============================================
MESSAGE DISPLAYS
============================================ */
.error-message {
background: rgba(255, 50, 50, 0.1);
border: 2px solid #ff3232;
color: #ff6b6b;
padding: 12px;
margin-top: 15px;
text-align: center;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: 5px;
text-shadow: 0 0 5px rgba(255, 50, 50, 0.5);
animation: errorFlash 0.5s ease-in-out;
}
@keyframes errorFlash {
0%, 100% {
box-shadow: 0 0 10px rgba(255, 50, 50, 0.3);
}
50% {
box-shadow: 0 0 20px rgba(255, 50, 50, 0.6);
}
}
.success-message {
background: rgba(0, 255, 65, 0.1);
border: 2px solid #00ff41;
color: #00ff41;
padding: 12px;
margin-top: 15px;
text-align: center;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: 5px;
text-shadow: 0 0 10px rgba(0, 255, 65, 0.6);
animation: successPulse 0.6s ease-in-out;
}
@keyframes successPulse {
0%, 100% {
box-shadow: 0 0 10px rgba(0, 255, 65, 0.3);
}
50% {
box-shadow: 0 0 25px rgba(0, 255, 65, 0.7);
}
}
/* ============================================
MENU & BUTTON LAYOUTS
============================================ */
.menu-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 20px;
}
.button-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 20px 0;
}
.button-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 20px;
}
/* ============================================
BUTTON STYLES
============================================ */
.menu-button,
.action-button,
.quick-button,
.keypad-button {
font-family: 'IBM Plex Mono', monospace;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
padding: 12px;
border: 2px solid #00ff41;
background: rgba(0, 255, 65, 0.05);
color: #00ff41;
cursor: pointer;
border-radius: 5px;
transition: all 0.2s ease;
text-shadow: 0 0 5px rgba(0, 255, 65, 0.4);
box-shadow: 0 0 10px rgba(0, 255, 65, 0.2);
}
.menu-button:hover,
.action-button:hover,
.quick-button:hover,
.keypad-button:hover {
background: rgba(0, 255, 65, 0.15);
box-shadow: 0 0 20px rgba(0, 255, 65, 0.5), inset 0 0 10px rgba(0, 255,
65, 0.2);
transform: scale(1.05);
}
.menu-button:active,
.action-button:active,
.quick-button:active,
.keypad-button:active {
transform: scale(0.98);
box-shadow: 0 0 10px rgba(0, 255, 65, 0.3), inset 0 0 15px rgba(0, 255,
65, 0.3);
}
.[Link] {
border-color: #ff3232;
color: #ff6b6b;
text-shadow: 0 0 5px rgba(255, 50, 50, 0.4);
box-shadow: 0 0 10px rgba(255, 50, 50, 0.2);
}
.[Link]:hover {
background: rgba(255, 50, 50, 0.15);
box-shadow: 0 0 20px rgba(255, 50, 50, 0.5), inset 0 0 10px rgba(255,
50, 50, 0.2);
}
.[Link] {
border-color: #ff3232;
color: #ff6b6b;
text-shadow: 0 0 5px rgba(255, 50, 50, 0.4);
box-shadow: 0 0 10px rgba(255, 50, 50, 0.2);
}
.[Link]:hover {
background: rgba(255, 50, 50, 0.15);
box-shadow: 0 0 20px rgba(255, 50, 50, 0.5), inset 0 0 10px rgba(255,
50, 50, 0.2);
}
.[Link] {
border-color: #00d9ff;
color: #00d9ff;
text-shadow: 0 0 5px rgba(0, 217, 255, 0.4);
box-shadow: 0 0 10px rgba(0, 217, 255, 0.2);
}
.[Link]:hover {
background: rgba(0, 217, 255, 0.15);
box-shadow: 0 0 20px rgba(0, 217, 255, 0.5), inset 0 0 10px rgba(0, 217,
255, 0.2);
}
.[Link] {
border-color: #00ff41;
color: #00ff41;
grid-column: span 1;
font-weight: 700;
}
.[Link]:hover {
background: rgba(0, 255, 65, 0.2);
box-shadow: 0 0 25px rgba(0, 255, 65, 0.6), inset 0 0 15px rgba(0, 255,
65, 0.3);
}
/* ============================================
INFORMATION DISPLAY
============================================ */
.info-section {
margin-bottom: 20px;
}
.info-label {
font-size: 12px;
color: #00d9ff;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 8px;
font-weight: 600;
}
.info-value {
font-size: 16px;
color: #00ff41;
font-weight: 600;
padding: 10px;
background: rgba(0, 255, 65, 0.05);
border-left: 3px solid #00ff41;
text-shadow: 0 0 10px rgba(0, 255, 65, 0.4);
}
.balance-display {
font-size: 36px;
font-weight: 700;
color: #00ff41;
text-align: center;
padding: 20px;
background: rgba(0, 255, 65, 0.08);
border: 2px solid #00ff41;
border-radius: 5px;
text-shadow: 0 0 15px rgba(0, 255, 65, 0.6);
letter-spacing: 2px;
}
/* ============================================
HISTORY DISPLAY
============================================ */
.history-display {
background: rgba(0, 255, 65, 0.05);
border: 2px solid #00ff41;
border-radius: 5px;
padding: 15px;
max-height: 200px;
overflow-y: auto;
margin-bottom: 20px;
}
.history-item {
font-size: 11px;
color: #00ff41;
padding: 8px;
border-bottom: 1px solid rgba(0, 255, 65, 0.2);
text-transform: uppercase;
letter-spacing: 0.5px;
word-break: break-word;
}
.history-item:last-child {
border-bottom: none;
}
/* ============================================
KEYPAD SECTION
============================================ */
.atm-keypad {
background: linear-gradient(145deg, #0f1729, #1a2847);
padding: 20px;
border-top: 2px solid #00ff41;
}
.keypad-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.keypad-button {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 700;
}
/* ============================================
FOOTER SECTION
============================================ */
.atm-footer {
background: linear-gradient(90deg, #00d9ff 0%, #00ff41 100%);
padding: 15px;
text-align: center;
border-top: 2px solid #00ff41;
position: relative;
overflow: hidden;
}
.atm-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: repeating-linear-gradient(
0deg,
rgba(0, 0, 0, 0.15),
rgba(0, 0, 0, 0.15) 1px,
transparent 1px,
transparent 2px
);
pointer-events: none;
}
.footer-text {
font-family: 'Space Mono', monospace;
font-size: 12px;
font-weight: 700;
color: #0a0e27;
text-transform: uppercase;
letter-spacing: 2px;
position: relative;
z-index: 1;
}
/* ============================================
SCROLLBAR STYLING
============================================ */
.history-display::-webkit-scrollbar {
width: 8px;
}
.history-display::-webkit-scrollbar-track {
background: rgba(0, 255, 65, 0.05);
border-radius: 4px;
}
.history-display::-webkit-scrollbar-thumb {
background: #00ff41;
border-radius: 4px;
box-shadow: 0 0 10px rgba(0, 255, 65, 0.5);
}
.history-display::-webkit-scrollbar-thumb:hover {
background: #00d9ff;
box-shadow: 0 0 15px rgba(0, 217, 255, 0.6);
}
/* ============================================
RESPONSIVE DESIGN
============================================ */
@media (max-width: 600px) {
.atm-machine {
max-width: 100%;
border-radius: 15px;
}
.atm-title {
font-size: 24px;
letter-spacing: 2px;
}
.atm-display {
padding: 20px;
min-height: 350px;
}
.screen-header {
font-size: 16px;
}
.balance-display {
font-size: 28px;
}
.menu-button,
.action-button,
.quick-button {
font-size: 11px;
padding: 10px;
}
.keypad-button {
font-size: 16px;
}
}
@media (max-width: 400px) {
.atm-container {
padding: 10px;
}
.atm-machine {
border-radius: 10px;
}
.atm-display {
padding: 15px;
min-height: 300px;
}
.screen-header {
font-size: 14px;
margin-bottom: 15px;
}
.balance-display {
font-size: 24px;
}
.menu-grid {
grid-template-columns: 1fr;
gap: 8px;
}
.button-grid {
grid-template-columns: 1fr 1fr;
}
}
FILE 3: JAVASCRIPT ([Link])
// ============================================
// ATM MENU INTERFACE - JAVASCRIPT
// Retro-Futuristic Terminal Design
// ============================================
// State Management
let state = {
screen: 'login',
pin: '',
isLoggedIn: false,
account: {
balance: 5000,
accountNumber: '****1234',
cardNumber: '****5678'
},
withdrawAmount: '',
depositAmount: '',
transferAmount: '',
transferAccount: '',
message: '',
transactionHistory: []
};
// Initialize
[Link]('DOMContentLoaded', () => {
renderScreen();
});
// ============================================
// PIN INPUT HANDLING
// ============================================
function handlePinInput(digit) {
if ([Link] < 4) {
[Link] += digit;
renderScreen();
}
}
function handleClear() {
[Link] = '';
[Link] = '';
renderScreen();
}
function handleLogin() {
if ([Link] === '1234') {
[Link] = true;
[Link] = 'menu';
[Link] = '';
[Link] = '';
renderScreen();
} else {
[Link] = 'INVALID PIN. TRY AGAIN.';
[Link] = '';
renderScreen();
}
}
// ============================================
// LOGOUT HANDLING
// ============================================
function handleLogout() {
[Link] = false;
[Link] = 'login';
[Link] = '';
[Link] = '';
[Link] = '';
[Link] = '';
[Link] = '';
[Link] = '';
renderScreen();
}
// ============================================
// TRANSACTION HANDLERS
// ============================================
function handleWithdraw() {
const amount = parseFloat([Link]);
if (amount > 0 && amount <= [Link]) {
[Link] -= amount;
[Link] = `WITHDRAWAL SUCCESSFUL. $${[Link](2)}
DISPENSED.`;
[Link](`WITHDRAW: -$${[Link](2)}`);
[Link] = '';
setTimeout(() => {
[Link] = 'menu';
[Link] = '';
renderScreen();
}, 2000);
} else {
[Link] = 'INSUFFICIENT FUNDS OR INVALID AMOUNT.';
[Link] = '';
}
renderScreen();
}
function handleDeposit() {
const amount = parseFloat([Link]);
if (amount > 0) {
[Link] += amount;
[Link] = `DEPOSIT SUCCESSFUL. $${[Link](2)}
RECEIVED.`;
[Link](`DEPOSIT: +$${[Link](2)}`);
[Link] = '';
setTimeout(() => {
[Link] = 'menu';
[Link] = '';
renderScreen();
}, 2000);
} else {
[Link] = 'INVALID AMOUNT.';
[Link] = '';
}
renderScreen();
}
function handleTransfer() {
const amount = parseFloat([Link]);
if (amount > 0 && amount <= [Link] &&
[Link] > 0) {
[Link] -= amount;
[Link] = `TRANSFER SUCCESSFUL. $${[Link](2)} SENT TO
${[Link]}.`;
[Link](`TRANSFER: -$${[Link](2)} TO
${[Link]}`);
[Link] = '';
[Link] = '';
setTimeout(() => {
[Link] = 'menu';
[Link] = '';
renderScreen();
}, 2000);
} else {
[Link] = 'INVALID TRANSFER DETAILS.';
[Link] = '';
[Link] = '';
}
renderScreen();
}
// ============================================
// SCREEN NAVIGATION
// ============================================
function goToScreen(screenName) {
[Link] = screenName;
[Link] = '';
renderScreen();
}
function returnToMenu() {
[Link] = 'menu';
[Link] = '';
[Link] = '';
[Link] = '';
[Link] = '';
[Link] = '';
renderScreen();
}
// ============================================
// QUICK AMOUNT SELECTION
// ============================================
function selectAmount(amount) {
if ([Link] === 'withdraw') {
[Link] = [Link]();
}
renderScreen();
}
// ============================================
// INPUT HANDLERS
// ============================================
function updateWithdrawAmount(value) {
[Link] = value;
}
function updateDepositAmount(value) {
[Link] = value;
}
function updateTransferAmount(value) {
[Link] = value;
}
function updateTransferAccount(value) {
[Link] = value;
}
// ============================================
// SCREEN RENDERING
// ============================================
function renderScreen() {
const screenContent = [Link]('screen-content');
const keypadSection = [Link]('keypad-section');
let html = '';
if ([Link] === 'login') {
[Link] = 'block';
html = `
<div class="screen-header">WELCOME TO NEXUS ATM</div>
<div class="screen-body">
<div class="status-line">PLEASE INSERT YOUR CARD</div>
<div class="divider"></div>
<div class="input-section">
<div class="label">ENTER PIN:</div>
<div class="pin-display">
${('●'.repeat([Link]) + '_'.repeat(4 -
[Link]))}
</div>
</div>
${[Link] ? `<div class="error-
message">${[Link]}</div>` : ''}
</div>
`;
} else if ([Link] === 'menu' && [Link]) {
[Link] = 'none';
html = `
<div class="screen-header">MAIN MENU</div>
<div class="screen-body">
<div class="status-line">SELECT TRANSACTION</div>
<div class="divider"></div>
<div class="menu-grid">
<button class="menu-button"
onclick="goToScreen('balance')">CHECK BALANCE</button>
<button class="menu-button"
onclick="goToScreen('withdraw')">WITHDRAW CASH</button>
<button class="menu-button"
onclick="goToScreen('deposit')">DEPOSIT FUNDS</button>
<button class="menu-button"
onclick="goToScreen('transfer')">TRANSFER MONEY</button>
<button class="menu-button"
onclick="goToScreen('history')">TRANSACTION HISTORY</button>
<button class="menu-button logout"
onclick="handleLogout()">EXIT SESSION</button>
</div>
</div>
`;
} else if ([Link] === 'balance' && [Link]) {
[Link] = 'none';
html = `
<div class="screen-header">ACCOUNT BALANCE</div>
<div class="screen-body">
<div class="info-section">
<div class="info-label">ACCOUNT NUMBER:</div>
<div class="info-value">${[Link]}
</div>
</div>
<div class="divider"></div>
<div class="info-section">
<div class="info-label">CURRENT BALANCE:</div>
<div class="balance-
display">$${[Link](2)}</div>
</div>
<div class="divider"></div>
<button class="action-button"
onclick="returnToMenu()">RETURN TO MENU</button>
</div>
`;
} else if ([Link] === 'withdraw' && [Link]) {
[Link] = 'none';
html = `
<div class="screen-header">WITHDRAW CASH</div>
<div class="screen-body">
<div class="input-section">
<div class="label">ENTER AMOUNT:</div>
<input type="text" class="amount-input"
value="${[Link]}" placeholder="0.00" readonly>
</div>
${[Link] ? `<div class="success-
message">${[Link]}</div>` : ''}
<div class="button-grid">
<button class="quick-button"
onclick="selectAmount(50)">$50</button>
<button class="quick-button"
onclick="selectAmount(100)">$100</button>
<button class="quick-button"
onclick="selectAmount(200)">$200</button>
<button class="quick-button"
onclick="selectAmount(500)">$500</button>
</div>
<div class="button-row">
<button class="action-button"
onclick="handleWithdraw()">CONFIRM</button>
<button class="action-button cancel"
onclick="returnToMenu()">CANCEL</button>
</div>
</div>
`;
} else if ([Link] === 'deposit' && [Link]) {
[Link] = 'none';
html = `
<div class="screen-header">DEPOSIT FUNDS</div>
<div class="screen-body">
<div class="input-section">
<div class="label">ENTER AMOUNT:</div>
<input type="number" class="amount-input"
value="${[Link]}"
onchange="updateDepositAmount([Link])"
placeholder="0.00">
</div>
${[Link] ? `<div class="success-
message">${[Link]}</div>` : ''}
<div class="button-row">
<button class="action-button"
onclick="handleDeposit()">CONFIRM DEPOSIT</button>
<button class="action-button cancel"
onclick="returnToMenu()">CANCEL</button>
</div>
</div>
`;
} else if ([Link] === 'transfer' && [Link]) {
[Link] = 'none';
html = `
<div class="screen-header">TRANSFER MONEY</div>
<div class="screen-body">
<div class="input-section">
<div class="label">RECIPIENT ACCOUNT:</div>
<input type="text" class="amount-input"
value="${[Link]}"
onchange="updateTransferAccount([Link])"
placeholder="Enter account number">
</div>
<div class="input-section">
<div class="label">TRANSFER AMOUNT:</div>
<input type="number" class="amount-input"
value="${[Link]}"
onchange="updateTransferAmount([Link])"
placeholder="0.00">
</div>
${[Link] ? `<div class="success-
message">${[Link]}</div>` : ''}
<div class="button-row">
<button class="action-button"
onclick="handleTransfer()">CONFIRM TRANSFER</button>
<button class="action-button cancel"
onclick="returnToMenu()">CANCEL</button>
</div>
</div>
`;
} else if ([Link] === 'history' && [Link]) {
[Link] = 'none';
const historyHTML = [Link] === 0
? '<div class="status-line">NO TRANSACTIONS YET</div>'
: [Link](t => `<div class="history-
item">${t}</div>`).join('');
html = `
<div class="screen-header">TRANSACTION HISTORY</div>
<div class="screen-body">
<div class="history-display">
${historyHTML}
</div>
<button class="action-button"
onclick="returnToMenu()">RETURN TO MENU</button>
</div>
`;
}
[Link] = html;
}
SETUP INSTRUCTIONS
Quick Start (Standalone)
1. Create three files in the same directory:
[Link] (HTML code from File 1)
[Link] (CSS code from File 2)
[Link] (JavaScript code from File 3)
2. Open [Link] in a web browser
3. Login with PIN: 1234
Features
Feature Description
PIN Login Default PIN is 1234
Check Balance View current account balance ($5000 starting)
Withdraw Cash Select from 50,100, 200,500 or custom amount
Deposit Funds Enter custom deposit amount
Transfer Money Send funds to another account
Transaction History View all transaction records
Exit Session Logout and return to login screen
Design Features
Retro-Futuristic Aesthetic: Neon green (#00ff41) and cyan (#00d9ff) colors
Animated Scanlines: Authentic CRT monitor effect
Glowing Effects: Neon text shadows and pulsing animations
Responsive Design: Works on desktop, tablet, and mobile
Terminal Typography: IBM Plex Mono and Space Mono fonts
Smooth Transitions: All interactions have fluid animations
Customization
Change PIN: Edit line 82 in [Link] :
if ([Link] === '1234') { // Change '1234' to your desired PIN
Change Starting Balance: Edit line 18 in [Link] :
balance: 5000, // Change to desired amount
Modify Colors: Edit the color values in [Link] :
Neon Green: #00ff41
Cyan: #00d9ff
Dark Background: #0a0e27
Browser Compatibility
Chrome/Chromium (Latest)
Firefox (Latest)
Safari (Latest)
Edge (Latest)
Mobile browsers (iOS Safari, Chrome Mobile)
License
Free to use and modify for personal and educational purposes.
Created: April 2026
Design Philosophy: Retro-Futuristic Terminal Cyberpunk
Technology Stack: HTML5, CSS3, Vanilla JavaScript