mirror/NetAlertX
1
0
Fork 0
mirror of https://github.com/jokob-sk/NetAlertX.git synced 2026-06-21 14:49:59 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1679 from netalertx/next_release

Browse Source 
Next release
This commit is contained in:
Jokob @NetAlertX
2026-06-20 22:14:20 +10:00
committed by GitHub
parent 7b8781498c 6194134cd0
commit bfbe04e98e
48 changed files with 1360 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
front/php/templates/footer.php
View File

@@ -43,6 +43,9 @@
</div>
<!-- ./wrapper -->
<!-- Modals — placed outside .wrapper so position:fixed modals are in the root stacking context -->
<?php require 'php/templates/modals.php'; ?>
<!-- jQuery UI -->
<script src="lib/jquery-ui/jquery-ui.min.js"></script>

2
front/php/templates/header.php
View File

@@ -151,7 +151,7 @@
<div class="nax_semitransparent-panel"></div>
<div class="panel panel-default nax_spinner">
<table>
<td id="loadingSpinnerText" width="130px" ></td>
<td id="loadingSpinnerText" width="130px">Loading...</td>
<td><i class="fa-solid fa-spinner fa-spin-pulse"></i></td>
</table>
</div>

6
front/php/templates/migrationCheck.php
View File

@@ -1,6 +1,4 @@
<?php
require 'php/templates/modals.php';
<?php
//------------------------------------------------------------------------------
// check if authenticated
require_once $_SERVER['DOCUMENT_ROOT'] . '/php/templates/security.php';
@@ -14,7 +12,7 @@ $configFile = '/home/pi/pialert/conf/pialert.conf';
$databaseFile = '/home/pi/pialert/db/pialert.db';
if (file_exists($configFile) || file_exists($databaseFile)) {
echo 'true';
} else {echo 'false'; }

67
front/php/templates/skel_device_details.php Normal file
View File

@@ -0,0 +1,67 @@
<!-- Device Details Loading Skeleton ======================================= -->
<div id="device-details-skeleton">
<!-- Content header area -------------------------------------------------- -->
<div class="skel-detail-header">
<div class="skel-detail-title skel-shimmer"></div>
<div class="skel-detail-info-panel">
<div class="skel-shimmer" style="width:76px; height:76px; border-radius:4px; flex-shrink:0;"></div>
<div style="flex:1; display:flex; flex-direction:column; gap:9px; padding:10px 0 10px 10px;">
<span class="skel-line skel-shimmer" style="width:55%"></span>
<span class="skel-line skel-shimmer" style="width:38%"></span>
<span class="skel-line skel-shimmer" style="width:45%"></span>
</div>
</div>
</div>
<!-- Top stat tiles -------------------------------------------------------- -->
<div class="row">
<div class="col-lg-3 col-sm-6 col-xs-6 padding-5px">
<div class="skel-tile">
<div class="skel-tile-inner">
<div class="skel-tile-num skel-shimmer"></div>
<div class="skel-tile-label skel-shimmer"></div>
</div>
<div class="skel-tile-icon-area">
<div class="skel-tile-icon-shape skel-shimmer"></div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 col-xs-6 padding-5px">
<div class="skel-tile">
<div class="skel-tile-inner">
<div class="skel-tile-num skel-shimmer"></div>
<div class="skel-tile-label skel-shimmer"></div>
</div>
<div class="skel-tile-icon-area">
<div class="skel-tile-icon-shape skel-shimmer"></div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 col-xs-6 padding-5px">
<div class="skel-tile">
<div class="skel-tile-inner">
<div class="skel-tile-num skel-shimmer"></div>
<div class="skel-tile-label skel-shimmer"></div>
</div>
<div class="skel-tile-icon-area">
<div class="skel-tile-icon-shape skel-shimmer"></div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 col-xs-6 padding-5px">
<div class="skel-tile">
<div class="skel-tile-inner">
<div class="skel-tile-num skel-shimmer"></div>
<div class="skel-tile-label skel-shimmer"></div>
</div>
<div class="skel-tile-icon-area">
<div class="skel-tile-icon-shape skel-shimmer"></div>
</div>
</div>
</div>
</div>
</div>
<!-- /Device Details Loading Skeleton ====================================== -->

301
front/php/templates/skel_devices.php Normal file
View File

@@ -0,0 +1,301 @@
<!-- Devices Loading Skeleton ============================================== -->
<div id="devices-skeleton">
<!-- Tile cards row -------------------------------------------------------- -->
<div class="row">
<div class="col-lg-2 col-sm-4 col-xs-6 padding-5px">
<div class="skel-tile">
<div class="skel-tile-inner">
<div class="skel-tile-num skel-shimmer"></div>
<div class="skel-tile-label skel-shimmer"></div>
</div>
<div class="skel-tile-icon-area">
<div class="skel-tile-icon-shape skel-shimmer"></div>
</div>
</div>
</div>
<div class="col-lg-2 col-sm-4 col-xs-6 padding-5px">
<div class="skel-tile">
<div class="skel-tile-inner">
<div class="skel-tile-num skel-shimmer"></div>
<div class="skel-tile-label skel-shimmer"></div>
</div>
<div class="skel-tile-icon-area">
<div class="skel-tile-icon-shape skel-shimmer"></div>
</div>
</div>
</div>
<div class="col-lg-2 col-sm-4 col-xs-6 padding-5px">
<div class="skel-tile">
<div class="skel-tile-inner">
<div class="skel-tile-num skel-shimmer"></div>
<div class="skel-tile-label skel-shimmer"></div>
</div>
<div class="skel-tile-icon-area">
<div class="skel-tile-icon-shape skel-shimmer"></div>
</div>
</div>
</div>
<div class="col-lg-2 col-sm-4 col-xs-6 padding-5px">
<div class="skel-tile">
<div class="skel-tile-inner">
<div class="skel-tile-num skel-shimmer"></div>
<div class="skel-tile-label skel-shimmer"></div>
</div>
<div class="skel-tile-icon-area">
<div class="skel-tile-icon-shape skel-shimmer"></div>
</div>
</div>
</div>
<div class="col-lg-2 col-sm-4 col-xs-6 padding-5px">
<div class="skel-tile">
<div class="skel-tile-inner">
<div class="skel-tile-num skel-shimmer"></div>
<div class="skel-tile-label skel-shimmer"></div>
</div>
<div class="skel-tile-icon-area">
<div class="skel-tile-icon-shape skel-shimmer"></div>
</div>
</div>
</div>
<div class="col-lg-2 col-sm-4 col-xs-6 padding-5px">
<div class="skel-tile">
<div class="skel-tile-inner">
<div class="skel-tile-num skel-shimmer"></div>
<div class="skel-tile-label skel-shimmer"></div>
</div>
<div class="skel-tile-icon-area">
<div class="skel-tile-icon-shape skel-shimmer"></div>
</div>
</div>
</div>
</div>
<!-- /Tile cards row ------------------------------------------------------- -->
<!-- Chart section --------------------------------------------------------- -->
<div class="row">
<div class="col-xs-12">
<div class="skel-chart-box">
<div class="skel-box-header">
<span class="skel-line skel-shimmer" style="width:220px"></span>
<span class="skel-line skel-shimmer" style="width:80px; margin-left:auto"></span>
</div>
<div class="skel-chart-body skel-shimmer"></div>
</div>
</div>
</div>
<!-- /Chart section -------------------------------------------------------- -->
<!-- Table section --------------------------------------------------------- -->
<div class="row">
<div class="col-xs-12">
<div class="skel-table-box">
<!-- Box header -->
<div class="skel-box-header">
<span class="skel-line skel-shimmer" style="width:180px"></span>
<span class="skel-line skel-shimmer" style="width:110px; margin-left:auto"></span>
</div>
<!-- Column headers -->
<div class="skel-table-header-row">
<span class="skel-th skel-shimmer" style="flex:0.5"></span>
<span class="skel-th skel-shimmer" style="flex:1.5"></span>
<span class="skel-th skel-shimmer" style="flex:2"></span>
<span class="skel-th skel-shimmer" style="flex:1.5"></span>
<span class="skel-th skel-shimmer" style="flex:1.5"></span>
<span class="skel-th skel-shimmer" style="flex:1"></span>
</div>
<!-- Data rows -->
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
</div>
</div>
</div>
<!-- /Table section -------------------------------------------------------- -->
</div>
<!-- /Devices Loading Skeleton ============================================= -->

44
front/php/templates/skel_events.php Normal file
View File

@@ -0,0 +1,44 @@
<div id="events-skeleton">
<!-- 6 stat tiles -->
<div class="row">
<?php for ($i = 0; $i < 6; $i++): ?>
<div class="col-lg-2 col-sm-4 col-xs-6">
<div class="skel-tile">
<div class="skel-tile-inner">
<span class="skel-tile-num skel-shimmer"></span>
<span class="skel-tile-label skel-shimmer"></span>
</div>
<div class="skel-tile-icon-area">
<span class="skel-tile-icon-shape skel-shimmer"></span>
</div>
</div>
</div>
<?php endfor; ?>
</div>
<!-- events table -->
<div class="row" style="margin-top:12px">
<div class="col-xs-12">
<div class="skel-table-box">
<div class="skel-box-header">
<span class="skel-line skel-shimmer" style="width:120px"></span>
<span class="skel-line skel-shimmer" style="width:90px; margin-left:auto;"></span>
</div>
<div class="skel-table-header-row">
<?php for ($i = 0; $i < 6; $i++): ?>
<span class="skel-th skel-shimmer"></span>
<?php endfor; ?>
</div>
<?php for ($i = 0; $i < 8; $i++): ?>
<div class="skel-tr">
<?php for ($j = 0; $j < 6; $j++): ?>
<span class="skel-td skel-shimmer"></span>
<?php endfor; ?>
</div>
<?php endfor; ?>
</div>
</div>
</div>
</div>

19
front/php/templates/skel_notifications.php Normal file
View File

@@ -0,0 +1,19 @@
<div id="notifications-skeleton">
<div class="skel-table-box">
<div class="skel-box-header">
<span class="skel-line skel-shimmer" style="width:200px"></span>
</div>
<div class="skel-table-header-row">
<?php for ($i = 0; $i < 4; $i++): ?>
<span class="skel-th skel-shimmer"></span>
<?php endfor; ?>
</div>
<?php for ($i = 0; $i < 8; $i++): ?>
<div class="skel-tr">
<?php for ($j = 0; $j < 4; $j++): ?>
<span class="skel-td skel-shimmer"></span>
<?php endfor; ?>
</div>
<?php endfor; ?>
</div>
</div>

42
front/php/templates/skel_plugins.php Normal file
View File

@@ -0,0 +1,42 @@
<div id="plugins-skeleton">
<div class="skel-plugins-wrap">
<!-- Left nav sidebar -->
<div class="skel-plugins-nav">
<?php
$widths = [72, 60, 80, 55, 68, 75];
for ($i = 0; $i < 6; $i++):
?>
<div class="skel-plugins-nav-item">
<span class="skel-line skel-shimmer" style="width:<?= $widths[$i] ?>%"></span>
</div>
<?php endfor; ?>
</div>
<!-- Right content area -->
<div class="skel-plugins-body">
<!-- Sub-tab bar -->
<div class="skel-tabs-bar" style="border-radius: 0 4px 0 0; margin-bottom: 0;">
<span class="skel-tab skel-shimmer"></span>
<span class="skel-tab skel-shimmer"></span>
<span class="skel-tab skel-shimmer"></span>
</div>
<!-- Data table -->
<div class="skel-table-box" style="border-top: none; border-radius: 0 0 4px 4px;">
<div class="skel-table-header-row">
<?php for ($j = 0; $j < 5; $j++): ?>
<span class="skel-th skel-shimmer"></span>
<?php endfor; ?>
</div>
<?php for ($i = 0; $i < 8; $i++): ?>
<div class="skel-tr">
<?php for ($j = 0; $j < 5; $j++): ?>
<span class="skel-td skel-shimmer"></span>
<?php endfor; ?>
</div>
<?php endfor; ?>
</div>
</div>
</div>
</div>

45
front/php/templates/skel_presence.php Normal file
View File

@@ -0,0 +1,45 @@
<div id="presence-skeleton">
<!-- 6 stat tiles -->
<div class="row">
<?php for ($i = 0; $i < 6; $i++): ?>
<div class="col-lg-2 col-sm-4 col-xs-6">
<div class="skel-tile">
<div class="skel-tile-inner">
<span class="skel-tile-num skel-shimmer"></span>
<span class="skel-tile-label skel-shimmer"></span>
</div>
<div class="skel-tile-icon-area">
<span class="skel-tile-icon-shape skel-shimmer"></span>
</div>
</div>
</div>
<?php endfor; ?>
</div>
<!-- activity chart -->
<div class="row" style="margin-top:12px">
<div class="col-md-12">
<div class="skel-chart-box">
<div class="skel-box-header">
<span class="skel-line skel-shimmer" style="width:160px"></span>
</div>
<div class="skel-chart-body skel-shimmer" style="height:160px"></div>
</div>
</div>
</div>
<!-- presence calendar -->
<div class="row">
<div class="col-md-12">
<div class="skel-chart-box">
<div class="skel-box-header">
<span class="skel-line skel-shimmer" style="width:100px"></span>
<span class="skel-line skel-shimmer" style="width:180px; margin-left:auto;"></span>
</div>
<div class="skel-chart-body skel-shimmer" style="height:380px"></div>
</div>
</div>
</div>
</div>

23
front/php/templates/skel_report.php Normal file
View File

@@ -0,0 +1,23 @@
<div id="report-skeleton">
<div class="skel-table-box">
<div class="skel-box-header">
<span class="skel-line skel-shimmer" style="width:160px"></span>
</div>
<!-- nav controls + format select -->
<div style="display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:12px 15px; border-bottom:1px solid var(--skel-border);">
<span class="skel-shimmer" style="height:32px; width:34px; border-radius:4px;"></span>
<span class="skel-shimmer" style="height:14px; width:40px;"></span>
<span class="skel-shimmer" style="height:32px; width:34px; border-radius:4px;"></span>
<span class="skel-shimmer" style="height:32px; width:80px; border-radius:4px;"></span>
<span class="skel-shimmer" style="height:14px; width:160px;"></span>
</div>
<!-- report body shimmer lines -->
<div style="padding:20px 15px; display:flex; flex-direction:column; gap:10px;">
<?php foreach ([90, 75, 85, 60, 80, 70, 65, 88] as $w): ?>
<span class="skel-shimmer" style="height:16px; width:<?= $w ?>%;"></span>
<?php endforeach; ?>
</div>
</div>
</div>

106
front/php/templates/skel_settings.php Normal file
View File

@@ -0,0 +1,106 @@
<!-- Settings Loading Skeleton --------------------------------------------- -->
<div id="settings-skeleton">
<!-- Overview panel skeleton -->
<div class="skel-overview-panel">
<div class="skel-overview-heading">
<span class="skel-icon-block skel-shimmer"></span>
<span class="skel-line skel-shimmer" style="width:180px"></span>
</div>
<div class="skel-overview-body">
<div class="skel-overview-card skel-shimmer col-xs-12 col-sm-6 col-md-4 col-lg-3 padding-5px"></div>
<div class="skel-overview-card skel-shimmer col-xs-12 col-sm-6 col-md-4 col-lg-3 padding-5px"></div>
<div class="skel-overview-card skel-shimmer col-xs-12 col-sm-6 col-md-4 col-lg-3 padding-5px"></div>
</div>
<div class="skel-overview-heading">
<span class="skel-icon-block skel-shimmer"></span>
<span class="skel-line skel-shimmer" style="width:180px"></span>
</div>
<div class="skel-overview-body">
<div class="skel-overview-card skel-shimmer col-xs-12 col-sm-6 col-md-4 col-lg-3 padding-5px"></div>
<div class="skel-overview-card skel-shimmer col-xs-12 col-sm-6 col-md-4 col-lg-3 padding-5px"></div>
<div class="skel-overview-card skel-shimmer col-xs-12 col-sm-6 col-md-4 col-lg-3 padding-5px"></div>
</div>
</div>
<!-- Core section (open, with a plugin block) -->
<div class="skel-section">
<div class="skel-section-header">
<span class="skel-icon-block skel-shimmer"></span>
<span class="skel-line skel-shimmer" style="width:60px"></span>
</div>
<div class="skel-plugin-block">
<div class="skel-plugin-header">
<span class="skel-icon-block skel-shimmer"></span>
<span class="skel-line skel-shimmer" style="width:75px"></span>
<span class="skel-line skel-shimmer" style="width:210px"></span>
</div>
<div class="skel-plugin-body">
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer"></span><span class="skel-cell-desc skel-shimmer"></span><span class="skel-cell-input skel-shimmer" style="height:75px"></span></div>
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer" ></span><span class="skel-cell-desc skel-shimmer" ></span><span class="skel-cell-input skel-shimmer" style="max-width:35px"></span></div>
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer" ></span><span class="skel-cell-desc skel-shimmer" ></span><span class="skel-cell-input skel-shimmer" style="max-width:35px"></span></div>
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer"></span><span class="skel-cell-desc skel-shimmer" ></span><span class="skel-cell-input skel-shimmer" style="height:75px"></span></div>
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer" ></span><span class="skel-cell-desc skel-shimmer" ></span><span class="skel-cell-input skel-shimmer"></span></div>
</div>
</div>
</div>
<!-- System section (open) -->
<div class="skel-section">
<div class="skel-section-header">
<span class="skel-icon-block skel-shimmer"></span>
<span class="skel-line skel-shimmer" style="width:80px"></span>
</div>
<div class="skel-plugin-block">
<div class="skel-plugin-header">
<span class="skel-icon-block skel-shimmer"></span>
<span class="skel-line skel-shimmer" style="width:90px"></span>
<span class="skel-line skel-shimmer" style="width:185px"></span>
</div>
<div class="skel-plugin-body">
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer"></span><span class="skel-cell-desc skel-shimmer"></span><span class="skel-cell-input skel-shimmer"></span></div>
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer"></span><span class="skel-cell-desc skel-shimmer"></span><span class="skel-cell-input skel-shimmer"></span></div>
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer"></span><span class="skel-cell-desc skel-shimmer"></span><span class="skel-cell-input skel-shimmer"></span></div>
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer"></span><span class="skel-cell-desc skel-shimmer"></span><span class="skel-cell-input skel-shimmer"></span></div>
</div>
</div>
</div>
<!-- Device Scanners section (closed) -->
<div class="skel-section">
<div class="skel-section-header">
<span class="skel-icon-block skel-shimmer"></span>
<span class="skel-line skel-shimmer" style="width:140px"></span>
</div>
</div>
<!-- Other Scanners section (open) -->
<div class="skel-section">
<div class="skel-section-header">
<span class="skel-icon-block skel-shimmer"></span>
<span class="skel-line skel-shimmer" style="width:120px"></span>
</div>
<div class="skel-plugin-block">
<div class="skel-plugin-header">
<span class="skel-icon-block skel-shimmer"></span>
<span class="skel-line skel-shimmer" style="width:65px"></span>
<span class="skel-line skel-shimmer" style="width:200px"></span>
</div>
<div class="skel-plugin-body">
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer" style="width:16%"></span><span class="skel-cell-desc skel-shimmer" style="width:40%"></span><span class="skel-cell-input skel-shimmer"></span></div>
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer"></span><span class="skel-cell-desc skel-shimmer" style="width:33%"></span><span class="skel-cell-input skel-shimmer"></span></div>
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer" style="width:19%"></span><span class="skel-cell-desc skel-shimmer" style="width:42%"></span><span class="skel-cell-input skel-shimmer"></span></div>
</div>
</div>
</div>
<!-- Publishers section (closed) -->
<div class="skel-section">
<div class="skel-section-header">
<span class="skel-icon-block skel-shimmer"></span>
<span class="skel-line skel-shimmer" style="width:100px"></span>
</div>
</div>
</div>
<!-- /Settings Loading Skeleton -------------------------------------------- -->

42
front/php/templates/skel_tab_details.php Normal file
View File

@@ -0,0 +1,42 @@
<!-- Details Tab Skeleton ================================================== -->
<div id="skel-tab-details" class="skel-tab-pane">
<div class="skel-detail-form">
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:340px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:260px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:400px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:300px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:220px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:380px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:280px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:320px"></span>
</div>
<div class="skel-form-footer">
<span class="skel-form-btn skel-shimmer"></span>
<span class="skel-form-btn skel-shimmer"></span>
</div>
</div>
</div>
<!-- /Details Tab Skeleton ================================================= -->

75
front/php/templates/skel_tab_events.php Normal file
View File

@@ -0,0 +1,75 @@
<!-- Events Tab Skeleton =================================================== -->
<div id="skel-tab-events" class="skel-tab-pane">
<!-- Checkbox row -->
<div style="display:flex; align-items:center; gap:10px; margin-bottom:12px; padding:0 2px;">
<span class="skel-shimmer" style="width:16px; height:16px; border-radius:3px; flex-shrink:0;"></span>
<span class="skel-line skel-shimmer" style="width:220px"></span>
</div>
<!-- Table -->
<div class="skel-table-box">
<div class="skel-table-header-row">
<span class="skel-th skel-shimmer" style="flex:1.5"></span>
<span class="skel-th skel-shimmer" style="flex:1.5"></span>
<span class="skel-th skel-shimmer" style="flex:2"></span>
<span class="skel-th skel-shimmer" style="flex:1.5"></span>
<span class="skel-th skel-shimmer" style="flex:2"></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:15%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:14%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:18%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:12%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:20%"></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:13%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:16%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:22%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:11%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:16%"></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:16%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:13%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:19%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:14%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:18%"></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:14%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:15%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:20%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:13%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:22%"></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:12%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:17%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:17%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:10%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:24%"></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:15%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:12%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:21%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:15%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:19%"></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:17%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:14%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:18%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:12%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:21%"></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:13%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:16%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:23%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:11%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:17%"></span>
</div>
</div>
</div>
<!-- /Events Tab Skeleton ================================================== -->

11
front/php/templates/skel_tab_maint_backup.php Normal file
View File

@@ -0,0 +1,11 @@
<div class="skel-tab-pane" id="skel-tab-maint-backup">
<?php
$widths = [55, 60, 65, 50, 55, 70];
for ($i = 0; $i < 6; $i++):
?>
<div class="skel-tr">
<span class="skel-shimmer" style="height:32px; width:185px; flex-shrink:0; border-radius:4px;"></span>
<span class="skel-line skel-shimmer" style="width:<?= $widths[$i] ?>%"></span>
</div>
<?php endfor; ?>
</div>

11
front/php/templates/skel_tab_maint_dbtools.php Normal file
View File

@@ -0,0 +1,11 @@
<div class="skel-tab-pane" id="skel-tab-maint-dbtools">
<?php
$widths = [55, 70, 45, 62, 58, 50, 55, 48];
for ($i = 0; $i < 8; $i++):
?>
<div class="skel-tr">
<span class="skel-shimmer" style="height:32px; width:185px; flex-shrink:0; border-radius:4px;"></span>
<span class="skel-line skel-shimmer" style="width:<?= $widths[$i] ?>%"></span>
</div>
<?php endfor; ?>
</div>

10
front/php/templates/skel_tab_maint_logging.php Normal file
View File

@@ -0,0 +1,10 @@
<div class="skel-tab-pane" id="skel-tab-maint-logging">
<!-- Controls bar -->
<div style="display:flex; gap:20px; padding:10px 0 15px; align-items:center;">
<span class="skel-line skel-shimmer" style="width:120px"></span>
<span class="skel-line skel-shimmer" style="width:100px"></span>
<span class="skel-shimmer" style="height:32px; flex:1; border-radius:4px;"></span>
</div>
<!-- Log content area -->
<span class="skel-shimmer" style="display:block; width:100%; height:280px; border-radius:4px;"></span>
</div>

8
front/php/templates/skel_tab_maint_multiedit.php Normal file
View File

@@ -0,0 +1,8 @@
<div class="skel-tab-pane" id="skel-tab-maint-multiedit">
<?php for ($i = 0; $i < 8; $i++): ?>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer"></span>
</div>
<?php endfor; ?>
</div>

12
front/php/templates/skel_tab_presence.php Normal file
View File

@@ -0,0 +1,12 @@
<!-- Presence Tab Skeleton ================================================= -->
<div id="skel-tab-presence" class="skel-tab-pane">
<div class="skel-chart-box">
<div class="skel-box-header">
<span class="skel-line skel-shimmer" style="width:80px"></span>
<span class="skel-line skel-shimmer" style="width:180px; margin:0 auto"></span>
<span class="skel-line skel-shimmer" style="width:80px; margin-left:auto"></span>
</div>
<div class="skel-chart-body skel-shimmer" style="height:380px"></div>
</div>
</div>
<!-- /Presence Tab Skeleton ================================================ -->

78
front/php/templates/skel_tab_sessions.php Normal file
View File

@@ -0,0 +1,78 @@
<!-- Sessions Tab Skeleton ================================================= -->
<div id="skel-tab-sessions" class="skel-tab-pane">
<div class="skel-table-box">
<div class="skel-table-header-row">
<span class="skel-th skel-shimmer" style="flex:0.5"></span>
<span class="skel-th skel-shimmer" style="flex:1.5"></span>
<span class="skel-th skel-shimmer" style="flex:1.5"></span>
<span class="skel-th skel-shimmer" style="flex:1"></span>
<span class="skel-th skel-shimmer" style="flex:1"></span>
<span class="skel-th skel-shimmer" style="flex:2"></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:16%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:16%"></span>
<span class="skel-td skel-shimmer" style="flex:1; max-width:10%"></span>
<span class="skel-td skel-shimmer" style="flex:1; max-width:12%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:22%"></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:14%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:18%"></span>
<span class="skel-td skel-shimmer" style="flex:1; max-width:8%"></span>
<span class="skel-td skel-shimmer" style="flex:1; max-width:11%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:18%"></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:17%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:15%"></span>
<span class="skel-td skel-shimmer" style="flex:1; max-width:10%"></span>
<span class="skel-td skel-shimmer" style="flex:1; max-width:13%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:20%"></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:13%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:17%"></span>
<span class="skel-td skel-shimmer" style="flex:1; max-width:9%"></span>
<span class="skel-td skel-shimmer" style="flex:1; max-width:14%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:16%"></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:15%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:14%"></span>
<span class="skel-td skel-shimmer" style="flex:1; max-width:11%"></span>
<span class="skel-td skel-shimmer" style="flex:1; max-width:10%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:24%"></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:12%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:19%"></span>
<span class="skel-td skel-shimmer" style="flex:1; max-width:9%"></span>
<span class="skel-td skel-shimmer" style="flex:1; max-width:12%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:19%"></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:18%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:13%"></span>
<span class="skel-td skel-shimmer" style="flex:1; max-width:10%"></span>
<span class="skel-td skel-shimmer" style="flex:1; max-width:15%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:21%"></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:16%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:16%"></span>
<span class="skel-td skel-shimmer" style="flex:1; max-width:8%"></span>
<span class="skel-td skel-shimmer" style="flex:1; max-width:11%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:17%"></span>
</div>
</div>
</div>
<!-- /Sessions Tab Skeleton ================================================ -->

12
front/php/templates/skel_tab_sysinfo_initcheck.php Normal file
View File

@@ -0,0 +1,12 @@
<div class="skel-info-tab">
<!-- status banner -->
<div style="margin-bottom:16px">
<span class="skel-shimmer" style="height:44px; border-radius:4px; display:block;"></span>
</div>
<!-- card grid -->
<div style="display:flex; flex-wrap:wrap; gap:10px;">
<?php for ($i = 0; $i < 9; $i++): ?>
<span class="skel-shimmer" style="height:76px; width:190px; border-radius:4px;"></span>
<?php endfor; ?>
</div>
</div>

8
front/php/templates/skel_tab_sysinfo_network.php Normal file
View File

@@ -0,0 +1,8 @@
<div class="skel-info-tab">
<?php for ($i = 0; $i < 10; $i++): ?>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer"></span>
</div>
<?php endfor; ?>
</div>

8
front/php/templates/skel_tab_sysinfo_server.php Normal file
View File

@@ -0,0 +1,8 @@
<div class="skel-info-tab">
<?php for ($i = 0; $i < 14; $i++): ?>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer"></span>
</div>
<?php endfor; ?>
</div>

14
front/php/templates/skel_tab_sysinfo_storage.php Normal file
View File

@@ -0,0 +1,14 @@
<div class="skel-info-tab">
<div class="skel-table-header-row">
<?php for ($i = 0; $i < 5; $i++): ?>
<span class="skel-th skel-shimmer"></span>
<?php endfor; ?>
</div>
<?php for ($i = 0; $i < 6; $i++): ?>
<div class="skel-tr">
<?php for ($j = 0; $j < 5; $j++): ?>
<span class="skel-td skel-shimmer"></span>
<?php endfor; ?>
</div>
<?php endfor; ?>
</div>

12
front/php/templates/skel_workflows.php Normal file
View File

@@ -0,0 +1,12 @@
<div id="workflows-skeleton">
<?php for ($i = 0; $i < 3; $i++): ?>
<div class="skel-workflow-card">
<div class="skel-workflow-header">
<span class="skel-line skel-shimmer" style="width:<?= [220, 180, 200][$i] ?>px"></span>
<span class="skel-line skel-shimmer" style="width:55px; margin-left:auto;"></span>
<span class="skel-line skel-shimmer" style="width:55px; margin-left:auto;"></span>
<span class="skel-line skel-shimmer" style="width:55px; margin-left:auto;"></span>
</div>
</div>
<?php endfor; ?>
</div>