From 96d7efa183d1c419ec01c204177b6676b100da04 Mon Sep 17 00:00:00 2001
From: usmannasir <usman@cyberpersons.com>
Date: Tue, 5 Aug 2025 21:08:51 +0500
Subject: [PATCH] add/delete records

---
 .idea/workspace.xml                           |   6 +-
 .../templates/dockerManager/install.html      | 218 +++++++++++++++---
 .../templates/dockerManager/manageImages.html |  36 +--
 3 files changed, 204 insertions(+), 56 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 58ac254f5..147be4467 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -6,10 +6,8 @@
   <component name="ChangeListManager">
     <list default="true" id="5251c5c9-f2a1-41f2-bc76-10b517091df1" name="Changes" comment="">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/backup/templates/backup/backupDestinations.html" beforeDir="false" afterPath="$PROJECT_DIR$/backup/templates/backup/backupDestinations.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/backup/templates/backup/googleDrive.html" beforeDir="false" afterPath="$PROJECT_DIR$/backup/templates/backup/googleDrive.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/backup/templates/backup/remoteBackups.html" beforeDir="false" afterPath="$PROJECT_DIR$/backup/templates/backup/remoteBackups.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/manageSSL/templates/manageSSL/v2ManageSSL.html" beforeDir="false" afterPath="$PROJECT_DIR$/manageSSL/templates/manageSSL/v2ManageSSL.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/dockerManager/templates/dockerManager/install.html" beforeDir="false" afterPath="$PROJECT_DIR$/dockerManager/templates/dockerManager/install.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/dockerManager/templates/dockerManager/manageImages.html" beforeDir="false" afterPath="$PROJECT_DIR$/dockerManager/templates/dockerManager/manageImages.html" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
diff --git a/dockerManager/templates/dockerManager/install.html b/dockerManager/templates/dockerManager/install.html
index 8f8452d31..ae3dc3391 100644
--- a/dockerManager/templates/dockerManager/install.html
+++ b/dockerManager/templates/dockerManager/install.html
@@ -1,60 +1,210 @@
 {% extends "baseTemplate/index.html" %}
 {% load i18n %}
 {% block title %}{% trans "Install Docker - CyberPanel" %}{% endblock %}
+{% block header_scripts %}
+<style>
+    /* Docker Install Page Specific Styles */
+    .docker-install-wrapper {
+        background: transparent;
+        padding: 20px;
+    }
+    
+    .docker-install-container {
+        max-width: 1200px;
+        margin: 0 auto;
+    }
+    
+    .docker-section {
+        background: var(--bg-primary, white);
+        border-radius: 12px;
+        padding: 25px;
+        margin-bottom: 25px;
+        box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
+        border: 1px solid var(--border-color, #e8e9ff);
+    }
+    
+    .section-title {
+        font-size: 16px;
+        font-weight: 700;
+        color: var(--text-primary, #2f3640);
+        margin-bottom: 20px;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+    }
+    
+    .section-title::before {
+        content: '';
+        width: 4px;
+        height: 24px;
+        background: var(--accent-color, #5b5fcf);
+        border-radius: 2px;
+    }
+    
+    .docker-description {
+        color: var(--text-muted, #8893a7);
+        font-size: 14px;
+        margin-bottom: 25px;
+        line-height: 1.5;
+        text-align: center;
+        padding: 20px;
+        background: var(--bg-secondary, #fafbff);
+        border-radius: 8px;
+        border: 1px solid var(--border-color, #e8e9ff);
+    }
+    
+    .docker-description h4 {
+        color: var(--text-primary, #2f3640);
+        font-weight: 600;
+        margin: 0;
+    }
+    
+    .terminal-container {
+        background: var(--bg-hover, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
+        border-radius: 8px;
+        padding: 20px;
+        margin: 25px 0;
+    }
+    
+    .terminal-output {
+        width: 100%;
+        padding: 15px;
+        border: 1px solid var(--border-color, #e8e9ff);
+        border-radius: 8px;
+        font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
+        font-size: 13px;
+        color: var(--text-primary, #2f3640);
+        background: var(--bg-primary, white);
+        resize: vertical;
+        min-height: 300px;
+    }
+    
+    .terminal-output:focus {
+        outline: none;
+        border-color: var(--accent-color, #5b5fcf);
+        box-shadow: 0 0 0 3px var(--accent-shadow-light, rgba(91,95,207,0.1));
+    }
+    
+    .btn-primary {
+        background: var(--accent-color, #5b5fcf);
+        border: 1px solid var(--accent-color, #5b5fcf);
+        color: white;
+        padding: 12px 24px;
+        border-radius: 8px;
+        font-size: 14px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        text-decoration: none;
+    }
+    
+    .btn-primary:hover {
+        background: var(--accent-hover, #4b4fbf);
+        border-color: var(--accent-hover, #4b4fbf);
+        box-shadow: 0 3px 8px var(--accent-shadow, rgba(91,95,207,0.3));
+        transform: translateY(-1px);
+    }
+    
+    .btn-primary:disabled {
+        background: var(--text-disabled, #94a3b8);
+        border-color: var(--text-disabled, #94a3b8);
+        cursor: not-allowed;
+        transform: none;
+        box-shadow: none;
+    }
+    
+    .error-message {
+        background: var(--danger-light, #fef2f2);
+        border: 1px solid var(--danger-border, #fecaca);
+        color: var(--danger-text, #991b1b);
+        padding: 15px;
+        border-radius: 8px;
+        margin-bottom: 20px;
+        font-size: 14px;
+    }
+    
+    .loading-spinner {
+        width: 16px;
+        height: 16px;
+        margin-left: 8px;
+    }
+    
+    .action-section {
+        text-align: center;
+        margin-top: 25px;
+    }
+    
+    /* Responsive */
+    @media (max-width: 768px) {
+        .docker-install-wrapper {
+            padding: 15px;
+        }
+        
+        .docker-section {
+            padding: 20px;
+        }
+    }
+</style>
+{% endblock %}
+
 {% block content %}
 
     {% load static %}
     {% get_current_language as LANGUAGE_CODE %}
     <!-- Current language: {{ LANGUAGE_CODE }} -->
 
-    <div class="container">
-        <div id="page-title">
-            <h2>{% trans "Install Docker" %}</h2>
-        </div>
+    <div class="docker-install-wrapper">
 
-        <div ng-controller="installDocker" class="panel">
-            <div class="panel-body">
-                <h3 class="content-box-header">
-                    {% trans "Install Docker" %} <img ng-hide="installDockerStatus"
-                                                      src="{% static 'images/loading.gif' %}">
-                </h3>
-                <div class="example-box-wrapper text-center" style="white-space: normal;">
-
-                    {% if conErr == 1 %}
+        <div class="docker-install-container" ng-controller="installDocker">
+            <!-- Header Section -->
+            <div class="docker-section">
+                <h2 class="section-title">
+                    INSTALL DOCKER
+                    <img ng-hide="installDockerStatus" src="{% static 'images/loading.gif' %}" class="loading-spinner">
+                </h2>
 
+                {% if conErr == 1 %}
+                    <div class="error-message">
+                        <i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i>
                         {% if status == 1 %}
+                            <strong>{% trans "Connection Error" %}</strong><br>
                             {% trans "Unable to connect to docker daemon, please try restarting docker from service page" %}
                         {% else %}
+                            <strong>{% trans "Permission Denied" %}</strong><br>
                             {% trans "You do not have sufficient permissions to access this page" %}
                         {% endif %}
+                    </div>
 
-                    {% else %}
-                        <p class="h4">{% trans "Docker is currently not installed on this server. To manage containers, you must first install it." %}</p>
-                        <!------ LSWS Switch box ----------------->
+                {% else %}
+                    <div class="docker-description">
+                        <h4>{% trans "Docker is currently not installed on this server. To manage containers, you must first install it." %}</h4>
+                    </div>
 
-                        <div style="margin-top: 2%" ng-hide="installBoxGen" class="col-md-12">
-
-                            <form action="/" id="" class="form-horizontal bordered-row panel-body">
-                                <div class="form-group">
-                                    <div style="margin-top: 2%;" class="col-sm-12">
-                                            <textarea ng-model="requestData" rows="15"
-                                                      class="form-control">{{ requestData }}</textarea>
-                                    </div>
-                                </div>
-                            </form>
-                        </div>
+                    <div ng-hide="installBoxGen" class="terminal-container">
+                        <textarea ng-model="requestData" rows="15" class="terminal-output">{{ requestData }}</textarea>
+                    </div>
 
 
-                        <!----- LSWS Switch box ----------------->
-                        <br>
+                    <div class="action-section">
                         {% if status == 1 %}
-                            <button ng-hide="dockerInstallBTN" class="btn btn-primary" ng-click="installDocker()">Install Docker</button>
+                            <button ng-hide="dockerInstallBTN" class="btn btn-primary" ng-click="installDocker()">
+                                <i class="fas fa-download"></i>
+                                {% trans "Install Docker" %}
+                            </button>
                         {% else %}
-                            {% trans "You do not have permissions to install Docker. Please contact your system administrator" %}
+                            <div class="error-message">
+                                <i class="fas fa-lock" style="margin-right: 8px;"></i>
+                                {% trans "You do not have permissions to install Docker. Please contact your system administrator" %}
+                            </div>
                         {% endif %}
-                    {% endif %}
-
-                </div>
+                    </div>
+                {% endif %}
             </div>
         </div>
 
diff --git a/dockerManager/templates/dockerManager/manageImages.html b/dockerManager/templates/dockerManager/manageImages.html
index 9e11bd4fd..549fe5433 100644
--- a/dockerManager/templates/dockerManager/manageImages.html
+++ b/dockerManager/templates/dockerManager/manageImages.html
@@ -18,7 +18,7 @@
         text-align: center;
         margin-bottom: 3rem;
         padding: 3rem 0;
-        background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
+        background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-hover, #f0f1ff) 100%);
         border-radius: 20px;
         animation: fadeInDown 0.5s ease-out;
         position: relative;
@@ -52,12 +52,12 @@
     .docker-icon {
         width: 60px;
         height: 60px;
-        background: var(--bg-secondary, white);
+        background: var(--bg-primary, white);
         border-radius: 12px;
         display: flex;
         align-items: center;
         justify-content: center;
-        box-shadow: 0 4px 12px var(--shadow-medium, rgba(0,0,0,0.1));
+        box-shadow: 0 4px 12px var(--shadow-md, rgba(0,0,0,0.1));
     }
     
     .page-subtitle {
@@ -79,7 +79,7 @@
     
     .btn-primary {
         background: var(--accent-color, #5b5fcf);
-        color: var(--bg-secondary, white);
+        color: white;
         border: none;
         padding: 0.75rem 2rem;
         border-radius: 10px;
@@ -97,7 +97,7 @@
         background: var(--accent-hover, #4547a9);
         transform: translateY(-2px);
         box-shadow: 0 8px 20px var(--accent-shadow-hover, rgba(91, 95, 207, 0.4));
-        color: var(--bg-secondary, white);
+        color: white;
     }
     
     .btn-secondary {
@@ -120,12 +120,12 @@
         background: var(--bg-hover, #f8f9ff);
         border-color: var(--accent-color, #5b5fcf);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px var(--accent-shadow-soft, rgba(91, 95, 207, 0.2));
+        box-shadow: 0 4px 12px var(--accent-shadow-light, rgba(91, 95, 207, 0.2));
     }
     
     .btn-warning {
         background: var(--warning-color, #f59e0b);
-        color: var(--bg-secondary, white);
+        color: white;
         border: none;
         padding: 0.75rem 2rem;
         border-radius: 10px;
@@ -146,7 +146,7 @@
     
     .btn-danger {
         background: var(--danger-color, #ef4444);
-        color: var(--bg-secondary, white);
+        color: white;
         border: none;
         padding: 0.5rem 1rem;
         border-radius: 8px;
@@ -167,7 +167,7 @@
     
     .btn-info {
         background: var(--info-color, #3b82f6);
-        color: var(--bg-secondary, white);
+        color: white;
         border: none;
         padding: 0.5rem 1rem;
         border-radius: 8px;
@@ -187,7 +187,7 @@
     }
     
     .main-card {
-        background: var(--bg-secondary, white);
+        background: var(--bg-primary, white);
         border-radius: 16px;
         box-shadow: 0 1px 3px var(--shadow-light, rgba(0,0,0,0.05)), 0 10px 40px var(--shadow-color, rgba(0,0,0,0.08));
         border: 1px solid var(--border-color, #e8e9ff);
@@ -197,7 +197,7 @@
     }
     
     .card-header {
-        background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
+        background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-hover, #f0f1ff) 100%);
         padding: 1.5rem 2rem;
         border-bottom: 1px solid var(--border-color, #e8e9ff);
         display: flex;
@@ -252,12 +252,12 @@
     .form-control:focus {
         outline: none;
         border-color: var(--accent-color, #5b5fcf);
-        box-shadow: 0 0 0 3px var(--accent-focus, rgba(91, 95, 207, 0.1));
+        box-shadow: 0 0 0 3px var(--accent-shadow-light, rgba(91, 95, 207, 0.1));
     }
     
     .images-table {
         width: 100%;
-        background: var(--bg-secondary, white);
+        background: var(--bg-primary, white);
         border-radius: 12px;
         overflow: hidden;
         border: 1px solid var(--border-color, #e8e9ff);
@@ -265,7 +265,7 @@
     }
     
     .images-table thead {
-        background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
+        background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-hover, #f0f1ff) 100%);
     }
     
     .images-table th {
@@ -307,7 +307,7 @@
     .image-icon {
         width: 32px;
         height: 32px;
-        background: var(--accent-bg, #e0e7ff);
+        background: var(--accent-light, #e0e7ff);
         border-radius: 8px;
         display: flex;
         align-items: center;
@@ -317,7 +317,7 @@
     }
     
     .official-badge {
-        background: var(--success-bg, #d1fae5);
+        background: var(--success-light, #d1fae5);
         color: var(--success-text, #065f46);
         padding: 0.25rem 0.75rem;
         border-radius: 20px;
@@ -349,11 +349,11 @@
         border-radius: 16px;
         overflow: hidden;
         border: none;
-        box-shadow: 0 25px 50px -12px var(--shadow-dark, rgba(0, 0, 0, 0.25));
+        box-shadow: 0 25px 50px -12px var(--shadow-lg, rgba(0, 0, 0, 0.25));
     }
     
     .modal-header {
-        background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
+        background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-hover, #f0f1ff) 100%);
         border-bottom: 1px solid var(--border-color, #e8e9ff);
         padding: 1.5rem 2rem;
     }