73 lines
4.3 KiB
HTML
73 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Welcome to this testing demo website!</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
</head>
|
||
|
||
|
||
<body class="bg-white text-gray-200 min-h-screen flex flex-col">
|
||
<nav class="bg-orange-400 p-6 shadow-lg">
|
||
<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>
|
||
</nav>
|
||
|
||
<main class="flex-grow pb-10">
|
||
<div class="max-w-4xl mx-auto mt-16 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">Welcome!</h2>
|
||
<p class="text-lg leading-relaxed mb-6 text-center text-white">
|
||
This site serves as a demonstration of my Bachelor's Thesis project focused on
|
||
<span class="text-orange-500 font-semibold">Intrusion Detection Systems (IDS)</span>.
|
||
It showcases the testing and comparison of <span class="text-orange-500 font-semibold">Isolation Forest</span> and
|
||
<span class="text-orange-500 font-semibold">Autoencoder</span> algorithms on the popular
|
||
<span class="text-orange-500 font-semibold">CICIDS dataset</span>.
|
||
</p>
|
||
<h3 class="text-2xl font-bold text-orange-500 mt-10 mb-3 flex items-center justify-center">What is this project about?</h3>
|
||
<p class="text-lg leading-relaxed text-white">
|
||
The goal of this demo is to demonstrate how machine learning models can be used to:
|
||
</p>
|
||
<ul class="list-disc list-inside text-lg mt-4 space-y-2">
|
||
<li>Detect anomalies in network traffic</li>
|
||
<li>Identify potential cybersecurity threats</li>
|
||
<li>Process and analyze datasets in real time</li>
|
||
<li>Provide a modern and clear visual output</li>
|
||
</ul>
|
||
<h3 class="text-2xl font-bold text-orange-500 mt-10 mb-3 flex items-center justify-center">What algorithms are included?</h3>
|
||
<ul class="list-disc list-inside text-lg mt-4 space-y-2">
|
||
<li><strong class="text-orange-500">Isolation Forest</strong> – anomaly detection based on random isolation</li>
|
||
<li><strong class="text-orange-500">Autoencoder</strong> – neural network that reconstructs normal traffic and flags anomalies</li>
|
||
</ul>
|
||
<h3 class="text-2xl font-bold text-orange-500 mt-10 mb-3 flex items-center justify-center">What can you do here?</h3>
|
||
<ul class="list-disc list-inside text-lg mt-4 space-y-2">
|
||
<li>Upload your own dataset and test the algorithms</li>
|
||
<li>Run default tests on the CICIDS dataset</li>
|
||
</ul>
|
||
<p class="mt-10 text-center text-red-600 font-semibold text-3xl">
|
||
This demo is for educational and research purposes only!
|
||
</p>
|
||
</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>
|
||
</body>
|
||
</html>
|