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>Production - The Idle Game</title>
    
    <!-- Modern Corporate & Financial 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=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600;700&display=swap" rel="stylesheet">
    
    <!-- Iconify Web Component CDN (Lucide Icons) -->
    <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-wrapper">

    <!-- Executive Header (Sticky across Desktop & Mobile) -->
    <header id="executive-header">
        <!-- Top Status Bar -->
        <div id="corporate-status-bar">
            <div class="status-left">
                <div class="corporate-brand">
                    <div class="brand-logo-icon">
                        <iconify-icon icon="lucide:factory"></iconify-icon>
                    </div>
                    <div class="brand-text">
                        <span class="brand-title">PRODUCTION</span>
                        <span class="brand-subtitle">The Idle Game</span>
                    </div>
                </div>
            </div>
            
            <div class="status-right">
                <button id="btn-open-settings" class="btn-icon-soft" title="Toggle Number Notation (Standard / Scientific)">
                    <iconify-icon icon="lucide:binary"></iconify-icon>
                    <span class="btn-text-sm">Notation</span>
                </button>
                <button id="user-badge" class="btn-user-badge" title="Account / Cloud Sync">
                    [GUEST]
                </button>
            </div>
        </div>

        <!-- Financial HUD (Liquid Capital, Net Flow, Valuation, Venture Equity) -->
        <div id="financial-hud">
            <div class="hud-stat-box primary-hud-box">
                <div class="hud-label">Liquid Capital</div>
                <div class="hud-main-val font-mono">$<span id="hud-cash">0.00</span></div>
                <div class="hud-sub-val font-mono rate-positive">+$<span id="hud-rate">0.00</span>/s</div>
            </div>

            <div class="hud-stat-box">
                <div class="hud-label">Enterprise Valuation</div>
                <div class="hud-main-val font-mono" id="hud-valuation">$0.00</div>
                <div class="hud-sub-val font-mono text-muted">Asset Value & Equity</div>
            </div>

            <div class="hud-stat-box">
                <div class="hud-label">Venture Capital ($V-Shares)</div>
                <div class="hud-main-val font-mono text-equity">
                    <iconify-icon icon="lucide:gem"></iconify-icon>
                    <span id="hud-shares">0</span>
                </div>
                <div class="hud-sub-val font-mono text-equity">IPO Expansion Equity</div>
            </div>

            <!-- Buy Multiplier Selector -->
            <div class="hud-multiplier-box">
                <span class="multi-label">Buy Batch:</span>
                <div class="multi-button-group">
                    <button class="btn-multi-pill active" data-mode="1">1x</button>
                    <button class="btn-multi-pill" data-mode="10">10x</button>
                    <button class="btn-multi-pill" data-mode="100">100x</button>
                    <button class="btn-multi-pill" data-mode="next">Next</button>
                </div>
            </div>
        </div>
    </header>

    <!-- Main Workspace Layout (3-Column Desktop Grid / 1-Column Mobile) -->
    <div id="workspace-layout">

        <!-- Left Column: Corporate Navigation (Desktop Sidebar) -->
        <aside id="desktop-nav-sidebar">
            <div class="sidebar-section-title">Departments</div>
            <nav class="sidebar-nav">
                <button class="nav-btn active" data-tab="production">
                    <iconify-icon icon="lucide:layout-grid"></iconify-icon>
                    <span>Production Floor</span>
                </button>
                <button class="nav-btn" data-tab="contracts">
                    <iconify-icon icon="lucide:scroll-text"></iconify-icon>
                    <span>B2B Contracts</span>
                    <span id="contracts-badge" class="nav-pill-badge">0</span>
                </button>
                <button class="nav-btn" data-tab="boardroom">
                    <iconify-icon icon="lucide:trending-up"></iconify-icon>
                    <span>Boardroom & IPO</span>
                </button>
                <button class="nav-btn" data-tab="milestones">
                    <iconify-icon icon="lucide:trophy"></iconify-icon>
                    <span>Milestones</span>
                </button>
            </nav>

            <div class="sidebar-divider"></div>
            
            <div class="sidebar-section-title">Industry Sectors</div>
            <div class="sidebar-sectors-list">
                <div class="sidebar-sector-item">
                    <iconify-icon icon="lucide:wheat" style="color: #16a34a;"></iconify-icon>
                    <span>Agriculture & Food</span>
                </div>
                <div class="sidebar-sector-item">
                    <iconify-icon icon="lucide:trees" style="color: #ca8a04;"></iconify-icon>
                    <span>Forestry & Materials</span>
                </div>
                <div class="sidebar-sector-item">
                    <iconify-icon icon="lucide:pickaxe" style="color: #475569;"></iconify-icon>
                    <span>Mining & Metallurgy</span>
                </div>
                <div class="sidebar-sector-item">
                    <iconify-icon icon="lucide:flask-conical" style="color: #0284c7;"></iconify-icon>
                    <span>Chemicals & Polymers</span>
                </div>
                <div class="sidebar-sector-item">
                    <iconify-icon icon="lucide:cpu" style="color: #7c3aed;"></iconify-icon>
                    <span>High-Tech Electronics</span>
                </div>
                <div class="sidebar-sector-item">
                    <iconify-icon icon="lucide:truck" style="color: #ea580c;"></iconify-icon>
                    <span>Heavy Industry</span>
                </div>
            </div>
        </aside>

        <!-- Center Column: Main Interactive Viewport -->
        <main id="main-viewport">
            <!-- Rendered dynamically by app.js (Production, Contracts, Boardroom, Milestones) -->
        </main>

        <!-- Right Column: Strategic Inspector & Supply Chain Panel (Desktop only) -->
        <aside id="desktop-inspector-panel">
            <!-- Rendered dynamically by inspectorView.js -->
        </aside>

    </div>

    <!-- Mobile Bottom Navigation Bar (Visible on mobile viewports) -->
    <nav id="mobile-bottom-nav">
        <button class="nav-tab active" data-tab="production">
            <iconify-icon icon="lucide:layout-grid"></iconify-icon>
            <span>Production</span>
        </button>
        <button class="nav-tab" data-tab="contracts">
            <iconify-icon icon="lucide:scroll-text"></iconify-icon>
            <span>Contracts</span>
        </button>
        <button class="nav-tab" data-tab="boardroom">
            <iconify-icon icon="lucide:trending-up"></iconify-icon>
            <span>Boardroom</span>
        </button>
        <button class="nav-tab" data-tab="milestones">
            <iconify-icon icon="lucide:trophy"></iconify-icon>
            <span>Milestones</span>
        </button>
    </nav>

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

    <!-- Authentication & Cloud Sync Modal -->
    <div id="auth-modal" class="modal-overlay">
        <div class="modal-card">
            <div class="modal-header">
                <iconify-icon icon="lucide:shield-check" class="modal-icon"></iconify-icon>
                <div>
                    <h3 class="modal-title">Executive Cloud Terminal</h3>
                    <p class="modal-subtitle">Save your production empire and sync across devices.</p>
                </div>
            </div>

            <div class="input-field-group">
                <label>Executive Username</label>
                <input type="text" id="auth-username" class="modal-input" placeholder="e.g. ChiefExecutive" autocomplete="username">
            </div>

            <div class="input-field-group">
                <label>Security Password</label>
                <input type="password" id="auth-password" class="modal-input" placeholder="••••••••" autocomplete="current-password">
            </div>

            <!-- Honeypot field for bot protection -->
            <div style="display: none;" aria-hidden="true">
                <input type="text" id="auth-website-hp" name="website_hp" tabindex="-1" autocomplete="off">
            </div>

            <div class="modal-actions-row">
                <button id="btn-login-submit" class="btn-primary-corp">Login</button>
                <button id="btn-register-submit" class="btn-corp-secondary">Register New</button>
            </div>
            
            <button id="btn-close-auth" class="btn-text-close">Continue as Guest</button>
        </div>
    </div>

</div>

<!-- Application Entry Point (Native ES Module) -->
<script type="module" src="js/app.js"></script>

</body>
</html>