From c70e83bcb0b3f84c640a181898662e3abcd355b7 Mon Sep 17 00:00:00 2001
From: usmannasir <usman@cyberpersons.com>
Date: Fri, 11 Apr 2025 02:08:01 +0500
Subject: [PATCH] add additional info to docker js update

---
 .../websiteFunctions/DockerSiteHome.html      | 771 ++++++------------
 1 file changed, 265 insertions(+), 506 deletions(-)

diff --git a/websiteFunctions/templates/websiteFunctions/DockerSiteHome.html b/websiteFunctions/templates/websiteFunctions/DockerSiteHome.html
index 6c338e8b1..4c6bbfff0 100644
--- a/websiteFunctions/templates/websiteFunctions/DockerSiteHome.html
+++ b/websiteFunctions/templates/websiteFunctions/DockerSiteHome.html
@@ -8,193 +8,6 @@
     <!-- Current language: {{ LANGUAGE_CODE }} -->
 
     <style>
-        /* Dashboard Overview Styles */
-        .dashboard-overview {
-            padding: 20px 0;
-            margin-bottom: 30px;
-        }
-
-        .metric-card {
-            background: #fff;
-            border-radius: 8px;
-            padding: 20px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-            transition: transform 0.2s;
-            margin-bottom: 20px;
-        }
-
-        .metric-card:hover {
-            transform: translateY(-5px);
-        }
-
-        .metric-value {
-            font-size: 24px;
-            font-weight: bold;
-            color: #2196F3;
-        }
-
-        .metric-label {
-            color: #666;
-            font-size: 14px;
-            margin-top: 5px;
-        }
-
-        /* Container Card Styles */
-        .container-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-            gap: 20px;
-            margin: 20px 0;
-        }
-
-        .container-card {
-            background: #fff;
-            border-radius: 8px;
-            padding: 20px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-            transition: all 0.3s ease;
-        }
-
-        .container-card:hover {
-            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
-        }
-
-        .container-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            margin-bottom: 15px;
-        }
-
-        .container-name {
-            font-size: 18px;
-            font-weight: 600;
-            color: #333;
-        }
-
-        .container-status {
-            padding: 4px 8px;
-            border-radius: 12px;
-            font-size: 12px;
-            font-weight: 500;
-        }
-
-        .status-running {
-            background-color: #e3f2fd;
-            color: #2196F3;
-        }
-
-        .status-stopped {
-            background-color: #ffebee;
-            color: #f44336;
-        }
-
-        .container-metrics {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 10px;
-            margin: 15px 0;
-        }
-
-        .metric {
-            text-align: center;
-            padding: 10px;
-            background: #f5f5f5;
-            border-radius: 6px;
-        }
-
-        .metric-title {
-            font-size: 12px;
-            color: #666;
-        }
-
-        .metric-value {
-            font-size: 18px;
-            font-weight: 600;
-            color: #333;
-            margin-top: 5px;
-        }
-
-        .container-actions {
-            display: flex;
-            gap: 10px;
-            margin-top: 15px;
-        }
-
-        .action-button {
-            flex: 1;
-            padding: 8px;
-            border: none;
-            border-radius: 4px;
-            font-size: 14px;
-            cursor: pointer;
-            transition: background-color 0.2s;
-        }
-
-        .action-button.primary {
-            background-color: #2196F3;
-            color: white;
-        }
-
-        .action-button.secondary {
-            background-color: #f5f5f5;
-            color: #333;
-        }
-
-        .action-button:hover {
-            opacity: 0.9;
-        }
-
-        /* View Toggle Styles */
-        .view-toggle {
-            margin-bottom: 20px;
-        }
-
-        .view-toggle button {
-            padding: 8px 16px;
-            border: 1px solid #ddd;
-            background: #fff;
-            cursor: pointer;
-        }
-
-        .view-toggle button.active {
-            background: #2196F3;
-            color: white;
-            border-color: #2196F3;
-        }
-
-        /* Search and Filter Styles */
-        .container-filters {
-            display: flex;
-            gap: 15px;
-            margin-bottom: 20px;
-        }
-
-        .search-container {
-            flex: 1;
-            position: relative;
-        }
-
-        .search-container input {
-            width: 100%;
-            padding: 10px 15px;
-            padding-left: 35px;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-        }
-
-        .search-icon {
-            position: absolute;
-            left: 10px;
-            top: 50%;
-            transform: translateY(-50%);
-            color: #666;
-        }
-
-        .filter-dropdown {
-            min-width: 150px;
-        }
-
         .info-box {
             background: #fff;
             border: 1px solid #e0e0e0;
@@ -302,6 +115,14 @@
             margin-right: 5px;
         }
 
+        .status-running {
+            background-color: #4CAF50;
+        }
+
+        .status-stopped {
+            background-color: #F44336;
+        }
+
         /* Tooltips */
         [data-toggle="tooltip"] {
             cursor: help;
@@ -336,260 +157,174 @@
             <p>{% trans "Manage containers on server" %}</p>
         </div>
 
-        <!-- Dashboard Overview -->
-        <div class="dashboard-overview">
-            <div class="row">
-                <div class="col-md-3">
-                    <div class="metric-card">
-                        <div class="metric-value">{$ totalContainers $}</div>
-                        <div class="metric-label">Total Containers</div>
-                    </div>
-                </div>
-                <div class="col-md-3">
-                    <div class="metric-card">
-                        <div class="metric-value">{$ runningContainers $}</div>
-                        <div class="metric-label">Running Containers</div>
-                    </div>
-                </div>
-                <div class="col-md-3">
-                    <div class="metric-card">
-                        <div class="metric-value">{$ cpuUsage | number:1 $}%</div>
-                        <div class="metric-label">CPU Usage</div>
-                    </div>
-                </div>
-                <div class="col-md-3">
-                    <div class="metric-card">
-                        <div class="metric-value">{$ memoryUsage | number:1 $}%</div>
-                        <div class="metric-label">Memory Usage</div>
-                    </div>
-                </div>
-            </div>
-        </div>
+        <div class="panel" ng-hide="listcontainerview">
+            <div class="panel-body">
+                <h3 class="content-box-header">
+                    {% trans "Containers" %} {{ dockerSite.SiteName }}<img id="imageLoading"
+                                                                           src="/static/images/loading.gif"
+                                                                           style="display: none;">
+                </h3>
+                <span style="display: none" id="sitename">{{ dockerSite.SiteName }}</span>
+                <div class="example-box-wrapper ">
 
-        <!-- View Toggle and Filters -->
-        <div class="container-header">
-            <div class="view-toggle btn-group">
-                <button class="btn" ng-class="{'active': viewMode === 'grid'}" ng-click="viewMode = 'grid'">
-                    <i class="fa fa-th-large"></i> Grid
-                </button>
-                <button class="btn" ng-class="{'active': viewMode === 'list'}" ng-click="viewMode = 'list'">
-                    <i class="fa fa-list"></i> List
-                </button>
-            </div>
-            <div class="container-filters">
-                <div class="search-container">
-                    <i class="fa fa-search search-icon"></i>
-                    <input type="text" ng-model="searchQuery" placeholder="Search containers...">
-                </div>
-                <select class="form-control filter-dropdown" ng-model="statusFilter">
-                    <option value="">All Status</option>
-                    <option value="running">Running</option>
-                    <option value="stopped">Stopped</option>
-                </select>
-            </div>
-        </div>
-
-        <!-- Grid View -->
-        <div class="container-grid" ng-if="viewMode === 'grid'">
-            <div class="container-card" ng-repeat="container in ContainerList | filter:searchQuery | filter:statusFilter">
-                <div class="container-header">
-                    <span class="container-name">{$ container.name $}</span>
-                    <span class="container-status" ng-class="{'status-running': container.status === 'running', 'status-stopped': container.status === 'stopped'}">
-                        {$ container.status $}
-                    </span>
-                </div>
-                <div class="container-metrics">
-                    <div class="metric">
-                        <div class="metric-title">CPU</div>
-                        <div class="metric-value">{$ container.cpu $}%</div>
-                    </div>
-                    <div class="metric">
-                        <div class="metric-title">Memory</div>
-                        <div class="metric-value">{$ container.memory $}%</div>
-                    </div>
-                </div>
-                <div class="container-actions">
-                    <button class="action-button primary" ng-click="Lunchcontainer(container.id)">
-                        <i class="fa fa-play"></i> Launch
-                    </button>
-                    <button class="action-button secondary" ng-click="showContainerDetails(container)">
-                        <i class="fa fa-cog"></i> Manage
-                    </button>
-                </div>
-            </div>
-        </div>
-
-        <!-- List View (existing table) -->
-        <div ng-if="viewMode === 'list'">
-            <div class="panel" ng-hide="listcontainerview">
-                <div class="panel-body">
-                    <h3 class="content-box-header">
-                        {% trans "Containers" %} {{ dockerSite.SiteName }}<img id="imageLoading"
-                                                                               src="/static/images/loading.gif"
-                                                                               style="display: none;">
-                    </h3>
-                    <span style="display: none" id="sitename">{{ dockerSite.SiteName }}</span>
-                    <div class="example-box-wrapper ">
-
-                        <table cellpadding="0" cellspacing="0" border="0" class="table table-striped" id="datatable-example"
-                               style="padding:0px;">
-                            <thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Launch</th>
-                                {#                            <th>Owner</th>#}
-                                {#                            <th>Image</th>#}
-                                {#                            <th>Tag</th>#}
+                    <table cellpadding="0" cellspacing="0" border="0" class="table table-striped" id="datatable-example"
+                           style="padding:0px;">
+                        <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Launch</th>
+                            {#                            <th>Owner</th>#}
+                            {#                            <th>Image</th>#}
+                            {#                            <th>Tag</th>#}
 {#                            <th>Actions</th>#}
-                            </tr>
-                            </thead>
-                            <tbody>
+                        </tr>
+                        </thead>
+                        <tbody>
 
-                            <tr ng-repeat="web in ContainerList track by $index">
-                                <td ng-bind="web.name"></td>
-                                <td ng-click="Lunchcontainer(web.id)"><img width="30px" height="30" class=""
-                                                                           src="{% static 'baseTemplate/assets/image-resources/webPanel.png' %}">
-                                </td>
-                                {#                            <td ng-bind="web.admin"></td>#}
-                                {#                            <td ng-bind="web.image"></td>#}
-                                {#                            <td ng-bind="web.tag"></td>#}
+                        <tr ng-repeat="web in ContainerList track by $index">
+                            <td ng-bind="web.name"></td>
+                            <td ng-click="Lunchcontainer(web.id)"><img width="30px" height="30" class=""
+                                                                       src="{% static 'baseTemplate/assets/image-resources/webPanel.png' %}">
+                            </td>
+                            {#                            <td ng-bind="web.admin"></td>#}
+                            {#                            <td ng-bind="web.image"></td>#}
+                            {#                            <td ng-bind="web.tag"></td>#}
 {#                            <td>#}
 {#                                <button class="btn btn-primary" ng-click="delContainer(web.name)"><i#}
 {#                                        class="fa fa-trash btn-icon"></i></button>#}
                                 {#                                <button class="btn btn-primary" ng-click="showLog(web.name)"><i#}
                                 {#                                        class="fa fa-file btn-icon"></i></button>#}
 {#                            </td>#}
+                        </tr>
+
+                        </tbody>
+                    </table>
+
+
+                    <div id="listFail" class="alert alert-danger">
+                        <p>{% trans "Error message:" %} {$ errorMessage $}</p>
+                    </div>
+
+                    <div class="row text-center">
+
+                        <div class="col-sm-4 col-sm-offset-8">
+
+                            <nav aria-label="Page navigation">
+                                <ul class="pagination">
+
+
+                                    {% for items in pagination %}
+
+                                        <li ng-click="getFurtherContainersFromDB({{ forloop.counter }})" id="webPages">
+                                            <a href="">{{ forloop.counter }}</a></li>
+
+                                    {% endfor %}
+
+                                </ul>
+                            </nav>
+
+
+                        </div>
+
+
+                    </div>
+
+                    {% if showUnlistedContainer %}
+                        <h3 class="title-hero">
+                            {% trans "Unlisted Containers" %} <i class="fa fa-question-circle"
+                                                                 title="{% trans "Containers listed below were either not created through panel or were not saved to database properly" %}"></i>
+                        </h3>
+
+                        <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered"
+                               id="datatable-example">
+                            <thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Status</th>
+                                <th>Actions</th>
                             </tr>
+                            </thead>
+                            <tbody>
+
+                            {% for container in unlistedContainers %}
+                                <tr>
+                                    <td>{{ container.name }}</td>
+                                    <td>{{ container.status }}</td>
+                                    <td>
+                                        <button class="btn btn-primary"
+                                                ng-click="delContainer('{{ container.name }}', true)"><i
+                                                class="fa fa-trash"></i></button>
+                                        <button class="btn btn-primary" ng-click="showLog('{{ container.name }}')"><i
+                                                class="fa fa-file"></i></button>
+                                        <button class="btn btn-primary"
+                                                ng-click="assignContainer('{{ container.name }}')"><i
+                                                class="fa fa-user"></i></button>
+                                    </td>
+                                </tr>
+                            {% endfor %}
 
                             </tbody>
                         </table>
 
+                    {% endif %}
 
-                        <div id="listFail" class="alert alert-danger">
-                            <p>{% trans "Error message:" %} {$ errorMessage $}</p>
-                        </div>
+                    <div id="logs" class="modal fade" role="dialog">
+                        <div class="modal-dialog">
 
-                        <div class="row text-center">
-
-                            <div class="col-sm-4 col-sm-offset-8">
-
-                                <nav aria-label="Page navigation">
-                                    <ul class="pagination">
-
-
-                                        {% for items in pagination %}
-
-                                            <li ng-click="getFurtherContainersFromDB({{ forloop.counter }})" id="webPages">
-                                                <a href="">{{ forloop.counter }}</a></li>
-
-                                        {% endfor %}
-
-                                    </ul>
-                                </nav>
-
-
-                            </div>
-
-
-                        </div>
-
-                        {% if showUnlistedContainer %}
-                            <h3 class="title-hero">
-                                {% trans "Unlisted Containers" %} <i class="fa fa-question-circle"
-                                                                     title="{% trans "Containers listed below were either not created through panel or were not saved to database properly" %}"></i>
-                            </h3>
-
-                            <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered"
-                                   id="datatable-example">
-                                <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Status</th>
-                                    <th>Actions</th>
-                                </tr>
-                                </thead>
-                                <tbody>
-
-                                {% for container in unlistedContainers %}
-                                    <tr>
-                                        <td>{{ container.name }}</td>
-                                        <td>{{ container.status }}</td>
-                                        <td>
-                                            <button class="btn btn-primary"
-                                                    ng-click="delContainer('{{ container.name }}', true)"><i
-                                                    class="fa fa-trash"></i></button>
-                                            <button class="btn btn-primary" ng-click="showLog('{{ container.name }}')"><i
-                                                    class="fa fa-file"></i></button>
-                                            <button class="btn btn-primary"
-                                                    ng-click="assignContainer('{{ container.name }}')"><i
-                                                    class="fa fa-user"></i></button>
-                                        </td>
-                                    </tr>
-                                {% endfor %}
-
-                                </tbody>
-                            </table>
-
-                        {% endif %}
-
-                        <div id="logs" class="modal fade" role="dialog">
-                            <div class="modal-dialog">
-
-                                <!-- Modal content-->
-                                <div class="modal-content">
-                                    <div class="modal-header">
-                                        <button type="button" class="close" data-dismiss="modal">&times;</button>
-                                        <h4 class="modal-title">Container logs</h4>
-                                    </div>
-                                    <div class="modal-body">
-                                        <textarea name="logs" class="form-control" id="" cols="30"
-                                                  rows="10">{$ logs $}</textarea>
-                                    </div>
-                                    <div class="modal-footer">
-                                        <button type="button" class="btn btn-primary" ng-click="showLog('', true)">Refresh
-                                        </button>
-                                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-                                    </div>
+                            <!-- Modal content-->
+                            <div class="modal-content">
+                                <div class="modal-header">
+                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
+                                    <h4 class="modal-title">Container logs</h4>
                                 </div>
-
-                            </div>
-                        </div>
-
-                        <div id="assign" class="modal fade" role="dialog">
-                            <div class="modal-dialog">
-
-                                <!-- Modal content-->
-                                <div class="modal-content">
-                                    <div class="modal-header">
-                                        <button type="button" class="close" data-dismiss="modal">&times;</button>
-                                        <h4 class="modal-title">Assign Container to user</h4>
-                                    </div>
-                                    <div class="modal-body">
-                                        <form action="/" class="form-horizontal">
-                                            <div ng-hide="installationDetailsForm" class="form-group">
-                                                <label class="col-sm-3 control-label">{% trans "Select Owner" %}</label>
-                                                <div class="col-sm-6">
-                                                    <select ng-model="dockerOwner" class="form-control">
-                                                        {% for user in adminNames %}
-                                                            <option>{{ user }}</option>
-                                                        {% endfor %}
-                                                    </select>
-                                                </div>
-                                            </div>
-                                        </form>
-                                    </div>
-                                    <div class="modal-footer">
-                                        <button type="button" class="btn btn-primary" ng-click="submitAssignContainer()">
-                                            Submit
-                                        </button>
-                                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-                                    </div>
+                                <div class="modal-body">
+                                    <textarea name="logs" class="form-control" id="" cols="30"
+                                              rows="10">{$ logs $}</textarea>
+                                </div>
+                                <div class="modal-footer">
+                                    <button type="button" class="btn btn-primary" ng-click="showLog('', true)">Refresh
+                                    </button>
+                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                 </div>
-
                             </div>
-                        </div>
 
+                        </div>
                     </div>
+
+                    <div id="assign" class="modal fade" role="dialog">
+                        <div class="modal-dialog">
+
+                            <!-- Modal content-->
+                            <div class="modal-content">
+                                <div class="modal-header">
+                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
+                                    <h4 class="modal-title">Assign Container to user</h4>
+                                </div>
+                                <div class="modal-body">
+                                    <form action="/" class="form-horizontal">
+                                        <div ng-hide="installationDetailsForm" class="form-group">
+                                            <label class="col-sm-3 control-label">{% trans "Select Owner" %}</label>
+                                            <div class="col-sm-6">
+                                                <select ng-model="dockerOwner" class="form-control">
+                                                    {% for user in adminNames %}
+                                                        <option>{{ user }}</option>
+                                                    {% endfor %}
+                                                </select>
+                                            </div>
+                                        </div>
+                                    </form>
+                                </div>
+                                <div class="modal-footer">
+                                    <button type="button" class="btn btn-primary" ng-click="submitAssignContainer()">
+                                        Submit
+                                    </button>
+                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                                </div>
+                            </div>
+
+                        </div>
+                    </div>
+
                 </div>
             </div>
         </div>
@@ -597,126 +332,150 @@
             <div>
 
 
-                <div id="page-title">
-                    <h2 id="domainNamePage">{% trans "Currently managing: " %} {$ cName $}
-                        <button class="btn btn-warning pull-right" data-toggle="modal"
-                                data-target="#Recreatedockerapp"><i
-                                class="fa fa-refresh btn-icon"></i> Recreate
+                <div id="page-title" class="mb-4">
+                    <h2 id="domainNamePage" class="d-flex justify-content-between align-items-center">
+                        <span>{% trans "Currently managing: " %} {$ cName $}</span>
+                        <button class="btn btn-warning" data-toggle="modal" data-target="#Recreatedockerapp">
+                            <i class="fa fa-refresh btn-icon"></i> Recreate
                         </button>
                     </h2>
-                    <p>
-                        {% trans "Container ID" %}: {$ cid $}
+                    <p class="text-muted">
+                        {% trans "Container ID" %}: <code>{$ cid $}</code>
                     </p>
-
                 </div>
 
 
-                <div class="example-box-wrapper">
-
+                <div class="container-fluid p-0">
                     <div class="panel panel-body">
-                        <h3 class="content-box-header">
+                        <h3 class="content-box-header d-flex justify-content-between align-items-center mb-4">
                             {% trans "Container Information" %}
                             <img id="infoLoading" src="/static/images/loading.gif" style="display: none;">
                         </h3>
 
-                        <div class="row">
+                        <div class="row g-4">
                             <div class="col-md-6">
-                                <div class="info-box">
-                                    <h4>Basic Information</h4>
-                                    <p><strong>Container ID:</strong> {$ cid $}</p>
-                                    <p><strong>Status:</strong> <span class="label" ng-class="{'label-success': status === 'running', 'label-danger': status === 'stopped', 'label-warning': status !== 'running' && status !== 'stopped'}">{$ status $}</span></p>
-                                    <p><strong>Created:</strong> {$ created | date:'medium' $}</p>
-                                    <p><strong>Uptime:</strong> {$ uptime $}</p>
+                                <div class="info-box shadow-sm">
+                                    <h4 class="border-bottom pb-2 mb-3">Basic Information</h4>
+                                    <div class="info-list">
+                                        <p class="mb-2"><strong>Container ID:</strong> <code>{$ cid $}</code></p>
+                                        <p class="mb-2"><strong>Status:</strong> 
+                                            <span class="label px-3 py-1 rounded" ng-class="{'label-success': status === 'running', 'label-danger': status === 'stopped', 'label-warning': status !== 'running' && status !== 'stopped'}">
+                                                {$ status $}
+                                            </span>
+                                        </p>
+                                        <p class="mb-2"><strong>Created:</strong> {$ created | date:'medium' $}</p>
+                                        <p class="mb-2"><strong>Uptime:</strong> {$ uptime $}</p>
+                                    </div>
                                 </div>
 
-                                <div class="info-box">
-                                    <h4>Resource Usage</h4>
-                                    <div class="progress">
-                                        <div class="progress-bar" role="progressbar" ng-style="{'width': memoryUsagePercent + '%'}" aria-valuenow="{$ memoryUsagePercent $}" aria-valuemin="0" aria-valuemax="100">
-                                            Memory: {$ memoryUsagePercent | number:1 $}%
+                                <div class="info-box shadow-sm mt-4">
+                                    <h4 class="border-bottom pb-2 mb-3">Resource Usage</h4>
+                                    <div class="mb-3">
+                                        <label class="mb-2">Memory Usage</label>
+                                        <div class="progress" style="height: 20px;">
+                                            <div class="progress-bar" role="progressbar" 
+                                                ng-style="{'width': memoryUsagePercent + '%'}" 
+                                                aria-valuenow="{$ memoryUsagePercent $}" 
+                                                aria-valuemin="0" 
+                                                aria-valuemax="100">
+                                                {$ memoryUsagePercent | number:1 $}%
+                                            </div>
                                         </div>
                                     </div>
-                                    <div class="progress">
-                                        <div class="progress-bar" role="progressbar" ng-style="{'width': cpuUsagePercent + '%'}" aria-valuenow="{$ cpuUsagePercent $}" aria-valuemin="0" aria-valuemax="100">
-                                            CPU: {$ cpuUsagePercent | number:1 $}%
+                                    <div>
+                                        <label class="mb-2">CPU Usage</label>
+                                        <div class="progress" style="height: 20px;">
+                                            <div class="progress-bar" role="progressbar" 
+                                                ng-style="{'width': cpuUsagePercent + '%'}" 
+                                                aria-valuenow="{$ cpuUsagePercent $}" 
+                                                aria-valuemin="0" 
+                                                aria-valuemax="100">
+                                                {$ cpuUsagePercent | number:1 $}%
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
 
                             <div class="col-md-6">
-                                <div class="info-box">
-                                    <h4>Network & Ports</h4>
+                                <div class="info-box shadow-sm">
+                                    <h4 class="border-bottom pb-2 mb-3">Network & Ports</h4>
                                     <div ng-if="ports && (ports | objLength) > 0">
-                                        <table class="table table-striped">
-                                            <thead>
-                                                <tr>
-                                                    <th>Container Port</th>
-                                                    <th>Host Binding</th>
-                                                </tr>
-                                            </thead>
-                                            <tbody>
-                                                <tr ng-repeat="(containerPort, hostBindings) in ports">
-                                                    <td>{$ containerPort $}</td>
-                                                    <td>
-                                                        <span ng-repeat="binding in hostBindings">
-                                                            {$ binding.HostIp || '0.0.0.0' $}:{$ binding.HostPort $}
-                                                        </span>
-                                                    </td>
-                                                </tr>
-                                            </tbody>
-                                        </table>
+                                        <div class="table-responsive">
+                                            <table class="table table-striped table-hover mb-0">
+                                                <thead>
+                                                    <tr>
+                                                        <th>Container Port</th>
+                                                        <th>Host Binding</th>
+                                                    </tr>
+                                                </thead>
+                                                <tbody>
+                                                    <tr ng-repeat="(containerPort, hostBindings) in ports">
+                                                        <td><code>{$ containerPort $}</code></td>
+                                                        <td>
+                                                            <span ng-repeat="binding in hostBindings" class="badge bg-light text-dark me-2">
+                                                                {$ binding.HostIp || '0.0.0.0' $}:{$ binding.HostPort $}
+                                                            </span>
+                                                        </td>
+                                                    </tr>
+                                                </tbody>
+                                            </table>
+                                        </div>
                                     </div>
-                                    <div ng-if="!ports || (ports | objLength) === 0">
-                                        <p>No ports exposed</p>
+                                    <div ng-if="!ports || (ports | objLength) === 0" class="text-muted">
+                                        <p class="mb-0">No ports exposed</p>
                                     </div>
                                 </div>
 
-                                <div class="info-box">
-                                    <h4>Volumes</h4>
+                                <div class="info-box shadow-sm mt-4">
+                                    <h4 class="border-bottom pb-2 mb-3">Volumes</h4>
                                     <div ng-if="volumes && volumes.length > 0">
-                                        <table class="table table-striped">
-                                            <thead>
-                                                <tr>
-                                                    <th>Source</th>
-                                                    <th>Destination</th>
-                                                    <th>Mode</th>
-                                                </tr>
-                                            </thead>
-                                            <tbody>
-                                                <tr ng-repeat="volume in volumes">
-                                                    <td>{$ volume.Source $}</td>
-                                                    <td>{$ volume.Destination $}</td>
-                                                    <td>{$ volume.Mode $}</td>
-                                                </tr>
-                                            </tbody>
-                                        </table>
+                                        <div class="table-responsive">
+                                            <table class="table table-striped table-hover mb-0">
+                                                <thead>
+                                                    <tr>
+                                                        <th>Source</th>
+                                                        <th>Destination</th>
+                                                        <th>Mode</th>
+                                                    </tr>
+                                                </thead>
+                                                <tbody>
+                                                    <tr ng-repeat="volume in volumes">
+                                                        <td><code>{$ volume.Source $}</code></td>
+                                                        <td><code>{$ volume.Destination $}</code></td>
+                                                        <td><span class="badge bg-secondary">{$ volume.Mode $}</span></td>
+                                                    </tr>
+                                                </tbody>
+                                            </table>
+                                        </div>
                                     </div>
-                                    <div ng-if="!volumes || volumes.length === 0">
-                                        <p>No volumes mounted</p>
+                                    <div ng-if="!volumes || volumes.length === 0" class="text-muted">
+                                        <p class="mb-0">No volumes mounted</p>
                                     </div>
                                 </div>
 
-                                <div class="info-box">
-                                    <h4>Environment Variables</h4>
+                                <div class="info-box shadow-sm mt-4">
+                                    <h4 class="border-bottom pb-2 mb-3">Environment Variables</h4>
                                     <div ng-if="environment && environment.length > 0">
-                                        <table class="table table-striped">
-                                            <thead>
-                                                <tr>
-                                                    <th>Variable</th>
-                                                    <th>Value</th>
-                                                </tr>
-                                            </thead>
-                                            <tbody>
-                                                <tr ng-repeat="env in environment">
-                                                    <td>{$ env.split('=')[0] $}</td>
-                                                    <td>{$ env.split('=')[1] $}</td>
-                                                </tr>
-                                            </tbody>
-                                        </table>
+                                        <div class="table-responsive">
+                                            <table class="table table-striped table-hover mb-0">
+                                                <thead>
+                                                    <tr>
+                                                        <th>Variable</th>
+                                                        <th>Value</th>
+                                                    </tr>
+                                                </thead>
+                                                <tbody>
+                                                    <tr ng-repeat="env in environment">
+                                                        <td><code>{$ env.split('=')[0] $}</code></td>
+                                                        <td><code>{$ env.split('=')[1] $}</code></td>
+                                                    </tr>
+                                                </tbody>
+                                            </table>
+                                        </div>
                                     </div>
-                                    <div ng-if="!environment || environment.length === 0">
-                                        <p>No environment variables set</p>
+                                    <div ng-if="!environment || environment.length === 0" class="text-muted">
+                                        <p class="mb-0">No environment variables set</p>
                                     </div>
                                 </div>
                             </div>