204 lines
10 KiB
PHP
204 lines
10 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<?php
|
|
$baseUrl = str_replace('\\', '/', dirname($_SERVER['SCRIPT_NAME']));
|
|
$baseUrl = str_replace('/public', '', $baseUrl);
|
|
if ($baseUrl === '/') $baseUrl = '';
|
|
$appName = $_ENV['APP_NAME'] ?? 'KSH SOAR';
|
|
?>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title><?= htmlspecialchars($appName) ?> - Wazuh Integration</title>
|
|
|
|
<!-- Favicon -->
|
|
<link rel="icon" type="image/png" href="<?= $baseUrl ?>/logo.png">
|
|
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
<!-- FontAwesome -->
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
|
|
<!-- jQuery (Required for DataTables) -->
|
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
|
|
|
<!-- DataTables with Tailwind CSS Integration -->
|
|
<link rel="stylesheet" href="https://cdn.datatables.net/2.0.8/css/dataTables.tailwindcss.css">
|
|
<script src="https://cdn.datatables.net/2.0.8/js/dataTables.js"></script>
|
|
<script src="https://cdn.datatables.net/2.0.8/js/dataTables.tailwindcss.js"></script>
|
|
|
|
<!-- SweetAlert2 -->
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
|
|
<!-- Toastify -->
|
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
|
|
|
|
<style>
|
|
/* Corporate Enterprise UI Styles */
|
|
body {
|
|
background-color: #f8fafc; /* slate-50 */
|
|
}
|
|
|
|
.corp-card {
|
|
background: #ffffff;
|
|
border: 1px solid #e2e8f0; /* slate-200 */
|
|
box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.05);
|
|
border-radius: 0.5rem;
|
|
transition: box-shadow 0.2s ease-in-out;
|
|
}
|
|
|
|
.corp-card:hover {
|
|
box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
|
|
}
|
|
|
|
.corp-btn-primary {
|
|
background-color: #0f172a; /* slate-900 */
|
|
color: #ffffff;
|
|
border: 1px solid #0f172a;
|
|
transition: all 0.2s;
|
|
}
|
|
.corp-btn-primary:hover {
|
|
background-color: #1e293b; /* slate-800 */
|
|
box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.2);
|
|
}
|
|
|
|
.corp-btn-danger {
|
|
background-color: #ef4444; /* red-500 */
|
|
color: #ffffff;
|
|
border: 1px solid #ef4444;
|
|
transition: all 0.2s;
|
|
}
|
|
.corp-btn-danger:hover {
|
|
background-color: #dc2626; /* red-600 */
|
|
box-shadow: 0 4px 6px -1px rgba(239, 68, 68, 0.3);
|
|
}
|
|
|
|
.sidebar-link {
|
|
transition: all 0.2s;
|
|
border-left: 4px solid transparent;
|
|
}
|
|
.sidebar-link:hover {
|
|
background-color: rgba(255,255,255,0.05);
|
|
color: #ffffff;
|
|
border-left: 4px solid rgba(255,255,255,0.2);
|
|
}
|
|
.sidebar-link.active {
|
|
background-color: rgba(59, 130, 246, 0.15); /* light blue bg */
|
|
color: #ffffff;
|
|
border-left: 4px solid #3b82f6; /* blue-500 border */
|
|
}
|
|
|
|
/* DataTables Custom Overrides */
|
|
div.dt-container { padding-top: 0.5rem; }
|
|
div.dt-search input {
|
|
border: 1px solid #cbd5e1;
|
|
border-radius: 0.375rem;
|
|
padding: 0.35rem 0.75rem;
|
|
outline: none;
|
|
font-size: 0.875rem;
|
|
}
|
|
div.dt-search input:focus {
|
|
border-color: #3b82f6;
|
|
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
|
|
}
|
|
div.dt-length select {
|
|
border: 1px solid #cbd5e1;
|
|
border-radius: 0.375rem;
|
|
padding: 0.25rem 1.5rem 0.25rem 0.5rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="flex h-screen overflow-hidden font-sans text-slate-800 antialiased">
|
|
|
|
<!-- Sidebar Overlay (Mobile) -->
|
|
<div id="sidebarOverlay" class="fixed inset-0 bg-slate-900/60 z-20 hidden lg:hidden transition-opacity" onclick="toggleSidebar()"></div>
|
|
|
|
<!-- Sidebar -->
|
|
<aside id="sidebar" class="w-64 bg-slate-900 h-full flex flex-col fixed lg:relative z-30 transition-transform duration-300 -translate-x-full lg:translate-x-0 border-r border-slate-800">
|
|
<div class="p-5 flex justify-between items-center border-b border-slate-800">
|
|
<div class="flex items-center">
|
|
<img src="<?= $baseUrl ?>/logo.png" alt="Logo" class="w-10 h-10 object-contain mr-3 bg-white rounded p-0.5">
|
|
<h1 class="text-lg font-bold text-white tracking-wide truncate" title="<?= htmlspecialchars($appName) ?>"><?= htmlspecialchars($appName) ?></h1>
|
|
</div>
|
|
<button class="lg:hidden text-slate-400 hover:text-white transition" onclick="toggleSidebar()">
|
|
<i class="fas fa-times text-xl"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider mt-2">
|
|
<?= __('MAIN NAVIGATION') ?>
|
|
</div>
|
|
|
|
<?php
|
|
$currentUri = $_SERVER['REQUEST_URI'];
|
|
// Normalize URI to ignore query params
|
|
$pathOnly = parse_url($currentUri, PHP_URL_PATH);
|
|
// If it's a sub-directory installation, remove base url
|
|
$relPath = str_replace($baseUrl, '', $pathOnly);
|
|
if ($relPath === '') $relPath = '/';
|
|
?>
|
|
<nav class="flex-1 px-3 space-y-1 overflow-y-auto pb-4 text-sm font-medium">
|
|
<a href="<?= $baseUrl ?>/" class="sidebar-link block px-3 py-2.5 rounded-r-md text-slate-300 <?= ($relPath === '/' || $relPath === '/index.php') ? 'active' : '' ?>"><i class="fas fa-tachometer-alt mr-3 w-5 text-center"></i> <?= __('Dashboard') ?></a>
|
|
<a href="<?= $baseUrl ?>/agents" class="sidebar-link block px-3 py-2.5 rounded-r-md text-slate-300 <?= (strpos($relPath, '/agents') === 0) ? 'active' : '' ?>"><i class="fas fa-server mr-3 w-5 text-center"></i> <?= __('Agents (Devices)') ?></a>
|
|
<a href="<?= $baseUrl ?>/sysmon" class="sidebar-link block px-3 py-2.5 rounded-r-md text-slate-300 <?= (strpos($relPath, '/sysmon') === 0) ? 'active' : '' ?>"><i class="fas fa-desktop mr-3 w-5 text-center text-teal-400"></i> <?= __('Sysmon / EDR') ?></a>
|
|
<a href="<?= $baseUrl ?>/search" class="sidebar-link block px-3 py-2.5 rounded-r-md text-slate-300 <?= (strpos($relPath, '/search') === 0) ? 'active' : '' ?>"><i class="fas fa-history mr-3 w-5 text-center"></i> <?= __('Historical Search') ?></a>
|
|
<a href="<?= $baseUrl ?>/ai-history" class="sidebar-link block px-3 py-2.5 rounded-r-md text-slate-300 <?= (strpos($relPath, '/ai-history') === 0) ? 'active' : '' ?>"><i class="fas fa-brain mr-3 w-5 text-center text-indigo-400"></i> <?= __('AI Knowledge Base') ?></a>
|
|
|
|
<div class="px-3 py-2">
|
|
<div class="h-px w-full bg-gradient-to-r from-transparent via-slate-700 to-transparent my-1"></div>
|
|
</div>
|
|
|
|
<a href="<?= $baseUrl ?>/settings" class="sidebar-link block px-3 py-2.5 rounded-r-md text-slate-300 <?= (strpos($relPath, '/settings') === 0) ? 'active' : '' ?>"><i class="fas fa-cog mr-3 w-5 text-center"></i> <?= __('Settings') ?></a>
|
|
</nav>
|
|
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<main class="flex-1 flex flex-col h-full overflow-hidden w-full relative">
|
|
<!-- Top Header -->
|
|
<header class="bg-white px-6 py-4 flex justify-between items-center z-10 border-b border-slate-200 sticky top-0 shadow-sm">
|
|
<div class="flex items-center">
|
|
<button class="lg:hidden text-slate-500 hover:text-slate-800 mr-4 focus:outline-none transition" onclick="toggleSidebar()">
|
|
<i class="fas fa-bars text-xl"></i>
|
|
</button>
|
|
<h2 class="text-lg font-semibold text-slate-800"><?= $pageTitle ?? 'Dashboard' ?></h2>
|
|
</div>
|
|
<div class="flex items-center space-x-4">
|
|
<div class="flex items-center space-x-2 text-xs font-semibold mr-2 border border-slate-200 rounded p-0.5 bg-slate-50">
|
|
<a href="?lang=en" class="px-2 py-1 rounded <?= ($_COOKIE['lang'] ?? 'en') === 'en' ? 'bg-slate-200 text-slate-800 shadow-sm' : 'text-slate-500 hover:text-slate-700' ?>">EN</a>
|
|
<a href="?lang=th" class="px-2 py-1 rounded <?= ($_COOKIE['lang'] ?? 'en') === 'th' ? 'bg-slate-200 text-slate-800 shadow-sm' : 'text-slate-500 hover:text-slate-700' ?>">TH</a>
|
|
</div>
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-emerald-100 text-emerald-800 border border-emerald-200 hidden sm:inline-flex">
|
|
<span class="w-2 h-2 mr-1.5 bg-emerald-500 rounded-full animate-pulse"></span>
|
|
<?= __('System Active') ?>
|
|
</span>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Content Area -->
|
|
<div class="p-6 lg:p-8 flex-1 overflow-y-auto pb-24">
|
|
<?= $content ?>
|
|
</div>
|
|
|
|
<!-- Fixed Bottom Footer -->
|
|
<footer class="bg-white border-t border-slate-200 p-4 text-center absolute bottom-0 w-full z-10 shadow-[0_-1px_2px_rgba(0,0,0,0.02)]">
|
|
<p class="text-xs text-slate-500">
|
|
© <?= date('Y') ?> <?= htmlspecialchars($_ENV['FOOTER_TEXT'] ?? ($appName . ' Security Management System. Powered by Wazuh. All rights reserved.')) ?>
|
|
</p>
|
|
</footer>
|
|
</main>
|
|
|
|
<script>
|
|
function toggleSidebar() {
|
|
const sidebar = document.getElementById('sidebar');
|
|
const overlay = document.getElementById('sidebarOverlay');
|
|
sidebar.classList.toggle('-translate-x-full');
|
|
overlay.classList.toggle('hidden');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|