Fases de la luna
Ocho lunas en un cielo nocturno: marca las fases que te sirven para observar y se encienden con un halo.
Ajustes
Código
<fieldset class="uvq05-mo"><legend>Fase lunar</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">Luna nueva</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">Creciente</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">Cuarto creciente</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">Gibosa creciente</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">Luna llena</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">Gibosa menguante</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">Cuarto menguante</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">Menguante</span></label></div><p class="ct"><span>Fases elegidas:</span> <span class="n"></span></p></fieldset>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Filtros
Ver todos: FiltrosDónde usarlo
Las apps de astronomía, fotografía nocturna o pesca suelen filtrar por fase lunar, y dibujar cada fase funciona mejor que una lista de nombres. Cada luna es un SVG en línea cuya parte iluminada se construye con dos arcos, así que crecientes y gibosas salen exactas. Las casillas encienden cada una con un halo cálido sobre un cielo de estrellas que titilan.
El primer color es la luz de la luna y el segundo el cielo, así que puedes ir de un azul helado a un sepia. Renombra las fases para tu público y acompaña el filtro de un calendario que marque las noches que encajan.