documentation

This commit is contained in:
2026-05-14 15:59:55 +02:00
parent ed67438739
commit e9256f538c
21 changed files with 4380 additions and 561 deletions
@@ -0,0 +1,98 @@
/* ============================================================
doc_calibration.css
Styles spécifiques à la page de calibration du scanner.
Dépend de doc_database.css (variables, composants de base).
============================================================ */
/* ─── Badge teal ─── */
.badge-teal {
background: rgba(45,212,191,.12);
color: var(--accent-teal);
border: 1px solid rgba(45,212,191,.3);
}
/* ─── Badge blue ─── */
.badge-blue {
background: rgba(88,166,255,.12);
color: var(--accent-blue);
border: 1px solid rgba(88,166,255,.3);
}
/* ─── Tag teal ─── */
.tag-teal {
background: rgba(45,212,191,.12);
color: var(--accent-teal);
border: 1px solid rgba(45,212,191,.2);
}
/* ─── Schéma des 3 zones de l'écran ─── */
.screen-layout {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 8px;
margin-bottom: 24px;
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
background: var(--bg-card);
}
.screen-zone {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 20px 10px;
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
text-align: center;
border-right: 1px solid var(--border);
transition: background .15s;
}
.screen-zone:last-child { border-right: none; }
.screen-zone i { font-size: 20px; }
.zone-left { color: var(--accent-indigo); }
.zone-left i { color: var(--accent-indigo); }
.zone-center {
background: rgba(45,212,191,.04);
color: var(--accent-teal);
}
.zone-center i { font-size: 26px; color: var(--accent-teal); }
.zone-right { color: var(--accent-orange); }
.zone-right i { color: var(--accent-orange); }
/* ─── Barre visuelle des seuils de centrage ─── */
.center-bar {
display: flex;
margin-top: 12px;
border-radius: var(--radius-sm);
overflow: hidden;
height: 28px;
font-size: 11px;
font-weight: 700;
}
.cb-seg {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.cb-red { background: rgba(248,81,73,.18); color: var(--accent-red); border: 1px solid rgba(248,81,73,.3); }
.cb-yellow { background: rgba(227,179,65,.18); color: var(--accent-yellow); border: 1px solid rgba(227,179,65,.3); }
.cb-green { background: rgba(63,185,80,.18); color: var(--accent-green); border: 1px solid rgba(63,185,80,.3); }
/* ─── Responsive ─── */
@media (max-width: 768px) {
.screen-layout {
grid-template-columns: 1fr;
}
.screen-zone {
border-right: none;
border-bottom: 1px solid var(--border);
padding: 14px;
}
.screen-zone:last-child { border-bottom: none; }
}
@@ -40,8 +40,10 @@
/* ─── Reset minimal ─── */
*, *::before, *::after { box-sizing: border-box; }
a { color: var(--accent-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
/*a:hover { text-decoration: underline; }*/
ul { padding: 0; margin: 0; list-style: none; }
/* ─── Mise en page principale ─── */
@@ -0,0 +1,126 @@
/* ============================================================
doc_experiments.css
Styles spécifiques à la page "Démarrer des expériences".
Dépend de doc_database.css + doc_calibration.css.
============================================================ */
/* ─── Badges supplémentaires ─── */
.badge-green {
background: rgba(63,185,80,.12);
color: var(--accent-green);
border: 1px solid rgba(63,185,80,.3);
}
.badge-purple {
background: rgba(188,140,255,.12);
color: var(--accent-purple);
border: 1px solid rgba(188,140,255,.3);
}
.badge-orange {
background: rgba(240,136,62,.12);
color: var(--accent-orange);
border: 1px solid rgba(240,136,62,.3);
}
/* ─── Tags supplémentaires ─── */
.tag-purple {
background: rgba(188,140,255,.12);
color: var(--accent-purple);
border: 1px solid rgba(188,140,255,.2);
}
.tag-yellow {
background: rgba(227,179,65,.12);
color: var(--accent-yellow);
border: 1px solid rgba(227,179,65,.2);
}
/* ─── Étapes numérotées ─── */
ol.doc-steps {
list-style: none;
padding: 0;
margin: 8px 0 0;
counter-reset: step-counter;
display: flex;
flex-direction: column;
gap: 8px;
}
ol.doc-steps li {
display: flex;
align-items: flex-start;
gap: 10px;
color: var(--text-secondary);
font-size: 13px;
counter-increment: step-counter;
padding: 6px 8px;
background: rgba(255,255,255,.02);
border-radius: var(--radius-sm);
border: 1px solid var(--border);
transition: background .12s;
}
ol.doc-steps li:hover {
background: rgba(255,255,255,.05);
}
ol.doc-steps li::before {
content: counter(step-counter);
min-width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(88,166,255,.15);
color: var(--accent-blue);
font-size: 11px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 1px;
}
ol.doc-steps li i {
width: 16px;
text-align: center;
margin-top: 2px;
flex-shrink: 0;
}
/* ─── Alert info (bleu, non critique) ─── */
.alert-box.alert-info {
background: rgba(88,166,255,.08);
border-color: rgba(88,166,255,.25);
color: var(--accent-blue);
}
/* ─── Titre de groupe de métriques ─── */
.metrics-group-title {
font-size: 13px;
font-weight: 600;
color: var(--text-secondary);
margin: 16px 0 10px;
display: flex;
align-items: center;
gap: 8px;
text-transform: uppercase;
letter-spacing: .05em;
}
.metrics-group-title i {
color: var(--text-muted);
}
/* ─── Cartes métriques : padding réduit ─── */
.metrics-card {
min-width: 180px;
}
.metrics-card .card-body h4 {
font-size: 13px;
margin-bottom: 8px;
}
/* ─── Tags métriques : inline compact ─── */
.metric-tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 4px;
}
.metric-tags .tag {
font-family: var(--font-mono);
font-size: 11px;
}
@@ -0,0 +1,32 @@
/* ============================================================
doc_results.css
Styles spécifiques à la page "Exploiter les résultats".
Dépend de doc_database.css + doc_calibration.css
+ doc_experiments.css
+ doc_scanning.css.
============================================================ */
/* ─── Bloc chemin serveur ─── */
.path-block {
display: flex;
align-items: center;
gap: 12px;
margin-top: 10px;
padding: 10px 14px;
background: rgba(45,212,191,.06);
border: 1px solid rgba(45,212,191,.2);
border-radius: var(--radius-sm);
color: var(--accent-teal);
}
.path-block i {
font-size: 16px;
flex-shrink: 0;
}
.path-block code {
color: var(--accent-teal);
background: transparent;
border: none;
font-size: 13px;
letter-spacing: .03em;
word-break: break-all;
}
@@ -0,0 +1,54 @@
/* ============================================================
doc_scanning.css
Styles spécifiques à la page "Balayage des puits".
Dépend de doc_database.css + doc_calibration.css
+ doc_experiments.css.
============================================================ */
/* ─── Badge indigo ─── */
.badge-indigo {
background: rgba(129,140,248,.12);
color: var(--accent-indigo);
border: 1px solid rgba(129,140,248,.3);
}
/* ─── Badge red ─── */
.badge-red {
background: rgba(248,81,73,.12);
color: var(--accent-red);
border: 1px solid rgba(248,81,73,.3);
}
/* ─── Badge superadmin ─── */
.badge-superadmin {
font-size: 10px;
background: rgba(188,140,255,.15);
color: var(--accent-purple);
border: 1px solid rgba(188,140,255,.3);
padding: 1px 8px;
border-radius: 20px;
margin-left: 6px;
font-weight: 700;
font-family: var(--font-mono);
}
/* ─── Exemple UUID ─── */
.uuid-example {
display: flex;
align-items: center;
gap: 10px;
margin-top: 10px;
padding: 8px 12px;
background: rgba(227,179,65,.06);
border: 1px dashed rgba(227,179,65,.25);
border-radius: var(--radius-sm);
color: var(--accent-yellow);
font-size: 12.5px;
}
.uuid-example code {
color: var(--accent-yellow);
background: transparent;
border: none;
font-size: 12.5px;
letter-spacing: .04em;
}