257 lines
12 KiB
HTML
257 lines
12 KiB
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">
|
|
<button class="sidebar-sector-btn" data-sector="agriculture">
|
|
<div class="sidebar-sector-left">
|
|
<iconify-icon icon="lucide:wheat" style="color: #16a34a;"></iconify-icon>
|
|
<span>Agriculture</span>
|
|
</div>
|
|
<span class="sidebar-sector-rate font-mono" id="sb-rate-agriculture">+$0.00/s</span>
|
|
</button>
|
|
<button class="sidebar-sector-btn" data-sector="materials">
|
|
<div class="sidebar-sector-left">
|
|
<iconify-icon icon="lucide:trees" style="color: #ca8a04;"></iconify-icon>
|
|
<span>Forestry</span>
|
|
</div>
|
|
<span class="sidebar-sector-rate font-mono" id="sb-rate-materials">+$0.00/s</span>
|
|
</button>
|
|
<button class="sidebar-sector-btn" data-sector="mining">
|
|
<div class="sidebar-sector-left">
|
|
<iconify-icon icon="lucide:pickaxe" style="color: #475569;"></iconify-icon>
|
|
<span>Mining</span>
|
|
</div>
|
|
<span class="sidebar-sector-rate font-mono" id="sb-rate-mining">+$0.00/s</span>
|
|
</button>
|
|
<button class="sidebar-sector-btn" data-sector="chemicals">
|
|
<div class="sidebar-sector-left">
|
|
<iconify-icon icon="lucide:flask-conical" style="color: #0284c7;"></iconify-icon>
|
|
<span>Chemicals</span>
|
|
</div>
|
|
<span class="sidebar-sector-rate font-mono" id="sb-rate-chemicals">+$0.00/s</span>
|
|
</button>
|
|
<button class="sidebar-sector-btn" data-sector="electronics">
|
|
<div class="sidebar-sector-left">
|
|
<iconify-icon icon="lucide:cpu" style="color: #7c3aed;"></iconify-icon>
|
|
<span>Electronics</span>
|
|
</div>
|
|
<span class="sidebar-sector-rate font-mono" id="sb-rate-electronics">+$0.00/s</span>
|
|
</button>
|
|
<button class="sidebar-sector-btn" data-sector="heavy_industry">
|
|
<div class="sidebar-sector-left">
|
|
<iconify-icon icon="lucide:truck" style="color: #ea580c;"></iconify-icon>
|
|
<span>Heavy Industry</span>
|
|
</div>
|
|
<span class="sidebar-sector-rate font-mono" id="sb-rate-heavy_industry">+$0.00/s</span>
|
|
</button>
|
|
</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>
|
|
|
|
<!-- 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>
|