File size: 6,849 Bytes
8e25906 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 |
<!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> |