661 أسطر
23 KiB
HTML
661 أسطر
23 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SolidPoint OS - Security Dashboard</title>
|
|
<!-- Chart.js -->
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<!-- FontAwesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<style>
|
|
:root {
|
|
--bg-color: #0b0e14;
|
|
--card-bg: #141b24;
|
|
--card-hover: #1a232f;
|
|
--text-main: #e2e8f0;
|
|
--text-muted: #94a3b8;
|
|
--accent-primary: #3b82f6;
|
|
--accent-hover: #2563eb;
|
|
--pass-color: #3dcf8a;
|
|
--fail-color: #ff6b6b;
|
|
--high-color: #ffa94d;
|
|
--med-color: #fcd34d;
|
|
--info-color: #6b9fff;
|
|
--border-color: #1e293b;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--bg-color);
|
|
color: var(--text-main);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: 2rem;
|
|
}
|
|
|
|
header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 2rem;
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
header h1 {
|
|
font-size: 1.8rem;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
header h1 i { color: var(--accent-primary); }
|
|
|
|
/* Summary Cards */
|
|
.summary-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.summary-card {
|
|
background-color: var(--card-bg);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
padding: 1.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.summary-card .title {
|
|
color: var(--text-muted);
|
|
font-size: 0.85rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.summary-card .value {
|
|
font-size: 2.2rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.summary-card.pass .value { color: var(--pass-color); }
|
|
.summary-card.fail .value { color: var(--fail-color); }
|
|
|
|
/* Tabs */
|
|
.tabs {
|
|
display: flex;
|
|
gap: 1rem;
|
|
border-bottom: 1px solid var(--border-color);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.tab {
|
|
padding: 0.75rem 1.5rem;
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-muted);
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
border-bottom: 3px solid transparent;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.tab:hover { color: var(--text-main); }
|
|
.tab.active {
|
|
color: var(--accent-primary);
|
|
border-bottom-color: var(--accent-primary);
|
|
}
|
|
|
|
/* Domain View */
|
|
.domain-view { display: none; }
|
|
.domain-view.active { display: block; }
|
|
|
|
.no-data {
|
|
text-align: center;
|
|
padding: 4rem;
|
|
background-color: var(--card-bg);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Charts */
|
|
.charts-container {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.chart-card {
|
|
background-color: var(--card-bg);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
padding: 1.5rem;
|
|
height: 350px;
|
|
}
|
|
|
|
/* Table */
|
|
.table-container {
|
|
background-color: var(--card-bg);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
th, td {
|
|
padding: 1rem;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
th {
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
color: var(--text-muted);
|
|
font-weight: 600;
|
|
font-size: 0.85rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
tr.main-row { cursor: pointer; transition: background-color 0.2s; }
|
|
tr.main-row:hover { background-color: var(--card-hover); }
|
|
tr.main-row.expanded { background-color: rgba(59, 130, 246, 0.05); border-left: 3px solid var(--accent-primary); }
|
|
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 0.25rem 0.6rem;
|
|
border-radius: 4px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.badge.pass { background-color: rgba(61, 207, 138, 0.15); color: var(--pass-color); }
|
|
.badge.fail { background-color: rgba(255, 107, 107, 0.15); color: var(--fail-color); }
|
|
.badge.pending { background-color: rgba(107, 159, 255, 0.15); color: var(--info-color); }
|
|
.badge.neutral { background-color: rgba(148, 163, 184, 0.15); color: var(--text-muted); }
|
|
|
|
.chevron {
|
|
transition: transform 0.3s;
|
|
color: var(--text-muted);
|
|
}
|
|
tr.expanded .chevron { transform: rotate(180deg); }
|
|
|
|
/* Accordion Details */
|
|
tr.details-row {
|
|
display: none;
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
}
|
|
tr.details-row.active { display: table-row; }
|
|
|
|
.details-content {
|
|
padding: 1.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.detail-group h4 {
|
|
color: var(--text-muted);
|
|
font-size: 0.85rem;
|
|
text-transform: uppercase;
|
|
margin-bottom: 0.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.detail-group h4 i { color: var(--accent-primary); }
|
|
|
|
.detail-box {
|
|
background-color: var(--bg-color);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
padding: 1rem;
|
|
font-family: 'Consolas', monospace;
|
|
font-size: 0.9rem;
|
|
white-space: pre-wrap;
|
|
color: var(--text-main);
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.mitigation-box {
|
|
background-color: rgba(255, 169, 77, 0.1);
|
|
border-left: 4px solid var(--high-color);
|
|
padding: 1rem;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.mitigation-box h4 i { color: var(--high-color); }
|
|
|
|
.btn {
|
|
background-color: var(--accent-primary);
|
|
color: white;
|
|
border: none;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.btn:hover { background-color: var(--accent-hover); }
|
|
.btn:disabled { background-color: #334155; color: #94a3b8; cursor: not-allowed; }
|
|
|
|
/* Modal */
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0; left: 0; width: 100%; height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.85);
|
|
z-index: 1000;
|
|
justify-content: center;
|
|
align-items: center;
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
.modal.active { display: flex; }
|
|
|
|
.modal-content {
|
|
background-color: var(--card-bg);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
max-width: 95%;
|
|
max-height: 95%;
|
|
padding: 1rem;
|
|
position: relative;
|
|
}
|
|
|
|
.modal-close {
|
|
position: absolute;
|
|
top: 1rem; right: 1.5rem;
|
|
background: none; border: none;
|
|
color: var(--text-muted); font-size: 1.5rem; cursor: pointer;
|
|
}
|
|
.modal-close:hover { color: white; }
|
|
|
|
.modal-img {
|
|
max-width: 100%;
|
|
max-height: calc(95vh - 4rem);
|
|
object-fit: contain;
|
|
margin-top: 1rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
<header>
|
|
<h1><i class="fa-solid fa-shield-halved"></i> SolidPoint OS - Master Dashboard</h1>
|
|
<div class="badge neutral" id="genDate">Generated: N/A</div>
|
|
</header>
|
|
|
|
<!-- Summary Cards -->
|
|
<div class="summary-grid">
|
|
<div class="summary-card">
|
|
<div class="title">Total Tests Executed</div>
|
|
<div class="value" id="valTotal">0</div>
|
|
</div>
|
|
<div class="summary-card pass">
|
|
<div class="title">Total Defended / Passed</div>
|
|
<div class="value" id="valPass">0</div>
|
|
</div>
|
|
<div class="summary-card fail">
|
|
<div class="title">Vulnerabilities / Fails</div>
|
|
<div class="value" id="valFail">0</div>
|
|
</div>
|
|
<div class="summary-card" style="border-color: var(--info-color);">
|
|
<div class="title">QA UX Score Avg</div>
|
|
<div class="value" id="valScore" style="color: var(--info-color);">0</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tabs -->
|
|
<div class="tabs">
|
|
<button class="tab active" data-target="v2" onclick="switchTab('v2')"><i class="fa-solid fa-spider"></i> AI Red-Teaming (V2)</button>
|
|
<button class="tab" data-target="qa" onclick="switchTab('qa')"><i class="fa-solid fa-vial-circle-check"></i> Functional QA (LLM)</button>
|
|
<button class="tab" data-target="v1" onclick="switchTab('v1')"><i class="fa-solid fa-shield"></i> V1 Baseline</button>
|
|
</div>
|
|
|
|
<!-- Domain Views -->
|
|
<div id="view-v2" class="domain-view active">
|
|
<div class="no-data" id="nodata-v2">No V2 data available.</div>
|
|
<div id="content-v2" style="display: none;">
|
|
<div class="charts-container">
|
|
<div class="chart-card"><canvas id="pie-v2"></canvas></div>
|
|
<div class="chart-card"><canvas id="bar-v2"></canvas></div>
|
|
</div>
|
|
<div class="table-container">
|
|
<table>
|
|
<thead><tr><th>Test ID</th><th>Title</th><th>Category</th><th>Status</th><th>Confidence</th><th></th></tr></thead>
|
|
<tbody id="tbody-v2"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="view-qa" class="domain-view">
|
|
<div class="no-data" id="nodata-qa">No QA data available.</div>
|
|
<div id="content-qa" style="display: none;">
|
|
<div class="charts-container">
|
|
<div class="chart-card"><canvas id="pie-qa"></canvas></div>
|
|
<div class="chart-card"><canvas id="bar-qa"></canvas></div>
|
|
</div>
|
|
<div class="table-container">
|
|
<table>
|
|
<thead><tr><th>Test ID</th><th>Title</th><th>Category</th><th>Status</th><th>Confidence</th><th></th></tr></thead>
|
|
<tbody id="tbody-qa"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="view-v1" class="domain-view">
|
|
<div class="no-data" id="nodata-v1">No V1 data available.</div>
|
|
<div id="content-v1" style="display: none;">
|
|
<div class="charts-container">
|
|
<div class="chart-card"><canvas id="pie-v1"></canvas></div>
|
|
<div class="chart-card"><canvas id="bar-v1"></canvas></div>
|
|
</div>
|
|
<div class="table-container">
|
|
<table>
|
|
<thead><tr><th>Test ID</th><th>Title</th><th>Category</th><th>Status</th><th>Confidence</th><th></th></tr></thead>
|
|
<tbody id="tbody-v1"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal" id="imgModal">
|
|
<div class="modal-content">
|
|
<button class="modal-close" onclick="closeModal()"><i class="fa-solid fa-times"></i></button>
|
|
<img id="modalImg" class="modal-img" src="" alt="Evidence Screenshot">
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Injected Data
|
|
const DATA = __INJECT_DATA_HERE__;
|
|
|
|
document.getElementById('genDate').innerText = 'Generated: ' + new Date().toLocaleString();
|
|
|
|
Chart.defaults.color = '#94a3b8';
|
|
Chart.defaults.font.family = 'Inter';
|
|
Chart.defaults.plugins.legend.position = 'bottom';
|
|
const charts = {};
|
|
|
|
function init() {
|
|
updateSummary();
|
|
renderDomain('v2', DATA.d1.v2_results);
|
|
renderDomain('qa', DATA.d2.results);
|
|
renderDomain('v1', DATA.d1.results);
|
|
}
|
|
|
|
function updateSummary() {
|
|
let total = 0, pass = 0, fail = 0;
|
|
|
|
const allTests = [...(DATA.d1.v2_results || []), ...(DATA.d2.results || []), ...(DATA.d1.results || [])];
|
|
|
|
allTests.forEach(item => {
|
|
total++;
|
|
// QA
|
|
if (item.passed === true) pass++;
|
|
else if (item.passed === false) fail++;
|
|
// V1/V2
|
|
else if (item.attack_success === false) pass++;
|
|
else if (item.attack_success === true) fail++;
|
|
});
|
|
|
|
document.getElementById('valTotal').innerText = total;
|
|
document.getElementById('valPass').innerText = pass;
|
|
document.getElementById('valFail').innerText = fail;
|
|
document.getElementById('valScore').innerText = DATA.d2.avg_ux_score || 'N/A';
|
|
}
|
|
|
|
function switchTab(domain) {
|
|
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
|
document.querySelector(`.tab[data-target="${domain}"]`).classList.add('active');
|
|
|
|
document.querySelectorAll('.domain-view').forEach(v => v.classList.remove('active'));
|
|
document.getElementById(`view-${domain}`).classList.add('active');
|
|
}
|
|
|
|
function toggleRow(id) {
|
|
const row = document.getElementById(`main-${id}`);
|
|
const details = document.getElementById(`details-${id}`);
|
|
row.classList.toggle('expanded');
|
|
details.classList.toggle('active');
|
|
}
|
|
|
|
function renderDomain(domain, data) {
|
|
const nodata = document.getElementById(`nodata-${domain}`);
|
|
const content = document.getElementById(`content-${domain}`);
|
|
const tbody = document.getElementById(`tbody-${domain}`);
|
|
|
|
if (!data || data.length === 0) {
|
|
nodata.style.display = 'block';
|
|
content.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
nodata.style.display = 'none';
|
|
content.style.display = 'block';
|
|
tbody.innerHTML = '';
|
|
|
|
const statusCounts = { 'PASS/DEFENDED': 0, 'FAIL/SUCCEEDED': 0, 'OTHER': 0 };
|
|
const catCounts = {};
|
|
|
|
data.forEach((item, idx) => {
|
|
const id = item.id || `UNKNOWN-${idx}`;
|
|
const title = item.title || 'N/A';
|
|
const cat = item.cat || 'N/A';
|
|
const conf = item.confidence ? (item.confidence * 100).toFixed(0) + '%' : '—';
|
|
|
|
// Determine Status
|
|
let status = 'UNKNOWN';
|
|
let badgeClass = 'neutral';
|
|
let isBad = false; // true if test failed or attack succeeded
|
|
|
|
if (domain === 'qa') {
|
|
if (item.passed) { status = 'PASS'; badgeClass = 'pass'; statusCounts['PASS/DEFENDED']++; }
|
|
else { status = 'FAIL'; badgeClass = 'fail'; isBad = true; statusCounts['FAIL/SUCCEEDED']++; }
|
|
} else {
|
|
if (item.attack_success === false) { status = 'DEFENDED'; badgeClass = 'pass'; statusCounts['PASS/DEFENDED']++; }
|
|
else if (item.attack_success === true) { status = 'SUCCEEDED'; badgeClass = 'fail'; isBad = true; statusCounts['FAIL/SUCCEEDED']++; }
|
|
else { status = 'INCONCLUSIVE'; statusCounts['OTHER']++; }
|
|
}
|
|
|
|
catCounts[cat] = (catCounts[cat] || 0) + 1;
|
|
|
|
const evidenceRaw = item.screenshot || item.screenshot_path || '';
|
|
let evidenceSrc = '';
|
|
if (evidenceRaw) {
|
|
const filename = evidenceRaw.split('\\').pop().split('/').pop();
|
|
if (domain === 'qa') {
|
|
evidenceSrc = `2_LLM_QA_Evaluation/evidence/screenshots/${filename}`;
|
|
} else {
|
|
evidenceSrc = `1_AI_RedTeaming/evidence_screenshots/${filename}`;
|
|
}
|
|
}
|
|
|
|
const evidenceBtn = evidenceSrc
|
|
? `<button class="btn" onclick="openModal('${evidenceSrc}'); event.stopPropagation();"><i class="fa-solid fa-image"></i> PoC</button>`
|
|
: ``;
|
|
|
|
// Main Row
|
|
const tr = document.createElement('tr');
|
|
tr.className = 'main-row';
|
|
tr.id = `main-${id}`;
|
|
tr.onclick = () => toggleRow(id);
|
|
tr.innerHTML = `
|
|
<td><strong>${id}</strong></td>
|
|
<td>${title}</td>
|
|
<td><code>${cat}</code></td>
|
|
<td><span class="badge ${badgeClass}">${status}</span></td>
|
|
<td>${conf}</td>
|
|
<td style="text-align:right;">
|
|
${evidenceBtn}
|
|
<i class="fa-solid fa-chevron-down chevron" style="margin-left:1rem;"></i>
|
|
</td>
|
|
`;
|
|
tbody.appendChild(tr);
|
|
|
|
// Details Row
|
|
const detailsTr = document.createElement('tr');
|
|
detailsTr.className = 'details-row';
|
|
detailsTr.id = `details-${id}`;
|
|
|
|
let mitigationHtml = '';
|
|
if (isBad && item.mitigation) {
|
|
mitigationHtml = `
|
|
<div class="mitigation-box">
|
|
<h4><i class="fa-solid fa-lightbulb"></i> Recommended Mitigation</h4>
|
|
<p>${item.mitigation}</p>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
let promptHtml = '';
|
|
const promptContent = item.prompt || item.payload || item.message || '';
|
|
if (promptContent) {
|
|
promptHtml = `
|
|
<div class="detail-group">
|
|
<h4><i class="fa-solid fa-terminal"></i> Prompt / Payload</h4>
|
|
<div class="detail-box">${promptContent.replace(/</g, '<').replace(/>/g, '>')}</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
let responseHtml = '';
|
|
if (item.response) {
|
|
responseHtml = `
|
|
<div class="detail-group">
|
|
<h4><i class="fa-solid fa-robot"></i> AI Response</h4>
|
|
<div class="detail-box">${item.response.replace(/</g, '<').replace(/>/g, '>')}</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
detailsTr.innerHTML = `
|
|
<td colspan="6">
|
|
<div class="details-content">
|
|
${mitigationHtml}
|
|
<div style="display: flex; gap: 2rem;">
|
|
<div style="flex:1;"><strong>Goal:</strong> ${item.goal || 'N/A'}</div>
|
|
<div style="flex:1;"><strong>Impact:</strong> ${item.impact || 'N/A'}</div>
|
|
</div>
|
|
${item.eval_reason ? `<div><strong>Evaluation Reason:</strong> ${item.eval_reason}</div>` : ''}
|
|
${promptHtml}
|
|
${responseHtml}
|
|
</div>
|
|
</td>
|
|
`;
|
|
tbody.appendChild(detailsTr);
|
|
});
|
|
|
|
// Render Charts
|
|
renderCharts(domain, statusCounts, catCounts);
|
|
}
|
|
|
|
function renderCharts(domain, statusCounts, catCounts) {
|
|
// Pie Chart
|
|
const pieCtx = document.getElementById(`pie-${domain}`).getContext('2d');
|
|
if (charts[`pie-${domain}`]) charts[`pie-${domain}`].destroy();
|
|
|
|
charts[`pie-${domain}`] = new Chart(pieCtx, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: ['Good (Pass/Defend)', 'Bad (Fail/Succeed)', 'Other'],
|
|
datasets: [{
|
|
data: [statusCounts['PASS/DEFENDED'], statusCounts['FAIL/SUCCEEDED'], statusCounts['OTHER']],
|
|
backgroundColor: ['#3dcf8a', '#ff6b6b', '#94a3b8'],
|
|
borderWidth: 0
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true, maintainAspectRatio: false,
|
|
plugins: { title: { display: true, text: 'Status Distribution', color: '#e2e8f0', font: {size: 16} } }
|
|
}
|
|
});
|
|
|
|
// Bar Chart
|
|
const barCtx = document.getElementById(`bar-${domain}`).getContext('2d');
|
|
if (charts[`bar-${domain}`]) charts[`bar-${domain}`].destroy();
|
|
|
|
const barLabels = Object.keys(catCounts);
|
|
const barData = barLabels.map(k => catCounts[k]);
|
|
|
|
charts[`bar-${domain}`] = new Chart(barCtx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: barLabels,
|
|
datasets: [{
|
|
label: 'Tests',
|
|
data: barData,
|
|
backgroundColor: '#3b82f6',
|
|
borderRadius: 4
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true, maintainAspectRatio: false,
|
|
plugins: {
|
|
title: { display: true, text: 'Categories', color: '#e2e8f0', font: {size: 16} },
|
|
legend: { display: false }
|
|
},
|
|
scales: {
|
|
y: { beginAtZero: true, grid: { color: '#1e293b' }, ticks: { precision: 0 } },
|
|
x: { grid: { display: false } }
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Modal
|
|
function openModal(src) {
|
|
document.getElementById('modalImg').src = src;
|
|
document.getElementById('imgModal').classList.add('active');
|
|
}
|
|
|
|
function closeModal() {
|
|
document.getElementById('imgModal').classList.remove('active');
|
|
setTimeout(() => document.getElementById('modalImg').src = '', 200);
|
|
}
|
|
document.getElementById('imgModal').addEventListener('click', (e) => { if (e.target.id === 'imgModal') closeModal(); });
|
|
document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeModal(); });
|
|
|
|
// Initialize
|
|
window.onload = init;
|
|
</script>
|
|
</body>
|
|
</html>
|