288 lines
14 KiB
HTML
288 lines
14 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-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, Profile & Save Management Modal -->
|
|
<div id="auth-modal" class="modal-overlay">
|
|
<div class="modal-card modal-profile-card">
|
|
<div class="modal-header">
|
|
<iconify-icon icon="lucide:user-circle" class="modal-icon"></iconify-icon>
|
|
<div class="modal-header-text">
|
|
<h3 class="modal-title" id="auth-modal-title">Executive Profile & Data</h3>
|
|
<p class="modal-subtitle" id="auth-modal-subtitle">Manage cloud synchronization and local savegames.</p>
|
|
</div>
|
|
<button id="btn-close-auth-x" class="btn-icon-soft btn-modal-close" title="Close">
|
|
<iconify-icon icon="lucide:x"></iconify-icon>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Profile Info Banner (Status indicator) -->
|
|
<div id="profile-status-banner" class="profile-status-box">
|
|
<div class="profile-avatar-icon">
|
|
<iconify-icon icon="lucide:shield" id="profile-status-icon"></iconify-icon>
|
|
</div>
|
|
<div class="profile-info-content">
|
|
<div class="profile-name-row">
|
|
<strong id="profile-display-name">Executive Guest</strong>
|
|
<span id="profile-badge-pill" class="badge-pill-soft">Offline Guest</span>
|
|
</div>
|
|
<div class="profile-sub-desc" id="profile-sync-desc">
|
|
Progress is saved locally in this browser.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Account Forms (When Logged Out: Login/Register) -->
|
|
<div id="auth-guest-section" class="profile-sub-section">
|
|
<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">
|
|
<iconify-icon icon="lucide:log-in"></iconify-icon>
|
|
Login
|
|
</button>
|
|
<button id="btn-register-submit" class="btn-corp-secondary">
|
|
<iconify-icon icon="lucide:user-plus"></iconify-icon>
|
|
Register New
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Account Actions (When Logged In: Cloud Sync, Logout) -->
|
|
<div id="auth-user-section" class="profile-sub-section" style="display: none;">
|
|
<div class="modal-actions-row">
|
|
<button id="btn-cloud-sync-now" class="btn-corp-secondary">
|
|
<iconify-icon icon="lucide:refresh-cw"></iconify-icon>
|
|
Sync Cloud Now
|
|
</button>
|
|
<button id="btn-logout-submit" class="btn-corp-secondary text-warning">
|
|
<iconify-icon icon="lucide:log-out"></iconify-icon>
|
|
Log Out
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- In-modal Error Feedback (Replacing alert()) -->
|
|
<div id="auth-error-msg" class="modal-error-box" style="display: none;"></div>
|
|
|
|
<!-- Save Management Section: Export & Import (Available for both Guests & Registered Users) -->
|
|
<div class="profile-save-section">
|
|
<div class="save-section-header">
|
|
<div class="save-section-title">
|
|
<iconify-icon icon="lucide:hard-drive"></iconify-icon>
|
|
<span>Savegame Management (Backup & Restore)</span>
|
|
</div>
|
|
<span class="save-section-sub">Export to JSON file or clipboard, or restore from a previous save.</span>
|
|
</div>
|
|
|
|
<div class="save-actions-grid">
|
|
<button id="btn-export-file" class="btn-save-action" title="Download backup savegame as a JSON file">
|
|
<iconify-icon icon="lucide:download"></iconify-icon>
|
|
<span>Export File</span>
|
|
</button>
|
|
<button id="btn-export-clipboard" class="btn-save-action" title="Copy raw save string to system clipboard">
|
|
<iconify-icon icon="lucide:copy"></iconify-icon>
|
|
<span>Copy Save</span>
|
|
</button>
|
|
<label for="import-file-input" class="btn-save-action btn-upload-label" title="Upload and load a backup savegame JSON file">
|
|
<iconify-icon icon="lucide:upload"></iconify-icon>
|
|
<span>Import File</span>
|
|
</label>
|
|
<input type="file" id="import-file-input" accept=".json,text/plain" style="display: none;">
|
|
<button id="btn-import-clipboard" class="btn-save-action" title="Paste raw save text to restore your enterprise">
|
|
<iconify-icon icon="lucide:clipboard-paste"></iconify-icon>
|
|
<span>Paste Save</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Textarea for manual paste import (hidden by default, toggled via Paste Save) -->
|
|
<div id="import-text-box" class="import-text-container" style="display: none;">
|
|
<textarea id="import-raw-input" class="modal-textarea" rows="3" placeholder="Paste your exported savegame JSON string here..."></textarea>
|
|
<div class="import-text-actions">
|
|
<button id="btn-import-text-apply" class="btn-primary-corp btn-sm">Load & Restore</button>
|
|
<button id="btn-import-text-cancel" class="btn-corp-secondary btn-sm">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="btn-close-auth" class="btn-text-close">Close</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>
|