229 lines
No EOL
9.3 KiB
HTML
Executable file
229 lines
No EOL
9.3 KiB
HTML
Executable file
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Botascopia</title>
|
||
|
||
<link rel="stylesheet" type="text/css" href="/assets/style.css">
|
||
<link rel="stylesheet" type="text/css" href="/assets/fonts/borna/stylesheet.css">
|
||
<link rel="stylesheet" type="text/css" href="/assets/fonts/nunita/stylesheet.css">
|
||
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<include src="/components/site-header.html"></include>
|
||
|
||
<main id="main_home">
|
||
|
||
|
||
|
||
<section id="home__hero">
|
||
<div class="section--inner">
|
||
|
||
<h2 class="section--title">Botascopia</h2>
|
||
|
||
<div class="content">
|
||
<p class="description">Botascopia est un projet de recherche mêlant botanique, informatique et didactique. Son objectif est de développer des outils de transmission et de partage des connaissances botaniques. Découvrez ci-dessous nos <strong>principaux outils</strong>.</p>
|
||
</div>
|
||
|
||
<div class="search--container">
|
||
<div class="icon"><include src="/components/icons/search.html"></include></div>
|
||
|
||
<input type="text" class="" placeholder="Recherchez une plante ou un livret">
|
||
</div>
|
||
|
||
<ul class="nav-hero">
|
||
<li data-type="livret"><a href="#home__livrets">Livrets</a></li>
|
||
<li data-type="base-connaissance"><a href="#home__base-connaissance">Base de connaissance</a></li>
|
||
<li data-type="atelier"><a href="#home__ateliers">Ateliers</a></li>
|
||
</ul>
|
||
|
||
|
||
<a class="see-more" href="#">À propos du projet</a>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
</section>
|
||
|
||
|
||
|
||
<section class="home--section-tool" id="home__livrets">
|
||
<div class="section--inner">
|
||
<h2 class="section--title">Livrets</h2>
|
||
|
||
<div class="item-nav__group">
|
||
<div class="item-nav">
|
||
<h3 class="title">Créer un livret</h3>
|
||
<p class="description">Inventoriez un terrain, créez votre collection et générez un livret avec sa clé de détermination.</p>
|
||
<button class="btn--go-to"><include src="/components/icons/arrow-right.svg"></include></button>
|
||
</div>
|
||
|
||
<div class="item-nav">
|
||
<h3 class="title">Rechercher un livret</h3>
|
||
<p class="description">Consultez et téléchargez librement les livrets existants.</p>
|
||
<button class="btn--go-to"><include src="/components/icons/arrow-right.svg"></include></button>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="highlight-block">
|
||
<div class="content">
|
||
<p class="label">Livret du mois</p>
|
||
<h3 class="title">Apiaciée de Baumont</h3>
|
||
<p class="details">45 espèces</p>
|
||
</div>
|
||
<figure><img src="https://botascopia.inria.fr/photos/Crataegus%20monogyna_morphology_vegetative_leaves_leaves_type0_illustration_photo.png"></figure>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<section class="home--section-tool" id="home__base-connaissance">
|
||
<div class="section--inner">
|
||
<h2 class="section--title">Base de connaissance</h2>
|
||
|
||
<div class="item-nav__group">
|
||
|
||
<div class="item-nav">
|
||
<h3 class="title">Explorer les espèces</h3>
|
||
<p class="description">Consultez et téléchargez les fiches des espèces vérifiées par Botascopia.</p>
|
||
<button class="btn--go-to"><include src="/components/icons/arrow-right.svg"></include></button>
|
||
</div>
|
||
|
||
<div class="item-nav">
|
||
<h3 class="title">Contribuer à la base de connaissance</h3>
|
||
<p class="description">Seul·e ou dans le cadre d'une activité pédagogique en botanique, contactez-nous!</p>
|
||
<button class="btn--go-to"><include src="/components/icons/arrow-right.svg"></include></button>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="highlight-block">
|
||
<div class="content">
|
||
<p class="label">Espèce du jour</p>
|
||
<h3 class="title">Charme commun</h3>
|
||
|
||
<p class="details">Carpinus betulus L. — Betulaceae</p>
|
||
</div>
|
||
<figure><img src="https://botascopia.inria.fr/photos/Frangula%20alnus_morphology_vegetative_type_woody_twig-type_normal_twig-illustration_photo.png"></figure>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<section class="home--section-tool" id="home__ateliers">
|
||
<div class="section--inner">
|
||
<h2 class="section--title">Ateliers</h2>
|
||
<div class="item-nav__group">
|
||
|
||
<div class="item-nav">
|
||
<h3 class="title">Organiser un atelier</h3>
|
||
<p class="description">Consultez et téléchargez les fiches des espèces vérifiées par Botascopia.</p>
|
||
<button class="btn--go-to"><include src="/components/icons/arrow-right.svg"></include></button>
|
||
</div>
|
||
|
||
<div class="item-nav">
|
||
<h3 class="title">Kits pédagogiques</h3>
|
||
<p class="description">Seul·e ou dans le cadre d'une activité pédagogique en botanique, contactez-nous!</p>
|
||
<button class="btn--go-to"><include src="/components/icons/arrow-right.svg"></include></button>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="slider">
|
||
<figure>
|
||
<img src="/content/images/atelier-2.png">
|
||
<figcaption>
|
||
Atelier Lorem Ispsum, Rennes, 23 septembre 2025
|
||
</figcaption>
|
||
</figure>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
|
||
|
||
<section id="home__a-propos">
|
||
<div class="section--inner">
|
||
<h2 class="section--title">Apprendre à connaître <br>et reconnaître les plantes</h2>
|
||
<p>Le projet de recherche Botascopia s’adresse à toutes celles et ceux qui souhaitent <strong>identifier, connaître ou faire connaître les plantes autour d’eux</strong>. Il s’adresse aussi aux botanistes chevronnés à la recherche d’informations fiables et détaillées sur les espèces de plantes à fleurs. Il poursuit quatre objectifs :</p>
|
||
<ol>
|
||
<li><strong>Constituer une base de connaissances sur les plantes à fleurs</strong> permettant de décrire finement leur morphologie ainsi que d’autres caractéristiques (écologie, distribution, propriétés)</li>
|
||
<li><strong>Développer des outils informatiques</strong> permettant de produire automatiquement des clés de détermination et des fiches descriptives à partir d’une collection d’espèces</li>
|
||
<li>Mettre à disposition l’ensemble (base de connaissances, clés, fiches) <strong>pour un public le plus large possible</strong> : amateurs, professionnels, académiques</li>
|
||
<li>Interroger le rôle des outils de reconnaissance de plantes dans le <strong>partage des connaissances botaniques et la perception du vivant</strong> </li>
|
||
|
||
</ol>
|
||
<button class="btn--solid"><a href="#">En savoir plus sur le projet</a></button>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<section id="home__partenaires">
|
||
<div class="section--inner">
|
||
<h2 class="section--title">Partenaires</h2>
|
||
<div class="container-logos">
|
||
<div class="logo"></div>
|
||
<div class="logo"></div>
|
||
<div class="logo"></div>
|
||
<div class="logo"></div>
|
||
<div class="logo"></div>
|
||
<div class="logo"></div>
|
||
<div class="logo"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
|
||
</main>
|
||
|
||
|
||
|
||
<include src="/components/site-footer.html"></include>
|
||
|
||
<script>
|
||
// Fonction récursive pour traiter les inclusions imbriquées
|
||
function processIncludes() {
|
||
const includes = document.querySelectorAll('include[src]');
|
||
|
||
if (includes.length === 0) {
|
||
return; // Plus d'inclusions à traiter
|
||
}
|
||
|
||
// Traiter chaque inclusion
|
||
const promises = Array.from(includes).map(el => {
|
||
const src = el.getAttribute('src');
|
||
return fetch(src)
|
||
.then(r => {
|
||
if (!r.ok) throw new Error(`Erreur ${r.status}: ${src}`);
|
||
return r.text();
|
||
})
|
||
.then(html => {
|
||
el.outerHTML = html;
|
||
})
|
||
.catch(err => {
|
||
console.error('Erreur de chargement:', err);
|
||
});
|
||
});
|
||
|
||
// Une fois toutes les inclusions traitées, vérifier s'il y en a de nouvelles
|
||
Promise.all(promises).then(() => {
|
||
processIncludes(); // Récursion pour traiter les inclusions imbriquées
|
||
});
|
||
}
|
||
|
||
// Lancer le traitement au chargement du DOM
|
||
document.addEventListener('DOMContentLoaded', processIncludes);
|
||
</script>
|
||
</body>
|
||
|
||
</html> |