Aller au contenu

Planning de cours hebdomadaire

Le planning de la semaine d'un studio ou d'une école, filtrable par discipline et par niveau, avec les places restantes et une vue jour par jour sur mobile.

  • Tailwind
  • React
  • CSS
  • WordPress
Ouvrir dans un nouvel onglet

Description

Pensé pour une salle de sport, une école de danse ou de musique : chaque cours affiche horaire, niveau, professeur, salle et places restantes, avec une jauge de remplissage et la mention « Dernière place » ou « Complet ». Deux groupes de filtres (discipline, niveau) et une case « Masquer les cours complets » se combinent ; une zone de statut annonce le nombre de cours affichés et chaque jour vide l'indique. Sur ordinateur, la semaine s'affiche en six colonnes ; sous 768 px, elle devient des onglets jour par jour qui montrent le nombre de cours restant après filtrage, ouverts sur le jour courant. Les couleurs de discipline passent par des variables CSS faciles à changer. Accessibilité : filtres en boutons à état (aria-pressed), onglets ARIA avec flèches, Début et Fin, l'information de places n'est jamais portée par la seule couleur, contrastes AA en clair comme en sombre, transitions coupées avec prefers-reduced-motion. Sans JavaScript, toute la semaine reste lisible.

Code

Chargement du code…

Contenu de l'archive

planning-cours-hebdomadaire-html-tailwind.zip3 fichiers · 7 Ko

  • index.html39 Ko
  • README.md4 Ko
  • LICENSE.md1 Ko

Mots-clés

Mis à jour le 16 octobre 2026.

Dans le même esprit

  • Un tableau de données dont chaque colonne se trie d'un clic, par ordre croissant ou décroissant, sans bibliothèque.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant
  • Un vrai tableau sur grand écran dont chaque ligne devient une carte lisible sur mobile, sans défilement horizontal ni JavaScript.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant
  • La page panier complète : quantités modifiables au clavier, retrait annulable, code promo, jauge de livraison offerte et totaux recalculés puis annoncés.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant
  • Un panneau de filtres à facettes pour un catalogue : catégorie, prix, taille, couleur et stock, avec compteur de résultats, puces des filtres actifs, tri et tiroir sur mobile.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant