Monstera del salón
Humedad de la tierra22 %
Necesita agua
HTML + CSSCartes
Pot en terre cuite à arroser
Une plante en pot de terre cuite : l'arroser fait tomber des gouttes, monter l'humidité du sol et redresser les feuilles.
Réglages
16px
1x
Code
<article class="uvq07-plt"><div class="stg"><svg viewBox="0 0 120 130" aria-hidden="true"><defs><linearGradient id="uvq07-plt-g" x1="0" x2="1"><stop class="g1" offset="0"/><stop class="g2" offset=".45"/><stop class="g1" offset="1"/></linearGradient></defs><g class="lv"><g transform="translate(60 84) scale(0.8)"><g class="lf" style="--r:-52deg"><path class="sm" d="M0 0Q-1-14 0-28"/><path class="lp" d="M0-28C-12-32-15-48-3-60C9-50 9-36 0-28Z"/><path class="vn" d="M0-29L-2.4-55"/></g></g><g transform="translate(60 84) scale(1)"><g class="lf" style="--r:-24deg"><path class="sm" d="M0 0Q-1-14 0-28"/><path class="lp" d="M0-28C-12-32-15-48-3-60C9-50 9-36 0-28Z"/><path class="vn" d="M0-29L-2.4-55"/></g></g><g transform="translate(60 84) scale(1.14)"><g class="lf" style="--r:2deg"><path class="sm" d="M0 0Q-1-14 0-28"/><path class="lp" d="M0-28C-12-32-15-48-3-60C9-50 9-36 0-28Z"/><path class="vn" d="M0-29L-2.4-55"/></g></g><g transform="translate(60 84) scale(0.96)"><g class="lf" style="--r:27deg"><path class="sm" d="M0 0Q-1-14 0-28"/><path class="lp" d="M0-28C-12-32-15-48-3-60C9-50 9-36 0-28Z"/><path class="vn" d="M0-29L-2.4-55"/></g></g><g transform="translate(60 84) scale(0.78)"><g class="lf" style="--r:50deg"><path class="sm" d="M0 0Q-1-14 0-28"/><path class="lp" d="M0-28C-12-32-15-48-3-60C9-50 9-36 0-28Z"/><path class="vn" d="M0-29L-2.4-55"/></g></g></g><path class="pb" d="M34 92h52l-6 32H40z"/><rect class="rm" x="29" y="83" width="62" height="11" rx="2.5"/><ellipse class="so" cx="60" cy="84" rx="27" ry="2.4"/></svg><span class="dp" aria-hidden="true"><i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i><i style="--i:3"></i><i style="--i:4"></i></span><span class="can" aria-hidden="true"><svg viewBox="0 0 32 24"><path d="M14 8h12v13H14z" fill="currentColor"/><path d="M14 11L4 5M2 3.5l4.5-.8.6 4.4zM26 10c4.5 0 4.5 8 0 8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span></div><h3>Monstera du salon</h3><p class="mt"><span>Humidité du sol</span><b>22 %</b><i></i></p><p class="st" aria-live="polite" data-a="A besoin d’eau" data-b="Bien arrosée">A besoin d’eau</p><div class="bs"><button type="button" class="wa">Arroser</button><button type="button" class="wk">Passer une semaine</button></div></article>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 Cartes
Voir tout : CartesOù l’utiliser
Une petite histoire racontée en SVG et CSS : les feuilles commencent tombantes et jaunies, l'arrosoir s'incline, des gouttes tombent dans la terre, la barre d'humidité monte et les feuilles se redressent avec un rebond. Un second bouton avance d'une semaine et les fait retomber. Pour applis d'entretien des plantes, jardineries, suivis d'habitudes et tableaux de capteurs.
La couleur principale est le pot en terre cuite et l'alerte, la seconde le vert des feuilles saines. Renomme la plante, ajuste l'humidité dans le script ou réutilise l'effet pour tout état qui demande de l'attention.