diff --git a/websiteFunctions/templates/websiteFunctions/DockerSiteHome.html b/websiteFunctions/templates/websiteFunctions/DockerSiteHome.html index fe76117df..14995df50 100644 --- a/websiteFunctions/templates/websiteFunctions/DockerSiteHome.html +++ b/websiteFunctions/templates/websiteFunctions/DockerSiteHome.html @@ -12,28 +12,10 @@ padding: 20px; } - .alert { - border-radius: 0; - margin-bottom: 15px; - padding: 12px 15px; - } - - .alert-info { - background-color: #f0f6ff; - border-color: #e5eeff; - color: #5c7cff; - } - - .alert-warning { - background-color: #fff8e6; - border-color: #ffe5b2; - color: #b97900; - } - .page-header { - margin: 0 0 20px; - padding-bottom: 15px; + margin-bottom: 30px; border-bottom: 1px solid #eee; + padding-bottom: 15px; } .page-header h2 { @@ -42,320 +24,291 @@ color: #333; } - .info-section { + .info-box { background: #fff; - border-radius: 4px; - box-shadow: 0 1px 3px rgba(0,0,0,0.08); + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0,0,0,0.05); margin-bottom: 20px; + border: 1px solid #e9ecef; } - .info-section .header { + .info-box-header { padding: 15px 20px; - border-bottom: 1px solid #eee; - background: #fafafa; + border-bottom: 1px solid #e9ecef; + background: #f8f9fa; + border-radius: 8px 8px 0 0; } - .info-section .header h3 { + .info-box-header h4 { margin: 0; font-size: 16px; font-weight: 600; - color: #333; + color: #495057; } - .info-section .content { + .info-box-content { padding: 20px; } - .info-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 20px; - } - - .info-item { - background: #fff; - padding: 15px; - border-radius: 4px; - border: 1px solid #eee; - } - - .info-item h4 { - margin: 0 0 15px; - color: #666; - font-size: 14px; - font-weight: 600; - text-transform: uppercase; - } - .status-badge { - display: inline-block; - padding: 4px 8px; - border-radius: 12px; - font-size: 12px; + display: inline-flex; + align-items: center; + padding: 6px 12px; + border-radius: 50px; + font-size: 13px; font-weight: 500; } - .status-running { - background: #e6fff0; - color: #00b341; + .status-badge.running { + background-color: #e8f5e9; + color: #2e7d32; } - .status-stopped { - background: #ffe6e6; - color: #ff0000; + .status-badge.stopped { + background-color: #ffebee; + color: #c62828; } - .resource-bar { - height: 6px; - background: #eee; - border-radius: 3px; - margin: 8px 0; - overflow: hidden; + .status-badge::before { + content: ''; + display: inline-block; + width: 8px; + height: 8px; + border-radius: 50%; + margin-right: 8px; } - .resource-bar .fill { - height: 100%; - background: #2196F3; - border-radius: 3px; + .status-badge.running::before { + background-color: #2e7d32; + } + + .status-badge.stopped::before { + background-color: #c62828; + } + + .resource-meter { + margin-bottom: 20px; + } + + .resource-meter .label { + display: flex; + justify-content: space-between; + margin-bottom: 8px; + color: #495057; + font-size: 13px; + } + + .progress { + height: 8px; + border-radius: 4px; + background-color: #e9ecef; + margin-bottom: 5px; + } + + .progress-bar { + border-radius: 4px; transition: width 0.3s ease; } - .resource-bar .fill.high { - background: #ff4444; + .progress-bar-memory { + background-color: #2196f3; + } + + .progress-bar-cpu { + background-color: #4caf50; } .table { margin: 0; } - .table > thead > tr > th { - background: #fafafa; - border-bottom: 2px solid #eee; - color: #666; + .table thead th { + background: #f8f9fa; + border-bottom: 2px solid #dee2e6; + color: #495057; font-weight: 600; font-size: 13px; - padding: 12px 15px; } - .table > tbody > tr > td { - padding: 12px 15px; - border-top: 1px solid #eee; - color: #333; + .table td { + vertical-align: middle; + color: #495057; font-size: 13px; + border-color: #e9ecef; } - .table-striped > tbody > tr:nth-of-type(odd) { - background-color: #fafafa; + .env-table td:first-child { + font-family: monospace; + color: #2196f3; + } + + .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; + } + + .action-buttons { margin-top: 20px; } - .logs-section pre { - margin: 0; - white-space: pre-wrap; - word-wrap: break-word; - color: #d4d4d4; - font-size: 12px; - line-height: 1.5; + .btn { + padding: 8px 16px; + border-radius: 4px; + font-weight: 500; + transition: all 0.2s; } - .btn-action { - padding: 6px 12px; - border-radius: 4px; - font-size: 13px; - font-weight: 500; + .btn-icon { margin-right: 8px; } - .btn-recreate { - background: #ff9800; - color: #fff; + .refresh-button { + background: none; border: none; + color: #6c757d; + cursor: pointer; + padding: 5px; + margin-left: 10px; + transition: transform 0.2s; } - .btn-recreate:hover { - background: #f57c00; + .refresh-button:hover { + transform: rotate(180deg); } - /* Environment Variables Table */ - .env-table td:first-child { - font-weight: 500; - color: #666; - } - - .env-table td:last-child { - font-family: monospace; - background: #fafafa; - } - - .masked-value { - color: #999; - font-style: italic; - } - - /* Responsive Design */ @media (max-width: 768px) { - .info-grid { - grid-template-columns: 1fr; + .info-box { + margin-bottom: 15px; } - - .info-section .content { - padding: 15px; - } - + .table-responsive { margin-bottom: 0; - border: none; } } - - .container-name { - font-weight: 500; - color: #333; - } - .actions { - display: flex; - gap: 8px; - } - .btn-sm { - padding: 5px 10px; - font-size: 12px; - } - .btn-sm i { - margin-right: 4px; - } - .text-muted { - color: #666; - font-size: 13px; - margin-left: 8px; - } - .d-flex { - display: flex; - } - .justify-content-between { - justify-content: space-between; - } - .align-items-center { - align-items: center; - } + + +
-
- {% trans "Looks like something is wrong with your initial setup, please double check on Setup Wizard." %} -
- -
- {% trans "Looks like your websites are not secured with automatic backups." %} - Configure now. -
-
-

{% trans "CONTAINERS" %}

- {% trans "Manage containers on server" %} +

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

- -
-
-

{% trans "Available Containers" %}

- -
-
-
- - - - - - - - - - - - - -
NameLaunch
-
{$ web.name $}
- 		- -
-
- -
-
- - -
-
-
-
-

- {% trans "Container:" %} {$ cName $} - ID: {$ cid $} -

-
- - - -
+
+
+
+
+

{% trans "Basic Information" %}

+
+
+

Container ID: {$ cid $}

+

+ Status: + {$ status $} +

+

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

+

Uptime: {$ uptime $}

-
-
- -
-

{% trans "Basic Information" %}

-

Container ID: {$ cid $}

-

- Status: - - {$ status $} - -

-

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

-

Uptime: {$ uptime $}

-
- -
-

{% trans "Resource Usage" %}

-

Memory Usage

-
-
+
+
+

{% trans "Resource Usage" %}

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

CPU Usage

-
-
+
+
+
+
+
+
+
+ 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" %}

-
- + +
+
+
@@ -372,14 +325,23 @@
Source
-

No volumes mounted

+

+ No volumes mounted +

+
+
+
- -
+
+
+
+

{% trans "Environment Variables" %}

-
- + +
+
+
@@ -394,21 +356,45 @@
Variable
-

No environment variables set

-
- - -
-

{% trans "Container Logs" %}

- 

+                        

+                            No environment variables set
+                        

                     

                 

             

         

+
+        

+            

+                

+                    

+                        
{% trans "Container Logs" %}

+                    

+                    

+                        

+                            

+                        

+                    

+                

+            

+        

+
+        

+            
+            
+            
+            
+        

     

 
-    
\ No newline at end of file
+    {% include "websiteFunctions/dockerRecreateModal.html" %}
+
+{% endblock %}