298 lines
11 KiB
PHP
298 lines
11 KiB
PHP
<?php
|
|
// Mock Data
|
|
$gaps = [
|
|
[
|
|
'id' => 'GAP-001',
|
|
'regulation' => 'NIS2',
|
|
'description' => 'Multi-factor authentication (MFA) is not enforced for all administrative accounts.',
|
|
'severity' => 'High',
|
|
'recommendation' => 'Enable MFA for all privileged users immediately.',
|
|
'status' => 'Open'
|
|
],
|
|
[
|
|
'id' => 'GAP-002',
|
|
'regulation' => 'DORA',
|
|
'description' => 'The disaster recovery plan has not been tested in the last 12 months.',
|
|
'severity' => 'High',
|
|
'recommendation' => 'Schedule and conduct a full disaster recovery test.',
|
|
'status' => 'Open'
|
|
],
|
|
[
|
|
'id' => 'GAP-003',
|
|
'regulation' => 'ISO27001',
|
|
'description' => 'Vulnerability scanning is not performed on a regular, automated basis.',
|
|
'severity' => 'Medium',
|
|
'recommendation' => 'Implement a weekly automated vulnerability scanning solution.',
|
|
'status' => 'In Progress'
|
|
],
|
|
[
|
|
'id' => 'GAP-004',
|
|
'regulation' => 'NIS2',
|
|
'description' => 'Employee security awareness training records for the current year are incomplete.',
|
|
'severity' => 'Low',
|
|
'recommendation' => 'Ensure all employees complete the annual security training and track completion.',
|
|
'status' => 'Open'
|
|
],
|
|
[
|
|
'id' => 'GAP-005',
|
|
'regulation' => 'DORA',
|
|
'description' => 'The firewall rule set has not been reviewed in over 90 days.',
|
|
'severity' => 'Medium',
|
|
'recommendation' => 'Perform a quarterly review of all firewall rules.',
|
|
'status' => 'Resolved'
|
|
]
|
|
];
|
|
|
|
// Mock compliance data for donut charts
|
|
$compliance_data = [
|
|
'NIS2' => 85,
|
|
'DORA' => 60,
|
|
'ISO27001' => 95
|
|
];
|
|
|
|
function get_severity_badge($severity) {
|
|
switch (strtolower($severity)) {
|
|
case 'high':
|
|
return 'bg-danger';
|
|
case 'medium':
|
|
return 'bg-warning text-dark';
|
|
case 'low':
|
|
return 'bg-info text-dark';
|
|
default:
|
|
return 'bg-secondary';
|
|
}
|
|
}
|
|
|
|
function get_status_badge($status) {
|
|
switch (strtolower($status)) {
|
|
case 'open':
|
|
return 'bg-danger';
|
|
case 'in progress':
|
|
return 'bg-warning text-dark';
|
|
case 'resolved':
|
|
return 'bg-success';
|
|
default:
|
|
return 'bg-secondary';
|
|
}
|
|
}
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Vision Tool Demo - ComplianceOS</title>
|
|
<meta name="description" content="A demonstration of the Vision Tool, showing compliance levels and identified gaps for various regulations.">
|
|
|
|
<!-- Google Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
|
|
|
<!-- Chart.js -->
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
|
</head>
|
|
<body>
|
|
|
|
<nav class="navbar navbar-expand-lg navbar-light sticky-top">
|
|
<div class="container">
|
|
<a class="navbar-brand fw-bold" href="/"><i class="bi bi-shield-check"></i> ComplianceOS</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav ms-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/">Frameworks</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="vision_demo.php">Vision Demo</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Dashboard</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="pricing.php">Pricing</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="contact.php">Contact</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="login.php">Login</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="register.php">Register</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<header class="hero text-center">
|
|
<div class="container">
|
|
<h1 class="display-4 fw-bold">Vision Tool Demo</h1>
|
|
<p class="lead">An overview of your organization's compliance posture across key regulations.</p>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container my-5">
|
|
<!-- Compliance Donuts -->
|
|
<div class="row text-center mb-5">
|
|
<h2 class="mb-4">Compliance by Regulation</h2>
|
|
<div class="col-md-4">
|
|
<div class="card h-100">
|
|
<div class="card-body">
|
|
<h3 class="card-title">NIS2</h3>
|
|
<canvas id="nis2Chart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card h-100">
|
|
<div class="card-body">
|
|
<h3 class="card-title">DORA</h3>
|
|
<canvas id="doraChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card h-100">
|
|
<div class="card-body">
|
|
<h3 class="card-title">ISO 27001</h3>
|
|
<canvas id="isoChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Gaps Section -->
|
|
<div class="mb-5">
|
|
<h2 class="mb-4 text-center">Identified Gaps by Regulation</h2>
|
|
<?php
|
|
$gaps_by_regulation = [];
|
|
foreach ($gaps as $gap) {
|
|
$gaps_by_regulation[$gap['regulation']][] = $gap;
|
|
}
|
|
$regulations = ['NIS2', 'DORA', 'ISO27001'];
|
|
|
|
foreach ($regulations as $regulation):
|
|
if (!isset($gaps_by_regulation[$regulation])) continue;
|
|
?>
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h3 class="h4 mb-0"><?php echo htmlspecialchars($regulation); ?> Gaps</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th scope="col">ID</th>
|
|
<th scope="col">Description</th>
|
|
<th scope="col">Severity</th>
|
|
<th scope="col">Status</th>
|
|
<th scope="col">Recommendation</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php foreach ($gaps_by_regulation[$regulation] as $gap): ?>
|
|
<tr>
|
|
<th scope="row"><?php echo htmlspecialchars($gap['id']); ?></th>
|
|
<td><?php echo htmlspecialchars($gap['description']); ?></td>
|
|
<td><span class="badge <?php echo get_severity_badge($gap['severity']); ?>"><?php echo htmlspecialchars($gap['severity']); ?></span></td>
|
|
<td><span class="badge <?php echo get_status_badge($gap['status']); ?>"><?php echo htmlspecialchars($gap['status']); ?></span></td>
|
|
<td><?php echo htmlspecialchars($gap['recommendation']); ?></td>
|
|
</tr>
|
|
<?php endforeach; ?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="footer mt-auto py-3">
|
|
<div class="container text-center">
|
|
<span class="text-muted">© <?php echo date("Y"); ?> ComplianceOS. All Rights Reserved.</span>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Bootstrap JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
<!-- Custom JS -->
|
|
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
const complianceData = <?php echo json_encode($compliance_data); ?>;
|
|
|
|
const createDonutChart = (canvasId, label, percentage) => {
|
|
const ctx = document.getElementById(canvasId).getContext('2d');
|
|
const data = {
|
|
labels: ['Compliant', 'Non-Compliant'],
|
|
datasets: [{
|
|
data: [percentage, 100 - percentage],
|
|
backgroundColor: [
|
|
'rgba(25, 135, 84, 0.7)', // Green for compliant
|
|
'rgba(220, 53, 69, 0.7)' // Red for non-compliant
|
|
],
|
|
borderColor: [
|
|
'rgba(25, 135, 84, 1)',
|
|
'rgba(220, 53, 69, 1)'
|
|
],
|
|
borderWidth: 1
|
|
}]
|
|
};
|
|
const options = {
|
|
responsive: true,
|
|
cutout: '70%',
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
},
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function(context) {
|
|
return context.label + ': ' + context.raw + '%';
|
|
}
|
|
}
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: percentage + '%',
|
|
position: 'top',
|
|
font: {
|
|
size: 24,
|
|
weight: 'bold'
|
|
},
|
|
padding: {
|
|
top: 30,
|
|
bottom: -20
|
|
}
|
|
}
|
|
}
|
|
};
|
|
new Chart(ctx, {
|
|
type: 'doughnut',
|
|
data: data,
|
|
options: options
|
|
});
|
|
};
|
|
|
|
createDonutChart('nis2Chart', 'NIS2', complianceData.NIS2);
|
|
createDonutChart('doraChart', 'DORA', complianceData.DORA);
|
|
createDonutChart('isoChart', 'ISO 27001', complianceData.ISO27001);
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|