<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Retro ATM Terminal</title>
    <style>
        :root {
            --main-color: #00ff41;
            --danger: #ff4444;
            --bg-dark: #0a0a0a;
            --machine-gray: #2c2c2c;
        }

body {
            background: var(--bg-dark);
            color: var(--main-color);
            font-family: 'Courier New', monospace;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            overflow: hidden;
        }

/* ATM Outer Shell */
        .atm-frame {
            background: var(--machine-gray);
            padding: 40px;
            border-radius: 20px;
            border: 4px solid #444;
            box-shadow: inset 0 0 50px #000, 0 20px 50px rgba(0, 0, 0, 0.8);
            width: 600px;
        }

/* Screen Layout */
        .atm-screen {
            background: #001100;
            border: 15px solid #111;
            height: 350px;
            position: relative;
            padding: 20px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            box-shadow: inset 0 0 20px #00ff41;
        }

.screen-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
            background-size: 100% 3px, 3px 100%;
            pointer-events: none;
        }

/* ATM Elements */
        .header {
            text-align: center;
            font-size: 1.5rem;
            border-bottom: 1px solid var(--main-color);
            padding-bottom: 10px;
            margin-bottom: 20px;
        }

.input-area {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

input {
            background: rgba(0, 255, 65, 0.1);
            border: 1px solid var(--main-color);
            color: var(--main-color);
            font-size: 1.2rem;
            padding: 10px;
            text-transform: uppercase;
            outline: none;
            text-align: center;
        }

.status-box {
            flex-grow: 1;
            margin-top: 15px;
            font-size: 0.9rem;
            overflow-y: auto;
            color: var(--main-color);
        }

.hacked {
            color: var(--danger);
            font-weight: bold;
            animation: blink 0.5s infinite;
            text-shadow: 0 0 10px var(--danger);
        }

.secure {
            color: var(--main-color);
            font-weight: bold;
            text-shadow: 0 0 10px var(--main-color);
        }

/* Keypad Simulation */
        .atm-hardware {
            display: flex;
            justify-content: space-between;
            margin-top: 30px;
        }

.keypad {
            display: grid;
            grid-template-columns: repeat(3, 40px);
            gap: 10px;
        }

.key {
            width: 40px;
            height: 40px;
            background: #333;
            border: 1px solid #555;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            cursor: pointer;
            color: #ccc;
        }

.key:active {
            background: #555;
        }

.card-slot {
            width: 120px;
            height: 10px;
            background: #000;
            border: 2px solid #555;
            position: relative;
            margin-top: 20px;
        }

.card-slot::after {
            content: "INSERT CARD";
            font-size: 10px;
            position: absolute;
            top: 15px;
            color: #888;
            width: 100%;
            text-align: center;
        }

@keyframes blink {
            0% {
                opacity: 1;
            }

50% {
                opacity: 0.1;
            }

100% {
                opacity: 1;
            }
        }
    </style>
</head>

<body>

<div class="atm-frame">
        <div class="atm-screen">
            <div class="screen-overlay"></div>
            <div class="header">G-BANK TERMINAL V4.2</div>

<div class="input-area">
                <label>OPERATOR IDENTITY:</label>
                <input type="text" id="userInput" placeholder="AWAITING INPUT..." readonly>
            </div>

<div class="status-box" id="log">> INSERTING VIRTUAL CARD...<br>> WAITING FOR AUTHENTICATION...</div>

<div id="radar" style="font-size: 10px; opacity: 0.5; position: absolute; right: 10px; bottom: 10px;">
                WIFI_RADAR: [ONLINE]
            </div>
        </div>

<div class="atm-hardware">
            <div class="keypad">
                <div class="key" onclick="press('1')">1</div>
                <div class="key" onclick="press('2')">2</div>
                <div class="key" onclick="press('3')">3</div>
                <div class="key" onclick="press('4')">4</div>
                <div class="key" onclick="press('5')">5</div>
                <div class="key" onclick="press('6')">6</div>
                <div class="key" onclick="press('7')">7</div>
                <div class="key" onclick="press('8')">8</div>
                <div class="key" onclick="press('9')">9</div>
                <div class="key" style="background:#800; color:white;" onclick="reset()">CLR</div>
                <div class="key" onclick="press('0')">0</div>
                <div class="key" style="background:#080; color:white;" onclick="submit()">ENT</div>
            </div>
            <div class="cash-dispenser" style="text-align:right;">
                <div class="card-slot"></div>
                <div
                    style="width: 150px; height: 60px; background: #111; margin-top: 40px; border: 2px solid #333; text-align: center; line-height: 60px; font-size: 10px; color: #444;">
                    CASH DISPENSER</div>
            </div>
        </div>
    </div>

function press(key) {
        input.value += key;
        clickSound();
    }

function reset() {
        input.value = "";
        clearInterval(alarm);
        log.innerHTML = "> SYSTEM RESET. AWAITING INPUT...";
    }

function clickSound() {
        const osc = audioCtx.createOscillator();
        const g = audioCtx.createGain();
        osc.connect(g); g.connect(audioCtx.destination);
        osc.frequency.value = 800; g.gain.value = 0.1;
        osc.start(); osc.stop(audioCtx.currentTime + 0.05);
    }

function playSiren() {
        const osc = audioCtx.createOscillator();
        const g = audioCtx.createGain();
        osc.connect(g); g.connect(audioCtx.destination);
        osc.frequency.setValueAtTime(400, audioCtx.currentTime);
        osc.frequency.exponentialRampToValueAtTime(800, audioCtx.currentTime + 0.2);
        g.gain.value = 0.05;
        osc.start(); osc.stop(audioCtx.currentTime + 0.2);
    }

</body>

</html>

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground