From a369d7ba9826d3a78dcd1cdc4a2a5c2c6908eca5 Mon Sep 17 00:00:00 2001
From: usmannasir <usman@cyberpersons.com>
Date: Tue, 5 Aug 2025 03:04:38 +0500
Subject: [PATCH] services

---
 .idea/workspace.xml                           |  4 +-
 .../manageServices/managePureFtpd.html        | 52 ++++++-------
 .../templates/pluginHolder/plugins.html       | 76 +++++++++----------
 3 files changed, 67 insertions(+), 65 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index b2cef837b..1b7241324 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,7 +4,9 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="5251c5c9-f2a1-41f2-bc76-10b517091df1" name="Changes" comment="" />
+    <list default="true" id="5251c5c9-f2a1-41f2-bc76-10b517091df1" name="Changes" comment="">
+      <change beforePath="$PROJECT_DIR$/manageServices/templates/manageServices/managePureFtpd.html" beforeDir="false" afterPath="$PROJECT_DIR$/manageServices/templates/manageServices/managePureFtpd.html" afterDir="false" />
+    </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
diff --git a/manageServices/templates/manageServices/managePureFtpd.html b/manageServices/templates/manageServices/managePureFtpd.html
index 085755d88..7e68b6ea4 100644
--- a/manageServices/templates/manageServices/managePureFtpd.html
+++ b/manageServices/templates/manageServices/managePureFtpd.html
@@ -17,18 +17,18 @@
     
     /* Page Header */
     .page-header {
-        background: white;
+        background: var(--bg-primary, white);
         border-radius: 12px;
         padding: 25px;
         margin-bottom: 25px;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-        border: 1px solid #e8e9ff;
+        box-shadow: 0 2px 8px var(--shadow-light, rgba(0,0,0,0.08));
+        border: 1px solid var(--border-light, #e8e9ff);
     }
     
     .page-header h1 {
         font-size: 28px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin: 0 0 10px 0;
         display: flex;
         align-items: center;
@@ -50,7 +50,7 @@
     
     .page-header p {
         font-size: 15px;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin: 0;
     }
     
@@ -77,18 +77,18 @@
     
     /* Content Section */
     .content-section {
-        background: white;
+        background: var(--bg-primary, white);
         border-radius: 12px;
         padding: 25px;
         margin-bottom: 25px;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-        border: 1px solid #e8e9ff;
+        box-shadow: 0 2px 8px var(--shadow-light, rgba(0,0,0,0.08));
+        border: 1px solid var(--border-light, #e8e9ff);
     }
     
     .section-title {
         font-size: 18px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 20px;
         display: flex;
         align-items: center;
@@ -105,7 +105,7 @@
     
     /* Status Box */
     .status-box {
-        background: #f8f9ff;
+        background: var(--bg-secondary, #f8f9ff);
         border-radius: 12px;
         padding: 30px;
         text-align: center;
@@ -129,13 +129,13 @@
     .status-title {
         font-size: 20px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 15px;
     }
     
     .status-description {
         font-size: 15px;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin-bottom: 25px;
     }
     
@@ -150,7 +150,7 @@
     .toggle-label {
         font-size: 16px;
         font-weight: 600;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
     }
     
     /* Save Button */
@@ -193,9 +193,9 @@
     }
     
     .alert-success {
-        background: #d1fae5;
-        color: #065f46;
-        border: 1px solid #a7f3d0;
+        background: var(--bg-success, #d1fae5);
+        color: var(--text-success, #065f46);
+        border: 1px solid var(--border-success, #a7f3d0);
     }
     
     .alert-success .alert-icon {
@@ -203,9 +203,9 @@
     }
     
     .alert-danger {
-        background: #fee2e2;
-        color: #991b1b;
-        border: 1px solid #fecaca;
+        background: var(--bg-danger, #fee2e2);
+        color: var(--text-danger, #991b1b);
+        border: 1px solid var(--border-danger, #fecaca);
     }
     
     .alert-danger .alert-icon {
@@ -216,7 +216,7 @@
     .loading-spinner {
         width: 24px;
         height: 24px;
-        border: 3px solid #e8e9ff;
+        border: 3px solid var(--border-light, #e8e9ff);
         border-top-color: #5856d6;
         border-radius: 50%;
         animation: spin 1s linear infinite;
@@ -238,7 +238,7 @@
     }
     
     .info-card {
-        background: #f8f9ff;
+        background: var(--bg-secondary, #f8f9ff);
         border-radius: 12px;
         padding: 20px;
         text-align: center;
@@ -266,20 +266,20 @@
     .info-card-title {
         font-size: 16px;
         font-weight: 600;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 8px;
     }
     
     .info-card-description {
         font-size: 14px;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         line-height: 1.5;
     }
     
     /* Port Info */
     .port-info {
-        background: #f0f4ff;
-        border: 1px solid #d1d9ff;
+        background: var(--bg-info, #f0f4ff);
+        border: 1px solid var(--border-info, #d1d9ff);
         border-radius: 8px;
         padding: 15px;
         margin-top: 20px;
@@ -295,7 +295,7 @@
     
     .port-info-text {
         font-size: 14px;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
     }
     
     .port-info-text strong {
diff --git a/pluginHolder/templates/pluginHolder/plugins.html b/pluginHolder/templates/pluginHolder/plugins.html
index 9e2f87c53..ddf278e3f 100644
--- a/pluginHolder/templates/pluginHolder/plugins.html
+++ b/pluginHolder/templates/pluginHolder/plugins.html
@@ -17,18 +17,18 @@
     
     /* Page Header */
     .page-header {
-        background: white;
+        background: var(--bg-primary, white);
         border-radius: 12px;
         padding: 25px;
         margin-bottom: 25px;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-        border: 1px solid #e8e9ff;
+        box-shadow: var(--shadow-md, 0 2px 8px rgba(0,0,0,0.08));
+        border: 1px solid var(--border-primary, #e8e9ff);
     }
     
     .page-header h1 {
         font-size: 28px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin: 0 0 10px 0;
         display: flex;
         align-items: center;
@@ -50,24 +50,24 @@
     
     .page-header p {
         font-size: 15px;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin: 0;
     }
     
     /* Content Section */
     .content-section {
-        background: white;
+        background: var(--bg-primary, white);
         border-radius: 12px;
         padding: 25px;
         margin-bottom: 25px;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-        border: 1px solid #e8e9ff;
+        box-shadow: var(--shadow-md, 0 2px 8px rgba(0,0,0,0.08));
+        border: 1px solid var(--border-primary, #e8e9ff);
     }
     
     .section-title {
         font-size: 18px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 20px;
         display: flex;
         align-items: center;
@@ -90,8 +90,8 @@
     }
     
     .plugin-card {
-        background: white;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-primary, white);
+        border: 1px solid var(--border-primary, #e8e9ff);
         border-radius: 12px;
         padding: 25px;
         transition: all 0.3s ease;
@@ -101,7 +101,7 @@
     
     .plugin-card:hover {
         transform: translateY(-5px);
-        box-shadow: 0 8px 24px rgba(0,0,0,0.1);
+        box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.1));
         border-color: #5856d6;
     }
     
@@ -131,7 +131,7 @@
     .plugin-icon {
         width: 56px;
         height: 56px;
-        background: #f8f9ff;
+        background: var(--bg-secondary, #f8f9ff);
         border-radius: 12px;
         display: flex;
         align-items: center;
@@ -148,14 +148,14 @@
     .plugin-name {
         font-size: 18px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 5px;
     }
     
     .plugin-type {
         display: inline-block;
         padding: 4px 12px;
-        background: #e8e6ff;
+        background: var(--purple-light, #e8e6ff);
         color: #5856d6;
         border-radius: 6px;
         font-size: 12px;
@@ -166,7 +166,7 @@
     
     .plugin-description {
         font-size: 14px;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         line-height: 1.6;
         margin-bottom: 15px;
     }
@@ -176,23 +176,23 @@
         justify-content: space-between;
         align-items: center;
         padding-top: 15px;
-        border-top: 1px solid #e8e9ff;
+        border-top: 1px solid var(--border-primary, #e8e9ff);
     }
     
     .plugin-version {
         font-size: 13px;
-        color: #94a3b8;
+        color: var(--text-muted, #94a3b8);
         display: flex;
         align-items: center;
         gap: 5px;
     }
     
     .plugin-version-number {
-        background: #f8f9ff;
+        background: var(--bg-secondary, #f8f9ff);
         padding: 3px 8px;
         border-radius: 4px;
         font-weight: 600;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
     }
     
     /* Table View (Alternative) */
@@ -202,26 +202,26 @@
     }
     
     .plugins-table th {
-        background: #f8f9ff;
+        background: var(--bg-secondary, #f8f9ff);
         padding: 15px;
         text-align: left;
         font-size: 14px;
         font-weight: 600;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         text-transform: uppercase;
         letter-spacing: 0.5px;
-        border-bottom: 2px solid #e8e9ff;
+        border-bottom: 2px solid var(--border-primary, #e8e9ff);
     }
     
     .plugins-table td {
         padding: 20px 15px;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-primary, #e8e9ff);
         font-size: 14px;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
     }
     
     .plugins-table tr:hover {
-        background: #f8f9ff;
+        background: var(--bg-hover, #f8f9ff);
     }
     
     .plugins-table tr:last-child td {
@@ -237,26 +237,26 @@
     .empty-icon {
         width: 80px;
         height: 80px;
-        background: #f8f9ff;
+        background: var(--bg-secondary, #f8f9ff);
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         margin: 0 auto 20px;
         font-size: 36px;
-        color: #94a3b8;
+        color: var(--text-muted, #94a3b8);
     }
     
     .empty-title {
         font-size: 20px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 10px;
     }
     
     .empty-description {
         font-size: 15px;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         max-width: 400px;
         margin: 0 auto;
     }
@@ -275,9 +275,9 @@
         font-weight: 600;
         cursor: pointer;
         transition: all 0.3s ease;
-        border: 1px solid #e8e9ff;
-        background: white;
-        color: #64748b;
+        border: 1px solid var(--border-primary, #e8e9ff);
+        background: var(--bg-primary, white);
+        color: var(--text-secondary, #64748b);
         display: inline-flex;
         align-items: center;
         gap: 8px;
@@ -290,7 +290,7 @@
     }
     
     .view-btn:hover:not(.active) {
-        background: #f8f9ff;
+        background: var(--bg-hover, #f8f9ff);
         color: #5856d6;
         border-color: #5856d6;
     }
@@ -312,13 +312,13 @@
     }
     
     .alert-danger {
-        background: #fee2e2;
-        color: #991b1b;
-        border: 1px solid #fecaca;
+        background: var(--alert-danger-bg, #fee2e2);
+        color: var(--alert-danger-text, #991b1b);
+        border: 1px solid var(--alert-danger-border, #fecaca);
     }
     
     .alert-danger .alert-icon {
-        color: #ef4444;
+        color: var(--alert-danger-icon, #ef4444);
     }
     
     /* Responsive */