Nemcio/CyberPanel
1
0
Fork 0
mirror of https://github.com/usmannasir/cyberpanel.git synced 2026-07-13 14:22:15 +02:00
Code Issues Packages Projects Releases Wiki Activity

v2.4.3

Browse Source
This commit is contained in:
usmannasir
2025-08-04 00:03:02 +05:00
parent de247707ab
commit 1a09596ff5
141 changed files with 10441 additions and 7075 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
dockerManager/templates/dockerManager/images.html
View File

@@ -18,7 +18,7 @@
text-align: center;
margin-bottom: 3rem;
padding: 3rem 0;
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
border-radius: 20px;
animation: fadeInDown 0.5s ease-out;
position: relative;
@@ -32,14 +32,14 @@
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at 70% 30%, rgba(91, 95, 207, 0.15) 0%, transparent 50%);
background: radial-gradient(circle at 70% 30%, var(--accent-shadow-light, rgba(91, 95, 207, 0.15)) 0%, transparent 50%);
animation: rotate 30s linear infinite;
}
.page-title {
font-size: 3rem;
font-weight: 700;
color: #1e293b;
color: var(--text-primary, #1e293b);
margin-bottom: 1rem;
display: flex;
align-items: center;
@@ -52,17 +52,17 @@
.docker-icon {
width: 60px;
height: 60px;
background: white;
background: var(--bg-secondary, white);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
box-shadow: 0 4px 12px var(--shadow-medium, rgba(0,0,0,0.1));
}
.page-subtitle {
font-size: 1.25rem;
color: #64748b;
color: var(--text-secondary, #64748b);
margin-bottom: 1.5rem;
position: relative;
z-index: 1;
@@ -78,8 +78,8 @@
}
.btn-primary {
background: #5b5fcf;
color: white;
background: var(--accent-color, #5b5fcf);
color: var(--bg-secondary, white);
border: none;
padding: 0.75rem 2rem;
border-radius: 10px;
@@ -94,16 +94,16 @@
}
.btn-primary:hover {
background: #4547a9;
background: var(--accent-hover, #4547a9);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(91, 95, 207, 0.4);
color: white;
box-shadow: 0 8px 20px var(--accent-shadow-hover, rgba(91, 95, 207, 0.4));
color: var(--bg-secondary, white);
}
.btn-secondary {
background: #fff;
color: #5b5fcf;
border: 1px solid #e8e9ff;
background: var(--bg-secondary, #fff);
color: var(--accent-color, #5b5fcf);
border: 1px solid var(--border-color, #e8e9ff);
padding: 0.75rem 2rem;
border-radius: 10px;
font-weight: 500;
@@ -117,26 +117,26 @@
}
.btn-secondary:hover {
background: #f8f9ff;
border-color: #5b5fcf;
background: var(--bg-hover, #f8f9ff);
border-color: var(--accent-color, #5b5fcf);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(91, 95, 207, 0.2);
}
.main-card {
background: white;
background: var(--bg-secondary, white);
border-radius: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
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);
overflow: hidden;
margin-bottom: 2rem;
animation: fadeInUp 0.5s ease-out;
}
.card-header {
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
padding: 1.5rem 2rem;
border-bottom: 1px solid #e8e9ff;
border-bottom: 1px solid var(--border-color, #e8e9ff);
display: flex;
justify-content: space-between;
align-items: center;
@@ -145,7 +145,7 @@
.card-title {
font-size: 1.25rem;
font-weight: 600;
color: #1e293b;
color: var(--text-primary, #1e293b);
margin: 0;
display: flex;
align-items: center;
@@ -163,8 +163,8 @@
}
.image-card {
background: #f8f9ff;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 12px;
padding: 1.5rem;
transition: all 0.3s ease;
@@ -179,15 +179,15 @@
right: 0;
width: 100px;
height: 100px;
background: linear-gradient(135deg, rgba(91, 95, 207, 0.1) 0%, transparent 100%);
background: linear-gradient(135deg, var(--accent-focus, rgba(91, 95, 207, 0.1)) 0%, transparent 100%);
border-radius: 0 0 0 100%;
transition: all 0.3s ease;
}
.image-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(91, 95, 207, 0.15);
border-color: #5b5fcf;
box-shadow: 0 8px 20px var(--accent-shadow-light, rgba(91, 95, 207, 0.15));
border-color: var(--accent-color, #5b5fcf);
}
.image-card:hover::before {
@@ -205,13 +205,13 @@
.image-icon {
width: 48px;
height: 48px;
background: white;
background: var(--bg-secondary, white);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
color: #5b5fcf;
box-shadow: 0 2px 8px var(--shadow-medium, rgba(0,0,0,0.1));
color: var(--accent-color, #5b5fcf);
font-size: 1.5rem;
}
@@ -222,14 +222,14 @@
.image-title {
font-size: 1.125rem;
font-weight: 600;
color: #1e293b;
color: var(--text-primary, #1e293b);
margin: 0;
word-break: break-word;
}
.image-subtitle {
font-size: 0.75rem;
color: #64748b;
color: var(--text-secondary, #64748b);
margin-top: 0.25rem;
}
@@ -240,7 +240,7 @@
.tag-label {
font-size: 0.75rem;
font-weight: 600;
color: #64748b;
color: var(--text-secondary, #64748b);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.5rem;
@@ -250,10 +250,10 @@
.tag-select {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
background: white;
color: #1e293b;
background: var(--bg-secondary, white);
color: var(--text-primary, #1e293b);
font-size: 0.875rem;
transition: all 0.3s ease;
cursor: pointer;
@@ -261,8 +261,8 @@
.tag-select:focus {
outline: none;
border-color: #5b5fcf;
box-shadow: 0 0 0 3px rgba(91, 95, 207, 0.1);
border-color: var(--accent-color, #5b5fcf);
box-shadow: 0 0 0 3px var(--accent-focus, rgba(91, 95, 207, 0.1));
}
.image-actions {
@@ -289,25 +289,25 @@
}
.action-btn.create {
background: #5b5fcf;
color: white;
background: var(--accent-color, #5b5fcf);
color: var(--bg-secondary, white);
}
.action-btn.create:hover {
background: #4547a9;
background: var(--accent-hover, #4547a9);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(91, 95, 207, 0.3);
}
.action-btn.details {
background: white;
color: #5b5fcf;
border: 1px solid #e8e9ff;
background: var(--bg-secondary, white);
color: var(--accent-color, #5b5fcf);
border: 1px solid var(--border-color, #e8e9ff);
}
.action-btn.details:hover {
background: #f8f9ff;
border-color: #5b5fcf;
background: var(--bg-hover, #f8f9ff);
border-color: var(--accent-color, #5b5fcf);
transform: translateY(-2px);
}
@@ -319,25 +319,25 @@
.empty-icon {
width: 80px;
height: 80px;
background: #f8f9ff;
background: var(--bg-hover, #f8f9ff);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
color: #5b5fcf;
color: var(--accent-color, #5b5fcf);
font-size: 2rem;
}
.empty-title {
font-size: 1.25rem;
font-weight: 600;
color: #1e293b;
color: var(--text-primary, #1e293b);
margin-bottom: 0.5rem;
}
.empty-text {
color: #64748b;
color: var(--text-secondary, #64748b);
margin-bottom: 2rem;
}
@@ -345,7 +345,7 @@
width: 20px;
height: 20px;
border: 3px solid #e8e9ff;
border-top-color: #5b5fcf;
border-top-color: var(--accent-color, #5b5fcf);
border-radius: 50%;
animation: spin 1s linear infinite;
display: inline-block;
@@ -363,8 +363,8 @@
}
.badge-count {
background: #e0e7ff;
color: #5b5fcf;
background: var(--accent-bg, #e0e7ff);
color: var(--accent-color, #5b5fcf);
}
@keyframes spin {
@@ -423,7 +423,7 @@
<div class="page-header">
<h1 class="page-title">
<div class="docker-icon">
<i class="fab fa-docker" style="color: #5b5fcf; font-size: 1.75rem;"></i>
<i class="fab fa-docker" style="color: var(--accent-color, #5b5fcf); font-size: 1.75rem;"></i>
</div>
{% trans "Docker Images" %}
</h1>
@@ -515,32 +515,32 @@
</div>
<div class="card-body">
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem;">
<div style="background: #f8f9ff; padding: 1rem; border-radius: 8px; border-left: 4px solid #5b5fcf;">
<h4 style="font-size: 0.875rem; font-weight: 600; color: #1e293b; margin-bottom: 0.5rem;">
<i class="fas fa-tag" style="color: #5b5fcf; margin-right: 0.5rem;"></i>
<div style="background: var(--bg-hover, #f8f9ff); padding: 1rem; border-radius: 8px; border-left: 4px solid var(--accent-color, #5b5fcf);">
<h4 style="font-size: 0.875rem; font-weight: 600; color: var(--text-primary, #1e293b); margin-bottom: 0.5rem;">
<i class="fas fa-tag" style="color: var(--accent-color, #5b5fcf); margin-right: 0.5rem;"></i>
{% trans "About Tags" %}
</h4>
<p style="font-size: 0.8125rem; color: #64748b; margin: 0;">
<p style="font-size: 0.8125rem; color: var(--text-secondary, #64748b); margin: 0;">
{% trans "Tags represent different versions of an image. 'latest' is the most recent stable version." %}
</p>
</div>
<div style="background: #f8f9ff; padding: 1rem; border-radius: 8px; border-left: 4px solid #10b981;">
<h4 style="font-size: 0.875rem; font-weight: 600; color: #1e293b; margin-bottom: 0.5rem;">
<i class="fas fa-memory" style="color: #10b981; margin-right: 0.5rem;"></i>
<div style="background: var(--bg-hover, #f8f9ff); padding: 1rem; border-radius: 8px; border-left: 4px solid var(--success-color, #10b981);">
<h4 style="font-size: 0.875rem; font-weight: 600; color: var(--text-primary, #1e293b); margin-bottom: 0.5rem;">
<i class="fas fa-memory" style="color: var(--success-color, #10b981); margin-right: 0.5rem;"></i>
{% trans "Container Resources" %}
</h4>
<p style="font-size: 0.8125rem; color: #64748b; margin: 0;">
<p style="font-size: 0.8125rem; color: var(--text-secondary, #64748b); margin: 0;">
{% trans "You can set memory limits and other resources when creating a container." %}
</p>
</div>
<div style="background: #f8f9ff; padding: 1rem; border-radius: 8px; border-left: 4px solid #f59e0b;">
<h4 style="font-size: 0.875rem; font-weight: 600; color: #1e293b; margin-bottom: 0.5rem;">
<i class="fas fa-network-wired" style="color: #f59e0b; margin-right: 0.5rem;"></i>
<div style="background: var(--bg-hover, #f8f9ff); padding: 1rem; border-radius: 8px; border-left: 4px solid var(--warning-color, #f59e0b);">
<h4 style="font-size: 0.875rem; font-weight: 600; color: var(--text-primary, #1e293b); margin-bottom: 0.5rem;">
<i class="fas fa-network-wired" style="color: var(--warning-color, #f59e0b); margin-right: 0.5rem;"></i>
{% trans "Port Mapping" %}
</h4>
<p style="font-size: 0.8125rem; color: #64748b; margin: 0;">
<p style="font-size: 0.8125rem; color: var(--text-secondary, #64748b); margin: 0;">
{% trans "Configure port mappings to access services running inside containers." %}
</p>
</div>

120
dockerManager/templates/dockerManager/listContainers.html
View File

@@ -18,7 +18,7 @@
text-align: center;
margin-bottom: 3rem;
padding: 3rem 0;
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
border-radius: 20px;
animation: fadeInDown 0.5s ease-out;
position: relative;
@@ -32,14 +32,14 @@
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at 70% 30%, rgba(91, 95, 207, 0.15) 0%, transparent 50%);
background: radial-gradient(circle at 70% 30%, var(--accent-shadow-light, rgba(91, 95, 207, 0.15)) 0%, transparent 50%);
animation: rotate 30s linear infinite;
}
.page-title {
font-size: 3rem;
font-weight: 700;
color: #1e293b;
color: var(--text-primary, #1e293b);
margin-bottom: 1rem;
display: flex;
align-items: center;
@@ -52,17 +52,17 @@
.docker-icon {
width: 60px;
height: 60px;
background: white;
background: var(--bg-secondary, white);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
box-shadow: 0 4px 12px var(--shadow-medium, rgba(0,0,0,0.1));
}
.page-subtitle {
font-size: 1.25rem;
color: #64748b;
color: var(--text-secondary, #64748b);
margin-bottom: 1.5rem;
position: relative;
z-index: 1;
@@ -78,8 +78,8 @@
}
.btn-primary {
background: #5b5fcf;
color: white;
background: var(--accent-color, #5b5fcf);
color: var(--bg-secondary, white);
border: none;
padding: 0.75rem 2rem;
border-radius: 10px;
@@ -94,15 +94,15 @@
}
.btn-primary:hover {
background: #4547a9;
background: var(--accent-hover, #4547a9);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(91, 95, 207, 0.4);
color: white;
box-shadow: 0 8px 20px var(--accent-shadow-hover, rgba(91, 95, 207, 0.4));
color: var(--bg-secondary, white);
}
.btn-danger {
background: #ef4444;
color: white;
background: var(--danger-color, #ef4444);
color: var(--bg-secondary, white);
border: none;
padding: 0.5rem 1rem;
border-radius: 8px;
@@ -117,14 +117,14 @@
}
.btn-danger:hover {
background: #dc2626;
background: var(--danger-hover, #dc2626);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
box-shadow: 0 4px 12px var(--danger-shadow, rgba(239, 68, 68, 0.4));
}
.btn-info {
background: #3b82f6;
color: white;
background: var(--info-color, #3b82f6);
color: var(--bg-secondary, white);
border: none;
padding: 0.5rem 1rem;
border-radius: 8px;
@@ -139,14 +139,14 @@
}
.btn-info:hover {
background: #2563eb;
background: var(--info-hover, #2563eb);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
box-shadow: 0 4px 12px var(--info-shadow, rgba(59, 130, 246, 0.4));
}
.btn-success {
background: #10b981;
color: white;
background: var(--success-color, #10b981);
color: var(--bg-secondary, white);
border: none;
padding: 0.5rem 1rem;
border-radius: 8px;
@@ -167,19 +167,19 @@
}
.main-card {
background: white;
background: var(--bg-secondary, white);
border-radius: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
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);
overflow: hidden;
margin-bottom: 2rem;
animation: fadeInUp 0.5s ease-out;
}
.card-header {
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
padding: 1.5rem 2rem;
border-bottom: 1px solid #e8e9ff;
border-bottom: 1px solid var(--border-color, #e8e9ff);
display: flex;
justify-content: space-between;
align-items: center;
@@ -188,7 +188,7 @@
.card-title {
font-size: 1.25rem;
font-weight: 600;
color: #1e293b;
color: var(--text-primary, #1e293b);
margin: 0;
display: flex;
align-items: center;
@@ -201,33 +201,33 @@
.containers-table {
width: 100%;
background: white;
background: var(--bg-secondary, white);
border-radius: 12px;
overflow: hidden;
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
margin-bottom: 2rem;
}
.containers-table thead {
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
}
.containers-table th {
padding: 1rem;
text-align: left;
font-weight: 600;
color: #1e293b;
color: var(--text-primary, #1e293b);
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 2px solid #e8e9ff;
border-bottom: 2px solid var(--border-color, #e8e9ff);
}
.containers-table td {
padding: 1rem;
color: #64748b;
color: var(--text-secondary, #64748b);
font-size: 0.875rem;
border-bottom: 1px solid #f3f4f6;
border-bottom: 1px solid var(--border-light, #f3f4f6);
vertical-align: middle;
}
@@ -236,7 +236,7 @@
}
.containers-table tbody tr:hover {
background: #f8f9ff;
background: var(--bg-hover, #f8f9ff);
}
.containers-table tbody tr:last-child td {
@@ -252,13 +252,13 @@
.container-icon {
width: 32px;
height: 32px;
background: #e0e7ff;
background: var(--accent-bg, #e0e7ff);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.875rem;
color: #5b5fcf;
color: var(--accent-color, #5b5fcf);
}
.status-badge {
@@ -271,8 +271,8 @@
}
.status-running {
background: #d1fae5;
color: #065f46;
background: var(--success-bg, #d1fae5);
color: var(--success-text, #065f46);
}
.status-stopped {
@@ -290,7 +290,7 @@
width: 20px;
height: 20px;
border: 3px solid #e8e9ff;
border-top-color: #5b5fcf;
border-top-color: var(--accent-color, #5b5fcf);
border-radius: 50%;
animation: spin 1s linear infinite;
display: inline-block;
@@ -320,37 +320,37 @@
.pagination li a {
display: block;
padding: 0.5rem 1rem;
background: #f8f9ff;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
color: #5b5fcf;
color: var(--accent-color, #5b5fcf);
text-decoration: none;
font-weight: 500;
transition: all 0.2s ease;
}
.pagination li a:hover {
background: #5b5fcf;
color: white;
background: var(--accent-color, #5b5fcf);
color: var(--bg-secondary, white);
}
.modal-content {
border-radius: 16px;
overflow: hidden;
border: none;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
box-shadow: 0 25px 50px -12px var(--shadow-dark, rgba(0, 0, 0, 0.25));
}
.modal-header {
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
border-bottom: 1px solid #e8e9ff;
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
border-bottom: 1px solid var(--border-color, #e8e9ff);
padding: 1.5rem 2rem;
}
.modal-title {
font-size: 1.25rem;
font-weight: 600;
color: #1e293b;
color: var(--text-primary, #1e293b);
margin: 0;
}
@@ -359,8 +359,8 @@
}
.modal-footer {
background: #f8f9ff;
border-top: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
border-top: 1px solid var(--border-color, #e8e9ff);
padding: 1rem 2rem;
}
@@ -378,19 +378,19 @@
}
.modal-footer .btn.btn-primary {
background: #5b5fcf;
color: white;
background: var(--accent-color, #5b5fcf);
color: var(--bg-secondary, white);
}
.modal-footer .btn.btn-primary:hover {
background: #4547a9;
background: var(--accent-hover, #4547a9);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(91, 95, 207, 0.3);
}
.modal-footer .btn.btn-secondary {
background: #6b7280;
color: white;
color: var(--bg-secondary, white);
margin-left: 0.5rem;
}
@@ -474,7 +474,7 @@
<div class="page-header">
<h1 class="page-title">
<div class="docker-icon">
<i class="fab fa-docker" style="color: #5b5fcf; font-size: 1.75rem;"></i>
<i class="fab fa-docker" style="color: var(--accent-color, #5b5fcf); font-size: 1.75rem;"></i>
</div>
{% trans "Container Management" %}
</h1>
@@ -635,7 +635,7 @@
{% trans "Container Logs" %}
</h4>
<button type="button" class="close" data-dismiss="modal"
style="font-size: 1.5rem; background: none; border: none;">&times;</button>
style="font-size: 1.5rem; background: transparent; border: none;">&times;</button>
</div>
<div class="modal-body">
<textarea name="logs" class="form-control" style="font-family: monospace; height: 400px; resize: vertical;"
@@ -665,15 +665,15 @@
{% trans "Assign Container to User" %}
</h4>
<button type="button" class="close" data-dismiss="modal"
style="font-size: 1.5rem; background: none; border: none;">&times;</button>
style="font-size: 1.5rem; background: transparent; border: none;">&times;</button>
</div>
<div class="modal-body">
<div class="form-group">
<label style="display: block; margin-bottom: 0.5rem; font-weight: 500; color: #1e293b;">
<label style="display: block; margin-bottom: 0.5rem; font-weight: 500; color: var(--text-primary, #1e293b);">
{% trans "Select Owner" %}
</label>
<select ng-model="dockerOwner" class="form-control"
style="width: 100%; padding: 0.75rem; border: 1px solid #e8e9ff; border-radius: 8px;">
style="width: 100%; padding: 0.75rem; border: 1px solid var(--border-color, #e8e9ff); border-radius: 8px;">
{% for user in adminNames %}
<option>{{user}}</option>
{% endfor %}

136
dockerManager/templates/dockerManager/manageImages.html
View File

@@ -18,7 +18,7 @@
text-align: center;
margin-bottom: 3rem;
padding: 3rem 0;
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
border-radius: 20px;
animation: fadeInDown 0.5s ease-out;
position: relative;
@@ -32,14 +32,14 @@
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at 70% 30%, rgba(91, 95, 207, 0.15) 0%, transparent 50%);
background: radial-gradient(circle at 70% 30%, var(--accent-shadow-light, rgba(91, 95, 207, 0.15)) 0%, transparent 50%);
animation: rotate 30s linear infinite;
}
.page-title {
font-size: 3rem;
font-weight: 700;
color: #1e293b;
color: var(--text-primary, #1e293b);
margin-bottom: 1rem;
display: flex;
align-items: center;
@@ -52,17 +52,17 @@
.docker-icon {
width: 60px;
height: 60px;
background: white;
background: var(--bg-secondary, white);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
box-shadow: 0 4px 12px var(--shadow-medium, rgba(0,0,0,0.1));
}
.page-subtitle {
font-size: 1.25rem;
color: #64748b;
color: var(--text-secondary, #64748b);
margin-bottom: 1.5rem;
position: relative;
z-index: 1;
@@ -78,8 +78,8 @@
}
.btn-primary {
background: #5b5fcf;
color: white;
background: var(--accent-color, #5b5fcf);
color: var(--bg-secondary, white);
border: none;
padding: 0.75rem 2rem;
border-radius: 10px;
@@ -94,16 +94,16 @@
}
.btn-primary:hover {
background: #4547a9;
background: var(--accent-hover, #4547a9);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(91, 95, 207, 0.4);
color: white;
box-shadow: 0 8px 20px var(--accent-shadow-hover, rgba(91, 95, 207, 0.4));
color: var(--bg-secondary, white);
}
.btn-secondary {
background: #fff;
color: #5b5fcf;
border: 1px solid #e8e9ff;
background: var(--bg-secondary, #fff);
color: var(--accent-color, #5b5fcf);
border: 1px solid var(--border-color, #e8e9ff);
padding: 0.75rem 2rem;
border-radius: 10px;
font-weight: 500;
@@ -117,15 +117,15 @@
}
.btn-secondary:hover {
background: #f8f9ff;
border-color: #5b5fcf;
background: var(--bg-hover, #f8f9ff);
border-color: var(--accent-color, #5b5fcf);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(91, 95, 207, 0.2);
box-shadow: 0 4px 12px var(--accent-shadow-soft, rgba(91, 95, 207, 0.2));
}
.btn-warning {
background: #f59e0b;
color: white;
background: var(--warning-color, #f59e0b);
color: var(--bg-secondary, white);
border: none;
padding: 0.75rem 2rem;
border-radius: 10px;
@@ -139,14 +139,14 @@
}
.btn-warning:hover {
background: #d97706;
background: var(--warning-hover, #d97706);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4);
box-shadow: 0 8px 20px var(--warning-shadow, rgba(245, 158, 11, 0.4));
}
.btn-danger {
background: #ef4444;
color: white;
background: var(--danger-color, #ef4444);
color: var(--bg-secondary, white);
border: none;
padding: 0.5rem 1rem;
border-radius: 8px;
@@ -160,14 +160,14 @@
}
.btn-danger:hover {
background: #dc2626;
background: var(--danger-hover, #dc2626);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
box-shadow: 0 4px 12px var(--danger-shadow, rgba(239, 68, 68, 0.4));
}
.btn-info {
background: #3b82f6;
color: white;
background: var(--info-color, #3b82f6);
color: var(--bg-secondary, white);
border: none;
padding: 0.5rem 1rem;
border-radius: 8px;
@@ -181,25 +181,25 @@
}
.btn-info:hover {
background: #2563eb;
background: var(--info-hover, #2563eb);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
box-shadow: 0 4px 12px var(--info-shadow, rgba(59, 130, 246, 0.4));
}
.main-card {
background: white;
background: var(--bg-secondary, white);
border-radius: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
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);
overflow: hidden;
margin-bottom: 2rem;
animation: fadeInUp 0.5s ease-out;
}
.card-header {
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
padding: 1.5rem 2rem;
border-bottom: 1px solid #e8e9ff;
border-bottom: 1px solid var(--border-color, #e8e9ff);
display: flex;
justify-content: space-between;
align-items: center;
@@ -208,7 +208,7 @@
.card-title {
font-size: 1.25rem;
font-weight: 600;
color: #1e293b;
color: var(--text-primary, #1e293b);
margin: 0;
display: flex;
align-items: center;
@@ -220,8 +220,8 @@
}
.search-section {
background: #f8f9ff;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 2rem;
@@ -235,55 +235,55 @@
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: #1e293b;
color: var(--text-primary, #1e293b);
font-size: 0.875rem;
}
.form-control {
width: 100%;
padding: 0.875rem 1rem;
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 10px;
font-size: 0.875rem;
transition: all 0.3s ease;
background: #fff;
background: var(--bg-secondary, #fff);
}
.form-control:focus {
outline: none;
border-color: #5b5fcf;
box-shadow: 0 0 0 3px rgba(91, 95, 207, 0.1);
border-color: var(--accent-color, #5b5fcf);
box-shadow: 0 0 0 3px var(--accent-focus, rgba(91, 95, 207, 0.1));
}
.images-table {
width: 100%;
background: white;
background: var(--bg-secondary, white);
border-radius: 12px;
overflow: hidden;
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
margin-bottom: 2rem;
}
.images-table thead {
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
}
.images-table th {
padding: 1rem;
text-align: left;
font-weight: 600;
color: #1e293b;
color: var(--text-primary, #1e293b);
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 2px solid #e8e9ff;
border-bottom: 2px solid var(--border-color, #e8e9ff);
}
.images-table td {
padding: 1rem;
color: #64748b;
color: var(--text-secondary, #64748b);
font-size: 0.875rem;
border-bottom: 1px solid #f3f4f6;
border-bottom: 1px solid var(--border-light, #f3f4f6);
}
.images-table tbody tr {
@@ -291,7 +291,7 @@
}
.images-table tbody tr:hover {
background: #f8f9ff;
background: var(--bg-hover, #f8f9ff);
}
.images-table tbody tr:last-child td {
@@ -307,18 +307,18 @@
.image-icon {
width: 32px;
height: 32px;
background: #e0e7ff;
background: var(--accent-bg, #e0e7ff);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.875rem;
color: #5b5fcf;
color: var(--accent-color, #5b5fcf);
}
.official-badge {
background: #d1fae5;
color: #065f46;
background: var(--success-bg, #d1fae5);
color: var(--success-text, #065f46);
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.75rem;
@@ -338,7 +338,7 @@
width: 20px;
height: 20px;
border: 3px solid #e8e9ff;
border-top-color: #5b5fcf;
border-top-color: var(--accent-color, #5b5fcf);
border-radius: 50%;
animation: spin 1s linear infinite;
display: inline-block;
@@ -349,19 +349,19 @@
border-radius: 16px;
overflow: hidden;
border: none;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
box-shadow: 0 25px 50px -12px var(--shadow-dark, rgba(0, 0, 0, 0.25));
}
.modal-header {
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
border-bottom: 1px solid #e8e9ff;
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
border-bottom: 1px solid var(--border-color, #e8e9ff);
padding: 1.5rem 2rem;
}
.modal-title {
font-size: 1.25rem;
font-weight: 600;
color: #1e293b;
color: var(--text-primary, #1e293b);
margin: 0;
}
@@ -370,32 +370,32 @@
}
.modal-footer {
background: #f8f9ff;
border-top: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
border-top: 1px solid var(--border-color, #e8e9ff);
padding: 1rem 2rem;
}
.history-table {
width: 100%;
background: #f8f9ff;
background: var(--bg-hover, #f8f9ff);
border-radius: 8px;
overflow: hidden;
}
.history-table th {
background: #e8e9ff;
background: var(--border-color, #e8e9ff);
padding: 0.75rem;
text-align: left;
font-weight: 600;
color: #1e293b;
color: var(--text-primary, #1e293b);
font-size: 0.875rem;
}
.history-table td {
padding: 0.75rem;
color: #64748b;
color: var(--text-secondary, #64748b);
font-size: 0.875rem;
border-bottom: 1px solid #e8e9ff;
border-bottom: 1px solid var(--border-color, #e8e9ff);
word-break: break-all;
}
@@ -458,7 +458,7 @@
<div class="page-header">
<h1 class="page-title">
<div class="docker-icon">
<i class="fab fa-docker" style="color: #5b5fcf; font-size: 1.75rem;"></i>
<i class="fab fa-docker" style="color: var(--accent-color, #5b5fcf); font-size: 1.75rem;"></i>
</div>
{% trans "Manage Docker Images" %}
</h1>
@@ -611,7 +611,7 @@
{% trans "Image History" %}
</h4>
<button type="button" class="close" data-dismiss="modal"
style="font-size: 1.5rem; background: none; border: none;">&times;</button>
style="font-size: 1.5rem; background: transparent; border: none;">&times;</button>
</div>
<div class="modal-body">
<table class="history-table">

132
dockerManager/templates/dockerManager/runContainer.html
View File

@@ -18,7 +18,7 @@
text-align: center;
margin-bottom: 3rem;
padding: 3rem 0;
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
border-radius: 20px;
animation: fadeInDown 0.5s ease-out;
position: relative;
@@ -32,7 +32,7 @@
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at 70% 30%, rgba(91, 95, 207, 0.15) 0%, transparent 50%);
background: radial-gradient(circle at 70% 30%, var(--accent-shadow-light, rgba(91, 95, 207, 0.15)) 0%, transparent 50%);
animation: rotate 30s linear infinite;
}
@@ -44,7 +44,7 @@
.page-title {
font-size: 2.5rem;
font-weight: 700;
color: #1e293b;
color: var(--text-primary, #1e293b);
margin-bottom: 1rem;
display: flex;
align-items: center;
@@ -55,12 +55,12 @@
.docker-icon {
width: 60px;
height: 60px;
background: white;
background: var(--bg-secondary, white);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
box-shadow: 0 4px 12px var(--shadow-medium, rgba(0,0,0,0.1));
}
.image-info {
@@ -70,12 +70,12 @@
gap: 0.5rem;
margin-top: 1rem;
font-size: 1.125rem;
color: #64748b;
color: var(--text-secondary, #64748b);
}
.image-badge {
background: #e0e7ff;
color: #5b5fcf;
background: var(--accent-bg, #e0e7ff);
color: var(--accent-color, #5b5fcf);
padding: 0.5rem 1rem;
border-radius: 8px;
font-weight: 600;
@@ -105,7 +105,7 @@
left: 60px;
width: 100%;
height: 2px;
background: #e8e9ff;
background: var(--border-color, #e8e9ff);
}
.progress-step:last-child::after {
@@ -115,12 +115,12 @@
.step-icon {
width: 40px;
height: 40px;
background: #e8e9ff;
background: var(--border-color, #e8e9ff);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #64748b;
color: var(--text-secondary, #64748b);
font-size: 1rem;
position: relative;
z-index: 1;
@@ -128,40 +128,40 @@
}
.progress-step.active .step-icon {
background: #5b5fcf;
color: white;
box-shadow: 0 0 0 4px rgba(91, 95, 207, 0.2);
background: var(--accent-color, #5b5fcf);
color: var(--bg-secondary, white);
box-shadow: 0 0 0 4px var(--accent-shadow-soft, rgba(91, 95, 207, 0.2));
}
.progress-step.completed .step-icon {
background: #10b981;
color: white;
background: var(--success-color, #10b981);
color: var(--bg-secondary, white);
}
.step-label {
margin-top: 0.5rem;
font-size: 0.875rem;
color: #64748b;
color: var(--text-secondary, #64748b);
font-weight: 500;
}
.progress-step.active .step-label {
color: #5b5fcf;
color: var(--accent-color, #5b5fcf);
font-weight: 600;
}
.form-container {
background: white;
background: var(--bg-secondary, white);
border-radius: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
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);
overflow: hidden;
animation: fadeInUp 0.5s ease-out;
}
.form-section {
padding: 2rem;
border-bottom: 1px solid #e8e9ff;
border-bottom: 1px solid var(--border-color, #e8e9ff);
}
.form-section:last-child {
@@ -178,24 +178,24 @@
.section-icon {
width: 40px;
height: 40px;
background: #e0e7ff;
background: var(--accent-bg, #e0e7ff);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #5b5fcf;
color: var(--accent-color, #5b5fcf);
}
.section-title {
font-size: 1.125rem;
font-weight: 600;
color: #1e293b;
color: var(--text-primary, #1e293b);
margin: 0;
}
.section-subtitle {
font-size: 0.875rem;
color: #64748b;
color: var(--text-secondary, #64748b);
margin-top: 0.25rem;
}
@@ -209,7 +209,7 @@
.form-label {
font-weight: 500;
color: #1e293b;
color: var(--text-primary, #1e293b);
font-size: 0.875rem;
display: flex;
align-items: center;
@@ -217,29 +217,29 @@
}
.required-star {
color: #ef4444;
color: var(--danger-color, #ef4444);
}
.form-control {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
font-size: 0.875rem;
transition: all 0.3s ease;
background: #fff;
background: var(--bg-secondary, #fff);
}
.form-control:focus {
outline: none;
border-color: #5b5fcf;
box-shadow: 0 0 0 3px rgba(91, 95, 207, 0.1);
border-color: var(--accent-color, #5b5fcf);
box-shadow: 0 0 0 3px var(--accent-focus, rgba(91, 95, 207, 0.1));
}
.form-control:disabled {
background: #f8f9ff;
background: var(--bg-hover, #f8f9ff);
cursor: not-allowed;
color: #64748b;
color: var(--text-secondary, #64748b);
}
.input-group {
@@ -250,7 +250,7 @@
.input-addon {
font-size: 0.875rem;
color: #64748b;
color: var(--text-secondary, #64748b);
font-weight: 500;
}
@@ -261,19 +261,19 @@
align-items: center;
margin-bottom: 1rem;
padding: 1rem;
background: #f8f9ff;
background: var(--bg-hover, #f8f9ff);
border-radius: 8px;
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
}
.port-arrow {
color: #5b5fcf;
color: var(--accent-color, #5b5fcf);
font-size: 1.25rem;
}
.port-label {
font-size: 0.75rem;
color: #64748b;
color: var(--text-secondary, #64748b);
margin-bottom: 0.25rem;
font-weight: 600;
text-transform: uppercase;
@@ -281,7 +281,7 @@
}
.dynamic-section {
background: #f8f9ff;
background: var(--bg-hover, #f8f9ff);
border-radius: 12px;
padding: 1.5rem;
margin-top: 1.5rem;
@@ -297,7 +297,7 @@
.dynamic-title {
font-size: 0.875rem;
font-weight: 600;
color: #1e293b;
color: var(--text-primary, #1e293b);
text-transform: uppercase;
letter-spacing: 0.05em;
}
@@ -309,9 +309,9 @@
align-items: center;
margin-bottom: 1rem;
padding: 1rem;
background: white;
background: var(--bg-secondary, white);
border-radius: 8px;
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
}
.btn {
@@ -328,31 +328,31 @@
}
.btn-primary {
background: #5b5fcf;
color: white;
background: var(--accent-color, #5b5fcf);
color: var(--bg-secondary, white);
}
.btn-primary:hover {
background: #4547a9;
background: var(--accent-hover, #4547a9);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(91, 95, 207, 0.3);
}
.btn-secondary {
background: white;
color: #5b5fcf;
border: 1px solid #e8e9ff;
background: var(--bg-secondary, white);
color: var(--accent-color, #5b5fcf);
border: 1px solid var(--border-color, #e8e9ff);
}
.btn-secondary:hover {
background: #f8f9ff;
border-color: #5b5fcf;
background: var(--bg-hover, #f8f9ff);
border-color: var(--accent-color, #5b5fcf);
transform: translateY(-2px);
}
.btn-danger {
background: #fee2e2;
color: #ef4444;
color: var(--danger-color, #ef4444);
border: 1px solid #fecaca;
}
@@ -362,8 +362,8 @@
}
.btn-success {
background: #d1fae5;
color: #065f46;
background: var(--success-bg, #d1fae5);
color: var(--success-text, #065f46);
border: 1px solid #a7f3d0;
}
@@ -382,8 +382,8 @@
gap: 1rem;
margin-top: 2rem;
padding: 2rem;
background: #f8f9ff;
border-top: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
border-top: 1px solid var(--border-color, #e8e9ff);
}
.status-message {
@@ -404,8 +404,8 @@
}
.status-success {
background: #d1fae5;
color: #065f46;
background: var(--success-bg, #d1fae5);
color: var(--success-text, #065f46);
}
.status-error {
@@ -416,12 +416,12 @@
.status-title {
font-size: 1.25rem;
font-weight: 600;
color: #1e293b;
color: var(--text-primary, #1e293b);
margin-bottom: 0.5rem;
}
.status-text {
color: #64748b;
color: var(--text-secondary, #64748b);
font-size: 0.875rem;
}
@@ -429,7 +429,7 @@
width: 40px;
height: 40px;
border: 4px solid #e8e9ff;
border-top-color: #5b5fcf;
border-top-color: var(--accent-color, #5b5fcf);
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto;
@@ -441,7 +441,7 @@
}
.tooltip-icon {
color: #64748b;
color: var(--text-secondary, #64748b);
font-size: 0.875rem;
}
@@ -455,8 +455,8 @@
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: #1e293b;
color: white;
background: var(--text-primary, #1e293b);
color: var(--bg-secondary, white);
padding: 0.5rem 1rem;
border-radius: 6px;
font-size: 0.75rem;
@@ -471,7 +471,7 @@
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: #1e293b;
border-top-color: var(--text-primary, #1e293b);
}
@keyframes spin {
@@ -544,7 +544,7 @@
<div class="header-content">
<h1 class="page-title">
<div class="docker-icon">
<i class="fab fa-docker" style="color: #5b5fcf; font-size: 1.75rem;"></i>
<i class="fab fa-docker" style="color: var(--accent-color, #5b5fcf); font-size: 1.75rem;"></i>
</div>
{% trans "Create New Container" %}
</h1>

132
dockerManager/templates/dockerManager/viewContainer.html
View File

@@ -18,7 +18,7 @@
text-align: center;
margin-bottom: 3rem;
padding: 3rem 0;
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
border-radius: 20px;
animation: fadeInDown 0.5s ease-out;
position: relative;
@@ -32,7 +32,7 @@
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at 70% 30%, rgba(91, 95, 207, 0.15) 0%, transparent 50%);
background: radial-gradient(circle at 70% 30%, var(--accent-shadow-light, rgba(91, 95, 207, 0.15)) 0%, transparent 50%);
animation: rotate 30s linear infinite;
}
@@ -49,12 +49,12 @@
.container-icon-large {
width: 80px;
height: 80px;
background: white;
background: var(--bg-secondary, white);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 24px rgba(0,0,0,0.1);
box-shadow: 0 8px 24px var(--shadow-medium, rgba(0,0,0,0.1));
}
.container-title-section {
@@ -64,7 +64,7 @@
.container-name {
font-size: 2.5rem;
font-weight: 700;
color: #1e293b;
color: var(--text-primary, #1e293b);
margin: 0;
display: flex;
align-items: center;
@@ -73,7 +73,7 @@
.container-id {
font-size: 0.875rem;
color: #64748b;
color: var(--text-secondary, #64748b);
margin-top: 0.5rem;
font-family: monospace;
}
@@ -101,8 +101,8 @@
}
.status-running {
background: #d1fae5;
color: #065f46;
background: var(--success-bg, #d1fae5);
color: var(--success-text, #065f46);
}
.status-stopped {
@@ -123,11 +123,11 @@
}
.status-running .status-dot {
background: #10b981;
background: var(--success-color, #10b981);
}
.status-stopped .status-dot {
background: #ef4444;
background: var(--danger-color, #ef4444);
animation: none;
}
@@ -138,12 +138,12 @@
.refresh-icon {
cursor: pointer;
color: #64748b;
color: var(--text-secondary, #64748b);
transition: all 0.3s ease;
}
.refresh-icon:hover {
color: #5b5fcf;
color: var(--accent-color, #5b5fcf);
transform: rotate(180deg);
}
@@ -155,11 +155,11 @@
}
.stat-card {
background: white;
background: var(--bg-secondary, white);
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
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);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
@@ -172,13 +172,13 @@
right: 0;
width: 100px;
height: 100px;
background: linear-gradient(135deg, rgba(91, 95, 207, 0.1) 0%, transparent 100%);
background: linear-gradient(135deg, var(--accent-focus, rgba(91, 95, 207, 0.1)) 0%, transparent 100%);
border-radius: 0 0 0 100%;
}
.stat-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(91, 95, 207, 0.15);
box-shadow: 0 12px 30px var(--accent-shadow-light, rgba(91, 95, 207, 0.15));
}
.stat-header {
@@ -191,7 +191,7 @@
.stat-title {
font-size: 0.875rem;
font-weight: 600;
color: #64748b;
color: var(--text-secondary, #64748b);
text-transform: uppercase;
letter-spacing: 0.05em;
}
@@ -199,24 +199,24 @@
.stat-icon {
width: 40px;
height: 40px;
background: #e0e7ff;
background: var(--accent-bg, #e0e7ff);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #5b5fcf;
color: var(--accent-color, #5b5fcf);
}
.stat-value {
font-size: 2rem;
font-weight: 700;
color: #1e293b;
color: var(--text-primary, #1e293b);
margin: 0.5rem 0;
}
.stat-subtitle {
font-size: 0.875rem;
color: #64748b;
color: var(--text-secondary, #64748b);
}
.progress-bar {
@@ -230,31 +230,31 @@
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #5b5fcf 0%, #7b7fd0 100%);
background: linear-gradient(90deg, var(--accent-color, #5b5fcf) 0%, #7b7fd0 100%);
border-radius: 4px;
transition: width 0.5s ease;
}
.main-card {
background: white;
background: var(--bg-secondary, white);
border-radius: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
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);
overflow: hidden;
margin-bottom: 2rem;
animation: fadeInUp 0.5s ease-out;
}
.card-header {
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
padding: 1.5rem 2rem;
border-bottom: 1px solid #e8e9ff;
border-bottom: 1px solid var(--border-color, #e8e9ff);
}
.card-title {
font-size: 1.25rem;
font-weight: 600;
color: #1e293b;
color: var(--text-primary, #1e293b);
margin: 0;
display: flex;
align-items: center;
@@ -272,16 +272,16 @@
}
.info-item {
background: #f8f9ff;
background: var(--bg-hover, #f8f9ff);
padding: 1rem;
border-radius: 12px;
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
}
.info-label {
font-size: 0.75rem;
font-weight: 600;
color: #64748b;
color: var(--text-secondary, #64748b);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.5rem;
@@ -290,7 +290,7 @@
.info-value {
font-size: 0.875rem;
font-weight: 500;
color: #1e293b;
color: var(--text-primary, #1e293b);
word-break: break-all;
}
@@ -301,15 +301,15 @@
}
.action-btn {
background: #f8f9ff;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
border: 1px solid var(--border-color, #e8e9ff);
padding: 1rem;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
text-decoration: none;
color: #1e293b;
color: var(--text-primary, #1e293b);
position: relative;
overflow: hidden;
}
@@ -321,7 +321,7 @@
left: 50%;
width: 0;
height: 0;
background: rgba(91, 95, 207, 0.1);
background: var(--accent-focus, rgba(91, 95, 207, 0.1));
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
@@ -334,18 +334,18 @@
.action-btn:hover {
transform: translateY(-2px);
border-color: #5b5fcf;
box-shadow: 0 4px 12px rgba(91, 95, 207, 0.2);
border-color: var(--accent-color, #5b5fcf);
box-shadow: 0 4px 12px var(--accent-shadow-soft, rgba(91, 95, 207, 0.2));
}
.action-btn.primary {
background: #5b5fcf;
color: white;
border-color: #5b5fcf;
background: var(--accent-color, #5b5fcf);
color: var(--bg-secondary, white);
border-color: var(--accent-color, #5b5fcf);
}
.action-btn.primary:hover {
background: #4547a9;
background: var(--accent-hover, #4547a9);
}
.action-btn.danger {
@@ -425,7 +425,7 @@
.terminal-btn:hover {
background: #718096;
color: white;
color: var(--bg-secondary, white);
}
.terminal-content {
@@ -457,7 +457,7 @@
width: 20px;
height: 20px;
border: 3px solid #e8e9ff;
border-top-color: #5b5fcf;
border-top-color: var(--accent-color, #5b5fcf);
border-radius: 50%;
animation: spin 1s linear infinite;
display: inline-block;
@@ -469,19 +469,19 @@
border-radius: 16px;
overflow: hidden;
border: none;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
box-shadow: 0 25px 50px -12px var(--shadow-dark, rgba(0, 0, 0, 0.25));
}
.modal-header {
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
border-bottom: 1px solid #e8e9ff;
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
border-bottom: 1px solid var(--border-color, #e8e9ff);
padding: 1.5rem 2rem;
}
.modal-title {
font-size: 1.25rem;
font-weight: 600;
color: #1e293b;
color: var(--text-primary, #1e293b);
margin: 0;
}
@@ -490,8 +490,8 @@
}
.modal-footer {
background: #f8f9ff;
border-top: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
border-top: 1px solid var(--border-color, #e8e9ff);
padding: 1rem 2rem;
}
@@ -506,19 +506,19 @@
}
.modal-footer .btn-primary {
background: #5b5fcf;
color: white;
background: var(--accent-color, #5b5fcf);
color: var(--bg-secondary, white);
}
.modal-footer .btn-primary:hover {
background: #4547a9;
background: var(--accent-hover, #4547a9);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(91, 95, 207, 0.3);
}
.modal-footer .btn-default {
background: #6b7280;
color: white;
color: var(--bg-secondary, white);
margin-left: 0.5rem;
}
@@ -561,7 +561,7 @@
@keyframes pulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(91, 95, 207, 0.4);
box-shadow: 0 0 0 0 var(--accent-shadow-hover, rgba(91, 95, 207, 0.4));
}
50% {
box-shadow: 0 0 0 10px rgba(91, 95, 207, 0);
@@ -592,7 +592,7 @@
<div class="page-header">
<div class="container-header">
<div class="container-icon-large">
<i class="fab fa-docker" style="color: #5b5fcf; font-size: 2.5rem;"></i>
<i class="fab fa-docker" style="color: var(--accent-color, #5b5fcf); font-size: 2.5rem;"></i>
</div>
<div class="container-title-section">
<h1 class="container-name" ng-init="cName='{{ name }}';status='{{ status }}'">
@@ -675,7 +675,7 @@
<div class="info-label">{% trans "Port Mappings" %}</div>
<div class="info-value">
{% for iport, eport in ports.items %}
<span style="background: #e0e7ff; padding: 0.25rem 0.5rem; border-radius: 4px; margin-right: 0.5rem;">
<span style="background: var(--accent-bg, #e0e7ff); padding: 0.25rem 0.5rem; border-radius: 4px; margin-right: 0.5rem;">
{{ iport }} → {{ eport }}
</span>
{% endfor %}
@@ -689,10 +689,10 @@
<div class="info-item">
<div class="info-label">{% trans "Start on Boot" %}</div>
<div class="info-value" ng-init="startOnReboot={{ startOnReboot }}">
<span ng-if="startOnReboot" style="color: #10b981;">
<span ng-if="startOnReboot" style="color: var(--success-color, #10b981);">
<i class="fas fa-check-circle"></i> {% trans "Enabled" %}
</span>
<span ng-if="!startOnReboot" style="color: #64748b;">
<span ng-if="!startOnReboot" style="color: var(--text-secondary, #64748b);">
<i class="fas fa-times-circle"></i> {% trans "Disabled" %}
</span>
</div>
@@ -713,17 +713,17 @@
<div class="card-body">
<div class="action-grid">
<div class="action-btn" ng-click="cAction('start')" ng-disabled="status=='running'">
<i class="fas fa-play action-icon" style="color: #10b981;"></i>
<i class="fas fa-play action-icon" style="color: var(--success-color, #10b981);"></i>
<div class="action-text">{% trans "Start" %}</div>
</div>
<div class="action-btn" ng-click="cAction('restart')" ng-disabled="status!='running'">
<i class="fas fa-sync-alt action-icon" style="color: #3b82f6;"></i>
<i class="fas fa-sync-alt action-icon" style="color: var(--info-color, #3b82f6);"></i>
<div class="action-text">{% trans "Restart" %}</div>
</div>
<div class="action-btn" ng-click="cAction('stop')" ng-disabled="status!='running'">
<i class="fas fa-stop action-icon" style="color: #f59e0b;"></i>
<i class="fas fa-stop action-icon" style="color: var(--warning-color, #f59e0b);"></i>
<div class="action-text">{% trans "Stop" %}</div>
</div>
@@ -748,7 +748,7 @@
</div>
<a href="/docker/exportContainer/?name={{ name }}" class="action-btn">
<i class="fas fa-download action-icon" style="color: #10b981;"></i>
<i class="fas fa-download action-icon" style="color: var(--success-color, #10b981);"></i>
<div class="action-text">{% trans "Export" %}</div>
</a>
@@ -792,7 +792,7 @@
{% trans "Container Settings" %}
</h4>
<button type="button" class="close" data-dismiss="modal"
style="font-size: 1.5rem; background: none; border: none;">&times;</button>
style="font-size: 1.5rem; background: transparent; border: none;">&times;</button>
</div>
<div class="modal-body">
<form name="containerSettingsForm" class="form-horizontal">
@@ -928,7 +928,7 @@
{% trans "Container Processes" %}
</h4>
<button type="button" class="close" data-dismiss="modal"
style="font-size: 1.5rem; background: none; border: none;">&times;</button>
style="font-size: 1.5rem; background: transparent; border: none;">&times;</button>
</div>
<div class="modal-body">
<div class="table-responsive">