ProductionGame/frontend/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <title>EL PURO</title>
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;800&family=Share+Tech+Mono&display=swap" rel="stylesheet">
    <!-- Iconify Web Component CDN (Game Icons & Lucide) -->
    <script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div id="app-container">

    <!-- Sticky Header (Status bar + Financial HUD + Heat Bar) -->
    <header id="sticky-header">
        <!-- Top Status Bar -->
        <div id="system-bar">
            <div class="status-left">
                <span class="brand-tag">
                    <iconify-icon icon="game-icons:flasks"></iconify-icon> EL PURO
                </span>
                <span class="secure-indicator">
                    <span class="secure-dot"></span> SECURE
                </span>
            </div>
            <div class="status-right">
                <span id="user-badge" style="cursor: pointer; text-decoration: underline;">[ANON]</span>
                <span id="system-clock">15:00</span>
            </div>
        </div>

        <!-- HUD Summary (Cash, Income, Clean Bonds) -->
        <div id="hud-summary">
            <div>
                <div class="hud-title">Dirty Cash</div>
                <div class="hud-cash-val">$<span id="hud-cash">0.00</span></div>
                <div class="hud-rate-val">+$<span id="hud-rate">0.00</span>/s</div>
            </div>
            <div class="hud-bonds">
                <div class="hud-title">Clean Bonds</div>
                <div class="bonds-val">
                    <iconify-icon icon="game-icons:tied-scroll"></iconify-icon>
                    <span id="hud-bonds">0</span>
                </div>
                <div class="hud-rate-val" style="color: var(--neon-cyan);">+<span id="hud-multiplier">0</span>% Boost</div>
            </div>
        </div>

        <!-- Police Heat Bar -->
        <div id="heat-container">
            <div class="heat-label-row">
                <span>POLICE HEAT</span>
                <span id="heat-pct">0%</span>
            </div>
            <div class="heat-bar-track">
                <div id="heat-bar-fill"></div>
            </div>
        </div>
    </header>

    <!-- Toast Notifications Container -->
    <div id="toast-container"></div>

    <!-- Main Viewport with Dynamic Views -->
    <main id="main-viewport">
        <!-- Views are rendered dynamically by game.js -->
    </main>

    <!-- Bottom Navigation Bar (Fixed for quick thumb access) -->
    <nav id="bottom-nav">
        <button class="nav-tab active" data-tab="lab">
            <iconify-icon icon="game-icons:flasks"></iconify-icon>
            <span>Lab</span>
        </button>
        <button class="nav-tab" data-tab="streets">
            <iconify-icon icon="game-icons:cash"></iconify-icon>
            <span>Streets</span>
        </button>
        <button class="nav-tab" data-tab="tree">
            <iconify-icon icon="game-icons:spider-web"></iconify-icon>
            <span>Network</span>
        </button>
        <button class="nav-tab" data-tab="offshore">
            <iconify-icon icon="game-icons:briefcase"></iconify-icon>
            <span>Offshore</span>
        </button>
    </nav>

</div>

<!-- Authentication Modal -->
<div id="auth-modal" class="modal-overlay">
    <div class="modal-content">
        <div class="modal-header">
            <iconify-icon icon="lucide:shield-alert" style="font-size: 1.6rem; color: var(--brand-gold);"></iconify-icon>
            <div class="modal-title">Encrypted Terminal Login</div>
        </div>
        <p style="font-size: 0.78rem; color: var(--text-secondary); line-height: 1.4;">
            No email. No phone. Only a username and password to secure your syndicate records.
        </p>
        
        <div class="input-group">
            <label class="input-label">Operator Alias</label>
            <input type="text" id="auth-username" class="input-field" placeholder="e.g. ElHeisenberg" autocomplete="off">
        </div>

        <div class="input-group">
            <label class="input-label">Cipher Code (Password)</label>
            <input type="password" id="auth-password" class="input-field" placeholder="••••••••">
        </div>

        <!-- HONEYPOT TRAP (Bots fill this invisible input) -->
        <div class="hp-trap" aria-hidden="true">
            <input type="text" id="auth-website-hp" name="website_hp" tabindex="-1" autocomplete="off">
        </div>

        <div style="display: flex; gap: 8px; margin-top: 8px;">
            <button id="btn-login-submit" class="btn-tactical btn-primary-action" style="flex: 1; padding: 10px;">Login</button>
            <button id="btn-register-submit" class="btn-tactical" style="flex: 1; padding: 10px;">Register</button>
        </div>
        <button id="btn-close-auth" class="btn-tactical" style="margin-top: 4px;">Play as Guest</button>
    </div>
</div>

<!-- Police Raid Quick-Time Modal -->
<div id="raid-modal" class="modal-overlay">
    <div class="modal-content" style="border-color: var(--neon-red);">
        <div class="modal-header">
            <iconify-icon icon="game-icons:police-badge" style="font-size: 2rem; color: var(--neon-red);"></iconify-icon>
            <div>
                <div class="modal-title" style="color: var(--neon-red);">FEDERAL INTERCEPT!</div>
                <div style="font-size: 0.75rem; color: var(--text-secondary);">DEA raid in progress!</div>
            </div>
        </div>
        <p style="font-size: 0.8rem; line-height: 1.4;">
            Police sirens outside your warehouse! Decide quickly before your stash is seized!
        </p>
        <div style="display: flex; flex-direction: column; gap: 8px;">
            <button id="btn-raid-bribe" class="btn-tactical btn-sell-action" style="padding: 10px;">
                Pay Bribe ($<span id="raid-bribe-cost">500</span>)
                <span class="btn-subtext">Clears all heat immediately</span>
            </button>
            <button id="btn-raid-stash" class="btn-tactical" style="padding: 10px;">
                Flush & Hide Stash
                <span class="btn-subtext">Save 100% inventory, heat drops to 20%</span>
            </button>
            <button id="btn-raid-shootout" class="btn-tactical btn-primary-action" style="padding: 10px;">
                Run the Blockade
                <span class="btn-subtext">50% chance 2x payout, 50% chance loss</span>
            </button>
        </div>
    </div>
</div>

<script src="js/config.js"></script>
<script src="js/api.js"></script>
<script src="js/game.js"></script>
</body>
</html>