567 lines
29 KiB
HTML
567 lines
29 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" data-category="home" title="Home">
|
||
<div class="category-icon" style="background-color: #6366f1;">🏠</div>
|
||
<span class="category-label">Home</span>
|
||
</div>
|
||
<div class="category-item" 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 -->
|
||
<div class="sidebar-content hidden" data-category="opat">
|
||
<div class="sidebar-header">
|
||
<h3>OPAT Core</h3>
|
||
</div>
|
||
<nav class="sidebar-nav">
|
||
<input type="file" id="opat-file-input" accept=".opat" class="opat-file-input" style="display: none;"/>
|
||
<button id="opat-browse-btn" class="nav-button active">Open OPAT File</button>
|
||
</nav>
|
||
</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">
|
||
<!-- Main Home Screen -->
|
||
<div id="welcome-screen" class="home-screen">
|
||
<div class="welcome-hero">
|
||
<div class="welcome-logo">
|
||
<div class="star-icon-large">✦</div>
|
||
<h1 class="welcome-title">4DSTAR</h1>
|
||
<p class="welcome-subtitle">Stellar Evolution Analysis Suite</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="welcome-content">
|
||
<div class="welcome-section">
|
||
<h2>Getting Started</h2>
|
||
<p>Choose a tool from the sidebar to begin your analysis:</p>
|
||
|
||
<div class="feature-grid">
|
||
<div class="feature-card">
|
||
<div class="feature-icon" style="background-color: #3b82f6;">LP</div>
|
||
<div class="feature-info">
|
||
<h3>libplugin Bundle Manager</h3>
|
||
<p>Create, open, and manage stellar evolution bundles. Build models and analyze results.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<div class="feature-icon" style="background-color: #f59e0b;">OC</div>
|
||
<div class="feature-info">
|
||
<h3>OPAT File Inspector</h3>
|
||
<p>Inspect and analyze OPAT (Opacity Table) files. View table data and explore index vectors.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<div class="feature-icon" style="background-color: #10b981;">LC</div>
|
||
<div class="feature-info">
|
||
<h3>libconstants</h3>
|
||
<p>Access and manage physical constants and parameters for stellar evolution calculations.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<div class="feature-icon" style="background-color: #ef4444;">SL</div>
|
||
<div class="feature-info">
|
||
<h3>SERiF Libraries</h3>
|
||
<p>Stellar Evolution Rapid interpolation Framework tools and utilities.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="welcome-tips">
|
||
<h3>Quick Tips</h3>
|
||
<ul>
|
||
<li>Use the sidebar navigation to switch between different tools</li>
|
||
<li>Each tool has its own dedicated workspace and features</li>
|
||
<li>File operations and settings are accessible from the top menu bar</li>
|
||
<li>Hover over sidebar icons for quick tool descriptions</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- libplugin Home Screen -->
|
||
<div id="libplugin-home" class="home-screen hidden">
|
||
<div class="category-hero">
|
||
<div class="category-hero-content">
|
||
<div class="category-icon-large" style="background-color: #3b82f6;">LP</div>
|
||
<h1 class="category-title">libplugin Bundle Manager</h1>
|
||
<p class="category-subtitle">Create, manage, and analyze stellar evolution bundles</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="category-content">
|
||
<div class="feature-section">
|
||
<h2>Bundle Management</h2>
|
||
<div class="action-cards">
|
||
<div class="action-card">
|
||
<h3>📁 Open Bundle</h3>
|
||
<p>Load an existing stellar evolution bundle for analysis and modification.</p>
|
||
</div>
|
||
<div class="action-card">
|
||
<h3>➕ Create Bundle</h3>
|
||
<p>Start a new stellar evolution project with custom parameters and configurations.</p>
|
||
</div>
|
||
<div class="action-card">
|
||
<h3>🔧 Build Models</h3>
|
||
<p>Compile and execute stellar evolution calculations with your bundle settings.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-section">
|
||
<h3>About libplugin</h3>
|
||
<p>The libplugin Bundle Manager provides a comprehensive interface for managing stellar evolution projects. Create bundles with specific initial conditions, track evolution parameters, and analyze results through integrated tools.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- OPAT Home Screen -->
|
||
<div id="opat-home" class="home-screen hidden">
|
||
<div class="category-hero">
|
||
<div class="category-hero-content">
|
||
<div class="category-icon-large" style="background-color: #f59e0b;">OC</div>
|
||
<h1 class="category-title">OPAT File Inspector</h1>
|
||
<p class="category-subtitle">Analyze opacity tables and stellar atmosphere data</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="category-content">
|
||
<div class="feature-section">
|
||
<h2>OPAT Analysis Tools</h2>
|
||
<div class="action-cards">
|
||
<div class="action-card">
|
||
<h3>📊 Load OPAT File</h3>
|
||
<p>Import and parse OPAT (Opacity Table) files for detailed inspection.</p>
|
||
</div>
|
||
<div class="action-card">
|
||
<h3>🔍 Explore Data</h3>
|
||
<p>Navigate through index vectors and examine table structures and metadata.</p>
|
||
</div>
|
||
<div class="action-card">
|
||
<h3>📈 View Tables</h3>
|
||
<p>Display opacity data in interactive tables with full or filtered views.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-section">
|
||
<h3>About OPAT Files</h3>
|
||
<p>OPAT (Opacity Table) files contain crucial stellar atmosphere data including opacity coefficients, temperature and density grids, and related thermodynamic properties used in stellar evolution calculations.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- libconstants Home Screen -->
|
||
<div id="libconstants-home" class="home-screen hidden">
|
||
<div class="category-hero">
|
||
<div class="category-hero-content">
|
||
<div class="category-icon-large" style="background-color: #10b981;">LC</div>
|
||
<h1 class="category-title">libconstants</h1>
|
||
<p class="category-subtitle">Physical constants and stellar parameters</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="category-content">
|
||
<div class="feature-section">
|
||
<h2>Constants Management</h2>
|
||
<div class="action-cards">
|
||
<div class="action-card">
|
||
<h3>🔢 Physical Constants</h3>
|
||
<p>Access fundamental physical constants used in stellar evolution calculations.</p>
|
||
</div>
|
||
<div class="action-card">
|
||
<h3>⭐ Stellar Parameters</h3>
|
||
<p>Manage stellar-specific constants and conversion factors.</p>
|
||
</div>
|
||
<div class="action-card">
|
||
<h3>⚙️ Configuration</h3>
|
||
<p>Customize constant values and units for specific research needs.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-section">
|
||
<h3>About libconstants</h3>
|
||
<p>The libconstants module provides a centralized repository of physical constants, conversion factors, and stellar parameters essential for accurate stellar evolution modeling and analysis.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SERiF Home Screen -->
|
||
<div id="serif-home" class="home-screen hidden">
|
||
<div class="category-hero">
|
||
<div class="category-hero-content">
|
||
<div class="category-icon-large" style="background-color: #ef4444;">SL</div>
|
||
<h1 class="category-title">SERiF Libraries</h1>
|
||
<p class="category-subtitle">Stellar Evolution Rapid interpolation Framework</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="category-content">
|
||
<div class="feature-section">
|
||
<h2>SERiF Tools</h2>
|
||
<div class="action-cards">
|
||
<div class="action-card">
|
||
<h3>🚀 Rapid Interpolation</h3>
|
||
<p>High-performance interpolation algorithms for stellar evolution tracks.</p>
|
||
</div>
|
||
<div class="action-card">
|
||
<h3>📚 Model Libraries</h3>
|
||
<p>Access pre-computed stellar evolution models and isochrones.</p>
|
||
</div>
|
||
<div class="action-card">
|
||
<h3>🔬 Analysis Framework</h3>
|
||
<p>Advanced tools for stellar population synthesis and comparison studies.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-section">
|
||
<h3>About SERiF</h3>
|
||
<p>The Stellar Evolution Rapid interpolation Framework (SERiF) provides optimized tools for working with large stellar evolution datasets, enabling fast interpolation and analysis of stellar models.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="opat-view" class="hidden">
|
||
<header class="content-header">
|
||
<h2 id="opat-title">OPAT File Inspector</h2>
|
||
<div class="action-buttons">
|
||
<button id="opat-close-btn">Close File</button>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="tab-nav">
|
||
<button class="tab-link active" data-tab="opat-overview-tab">File Information</button>
|
||
<button class="tab-link" data-tab="opat-explorer-tab">Data Explorer</button>
|
||
</div>
|
||
|
||
<div id="opat-tab-content">
|
||
<div id="opat-overview-tab" class="tab-pane active">
|
||
<div id="opat-header-info" class="opat-info-content"></div>
|
||
<div class="opat-info-section">
|
||
<h4 class="opat-section-title">All Table Tags</h4>
|
||
<ul id="opat-all-tags-list" class="opat-tags-list"></ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="opat-explorer-tab" class="tab-pane hidden">
|
||
<div class="opat-info-section">
|
||
<h4 class="opat-section-title">Data Card Explorer</h4>
|
||
<div class="opat-selector-group">
|
||
<label for="opat-index-selector" class="opat-label">Select Index Vector:</label>
|
||
<select id="opat-index-selector" class="opat-select">
|
||
<option value="">-- Select an Index Vector --</option>
|
||
</select>
|
||
</div>
|
||
<div id="opat-tables-display" class="opat-tables-display"></div>
|
||
</div>
|
||
|
||
<div class="opat-info-section">
|
||
<h4 class="opat-section-title">Table Viewer</h4>
|
||
<div id="opat-table-data-content" class="opat-table-viewer">
|
||
<p class="opat-placeholder">Click on a table from the 'Data Card Explorer' above to view its data here.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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="opatParser.js"></script>
|
||
<script src="renderer.js"></script>
|
||
</body>
|
||
|
||
</html>
|