Le catalogue de tout ce qui sert à construire la console de sécurité, expliqué pièce par pièce.
Définit l'en-tête de la page : ici l'identité de la console (titre + indicateurs). C'est une balise « sémantique » : elle donne un sens à la zone, contrairement à une simple <div>.
Dans le TP : contient le titre « SOC Security Events » et les KPI.
La zone centrale et unique de la page. On y met le contenu le plus important. Ici, c'est elle qui porte la grille (aside + tableau).
Dans le TP : configurée en display: grid pour placer les filtres et le tableau côte à côte.
Un contenu « à côté » du contenu principal : parfait pour un panneau de filtres, une barre latérale, des infos annexes.
Dans le TP : le panneau de gauche qui contient le formulaire de filtrage.
Regroupe un ensemble cohérent de contenu. Chaque grande partie logique d'une page peut être une section.
Dans le TP : la zone centrale qui affiche le tableau des événements.
Le bas de la page : mentions, statut, liens de navigation.
Dans le TP : affiche le statut de conformité SecOps et le lien de retour.
Regroupe des champs de saisie. C'est le conteneur qui « collecte » ce que l'utilisateur entre, puis le soumet.
Dans le TP : encadre les champs de filtrage (IP, criticité, type).
Un champ où l'utilisateur tape du texte libre. L'attribut type détermine le comportement (ici du texte simple).
Dans le TP : la saisie de l'adresse IP source à filtrer.
<select> crée une liste déroulante ; chaque <option> est un choix possible.
Dans le TP : les menus « niveau de criticité » et « type d'attaque ».
Le bouton qui valide le formulaire. Au clic, il déclenche la soumission (qu'on intercepte en JS pour filtrer sans recharger).
Dans le TP : le bouton « Appliquer les filtres ».
Le texte associé à un champ. Améliore l'accessibilité (on peut cliquer sur le label pour activer le champ).
Dans le TP : « Adresse IP source », « Niveau de criticité »…
La famille de balises pour construire un tableau :
<table> le conteneur · <thead> l'en-tête · <tbody> le corps · <tr> une ligne · <th> une cellule d'en-tête · <td> une cellule de données.
Dans le TP : le journal des événements SIEM (horodatage, IP, type d'attaque…).
Un attribut « libre » (ex. data-ip, data-crit) pour stocker une info sur un élément, lisible en JavaScript. Ne s'affiche pas à l'écran.
Dans le TP : chaque ligne du tableau porte son IP, sa criticité et son type → c'est ce qui permet au filtre de fonctionner.
Transforme un élément en grille : on peut alors définir des colonnes et des lignes. Idéal pour la structure globale.
/* le main : filtres (300px) + tableau (reste) */ main { display: grid; grid-template-columns: 300px 1fr; gap: 20px; }
Dans le TP : place l'aside et le tableau côte à côte.
Définit le nombre et la largeur des colonnes. 300px 1fr = une colonne fixe de 300px, une autre qui prend tout l'espace restant.
Dans le TP : 300px pour les filtres, 1fr pour le tableau.
Le fr représente une part de l'espace disponible. Souple, contrairement aux pixels fixes.
Dans le TP : la colonne du tableau s'étire pour occuper tout ce qui reste après les 300px.
L'espace entre les éléments d'une grille ou d'un flex. Plus propre que d'ajouter des marges partout.
Dans le TP : gap: 20px entre les filtres et le tableau.
Aligne des éléments sur une ligne (ou une colonne). Parfait pour placer des choses côte à côte et les répartir.
/* header : titre à gauche, KPI à droite */ .soc-header { display: flex; justify-content: space-between; align-items: center; }
Dans le TP : l'en-tête, les indicateurs, les cellules d'action…
Dans un conteneur flex, gère l'espace sur l'axe principal. space-between pousse les éléments aux extrémités.
Dans le TP : sépare le titre (gauche) des KPI (droite) dans le header.
Aligne les éléments flex sur l'axe secondaire. center les centre verticalement.
Dans le TP : aligne verticalement titre et indicateurs du header.
Crée un fond en dégradé entre plusieurs couleurs, dans une direction donnée.
body {
background: linear-gradient(160deg, #0f172a, #020617);
}
Dans le TP : le fond sombre « console de sécurité » (bleu nuit → noir).
Ajoute une ombre autour d'un élément. On peut lui donner une couleur pour un effet de « halo » (ici, façon alerte).
aside {
box-shadow: 0 8px 30px rgba(0,0,0,.25),
0 0 20px rgba(59,130,246,.25);
}
Dans le TP : le léger rayonnement bleu/rouge sur les blocs.
Arrondit les angles d'un élément. À 50% sur un carré, ça donne un cercle (le bouton thème).
Dans le TP : les cartes, les champs, le bouton rond de changement de thème.
Rend un changement (couleur, position…) progressif au lieu d'instantané. C'est ce qui donne les effets fluides au survol.
Dans le TP : le survol des lignes du tableau, des boutons, le changement de thème.
Des « pseudo-classes » qui appliquent un style quand on survole (:hover) ou quand un champ est sélectionné (:focus).
Dans le TP : lignes surlignées au survol, contour bleu des champs actifs.
Réutilise une valeur définie une fois (couleur, taille…). Changer la variable met à jour tout le site d'un coup — c'est ce qui permet le thème clair/sombre.
/* définition */ :root { --accent: #3b82f6; } /* utilisation */ .btn { background: var(--accent); }
Dans le TP : toutes les couleurs passent par des variables → le bouton thème n'a qu'à les redéfinir.
Applique des styles seulement sous certaines conditions (ex. largeur d'écran). C'est la base du responsive — et le grand sujet du Jour 3.
/* sous 760px : une seule colonne */ @media (max-width: 760px) { main { grid-template-columns: 1fr; } }
Dans le TP : fait passer les filtres au-dessus du tableau sur petit écran.