Nemcio/CyberPanel
1
0
Fork 0
mirror of https://github.com/usmannasir/cyberpanel.git synced 2026-01-07 16:12:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

dark mode

Browse Source
This commit is contained in:
usmannasir
2025-08-02 19:10:17 +05:00
parent 4abba83f96
commit 9bff33400d
16 changed files with 1036 additions and 563 deletions
Download Patch File Download Diff File Expand all files Collapse all files

210
databases/templates/databases/OptimizeMySQL.html
View File

@@ -8,6 +8,96 @@
<!-- Current language: {{ LANGUAGE_CODE }} -->
<style>
:root {
/* Light mode variables */
--bg-primary: #f8f9ff;
--bg-secondary: #ffffff;
--bg-card: #ffffff;
--bg-hover: #f8f9ff;
--bg-gradient-primary: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
--bg-gradient-warning: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
--bg-gradient-info: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%);
--text-primary: #1e293b;
--text-secondary: #64748b;
--text-muted: #94a3b8;
--text-accent: #5b5fcf;
--text-warning: #92400e;
--text-warning-dark: #78350f;
--text-info: #475569;
--border-color: #e8e9ff;
--border-light: #cbd5e1;
--border-warning: #fcd34d;
--shadow-color: rgba(0,0,0,0.05);
--shadow-color-md: rgba(0,0,0,0.08);
--shadow-color-lg: rgba(0,0,0,0.1);
--shadow-color-xl: rgba(0,0,0,0.12);
--shadow-warning: rgba(252, 211, 77, 0.3);
--shadow-accent: rgba(91, 95, 207, 0.4);
--shadow-success: rgba(16, 185, 129, 0.4);
--shadow-danger: rgba(239, 68, 68, 0.4);
--shadow-info: rgba(59, 130, 246, 0.4);
--accent-color: #5b5fcf;
--accent-hover: #4547a9;
--success-color: #10b981;
--success-hover: #059669;
--danger-color: #ef4444;
--danger-hover: #dc2626;
--info-color: #3b82f6;
--info-hover: #2563eb;
--warning-color: #f59e0b;
--editor-bg: #1e293b;
--editor-header-bg: #334155;
--editor-text: #e2e8f0;
--editor-readonly-bg: #1a202c;
--editor-readonly-text: #94a3b8;
--bg-radial-overlay: rgba(91, 95, 207, 0.1);
}
[data-theme="dark"] {
/* Dark mode variables */
--bg-primary: #0f0f23;
--bg-secondary: #1a1a3e;
--bg-card: #1e1e42;
--bg-hover: #252550;
--bg-gradient-primary: linear-gradient(135deg, #16162e 0%, #1a1a3e 100%);
--bg-gradient-warning: linear-gradient(135deg, #78350f 0%, #451a03 100%);
--bg-gradient-info: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
--text-primary: #e4e4e7;
--text-secondary: #9ca3af;
--text-muted: #6b7280;
--text-accent: #7c7ff3;
--text-warning: #fbbf24;
--text-warning-dark: #fbbf24;
--text-info: #cbd5e1;
--border-color: #2a2a5e;
--border-light: #374151;
--border-warning: #92400e;
--shadow-color: rgba(0,0,0,0.3);
--shadow-color-md: rgba(0,0,0,0.4);
--shadow-color-lg: rgba(0,0,0,0.5);
--shadow-color-xl: rgba(0,0,0,0.6);
--shadow-warning: rgba(120, 53, 15, 0.5);
--shadow-accent: rgba(124, 127, 243, 0.4);
--shadow-success: rgba(52, 211, 153, 0.4);
--shadow-danger: rgba(248, 113, 113, 0.4);
--shadow-info: rgba(96, 165, 250, 0.4);
--accent-color: #7c7ff3;
--accent-hover: #6b6ee8;
--success-color: #34d399;
--success-hover: #10b981;
--danger-color: #f87171;
--danger-hover: #ef4444;
--info-color: #60a5fa;
--info-hover: #3b82f6;
--warning-color: #fbbf24;
--editor-bg: #0f172a;
--editor-header-bg: #1e293b;
--editor-text: #e4e4e7;
--editor-readonly-bg: #111827;
--editor-readonly-text: #6b7280;
--bg-radial-overlay: rgba(124, 127, 243, 0.1);
}
.modern-container {
max-width: 1400px;
margin: 0 auto;
@@ -18,7 +108,7 @@
text-align: center;
margin-bottom: 3rem;
padding: 3rem 0;
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
background: var(--bg-gradient-primary);
border-radius: 20px;
animation: fadeInDown 0.5s ease-out;
position: relative;
@@ -32,14 +122,14 @@
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at 30% 70%, rgba(91, 95, 207, 0.1) 0%, transparent 50%);
background: radial-gradient(circle at 30% 70%, var(--bg-radial-overlay) 0%, transparent 50%);
animation: float 20s ease-in-out infinite;
}
.page-title {
font-size: 3rem;
font-weight: 700;
color: #1e293b;
color: var(--text-primary);
margin-bottom: 1rem;
display: flex;
align-items: center;
@@ -52,17 +142,17 @@
.mysql-icon {
width: 60px;
height: 60px;
background: white;
background: var(--bg-secondary);
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-color-lg);
}
.page-subtitle {
font-size: 1.25rem;
color: #64748b;
color: var(--text-secondary);
margin-bottom: 1.5rem;
position: relative;
z-index: 1;
@@ -78,8 +168,8 @@
}
.btn-primary {
background: #5b5fcf;
color: white;
background: var(--accent-color);
color: var(--bg-secondary);
border: none;
padding: 0.75rem 2rem;
border-radius: 10px;
@@ -94,16 +184,16 @@
}
.btn-primary:hover {
background: #4547a9;
background: var(--accent-hover);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(91, 95, 207, 0.4);
color: white;
box-shadow: 0 8px 20px var(--shadow-accent);
color: var(--bg-secondary);
}
.btn-secondary {
background: #fff;
color: #5b5fcf;
border: 1px solid #e8e9ff;
background: var(--bg-secondary);
color: var(--text-accent);
border: 1px solid var(--border-color);
padding: 0.75rem 2rem;
border-radius: 10px;
font-weight: 500;
@@ -117,15 +207,15 @@
}
.btn-secondary:hover {
background: #f8f9ff;
border-color: #5b5fcf;
background: var(--bg-hover);
border-color: var(--accent-color);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(91, 95, 207, 0.2);
box-shadow: 0 4px 12px var(--shadow-accent);
}
.btn-success {
background: #10b981;
color: white;
background: var(--success-color);
color: var(--bg-secondary);
border: none;
padding: 0.75rem 2rem;
border-radius: 10px;
@@ -139,14 +229,14 @@
}
.btn-success:hover {
background: #059669;
background: var(--success-hover);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
box-shadow: 0 8px 20px var(--shadow-success);
}
.btn-danger {
background: #ef4444;
color: white;
background: var(--danger-color);
color: var(--bg-secondary);
border: none;
padding: 0.75rem 2rem;
border-radius: 10px;
@@ -160,14 +250,14 @@
}
.btn-danger:hover {
background: #dc2626;
background: var(--danger-hover);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4);
box-shadow: 0 8px 20px var(--shadow-danger);
}
.btn-info {
background: #3b82f6;
color: white;
background: var(--info-color);
color: var(--bg-secondary);
border: none;
padding: 0.75rem 2rem;
border-radius: 10px;
@@ -181,38 +271,38 @@
}
.btn-info:hover {
background: #2563eb;
background: var(--info-hover);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
box-shadow: 0 8px 20px var(--shadow-info);
}
.ram-info-card {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border: 1px solid #fcd34d;
background: var(--bg-gradient-warning);
border: 1px solid var(--border-warning);
border-radius: 12px;
padding: 1.25rem 2rem;
margin-bottom: 2rem;
display: inline-flex;
align-items: center;
gap: 1rem;
box-shadow: 0 2px 8px rgba(252, 211, 77, 0.3);
box-shadow: 0 2px 8px var(--shadow-warning);
animation: fadeInUp 0.5s ease-out;
}
.ram-icon {
width: 48px;
height: 48px;
background: white;
background: var(--bg-secondary);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
box-shadow: 0 2px 8px var(--shadow-color-lg);
}
.ram-label {
font-size: 0.875rem;
color: #92400e;
color: var(--text-warning);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
@@ -222,7 +312,7 @@
.ram-value {
font-size: 1.75rem;
font-weight: 700;
color: #78350f;
color: var(--text-warning-dark);
margin: 0;
line-height: 1;
}
@@ -236,25 +326,25 @@
}
.main-card {
background: white;
background: var(--bg-card);
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-color), 0 10px 40px var(--shadow-color-md);
border: 1px solid var(--border-color);
overflow: hidden;
margin-bottom: 2rem;
animation: fadeInUp 0.5s ease-out;
}
.card-header {
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
background: var(--bg-gradient-primary);
padding: 1.5rem 2rem;
border-bottom: 1px solid #e8e9ff;
border-bottom: 1px solid var(--border-color);
}
.card-title {
font-size: 1.25rem;
font-weight: 600;
color: #1e293b;
color: var(--text-primary);
margin: 0;
display: flex;
align-items: center;
@@ -266,15 +356,15 @@
}
.config-editor {
background: #1e293b;
background: var(--editor-bg);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
box-shadow: 0 4px 20px var(--shadow-color-lg);
animation: fadeInUp 0.5s ease-out;
}
.editor-header {
background: #334155;
background: var(--editor-header-bg);
padding: 1rem 1.5rem;
display: flex;
justify-content: space-between;
@@ -282,7 +372,7 @@
}
.editor-title {
color: #e2e8f0;
color: var(--editor-text);
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
@@ -305,22 +395,22 @@
}
.editor-dot.red {
background: #ef4444;
background: var(--danger-color);
}
.editor-dot.yellow {
background: #f59e0b;
background: var(--warning-color);
}
.editor-dot.green {
background: #10b981;
background: var(--success-color);
}
.editor-textarea {
width: 100%;
min-height: 500px;
background: #1e293b;
color: #e2e8f0;
background: var(--editor-bg);
color: var(--editor-text);
border: none;
padding: 1.5rem;
font-family: 'Monaco', 'Consolas', monospace;
@@ -331,19 +421,19 @@
.editor-textarea:focus {
outline: none;
background: #1a202c;
background: var(--editor-readonly-bg);
}
.editor-textarea.readonly {
background: #1a202c;
color: #94a3b8;
background: var(--editor-readonly-bg);
color: var(--editor-readonly-text);
}
.loading-spinner {
width: 20px;
height: 20px;
border: 3px solid #e8e9ff;
border-top-color: #5b5fcf;
border: 3px solid var(--border-color);
border-top-color: var(--accent-color);
border-radius: 50%;
animation: spin 1s linear infinite;
display: inline-block;
@@ -351,8 +441,8 @@
}
.recommendation-info {
background: #f0f4f8;
border: 1px solid #cbd5e1;
background: var(--bg-gradient-info);
border: 1px solid var(--border-light);
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 1.5rem;
@@ -363,14 +453,14 @@
}
.recommendation-info i {
color: #3b82f6;
color: var(--info-color);
font-size: 1.25rem;
margin-top: 0.125rem;
}
.recommendation-info p {
margin: 0;
color: #475569;
color: var(--text-info);
font-size: 0.875rem;
line-height: 1.6;
}

120
databases/templates/databases/createDatabase.html
View File

@@ -22,29 +22,29 @@
.page-title {
font-size: 28px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 8px;
}
.page-subtitle {
font-size: 14px;
color: #8893a7;
color: var(--text-secondary, #8893a7);
}
/* Card styles */
.content-card {
background: white;
background: var(--bg-secondary, white);
border-radius: 12px;
padding: 30px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
border: 1px solid var(--border-color, #e8e9ff);
margin-bottom: 25px;
}
.card-title {
font-size: 18px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 25px;
display: flex;
align-items: center;
@@ -55,7 +55,7 @@
content: '';
width: 4px;
height: 24px;
background: #5b5fcf;
background: var(--accent-color, #5b5fcf);
border-radius: 2px;
}
@@ -68,7 +68,7 @@
display: block;
font-size: 13px;
font-weight: 600;
color: #64748b;
color: var(--text-muted, #64748b);
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
@@ -77,22 +77,22 @@
.form-control {
width: 100%;
padding: 10px 14px;
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
font-size: 14px;
color: #2f3640;
background: white;
color: var(--text-primary, #2f3640);
background: var(--bg-secondary, white);
transition: all 0.2s ease;
}
.form-control:hover {
border-color: #5b5fcf;
border-color: var(--accent-color, #5b5fcf);
}
.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-shadow, rgba(91,95,207,0.1));
}
/* Windows selectbox fixes */
@@ -113,8 +113,8 @@
/* Windows-specific fixes */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
select.form-control {
color: #2f3640 !important;
background-color: white !important;
color: var(--text-primary, #2f3640) !important;
background-color: var(--bg-secondary, white) !important;
}
}
@@ -124,14 +124,14 @@
}
select.form-control:focus {
color: #2f3640;
background-color: white;
color: var(--text-primary, #2f3640);
background-color: var(--bg-secondary, white);
}
/* Website selector card */
.website-selector-card {
background: #f8f9ff;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 10px;
padding: 20px;
margin-bottom: 25px;
@@ -144,12 +144,12 @@
/* Name preview */
.name-preview {
background: #f8f9ff;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 6px;
padding: 8px 12px;
font-size: 13px;
color: #5b5fcf;
color: var(--accent-color, #5b5fcf);
font-weight: 600;
margin-top: 8px;
display: inline-block;
@@ -178,8 +178,8 @@
}
.password-toggle {
background: #f8f9ff;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
border: 1px solid var(--border-color, #e8e9ff);
border-left: none;
padding: 10px 14px;
border-radius: 0 8px 8px 0;
@@ -188,19 +188,19 @@
}
.password-toggle:hover {
background: #eef0ff;
border-color: #5b5fcf;
background: var(--bg-active, #eef0ff);
border-color: var(--accent-color, #5b5fcf);
}
.password-toggle i {
color: #64748b;
color: var(--text-muted, #64748b);
font-size: 16px;
}
/* Generated password section */
.generated-password-box {
background: #e8f5e9;
border: 1px solid #c8e6c9;
background: var(--success-bg, #e8f5e9);
border: 1px solid var(--success-border, #c8e6c9);
border-radius: 8px;
padding: 16px;
margin-top: 16px;
@@ -210,7 +210,7 @@
.generated-password-label {
font-size: 12px;
font-weight: 600;
color: #2e7d32;
color: var(--success-text, #2e7d32);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
@@ -219,7 +219,7 @@
.generated-password-value {
font-family: 'Courier New', monospace;
font-size: 14px;
color: #1b5e20;
color: var(--success-dark, #1b5e20);
font-weight: 600;
word-break: break-all;
margin-bottom: 12px;
@@ -241,42 +241,42 @@
}
.btn-primary {
background: #5b5fcf;
color: white;
background: var(--accent-color, #5b5fcf);
color: var(--text-white, white);
}
.btn-primary:hover {
background: #4a4fc4;
box-shadow: 0 4px 12px rgba(91,95,207,0.3);
background: var(--accent-hover, #4a4fc4);
box-shadow: 0 4px 12px var(--accent-shadow, rgba(91,95,207,0.3));
transform: translateY(-1px);
}
.btn-primary:disabled {
background: #ccc;
background: var(--bg-disabled, #ccc);
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.btn-secondary {
background: #f8f9ff;
color: #5b5fcf;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
color: var(--accent-color, #5b5fcf);
border: 1px solid var(--border-color, #e8e9ff);
}
.btn-secondary:hover {
background: #eef0ff;
border-color: #5b5fcf;
background: var(--bg-active, #eef0ff);
border-color: var(--accent-color, #5b5fcf);
}
.btn-success {
background: #66bb6a;
color: white;
background: var(--success-color, #66bb6a);
color: var(--text-white, white);
}
.btn-success:hover {
background: #4caf50;
box-shadow: 0 4px 12px rgba(102,187,106,0.3);
background: var(--success-hover, #4caf50);
box-shadow: 0 4px 12px var(--success-shadow, rgba(102,187,106,0.3));
transform: translateY(-1px);
}
@@ -302,15 +302,15 @@
}
.alert-danger {
background: #ffebee;
border: 1px solid #ffcdd2;
color: #c62828;
background: var(--danger-bg, #ffebee);
border: 1px solid var(--danger-border, #ffcdd2);
color: var(--danger-text, #c62828);
}
.alert-success {
background: #e8f5e9;
border: 1px solid #c8e6c9;
color: #2e7d32;
background: var(--success-bg, #e8f5e9);
border: 1px solid var(--success-border, #c8e6c9);
color: var(--success-text, #2e7d32);
}
/* Loading spinner */
@@ -318,8 +318,8 @@
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid #f3f3f3;
border-top: 2px solid #5b5fcf;
border: 2px solid var(--bg-tertiary, #f3f3f3);
border-top: 2px solid var(--accent-color, #5b5fcf);
border-radius: 50%;
animation: spin 1s linear infinite;
margin-left: 10px;
@@ -334,13 +334,13 @@
.button-container {
margin-top: 30px;
padding-top: 30px;
border-top: 1px solid #e8e9ff;
border-top: 1px solid var(--border-color, #e8e9ff);
}
/* Info box */
.info-box {
background: #e3f2fd;
border: 1px solid #bbdefb;
background: var(--info-bg, #e3f2fd);
border: 1px solid var(--info-border, #bbdefb);
border-radius: 8px;
padding: 16px;
margin-bottom: 25px;
@@ -350,20 +350,20 @@
}
.info-box i {
color: #1976d2;
color: var(--info-color, #1976d2);
font-size: 18px;
}
.info-box-text {
font-size: 13px;
color: #1565c0;
color: var(--info-text, #1565c0);
line-height: 1.5;
}
/* Help text */
.help-text {
font-size: 12px;
color: #8893a7;
color: var(--text-secondary, #8893a7);
margin-top: 6px;
}

116
databases/templates/databases/deleteDatabase.html
View File

@@ -22,29 +22,29 @@
.page-title {
font-size: 28px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 8px;
}
.page-subtitle {
font-size: 14px;
color: #8893a7;
color: var(--text-secondary, #8893a7);
}
/* Card styles */
.content-card {
background: white;
background: var(--bg-secondary, white);
border-radius: 12px;
padding: 30px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
border: 1px solid var(--border-color, #e8e9ff);
margin-bottom: 25px;
}
.card-title {
font-size: 18px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 25px;
display: flex;
align-items: center;
@@ -55,7 +55,7 @@
content: '';
width: 4px;
height: 24px;
background: #dc3545;
background: var(--danger-text, #dc3545);
border-radius: 2px;
}
@@ -68,7 +68,7 @@
display: block;
font-size: 13px;
font-weight: 600;
color: #64748b;
color: var(--text-secondary, #64748b);
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
@@ -77,22 +77,22 @@
.form-control {
width: 100%;
padding: 10px 14px;
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
font-size: 14px;
color: #2f3640;
background: white;
color: var(--text-primary, #2f3640);
background: var(--bg-secondary, white);
transition: all 0.2s ease;
}
.form-control:hover {
border-color: #dc3545;
border-color: var(--danger-text, #dc3545);
}
.form-control:focus {
outline: none;
border-color: #dc3545;
box-shadow: 0 0 0 3px rgba(220,53,69,0.1);
border-color: var(--danger-text, #dc3545);
box-shadow: 0 0 0 3px var(--danger-bg, rgba(220,53,69,0.1));
}
/* Windows selectbox fixes */
@@ -113,8 +113,8 @@
/* Windows-specific fixes */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
select.form-control {
color: #2f3640 !important;
background-color: white !important;
color: var(--text-primary, #2f3640) !important;
background-color: var(--bg-secondary, white) !important;
}
}
@@ -124,14 +124,14 @@
}
select.form-control:focus {
color: #2f3640;
background-color: white;
color: var(--text-primary, #2f3640);
background-color: var(--bg-secondary, white);
}
/* Website selector card */
.website-selector-card {
background: #fff5f5;
border: 1px solid #ffdddd;
background: var(--danger-bg, #fff5f5);
border: 1px solid var(--danger-border, #ffdddd);
border-radius: 10px;
padding: 20px;
margin-bottom: 25px;
@@ -144,8 +144,8 @@
/* Database info card */
.database-info-card {
background: #f8f9ff;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 10px;
padding: 20px;
margin-bottom: 25px;
@@ -157,7 +157,7 @@
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #e8e9ff;
border-bottom: 1px solid var(--border-color, #e8e9ff);
}
.info-row:last-child {
@@ -167,20 +167,20 @@
.info-label {
font-size: 13px;
font-weight: 600;
color: #64748b;
color: var(--text-secondary, #64748b);
}
.info-value {
font-size: 14px;
color: #2f3640;
color: var(--text-primary, #2f3640);
font-weight: 600;
font-family: 'Courier New', monospace;
}
/* Warning box */
.warning-box {
background: #fff3e0;
border: 1px solid #ffe0b2;
background: var(--warning-bg, #fff3e0);
border: 1px solid var(--warning-border, #ffe0b2);
border-radius: 10px;
padding: 20px;
margin-bottom: 25px;
@@ -190,7 +190,7 @@
}
.warning-icon {
color: #ff9800;
color: var(--warning-text, #ff9800);
font-size: 24px;
flex-shrink: 0;
}
@@ -202,13 +202,13 @@
.warning-title {
font-size: 16px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 8px;
}
.warning-text {
font-size: 14px;
color: #64748b;
color: var(--text-secondary, #64748b);
line-height: 1.6;
}
@@ -219,7 +219,7 @@
.warning-list li {
font-size: 13px;
color: #64748b;
color: var(--text-secondary, #64748b);
margin-bottom: 6px;
}
@@ -239,38 +239,38 @@
}
.btn-danger {
background: #dc3545;
background: var(--danger-text, #dc3545);
color: white;
}
.btn-danger:hover {
background: #c82333;
box-shadow: 0 4px 12px rgba(220,53,69,0.3);
background: var(--danger-hover, #c82333);
box-shadow: 0 4px 12px var(--danger-shadow, rgba(220,53,69,0.3));
transform: translateY(-1px);
}
.btn-danger:disabled {
background: #ccc;
background: var(--text-disabled, #ccc);
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.btn-secondary {
background: #f8f9ff;
color: #5b5fcf;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
color: var(--accent-color, #5b5fcf);
border: 1px solid var(--border-color, #e8e9ff);
}
.btn-secondary:hover {
background: #eef0ff;
border-color: #5b5fcf;
background: var(--accent-bg, #eef0ff);
border-color: var(--accent-color, #5b5fcf);
}
/* Confirmation section */
.confirmation-section {
background: #ffebee;
border: 1px solid #ffcdd2;
background: var(--danger-bg, #ffebee);
border: 1px solid var(--danger-border, #ffcdd2);
border-radius: 10px;
padding: 25px;
margin-top: 25px;
@@ -280,27 +280,27 @@
.confirmation-icon {
font-size: 48px;
color: #dc3545;
color: var(--danger-text, #dc3545);
margin-bottom: 15px;
}
.confirmation-title {
font-size: 20px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 10px;
}
.confirmation-text {
font-size: 14px;
color: #64748b;
color: var(--text-secondary, #64748b);
margin-bottom: 20px;
}
.confirmation-database {
font-size: 18px;
font-weight: 700;
color: #dc3545;
color: var(--danger-text, #dc3545);
margin-bottom: 25px;
font-family: 'Courier New', monospace;
}
@@ -328,15 +328,15 @@
}
.alert-danger {
background: #ffebee;
border: 1px solid #ffcdd2;
color: #c62828;
background: var(--danger-bg, #ffebee);
border: 1px solid var(--danger-border, #ffcdd2);
color: var(--danger-text, #c62828);
}
.alert-success {
background: #e8f5e9;
border: 1px solid #c8e6c9;
color: #2e7d32;
background: var(--success-bg, #e8f5e9);
border: 1px solid var(--success-border, #c8e6c9);
color: var(--success-text, #2e7d32);
}
/* Loading spinner */
@@ -344,8 +344,8 @@
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid #f3f3f3;
border-top: 2px solid #dc3545;
border: 2px solid var(--border-light, #f3f3f3);
border-top: 2px solid var(--danger-text, #dc3545);
border-radius: 50%;
animation: spin 1s linear infinite;
margin-left: 10px;
@@ -360,25 +360,25 @@
.button-container {
margin-top: 30px;
padding-top: 30px;
border-top: 1px solid #e8e9ff;
border-top: 1px solid var(--border-color, #e8e9ff);
}
/* Empty state */
.empty-state {
text-align: center;
padding: 40px;
color: #8893a7;
color: var(--text-secondary, #8893a7);
}
.empty-state i {
font-size: 48px;
color: #e8e9ff;
color: var(--border-color, #e8e9ff);
margin-bottom: 16px;
}
.empty-state-text {
font-size: 14px;
color: #8893a7;
color: var(--text-secondary, #8893a7);
}
/* Hide elements by default */

93
databases/templates/databases/index.html
View File

@@ -7,6 +7,99 @@
{% get_current_language as LANGUAGE_CODE %}
<!-- Current language: {{ LANGUAGE_CODE }} -->
<style>
/* Database Page Styles with Dark Mode Support */
.container {
background: var(--bg-primary, #f0f0ff);
min-height: 100vh;
padding: 20px;
}
#page-title {
text-align: center;
margin-bottom: 30px;
}
#page-title h2 {
color: var(--text-primary, #2f3640);
font-size: 32px;
font-weight: 700;
margin-bottom: 10px;
}
#page-title p {
color: var(--text-secondary, #8893a7);
font-size: 16px;
}
.panel {
background: var(--bg-secondary, white);
border-radius: 12px;
box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
border: 1px solid var(--border-color, #e8e9ff);
}
.panel-body {
padding: 30px;
}
.content-box-header {
color: var(--text-primary, #2f3640);
font-size: 24px;
font-weight: 700;
margin-bottom: 30px;
text-align: center;
}
.tile-box {
display: block;
text-decoration: none;
padding: 25px;
border-radius: 8px;
text-align: center;
transition: all 0.3s ease;
margin-bottom: 20px;
}
.tile-box.btn-primary {
background: var(--accent-color, #5b5fcf) !important;
color: white !important;
border: 1px solid var(--accent-color, #5b5fcf);
}
.tile-box.btn-primary:hover {
background: var(--accent-hover, #4b4fbf) !important;
box-shadow: 0 4px 12px var(--accent-shadow, rgba(91,95,207,0.3));
transform: translateY(-2px);
}
.tile-box .tile-header {
font-size: 16px;
font-weight: 600;
margin-bottom: 15px;
color: inherit;
}
.tile-box .tile-content-wrapper i {
font-size: 48px;
color: inherit;
}
.example-box-wrapper {
background: transparent;
}
.btn-min-width {
min-width: 250px;
}
@media (max-width: 768px) {
.btn-min-width {
min-width: 100%;
}
}
</style>
<div class="container">
<div id="page-title">
<h2>{% trans "Database Functions" %}</h2>

166
databases/templates/databases/listDataBases.html
View File

@@ -29,29 +29,29 @@
.page-title {
font-size: 28px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 8px;
}
.page-subtitle {
font-size: 14px;
color: #8893a7;
color: var(--text-secondary, #8893a7);
}
/* Card styles */
.content-card {
background: white;
background: var(--bg-secondary, white);
border-radius: 12px;
padding: 30px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
border: 1px solid var(--border-color, #e8e9ff);
margin-bottom: 25px;
}
.card-title {
font-size: 18px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 25px;
display: flex;
align-items: center;
@@ -62,7 +62,7 @@
content: '';
width: 4px;
height: 24px;
background: #5b5fcf;
background: var(--accent-color, #5b5fcf);
border-radius: 2px;
}
@@ -75,7 +75,7 @@
display: block;
font-size: 13px;
font-weight: 600;
color: #64748b;
color: var(--text-secondary, #64748b);
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
@@ -84,21 +84,21 @@
.form-control {
width: 100%;
padding: 10px 14px;
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
font-size: 14px;
color: #2f3640;
background: white;
color: var(--text-primary, #2f3640);
background: var(--bg-secondary, white);
transition: all 0.2s ease;
}
.form-control:hover {
border-color: #5b5fcf;
border-color: var(--accent-color, #5b5fcf);
}
.form-control:focus {
outline: none;
border-color: #5b5fcf;
border-color: var(--accent-color, #5b5fcf);
box-shadow: 0 0 0 3px rgba(91,95,207,0.1);
}
@@ -120,8 +120,8 @@
/* Windows-specific fixes */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
select.form-control {
color: #2f3640 !important;
background-color: white !important;
color: var(--text-primary, #2f3640) !important;
background-color: var(--bg-secondary, white) !important;
}
}
@@ -131,14 +131,14 @@
}
select.form-control:focus {
color: #2f3640;
background-color: white;
color: var(--text-primary, #2f3640);
background-color: var(--bg-secondary, white);
}
/* Website selector card */
.website-selector-card {
background: #f8f9ff;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 10px;
padding: 20px;
margin-bottom: 25px;
@@ -147,33 +147,33 @@
/* Table styles */
.modern-table {
width: 100%;
background: white;
background: var(--bg-secondary, white);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
border: 1px solid #e8e9ff;
box-shadow: 0 1px 3px var(--shadow-color, rgba(0,0,0,0.05));
border: 1px solid var(--border-color, #e8e9ff);
}
.modern-table thead {
background: #f8f9ff;
background: var(--bg-hover, #f8f9ff);
}
.modern-table th {
padding: 16px 20px;
font-size: 13px;
font-weight: 600;
color: #64748b;
color: var(--text-secondary, #64748b);
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 1px solid #e8e9ff;
border-bottom: 1px solid var(--border-color, #e8e9ff);
text-align: left;
}
.modern-table td {
padding: 16px 20px;
font-size: 14px;
color: #2f3640;
border-bottom: 1px solid #f0f0f0;
color: var(--text-primary, #2f3640);
border-bottom: 1px solid var(--border-color, #f0f0f0);
}
.modern-table tbody tr:last-child td {
@@ -181,14 +181,14 @@
}
.modern-table tbody tr:hover {
background: #fafbff;
background: var(--bg-hover, #fafbff);
}
/* Database name styles */
.db-name {
font-family: 'Courier New', monospace;
font-weight: 600;
color: #5b5fcf;
color: var(--accent-color, #5b5fcf);
}
/* Button styles */
@@ -207,25 +207,36 @@
}
.btn-primary {
background: #5b5fcf;
background: var(--accent-color, #5b5fcf);
color: white;
}
.btn-primary:hover {
background: #4a4fc4;
background: var(--accent-hover, #4a4fc4);
box-shadow: 0 4px 12px rgba(91,95,207,0.3);
transform: translateY(-1px);
}
.btn-secondary {
background: #f8f9ff;
color: #5b5fcf;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
color: var(--accent-color, #5b5fcf);
border: 1px solid var(--border-color, #e8e9ff);
}
.btn-secondary:hover {
background: #eef0ff;
border-color: #5b5fcf;
background: var(--bg-hover, #eef0ff);
border-color: var(--accent-color, #5b5fcf);
}
.btn-success {
background: var(--success-text, #10b981);
color: white;
}
.btn-success:hover {
background: var(--success-text, #059669);
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
transform: translateY(-1px);
}
.btn-sm {
@@ -251,8 +262,8 @@
/* Password change section */
.password-change-section {
background: #f8f9ff;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 10px;
padding: 25px;
margin-bottom: 25px;
@@ -262,7 +273,7 @@
.password-change-title {
font-size: 16px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 20px;
display: flex;
align-items: center;
@@ -270,7 +281,7 @@
}
.password-change-title i {
color: #5b5fcf;
color: var(--accent-color, #5b5fcf);
}
/* Password input group */
@@ -287,8 +298,8 @@
/* Generated password box */
.generated-password-box {
background: #e8f5e9;
border: 1px solid #c8e6c9;
background: var(--success-bg, #e8f5e9);
border: 1px solid var(--success-text, #c8e6c9);
border-radius: 8px;
padding: 16px;
margin-bottom: 20px;
@@ -298,7 +309,7 @@
.generated-password-label {
font-size: 12px;
font-weight: 600;
color: #2e7d32;
color: var(--success-text, #2e7d32);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
@@ -307,7 +318,7 @@
.generated-password-value {
font-family: 'Courier New', monospace;
font-size: 14px;
color: #1b5e20;
color: var(--success-text, #1b5e20);
font-weight: 600;
word-break: break-all;
}
@@ -316,12 +327,12 @@
.modal-content {
border-radius: 12px;
border: none;
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
box-shadow: 0 8px 32px var(--shadow-color, rgba(0,0,0,0.1));
}
.modal-header {
background: #f8f9ff;
border-bottom: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
border-bottom: 1px solid var(--border-color, #e8e9ff);
border-radius: 12px 12px 0 0;
padding: 20px 25px;
}
@@ -329,7 +340,7 @@
.modal-title {
font-size: 18px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
display: flex;
align-items: center;
gap: 10px;
@@ -340,8 +351,8 @@
}
.modal-footer {
background: #f8f9ff;
border-top: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
border-top: 1px solid var(--border-color, #e8e9ff);
border-radius: 0 0 12px 12px;
padding: 15px 25px;
display: flex;
@@ -354,6 +365,35 @@
margin-top: 20px;
}
/* Help text styles */
.help-text {
color: var(--text-secondary, #64748b);
font-size: 12px;
}
/* Password group button wrapper */
.password-btn-wrapper {
margin-top: 28px;
}
/* Generated password button wrapper */
.generated-password-btn {
margin-top: 10px;
}
/* Modal separator */
.modal-separator {
margin: 25px 0;
border-color: var(--border-color, #e8e9ff);
}
/* Current access title */
.current-access-title {
font-weight: 600;
margin-bottom: 15px;
color: var(--text-primary, #2f3640);
}
/* Alert styles */
.alert {
padding: 16px 20px;
@@ -371,15 +411,15 @@
}
.alert-danger {
background: #ffebee;
border: 1px solid #ffcdd2;
color: #c62828;
background: var(--danger-bg, #ffebee);
border: 1px solid var(--danger-text, #ffcdd2);
color: var(--danger-text, #c62828);
}
.alert-success {
background: #e8f5e9;
border: 1px solid #c8e6c9;
color: #2e7d32;
background: var(--success-bg, #e8f5e9);
border: 1px solid var(--success-text, #c8e6c9);
color: var(--success-text, #2e7d32);
}
/* Loading spinner */
@@ -387,8 +427,8 @@
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid #f3f3f3;
border-top: 2px solid #5b5fcf;
border: 2px solid var(--border-color, #f3f3f3);
border-top: 2px solid var(--accent-color, #5b5fcf);
border-radius: 50%;
animation: spin 1s linear infinite;
margin-left: 10px;
@@ -514,7 +554,7 @@
<input type="password" class="form-control" ng-model="dbPassword"
placeholder="{% trans 'Enter new password' %}" required>
</div>
<div style="margin-top: 28px;">
<div class="password-btn-wrapper">
<button type="button" ng-click="generatePassword()" class="btn btn-secondary">
<i class="fas fa-sync"></i>
{% trans "Generate" %}
@@ -525,7 +565,7 @@
<div class="generated-password-box" ng-show="!generatedPasswordView">
<div class="generated-password-label">{% trans "Generated Password" %}</div>
<div class="generated-password-value">{$ dbPassword $}</div>
<button type="button" ng-click="usePassword()" class="btn btn-success btn-sm" style="margin-top: 10px;">
<button type="button" ng-click="usePassword()" class="btn btn-success btn-sm generated-password-btn">
<i class="fas fa-check"></i>
{% trans "Use This Password" %}
</button>
@@ -595,7 +635,7 @@
class="form-control"
ng-model="$parent.remoteIP"
required>
<div class="help-text" style="margin-top: 6px;">
<div class="help-text">
{% trans "Use % for wildcard (e.g., 192.168.1.% for subnet)" %}
</div>
</div>
@@ -606,9 +646,9 @@
</button>
</form>
<hr style="margin: 25px 0;">
<hr class="modal-separator">
<h5 style="font-weight: 600; margin-bottom: 15px;">{% trans "Current Access" %}</h5>
<h5 class="current-access-title">{% trans "Current Access" %}</h5>
<table class="modern-table ip-access-table">
<thead>
<tr>

206
databases/templates/databases/mysqlmanager.html
View File

@@ -8,6 +8,68 @@
<!-- Current language: {{ LANGUAGE_CODE }} -->
<style>
:root {
/* Light mode variables */
--bg-primary: #f8f9ff;
--bg-secondary: #ffffff;
--bg-card: #ffffff;
--bg-hover: #f8f9ff;
--bg-gradient-primary: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
--bg-gradient-uptime: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
--bg-gradient-connections: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
--bg-gradient-slow-queries: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
--text-primary: #1e293b;
--text-secondary: #64748b;
--text-muted: #94a3b8;
--border-color: #e8e9ff;
--border-light: #f3f4f6;
--shadow-color: rgba(0,0,0,0.05);
--shadow-color-md: rgba(0,0,0,0.08);
--shadow-color-lg: rgba(0,0,0,0.12);
--accent-color: #5b5fcf;
--accent-hover: #4547a9;
--accent-light: #e0e7ff;
--success-color: #10b981;
--warning-color: #f59e0b;
--warning-bg: #fef3c7;
--warning-text: #92400e;
--info-color: #0ea5e9;
--success-bg: #d1fae5;
--success-text: #065f46;
--icon-color: #cbd5e1;
}
[data-theme="dark"] {
/* Dark mode variables */
--bg-primary: #0f0f23;
--bg-secondary: #1a1a3e;
--bg-card: #1e1e42;
--bg-hover: #252550;
--bg-gradient-primary: linear-gradient(135deg, #16162e 0%, #1a1a3e 100%);
--bg-gradient-uptime: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
--bg-gradient-connections: linear-gradient(135deg, #064e3b 0%, #022c22 100%);
--bg-gradient-slow-queries: linear-gradient(135deg, #78350f 0%, #451a03 100%);
--text-primary: #e4e4e7;
--text-secondary: #9ca3af;
--text-muted: #6b7280;
--border-color: #2a2a5e;
--border-light: #374151;
--shadow-color: rgba(0,0,0,0.3);
--shadow-color-md: rgba(0,0,0,0.4);
--shadow-color-lg: rgba(0,0,0,0.5);
--accent-color: #7c7ff3;
--accent-hover: #6b6ee8;
--accent-light: #3730a3;
--success-color: #34d399;
--warning-color: #fbbf24;
--warning-bg: #78350f;
--warning-text: #fbbf24;
--info-color: #60a5fa;
--success-bg: #064e3b;
--success-text: #34d399;
--icon-color: #6b7280;
}
.modern-container {
max-width: 1400px;
margin: 0 auto;
@@ -18,7 +80,7 @@
text-align: center;
margin-bottom: 3rem;
padding: 3rem 0;
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
background: var(--bg-gradient-primary);
border-radius: 20px;
animation: fadeInDown 0.5s ease-out;
position: relative;
@@ -32,14 +94,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-color, 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);
margin-bottom: 1rem;
display: flex;
align-items: center;
@@ -52,17 +114,17 @@
.mysql-icon {
width: 60px;
height: 60px;
background: white;
background: var(--bg-secondary);
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-color-lg);
}
.page-subtitle {
font-size: 1.25rem;
color: #64748b;
color: var(--text-secondary);
margin-bottom: 1.5rem;
position: relative;
z-index: 1;
@@ -78,8 +140,8 @@
}
.btn-primary {
background: #5b5fcf;
color: white;
background: var(--accent-color);
color: var(--bg-secondary);
border: none;
padding: 0.75rem 2rem;
border-radius: 10px;
@@ -94,16 +156,16 @@
}
.btn-primary:hover {
background: #4547a9;
background: var(--accent-hover);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(91, 95, 207, 0.4);
color: white;
box-shadow: 0 8px 20px var(--shadow-color-lg);
color: var(--bg-secondary);
}
.btn-secondary {
background: #fff;
color: #5b5fcf;
border: 1px solid #e8e9ff;
background: var(--bg-secondary);
color: var(--accent-color);
border: 1px solid var(--border-color);
padding: 0.75rem 2rem;
border-radius: 10px;
font-weight: 500;
@@ -117,10 +179,10 @@
}
.btn-secondary:hover {
background: #f8f9ff;
border-color: #5b5fcf;
background: var(--bg-hover);
border-color: var(--accent-color);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(91, 95, 207, 0.2);
box-shadow: 0 4px 12px var(--shadow-color-md);
}
.stats-grid {
@@ -131,11 +193,11 @@
}
.stat-card {
background: white;
background: var(--bg-card);
border-radius: 16px;
padding: 2rem;
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-color), 0 10px 40px var(--shadow-color-md);
border: 1px solid var(--border-color);
position: relative;
overflow: hidden;
transition: all 0.3s ease;
@@ -144,22 +206,22 @@
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 20px 60px rgba(0,0,0,0.12);
box-shadow: 0 1px 3px var(--shadow-color), 0 20px 60px var(--shadow-color-lg);
}
.stat-card.uptime {
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
border-color: #bae6fd;
background: var(--bg-gradient-uptime);
border-color: var(--info-color);
}
.stat-card.connections {
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
border-color: #bbf7d0;
background: var(--bg-gradient-connections);
border-color: var(--success-color);
}
.stat-card.slow-queries {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border-color: #fcd34d;
background: var(--bg-gradient-slow-queries);
border-color: var(--warning-color);
}
.stat-header {
@@ -172,7 +234,7 @@
.stat-title {
font-size: 1rem;
font-weight: 600;
color: #64748b;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
@@ -180,43 +242,43 @@
.stat-icon {
width: 48px;
height: 48px;
background: white;
background: var(--bg-secondary);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
box-shadow: 0 2px 8px var(--shadow-color-lg);
}
.stat-value {
font-size: 2.5rem;
font-weight: 700;
color: #1e293b;
color: var(--text-primary);
margin: 0;
line-height: 1;
}
.stat-label {
font-size: 0.875rem;
color: #64748b;
color: var(--text-secondary);
margin-top: 0.5rem;
}
.main-card {
background: white;
background: var(--bg-card);
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-color), 0 10px 40px var(--shadow-color-md);
border: 1px solid var(--border-color);
overflow: hidden;
margin-bottom: 2rem;
animation: fadeInUp 0.5s ease-out;
}
.card-header {
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
background: var(--bg-gradient-primary);
padding: 1.5rem 2rem;
border-bottom: 1px solid #e8e9ff;
border-bottom: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
@@ -225,7 +287,7 @@
.card-title {
font-size: 1.25rem;
font-weight: 600;
color: #1e293b;
color: var(--text-primary);
margin: 0;
display: flex;
align-items: center;
@@ -238,30 +300,30 @@
.processes-table {
width: 100%;
background: white;
background: var(--bg-card);
}
.processes-table thead {
background: #f8f9ff;
background: var(--bg-hover);
}
.processes-table th {
padding: 1rem;
text-align: left;
font-weight: 600;
color: #1e293b;
color: var(--text-primary);
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 2px solid #e8e9ff;
border-bottom: 2px solid var(--border-color);
white-space: nowrap;
}
.processes-table td {
padding: 1rem;
color: #64748b;
color: var(--text-secondary);
font-size: 0.875rem;
border-bottom: 1px solid #f3f4f6;
border-bottom: 1px solid var(--border-light);
}
.processes-table tbody tr {
@@ -269,7 +331,7 @@
}
.processes-table tbody tr:hover {
background: #f8f9ff;
background: var(--bg-hover);
}
.processes-table tbody tr:last-child td {
@@ -278,7 +340,7 @@
.process-id {
font-weight: 600;
color: #5b5fcf;
color: var(--accent-color);
font-family: monospace;
}
@@ -291,18 +353,18 @@
.user-icon {
width: 24px;
height: 24px;
background: #e0e7ff;
background: var(--accent-light);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
color: #5b5fcf;
color: var(--accent-color);
}
.command-badge {
background: #f3f4f6;
color: #1e293b;
background: var(--border-light);
color: var(--text-primary);
padding: 0.25rem 0.75rem;
border-radius: 6px;
font-size: 0.75rem;
@@ -311,8 +373,8 @@
}
.time-badge {
background: #fef3c7;
color: #92400e;
background: var(--warning-bg);
color: var(--warning-text);
padding: 0.25rem 0.75rem;
border-radius: 6px;
font-size: 0.75rem;
@@ -327,13 +389,13 @@
}
.state-active {
background: #d1fae5;
color: #065f46;
background: var(--success-bg);
color: var(--success-text);
}
.state-idle {
background: #e0e7ff;
color: #5b5fcf;
background: var(--accent-light);
color: var(--accent-color);
}
.info-text {
@@ -348,22 +410,22 @@
.progress-bar {
width: 100px;
height: 6px;
background: #e8e9ff;
background: var(--border-color);
border-radius: 3px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: #5b5fcf;
background: var(--accent-color);
transition: width 0.3s ease;
}
.loading-spinner {
width: 20px;
height: 20px;
border: 3px solid #e8e9ff;
border-top-color: #5b5fcf;
border: 3px solid var(--border-color);
border-top-color: var(--accent-color);
border-radius: 50%;
animation: spin 1s linear infinite;
display: inline-block;
@@ -371,9 +433,9 @@
}
.refresh-btn {
background: #fff;
color: #64748b;
border: 1px solid #e8e9ff;
background: var(--bg-secondary);
color: var(--text-secondary);
border: 1px solid var(--border-color);
padding: 0.5rem 1rem;
border-radius: 8px;
font-weight: 500;
@@ -386,20 +448,20 @@
}
.refresh-btn:hover {
color: #5b5fcf;
border-color: #5b5fcf;
color: var(--accent-color);
border-color: var(--accent-color);
transform: rotate(180deg);
}
.empty-state {
text-align: center;
padding: 4rem 2rem;
color: #94a3b8;
color: var(--text-muted);
}
.empty-state i {
font-size: 3rem;
color: #cbd5e1;
color: var(--icon-color);
margin-bottom: 1rem;
}
@@ -472,7 +534,7 @@
<div class="page-header">
<h1 class="page-title">
<div class="mysql-icon">
<i class="fas fa-database" style="color: #5b5fcf; font-size: 1.75rem;"></i>
<i class="fas fa-database" style="color: var(--accent-color); font-size: 1.75rem;"></i>
</div>
{% trans "MySQL Manager" %}
</h1>
@@ -494,7 +556,7 @@
<div class="stat-card uptime">
<div class="stat-header">
<h3 class="stat-title">{% trans "MySQL Uptime" %}</h3>
<div class="stat-icon" style="color: #0ea5e9;">
<div class="stat-icon" style="color: var(--info-color);">
<i class="fas fa-clock"></i>
</div>
</div>
@@ -505,7 +567,7 @@
<div class="stat-card connections">
<div class="stat-header">
<h3 class="stat-title">{% trans "Active Connections" %}</h3>
<div class="stat-icon" style="color: #10b981;">
<div class="stat-icon" style="color: var(--success-color);">
<i class="fas fa-link"></i>
</div>
</div>
@@ -516,7 +578,7 @@
<div class="stat-card slow-queries">
<div class="stat-header">
<h3 class="stat-title">{% trans "Slow Queries" %}</h3>
<div class="stat-icon" style="color: #f59e0b;">
<div class="stat-icon" style="color: var(--warning-color);">
<i class="fas fa-exclamation-triangle"></i>
</div>
</div>
@@ -566,7 +628,7 @@
</div>
</td>
<td>
<i class="fas fa-database" style="color: #94a3b8; margin-right: 0.5rem;"></i>
<i class="fas fa-database" style="color: var(--text-muted); margin-right: 0.5rem;"></i>
<span ng-bind="process.database || 'None'"></span>
</td>
<td>

94
databases/templates/databases/phpMyAdmin.html
View File

@@ -7,6 +7,100 @@
{% get_current_language as LANGUAGE_CODE %}
<!-- Current language: {{ LANGUAGE_CODE }} -->
<style>
/* PHPMyAdmin Page Styles with Dark Mode Support */
.container {
background: var(--bg-primary, #f0f0ff);
min-height: 100vh;
padding: 20px;
}
#page-title {
text-align: center;
margin-bottom: 30px;
}
#page-title h2 {
color: var(--text-primary, #2f3640);
font-size: 32px;
font-weight: 700;
margin-bottom: 10px;
}
#page-title p {
color: var(--text-secondary, #8893a7);
font-size: 16px;
}
.panel {
background: var(--bg-secondary, white);
border-radius: 12px;
box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
border: 1px solid var(--border-color, #e8e9ff);
max-width: 800px;
margin: 0 auto;
}
.panel-body {
padding: 30px;
}
.title-hero {
color: var(--text-primary, #2f3640);
font-size: 24px;
font-weight: 700;
margin-bottom: 30px;
text-align: center;
}
.example-box-wrapper {
background: transparent;
text-align: center;
}
.example-box-wrapper p {
color: var(--text-secondary, #8893a7);
font-size: 16px;
line-height: 1.6;
margin-bottom: 20px;
}
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
}
.btn-primary {
background: var(--accent-color, #5b5fcf);
color: white !important;
}
.btn-primary:hover {
background: var(--accent-hover, #4b4fbf);
box-shadow: 0 4px 12px var(--accent-shadow, rgba(91,95,207,0.3));
transform: translateY(-2px);
}
.btn img {
width: 16px;
height: 16px;
margin-left: 8px;
}
a {
text-decoration: none;
}
</style>
<div ng-controller="phpMyAdmin" class="container">
<div id="page-title">

90
packages/templates/packages/createPackage.html
View File

@@ -22,29 +22,29 @@
.page-title {
font-size: 28px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 8px;
}
.page-subtitle {
font-size: 14px;
color: #8893a7;
color: var(--text-secondary, #8893a7);
}
/* Card styles */
.content-card {
background: white;
background: var(--bg-secondary, white);
border-radius: 12px;
padding: 30px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
border: 1px solid var(--border-color, #e8e9ff);
margin-bottom: 25px;
}
.card-title {
font-size: 18px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 25px;
display: flex;
align-items: center;
@@ -55,7 +55,7 @@
content: '';
width: 4px;
height: 24px;
background: #5b5fcf;
background: var(--accent-color, #5b5fcf);
border-radius: 2px;
}
@@ -68,7 +68,7 @@
display: block;
font-size: 13px;
font-weight: 600;
color: #64748b;
color: var(--text-secondary, #64748b);
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
@@ -77,22 +77,22 @@
.form-control {
width: 100%;
padding: 10px 14px;
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
font-size: 14px;
color: #2f3640;
background: white;
color: var(--text-primary, #2f3640);
background: var(--bg-secondary, white);
transition: all 0.2s ease;
}
.form-control:hover {
border-color: #5b5fcf;
border-color: var(--accent-color, #5b5fcf);
}
.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));
}
/* Input group styles */
@@ -107,13 +107,13 @@
}
.input-suffix {
background: #f8f9ff;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
border: 1px solid var(--border-color, #e8e9ff);
border-left: none;
padding: 10px 16px;
border-radius: 0 8px 8px 0;
font-size: 13px;
color: #64748b;
color: var(--text-secondary, #64748b);
font-weight: 600;
white-space: nowrap;
}
@@ -121,18 +121,18 @@
/* Help text */
.help-text {
font-size: 12px;
color: #8893a7;
color: var(--text-muted, #8893a7);
margin-top: 6px;
}
/* Package name preview */
.package-name-preview {
background: #f8f9ff;
border: 1px solid #e8e9ff;
background: var(--accent-bg, #f8f9ff);
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 6px;
padding: 8px 12px;
font-size: 13px;
color: #5b5fcf;
color: var(--accent-color, #5b5fcf);
font-weight: 600;
margin-top: 8px;
display: inline-block;
@@ -147,7 +147,7 @@
/* Resource limits section */
.resource-section {
background: #f8f9ff;
background: var(--bg-hover, #f8f9ff);
border-radius: 10px;
padding: 20px;
margin-bottom: 25px;
@@ -156,7 +156,7 @@
.resource-title {
font-size: 15px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 20px;
display: flex;
align-items: center;
@@ -164,7 +164,7 @@
}
.resource-title i {
color: #5b5fcf;
color: var(--accent-color, #5b5fcf);
}
/* Checkbox styles */
@@ -177,8 +177,8 @@
align-items: start;
gap: 10px;
padding: 12px 16px;
background: #f8f9ff;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
transition: all 0.2s ease;
cursor: pointer;
@@ -186,8 +186,8 @@
}
.checkbox-wrapper:hover {
border-color: #5b5fcf;
background: #f0f1ff;
border-color: var(--accent-color, #5b5fcf);
background: var(--accent-bg, #f0f1ff);
}
.checkbox-wrapper input[type="checkbox"] {
@@ -195,7 +195,7 @@
height: 18px;
border-radius: 4px;
cursor: pointer;
accent-color: #5b5fcf;
accent-color: var(--accent-color, #5b5fcf);
margin-top: 2px;
}
@@ -205,7 +205,7 @@
.checkbox-label {
font-size: 14px;
color: #2f3640;
color: var(--text-primary, #2f3640);
font-weight: 600;
cursor: pointer;
user-select: none;
@@ -215,7 +215,7 @@
.checkbox-desc {
font-size: 12px;
color: #8893a7;
color: var(--text-muted, #8893a7);
line-height: 1.5;
}
@@ -235,13 +235,13 @@
}
.btn-primary {
background: #5b5fcf;
background: var(--accent-color, #5b5fcf);
color: white;
}
.btn-primary:hover {
background: #4a4fc4;
box-shadow: 0 4px 12px rgba(91,95,207,0.3);
background: var(--accent-hover, #4a4fc4);
box-shadow: 0 4px 12px var(--accent-shadow, rgba(91,95,207,0.3));
transform: translateY(-1px);
}
@@ -269,21 +269,21 @@
}
.alert-danger {
background: #ffebee;
border: 1px solid #ffcdd2;
color: #c62828;
background: var(--danger-bg, #fee2e2);
border: 1px solid var(--danger-border, #fca5a5);
color: var(--danger-text, #991b1b);
}
.alert-success {
background: #e8f5e9;
border: 1px solid #c8e6c9;
color: #2e7d32;
background: var(--success-bg, #d1fae5);
border: 1px solid var(--success-border, #6ee7b7);
color: var(--success-text, #065f46);
}
/* Info box */
.info-box {
background: #e3f2fd;
border: 1px solid #bbdefb;
background: var(--info-bg, #dbeafe);
border: 1px solid var(--info-border, #93c5fd);
border-radius: 8px;
padding: 16px;
margin-bottom: 25px;
@@ -293,13 +293,13 @@
}
.info-box i {
color: #1976d2;
color: var(--info-color, #3b82f6);
font-size: 18px;
}
.info-box-text {
font-size: 13px;
color: #1565c0;
color: var(--info-text, #1e40af);
line-height: 1.5;
}
@@ -307,7 +307,7 @@
.button-container {
margin-top: 30px;
padding-top: 30px;
border-top: 1px solid #e8e9ff;
border-top: 1px solid var(--border-color, #e8e9ff);
}
/* Hide elements by default */

120
packages/templates/packages/deletePackage.html
View File

@@ -22,29 +22,29 @@
.page-title {
font-size: 28px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 8px;
}
.page-subtitle {
font-size: 14px;
color: #8893a7;
color: var(--text-secondary, #8893a7);
}
/* Card styles */
.content-card {
background: white;
background: var(--bg-secondary, white);
border-radius: 12px;
padding: 30px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
border: 1px solid var(--border-color, #e8e9ff);
margin-bottom: 25px;
}
.card-title {
font-size: 18px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 25px;
display: flex;
align-items: center;
@@ -55,7 +55,7 @@
content: '';
width: 4px;
height: 24px;
background: #dc3545;
background: var(--danger-color, #dc3545);
border-radius: 2px;
}
@@ -68,7 +68,7 @@
display: block;
font-size: 13px;
font-weight: 600;
color: #64748b;
color: var(--text-secondary, #64748b);
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
@@ -77,22 +77,22 @@
.form-control {
width: 100%;
padding: 10px 14px;
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
font-size: 14px;
color: #2f3640;
background: white;
color: var(--text-primary, #2f3640);
background: var(--bg-secondary, white);
transition: all 0.2s ease;
}
.form-control:hover {
border-color: #dc3545;
border-color: var(--danger-color, #dc3545);
}
.form-control:focus {
outline: none;
border-color: #dc3545;
box-shadow: 0 0 0 3px rgba(220,53,69,0.1);
border-color: var(--danger-color, #dc3545);
box-shadow: 0 0 0 3px var(--danger-shadow, rgba(220,53,69,0.1));
}
/* Windows selectbox fixes */
@@ -113,8 +113,8 @@
/* Windows-specific fixes */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
select.form-control {
color: #2f3640 !important;
background-color: white !important;
color: var(--text-primary, #2f3640) !important;
background-color: var(--bg-secondary, white) !important;
}
}
@@ -124,14 +124,14 @@
}
select.form-control:focus {
color: #2f3640;
background-color: white;
color: var(--text-primary, #2f3640);
background-color: var(--bg-secondary, white);
}
/* Package selector card */
.package-selector-card {
background: #fff5f5;
border: 1px solid #ffdddd;
background: var(--bg-danger-light, #fff5f5);
border: 1px solid var(--border-danger-light, #ffdddd);
border-radius: 10px;
padding: 20px;
margin-bottom: 25px;
@@ -139,8 +139,8 @@
/* Package details card */
.package-details {
background: #f8f9ff;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 10px;
padding: 20px;
margin-bottom: 25px;
@@ -152,7 +152,7 @@
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #e8e9ff;
border-bottom: 1px solid var(--border-color, #e8e9ff);
}
.detail-row:last-child {
@@ -162,12 +162,12 @@
.detail-label {
font-size: 13px;
font-weight: 600;
color: #64748b;
color: var(--text-secondary, #64748b);
}
.detail-value {
font-size: 14px;
color: #2f3640;
color: var(--text-primary, #2f3640);
font-weight: 600;
}
@@ -177,23 +177,23 @@
align-items: center;
gap: 6px;
padding: 4px 10px;
background: #f8f9ff;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 6px;
font-size: 13px;
font-weight: 600;
}
.resource-badge.unlimited {
background: #e8f5e9;
border-color: #c8e6c9;
color: #2e7d32;
background: var(--bg-success-light, #e8f5e9);
border-color: var(--border-success-light, #c8e6c9);
color: var(--success-color, #2e7d32);
}
/* Warning box */
.warning-box {
background: #fff3e0;
border: 1px solid #ffe0b2;
background: var(--bg-warning-light, #fff3e0);
border: 1px solid var(--border-warning-light, #ffe0b2);
border-radius: 10px;
padding: 20px;
margin-bottom: 25px;
@@ -203,7 +203,7 @@
}
.warning-icon {
color: #ff9800;
color: var(--warning-color, #ff9800);
font-size: 24px;
flex-shrink: 0;
}
@@ -215,13 +215,13 @@
.warning-title {
font-size: 16px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 8px;
}
.warning-text {
font-size: 14px;
color: #64748b;
color: var(--text-secondary, #64748b);
line-height: 1.6;
}
@@ -241,38 +241,38 @@
}
.btn-danger {
background: #dc3545;
color: white;
background: var(--danger-color, #dc3545);
color: var(--text-on-danger, white);
}
.btn-danger:hover {
background: #c82333;
box-shadow: 0 4px 12px rgba(220,53,69,0.3);
background: var(--danger-hover, #c82333);
box-shadow: 0 4px 12px var(--danger-shadow, rgba(220,53,69,0.3));
transform: translateY(-1px);
}
.btn-danger:disabled {
background: #ccc;
background: var(--bg-disabled, #ccc);
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.btn-secondary {
background: #f8f9ff;
color: #5b5fcf;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
color: var(--primary-color, #5b5fcf);
border: 1px solid var(--border-color, #e8e9ff);
}
.btn-secondary:hover {
background: #eef0ff;
border-color: #5b5fcf;
background: var(--bg-primary-light, #eef0ff);
border-color: var(--primary-color, #5b5fcf);
}
/* Confirmation section */
.confirmation-section {
background: #ffebee;
border: 1px solid #ffcdd2;
background: var(--bg-danger-light, #ffebee);
border: 1px solid var(--border-danger-light, #ffcdd2);
border-radius: 10px;
padding: 25px;
margin-top: 25px;
@@ -282,27 +282,27 @@
.confirmation-icon {
font-size: 48px;
color: #dc3545;
color: var(--danger-color, #dc3545);
margin-bottom: 15px;
}
.confirmation-title {
font-size: 20px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 10px;
}
.confirmation-text {
font-size: 14px;
color: #64748b;
color: var(--text-secondary, #64748b);
margin-bottom: 20px;
}
.confirmation-package {
font-size: 18px;
font-weight: 700;
color: #dc3545;
color: var(--danger-color, #dc3545);
margin-bottom: 25px;
}
@@ -329,15 +329,15 @@
}
.alert-danger {
background: #ffebee;
border: 1px solid #ffcdd2;
color: #c62828;
background: var(--bg-danger-light, #ffebee);
border: 1px solid var(--border-danger-light, #ffcdd2);
color: var(--danger-text, #c62828);
}
.alert-success {
background: #e8f5e9;
border: 1px solid #c8e6c9;
color: #2e7d32;
background: var(--bg-success-light, #e8f5e9);
border: 1px solid var(--border-success-light, #c8e6c9);
color: var(--success-color, #2e7d32);
}
/* Loading spinner */
@@ -345,8 +345,8 @@
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid #f3f3f3;
border-top: 2px solid #dc3545;
border: 2px solid var(--spinner-bg, #f3f3f3);
border-top: 2px solid var(--danger-color, #dc3545);
border-radius: 50%;
animation: spin 1s linear infinite;
margin-left: 10px;
@@ -361,7 +361,7 @@
.button-container {
margin-top: 30px;
padding-top: 30px;
border-top: 1px solid #e8e9ff;
border-top: 1px solid var(--border-color, #e8e9ff);
}
/* Hide elements by default */

93
packages/templates/packages/index.html
View File

@@ -7,6 +7,99 @@
{% get_current_language as LANGUAGE_CODE %}
<!-- Current language: {{ LANGUAGE_CODE }} -->
<style>
/* Packages Page Styles with Dark Mode Support */
.container {
background: var(--bg-primary, #f0f0ff);
min-height: 100vh;
padding: 20px;
}
#page-title {
text-align: center;
margin-bottom: 30px;
}
#page-title h2 {
color: var(--text-primary, #2f3640);
font-size: 32px;
font-weight: 700;
margin-bottom: 10px;
}
#page-title p {
color: var(--text-secondary, #8893a7);
font-size: 16px;
}
.panel {
background: var(--bg-secondary, white);
border-radius: 12px;
box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
border: 1px solid var(--border-color, #e8e9ff);
}
.panel-body {
padding: 30px;
}
.content-box-header {
color: var(--text-primary, #2f3640);
font-size: 24px;
font-weight: 700;
margin-bottom: 30px;
text-align: center;
}
.tile-box {
display: block;
text-decoration: none;
padding: 25px;
border-radius: 8px;
text-align: center;
transition: all 0.3s ease;
margin-bottom: 20px;
}
.tile-box.btn-primary {
background: var(--accent-color, #5b5fcf) !important;
color: white !important;
border: 1px solid var(--accent-color, #5b5fcf);
}
.tile-box.btn-primary:hover {
background: var(--accent-hover, #4b4fbf) !important;
box-shadow: 0 4px 12px var(--accent-shadow, rgba(91,95,207,0.3));
transform: translateY(-2px);
}
.tile-box .tile-header {
font-size: 16px;
font-weight: 600;
margin-bottom: 15px;
color: inherit;
}
.tile-box .tile-content-wrapper i {
font-size: 48px;
color: inherit;
}
.example-box-wrapper {
background: transparent;
}
.btn-min-width {
min-width: 250px;
}
@media (max-width: 768px) {
.btn-min-width {
min-width: 100%;
}
}
</style>
<div class="container">
<div id="page-title">

142
packages/templates/packages/listPackages.html
View File

@@ -22,29 +22,29 @@
.page-title {
font-size: 28px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary);
margin-bottom: 8px;
}
.page-subtitle {
font-size: 14px;
color: #8893a7;
color: var(--text-secondary);
}
/* Card styles */
.content-card {
background: white;
background: var(--surface-primary);
border-radius: 12px;
padding: 30px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
box-shadow: 0 2px 8px var(--shadow-light);
border: 1px solid var(--border-primary);
margin-bottom: 25px;
}
.card-title {
font-size: 18px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary);
margin-bottom: 25px;
display: flex;
align-items: center;
@@ -55,40 +55,40 @@
content: '';
width: 4px;
height: 24px;
background: #5b5fcf;
background: var(--accent-primary);
border-radius: 2px;
}
/* Table styles */
.modern-table {
width: 100%;
background: white;
background: var(--surface-primary);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
border: 1px solid #e8e9ff;
box-shadow: 0 1px 3px var(--shadow-xs);
border: 1px solid var(--border-primary);
}
.modern-table thead {
background: #f8f9ff;
background: var(--surface-secondary);
}
.modern-table th {
padding: 16px 20px;
font-size: 13px;
font-weight: 600;
color: #64748b;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 1px solid #e8e9ff;
border-bottom: 1px solid var(--border-primary);
text-align: left;
}
.modern-table td {
padding: 16px 20px;
font-size: 14px;
color: #2f3640;
border-bottom: 1px solid #f0f0f0;
color: var(--text-primary);
border-bottom: 1px solid var(--border-light);
}
.modern-table tbody tr:last-child td {
@@ -96,7 +96,7 @@
}
.modern-table tbody tr:hover {
background: #fafbff;
background: var(--surface-hover);
}
/* Resource badges */
@@ -105,17 +105,17 @@
align-items: center;
gap: 6px;
padding: 4px 10px;
background: #f8f9ff;
border: 1px solid #e8e9ff;
background: var(--surface-secondary);
border: 1px solid var(--border-primary);
border-radius: 6px;
font-size: 13px;
font-weight: 600;
}
.resource-badge.unlimited {
background: #e8f5e9;
border-color: #c8e6c9;
color: #2e7d32;
background: var(--success-light);
border-color: var(--success-border);
color: var(--success-dark);
}
/* Status badges */
@@ -130,13 +130,13 @@
}
.status-badge.enabled {
background: #e8f5e9;
color: #2e7d32;
background: var(--success-light);
color: var(--success-dark);
}
.status-badge.disabled {
background: #fff3e0;
color: #f57c00;
background: var(--warning-light);
color: var(--warning-dark);
}
/* Action buttons */
@@ -160,24 +160,24 @@
}
.btn-edit {
background: #f8f9ff;
color: #5b5fcf;
background: var(--surface-secondary);
color: var(--accent-primary);
}
.btn-edit:hover {
background: #5b5fcf;
color: white;
background: var(--accent-primary);
color: var(--text-inverse);
transform: translateY(-1px);
}
.btn-delete {
background: #ffebee;
color: #dc3545;
background: var(--error-light);
color: var(--error-primary);
}
.btn-delete:hover {
background: #dc3545;
color: white;
background: var(--error-primary);
color: var(--text-inverse);
transform: translateY(-1px);
}
@@ -185,12 +185,12 @@
.modal-content {
border-radius: 12px;
border: none;
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
box-shadow: 0 8px 32px var(--shadow-medium);
}
.modal-header {
background: #f8f9ff;
border-bottom: 1px solid #e8e9ff;
background: var(--surface-secondary);
border-bottom: 1px solid var(--border-primary);
border-radius: 12px 12px 0 0;
padding: 20px 25px;
}
@@ -198,7 +198,7 @@
.modal-title {
font-size: 18px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 10px;
@@ -209,8 +209,8 @@
}
.modal-footer {
background: #f8f9ff;
border-top: 1px solid #e8e9ff;
background: var(--surface-secondary);
border-top: 1px solid var(--border-primary);
border-radius: 0 0 12px 12px;
padding: 15px 25px;
display: flex;
@@ -226,7 +226,7 @@
.form-section-title {
font-size: 14px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary);
margin-bottom: 15px;
display: flex;
align-items: center;
@@ -234,7 +234,7 @@
}
.form-section-title i {
color: #5b5fcf;
color: var(--accent-primary);
}
.form-group {
@@ -245,7 +245,7 @@
display: block;
font-size: 13px;
font-weight: 600;
color: #64748b;
color: var(--text-muted);
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
@@ -254,26 +254,26 @@
.form-control {
width: 100%;
padding: 10px 14px;
border: 1px solid #e8e9ff;
border: 1px solid var(--border-primary);
border-radius: 8px;
font-size: 14px;
color: #2f3640;
background: white;
color: var(--text-primary);
background: var(--surface-primary);
transition: all 0.2s ease;
}
.form-control:hover {
border-color: #5b5fcf;
border-color: var(--accent-primary);
}
.form-control:focus {
outline: none;
border-color: #5b5fcf;
box-shadow: 0 0 0 3px rgba(91,95,207,0.1);
border-color: var(--accent-primary);
box-shadow: 0 0 0 3px var(--accent-focus);
}
.form-control[readonly] {
background: #f8f9ff;
background: var(--surface-secondary);
cursor: not-allowed;
}
@@ -289,13 +289,13 @@
}
.input-suffix {
background: #f8f9ff;
border: 1px solid #e8e9ff;
background: var(--surface-secondary);
border: 1px solid var(--border-primary);
border-left: none;
padding: 10px 16px;
border-radius: 0 8px 8px 0;
font-size: 13px;
color: #64748b;
color: var(--text-muted);
font-weight: 600;
white-space: nowrap;
}
@@ -303,7 +303,7 @@
/* Help text */
.help-text {
font-size: 12px;
color: #8893a7;
color: var(--text-secondary);
margin-top: 6px;
}
@@ -313,8 +313,8 @@
align-items: start;
gap: 10px;
padding: 12px 16px;
background: #f8f9ff;
border: 1px solid #e8e9ff;
background: var(--surface-secondary);
border: 1px solid var(--border-primary);
border-radius: 8px;
transition: all 0.2s ease;
cursor: pointer;
@@ -322,8 +322,8 @@
}
.checkbox-wrapper:hover {
border-color: #5b5fcf;
background: #f0f1ff;
border-color: var(--accent-primary);
background: var(--accent-lighter);
}
.checkbox-wrapper input[type="checkbox"] {
@@ -331,7 +331,7 @@
height: 18px;
border-radius: 4px;
cursor: pointer;
accent-color: #5b5fcf;
accent-color: var(--accent-primary);
margin-top: 2px;
}
@@ -341,7 +341,7 @@
.checkbox-label {
font-size: 14px;
color: #2f3640;
color: var(--text-primary);
font-weight: 600;
cursor: pointer;
user-select: none;
@@ -351,7 +351,7 @@
.checkbox-desc {
font-size: 12px;
color: #8893a7;
color: var(--text-secondary);
line-height: 1.5;
}
@@ -371,25 +371,25 @@
}
.btn-primary {
background: #5b5fcf;
color: white;
background: var(--accent-primary);
color: var(--text-inverse);
}
.btn-primary:hover {
background: #4a4fc4;
box-shadow: 0 4px 12px rgba(91,95,207,0.3);
background: var(--accent-dark);
box-shadow: 0 4px 12px var(--accent-shadow);
transform: translateY(-1px);
}
.btn-secondary {
background: #f8f9ff;
color: #5b5fcf;
border: 1px solid #e8e9ff;
background: var(--surface-secondary);
color: var(--accent-primary);
border: 1px solid var(--border-primary);
}
.btn-secondary:hover {
background: #eef0ff;
border-color: #5b5fcf;
background: var(--accent-light);
border-color: var(--accent-primary);
}
/* Loading spinner */
@@ -397,8 +397,8 @@
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid #f3f3f3;
border-top: 2px solid #5b5fcf;
border: 2px solid var(--border-light);
border-top: 2px solid var(--accent-primary);
border-radius: 50%;
animation: spin 1s linear infinite;
margin-left: 10px;

96
packages/templates/packages/modifyPackage.html
View File

@@ -22,29 +22,29 @@
.page-title {
font-size: 28px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 8px;
}
.page-subtitle {
font-size: 14px;
color: #8893a7;
color: var(--text-secondary, #8893a7);
}
/* Card styles */
.content-card {
background: white;
background: var(--bg-secondary, white);
border-radius: 12px;
padding: 30px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
border: 1px solid var(--border-color, #e8e9ff);
margin-bottom: 25px;
}
.card-title {
font-size: 18px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 25px;
display: flex;
align-items: center;
@@ -55,7 +55,7 @@
content: '';
width: 4px;
height: 24px;
background: #5b5fcf;
background: var(--accent-color, #5b5fcf);
border-radius: 2px;
}
@@ -68,7 +68,7 @@
display: block;
font-size: 13px;
font-weight: 600;
color: #64748b;
color: var(--text-label, #64748b);
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
@@ -77,26 +77,26 @@
.form-control {
width: 100%;
padding: 10px 14px;
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
font-size: 14px;
color: #2f3640;
background: white;
color: var(--text-primary, #2f3640);
background: var(--bg-secondary, white);
transition: all 0.2s ease;
}
.form-control:hover {
border-color: #5b5fcf;
border-color: var(--accent-color, #5b5fcf);
}
.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(--focus-shadow, rgba(91,95,207,0.1));
}
.form-control[readonly] {
background: #f8f9ff;
background: var(--bg-hover, #f8f9ff);
cursor: not-allowed;
}
@@ -118,8 +118,8 @@
/* Windows-specific fixes */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
select.form-control {
color: #2f3640 !important;
background-color: white !important;
color: var(--text-primary, #2f3640) !important;
background-color: var(--bg-secondary, white) !important;
}
}
@@ -129,14 +129,14 @@
}
select.form-control:focus {
color: #2f3640;
background-color: white;
color: var(--text-primary, #2f3640);
background-color: var(--bg-secondary, white);
}
/* Package selector card */
.package-selector-card {
background: #f8f9ff;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 10px;
padding: 20px;
margin-bottom: 25px;
@@ -154,13 +154,13 @@
}
.input-suffix {
background: #f8f9ff;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
border: 1px solid var(--border-color, #e8e9ff);
border-left: none;
padding: 10px 16px;
border-radius: 0 8px 8px 0;
font-size: 13px;
color: #64748b;
color: var(--text-label, #64748b);
font-weight: 600;
white-space: nowrap;
}
@@ -168,13 +168,13 @@
/* Help text */
.help-text {
font-size: 12px;
color: #8893a7;
color: var(--text-secondary, #8893a7);
margin-top: 6px;
}
/* Form section */
.form-section {
background: #f8f9ff;
background: var(--bg-hover, #f8f9ff);
border-radius: 10px;
padding: 20px;
margin-bottom: 25px;
@@ -183,7 +183,7 @@
.form-section-title {
font-size: 15px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 20px;
display: flex;
align-items: center;
@@ -191,7 +191,7 @@
}
.form-section-title i {
color: #5b5fcf;
color: var(--accent-color, #5b5fcf);
}
/* Form row */
@@ -212,8 +212,8 @@
align-items: start;
gap: 10px;
padding: 12px 16px;
background: #f8f9ff;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
transition: all 0.2s ease;
cursor: pointer;
@@ -221,8 +221,8 @@
}
.checkbox-wrapper:hover {
border-color: #5b5fcf;
background: #f0f1ff;
border-color: var(--accent-color, #5b5fcf);
background: var(--bg-hover-alt, #f0f1ff);
}
.checkbox-wrapper input[type="checkbox"] {
@@ -230,7 +230,7 @@
height: 18px;
border-radius: 4px;
cursor: pointer;
accent-color: #5b5fcf;
accent-color: var(--accent-color, #5b5fcf);
margin-top: 2px;
}
@@ -240,7 +240,7 @@
.checkbox-label {
font-size: 14px;
color: #2f3640;
color: var(--text-primary, #2f3640);
font-weight: 600;
cursor: pointer;
user-select: none;
@@ -250,7 +250,7 @@
.checkbox-desc {
font-size: 12px;
color: #8893a7;
color: var(--text-secondary, #8893a7);
line-height: 1.5;
}
@@ -270,18 +270,18 @@
}
.btn-primary {
background: #5b5fcf;
background: var(--accent-color, #5b5fcf);
color: white;
}
.btn-primary:hover {
background: #4a4fc4;
box-shadow: 0 4px 12px rgba(91,95,207,0.3);
background: var(--accent-hover, #4a4fc4);
box-shadow: 0 4px 12px var(--accent-shadow, rgba(91,95,207,0.3));
transform: translateY(-1px);
}
.btn-primary:disabled {
background: #ccc;
background: var(--bg-disabled, #ccc);
cursor: not-allowed;
transform: none;
box-shadow: none;
@@ -304,15 +304,15 @@
}
.alert-danger {
background: #ffebee;
border: 1px solid #ffcdd2;
color: #c62828;
background: var(--danger-bg, #ffebee);
border: 1px solid var(--danger-border, #ffcdd2);
color: var(--danger-text, #c62828);
}
.alert-success {
background: #e8f5e9;
border: 1px solid #c8e6c9;
color: #2e7d32;
background: var(--success-bg, #e8f5e9);
border: 1px solid var(--success-border, #c8e6c9);
color: var(--success-text, #2e7d32);
}
/* Loading spinner */
@@ -320,8 +320,8 @@
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid #f3f3f3;
border-top: 2px solid #5b5fcf;
border: 2px solid var(--spinner-bg, #f3f3f3);
border-top: 2px solid var(--accent-color, #5b5fcf);
border-radius: 50%;
animation: spin 1s linear infinite;
margin-left: 10px;
@@ -336,7 +336,7 @@
.button-container {
margin-top: 30px;
padding-top: 30px;
border-top: 1px solid #e8e9ff;
border-top: 1px solid var(--border-color, #e8e9ff);
display: none;
}

12
websiteFunctions/templates/websiteFunctions/installJoomla.html
View File

@@ -8,7 +8,7 @@
<!-- Current language: {{ LANGUAGE_CODE }} -->
<style>
/* Joomla Installation Page Styles */
/* Joomla Installation Page Styles with Dark Mode Support */
.container {
background: var(--bg-primary, #f0f0ff);
min-height: 100vh;
@@ -144,14 +144,14 @@
}
.alert-success {
background: var(--success-bg, #f0f9ff);
border: 1px solid var(--success-border, #bae6fd);
color: var(--success-text, #0c4a6e);
background: var(--success-bg, #d1fae5);
border: 1px solid var(--success-border, #6ee7b7);
color: var(--success-text, #065f46);
}
.alert-danger {
background: var(--danger-bg, #fef2f2);
border: 1px solid var(--danger-border, #fecaca);
background: var(--danger-bg, #fee2e2);
border: 1px solid var(--danger-border, #fca5a5);
color: var(--danger-text, #991b1b);
}

16
websiteFunctions/templates/websiteFunctions/installMagento.html
View File

@@ -8,7 +8,7 @@
<!-- Current language: {{ LANGUAGE_CODE }} -->
<style>
/* Magento Installation Page Styles */
/* Magento Installation Page Styles with Dark Mode Support */
.container {
background: var(--bg-primary, #f0f0ff);
min-height: 100vh;
@@ -158,20 +158,20 @@
}
.alert-success {
background: var(--success-bg, #f0f9ff);
border: 1px solid var(--success-border, #bae6fd);
color: var(--success-text, #0c4a6e);
background: var(--success-bg, #d1fae5);
border: 1px solid var(--success-border, #6ee7b7);
color: var(--success-text, #065f46);
}
.alert-danger {
background: var(--danger-bg, #fef2f2);
border: 1px solid var(--danger-border, #fecaca);
background: var(--danger-bg, #fee2e2);
border: 1px solid var(--danger-border, #fca5a5);
color: var(--danger-text, #991b1b);
}
.alert-warning {
background: var(--warning-bg, #fffbeb);
border: 1px solid var(--warning-border, #fed7aa);
background: var(--warning-bg, #fef3c7);
border: 1px solid var(--warning-border, #fcd34d);
color: var(--warning-text, #92400e);
}

8
websiteFunctions/templates/websiteFunctions/installMautic.html
View File

@@ -262,7 +262,7 @@
.progress {
height: 12px;
border-radius: var(--radius-full);
background: var(--border-color);
background: var(--border-color-local);
overflow: hidden;
margin-top: 15px;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
@@ -372,7 +372,7 @@
.mautic-logo {
width: 40px;
height: 40px;
background: white;
background: var(--bg-secondary, white);
border-radius: 8px;
padding: 5px;
display: inline-flex;
@@ -392,12 +392,12 @@
display: flex;
align-items: center;
gap: 10px;
color: var(--text-secondary);
color: var(--text-secondary-local);
font-size: 14px;
}
.feature-item i {
color: var(--success-color);
color: var(--success-color-local);
font-size: 16px;
}

17
websiteFunctions/templates/websiteFunctions/installPrestaShop.html
View File

@@ -164,7 +164,7 @@
.control-label {
font-weight: 600;
color: var(--text-primary);
color: var(--text-primary-local);
margin-bottom: 8px;
font-size: 14px;
letter-spacing: 0.3px;
@@ -174,12 +174,13 @@
}
.form-control {
border: 2px solid var(--border-color);
border: 2px solid var(--border-color-local);
border-radius: var(--radius-md);
padding: 12px 16px;
font-size: 15px;
transition: var(--transition-base);
background: white;
background: var(--bg-secondary, white);
color: var(--text-primary-local);
}
.form-control:focus {
@@ -189,7 +190,7 @@
}
.form-control::placeholder {
color: var(--text-muted);
color: var(--text-muted-local);
font-size: 14px;
}
@@ -261,7 +262,7 @@
.progress {
height: 12px;
border-radius: var(--radius-full);
background: var(--border-color);
background: var(--border-color-local);
overflow: hidden;
margin-top: 15px;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
@@ -351,7 +352,7 @@
.ps-logo {
width: 40px;
height: 40px;
background: white;
background: var(--bg-secondary, white);
border-radius: 8px;
padding: 5px;
display: inline-flex;
@@ -371,12 +372,12 @@
display: flex;
align-items: center;
gap: 10px;
color: var(--text-secondary);
color: var(--text-secondary-local);
font-size: 14px;
}
.feature-item i {
color: var(--success-color);
color: var(--success-color-local);
font-size: 16px;
}