316 lines
15 KiB
HTML
316 lines
15 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>4DSTAR Bundle Manager</title>
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
|
||
<body>
|
||
<div class="main-container">
|
||
<!-- Primary Category Sidebar (Tier 1) -->
|
||
<aside class="primary-sidebar" id="primary-sidebar">
|
||
<div class="primary-sidebar-header">
|
||
<div class="brand-icon">
|
||
<div class="star-icon">✦</div>
|
||
<div class="brand-text">4D</div>
|
||
<h3 class="app-title">STAR</h3>
|
||
</div>
|
||
</div>
|
||
<nav class="category-nav">
|
||
<div class="category-item active" data-category="libplugin" title="libplugin">
|
||
<div class="category-icon" style="background-color: #3b82f6;">LP</div>
|
||
<span class="category-label">libplugin</span>
|
||
</div>
|
||
<div class="category-item" data-category="libconstants" title="libconstants">
|
||
<div class="category-icon" style="background-color: #10b981;">LC</div>
|
||
<span class="category-label">libconstants</span>
|
||
</div>
|
||
<div class="category-item" data-category="opat" title="OPAT Core">
|
||
<div class="category-icon" style="background-color: #f59e0b;">OC</div>
|
||
<span class="category-label">OPAT Core</span>
|
||
</div>
|
||
<div class="category-item" data-category="serif" title="SERiF Libraries">
|
||
<div class="category-icon" style="background-color: #ef4444;">SL</div>
|
||
<span class="category-label">SERiF Libraries</span>
|
||
</div>
|
||
</nav>
|
||
<div class="primary-sidebar-footer">
|
||
<div class="version-info">v1.0.0</div>
|
||
<button id="info-btn" class="info-button" title="About 4DSTAR">
|
||
<span class="info-icon">ℹ️</span>
|
||
<span class="info-label">Info</span>
|
||
</button>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- Secondary Content Sidebar (Tier 2) -->
|
||
<aside class="secondary-sidebar" id="secondary-sidebar">
|
||
<!-- libplugin content (existing sidebar content) -->
|
||
<div class="sidebar-content" data-category="libplugin">
|
||
<div class="sidebar-header">
|
||
<h3>Bundle Manager</h3>
|
||
</div>
|
||
<nav class="sidebar-nav">
|
||
<button id="open-bundle-btn" class="nav-button active">Open Bundle</button>
|
||
<button id="create-bundle-btn" class="nav-button">Create Bundle</button>
|
||
</nav>
|
||
</div>
|
||
|
||
<!-- libconstants content (empty for now) -->
|
||
<div class="sidebar-content hidden" data-category="libconstants">
|
||
<div class="sidebar-header">
|
||
<h3>Constants</h3>
|
||
</div>
|
||
<div class="empty-state">
|
||
<p>Constants tools coming soon...</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- OPAT Core content (empty for now) -->
|
||
<div class="sidebar-content hidden" data-category="opat">
|
||
<div class="sidebar-header">
|
||
<h3>OPAT Core</h3>
|
||
</div>
|
||
<div class="empty-state">
|
||
<p>OPAT tools coming soon...</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SERiF Libraries content (empty for now) -->
|
||
<div class="sidebar-content hidden" data-category="serif">
|
||
<div class="sidebar-header">
|
||
<h3>SERiF Libraries</h3>
|
||
</div>
|
||
<div class="empty-state">
|
||
<p>SERiF tools coming soon...</p>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<main class="content-area">
|
||
<div id="welcome-screen">
|
||
<h1>Welcome to 4DSTAR Bundle Manager</h1>
|
||
<p>Open or create a bundle to get started.</p>
|
||
</div>
|
||
|
||
<div id="bundle-view" class="hidden">
|
||
<header class="content-header">
|
||
<h2 id="bundle-title"></h2>
|
||
<div class="action-buttons">
|
||
<button id="sign-bundle-btn">Sign</button>
|
||
<button id="validate-bundle-btn">Validate</button>
|
||
<button id="clear-bundle-btn">Clear</button>
|
||
<button id="save-metadata-btn" class="hidden">Save Changes</button>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="tab-nav">
|
||
<button class="tab-link active" data-tab="overview-tab">Overview</button>
|
||
<button class="tab-link" data-tab="plugins-tab">Plugins</button>
|
||
<button class="tab-link" data-tab="fill-tab" id="fill-tab-link">Fill</button>
|
||
<button class="tab-link hidden" data-tab="validation-tab">Validation</button>
|
||
</div>
|
||
|
||
<div id="tab-content">
|
||
<div id="overview-tab" class="tab-pane active">
|
||
<div id="manifest-details"></div>
|
||
</div>
|
||
<div id="plugins-tab" class="tab-pane">
|
||
<div id="plugins-list"></div>
|
||
</div>
|
||
<div id="validation-tab" class="tab-pane">
|
||
<pre id="validation-results"></pre>
|
||
</div>
|
||
<div id="fill-tab" class="tab-pane">
|
||
<div class="fill-header">
|
||
<h3>Fill Bundle with Compiled Binaries</h3>
|
||
<p>Select the targets you want to build and add to the bundle:</p>
|
||
<div class="fill-header-actions">
|
||
<button id="load-fillable-targets-btn" class="action-button primary">Load Available Targets</button>
|
||
</div>
|
||
</div>
|
||
<div id="fill-targets-container">
|
||
<div id="fill-loading" class="hidden">
|
||
<p>Loading available targets...</p>
|
||
</div>
|
||
<div id="fill-no-targets" class="hidden">
|
||
<p>No fillable targets available. The bundle may already be complete.</p>
|
||
</div>
|
||
<div id="fill-targets-content" class="hidden">
|
||
<div id="fill-plugins-tables"></div>
|
||
<div class="fill-actions">
|
||
<button id="select-all-targets" class="action-button secondary">Select All</button>
|
||
<button id="deselect-all-targets" class="action-button secondary">Deselect All</button>
|
||
<button id="start-fill-process" class="action-button primary">Start Building</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="fill-progress-container" class="hidden">
|
||
<h4>Build Progress</h4>
|
||
<div id="fill-progress-content"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="create-bundle-form" class="hidden">
|
||
<!-- The create form will be moved into a modal later -->
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<!-- Modal for status/error messages -->
|
||
<div id="modal" class="modal-container hidden">
|
||
<div class="modal-content">
|
||
<span id="modal-close-btn" class="modal-close">×</span>
|
||
<h3 id="modal-title"></h3>
|
||
<div id="modal-message"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Spinner Overlay -->
|
||
<div id="spinner-overlay" class="spinner-overlay hidden">
|
||
<div class="spinner"></div>
|
||
<p>Processing...</p>
|
||
</div>
|
||
|
||
<!-- Save Options Modal -->
|
||
<div id="save-options-modal" class="modal-container hidden">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3>Save Metadata Changes</h3>
|
||
<button class="modal-close" onclick="hideSaveOptionsModal()">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div id="signature-warning-section" class="signature-warning-section hidden">
|
||
<div class="warning-banner">
|
||
<span class="warning-icon">⚠️</span>
|
||
<div class="warning-text">
|
||
<strong>Signature Warning:</strong> This operation will invalidate the bundle's digital signature.
|
||
You will need to re-sign the bundle using the <strong>Sign</strong> button and a <strong>PEM private key</strong> file.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p>How would you like to save your metadata changes?</p>
|
||
<div class="save-options">
|
||
<button id="overwrite-bundle-btn" class="save-option-btn primary">
|
||
<strong>Overwrite Current Bundle</strong>
|
||
<small>Update the existing bundle file</small>
|
||
</button>
|
||
<button id="save-as-new-btn" class="save-option-btn secondary">
|
||
<strong>Save As New Bundle</strong>
|
||
<small>Create a new bundle file with changes</small>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Signature Invalidation Warning Modal -->
|
||
<div id="signature-warning-modal" class="modal-container hidden">
|
||
<div class="modal-content">
|
||
<h2>⚠️ Signature Warning</h2>
|
||
<div class="warning-content">
|
||
<p><strong>This operation will invalidate the bundle's digital signature.</strong></p>
|
||
<p>After making changes, you will need to re-sign the bundle using:</p>
|
||
<ul>
|
||
<li>The <strong>Sign</strong> button in the action bar</li>
|
||
<li>A valid <strong>PEM private key</strong> file</li>
|
||
</ul>
|
||
<p>Do you want to continue?</p>
|
||
</div>
|
||
<div class="modal-actions">
|
||
<button id="signature-warning-cancel" class="action-button secondary">Cancel</button>
|
||
<button id="signature-warning-continue" class="action-button primary">Continue</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Info Modal -->
|
||
<div id="info-modal" class="modal-container hidden">
|
||
<div class="modal-content info-modal-content">
|
||
<div class="modal-header">
|
||
<h3>About 4DSTAR</h3>
|
||
<button class="modal-close" onclick="hideInfoModal()">×</button>
|
||
</div>
|
||
<div class="info-modal-body">
|
||
<div class="info-tab-nav">
|
||
<button class="info-tab-link active" data-tab="about-info-tab">About</button>
|
||
<button class="info-tab-link" data-tab="license-info-tab">License</button>
|
||
<button class="info-tab-link" data-tab="funding-info-tab">Funding</button>
|
||
<button class="info-tab-link" data-tab="help-info-tab">Help</button>
|
||
</div>
|
||
<div class="info-tab-content">
|
||
<div id="about-info-tab" class="info-tab-pane active">
|
||
<h4>4DSTAR Bundle Manager</h4>
|
||
<p><strong>Author:</strong> Emily M. Boudreaux</p>
|
||
<p><strong>Version:</strong> 1.0.0</p>
|
||
<p><strong>Description:</strong> A modern bundle management tool for 4DSTAR stellar evolution models, providing an intuitive interface for creating, signing, validating, and filling binary bundles.</p>
|
||
<div class="info-links">
|
||
<a href="#" id="github-link" class="info-link">
|
||
<span class="link-icon">🔗</span>
|
||
View on GitHub
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div id="license-info-tab" class="info-tab-pane">
|
||
<h4>License Information</h4>
|
||
<p><strong>License:</strong> GNU General Public License v3.0</p>
|
||
<div class="license-content">
|
||
<p>This software is licensed under GPL v3. License text will be added here.</p>
|
||
<textarea readonly class="license-text" placeholder="GPL v3 license text will be pasted here..."></textarea>
|
||
</div>
|
||
</div>
|
||
<div id="funding-info-tab" class="info-tab-pane">
|
||
<h4>Funding & Support</h4>
|
||
<div class="funding-content">
|
||
<p>Funding information placeholder - content will be added here.</p>
|
||
</div>
|
||
</div>
|
||
<div id="help-info-tab" class="info-tab-pane">
|
||
<h4>Help & Documentation</h4>
|
||
<div class="help-content">
|
||
<h5>Getting Started</h5>
|
||
<ul>
|
||
<li><strong>Open Bundle:</strong> Click "Open Bundle" to load an existing .fbundle file</li>
|
||
<li><strong>Create Bundle:</strong> Click "Create Bundle" to build a new bundle from plugins</li>
|
||
<li><strong>Sign Bundle:</strong> Use the Sign button to digitally sign your bundle with a PEM key</li>
|
||
<li><strong>Fill Bundle:</strong> Use the Fill tab to compile and add binaries for different platforms</li>
|
||
</ul>
|
||
<h5>Bundle Operations</h5>
|
||
<ul>
|
||
<li><strong>Validate:</strong> Check bundle integrity and compatibility</li>
|
||
<li><strong>Edit Metadata:</strong> Click pencil icons to edit version, author, and comments</li>
|
||
<li><strong>Clear:</strong> Remove all compiled binaries from the bundle</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Fill Modal (Legacy - can be removed later) -->
|
||
<div id="fill-modal" class="modal-container hidden">
|
||
<div class="modal-content">
|
||
<span class="close-fill-modal-button">×</span>
|
||
<h2 id="fill-modal-title">Fill Bundle</h2>
|
||
<div id="fill-modal-body">
|
||
<p>Select the targets you want to build:</p>
|
||
<div id="fill-targets-list"></div>
|
||
<button id="start-fill-button">Start Fill</button>
|
||
</div>
|
||
<div id="fill-progress-view" style="display: none;">
|
||
<div id="fill-progress-list"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="spinner" class="spinner hidden"></div>
|
||
|
||
<script src="renderer.js"></script>
|
||
</body>
|
||
|
||
</html>
|