Kylian Schmidt
243 lines
8.7 KiB
HTML
243 lines
8.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>{{ title }}</title>
|
||
<link rel="stylesheet" href="{{ assets_path }}/css/main.css">
|
||
</head>
|
||
<body>
|
||
<!-- Main Content -->
|
||
<h1>{{ title }}</h1>
|
||
|
||
<!-- Search Bar -->
|
||
<div class="search-container">
|
||
<input type="text" class="search-box" id="searchBox" placeholder="Search plots..." />
|
||
<span class="search-icon">🔍</span>
|
||
<div class="search-results" id="searchResults"></div>
|
||
</div>
|
||
|
||
<!-- Breadcrumb Navigation -->
|
||
<div class="breadcrumb" id="breadcrumb"></div>
|
||
|
||
<!-- Navigation Buttons -->
|
||
<div class="navigation">
|
||
<button class="nav-btn" onclick="window.history.back()">
|
||
← Back
|
||
</button>
|
||
{% if relpath != "." %}
|
||
<a href="../index.html" class="nav-btn">
|
||
↑ Parent Directory
|
||
</a>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<!-- Folder Tree -->
|
||
<div class="folder-tree" id="folderTree"></div>
|
||
|
||
<!-- View Toggle Controls - Only show if there are plot items -->
|
||
{% if items %}
|
||
<div class="view-controls">
|
||
<button class="view-btn active" data-view="grid" title="Grid View">
|
||
<svg width="16" height="16" viewBox="0 0 16 16">
|
||
<rect x="1" y="1" width="6" height="6" fill="currentColor"/>
|
||
<rect x="9" y="1" width="6" height="6" fill="currentColor"/>
|
||
<rect x="1" y="9" width="6" height="6" fill="currentColor"/>
|
||
<rect x="9" y="9" width="6" height="6" fill="currentColor"/>
|
||
</svg>
|
||
</button>
|
||
<button class="view-btn" data-view="list-large" title="Large List View">
|
||
<svg width="16" height="16" viewBox="0 0 16 16">
|
||
<rect x="1" y="2" width="4" height="3" fill="currentColor"/>
|
||
<rect x="7" y="2" width="8" height="1" fill="currentColor"/>
|
||
<rect x="7" y="4" width="6" height="1" fill="currentColor"/>
|
||
<rect x="1" y="7" width="4" height="3" fill="currentColor"/>
|
||
<rect x="7" y="7" width="8" height="1" fill="currentColor"/>
|
||
<rect x="7" y="9" width="6" height="1" fill="currentColor"/>
|
||
<rect x="1" y="12" width="4" height="3" fill="currentColor"/>
|
||
<rect x="7" y="12" width="8" height="1" fill="currentColor"/>
|
||
<rect x="7" y="14" width="6" height="1" fill="currentColor"/>
|
||
</svg>
|
||
</button>
|
||
<button class="view-btn" data-view="list-compact" title="Compact List View">
|
||
<svg width="16" height="16" viewBox="0 0 16 16">
|
||
<rect x="1" y="3" width="14" height="1" fill="currentColor"/>
|
||
<rect x="1" y="6" width="14" height="1" fill="currentColor"/>
|
||
<rect x="1" y="9" width="14" height="1" fill="currentColor"/>
|
||
<rect x="1" y="12" width="14" height="1" fill="currentColor"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
{% endif %}
|
||
|
||
<!-- Plot Container -->
|
||
<div class="plot-container grid-view" id="plotContainer">
|
||
{% for item in items %}
|
||
<div class="plot-item grid-item">
|
||
<a href="{{ item.pdf_href }}" class="plot-link">
|
||
<img src="{{ item.png_href }}" alt="{{ item.name }}" class="plot-thumbnail">
|
||
</a>
|
||
<div class="plot-info">
|
||
<div class="plot-name" title="{{ item.name }}">{{ item.name }}</div>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
|
||
<!-- Subdirectories -->
|
||
{% if subdirs %}
|
||
<h2>Subdirectories</h2>
|
||
<ul>
|
||
{% for sub in subdirs %}
|
||
<li><a href="{{ sub }}/index.html">📁 {{ sub }}</a></li>
|
||
{% endfor %}
|
||
</ul>
|
||
{% endif %}
|
||
|
||
<!-- Recent Plots Sidebar -->
|
||
<div class="sidebar-overlay" id="sidebarOverlay" onclick="toggleSidebar()"></div>
|
||
<div class="sidebar" id="sidebar">
|
||
<div class="sidebar-header">
|
||
<h3 class="sidebar-title">Recent Plots</h3>
|
||
<button class="sidebar-close" onclick="toggleSidebar()">×</button>
|
||
</div>
|
||
<div class="sidebar-content" id="sidebarContent">
|
||
<div style="text-align: center; color: var(--breadcrumb-color); margin: 2rem 0;">
|
||
No recent plots yet
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Floating Action Buttons -->
|
||
<div class="floating-buttons">
|
||
<button class="floating-btn sidebar-toggle" onclick="toggleSidebar()" id="sidebarToggle" title="Recent Plots (Ctrl+R)">
|
||
📋
|
||
</button>
|
||
<button class="floating-btn compare-toggle" onclick="app.toggleCompareMode()" id="compareToggle" title="Compare Plots (Ctrl+C)">
|
||
⚖️
|
||
</button>
|
||
<button class="floating-btn theme-toggle" onclick="toggleTheme()" id="themeToggle" title="Toggle Theme (Ctrl+T)">
|
||
☀️
|
||
</button>
|
||
<button class="floating-btn refresh-btn" onclick="refreshGallery()" id="refreshBtn" title="Regenerate Gallery (F5)">
|
||
🔄
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Keyboard Shortcuts Help -->
|
||
<div class="shortcuts-help" id="shortcutsHelp">
|
||
<h4>Keyboard Shortcuts</h4>
|
||
<div class="shortcut-item">
|
||
<span>Search</span>
|
||
<span class="shortcut-key">Ctrl+K</span>
|
||
</div>
|
||
<div class="shortcut-item">
|
||
<span>Recent plots</span>
|
||
<span class="shortcut-key">Ctrl+R</span>
|
||
</div>
|
||
<div class="shortcut-item">
|
||
<span>Compare plots</span>
|
||
<span class="shortcut-key">Ctrl+C</span>
|
||
</div>
|
||
<div class="shortcut-item">
|
||
<span>Export plots</span>
|
||
<span class="shortcut-key">Ctrl+E</span>
|
||
</div>
|
||
<div class="shortcut-item">
|
||
<span>Exit selection mode</span>
|
||
<span class="shortcut-key">Esc</span>
|
||
</div>
|
||
<div class="shortcut-item">
|
||
<span>Refresh</span>
|
||
<span class="shortcut-key">F5</span>
|
||
</div>
|
||
<div class="shortcut-item">
|
||
<span>Toggle theme</span>
|
||
<span class="shortcut-key">Ctrl+T</span>
|
||
</div>
|
||
<div class="shortcut-item">
|
||
<span>Toggle view</span>
|
||
<span class="shortcut-key">Ctrl+V</span>
|
||
</div>
|
||
<div class="shortcut-item">
|
||
<span>Help</span>
|
||
<span class="shortcut-key">?</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Gallery Statistics -->
|
||
<div class="gallery-stats" id="galleryStats">
|
||
<div class="stats-item">
|
||
<span class="stats-label">📊 Files:</span>
|
||
<span class="stats-value" id="fileCount">0</span>
|
||
</div>
|
||
<div class="stats-item">
|
||
<span class="stats-label">📁 Folders:</span>
|
||
<span class="stats-value" id="folderCount">0</span>
|
||
</div>
|
||
<div class="stats-item">
|
||
<span class="stats-label">💾 Size:</span>
|
||
<span class="stats-value" id="totalSize">0 KB</span>
|
||
</div>
|
||
<div class="stats-item">
|
||
<span class="stats-label">🕒 Updated:</span>
|
||
<span class="stats-value" id="lastUpdated">Now</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Plot Comparison Overlay -->
|
||
<div class="comparison-overlay" id="comparisonOverlay">
|
||
<div class="comparison-container">
|
||
<div class="comparison-header">
|
||
<h2 class="comparison-title">Plot Comparison</h2>
|
||
<button class="comparison-close" onclick="app.closeComparison()" title="Close Comparison (Esc)">×</button>
|
||
</div>
|
||
<div class="comparison-content">
|
||
<div class="comparison-panel">
|
||
<div class="comparison-panel-header">
|
||
<span class="comparison-panel-title" id="leftPlotTitle">Plot A</span>
|
||
<button class="comparison-replace-btn" onclick="app.replacePlot('left')" id="leftReplaceBtn">Replace</button>
|
||
</div>
|
||
<div class="comparison-panel-content">
|
||
<div class="comparison-plot-container" id="leftPlotContainer">
|
||
<div class="comparison-placeholder" onclick="app.selectPlotForComparison('left')">
|
||
📊 Click to select first plot
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="comparison-panel">
|
||
<div class="comparison-panel-header">
|
||
<span class="comparison-panel-title" id="rightPlotTitle">Plot B</span>
|
||
<button class="comparison-replace-btn" onclick="app.replacePlot('right')" id="rightReplaceBtn">Replace</button>
|
||
</div>
|
||
<div class="comparison-panel-content">
|
||
<div class="comparison-plot-container" id="rightPlotContainer">
|
||
<div class="comparison-placeholder" onclick="app.selectPlotForComparison('right')">
|
||
📊 Click to select second plot
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Configuration for JavaScript -->
|
||
<script>
|
||
// Configuration object for the gallery app
|
||
window.galleryConfig = {
|
||
searchDebounceMs: {{ ui.search_debounce_ms|default(300) }},
|
||
maxRecentPlots: {{ ui.max_recent_plots|default(20) }},
|
||
workDir: "{{ paths.work_dir }}",
|
||
stats: {% if stats %}{{ stats|tojson }}{% else %}null{% endif %}
|
||
};
|
||
</script>
|
||
|
||
<!-- Metadata Popup Script -->
|
||
<script src="{{ assets_path }}/js/metadata-popup.js"></script>
|
||
|
||
<!-- Main JavaScript Application -->
|
||
<script type="module" src="{{ assets_path }}/js/main.js"></script>
|
||
</body>
|
||
</html>
|