File size: 12,707 Bytes
2fb5f83 |
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 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 |
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Catalogue - Istobank Digital Library</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<style>
.category-card:hover .category-overlay {
opacity: 0.9;
}
</style>
</head>
<body class="bg-gray-50 font-sans">
<!-- Navigation -->
<nav class="bg-white shadow-lg">
<div class="max-w-6xl mx-auto px-4">
<div class="flex justify-between">
<div class="flex space-x-7">
<div>
<a href="index.html" class="flex items-center py-4 px-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-histop" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
</svg>
<span class="ml-2 font-semibold text-gray-800 text-lg">Istobank</span>
</a>
</div>
<div class="hidden md:flex items-center space-x-1">
<a href="index.html" class="py-4 px-2 text-gray-500 font-semibold hover:text-primary transition duration-300">Accueil</a>
<a href="catalogue.html" class="py-4 px-2 text-primary border-b-4 border-primary font-semibold">Catalogue</a>
<a href="recherche.html" class="py-4 px-2 text-gray-500 font-semibold hover:text-primary transition duration-300">Recherche</a>
<a href="contact.html" class="py-4 px-2 text-gray-500 font-semibold hover:text-primary transition duration-300">Contact</a>
<a href="about.html" class="py-4 px-2 text-gray-500 font-semibold hover:text-primary transition duration-300">À propos</a>
</div>
</div>
<div class="hidden md:flex items-center space-x-3">
<a href="login.html" class="py-2 px-4 bg-primary text-white font-semibold rounded-lg hover:bg-primary-dark transition duration-300">Connexion</a>
</div>
<div class="md:hidden flex items-center">
<button class="outline-none mobile-menu-button">
<svg class="w-6 h-6 text-gray-500" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
<path d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
</div>
</div>
</nav>
<!-- Catalogue Header -->
<div class="bg-primary text-white py-12">
<div class="container mx-auto px-6 text-center">
<h1 class="text-3xl font-bold mb-4">Notre Collection Étudiante</h1>
<p class="text-xl max-w-2xl mx-auto">Toutes les lames de la plateforme Histologie du Lycée Jean Rostand</p>
</div>
</div>
<!-- Catalogue Filters -->
<div class="bg-white py-8 shadow-sm">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-4 md:mb-0">
<h2 class="text-xl font-semibold text-gray-800">Filtrer par :</h2>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 w-full md:w-auto">
<select class="bg-gray-100 border border-gray-300 text-gray-700 py-2 px-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<option>Tous les types</option>
<option>Histologie</option>
<option>Hématologie</option>
</select>
<select class="bg-gray-100 border border-gray-300 text-gray-700 py-2 px-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<option>Toutes les espèces</option>
<option>Humain</option>
<option>Souris</option>
<option>Porc</option>
</select>
<select class="bg-gray-100 border border-gray-300 text-gray-700 py-2 px-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<option>Tous les tissus</option>
<option>Foie</option>
<option>Pancréas</option>
<option>Rate</option>
<option>Sang</option>
</select>
<button class="bg-primary hover:bg-primary-dark text-white font-semibold py-2 px-4 rounded-lg transition duration-300 flex items-center justify-center">
<i data-feather="filter" class="mr-2"></i>
Appliquer
</button>
</div>
</div>
</div>
</div>
<!-- Catalogue Grid -->
<div class="py-12">
<div class="container mx-auto px-6">
<div class="grid md:grid-cols-3 gap-8">
<!-- Category Card -->
<div class="relative rounded-lg overflow-hidden shadow-md h-64">
<img src="http://static.photos/medical/640x360/4" alt="Histologie générale" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent">
<div class="absolute bottom-0 left-0 p-6">
<h3 class="text-xl font-semibold text-white mb-2">Histologie générale</h3>
<p class="text-gray-200">45 séries de lames</p>
</div>
</div>
<a href="category.html" class="absolute inset-0"></a>
</div>
<!-- Category Card -->
<div class="relative rounded-lg overflow-hidden shadow-md h-64">
<img src="http://static.photos/science/640x360/5" alt="Hématologie" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent">
<div class="absolute bottom-0 left-0 p-6">
<h3 class="text-xl font-semibold text-white mb-2">Hématologie</h3>
<p class="text-gray-200">32 séries de lames</p>
</div>
</div>
<a href="category.html" class="absolute inset-0"></a>
</div>
<!-- Category Card -->
<div class="relative rounded-lg overflow-hidden shadow-md h-64">
<img src="http://static.photos/education/640x360/6" alt="Pathologie" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent">
<div class="absolute bottom-0 left-0 p-6">
<h3 class="text-xl font-semibold text-white mb-2">Pathologie</h3>
<p class="text-gray-200">28 séries de lames</p>
</div>
</div>
<a href="category.html" class="absolute inset-0"></a>
</div>
<!-- Category Card -->
<div class="relative rounded-lg overflow-hidden shadow-md h-64">
<img src="http://static.photos/medical/640x360/7" alt="Tissus humains" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent">
<div class="absolute bottom-0 left-0 p-6">
<h3 class="text-xl font-semibold text-white mb-2">Tissus humains</h3>
<p class="text-gray-200">67 séries de lames</p>
</div>
</div>
<a href="category.html" class="absolute inset-0"></a>
</div>
<!-- Category Card -->
<div class="relative rounded-lg overflow-hidden shadow-md h-64">
<img src="http://static.photos/science/640x360/8" alt="Modèles animaux" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent">
<div class="absolute bottom-0 left-0 p-6">
<h3 class="text-xl font-semibold text-white mb-2">Modèles animaux</h3>
<p class="text-gray-200">39 séries de lames</p>
</div>
</div>
<a href="category.html" class="absolute inset-0"></a>
</div>
<!-- Category Card -->
<div class="relative rounded-lg overflow-hidden shadow-md h-64">
<img src="http://static.photos/education/640x360/9" alt="Coloration spéciale" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent">
<div class="absolute bottom-0 left-0 p-6">
<h3 class="text-xl font-semibold text-white mb-2">Coloration spéciale</h3>
<p class="text-gray-200">23 séries de lames</p>
</div>
</div>
<a href="category.html" class="absolute inset-0"></a>
</div>
</div>
<!-- Pagination -->
<div class="flex justify-center mt-12">
<nav class="inline-flex rounded-md shadow">
<a href="#" class="px-3 py-2 rounded-l-md border border-gray-300 bg-white text-gray-500 hover:bg-gray-50">
<i data-feather="chevron-left"></i>
</a>
<a href="#" class="px-4 py-2 border-t border-b border-gray-300 bg-white text-gray-500 hover:bg-gray-50">1</a>
<a href="#" class="px-4 py-2 border-t border-b border-gray-300 bg-white text-gray-500 hover:bg-gray-50">2</a>
<a href="#" class="px-4 py-2 border-t border-b border-gray-300 bg-white text-gray-500 hover:bg-gray-50">3</a>
<a href="#" class="px-3 py-2 rounded-r-md border border-gray-300 bg-white text-gray-500 hover:bg-gray-50">
<i data-feather="chevron-right"></i>
</a>
</nav>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-12">
<div class="container mx-auto px-6">
<div class="grid md:grid-cols-4 gap-8">
<div>
<h3 class="text-xl font-semibold mb-4">HistoVision</h3>
<p class="text-gray-300">Projet étudiant du Lycée Jean Rostand • BTS Biotechnologies</p>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Liens rapides</h4>
<ul class="space-y-2">
<li><a href="catalogue.html" class="text-gray-300 hover:text-white transition duration-300">Catalogue</a></li>
<li><a href="recherche.html" class="text-gray-300 hover:text-white transition duration-300">Recherche</a></li>
<li><a href="about.html" class="text-gray-300 hover:text-white transition duration-300">À propos</a></li>
<li><a href="contact.html" class="text-gray-300 hover:text-white transition duration-300">Contact</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Ressources</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-300 hover:text-white transition duration-300">Documentation</a></li>
<li><a href="#" class="text-gray-300 hover:text-white transition duration-300">FAQ</a></li>
<li><a href="#" class="text-gray-300 hover:text-white transition duration-300">Support</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Contact</h4>
<p class="text-gray-300 mb-2">Lycée Jean Rostand</p>
<p class="text-gray-300 mb-1">5 Rue Edmond Labbé</p>
<p class="text-gray-300 mb-4">67084 Strasbourg Cedex</p>
<p class="text-gray-300">Plateforme Histologie</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-300 hover:text-white transition duration-300">
<i data-feather="mail"></i>
</a>
<a href="#" class="text-gray-300 hover:text-white transition duration-300">
<i data-feather="facebook"></i>
</a>
<a href="#" class="text-gray-300 hover:text-white transition duration-300">
<i data-feather="twitter"></i>
</a>
</div>
</div>
</div>
<div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
<p>© 2023 Istobank Digital Library. Tous droits réservés.</p>
</div>
</div>
</footer>
<script>
feather.replace();
</script>
</body>
</html>
|