Práctica de pianoÚltimas 12 semanas

HTML + CSSInfo-bulles

Carte d’activité avec infobulle

Une grille de douze semaines de pratique : survole ou avance aux flèches, une infobulle donne les minutes et la date.

Réglages

16px
1x

Code

<div class="uvq08-hm"><p class="hd"><b>Pratique du piano</b><span>12 dernières semaines</span></p><div class="gd show" role="group" aria-label="Pratique du piano"><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v2" data-m="34" aria-label="34 min" tabindex="-1"></button><button type="button" class="v2" data-m="31" aria-label="31 min" tabindex="-1"></button><button type="button" class="v1" data-m="6" aria-label="6 min" tabindex="-1"></button><button type="button" class="v3" data-m="53" aria-label="53 min" tabindex="-1"></button><button type="button" class="v4" data-m="69" aria-label="69 min" tabindex="-1"></button><button type="button" class="v2" data-m="37" aria-label="37 min" tabindex="-1"></button><button type="button" class="v1" data-m="16" aria-label="16 min" tabindex="-1"></button><button type="button" class="v2" data-m="21" aria-label="21 min" tabindex="-1"></button><button type="button" class="v3" data-m="49" aria-label="49 min" tabindex="-1"></button><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v3" data-m="55" aria-label="55 min" tabindex="-1"></button><button type="button" class="v4" data-m="63" aria-label="63 min" tabindex="-1"></button><button type="button" class="v4" data-m="61" aria-label="61 min" tabindex="-1"></button><button type="button" class="v2" data-m="25" aria-label="25 min" tabindex="-1"></button><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v2" data-m="35" aria-label="35 min" tabindex="-1"></button><button type="button" class="v1" data-m="8" aria-label="8 min" tabindex="-1"></button><button type="button" class="v3" data-m="46" aria-label="46 min" tabindex="-1"></button><button type="button" class="v1" data-m="19" aria-label="19 min" tabindex="-1"></button><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v1" data-m="16" aria-label="16 min" tabindex="-1"></button><button type="button" class="v3" data-m="55" aria-label="55 min" tabindex="-1"></button><button type="button" class="v3" data-m="44" aria-label="44 min" tabindex="-1"></button><button type="button" class="v3" data-m="45" aria-label="45 min" tabindex="-1"></button><button type="button" class="v3" data-m="51" aria-label="51 min" tabindex="-1"></button><button type="button" class="v3" data-m="51" aria-label="51 min" tabindex="-1"></button><button type="button" class="v1" data-m="7" aria-label="7 min" tabindex="-1"></button><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v2" data-m="35" aria-label="35 min" tabindex="-1"></button><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v3" data-m="40" aria-label="40 min" tabindex="-1"></button><button type="button" class="v4" data-m="75" aria-label="75 min" tabindex="-1"></button><button type="button" class="v1" data-m="18" aria-label="18 min" tabindex="-1"></button><button type="button" class="v1" data-m="16" aria-label="16 min" tabindex="-1"></button><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v3" data-m="49" aria-label="49 min" tabindex="-1"></button><button type="button" class="v2" data-m="36" aria-label="36 min" tabindex="-1"></button><button type="button" class="v4" data-m="70" aria-label="70 min" tabindex="-1"></button><button type="button" class="v1" data-m="9" aria-label="9 min" tabindex="-1"></button><button type="button" class="v2" data-m="22" aria-label="22 min" tabindex="-1"></button><button type="button" class="v2" data-m="22" aria-label="22 min" tabindex="-1"></button><button type="button" class="v3" data-m="53" aria-label="53 min" tabindex="-1"></button><button type="button" class="v3" data-m="50" aria-label="50 min" tabindex="-1"></button><button type="button" class="v2" data-m="35" aria-label="35 min" tabindex="-1"></button><button type="button" class="v4" data-m="69" aria-label="69 min" tabindex="-1"></button><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v3" data-m="58" aria-label="58 min" tabindex="-1"></button><button type="button" class="v2" data-m="33" aria-label="33 min" tabindex="-1"></button><button type="button" class="v3" data-m="45" aria-label="45 min" tabindex="-1"></button><button type="button" class="v2" data-m="35" aria-label="35 min" tabindex="-1"></button><button type="button" class="v3" data-m="57" aria-label="57 min" tabindex="-1"></button><button type="button" class="v3" data-m="52" aria-label="52 min" tabindex="-1"></button><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v3" data-m="54" aria-label="54 min" tabindex="-1"></button><button type="button" class="v3" data-m="44" aria-label="44 min" tabindex="-1"></button><button type="button" class="v4" data-m="62" aria-label="62 min" tabindex="-1"></button><button type="button" class="v3" data-m="51" aria-label="51 min" tabindex="-1"></button><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v3" data-m="53" aria-label="53 min" tabindex="-1"></button><button type="button" class="v1" data-m="10" aria-label="10 min" tabindex="-1"></button><button type="button" class="v2" data-m="32" aria-label="32 min" tabindex="-1"></button><button type="button" class="v2" data-m="34" aria-label="34 min" tabindex="-1"></button><button type="button" class="v2" data-m="37" aria-label="37 min" tabindex="-1"></button><button type="button" class="v3" data-m="58" aria-label="58 min" tabindex="-1"></button><button type="button" class="v3" data-m="50" aria-label="50 min" tabindex="-1"></button><button type="button" class="v1" data-m="14" aria-label="14 min" tabindex="-1"></button><button type="button" class="v3" data-m="43" aria-label="43 min" tabindex="-1"></button><button type="button" class="v2" data-m="31" aria-label="31 min" tabindex="-1"></button><button type="button" class="v3" data-m="46" aria-label="46 min" tabindex="-1"></button><button type="button" class="v4" data-m="63" aria-label="63 min" tabindex="-1"></button><button type="button" class="v2" data-m="38" aria-label="38 min" tabindex="-1"></button><button type="button" class="v3" data-m="49" aria-label="49 min" tabindex="-1"></button><button type="button" class="v2" data-m="25" aria-label="25 min" tabindex="-1"></button><button type="button" class="v2" data-m="33" aria-label="33 min" tabindex="-1"></button><button type="button" class="v2" data-m="37" aria-label="37 min" tabindex="-1"></button><button type="button" class="v3" data-m="44" aria-label="44 min" tabindex="-1"></button><button type="button" class="v4" data-m="73" aria-label="73 min" tabindex="-1"></button><button type="button" class="v3 on" data-m="48" aria-label="48 min" tabindex="0"></button><span class="tt" aria-hidden="true"><b>48 min</b><span>dim. 25 oct.</span></span></div><p class="lg" aria-hidden="true"><span>Moins</span><i class="v0"></i><i class="v1"></i><i class="v2"></i><i class="v3"></i><i class="v4"></i><span>Plus</span></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.

Version Markdown avec tout le code, pour les assistants IA

Plus dans Info-bulles

Voir tout : Info-bulles

Où l’utiliser

Une grille de douze semaines sur sept jours en cinq nuances d’ambre, comme un graphique de contributions pour la pratique du piano. Une seule infobulle glisse jusqu’à la case survolée ou focalisée avec les minutes et une date dans la langue de la page. La grille n’a qu’un arrêt de tabulation, les flèches se déplacent dans les deux sens et Début et Fin sautent le long de la ligne.

La couleur principale règle les cinq niveaux de l’échelle. Remplace les données générées par tes minutes, tes pas, tes commits ou tes ventes, et modifie la date de départ dans le script pour que les libellés correspondent à de vrais jours.