organisation css

2026-02-11 10:39:01 +01:00 · 2026-02-11 10:39:01 +01:00 · 96812f75df
commit 96812f75df
parent a0fa93a62e
18 changed files with 260 additions and 16 deletions
--- a/species-list.html
+++ b/species-list.html
@ -0,0 +1,96 @@
+<!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_species-list">
+
+        <header class="page-header">
+            <h2 class="page-title">Liste des espèces</h2>
+
+        </header>
+
+        <nav class="sort">
+            <ul>
+                <li>Trier par familles</li>
+                <li>Trier par ordre alphabétique</li>
+            </ul>
+            <button>Vue édition</button>
+        </nav>
+
+        <section class="species-list">
+
+            <article class="taxon">
+                <figure>
+                    <img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
+                </figure>
+                <h3 class="vernacular">Acore odorant</h3>
+                <h4 class="latin">Acorus calamus L.</h4>
+
+                <div class="chart-edit"><abbr title="Rempli à 81 % (18 / 22) et vérifié à 0 % (0 / 22)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 1 1 4.5184 29.2292 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path></svg></abbr></div>
+
+                <button class="btn-edit">
+                    <include src="/components/icons/edit.svg"></include>
+                </button>
+            </article>
+
+        </section>
+
+
+   
+
+    </main>
+
+
+
+<include src="/components/site-footer.html"></include>
+
+
+
+<!-- SCRIPT À SUPPRIMER UNE FOIS LE SITE INTEGRÉ (include des composants)-->
+<script>
+  function processIncludes() {
+      const includes = document.querySelectorAll('include[src]');
+
+      if (includes.length === 0) {
+          return; 
+      }
+
+      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);
+              });
+      });
+
+      Promise.all(promises).then(() => {
+          processIncludes(); 
+      });
+  }
+
+  document.addEventListener('DOMContentLoaded', processIncludes);
+</script>
+</body>
+
+</html>