From 942c4a6e8bbf12c53194b4df97f79017b6fc0c0a Mon Sep 17 00:00:00 2001
From: jokob-sk <jokob.sk@gmail.com>
Date: Tue, 23 Jun 2026 22:30:40 +1000
Subject: [PATCH] FE: skeleton uplift

---
 front/appEvents.php                     |  3 +-
 front/appEventsCore.php                 | 19 +++++++++----
 front/css/app.css                       | 38 ++++++++++++++++++-------
 front/css/dark-patch.css                | 32 +++++++++++++--------
 front/css/system-dark-patch.css         | 27 +++++++++++-------
 front/devices.php                       |  2 +-
 front/php/templates/header.php          |  2 +-
 front/php/templates/skel_app_events.php | 16 +++++++++++
 front/settings.php                      |  2 +-
 front/systeminfoNetwork.php             |  8 +++---
 10 files changed, 101 insertions(+), 48 deletions(-)
 create mode 100644 front/php/templates/skel_app_events.php

diff --git a/front/appEvents.php b/front/appEvents.php
index 4a894afc..2c8271ac 100755
--- a/front/appEvents.php
+++ b/front/appEvents.php
@@ -6,7 +6,7 @@
 
 
 <!-- Page ------------------------------------------------------------------ -->
-<div class="content-wrapper">
+<div id="appEvents" class="content-wrapper">
 
 <?php
    require 'appEventsCore.php';
@@ -15,6 +15,7 @@
 
 </div>
 
+
 <?php
   require 'php/templates/footer.php';
 ?>
\ No newline at end of file
diff --git a/front/appEventsCore.php b/front/appEventsCore.php
index 47febbbe..06ab52f7 100755
--- a/front/appEventsCore.php
+++ b/front/appEventsCore.php
@@ -1,21 +1,21 @@
+
 <span class="helpIcon">
     <a target="_blank" href="https://docs.netalertx.com/WORKFLOWS_DEBUGGING">
       <i class="fa fa-circle-question"></i>
     </a>
-  </span>
-<section class="content">
+</span>
+<?php require 'php/templates/skel_app_events.php'; ?>
+<section class="content">  
   <div class="nav-tabs-custom app-event-content" style="margin-bottom: 0px;">
     <ul id="tabs-location" class="nav nav-tabs col-sm-2 hidden">
       <li class="left-nav"><a class="col-sm-12" href="#" id="" data-toggle="tab">Events</a></li>
     </ul>
-    <div id="tabs-content-location" class="tab-content col-sm-12">
+    <div id="tabs-content-location" class="tab-content col-sm-12 table-responsive">
       <table class="table table-striped" id="appevents-table" data-my-dbtable="AppEvents"></table>
     </div>
-  </div>
+  </div>  
 </section>
 
-
-
 <script>
 
 // show loading dialog
@@ -116,6 +116,7 @@ $(document).ready(function () {
           });
 
           hideSpinner();
+          hideAppEventsSkeleton();
         },
         error: function () {
           callback({
@@ -181,8 +182,14 @@ $(document).ready(function () {
       }
     ]
   });
+});
 
+function hideAppEventsSkeleton() {
+  $('#skel-app-events').fadeOut(50, function () { $(this).remove(); });
+}
 
+window.addEventListener('load', function () {
+  setTimeout(hideAppEventsSkeleton, 15000);
 });
 
 
diff --git a/front/css/app.css b/front/css/app.css
index b0c1c8de..b1d11d5e 100755
--- a/front/css/app.css
+++ b/front/css/app.css
@@ -11,6 +11,7 @@
    Global Variables
 ----------------------------------------------------------------------------- */
 :root {
+    --color-white: #fff;
     --color-aqua: #00c0ef;
     --color-lightblue: #3c8dbc;
     --color-blue: #0060df;
@@ -18,6 +19,7 @@
     --color-yellow: #f39c12;
     --color-red: #dd4b39;
     --color-gray: #8c8c8c;
+    --color-darkgray: #3f3e3e;
     --color-black: #000;
 }
 
@@ -652,15 +654,15 @@ hr
 .btn-outline:hover
 {
   border: 1px solid var(--color-black);
-  background: transparent;
-  color: var(--color-black);
+  background-color: var(--color-black);
+  color: var(--color-white);
 }
 
 .btn-outline
 {
-  border: 1px solid var(--color-gray);
-  background: transparent;
-  color: var(--color-gray);
+  border: 1px solid var(--color-darkgray);
+  background-color: var(--color-white);
+  color: var(--color-darkgray);
 }
 
 /* -----------------------------------------------------------------------------
@@ -1069,6 +1071,8 @@ height: 50px;
 #settingsPage
 {
     display: grid;
+    margin-top: 50px;
+    padding-top: 0px;
 }
 
 
@@ -2535,6 +2539,14 @@ textarea[readonly],
     width: 100%;
 }
 
+/* -----------------------------------------------------------------------------
+   Sys info
+----------------------------------------------------------------------------- */
+#appEvents
+{
+    display: flow-root;
+}
+
 /* -----------------------------------------------------------------------------
    Floating edit button
 ----------------------------------------------------------------------------- */
@@ -2606,9 +2618,9 @@ table.dataTable tbody > tr.selected
     --skel-base:     #e2e2e2;
     --skel-shine:    #f0f0f0;
     --skel-section:  #d4d4d4;
-    --skel-panel-bg: #f5f5f5;
+    --skel-panel-bg: #fff;
     --skel-border:   #ddd;
-    --skel-bg:       #ecf0f5;
+    --skel-bg:       #fff;
 }
 
 @keyframes settingsShimmer {
@@ -2632,7 +2644,7 @@ table.dataTable tbody > tr.selected
 /* Positioning anchors */
 #settingsPage, #devicesPage, #deviceDetailsPage,
 #eventsPage, #presencePage, #reportPage, #notifications, #wf-content-wrapper, #pluginsPage,
-#panDetails, #panSessions, #panPresence, #panEvents {
+#panDetails, #panSessions, #panPresence, #panEvents, #appEvents {
     position: relative;
 }
 
@@ -2640,7 +2652,7 @@ table.dataTable tbody > tr.selected
 
 /* Page-level overlay base */
 #settings-skeleton, #devices-skeleton, #device-details-skeleton,
-#events-skeleton, #presence-skeleton, #report-skeleton,
+#events-skeleton, #presence-skeleton, #report-skeleton, #skel-app-events,
 #notifications-skeleton, #workflows-skeleton, #plugins-skeleton, .skel-tab-pane {
     position: absolute;
     top: 0;
@@ -2649,11 +2661,12 @@ table.dataTable tbody > tr.selected
     background-color: var(--skel-bg);
 }
 #settings-skeleton, #devices-skeleton, #device-details-skeleton,
-#events-skeleton, #presence-skeleton, #report-skeleton,
+#events-skeleton, #presence-skeleton, #report-skeleton, #skel-app-event,
 #notifications-skeleton, #workflows-skeleton, #plugins-skeleton { z-index: 50; }
 .skel-tab-pane           { z-index: 10; min-height: 400px; background-color: var(--skel-panel-bg);}
-#settings-skeleton       { margin: 15px; padding-top: 50px; min-height: 500px; }
+#settings-skeleton       { margin: 15px; min-height: 500px; }
 #devices-skeleton        { margin: 15px; top: 50px; min-height: 500px; }
+#skel-app-events         { margin: 15px; top: 50px; min-height: 500px; z-index: inherit;}
 #device-details-skeleton { margin: 15px; top: 42px; }
 #events-skeleton         { margin: 15px; top: 50px; min-height: 500px; }
 #presence-skeleton       { margin: 15px; top: 50px; min-height: 500px; }
@@ -2779,6 +2792,9 @@ table.dataTable tbody > tr.selected
 .skel-workflow-card     { border: 1px solid var(--skel-border); border-radius: 4px; margin-bottom: 8px; overflow: hidden; }
 .skel-workflow-header   { display: flex; align-items: center; height: 48px; padding: 0 15px; background: var(--skel-section); }
 
+/* ----- AppEvents -------------------------------------------------------- */
+#skel-app-event      { display: flex; gap: 0; min-height: 400px; }
+
 /* ----- Plugins ---------------------------------------------------------- */
 .skel-plugins-wrap      { display: flex; gap: 0; min-height: 400px; }
 .skel-plugins-nav       { flex-shrink: 0; border-right: 1px solid var(--skel-border); padding: 8px 0; }
diff --git a/front/css/dark-patch.css b/front/css/dark-patch.css
index b9ce841c..87eac858 100755
--- a/front/css/dark-patch.css
+++ b/front/css/dark-patch.css
@@ -14,6 +14,7 @@
   --color-aqua: #00c0ef;
   --color-lightblue: #3c8dbc;
   --color-blue: #0060df;
+  --color-white: #fff;
   --color-green: #00a65a;
   --color-yellow: #f39c12;
   --color-red: #dd4b39;
@@ -389,18 +390,25 @@ pre {
 td.highlight {
   background-color: rgba(255, 204, 0, 0.333);
 }
-.btn-default {
-  box-shadow: none;
-  background-color: #3e464c;
-  color: #bec5cb;
-  border: 1px solid #353c42;
-}
+  .btn-default {
+    box-shadow: none;
+    background-color: #3e464c;
+    color: #bec5cb;
+    border: 1px solid #353c42;
+  }
 
-.btn-outline {
-  border: 1px solid var(--color-black);
-  background: transparent;
-  color: var(--color-white);
-}
+  .btn-outline {
+    border: 1px solid var(--color-black);
+    background: transparent;
+    color: var(--color-white);
+  }
+
+  .btn-outline:hover
+  {
+    border: 1px solid var(--color-black);
+    background-color: var(--color-black);;
+    color: var(--color-white);
+  }
 
 /* Used in debug log page */
 .log-red {
@@ -747,7 +755,7 @@ table.dataTable tbody  tr.selected, table.dataTable tbody  tr  .selected
 
 .btn:hover
 {
-  color: var(--color-gray);
+  color: var(--color-white);
 }
 
 .logs, .log-area textarea
diff --git a/front/css/system-dark-patch.css b/front/css/system-dark-patch.css
index 8e96f601..e6aea1f8 100755
--- a/front/css/system-dark-patch.css
+++ b/front/css/system-dark-patch.css
@@ -20,7 +20,14 @@
     --color-yellow: #f39c12;
     --color-red: #dd4b39;
     --color-gray: #8c8c8c;
+    --color-darkgray: #3f3e3e;
     --color-white: #fff;
+    --skel-base: #353c42;
+    --skel-shine: #272c30;
+    --skel-section: #272c30;
+    --skel-panel-bg: #272c30;
+    --skel-border: #2a323e;
+    --skel-bg: #353c42;
   }
 
   :root {
@@ -402,6 +409,13 @@
     color: var(--color-white);
   }
 
+  .btn-outline:hover
+  {
+    border: 1px solid var(--color-black);
+    background-color: var(--color-black);;
+    color: var(--color-white);
+  }
+
   /* Used in debug log page */
   .log-red {
     color: #ff4038;
@@ -721,10 +735,10 @@
   color:#000;
 }
 
-.btn:hover
+/* .btn:hover
 {
   color: var(--color-white);
-}
+} */
 
 
 .logs, .log-area textarea
@@ -736,12 +750,3 @@
   cursor: pointer;
 }
 
-  /* Settings skeleton - dark theme */
-  :root {
-  --skel-base: #353c42;
-  --skel-shine: #272c30;
-  --skel-section: #272c30;
-  --skel-panel-bg: #272c30;
-  --skel-border: #2a323e;
-  --skel-bg: #353c42;
-  }
\ No newline at end of file
diff --git a/front/devices.php b/front/devices.php
index 0de11b63..79f5ff58 100755
--- a/front/devices.php
+++ b/front/devices.php
@@ -185,7 +185,7 @@
 
 // -----------------------------------------------------------------------------
 function hideDevicesSkeleton() {
-  $('#devices-skeleton').fadeOut(50, function() { $(this).remove(); });
+   $('#devices-skeleton').fadeOut(50, function() { $(this).remove(); });
 }
 
 // Fallback: ensure skeleton is removed even if DataTable fails to initialize
diff --git a/front/php/templates/header.php b/front/php/templates/header.php
index 38f1f742..67d45387 100755
--- a/front/php/templates/header.php
+++ b/front/php/templates/header.php
@@ -391,7 +391,7 @@
 
         <!-- Settings menu item -->
         <li class=" treeview  <?php if (in_array (basename($_SERVER['SCRIPT_NAME']), array('settings.php') ) ){ echo 'active menu-open'; } ?>">
-          <a href="#" onclick="openUrl(['./settings.php'])">
+          <a href="settings.php" onclick="openUrl(['./settings.php'])">
           <i class="fa fa-fw fa-cog"></i> <span><?= lang('Navigation_Settings');?></span>
             <span class="pull-right-container">
               <i class="fa fa-angle-left pull-right"></i>
diff --git a/front/php/templates/skel_app_events.php b/front/php/templates/skel_app_events.php
new file mode 100644
index 00000000..f055717c
--- /dev/null
+++ b/front/php/templates/skel_app_events.php
@@ -0,0 +1,16 @@
+<!-- AppEvents Skeleton ================================================= -->
+<div id="skel-app-events" >
+  <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 < 25; $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>
+<!-- /AppEvents Skeleton ================================================ -->
diff --git a/front/settings.php b/front/settings.php
index 5b812cde..d8d971ab 100755
--- a/front/settings.php
+++ b/front/settings.php
@@ -67,7 +67,7 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX
 <script src="lib/bcrypt/bcrypt.min.js"></script>
 
 
-<div id="settingsPage" class="content-wrapper">
+<div id="settingsPage" class="content-wrapper spinnerTarget">
 
 <?php require 'php/templates/skel_settings.php'; ?>
 
diff --git a/front/systeminfoNetwork.php b/front/systeminfoNetwork.php
index 8692d0ac..377841b6 100755
--- a/front/systeminfoNetwork.php
+++ b/front/systeminfoNetwork.php
@@ -89,10 +89,10 @@ echo '<div class="box box-solid">
 
 // Network ----------------------------------------------------------
 echo '<div class="box box-solid">
-            <div class="box-header">
-              <h3 class="box-title sysinfo_headline"><i class="fas fa-ethernet"></i> ' . lang('Systeminfo_Network') . '</h3>
-            </div>
-            <div class="box-body">
+      <div class="box-header">
+        <h3 class="box-title sysinfo_headline"><i class="fas fa-ethernet"></i> ' . lang('Systeminfo_Network') . '</h3>
+      </div>
+      <div class="box-body">
 			<div class="row">
 			  <div class="col-sm-3 sysinfo_network_a">' . lang('Systeminfo_Network_IP') . '</div>
 			  <div class="col-sm-9 sysinfo_network_b" id="external-ip">' .$externalIp. '</div>