1097 行
40 KiB
HTML
1097 行
40 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Authorized Lab Dashboard</title>
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.min.css" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--bg-dark: #0f1115;
|
|
--bg-card: #161b22;
|
|
--bg-card-hover: #1f2633;
|
|
--accent-blue: #3b82f6;
|
|
--accent-purple: #8b5cf6;
|
|
--accent-green: #10b981;
|
|
--accent-red: #ef4444;
|
|
--accent-yellow: #f59e0b;
|
|
--text-primary: #f0f6fc;
|
|
--text-secondary: #8b949e;
|
|
--border-color: #30363d;
|
|
--glass-bg: rgba(22, 27, 34, 0.7);
|
|
--glass-border: rgba(240, 246, 252, 0.1);
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'MiSans-Regular';
|
|
src: url('https://assets-persist.lovart.ai/agent-static-assets/MiSans-Regular.ttf');
|
|
}
|
|
@font-face {
|
|
font-family: 'MiSans-Medium';
|
|
src: url('https://assets-persist.lovart.ai/agent-static-assets/MiSans-Medium.ttf');
|
|
}
|
|
@font-face {
|
|
font-family: 'MiSans-Bold';
|
|
src: url('https://assets-persist.lovart.ai/agent-static-assets/MiSans-Bold.ttf');
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: 'MiSans-Regular', sans-serif;
|
|
background-color: var(--bg-dark);
|
|
color: var(--text-primary);
|
|
width: 1920px;
|
|
overflow-x: hidden;
|
|
background-image:
|
|
radial-gradient(circle at 15% 50%, rgba(59, 130, 246, 0.08), transparent 25%),
|
|
radial-gradient(circle at 85% 30%, rgba(139, 92, 246, 0.08), transparent 25%);
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
/* Grid Background Texture */
|
|
.grid-bg {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: linear-gradient(rgba(48, 54, 61, 0.3) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(48, 54, 61, 0.3) 1px, transparent 1px);
|
|
background-size: 40px 40px;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Top Hero Area */
|
|
.hero {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
background: rgba(15, 17, 21, 0.85);
|
|
backdrop-filter: blur(12px);
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding: 20px 32px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.hero-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.hero-title h1 {
|
|
font-family: 'MiSans-Bold';
|
|
font-size: 28px;
|
|
background: linear-gradient(90deg, #fff, #a5b4fc);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.hero-title p {
|
|
color: var(--text-secondary);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.hero-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
.refresh-btn {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-primary);
|
|
padding: 8px 12px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.refresh-btn:hover {
|
|
background: var(--bg-card-hover);
|
|
border-color: var(--accent-blue);
|
|
}
|
|
|
|
.auto-refresh {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 36px;
|
|
height: 20px;
|
|
}
|
|
|
|
.switch input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
transition: .4s;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.slider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 14px;
|
|
width: 14px;
|
|
left: 2px;
|
|
bottom: 2px;
|
|
background-color: var(--text-secondary);
|
|
transition: .4s;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
input:checked + .slider {
|
|
background-color: var(--accent-blue);
|
|
border-color: var(--accent-blue);
|
|
}
|
|
|
|
input:checked + .slider:before {
|
|
transform: translateX(16px);
|
|
background-color: #fff;
|
|
}
|
|
|
|
.metrics-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 20px;
|
|
}
|
|
|
|
.metric-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: transform 0.2s;
|
|
}
|
|
.metric-card:hover {
|
|
transform: translateY(-2px);
|
|
border-color: var(--glass-border);
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.metric-card::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 4px;
|
|
height: 100%;
|
|
}
|
|
|
|
.metric-total::after { background: var(--accent-purple); }
|
|
.metric-success::after { background: var(--accent-green); }
|
|
.metric-blocked::after { background: var(--accent-red); }
|
|
.metric-progress::after { background: var(--accent-blue); }
|
|
|
|
.metric-label {
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
font-family: 'MiSans-Medium';
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.metric-value {
|
|
font-size: 28px;
|
|
font-family: 'MiSans-Bold';
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.metric-trend {
|
|
font-size: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
.trend-up { color: var(--accent-green); }
|
|
.trend-down { color: var(--accent-red); }
|
|
|
|
/* Main Content Layout */
|
|
.main-container {
|
|
display: flex;
|
|
min-height: calc(100vh - 180px); /* Adjust based on Hero height */
|
|
}
|
|
|
|
/* Sidebar */
|
|
.sidebar {
|
|
width: 320px;
|
|
background: rgba(15, 17, 21, 0.6);
|
|
border-right: 1px solid var(--border-color);
|
|
padding: 24px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.section-header {
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
color: var(--text-secondary);
|
|
font-family: 'MiSans-Bold';
|
|
margin-bottom: 12px;
|
|
letter-spacing: 1px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.filter-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.search-box {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
padding: 8px 12px;
|
|
color: var(--text-primary);
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.search-box input {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-primary);
|
|
outline: none;
|
|
width: 100%;
|
|
font-family: 'MiSans-Regular';
|
|
}
|
|
|
|
.filter-select {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
padding: 8px 12px;
|
|
color: var(--text-secondary);
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.system-stats {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 12px;
|
|
}
|
|
|
|
.stat-bar {
|
|
background: var(--bg-card);
|
|
padding: 10px;
|
|
border-radius: 6px;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
.stat-label {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 6px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.progress-bg {
|
|
height: 4px;
|
|
background: #2d333b;
|
|
border-radius: 2px;
|
|
overflow: hidden;
|
|
}
|
|
.progress-fill {
|
|
height: 100%;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.run-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
margin-bottom: 12px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
position: relative;
|
|
}
|
|
.run-card:hover {
|
|
border-color: var(--accent-blue);
|
|
background: var(--bg-card-hover);
|
|
}
|
|
.run-card.active {
|
|
border-color: var(--accent-blue);
|
|
background: rgba(59, 130, 246, 0.1);
|
|
}
|
|
.run-card.active::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 3px;
|
|
background: var(--accent-blue);
|
|
border-radius: 8px 0 0 8px;
|
|
}
|
|
|
|
.run-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 6px;
|
|
}
|
|
.run-id {
|
|
font-family: 'MiSans-Bold';
|
|
font-size: 14px;
|
|
color: var(--text-primary);
|
|
}
|
|
.run-status {
|
|
font-size: 10px;
|
|
padding: 2px 6px;
|
|
border-radius: 10px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
}
|
|
.status-success { background: rgba(16, 185, 129, 0.2); color: var(--accent-green); border: 1px solid rgba(16, 185, 129, 0.3); }
|
|
.status-blocked { background: rgba(239, 68, 68, 0.2); color: var(--accent-red); border: 1px solid rgba(239, 68, 68, 0.3); }
|
|
.status-running { background: rgba(59, 130, 246, 0.2); color: var(--accent-blue); border: 1px solid rgba(59, 130, 246, 0.3); }
|
|
.status-manual { background: rgba(245, 158, 11, 0.2); color: var(--accent-yellow); border: 1px solid rgba(245, 158, 11, 0.3); }
|
|
|
|
.run-desc {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 8px;
|
|
line-height: 1.4;
|
|
}
|
|
.run-meta {
|
|
display: flex;
|
|
gap: 10px;
|
|
font-size: 11px;
|
|
color: #6e7681;
|
|
}
|
|
|
|
/* Detail Workspace */
|
|
.workspace {
|
|
flex: 1;
|
|
padding: 32px 48px;
|
|
overflow-y: auto;
|
|
max-height: calc(100vh - 180px);
|
|
}
|
|
|
|
.detail-hero {
|
|
margin-bottom: 32px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding-bottom: 20px;
|
|
}
|
|
.detail-title h2 {
|
|
font-family: 'MiSans-Bold';
|
|
font-size: 24px;
|
|
margin-bottom: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.detail-meta {
|
|
color: var(--text-secondary);
|
|
font-size: 14px;
|
|
display: flex;
|
|
gap: 16px;
|
|
}
|
|
.detail-actions {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
.btn {
|
|
padding: 8px 16px;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
font-family: 'MiSans-Medium';
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
text-decoration: none;
|
|
}
|
|
.btn-primary {
|
|
background: var(--accent-blue);
|
|
color: white;
|
|
border: none;
|
|
box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
|
|
}
|
|
.btn-primary:hover {
|
|
background: #2563eb;
|
|
box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
|
|
}
|
|
.btn-secondary {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-primary);
|
|
}
|
|
.btn-secondary:hover {
|
|
border-color: var(--text-secondary);
|
|
}
|
|
|
|
/* Collapsible Panels */
|
|
.panel {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
margin-bottom: 20px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
|
}
|
|
.panel-header {
|
|
padding: 16px 20px;
|
|
background: rgba(255,255,255,0.02);
|
|
border-bottom: 1px solid var(--border-color);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
transition: background 0.2s;
|
|
}
|
|
.panel-header:hover {
|
|
background: rgba(255,255,255,0.04);
|
|
}
|
|
.panel-title {
|
|
font-family: 'MiSans-Bold';
|
|
font-size: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.panel-content {
|
|
padding: 20px;
|
|
display: block; /* Default open */
|
|
}
|
|
.panel.collapsed .panel-content {
|
|
display: none;
|
|
}
|
|
.panel.collapsed .panel-header {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* Timeline */
|
|
.timeline {
|
|
position: relative;
|
|
padding-left: 20px;
|
|
}
|
|
.timeline-step {
|
|
position: relative;
|
|
padding-bottom: 24px;
|
|
padding-left: 24px;
|
|
border-left: 2px solid var(--border-color);
|
|
}
|
|
.timeline-step:last-child {
|
|
border-left: 2px solid transparent;
|
|
}
|
|
.step-dot {
|
|
position: absolute;
|
|
left: -7px;
|
|
top: 0;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
background: var(--bg-dark);
|
|
border: 2px solid var(--text-secondary);
|
|
}
|
|
.step-dot.completed { border-color: var(--accent-green); background: var(--accent-green); box-shadow: 0 0 8px rgba(16, 185, 129, 0.4); }
|
|
.step-dot.failed { border-color: var(--accent-red); background: var(--accent-red); box-shadow: 0 0 8px rgba(239, 68, 68, 0.4); }
|
|
.step-dot.active { border-color: var(--accent-blue); background: var(--bg-dark); box-shadow: 0 0 8px rgba(59, 130, 246, 0.4); animation: pulse 1.5s infinite; }
|
|
|
|
@keyframes pulse {
|
|
0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
|
|
70% { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0); }
|
|
100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
|
|
}
|
|
|
|
.step-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 4px;
|
|
line-height: 1;
|
|
}
|
|
.step-title { font-family: 'MiSans-Bold'; font-size: 14px; }
|
|
.step-time { font-size: 12px; color: var(--text-secondary); }
|
|
.step-details { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
|
|
|
|
/* Attack Plan */
|
|
.plan-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
}
|
|
.plan-item {
|
|
background: rgba(0,0,0,0.2);
|
|
padding: 12px;
|
|
border-radius: 6px;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
.plan-label {
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 6px;
|
|
}
|
|
.plan-text {
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
}
|
|
.code-snippet {
|
|
font-family: 'Consolas', monospace;
|
|
background: #0d1117;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
color: #ff7b72;
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* Evidence */
|
|
.evidence-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
.evidence-file {
|
|
background: var(--bg-card-hover);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
padding: 16px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.evidence-file:hover {
|
|
border-color: var(--accent-blue);
|
|
background: rgba(59, 130, 246, 0.05);
|
|
}
|
|
.file-icon {
|
|
font-size: 24px;
|
|
color: var(--text-secondary);
|
|
}
|
|
.file-name {
|
|
font-size: 12px;
|
|
color: var(--text-primary);
|
|
word-break: break-all;
|
|
}
|
|
|
|
/* Logs */
|
|
.log-viewer {
|
|
background: #0d1117;
|
|
border-radius: 6px;
|
|
border: 1px solid var(--border-color);
|
|
padding: 16px;
|
|
font-family: 'Consolas', monospace;
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
color: #c9d1d9;
|
|
height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
.log-line { display: flex; gap: 12px; }
|
|
.log-time { color: #8b949e; min-width: 140px; }
|
|
.log-level { min-width: 60px; font-weight: bold; }
|
|
.level-info { color: #58a6ff; }
|
|
.level-error { color: #ff7b72; }
|
|
.level-warn { color: #d29922; }
|
|
|
|
/* JSON Panel */
|
|
.json-box {
|
|
background: #0d1117;
|
|
padding: 16px;
|
|
border-radius: 6px;
|
|
color: #a5d6ff;
|
|
font-family: 'Consolas', monospace;
|
|
font-size: 12px;
|
|
white-space: pre-wrap;
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
.json-key { color: #7ee787; }
|
|
.json-string { color: #a5d6ff; }
|
|
.json-number { color: #79c0ff; }
|
|
|
|
/* Scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: var(--bg-dark);
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #30363d;
|
|
border-radius: 4px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #565d66;
|
|
}
|
|
|
|
/* Tags */
|
|
.tag {
|
|
display: inline-block;
|
|
padding: 2px 8px;
|
|
border-radius: 12px;
|
|
font-size: 11px;
|
|
margin-right: 6px;
|
|
border: 1px solid;
|
|
}
|
|
.tag-vuln { color: #ff7b72; border-color: rgba(255, 123, 114, 0.4); background: rgba(255, 123, 114, 0.1); }
|
|
.tag-tech { color: #79c0ff; border-color: rgba(121, 192, 255, 0.4); background: rgba(121, 192, 255, 0.1); }
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="grid-bg"></div>
|
|
|
|
<!-- Sticky Hero -->
|
|
<header class="hero">
|
|
<div class="hero-header">
|
|
<div class="hero-title">
|
|
<h1>Authorized Lab Dashboard</h1>
|
|
<p>Real-time Empirical Security Analysis & Vulnerability Reproduction Environment</p>
|
|
</div>
|
|
<div class="hero-controls">
|
|
<div class="auto-refresh">
|
|
<span>Auto-Refresh</span>
|
|
<label class="switch">
|
|
<input type="checkbox" checked>
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<button class="refresh-btn">
|
|
<i class="ri-refresh-line"></i>
|
|
Sync Now
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="metrics-row">
|
|
<div class="metric-card metric-total">
|
|
<span class="metric-label">Total Runs</span>
|
|
<span class="metric-value">1,248</span>
|
|
<span class="metric-trend trend-up"><i class="ri-arrow-up-line"></i> 12% this week</span>
|
|
</div>
|
|
<div class="metric-card metric-success">
|
|
<span class="metric-label">Reproduction Success</span>
|
|
<span class="metric-value">856</span>
|
|
<span class="metric-trend trend-up"><i class="ri-arrow-up-line"></i> 98.2% Accuracy</span>
|
|
</div>
|
|
<div class="metric-card metric-blocked">
|
|
<span class="metric-label">Blocked / Failed</span>
|
|
<span class="metric-value">42</span>
|
|
<span class="metric-trend trend-down"><i class="ri-alert-line"></i> Env Issues</span>
|
|
</div>
|
|
<div class="metric-card metric-progress">
|
|
<span class="metric-label">Active Analysis</span>
|
|
<span class="metric-value">18</span>
|
|
<span class="metric-trend trend-up"><i class="ri-time-line"></i> 4 Queued</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="main-container">
|
|
<!-- Sidebar -->
|
|
<aside class="sidebar">
|
|
<!-- Filters -->
|
|
<div class="filter-group">
|
|
<div class="section-header">
|
|
<span>Filters</span>
|
|
<i class="ri-filter-3-line"></i>
|
|
</div>
|
|
<div class="search-box">
|
|
<i class="ri-search-line"></i>
|
|
<input type="text" placeholder="Search ID, CVE, System...">
|
|
</div>
|
|
<div class="filter-select">
|
|
<span>Status: All</span>
|
|
<i class="ri-arrow-down-s-line"></i>
|
|
</div>
|
|
<div class="filter-select">
|
|
<span>Profile: Web Logic</span>
|
|
<i class="ri-arrow-down-s-line"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Systems Overview -->
|
|
<div>
|
|
<div class="section-header">
|
|
<span>System Coverage</span>
|
|
<i class="ri-dashboard-line"></i>
|
|
</div>
|
|
<div class="system-stats">
|
|
<div class="stat-bar">
|
|
<div class="stat-label">
|
|
<span>Environment Health</span>
|
|
<span style="color:var(--accent-green)">98%</span>
|
|
</div>
|
|
<div class="progress-bg">
|
|
<div class="progress-fill" style="width: 98%; background: var(--accent-green);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-bar">
|
|
<div class="stat-label">
|
|
<span>Browser Evidence</span>
|
|
<span style="color:var(--accent-blue)">72%</span>
|
|
</div>
|
|
<div class="progress-bg">
|
|
<div class="progress-fill" style="width: 72%; background: var(--accent-blue);"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Failures -->
|
|
<div>
|
|
<div class="section-header">
|
|
<span>Attention Required</span>
|
|
<i class="ri-error-warning-line"></i>
|
|
</div>
|
|
<div class="run-card" style="border-left: 3px solid var(--accent-red);">
|
|
<div class="run-header">
|
|
<span class="run-id">RUN-2023-902</span>
|
|
<span class="run-status status-blocked">BLOCKED</span>
|
|
</div>
|
|
<div class="run-desc">Container orchestration timeout during initialization.</div>
|
|
<div class="run-meta">
|
|
<span><i class="ri-time-line"></i> 10m ago</span>
|
|
<span><i class="ri-server-line"></i> k8s-cluster-04</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Run Queue -->
|
|
<div style="flex: 1; overflow: hidden; display: flex; flex-direction: column;">
|
|
<div class="section-header">
|
|
<span>Active Queue</span>
|
|
<i class="ri-list-check"></i>
|
|
</div>
|
|
<div style="overflow-y: auto; padding-right: 4px;">
|
|
<div class="run-card active">
|
|
<div class="run-header">
|
|
<span class="run-id">RUN-2023-1045</span>
|
|
<span class="run-status status-running">IN PROGRESS</span>
|
|
</div>
|
|
<div class="run-desc">CVE-2023-22515: Confluence Broken Access Control reproduction.</div>
|
|
<div class="run-meta">
|
|
<span><i class="ri-time-line"></i> 2m 14s</span>
|
|
<span><i class="ri-cpu-line"></i> Step 4/7</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="run-card">
|
|
<div class="run-header">
|
|
<span class="run-id">RUN-2023-1044</span>
|
|
<span class="run-status status-success">SUCCESS</span>
|
|
</div>
|
|
<div class="run-desc">Jenkins CLI arbitrary file read validation complete.</div>
|
|
<div class="run-meta">
|
|
<span><i class="ri-check-double-line"></i> 15m ago</span>
|
|
<span><i class="ri-file-list-3-line"></i> Verified</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="run-card">
|
|
<div class="run-header">
|
|
<span class="run-id">RUN-2023-1043</span>
|
|
<span class="run-status status-manual">TRIAGE</span>
|
|
</div>
|
|
<div class="run-desc">Struts2 RCE requires manual payload adjustment.</div>
|
|
<div class="run-meta">
|
|
<span><i class="ri-user-voice-line"></i> 45m ago</span>
|
|
<span><i class="ri-flag-line"></i> Flagged</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Right Detail Workspace -->
|
|
<main class="workspace">
|
|
|
|
<div class="detail-hero">
|
|
<div>
|
|
<div class="detail-title">
|
|
<h2>
|
|
RUN-2023-1045
|
|
<span class="run-status status-running" style="font-size: 14px; padding: 4px 10px;">Analysis In Progress</span>
|
|
</h2>
|
|
</div>
|
|
<div class="detail-meta">
|
|
<span><i class="ri-bug-line"></i> CVE-2023-22515</span>
|
|
<span><i class="ri-shield-cross-line"></i> Severity: Critical (9.8)</span>
|
|
<span><i class="ri-map-pin-user-line"></i> Agent: node-alpha-01</span>
|
|
</div>
|
|
</div>
|
|
<div class="detail-actions">
|
|
<a href="#" class="btn btn-secondary"><i class="ri-download-line"></i> Logs</a>
|
|
<a href="#" class="btn btn-primary"><i class="ri-file-chart-line"></i> Generate Report</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Panel 1: Progress Timeline -->
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<span class="panel-title"><i class="ri-git-commit-line"></i> Execution Timeline</span>
|
|
<i class="ri-arrow-up-s-line"></i>
|
|
</div>
|
|
<div class="panel-content">
|
|
<div class="timeline">
|
|
<div class="timeline-step">
|
|
<div class="step-dot completed"></div>
|
|
<div class="step-header">
|
|
<span class="step-title">Environment Provisioning</span>
|
|
<span class="step-time">10:42:05</span>
|
|
</div>
|
|
<div class="step-details">Docker container `atlassian/confluence-server:8.0.0` started successfully on port 8090.</div>
|
|
</div>
|
|
<div class="timeline-step">
|
|
<div class="step-dot completed"></div>
|
|
<div class="step-header">
|
|
<span class="step-title">Network Reachability Check</span>
|
|
<span class="step-time">10:42:35</span>
|
|
</div>
|
|
<div class="step-details">Target responding to HTTP GET / with 200 OK. Latency 12ms.</div>
|
|
</div>
|
|
<div class="timeline-step">
|
|
<div class="step-dot completed"></div>
|
|
<div class="step-header">
|
|
<span class="step-title">Vulnerability Identification</span>
|
|
<span class="step-time">10:42:38</span>
|
|
</div>
|
|
<div class="step-details">Detected version 8.0.0 match. Initial check for /server-info.action accessible.</div>
|
|
</div>
|
|
<div class="timeline-step">
|
|
<div class="step-dot active"></div>
|
|
<div class="step-header">
|
|
<span class="step-title">Exploit Execution (Stage 1)</span>
|
|
<span class="step-time">Running...</span>
|
|
</div>
|
|
<div class="step-details">Sending modified XWork action request to bypass authentication middleware...</div>
|
|
</div>
|
|
<div class="timeline-step">
|
|
<div class="step-dot"></div>
|
|
<div class="step-header">
|
|
<span class="step-title">Admin Account Creation</span>
|
|
<span class="step-time">Pending</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Panel 2: Attack Plan -->
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<span class="panel-title"><i class="ri-sword-line"></i> Attack Plan & Reasoning</span>
|
|
<i class="ri-arrow-up-s-line"></i>
|
|
</div>
|
|
<div class="panel-content">
|
|
<div class="plan-grid">
|
|
<div class="plan-item">
|
|
<div class="plan-label">Strategy</div>
|
|
<div class="plan-text">
|
|
The attack leverages an improperly handled parameter in the XWork action configuration. By manipulating the <span class="code-snippet">bootstrapStatusProvider.applicationConfig.setupComplete</span> parameter, we can trick the application into thinking setup is incomplete.
|
|
</div>
|
|
</div>
|
|
<div class="plan-item">
|
|
<div class="plan-label">Success Criteria</div>
|
|
<div class="plan-text">
|
|
1. HTTP 200 Response on payload delivery.<br>
|
|
2. Access to <span class="code-snippet">/setup/setupadministrator-start.action</span> without auth.<br>
|
|
3. Successful creation of user 'unauthorized_admin'.
|
|
</div>
|
|
</div>
|
|
<div class="plan-item" style="grid-column: 1 / -1;">
|
|
<div class="plan-label">Payload Structure</div>
|
|
<div class="plan-text">
|
|
<span class="code-snippet">GET /server-info.action?bootstrapStatusProvider.applicationConfig.setupComplete=false</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Panel 3: Live Logs -->
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<span class="panel-title"><i class="ri-terminal-box-line"></i> Live Log Viewer</span>
|
|
<i class="ri-arrow-up-s-line"></i>
|
|
</div>
|
|
<div class="panel-content" style="padding: 0;">
|
|
<div class="log-viewer" style="border:none; border-radius: 0;">
|
|
<div class="log-line">
|
|
<span class="log-time">2023-10-27 10:42:05</span>
|
|
<span class="log-level level-info">[INFO]</span>
|
|
<span>Initializing experiment controller...</span>
|
|
</div>
|
|
<div class="log-line">
|
|
<span class="log-time">2023-10-27 10:42:12</span>
|
|
<span class="log-level level-info">[INFO]</span>
|
|
<span>Pulling image atlassian/confluence-server:8.0.0</span>
|
|
</div>
|
|
<div class="log-line">
|
|
<span class="log-time">2023-10-27 10:42:35</span>
|
|
<span class="log-level level-info">[INFO]</span>
|
|
<span>Container started. ID: a1b2c3d4e5f6</span>
|
|
</div>
|
|
<div class="log-line">
|
|
<span class="log-time">2023-10-27 10:42:40</span>
|
|
<span class="log-level level-warn">[WARN]</span>
|
|
<span>Response delay detected (1500ms). Retrying health check.</span>
|
|
</div>
|
|
<div class="log-line">
|
|
<span class="log-time">2023-10-27 10:42:42</span>
|
|
<span class="log-level level-info">[INFO]</span>
|
|
<span>Target is healthy. Starting exploit chain.</span>
|
|
</div>
|
|
<div class="log-line">
|
|
<span class="log-time">2023-10-27 10:42:45</span>
|
|
<span class="log-level level-info">[INFO]</span>
|
|
<span>Sending Stage 1 Payload: GET /server-info.action...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Panel 4: Evidence Explorer -->
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<span class="panel-title"><i class="ri-folder-open-line"></i> Evidence Explorer</span>
|
|
<i class="ri-arrow-up-s-line"></i>
|
|
</div>
|
|
<div class="panel-content">
|
|
<div class="evidence-grid">
|
|
<div class="evidence-file">
|
|
<i class="ri-file-text-line file-icon"></i>
|
|
<span class="file-name">full_report.pdf</span>
|
|
</div>
|
|
<div class="evidence-file">
|
|
<i class="ri-image-line file-icon"></i>
|
|
<span class="file-name">screenshot_01.png</span>
|
|
</div>
|
|
<div class="evidence-file">
|
|
<i class="ri-code-s-slash-line file-icon"></i>
|
|
<span class="file-name">http_dump.har</span>
|
|
</div>
|
|
<div class="evidence-file">
|
|
<i class="ri-file-list-2-line file-icon"></i>
|
|
<span class="file-name">docker-compose.yml</span>
|
|
</div>
|
|
<div class="evidence-file">
|
|
<i class="ri-database-2-line file-icon"></i>
|
|
<span class="file-name">db_snapshot.sql</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Panel 5: Raw JSON -->
|
|
<div class="panel collapsed">
|
|
<div class="panel-header">
|
|
<span class="panel-title"><i class="ri-braces-line"></i> Raw Data Panels</span>
|
|
<i class="ri-arrow-down-s-line"></i>
|
|
</div>
|
|
<div class="panel-content">
|
|
<div class="json-box">
|
|
<span class="json-key">"run_config"</span>: {
|
|
<span class="json-key">"target"</span>: <span class="json-string">"192.168.1.105"</span>,
|
|
<span class="json-key">"port"</span>: <span class="json-number">8090</span>,
|
|
<span class="json-key">"exploit_module"</span>: <span class="json-string">"exploit/multi/http/confluence_auth_bypass"</span>,
|
|
<span class="json-key">"parameters"</span>: {
|
|
<span class="json-key">"RHOSTS"</span>: <span class="json-string">"192.168.1.105"</span>,
|
|
<span class="json-key">"RPORT"</span>: <span class="json-number">8090</span>
|
|
}
|
|
}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Panel 6: Sources -->
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<span class="panel-title"><i class="ri-links-line"></i> Sources & Fix Topics</span>
|
|
<i class="ri-arrow-up-s-line"></i>
|
|
</div>
|
|
<div class="panel-content">
|
|
<div style="margin-bottom: 12px;">
|
|
<span class="tag tag-vuln">Broken Access Control</span>
|
|
<span class="tag tag-vuln">Privilege Escalation</span>
|
|
<span class="tag tag-tech">Java</span>
|
|
<span class="tag tag-tech">Struts2</span>
|
|
</div>
|
|
<div style="font-size: 13px; color: var(--text-secondary);">
|
|
<p style="margin-bottom: 4px;"><i class="ri-external-link-line"></i> Official Advisory: <a href="#" style="color: var(--accent-blue);">Atlassian Security Advisory 2023-10-04</a></p>
|
|
<p><i class="ri-external-link-line"></i> NVD Entry: <a href="#" style="color: var(--accent-blue);">CVE-2023-22515</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
// Simple script to toggle collapse/expand
|
|
document.querySelectorAll('.panel-header').forEach(header => {
|
|
header.addEventListener('click', () => {
|
|
const panel = header.parentElement;
|
|
panel.classList.toggle('collapsed');
|
|
const icon = header.querySelector('.ri-arrow-up-s-line, .ri-arrow-down-s-line');
|
|
if (panel.classList.contains('collapsed')) {
|
|
icon.classList.remove('ri-arrow-up-s-line');
|
|
icon.classList.add('ri-arrow-down-s-line');
|
|
} else {
|
|
icon.classList.remove('ri-arrow-down-s-line');
|
|
icon.classList.add('ri-arrow-up-s-line');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |