|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>NeuroML</title>
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
<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;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
|
|
<script src="https://cdn.plot.ly/plotly-2.32.0.min.js"></script>
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
|
|
|
<script src="https://cdn.jsdelivr.net/npm/mathjs@11.8.0/lib/browser/math.js"></script>
|
|
|
|
|
|
<style>
|
|
|
body {
|
|
|
font-family: 'Inter', sans-serif;
|
|
|
background-color: #F3F4F6;
|
|
|
}
|
|
|
.sidebar {
|
|
|
width: 280px;
|
|
|
background-color: #1F2937;
|
|
|
color: #E5E7EB;
|
|
|
position: fixed;
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
height: 100vh;
|
|
|
overflow-y: auto;
|
|
|
scrollbar-width: none;
|
|
|
-ms-overflow-style: none;
|
|
|
transform: translateX(0);
|
|
|
transition: transform 0.3s ease;
|
|
|
}
|
|
|
.sidebar::-webkit-scrollbar {
|
|
|
display: none;
|
|
|
}
|
|
|
.main-content {
|
|
|
margin-left: 280px;
|
|
|
padding: 2.5rem;
|
|
|
min-height: 100vh;
|
|
|
transition: margin-left 0.3s ease;
|
|
|
}
|
|
|
.link-active {
|
|
|
background-color: #4B5563;
|
|
|
}
|
|
|
.card {
|
|
|
background-color: white;
|
|
|
padding: 1.5rem;
|
|
|
border-radius: 0.75rem;
|
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
|
}
|
|
|
.card:hover {
|
|
|
transform: translateY(-5px);
|
|
|
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
|
|
|
}
|
|
|
.algorithm-box {
|
|
|
background-color: #F9FAFB;
|
|
|
padding: 1rem;
|
|
|
border-radius: 0.5rem;
|
|
|
border: 1px solid #E5E7EB;
|
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
|
transition: background-color 0.2s ease;
|
|
|
text-decoration: none;
|
|
|
color: inherit;
|
|
|
display: block;
|
|
|
}
|
|
|
.algorithm-box:hover {
|
|
|
background-color: #2D3748;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
@media (max-width: 768px) {
|
|
|
.sidebar {
|
|
|
width: 70%;
|
|
|
height: 100vh;
|
|
|
position: fixed;
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
overflow-y: auto;
|
|
|
transform: translateX(-100%);
|
|
|
z-index: 100;
|
|
|
}
|
|
|
.sidebar.active {
|
|
|
transform: translateX(0);
|
|
|
}
|
|
|
.main-content {
|
|
|
margin-left: 0;
|
|
|
padding: 1.5rem;
|
|
|
}
|
|
|
.main-content.sidebar-active {
|
|
|
margin-left: 70%;
|
|
|
}
|
|
|
.toggle-button {
|
|
|
display: block;
|
|
|
position: fixed;
|
|
|
top: 1rem;
|
|
|
left: 1rem;
|
|
|
z-index: 200;
|
|
|
}
|
|
|
.sidebar-overlay {
|
|
|
display: none;
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
|
z-index: 99;
|
|
|
}
|
|
|
.sidebar-overlay.active {
|
|
|
display: block;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<button class="toggle-button fixed top-4 left-4 z-50 md:hidden bg-indigo-500 text-white p-3 rounded-full shadow-lg">
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
|
|
|
</svg>
|
|
|
</button>
|
|
|
<div class="sidebar-overlay hidden md:hidden"></div>
|
|
|
|
|
|
<div class="sidebar flex flex-col items-start p-6">
|
|
|
<h2 class="text-3xl font-bold text-indigo-400 mb-8">NeuroML</h2>
|
|
|
<nav class="w-full">
|
|
|
<a href="{{ url_for('Test_home') }}" class="link block py-3 px-4 rounded-lg text-lg text-white font-medium mb-2 hover:bg-gray-700 transition-colors duration-200 {% if active_page == 'home' %}link-active{% endif %}">🏠 Home</a>
|
|
|
<a href="/Test-supervise" class="link block py-3 px-4 rounded-lg text-lg text-white font-medium hover:bg-gray-700 transition-colors duration-200 {% if active_page == 'supervised' %}link-active{% endif %}">📈 Supervised Learning</a>
|
|
|
<a href="{{ url_for('Test_unsupervised') }}" class="link block py-3 px-4 rounded-lg text-lg text-white font-medium mb-2 hover:bg-gray-700 transition-colors duration-200 {% if active_page == 'unsupervised' %}link-active{% endif %}">🕵️ Unsupervised Learning</a>
|
|
|
<a href="{{ url_for('Test_semi_supervised') }}" class="link block py-3 px-4 rounded-lg text-lg text-white font-medium mb-2 hover:bg-gray-700 transition-colors duration-200 {% if active_page == 'semi_supervised' %}link-active{% endif %}">🤝 Semi-Supervised Learning</a>
|
|
|
<a href="{{ url_for('Test_reinforcement') }}" class="link block py-3 px-4 rounded-lg text-lg text-white font-medium mb-2 hover:bg-gray-700 transition-colors duration-200 {% if active_page == 'reinforcement' %}link-active{% endif %}">🤖 Reinforcement Learning</a>
|
|
|
<a href="{{ url_for('Test_ensemble') }}" class="link block py-3 px-4 rounded-lg text-lg text-white font-medium mb-2 hover:bg-gray-700 transition-colors duration-200 {% if active_page == 'ensemble' %}link-active{% endif %}">🌳 Ensemble Learning</a>
|
|
|
</nav>
|
|
|
</div>
|
|
|
|
|
|
<div class="main-content">
|
|
|
{% block content %}{% endblock %}
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
|
const toggleButton = document.querySelector('.toggle-button');
|
|
|
const sidebar = document.querySelector('.sidebar');
|
|
|
const overlay = document.querySelector('.sidebar-overlay');
|
|
|
|
|
|
toggleButton.addEventListener('click', () => {
|
|
|
sidebar.classList.toggle('active');
|
|
|
overlay.classList.toggle('active');
|
|
|
});
|
|
|
|
|
|
overlay.addEventListener('click', () => {
|
|
|
sidebar.classList.remove('active');
|
|
|
overlay.classList.remove('active');
|
|
|
});
|
|
|
});
|
|
|
</script>
|
|
|
</body>
|
|
|
</html> |
