137 lines
4.8 KiB
HTML
137 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Demo demonstration!</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
</head>
|
|
|
|
<body class="bg-white text-gray-200 min-h-screen flex flex-col">
|
|
|
|
<div id="loadingOverlay"
|
|
class="hidden fixed inset-0 bg-black bg-opacity-80 flex flex-col justify-center items-center z-50">
|
|
|
|
<div class="animate-spin h-20 w-20 border-4 border-orange-500 border-t-transparent rounded-full"></div>
|
|
|
|
<p class="mt-6 text-2xl text-orange-500 font-semibold text-center">
|
|
Starting Isolation Forest...<br>This may take a while.
|
|
</p>
|
|
|
|
<div id="progressContainer" class="w-full max-w-lg mt-10 hidden flex flex-col items-center">
|
|
|
|
<div class="w-full bg-gray-700 rounded-full h-6 overflow-hidden shadow-lg">
|
|
<div id="progressBar"
|
|
class="bg-orange-500 h-6 transition-all duration-300 ease-out"
|
|
style="width: 0%;">
|
|
</div>
|
|
</div>
|
|
|
|
<p id="progressLabel" class="text-center text-orange-500 mt-3 text-xl font-semibold">
|
|
0%
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<nav class="bg-orange-400 p-4 shadow-lg">
|
|
<div class="max-w-6xl mx-auto flex items-center justify-center">
|
|
<div class="max-w-6xl mx-auto flex items-center justify-center static">
|
|
<div class="w-40 absolute left-0">
|
|
<img src="/img/FEI_logo.svg" alt="FEI Logo">
|
|
</div>
|
|
<div class="w-40 absolute left-40">
|
|
<img src="/img/kemt_logo.png" alt="KEMT Logo">
|
|
</div>
|
|
|
|
<h1 class="text-2xl font-bold text-black">
|
|
Isolation Forest & Autoencoder Testing
|
|
</h1>
|
|
|
|
<button id="menuBtn"
|
|
class="absolute right-0 text-lg px-4 py-2 text-black hover:text-white transition">
|
|
Menu ▸
|
|
</button>
|
|
|
|
<div id="menuPanel"
|
|
class="hidden absolute right-0 top-14 w-48 bg-orange-500 border border-black rounded-xl shadow-xl
|
|
opacity-0 translate-y-3 transition-all duration-300">
|
|
|
|
<a href="/"
|
|
class="block px-4 py-3 hover:bg-gray-600 hover:text-orange-500 rounded-t-xl transition">
|
|
Home
|
|
</a>
|
|
|
|
<a href="/upload"
|
|
class="block px-4 py-3 hover:bg-gray-600 hover:text-orange-500 transition">
|
|
Upload Dataset
|
|
</a>
|
|
|
|
<a href="/default"
|
|
class="block px-4 py-3 hover:bg-gray-600 hover:text-orange-500 rounded-b-xl transition">
|
|
CICIDS Demo
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="flex-grow pb-10">
|
|
<div class="max-w-4xl mx-auto mt-40 p-6 bg-gray-600 rounded-xl shadow-xl">
|
|
|
|
<h2 class="text-3xl font-bold text-orange-500 mb-4 flex items-center justify-center">CICIDS Demo</h2>
|
|
|
|
<p class="text-lg leading-relaxed mb-6 text-center text-white">
|
|
Here, you can test the algoritmhs on
|
|
<span class="text-orange-500 font-semibold">CICIDS</span> dataset.
|
|
</p>
|
|
|
|
<h2 class="text-3xl font-bold text-orange-500 mb-4 flex items-center justify-center">
|
|
Choose your desired algorithm:
|
|
</h2>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-10">
|
|
|
|
<button id="btnIF"
|
|
class="algo-card bg-gray-700 p-6 rounded-xl shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
|
<h3 class="text-2xl font-semibold text-orange-500 mb-2">Isolation Forest</h3>
|
|
<p class="text-white">Detect anomalies using random isolation trees.</p>
|
|
</button>
|
|
|
|
<button id="btnAE"
|
|
class="algo-card bg-gray-700 p-6 rounded-xl shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
|
<h3 class="text-2xl font-semibold text-orange-500 mb-2">Autoencoder</h3>
|
|
<p class="text-white">Neural network reconstruction-based anomaly detection.</p>
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<div class="w-full flex justify-center mt-10">
|
|
<button id="startBtn"
|
|
class="px-10 py-4 text-xl font-bold rounded-xl transition
|
|
bg-gray-700 text-orange-500 cursor-not-allowed">
|
|
Start
|
|
</button>
|
|
</div>
|
|
|
|
<div id="resultContainer" class="mt-12 hidden"></div>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
<div id="footer" class="bg-orange-400 flex items-center justify-center h-10 mt-10">
|
|
<footer class="text-center text-black ">
|
|
<p>© 2025 Michal Utlak</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="/JS/menu.js"></script>
|
|
<script src="/JS/frontend.js"></script>
|
|
|
|
</body>
|
|
</html>
|