Cards
Patterns de cartes utilises dans Speedcube Master : cartes d'information, de statistiques, de listes, d'actions, de fonctionnalites, et leurs dispositions en grille responsive.
Carte d'information
La carte de base affiche un titre, une description et du contenu. Elle utilise le fond bg-card et une bordure border-border.
Session en cours
3x3 - CFOP - Demarree il y a 15 minutes
12 solves effectuees dans cette session. Moyenne actuelle : 14.23s
Carte de statistique
Les cartes de stats affichent une valeur numerique mise en evidence avec un label descriptif. Elles utilisent la police mono pour les chiffres et sont souvent disposees en grille 2x2 ou 4 colonnes.
Meilleur temps
8.42
secondes
Ao5
12.67
secondes
Ao12
13.45
secondes
Total solves
1,247
cette semaine
Carte de liste
Les cartes de liste sont utilisees pour afficher des elements dans une liste verticale (solves, sessions, algorithmes). Elles ont un layout horizontal avec des informations alignees.
R U R' U' R' F R2 U' R' U' R U R' F'
F R U' R' U' R U R' F' R U R' U' R' F R F'
R' U' F' R U R' U' R' F R2 U' R' U' R U R' U R
Carte d'action
Les cartes d'action contiennent des boutons dans le footer. Elles sont utilisees pour les formulaires, confirmations ou elements interactifs.
Supprimer la session
Cette action est irreversible. Toutes les solves de cette session seront supprimees.
Carte de fonctionnalite
Les cartes de fonctionnalite mettent en avant une fonctionnalite avec une icone, un titre et une description. Elles sont souvent utilisees sur la page d'accueil ou les pages marketing.
Timer precis
Chronometre au millieme avec inspection WCA et stackmat.
Base d'algorithmes
Tous les algos OLL, PLL, ZBLL avec visualisation 3D.
Multijoueur
Salles en temps reel pour s'affronter entre amis.
Grilles responsives
Les cartes sont disposees dans des grilles responsives qui s'adaptent a la taille de l'ecran. Voici les patterns de grille les plus courants.
// 1 → 2 → 3 colonnes (defaut pour les cartes de contenu)
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
{/* Cartes */}
</div>
// 2 → 4 colonnes (stats compactes)
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
{/* Cartes de stats */}
</div>
// 1 → 2 colonnes (formulaires, settings)
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{/* Sections de formulaire */}
</div>
// Carte pleine largeur + grille (layout mixte)
<div className="space-y-6">
{/* Carte hero pleine largeur */}
<Card className="col-span-full">
<CardContent className="pt-6">
<h2>Vue d'ensemble</h2>
</CardContent>
</Card>
{/* Grille de stats en dessous */}
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
{/* Cartes de stats */}
</div>
</div>
// Auto-fill avec min-width (nombre de colonnes flexible)
<div className="grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-4">
{/* Cartes qui s'adaptent automatiquement */}
</div>