160 lines
6.8 KiB
HTML
160 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Index Documentation Technique & Biologie | NextGN Formation</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="../header-style.css"/>
|
||
</head>
|
||
<body>
|
||
<div class="progress">
|
||
<div class="progress-bar"></div>
|
||
</div>
|
||
|
||
<nav class="nav-header">
|
||
<a href="../../index.html" class="header-logo">
|
||
<span>NextGN</span> Formation
|
||
</a>
|
||
<a href="../../index.html">Accueil</a>
|
||
<div class="header-nav">
|
||
<a href="../../index.html#formations">Exercices</a>
|
||
<a href="../../index.html#documentation">Documentation</a>
|
||
<a href="../../index.html#about">À propos</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<main>
|
||
<section class="hero">
|
||
<div class="hero-content">
|
||
<h1>Index Documentation</h1>
|
||
<p class="hero-subtitle">Explorez notre base de connaissances complète : études biologiques, analyses techniques, biocides et réglementation.</p>
|
||
|
||
<div class="search-container">
|
||
<div class="search-bar">
|
||
<input
|
||
type="text"
|
||
id="searchInput"
|
||
placeholder="Rechercher par mot-clé ou tag..."
|
||
autocomplete="off"
|
||
>
|
||
<span class="search-icon">🔍</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="documentation-container">
|
||
<div class="section-header">
|
||
<h2>Pages de Documentation</h2>
|
||
<p>Accédez à l'ensemble de nos ressources pédagogiques, analyses scientifiques et rapports techniques.</p>
|
||
</div>
|
||
|
||
<div class="doc-grid" id="docGrid">
|
||
<!-- Cards seront insérées ici par JavaScript -->
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer>
|
||
<p>© 2026 NextGN Formation - Index Documentation Technique & Biologie</p>
|
||
<p>Tous droits réservés — Gauthier Chombart & Nathan Chauwin — Formateurs indépendants</p>
|
||
</footer>
|
||
|
||
<script>
|
||
// Base de données de documentation
|
||
const documentationPages = [
|
||
{
|
||
title: "Frelon asiatique (Vespa velutina nigrithorax) — Invasion de France",
|
||
subtitle: "Analyse évolutive 2004–2026",
|
||
icon: "🐝",
|
||
description: "Étude complète de l'invasion du frelon asiatique en France. Données scientifiques, cartographie de l'expansion, impacts écologiques et stratégies de lutte validées par le MNHN et le CNRS.",
|
||
tags: ["Vespa velutina", "Entomologie", "Nuisibles invasifs", "Cartographie", "MNHN", "France", "Biodiversité", "Écologie"],
|
||
url: "frelon_asiatique_evolution.html"
|
||
}
|
||
// Les pages suivantes seront ajoutées au fur et à mesure
|
||
];
|
||
|
||
// Fonction de recherche
|
||
function filterDocumentation() {
|
||
const searchTerm = document.getElementById('searchInput').value.toLowerCase();
|
||
const docCards = document.querySelectorAll('.doc-card');
|
||
let visibleCount = 0;
|
||
|
||
docCards.forEach(card => {
|
||
const title = card.querySelector('.doc-title').textContent.toLowerCase();
|
||
const description = card.querySelector('.doc-description').textContent.toLowerCase();
|
||
const tags = Array.from(card.querySelectorAll('.doc-tag')).map(t => t.textContent.toLowerCase());
|
||
|
||
const matches = searchTerm === '' ||
|
||
title.includes(searchTerm) ||
|
||
description.includes(searchTerm) ||
|
||
tags.some(tag => tag.includes(searchTerm));
|
||
|
||
if (matches) {
|
||
card.classList.remove('hidden');
|
||
visibleCount++;
|
||
} else {
|
||
card.classList.add('hidden');
|
||
}
|
||
});
|
||
|
||
// Afficher ou masquer le message "aucun résultat"
|
||
let noResultsDiv = document.querySelector('.no-results');
|
||
if (visibleCount === 0) {
|
||
if (!noResultsDiv) {
|
||
noResultsDiv = document.createElement('div');
|
||
noResultsDiv.className = 'no-results';
|
||
noResultsDiv.innerHTML = `
|
||
<div class="no-results-icon">🔍</div>
|
||
<h3>Aucun résultat trouvé</h3>
|
||
<p>Essayez une autre recherche ou parcourez toutes les pages de documentation.</p>
|
||
`;
|
||
document.getElementById('docGrid').appendChild(noResultsDiv);
|
||
}
|
||
} else if (noResultsDiv) {
|
||
noResultsDiv.remove();
|
||
}
|
||
}
|
||
|
||
// Fonction pour rendre les cartes
|
||
function renderDocumentation() {
|
||
const docGrid = document.getElementById('docGrid');
|
||
docGrid.innerHTML = '';
|
||
|
||
documentationPages.forEach(page => {
|
||
const card = document.createElement('div');
|
||
card.className = 'doc-card';
|
||
card.innerHTML = `
|
||
<div class="doc-header">
|
||
<div class="doc-icon">${page.icon}</div>
|
||
<h3 class="doc-title">${page.title}</h3>
|
||
<p class="doc-subtitle">${page.subtitle}</p>
|
||
</div>
|
||
<div class="doc-body">
|
||
<p class="doc-description">${page.description}</p>
|
||
<div class="doc-tags">
|
||
${page.tags.map(tag => `<span class="doc-tag">${tag}</span>`).join('')}
|
||
</div>
|
||
<a href="${page.url}" class="doc-link">Consulter l'étude →</a>
|
||
</div>
|
||
`;
|
||
docGrid.appendChild(card);
|
||
});
|
||
}
|
||
|
||
// Initialisation
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
renderDocumentation();
|
||
document.getElementById('searchInput').addEventListener('input', filterDocumentation);
|
||
});
|
||
|
||
// Progress bar
|
||
window.addEventListener('scroll', () => {
|
||
const scrollPercentage = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
|
||
document.querySelector('.progress-bar').style.width = scrollPercentage + '%';
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|