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-theme-toggle" class="btn-icon-soft" title="Toggle Theme (Dark / Light)">
                    <iconify-icon icon="lucide:moon" id="theme-toggle-icon"></iconify-icon>
                    <span class="btn-text-sm" id="theme-toggle-text">Dark</span>
                </button>
                <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>

        <!-- Executive Header Main Bar: Consolidated Finances (Left), Centered Sector Bar, Department Actions (Right) -->
        <div id="financial-hud">
            <!-- Left: Consolidated Financial Hub (Liquid Capital, Rate, Valuation, Venture Capital) -->
            <div class="hud-stat-box primary-hud-box executive-fin-hub" title="Corporate Financial Summary">
                <div class="fin-hub-main">
                    <div class="hud-label">Capital & Valuation</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="fin-hub-divider"></div>
                <div class="fin-hub-details">
                    <div class="fin-detail-row" title="Enterprise Valuation: Asset Value & Equity">
                        <span class="fin-detail-label">Valuation:</span>
                        <span class="fin-detail-val font-mono" id="hud-valuation">$0.00</span>
                    </div>
                    <div class="fin-detail-row" title="Venture Capital: Available $V-Shares for IPO Expansion">
                        <span class="fin-detail-label">V-Shares:</span>
                        <span class="fin-detail-val font-mono text-equity">
                            <iconify-icon icon="lucide:gem"></iconify-icon>
                            <span id="hud-shares">0</span>
                        </span>
                    </div>
                </div>
            </div>

            <!-- Center: Centered Sector Toolbar (Same width as content) -->
            <div id="header-sector-container">
                <!-- Dynamically mounted with sector tabs -->
            </div>

            <!-- Right: Department Navigation Buttons & Buy Multiplier -->
            <div class="header-right-actions">
                <nav class="header-nav-group">
                    <button class="nav-btn header-nav-btn" data-tab="contracts" title="B2B Contracts">
                        <iconify-icon icon="lucide:scroll-text"></iconify-icon>
                        <span class="header-btn-text">B2B</span>
                        <span id="contracts-badge" class="nav-pill-badge">0</span>
                    </button>
                    <button class="nav-btn header-nav-btn" data-tab="boardroom" title="Boardroom & IPO">
                        <iconify-icon icon="lucide:trending-up"></iconify-icon>
                        <span class="header-btn-text">Board</span>
                    </button>
                    <button class="nav-btn header-nav-btn" data-tab="milestones" title="Milestones">
                        <iconify-icon icon="lucide:trophy"></iconify-icon>
                        <span class="header-btn-text">Milestones</span>
                    </button>
                </nav>

                <!-- Buy Multiplier Selector -->
                <div class="hud-multiplier-box">
                    <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>
        </div>
    </header>

    <!-- Main Workspace Layout (Full-Width Responsive Canvas) -->
    <div id="workspace-layout">
        <!-- Main Interactive Viewport (Production Floor, Facility Dossier Detail, Contracts, Boardroom, Milestones) -->
        <main id="main-viewport">
        </main>
    </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>

            <!-- In-modal Error Feedback (Replacing alert()) -->
            <div id="auth-error-msg" class="modal-error-box" style="display: none;"></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>

    <!-- Universal Corporate Confirmation & Prompt Modal (No browser alert() / confirm()) -->
    <div id="confirm-modal" class="modal-overlay">
        <div class="modal-card">
            <div class="modal-header">
                <iconify-icon icon="lucide:alert-triangle" class="modal-icon text-warning" id="confirm-modal-icon"></iconify-icon>
                <div>
                    <h3 class="modal-title" id="confirm-modal-title">Executive Action Required</h3>
                    <p class="modal-subtitle" id="confirm-modal-subtitle">Corporate Board Authorization</p>
                </div>
            </div>
            <div class="modal-body-text" id="confirm-modal-text"></div>
            <div class="modal-actions-row">
                <button id="btn-confirm-cancel" class="btn-corp-secondary">Cancel</button>
                <button id="btn-confirm-ok" class="btn-primary-corp">Confirm Authorization</button>
            </div>
        </div>
    </div>

</div>

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

</body>
</html>