| <!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> |
