ASF-Nabd/testarena
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

theme

Browse Source
This commit is contained in:
mahmamdouh
2026-01-05 15:41:31 +01:00
parent 67e51a5348
commit 2d81f78fed
3 changed files with 349 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

273
app/static/css/style.css
View File

@@ -1,12 +1,26 @@
:root {
--primary: #2563eb;
--primary-dark: #1e40af;
--primary: #3b82f6;
/* Blue 500 */
--primary-dark: #2563eb;
/* Blue 600 */
--success: #10b981;
/* Emerald 500 */
--danger: #ef4444;
/* Red 500 */
--warning: #f59e0b;
--dark: #1f2937;
--light: #f3f4f6;
--border: #e5e7eb;
/* Amber 500 */
--dark: #f8fafc;
/* Slate 50 (Text) */
--bg-dark: #0f172a;
/* Slate 900 (Body) */
--bg-panel: #1e293b;
/* Slate 800 (Panels) */
--bg-input: #334155;
/* Slate 700 (Inputs) */
--border: #334155;
/* Slate 700 */
--text-muted: #94a3b8;
/* Slate 400 */
}
* {
@@ -16,8 +30,9 @@
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%);
font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: var(--bg-dark);
color: var(--dark);
min-height: 100vh;
}
@@ -36,12 +51,13 @@ body {
}
.login-box {
background: white;
background: var(--bg-panel);
padding: 40px;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
border-radius: 16px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
width: 100%;
max-width: 400px;
border: 1px solid var(--border);
}
.logo {
@@ -58,6 +74,7 @@ body {
color: var(--dark);
margin-top: 15px;
font-size: 24px;
font-weight: 700;
}
.form-group {
@@ -67,21 +84,25 @@ body {
.form-group label {
display: block;
margin-bottom: 8px;
color: var(--dark);
color: var(--text-muted);
font-weight: 500;
}
.form-control {
width: 100%;
padding: 12px;
border: 2px solid var(--border);
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 8px;
font-size: 14px;
color: var(--dark);
transition: all 0.2s;
}
.form-control:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
.btn {
@@ -127,25 +148,26 @@ body {
}
.alert-success {
background: #d1fae5;
color: #065f46;
border: 1px solid #10b981;
background: rgba(16, 185, 129, 0.1);
color: #34d399;
border: 1px solid rgba(16, 185, 129, 0.2);
}
.alert-error {
background: #fee2e2;
color: #991b1b;
border: 1px solid #ef4444;
background: rgba(239, 68, 68, 0.1);
color: #f87171;
border: 1px solid rgba(239, 68, 68, 0.2);
}
/* Navbar */
.navbar {
background: white;
background: var(--bg-panel);
padding: 15px 30px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--border);
}
.navbar-brand {
@@ -161,6 +183,7 @@ body {
.navbar-brand h2 {
color: var(--dark);
font-size: 20px;
font-weight: 700;
}
.navbar-menu {
@@ -170,7 +193,7 @@ body {
}
.navbar-menu a {
color: var(--dark);
color: var(--text-muted);
text-decoration: none;
font-weight: 500;
transition: color 0.3s;
@@ -190,11 +213,12 @@ body {
}
.panel {
background: white;
border-radius: 12px;
background: var(--bg-panel);
border-radius: 16px;
padding: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
overflow-y: auto;
border: 1px solid var(--border);
}
.panel-header {
@@ -203,12 +227,13 @@ body {
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid var(--border);
border-bottom: 1px solid var(--border);
}
.panel-header h3 {
color: var(--dark);
font-size: 18px;
font-weight: 600;
}
/* Job List */
@@ -220,10 +245,11 @@ body {
.job-item {
padding: 15px;
border: 2px solid var(--border);
border-radius: 8px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 12px;
cursor: pointer;
transition: all 0.3s;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 12px;
@@ -231,12 +257,12 @@ body {
.job-item:hover {
border-color: var(--primary);
background: var(--light);
transform: translateY(-2px);
}
.job-item.active {
border-color: var(--primary);
background: #eff6ff;
background: rgba(59, 130, 246, 0.1);
}
.job-status-icon {
@@ -247,10 +273,11 @@ body {
color: var(--dark);
font-size: 14px;
margin-bottom: 4px;
font-weight: 600;
}
.job-info p {
color: #6b7280;
color: var(--text-muted);
font-size: 12px;
}
@@ -272,11 +299,11 @@ body {
.detail-label {
font-weight: 600;
color: var(--dark);
color: var(--text-muted);
}
.detail-value {
color: #4b5563;
color: var(--dark);
}
.status-badge {
@@ -288,32 +315,43 @@ body {
}
.status-in_progress {
background: #fef3c7;
color: #92400e;
background: rgba(245, 158, 11, 0.1);
color: #fbbf24;
border: 1px solid rgba(245, 158, 11, 0.2);
}
.status-passed {
background: #d1fae5;
color: #065f46;
background: rgba(16, 185, 129, 0.1);
color: #34d399;
border: 1px solid rgba(16, 185, 129, 0.2);
}
.status-failed {
background: #fee2e2;
color: #991b1b;
background: rgba(239, 68, 68, 0.1);
color: #f87171;
border: 1px solid rgba(239, 68, 68, 0.2);
}
.status-aborted {
background: #f3f4f6;
color: #374151;
background: rgba(148, 163, 184, 0.1);
color: #cbd5e1;
border: 1px solid rgba(148, 163, 184, 0.2);
}
.status-waiting {
background: rgba(245, 158, 11, 0.1);
color: #fbbf24;
border: 1px solid rgba(245, 158, 11, 0.2);
}
/* Admin Dashboard */
.admin-container {
background: white;
border-radius: 12px;
background: var(--bg-panel);
border-radius: 16px;
padding: 30px;
margin-top: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
border: 1px solid var(--border);
}
.admin-header {
@@ -333,7 +371,7 @@ body {
}
.user-table th {
background: var(--light);
background: var(--bg-input);
padding: 12px;
text-align: left;
font-weight: 600;
@@ -344,10 +382,11 @@ body {
.user-table td {
padding: 12px;
border-bottom: 1px solid var(--border);
color: var(--text-muted);
}
.user-table tr:hover {
background: var(--light);
background: rgba(255, 255, 255, 0.02);
}
.badge {
@@ -359,13 +398,13 @@ body {
}
.badge-admin {
background: #dbeafe;
color: #1e40af;
background: rgba(59, 130, 246, 0.1);
color: #60a5fa;
}
.badge-user {
background: #f3f4f6;
color: #374151;
background: rgba(148, 163, 184, 0.1);
color: #cbd5e1;
}
/* Modal */
@@ -376,8 +415,9 @@ body {
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
background: rgba(0, 0, 0, 0.7);
z-index: 1000;
backdrop-filter: blur(4px);
}
.modal.active {
@@ -387,11 +427,13 @@ body {
}
.modal-content {
background: white;
background: var(--bg-panel);
padding: 30px;
border-radius: 12px;
border-radius: 16px;
width: 90%;
max-width: 500px;
border: 1px solid var(--border);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.modal-header {
@@ -410,19 +452,24 @@ body {
border: none;
font-size: 24px;
cursor: pointer;
color: #6b7280;
color: var(--text-muted);
}
.close-btn:hover {
color: var(--dark);
}
/* Submit Form */
.submit-container {
background: white;
border-radius: 12px;
background: var(--bg-panel);
border-radius: 16px;
padding: 40px;
margin-top: 20px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
border: 1px solid var(--border);
}
.step-indicator {
@@ -455,29 +502,33 @@ body {
.step.active .step-number {
background: var(--primary);
color: white;
border-color: var(--primary);
}
.step.completed .step-number {
background: var(--success);
color: white;
border-color: var(--success);
}
.step-number {
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--border);
color: var(--dark);
background: var(--bg-input);
border: 2px solid var(--border);
color: var(--text-muted);
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 600;
margin-bottom: 8px;
transition: all 0.3s;
}
.step-label {
font-size: 12px;
color: #6b7280;
color: var(--text-muted);
}
.checkbox-group {
@@ -491,11 +542,13 @@ body {
display: flex;
align-items: center;
gap: 8px;
color: var(--dark);
}
.checkbox-item input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--primary);
}
.radio-group {
@@ -510,15 +563,22 @@ body {
align-items: center;
gap: 10px;
padding: 12px;
border: 2px solid var(--border);
border: 1px solid var(--border);
border-radius: 8px;
cursor: pointer;
background: var(--bg-input);
transition: all 0.2s;
}
.radio-item:hover {
border-color: var(--primary);
}
.radio-item label {
color: var(--dark);
cursor: pointer;
}
.radio-item input[type="radio"]:checked+label {
color: var(--primary);
font-weight: 600;
@@ -534,21 +594,22 @@ body {
.empty-state {
text-align: center;
padding: 60px 20px;
color: #6b7280;
color: var(--text-muted);
}
.empty-state h3 {
margin-bottom: 10px;
color: var(--dark);
}
/* Context Menu */
.context-menu {
display: none;
position: absolute;
background: white;
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
z-index: 1000;
min-width: 150px;
}
@@ -560,10 +621,11 @@ body {
align-items: center;
gap: 8px;
transition: background-color 0.2s;
color: var(--dark);
}
.context-menu-item:hover {
background: var(--light);
background: var(--bg-input);
}
.context-menu-item:first-child {
@@ -587,28 +649,28 @@ body {
}
.branch-validation.success {
background: #d1fae5;
color: #065f46;
border: 1px solid #10b981;
background: rgba(16, 185, 129, 0.1);
color: #34d399;
border: 1px solid rgba(16, 185, 129, 0.2);
}
.branch-validation.error {
background: #fee2e2;
color: #991b1b;
border: 1px solid #ef4444;
background: rgba(239, 68, 68, 0.1);
color: #f87171;
border: 1px solid rgba(239, 68, 68, 0.2);
}
.branch-validation.loading {
background: #fef3c7;
color: #92400e;
border: 1px solid #f59e0b;
background: rgba(245, 158, 11, 0.1);
color: #fbbf24;
border: 1px solid rgba(245, 158, 11, 0.2);
}
.loading-spinner {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid #f3f3f3;
border: 2px solid rgba(255, 255, 255, 0.1);
border-top: 2px solid var(--primary);
border-radius: 50%;
animation: spin 1s linear infinite;
@@ -626,27 +688,29 @@ body {
}
.btn:disabled {
background: #9ca3af;
background: var(--bg-input);
cursor: not-allowed;
opacity: 0.6;
color: var(--text-muted);
}
/* Scenario Tree Styles */
.scenario-controls {
margin: 20px 0;
padding: 15px;
background: var(--light);
background: var(--bg-input);
border-radius: 8px;
display: flex;
align-items: center;
gap: 10px;
border: 1px solid var(--border);
}
.scenario-tree {
border: 1px solid var(--border);
border-radius: 8px;
padding: 20px;
background: white;
background: var(--bg-panel);
margin: 20px 0;
max-height: 500px;
overflow-y: auto;
@@ -673,6 +737,7 @@ body {
padding: 8px 0;
cursor: pointer;
user-select: none;
color: var(--dark);
}
.tree-toggle {
@@ -707,13 +772,13 @@ body {
.stack-label {
font-size: 14px;
font-weight: 500;
color: #4b5563;
color: var(--text-muted);
}
.scenario-label {
font-size: 13px;
font-weight: 400;
color: #6b7280;
color: var(--text-muted);
}
.tree-children {
@@ -726,6 +791,7 @@ body {
width: 16px;
height: 16px;
cursor: pointer;
accent-color: var(--primary);
}
.layer-node:hover {
@@ -768,28 +834,63 @@ input[type="checkbox"]:indeterminate::before {
#scenarioTable {
margin-top: 10px;
font-size: 13px;
width: 100%;
border-collapse: collapse;
}
#scenarioTable th {
padding: 10px;
background: #f8fafc;
background: var(--bg-input);
color: var(--dark);
text-align: left;
border-bottom: 1px solid var(--border);
}
#scenarioTable td {
padding: 10px;
color: var(--text-muted);
border-bottom: 1px solid var(--border);
}
#queue-log {
border: 1px solid #333;
box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);
border: 1px solid var(--border);
box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.2);
background: #000;
color: #0f0;
padding: 10px;
font-family: monospace;
border-radius: 8px;
}
#scenarioSearch {
background: var(--bg-input);
border: 1px solid var(--border);
color: var(--dark);
padding: 8px 12px;
border-radius: 6px;
}
#scenarioSearch:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
outline: none;
}
.status-waiting {
background: #fef3c7;
color: #92400e;
/* Scrollbar Styling */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--bg-dark);
}
::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--text-muted);
}