diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..34a2988 --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,145 @@ + +:root { + --primary-color: #3498db; + --secondary-color: #f1c40f; + --background-color: #f9f9f9; + --surface-color: #ffffff; + --text-color: #333333; + --light-gray-color: #e9ecef; + --border-radius: 0.5rem; +} + +body { + font-family: 'Open Sans', sans-serif; + font-size: 14px; + background-color: var(--background-color); + color: var(--text-color); +} + +.wrapper { + display: flex; + width: 100%; + align-items: stretch; +} + +#sidebar { + min-width: 250px; + max-width: 250px; + background: var(--surface-color); + transition: all 0.3s; + box-shadow: 0 2px 5px rgba(0,0,0,0.1); +} + +#sidebar.active { + margin-left: -250px; +} + +#sidebar .sidebar-header { + padding: 20px; + background: var(--surface-color); + border-bottom: 1px solid var(--light-gray-color); + text-align: center; +} + +#sidebar .sidebar-header h3 { + color: var(--primary-color); + font-weight: 700; +} + +#sidebar ul.components { + padding: 20px 0; +} + +#sidebar ul p { + color: var(--text-color); + padding: 10px; +} + +#sidebar ul li a { + padding: 10px 20px; + font-size: 1.1em; + display: block; + color: var(--text-color); + transition: all 0.2s; +} + +#sidebar ul li a:hover { + color: var(--primary-color); + background: var(--background-color); + text-decoration: none; +} + +#sidebar ul li.active > a, a[aria-expanded="true"] { + color: var(--primary-color); + background: var(--background-color); + font-weight: 600; +} + +#content { + width: 100%; + padding: 20px; + min-height: 100vh; + transition: all 0.3s; +} + +.navbar { + background-color: var(--surface-color); + box-shadow: 0 2px 5px rgba(0,0,0,0.1); +} + +.navbar-brand { + color: var(--primary-color) !important; + font-weight: 700; +} + +.card { + border-radius: var(--border-radius); + border: none; + box-shadow: 0 2px 10px rgba(0,0,0,0.05); +} + +.card-header { + background-color: var(--surface-color); + border-bottom: 1px solid var(--light-gray-color); + font-weight: 600; +} + +.btn-primary { + background-color: var(--primary-color); + border-color: var(--primary-color); +} + +.btn-primary:hover { + opacity: 0.9; + background-color: var(--primary-color); + border-color: var(--primary-color); +} + +.badge-critical { + background-color: #e74c3c; + color: white; +} +.badge-high { + background-color: #e67e22; + color: white; +} +.badge-medium { + background-color: var(--secondary-color); + color: var(--text-color); +} +.badge-low { + background-color: #2ecc71; + color: white; +} + +.stat-card .card-body { + display: flex; + align-items: center; + justify-content: space-between; +} + +.stat-card i { + font-size: 2.5rem; + color: var(--primary-color); + opacity: 0.7; +} diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..6730e34 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,39 @@ +document.addEventListener("DOMContentLoaded", function() { + const sidebarToggler = document.getElementById('sidebarCollapse'); + const sidebar = document.getElementById('sidebar'); + + if (sidebarToggler && sidebar) { + sidebarToggler.addEventListener('click', function () { + sidebar.classList.toggle('active'); + }); + } + + // Placeholder for dashboard chart + const ctx = document.getElementById('vulnerabilityChart'); + if (ctx) { + new Chart(ctx, { + type: 'doughnut', + data: { + labels: ['Critical', 'High', 'Medium', 'Low'], + datasets: [{ + label: 'Vulnerabilities', + data: [12, 19, 3, 5], + backgroundColor: [ + '#e74c3c', + '#e67e22', + '#f1c40f', + '#2ecc71' + ], + borderWidth: 1 + }] + }, + options: { + responsive: true, + maintainAspectRatio: false, + legend: { + position: 'bottom', + }, + } + }); + } +}); diff --git a/index.php b/index.php index 7205f3d..d6e86a9 100644 --- a/index.php +++ b/index.php @@ -2,149 +2,198 @@ declare(strict_types=1); @ini_set('display_errors', '1'); @error_reporting(E_ALL); -@date_default_timezone_set('UTC'); - -$phpVersion = PHP_VERSION; -$now = date('Y-m-d H:i:s'); +// Read project preview data from environment +$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Cloud Vulnerability Scanner'; +$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? ''; ?> - - - New Style - - - - - - - - - - - - - - - - - - - + + + Vulnerability Scanner Dashboard + + + + + + + + + + + + + + + + + + + + + -
-
-

Analyzing your requirements and generating your website…

-
- Loading… -
-

AI is collecting your requirements and applying the first changes.

-

This page will update automatically as the plan is implemented.

-

Runtime: PHP — UTC

+ +
+ + + + +
+ + +

Dashboard

+

Welcome back! Here's a summary of your security posture.

+ +
+
+
+
+
+
Vulnerabilities
+

39

+
+ +
+
+
+
+
+
+
+
Misconfigurations
+

15

+
+ +
+
+
+
+
+
+
+
Scans Completed
+

128

+
+ +
+
+
+
+
+
+
+
Active Projects
+

4

+
+ +
+
+
+
+ +
+
+
+
Vulnerability Severity
+
+ +
+
+
+
+
+
Recent Scans
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Scan NameStatusDate
Production ClusterCompleted2025-11-21
Staging Web AppCompleted2025-11-20
Billing APIIn Progress2025-11-22
Legacy DBFailed2025-11-19
+
+
+
+
+
-
- + + + + + + + + + - + \ No newline at end of file