studio-variable/botascopia-webiste-static
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add sort & view for species

Browse source
This commit is contained in:
Julie Blanc 2026-02-15 23:14:52 +01:00
parent 718ca47696
commit 6fff7422e8
26 changed files with 1448 additions and 432 deletions
Download patch file Download diff file Expand all files Collapse all files

332
species-list.html
View file

@ -19,20 +19,89 @@
<main id="main_species-list">
<header class="page-header">
<div class="page-header__inner">
<h2 class="page-title">Liste des espèces</h2>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio quasi facilis, explicabo similique molestiae dolorem consequuntur fugiat itaque iure fuga.
</p>
<div class="details">
<div class="details__item">
<p class="nbr">876</p>
<p class="text">espèces répertoriées</p>
</div>
<div class="details__item">
<p class="nbr">53</p>
<p class="text">contributeur·ices</p>
<button class="link-with-arrow"><a href="#">Voir la communuauté</a></button>
</div>
</div>
</div>
</header>
<nav class="sort">
<ul>
<li>Trier par familles</li>
<li>Trier par ordre alphabétique</li>
<div class="page-grid">
<nav class="page-nav">
<ul class="toc">
<li><a href="#acanthaceae">Acanthaceae (1)</a></li>
<li><a href="#amaranthaceae">Amaranthaceae(7)</a></li>
<li><a href="#acanthaceae">Amaryllidaceae (14)</a></li>
<li><a href="#acanthaceae">Acanthaceae (1)</a></li>
<li><a href="#amaranthaceae">Amaranthaceae(7)</a></li>
<li><a href="#acanthaceae">Amaryllidaceae (14)</a></li>
<li><a href="#acanthaceae">Acanthaceae (1)</a></li>
<li><a href="#amaranthaceae">Amaranthaceae(7)</a></li>
<li><a href="#acanthaceae">Amaryllidaceae (14)</a></li>
<li><a href="#acanthaceae">Acanthaceae (1)</a></li>
<li><a href="#amaranthaceae">Amaranthaceae(7)</a></li>
<li><a href="#acanthaceae">Amaryllidaceae (14)</a></li>
</ul>
<button>Vue édition</button>
</nav>
</nav>
<section class="page-species">
<input type="radio" id="view-grid" name="view" value="grid" checked />
<input type="radio" id="view-list" name="view" value="list"/>
<input type="radio" id="view-edit" name="view" value="edit" />
<section class="family">
<div class="group-sort-view">
<div class="sort">
<p>Trier par</p>
<button class="btn-action">
<a class="text" href="#">Nom</a>
</button>
<button class="btn-action is-selected">
<a class="text" href="#">Familles d’espèces</a>
</button>
</div>
<div class="view-toggle">
<p>Vue</p>
<label for="view-grid" class="btn-action"><span class="icon"><include src="/components/icons/view-grid.svg"></include></span> <span class="text">Galerie</span></label>
<label for="view-list" class="btn-action"><span class="icon"><include src="/components/icons/view-list.svg"></include></span> <span class="text">Liste</span></label>
<label for="view-edit" class="btn-action"><span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Édition</span></label>
</div>
</div>
<section class="family" id="acanthaceae">
<div class="family__header">
<h2 class="title">Acanthaceae</h2>
@ -46,13 +115,19 @@
<figure>
<img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
</figure>
<h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
<p class="latin">Acorus calamus L.</p>
<div class="name">
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
<p class="latin">Acorus calamus L.</p>
</div>
</div>
<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 class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
@ -64,9 +139,9 @@
<section class="family">
<section class="family" id="amaranthaceae">
<div class="family__header">
<div class="family__header" >
<h2 class="title">Amaranthaceae</h2>
<p class="nbr-species">7 espèces</p>
</div>
@ -78,14 +153,18 @@
<figure>
<img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
</figure>
<h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
<p class="latin">Acorus calamus L.</p>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
<p class="latin">Acorus calamus L.</p>
</div>
<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>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
@ -93,16 +172,20 @@
<figure>
<img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
</figure>
<h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
<p class="latin">Alnus glutinosa</p>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
<p class="latin">Alnus glutinosa</p>
</div>
<div class="chart-edit">
<abbr title="Rempli à 100 % (21 / 21) et vérifié à 90 % (19 / 21)"><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 0 0 50 100 A 50 50 0 0 0 50 0"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 21.834 8.68806 L 50 50 Z"></path></svg></abbr>
</div>
<button class="btn-edit">
<include src="/components/icons/edit.svg"></include>
</button>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
@ -110,16 +193,20 @@
<figure>
<img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
</figure>
<h3 class="vernacular"><a href="#" target="_blank">Gouet d'Italie</a></h3>
<p class="latin">Arum Italicum Mill.</p>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Gouet d'Italie</a></h3>
<p class="latin">Arum Italicum Mill.</p>
</div>
<div class="chart-edit">
<abbr title="Rempli à 95 % (22 / 23) et vérifié à 82 % (19 / 23)"><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 36.5102 1.85414 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 5.60574 26.9967 L 50 50 Z"></path></svg></abbr>
</div>
<button class="btn-edit">
<include src="/components/icons/edit.svg"></include>
</button>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
@ -127,16 +214,20 @@
<figure>
<img src="/images/Ballota_nigra_morphology_outlook_illustration_photo.jpeg">
</figure>
<h3 class="vernacular">Charme commun</h3>
<p class="latin">Carpinus betulus L.</p>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Charme commun</a></h3>
<p class="latin">Carpinus betulus L.</p>
</div>
<div class="chart-edit">
<abbr title="Rempli à 0 % (0 / 5) et vérifié à 0 % (0 / 5)"><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 0 1 50 0 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>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
@ -144,14 +235,18 @@
<figure>
<img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
</figure>
<h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
<p class="latin">Acorus calamus L.</p>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
<p class="latin">Acorus calamus L.</p>
</div>
<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>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
@ -159,16 +254,20 @@
<figure>
<img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
</figure>
<h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
<p class="latin">Alnus glutinosa</p>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
<p class="latin">Alnus glutinosa</p>
</div>
<div class="chart-edit">
<abbr title="Rempli à 100 % (21 / 21) et vérifié à 90 % (19 / 21)"><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 0 0 50 100 A 50 50 0 0 0 50 0"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 21.834 8.68806 L 50 50 Z"></path></svg></abbr>
</div>
<button class="btn-edit">
<include src="/components/icons/edit.svg"></include>
</button>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
@ -176,16 +275,20 @@
<figure>
<img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
</figure>
<h3 class="vernacular"><a href="#" target="_blank">Gouet d'Italie</a></h3>
<p class="latin">Arum Italicum Mill.</p>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Gouet d'Italie</a></h3>
<p class="latin">Arum Italicum Mill.</p>
</div>
<div class="chart-edit">
<abbr title="Rempli à 95 % (22 / 23) et vérifié à 82 % (19 / 23)"><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 36.5102 1.85414 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 5.60574 26.9967 L 50 50 Z"></path></svg></abbr>
</div>
<button class="btn-edit">
<include src="/components/icons/edit.svg"></include>
</button>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
@ -193,16 +296,20 @@
<figure>
<img src="/images/Ballota_nigra_morphology_outlook_illustration_photo.jpeg">
</figure>
<h3 class="vernacular">Charme commun</h3>
<p class="latin">Carpinus betulus L.</p>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Charme commun</a></h3>
<p class="latin">Carpinus betulus L.</p>
</div>
<div class="chart-edit">
<abbr title="Rempli à 0 % (0 / 5) et vérifié à 0 % (0 / 5)"><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 0 1 50 0 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>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
@ -212,7 +319,7 @@
</section>
<section class="family">
<section class="family" id="amaryllidaceae">
<div class="family__header">
<h2 class="title">Amaryllidaceae</h2>
@ -226,14 +333,18 @@
<figure>
<img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
</figure>
<h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
<p class="latin">Acorus calamus L.</p>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
<p class="latin">Acorus calamus L.</p>
</div>
<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>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
@ -241,16 +352,20 @@
<figure>
<img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
</figure>
<h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
<p class="latin">Alnus glutinosa</p>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
<p class="latin">Alnus glutinosa</p>
</div>
<div class="chart-edit">
<abbr title="Rempli à 100 % (21 / 21) et vérifié à 90 % (19 / 21)"><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 0 0 50 100 A 50 50 0 0 0 50 0"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 21.834 8.68806 L 50 50 Z"></path></svg></abbr>
</div>
<button class="btn-edit">
<include src="/components/icons/edit.svg"></include>
</button>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
@ -258,16 +373,20 @@
<figure>
<img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
</figure>
<h3 class="vernacular"><a href="#" target="_blank">Gouet d'Italie</a></h3>
<p class="latin">Arum Italicum Mill.</p>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Gouet d'Italie</a></h3>
<p class="latin">Arum Italicum Mill.</p>
</div>
<div class="chart-edit">
<abbr title="Rempli à 95 % (22 / 23) et vérifié à 82 % (19 / 23)"><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 36.5102 1.85414 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 5.60574 26.9967 L 50 50 Z"></path></svg></abbr>
</div>
<button class="btn-edit">
<include src="/components/icons/edit.svg"></include>
</button>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
@ -275,16 +394,20 @@
<figure>
<img src="/images/Ballota_nigra_morphology_outlook_illustration_photo.jpeg">
</figure>
<h3 class="vernacular">Charme commun</h3>
<p class="latin">Carpinus betulus L.</p>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Charme commun</a></h3>
<p class="latin">Carpinus betulus L.</p>
</div>
<div class="chart-edit">
<abbr title="Rempli à 0 % (0 / 5) et vérifié à 0 % (0 / 5)"><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 0 1 50 0 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>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
@ -292,14 +415,18 @@
<figure>
<img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
</figure>
<h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
<p class="latin">Acorus calamus L.</p>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
<p class="latin">Acorus calamus L.</p>
</div>
<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>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
@ -307,16 +434,20 @@
<figure>
<img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
</figure>
<h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
<p class="latin">Alnus glutinosa</p>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
<p class="latin">Alnus glutinosa</p>
</div>
<div class="chart-edit">
<abbr title="Rempli à 100 % (21 / 21) et vérifié à 90 % (19 / 21)"><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 0 0 50 100 A 50 50 0 0 0 50 0"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 21.834 8.68806 L 50 50 Z"></path></svg></abbr>
</div>
<button class="btn-edit">
<include src="/components/icons/edit.svg"></include>
</button>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
@ -324,16 +455,20 @@
<figure>
<img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
</figure>
<h3 class="vernacular"><a href="#" target="_blank">Gouet d'Italie</a></h3>
<p class="latin">Arum Italicum Mill.</p>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Gléchome lierre terrestre</a></h3>
<p class="latin">Glechoma hederacea</p>
</div>
<div class="chart-edit">
<abbr title="Rempli à 95 % (22 / 23) et vérifié à 82 % (19 / 23)"><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 36.5102 1.85414 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 5.60574 26.9967 L 50 50 Z"></path></svg></abbr>
</div>
<button class="btn-edit">
<include src="/components/icons/edit.svg"></include>
</button>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
@ -341,16 +476,20 @@
<figure>
<img src="/images/Ballota_nigra_morphology_outlook_illustration_photo.jpeg">
</figure>
<h3 class="vernacular">Charme commun</h3>
<p class="latin">Carpinus betulus L.</p>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Charme commun</a></h3>
<p class="latin">Carpinus betulus L.</p>
</div>
<div class="chart-edit">
<abbr title="Rempli à 0 % (0 / 5) et vérifié à 0 % (0 / 5)"><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 0 1 50 0 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>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
@ -359,6 +498,11 @@
</section>
</section>
</div>
</main>