diff --git a/websiteFunctions/templates/websiteFunctions/DockerSiteHome.html b/websiteFunctions/templates/websiteFunctions/DockerSiteHome.html index 14995df50..1b0819d9d 100644 --- a/websiteFunctions/templates/websiteFunctions/DockerSiteHome.html +++ b/websiteFunctions/templates/websiteFunctions/DockerSiteHome.html @@ -24,26 +24,30 @@ color: #333; } + .alert { + border-radius: 4px; + margin-bottom: 20px; + } + .info-box { background: #fff; - border-radius: 8px; - box-shadow: 0 2px 4px rgba(0,0,0,0.05); - margin-bottom: 20px; - border: 1px solid #e9ecef; + border-radius: 6px; + box-shadow: 0 1px 3px rgba(0,0,0,0.12); + margin-bottom: 24px; + overflow: hidden; } .info-box-header { padding: 15px 20px; - border-bottom: 1px solid #e9ecef; + border-bottom: 1px solid #eee; background: #f8f9fa; - border-radius: 8px 8px 0 0; } .info-box-header h4 { margin: 0; font-size: 16px; font-weight: 600; - color: #495057; + color: #2c3e50; } .info-box-content { @@ -51,153 +55,122 @@ } .status-badge { - display: inline-flex; - align-items: center; - padding: 6px 12px; - border-radius: 50px; - font-size: 13px; - font-weight: 500; - } - - .status-badge.running { - background-color: #e8f5e9; - color: #2e7d32; - } - - .status-badge.stopped { - background-color: #ffebee; - color: #c62828; - } - - .status-badge::before { - content: ''; display: inline-block; - width: 8px; - height: 8px; - border-radius: 50%; - margin-right: 8px; + padding: 4px 8px; + border-radius: 12px; + font-size: 12px; + font-weight: 500; + text-transform: uppercase; } - .status-badge.running::before { - background-color: #2e7d32; + .status-running { + background: #e3fcef; + color: #00a651; } - .status-badge.stopped::before { - background-color: #c62828; + .status-stopped { + background: #fee7e7; + color: #dc3545; } .resource-meter { - margin-bottom: 20px; - } - - .resource-meter .label { - display: flex; - justify-content: space-between; - margin-bottom: 8px; - color: #495057; - font-size: 13px; - } - - .progress { + background: #f1f3f4; + border-radius: 8px; height: 8px; - border-radius: 4px; - background-color: #e9ecef; - margin-bottom: 5px; + margin: 8px 0; + overflow: hidden; } - .progress-bar { - border-radius: 4px; + .resource-meter-fill { + height: 100%; + background: #2196F3; transition: width 0.3s ease; } - .progress-bar-memory { - background-color: #2196f3; + .resource-meter-fill.warning { + background: #ff9800; } - .progress-bar-cpu { - background-color: #4caf50; + .resource-meter-fill.danger { + background: #f44336; } - .table { - margin: 0; + .detail-table { + width: 100%; + margin-bottom: 0; } - .table thead th { + .detail-table th { background: #f8f9fa; - border-bottom: 2px solid #dee2e6; - color: #495057; font-weight: 600; - font-size: 13px; + padding: 12px; + border-bottom: 2px solid #eee; } - .table td { - vertical-align: middle; - color: #495057; - font-size: 13px; - border-color: #e9ecef; + .detail-table td { + padding: 12px; + border-bottom: 1px solid #eee; + color: #444; } - .env-table td:first-child { + .detail-table tr:last-child td { + border-bottom: none; + } + + .env-var { font-family: monospace; - color: #2196f3; + background: #f8f9fa; + padding: 2px 6px; + border-radius: 4px; + font-size: 13px; } .masked-value { - font-family: monospace; - color: #9e9e9e; - } - - .logs-section { - margin-top: 30px; - } - - .logs-content { - background: #1e1e1e; - color: #fff; - padding: 15px; - border-radius: 4px; - font-family: monospace; - font-size: 12px; - max-height: 400px; - overflow-y: auto; + color: #6c757d; + font-style: italic; } .action-buttons { margin-top: 20px; } - .btn { - padding: 8px 16px; + .action-buttons .btn { + margin-right: 10px; border-radius: 4px; - font-weight: 500; - transition: all 0.2s; + padding: 6px 15px; } - .btn-icon { - margin-right: 8px; + .logs-section { + background: #1e1e1e; + color: #fff; + padding: 15px; + border-radius: 6px; + font-family: monospace; + margin-top: 20px; + max-height: 400px; + overflow-y: auto; } - .refresh-button { - background: none; - border: none; - color: #6c757d; - cursor: pointer; - padding: 5px; - margin-left: 10px; - transition: transform 0.2s; - } - - .refresh-button:hover { - transform: rotate(180deg); + .logs-section pre { + margin: 0; + white-space: pre-wrap; + word-wrap: break-word; } + /* Responsive adjustments */ @media (max-width: 768px) { + .container-fluid { + padding: 15px; + } + .info-box { margin-bottom: 15px; } - .table-responsive { - margin-bottom: 0; + .action-buttons .btn { + margin-bottom: 10px; + width: 100%; + margin-right: 0; } } @@ -211,190 +184,150 @@
-

{% trans "Currently Managing:" %} {$ cName $} - -

-
- -
-
-
-
-

{% trans "Basic Information" %}

-
-
-

Container ID: {$ cid $}

-

- Status: - {$ status $} -

-

Created: {$ created | date:'medium' $}

-

Uptime: {$ uptime $}

-
-
- -
-
-

{% trans "Resource Usage" %}

-
-
-
-
- Memory Usage - {$ memoryUsagePercent | number:1 $}% -
-
-
-
-
-
-
-
- CPU Usage - {$ cpuUsagePercent | number:1 $}% -
-
-
-
-
-
-
-
-
- -
-
-
-

{% trans "Network & Ports" %}

-
-
-
- - - - - - - - - - - - - -
Container PortHost Binding
{$ containerPort $} - - {$ binding.HostIp || '0.0.0.0' $}:{$ binding.HostPort $} - -
-
-

- No ports exposed -

-
-
- -
-
-

{% trans "Volumes" %}

-
-
-
- - - - - - - - - - - - - - - -
SourceDestinationMode
{$ volume.Source $}{$ volume.Destination $}{$ volume.Mode $}
-
-

- No volumes mounted -

-
-
-
+

{% trans "Container Management" %}

-

{% trans "Environment Variables" %}

+

Basic Information

-
- - - - - - - - - - - - - -
VariableValue
{$ env.split('=')[0] $}{$ env.split('=')[1] $}
+
+
+

Container ID: {$ cid $}

+

Status: + {$ status $} +

+

Created: {$ created | date:'medium' $}

+

Uptime: {$ uptime $}

+
+
+

Memory Usage

+
+
+
+
+

{$ memoryUsage $}

+ +

CPU Usage

+
+
+
+
+

{$ cpuUsagePercent | number:1 $}%

+
-

- No environment variables set -

-
-
-
-
-
+
-

{% trans "Container Logs" %}

+

Network & Ports

-
+ + + + + + + + + + + + + +
Container PortHost Binding
{$ containerPort $} + + {$ binding.HostIp || '0.0.0.0' $}:{$ binding.HostPort $} + +
+

No ports exposed

+
+
+ +
+
+

Volumes

+
+
+ + + + + + + + + + + + + + + +
SourceDestinationMode
{$ volume.Source $}{$ volume.Destination $}{$ volume.Mode $}
+

No volumes mounted

+
+
+ +
+
+

Environment Variables

+
+
+ + + + + + + + + + + + + +
VariableValue
{$ env.split('=')[0] $}{$ env.split('=')[1] $}
+

No environment variables set

+
+
+ +
+
+

Container Logs

+
+
+ 

                         

                     

                 

-            

-        

 
-        

-            
-            
-            
-            
+                

+                    
+                    
+                    
+                    
+                

+            

         

     

 
-    {% include "websiteFunctions/dockerRecreateModal.html" %}
-
 {% endblock %}