librelad 875a60f90f LibrePortal v0.1.0 — initial release
A free, open, self-hosted app platform (GNU AGPLv3): one-click app deploys,
Traefik reverse proxy with automatic SSL, rootless Docker support, gluetun
VPN routing, and a web dashboard to manage it all.

Free & open forever to self-host; optional paid hosted services fund it.
See PROMISE.md.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Signed-off-by: librelad <librelad@digitalangels.vip>
2026-05-21 20:37:54 +01:00

97 lines
3.9 KiB
HTML
Executable File

<!-- App Management Layout -->
<div class="container">
<!-- Mobile overlay -->
<div class="mobile-overlay" id="mobile-overlay"></div>
<!-- Sidebar -->
<div class="sidebar" id="sidebar">
<!-- Categories will be dynamically generated here -->
<div id="dynamic-categories"></div>
</div>
<!-- Main content -->
<div class="main">
<div class="app-header" id="app-header">
<!-- App info will be dynamically inserted -->
</div>
<!-- Tabbed Interface -->
<div class="tabbed-interface">
<div class="tab-navigation">
<button class="tab-button active" data-tab="config" onclick="if(window.appTabbedManager) window.appTabbedManager.switchTab('config')">
<span class="tab-emoji">🛠️</span>
<span class="tab-name">Config</span>
</button>
<button class="tab-button" data-tab="services" onclick="if(window.appTabbedManager) window.appTabbedManager.switchTab('services')">
<span class="tab-emoji"></span>
<span class="tab-name">Services</span>
</button>
<button class="tab-button" data-tab="tools" style="display: none;" onclick="if(window.appTabbedManager) window.appTabbedManager.switchTab('tools')">
<span class="tab-emoji">🧰</span>
<span class="tab-name">Tools</span>
</button>
<button class="tab-button" data-tab="routing" style="display: none;" onclick="if(window.appTabbedManager) window.appTabbedManager.switchTab('routing')">
<span class="tab-emoji">🛡️</span>
<span class="tab-name">Routing</span>
</button>
<button class="tab-button" data-tab="backups" onclick="if(window.appTabbedManager) window.appTabbedManager.switchTab('backups')">
<span class="tab-emoji">💾</span>
<span class="tab-name">Backups</span>
</button>
</div>
<!-- Tab Content -->
<div class="tab-content">
<!-- Config Tab -->
<div class="tab-pane active" id="config-tab">
<div class="config-section" id="config-section">
<!-- Config form will be dynamically inserted -->
</div>
</div>
<!-- Services Tab -->
<div class="tab-pane" id="services-tab">
<div class="services-section">
<div id="services-list" class="services-list">
<!-- Service rows are rendered here by services-manager.js -->
</div>
</div>
</div>
<!-- Tools Tab -->
<div class="tab-pane" id="tools-tab">
<div class="tools-section">
<div id="tools-list" class="tools-list">
<!-- Tool buttons are rendered here by tools-manager.js -->
</div>
</div>
</div>
<!-- Routing Tab (Traefik only) -->
<div class="tab-pane" id="routing-tab">
<div class="routing-section-wrap">
<div id="routing-list" class="routing-list">
<!-- Routing rows rendered by routing-manager.js -->
</div>
</div>
</div>
<!-- Backups Tab -->
<div class="tab-pane" id="backups-tab">
<div class="backup-section" id="backup-section">
<div class="backup-app-card" id="backup-app-card">
<div class="backup-app-card-status" id="backup-app-card-status">Loading…</div>
<div class="backup-app-card-actions">
<button type="button" class="backup-primary-btn" id="backup-app-card-backup-btn">Backup now</button>
<a class="backup-secondary-btn" href="/backup">Open backup center →</a>
</div>
<div class="backup-app-card-snapshots" id="backup-app-card-snapshots"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>