HTML + CSSFiltres
Phases de la lune
Huit lunes dans un ciel nocturne : coche les phases utiles pour observer et elles s'allument avec un halo.
Réglages
16px
1x
Code
<fieldset class="uvq05-mo"><legend>Phase lunaire</legend><div class="gr"><label><input type="checkbox"><span class="mn"><svg viewBox="-22 -22 44 44" aria-hidden="true"><circle class="dk" r="20"/><g class="cr"><circle cx="-6" cy="-6" r="3.4"/><circle cx="7" cy="3" r="4.2"/><circle cx="-3" cy="10" r="2.4"/></g></svg></span><span class="nm">Nouvelle lune</span></label><label><input type="checkbox"><span class="mn"><svg viewBox="-22 -22 44 44" aria-hidden="true"><circle class="dk" r="20"/><path class="lt" d="M0 -20A20 20 0 0 1 0 20A14.14 20 0 0 0 0 -20Z"/><g class="cr"><circle cx="-6" cy="-6" r="3.4"/><circle cx="7" cy="3" r="4.2"/><circle cx="-3" cy="10" r="2.4"/></g></svg></span><span class="nm">Premier croissant</span></label><label><input type="checkbox"><span class="mn"><svg viewBox="-22 -22 44 44" aria-hidden="true"><circle class="dk" r="20"/><path class="lt" d="M0 -20A20 20 0 0 1 0 20A0.00 20 0 0 1 0 -20Z"/><g class="cr"><circle cx="-6" cy="-6" r="3.4"/><circle cx="7" cy="3" r="4.2"/><circle cx="-3" cy="10" r="2.4"/></g></svg></span><span class="nm">Premier quartier</span></label><label><input type="checkbox" checked><span class="mn"><svg viewBox="-22 -22 44 44" aria-hidden="true"><circle class="dk" r="20"/><path class="lt" d="M0 -20A20 20 0 0 1 0 20A14.14 20 0 0 1 0 -20Z"/><g class="cr"><circle cx="-6" cy="-6" r="3.4"/><circle cx="7" cy="3" r="4.2"/><circle cx="-3" cy="10" r="2.4"/></g></svg></span><span class="nm">Gibbeuse croissante</span></label><label><input type="checkbox" checked><span class="mn"><svg viewBox="-22 -22 44 44" aria-hidden="true"><circle class="dk" r="20"/><circle class="lt" r="20"/><g class="cr"><circle cx="-6" cy="-6" r="3.4"/><circle cx="7" cy="3" r="4.2"/><circle cx="-3" cy="10" r="2.4"/></g></svg></span><span class="nm">Pleine lune</span></label><label><input type="checkbox" checked><span class="mn"><svg viewBox="-22 -22 44 44" aria-hidden="true"><circle class="dk" r="20"/><path class="lt" d="M0 -20A20 20 0 0 0 0 20A14.14 20 0 0 0 0 -20Z"/><g class="cr"><circle cx="-6" cy="-6" r="3.4"/><circle cx="7" cy="3" r="4.2"/><circle cx="-3" cy="10" r="2.4"/></g></svg></span><span class="nm">Gibbeuse décroissante</span></label><label><input type="checkbox"><span class="mn"><svg viewBox="-22 -22 44 44" aria-hidden="true"><circle class="dk" r="20"/><path class="lt" d="M0 -20A20 20 0 0 0 0 20A0.00 20 0 0 0 0 -20Z"/><g class="cr"><circle cx="-6" cy="-6" r="3.4"/><circle cx="7" cy="3" r="4.2"/><circle cx="-3" cy="10" r="2.4"/></g></svg></span><span class="nm">Dernier quartier</span></label><label><input type="checkbox"><span class="mn"><svg viewBox="-22 -22 44 44" aria-hidden="true"><circle class="dk" r="20"/><path class="lt" d="M0 -20A20 20 0 0 0 0 20A14.14 20 0 0 1 0 -20Z"/><g class="cr"><circle cx="-6" cy="-6" r="3.4"/><circle cx="7" cy="3" r="4.2"/><circle cx="-3" cy="10" r="2.4"/></g></svg></span><span class="nm">Dernier croissant</span></label></div><p class="ct"><span>Phases choisies :</span> <span class="n"></span></p></fieldset>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Filtres
Voir tout : FiltresOù l’utiliser
Les applis d'astronomie, de photo de nuit ou de pêche filtrent souvent par phase lunaire, et dessiner chaque phase marche mieux qu'une liste de noms. Chaque lune est un SVG en ligne dont la partie éclairée est construite avec deux arcs, si bien que croissants et gibbeuses sont exacts. Les cases allument chacune d'un halo chaud sur un ciel d'étoiles qui scintillent.
La première couleur est la lumière de la lune et la seconde le ciel, du bleu glacé au sépia. Renomme les phases pour ton public et associe le filtre à un calendrier qui marque les nuits qui conviennent.