feat: add download modal with app summary and progress bar for APK download

This commit is contained in:
2026-06-14 09:52:18 -04:00
parent f48a5a5495
commit 5453a5d856
2 changed files with 95 additions and 1 deletions

View File

@@ -78,7 +78,7 @@ if (!isset($user) || $user === null) {
<!-- Mobile -->
<hr class="nav-divider">
<div class="nav-section">Mobile</div>
<a href="/sysadmin.apk" class="nav-item" download>
<a href="#" class="nav-item" onclick="showDownloadModal(); return false;">
<i class="fas fa-download"></i>
<span>Download APK</span>
</a>
@@ -168,6 +168,42 @@ if (!isset($user) || $user === null) {
<div id="toastContainer" class="toast-container"></div>
<!-- Download Modal -->
<div class="modal" id="downloadModal" onclick="if (event.target === this) closeDownloadModal()">
<div class="modal-dialog" style="max-width: 440px;">
<div class="modal-header">
<h3><i class="fas fa-download" style="color:var(--accent);margin-right:0.5rem"></i>Download ServerManager</h3>
<button class="modal-close" onclick="closeDownloadModal()">&times;</button>
</div>
<div class="modal-body">
<p style="margin-bottom:1rem;font-size:0.92rem;line-height:1.6">
The Android companion app lets you manage your servers on the go:
</p>
<ul style="list-style:none;padding:0;margin:0 0 1.25rem;font-size:0.88rem;display:flex;flex-direction:column;gap:0.6rem">
<li><i class="fas fa-check-circle" style="color:var(--success);width:20px;text-align:center;margin-right:0.5rem"></i> Monitor server status and metrics</li>
<li><i class="fas fa-check-circle" style="color:var(--success);width:20px;text-align:center;margin-right:0.5rem"></i> Receive push notifications for alerts</li>
<li><i class="fas fa-check-circle" style="color:var(--success);width:20px;text-align:center;margin-right:0.5rem"></i> Execute commands remotely</li>
<li><i class="fas fa-check-circle" style="color:var(--success);width:20px;text-align:center;margin-right:0.5rem"></i> Manage services and processes</li>
</ul>
<div id="downloadProgressWrap" style="display:none">
<div style="display:flex;justify-content:space-between;font-size:0.8rem;color:var(--text-muted);margin-bottom:0.3rem">
<span>Downloading...</span>
<span id="downloadPercent">0%</span>
</div>
<div style="height:6px;background:var(--bg-tertiary);border-radius:3px;overflow:hidden">
<div id="downloadProgressBar" style="height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent-hover));border-radius:3px;transition:width 0.3s ease"></div>
</div>
</div>
</div>
<div class="modal-footer" id="downloadModalFooter">
<button class="btn btn-secondary" onclick="closeDownloadModal()">Cancel</button>
<button class="btn btn-primary" id="downloadConfirmBtn" onclick="startDownload()">
<i class="fas fa-download"></i> Download APK
</button>
</div>
</div>
</div>
<script src="/assets/js/app.js?v=<?= asset_version() ?>"></script>
<?php if (isset($scripts)): ?>
<?php foreach ($scripts as $script): ?>