El tiempo en Toledo
Prévisions météo en pâte à modeler
Des pastilles en pâte à modeler avec la météo de chaque jour ; au survol, une infobulle moelleuse rebondit avec les prévisions horaires.
Réglages
Code
<div class="uvq08-cly"><div class="ds"><span class="wr pk"><button type="button" class="dy" aria-describedby="uvq08-cly-0"><span class="dn">Aujourd’hui</span><i class="ic sun" aria-hidden="true"><i class="s"></i></i><b>18°</b></button><span class="tt" role="tooltip" id="uvq08-cly-0"><span class="hr"><span class="hh">9:00</span><i class="ic sun" aria-hidden="true"><i class="s"></i></i><b>12°</b></span><span class="hr"><span class="hh">12:00</span><i class="ic sun" aria-hidden="true"><i class="s"></i></i><b>17°</b></span><span class="hr"><span class="hh">15:00</span><i class="ic pc" aria-hidden="true"><i class="s"></i><i class="c"></i></i><b>19°</b></span><span class="hr"><span class="hh">18:00</span><i class="ic pc" aria-hidden="true"><i class="s"></i><i class="c"></i></i><b>16°</b></span></span></span><span class="wr"><button type="button" class="dy" aria-describedby="uvq08-cly-1"><span class="dn">Ven</span><i class="ic rn" aria-hidden="true"><i class="c"></i><i class="d"></i></i><b>15°</b></button><span class="tt" role="tooltip" id="uvq08-cly-1"><span class="hr"><span class="hh">9:00</span><i class="ic rn" aria-hidden="true"><i class="c"></i><i class="d"></i></i><b>11°</b></span><span class="hr"><span class="hh">12:00</span><i class="ic rn" aria-hidden="true"><i class="c"></i><i class="d"></i></i><b>13°</b></span><span class="hr"><span class="hh">15:00</span><i class="ic pc" aria-hidden="true"><i class="s"></i><i class="c"></i></i><b>15°</b></span><span class="hr"><span class="hh">18:00</span><i class="ic rn" aria-hidden="true"><i class="c"></i><i class="d"></i></i><b>12°</b></span></span></span><span class="wr"><button type="button" class="dy" aria-describedby="uvq08-cly-2"><span class="dn">Sam</span><i class="ic pc" aria-hidden="true"><i class="s"></i><i class="c"></i></i><b>21°</b></button><span class="tt" role="tooltip" id="uvq08-cly-2"><span class="hr"><span class="hh">9:00</span><i class="ic pc" aria-hidden="true"><i class="s"></i><i class="c"></i></i><b>14°</b></span><span class="hr"><span class="hh">12:00</span><i class="ic sun" aria-hidden="true"><i class="s"></i></i><b>19°</b></span><span class="hr"><span class="hh">15:00</span><i class="ic sun" aria-hidden="true"><i class="s"></i></i><b>21°</b></span><span class="hr"><span class="hh">18:00</span><i class="ic pc" aria-hidden="true"><i class="s"></i><i class="c"></i></i><b>18°</b></span></span></span></div><p class="hd">Météo à Tolède</p></div>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 Info-bulles
Voir tout : Info-bullesOù l’utiliser
Trois pastilles de jour façonnées comme de la pâte à modeler, avec des reflets intérieurs, des ombres douces et de petites icônes de soleil, nuage et pluie faites de formes arrondies. Au survol ou au focus, une infobulle dans la même matière arrive en rebondissant comme une gelée, avec quatre heures d’icônes et de températures, reliée à la pastille par deux petites gouttes.
La couleur principale règle les températures, la secondaire la pâte elle-même, du sable au rose pâle. Garde quatre ou cinq heures par jour pour que l’infobulle reste compacte dans un widget météo ou un carnet de voyage, et façonne tes propres formes pour la neige ou le vent.