mirror of
https://github.com/siop-spelev/siop2.git
synced 2026-08-08 12:41:54 +00:00
docs(r2): kickoff design-first — maquettes des 5 écrans manquants à valider
- maquette-r2.html (moule validé) : demandes + panneau d'approbation (approuver → OT 1-1, rejet à motif requis), nouvel OT (interrupteur personne bloquée), préventif (gabarits à périodicité, essai parachute réglementaire, génération du mois idempotente, premiers contrôles), OT préventif (checklist Fait/N-A, clôture bloquée), compteurs (relevés croissants) - les écrans cœur (dashboard, liste OT, fiche OT/bilan codé, portail) restent ceux validés en R0 - rendu vérifié (5 écrans, bi-thème, zéro erreur) - BLOQUANT : validation du référent avant tout code applicatif R2 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
pr-daaif
755
docs/02-design/maquettes/maquette-r2.html
Normal file
755
docs/02-design/maquettes/maquette-r2.html
Normal file
@@ -0,0 +1,755 @@
|
||||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>SIOP V2 — Maquettes HD · R2 Exploitation</title>
|
||||
</head>
|
||||
<body>
|
||||
<!--
|
||||
SIOP V2 — Maquettes HD de la release R2 « Exploitation » (design-first).
|
||||
À VALIDER PAR LE RÉFÉRENT AVANT TOUT CODE APPLICATIF R2 (principe n°1).
|
||||
Complète les écrans DÉJÀ VALIDÉS en R0 (maquette-web.html : tableau de bord,
|
||||
liste OT, fiche OT avec bilan codé, portail demandeur) — non redessinés ici.
|
||||
CSS répliquée des maquettes validées ; ajouts R2 dans le dernier bloc <style>.
|
||||
-->
|
||||
<style>
|
||||
/* ═══ Tokens (répliques de ../tokens.css) ═══ */
|
||||
:root{
|
||||
--primaire:#1f4fb8;--primaire-actif:#1a439c;--primaire-doux:#eaf0fb;
|
||||
--safran:#dd8a0b;--safran-doux:#fdf3e3;
|
||||
--fond:#f5f7fa;--surface:#ffffff;--surface-2:#eef2f7;
|
||||
--bordure:#dce3ec;--bordure-forte:#b9c4d4;
|
||||
--encre:#1b2534;--encre-2:#55647a;--encre-3:#8494ab;
|
||||
--st-ouvert:#3d6fe0;--st-ouvert-fond:#e9effc;--st-encours:#6d5bd8;--st-encours-fond:#efecfa;
|
||||
--st-attente:#b96f07;--st-attente-fond:#fbf1df;--st-termine:#178a50;--st-termine-fond:#e6f5ec;
|
||||
--st-annule:#68788f;--st-annule-fond:#edf0f4;
|
||||
--prio-bloque:#d92626;--prio-bloque-fond:#fdeaea;--prio-haute:#d92626;
|
||||
--prio-moyenne:#b96f07;--prio-basse:#178a50;--prio-aucune:#8494ab;
|
||||
--succes:#178a50;--alerte:#b96f07;--danger:#d92626;--info:#3d6fe0;
|
||||
--graf-1:#3b69d6;--graf-2:#dd8a0b;--graf-3:#1f9e8e;--graf-4:#8a63d2;--graf-grille:#e6ebf2;
|
||||
--nav-fond:#16233b;--nav-encre:#c6d2e4;--nav-encre-vif:#ffffff;--nav-bordure:#24344f;
|
||||
--police-ui:"Manrope","Avenir Next","Segoe UI Variable",system-ui,sans-serif;
|
||||
--rayon:10px;--rayon-controle:8px;--ombre-menu:0 8px 24px rgb(16 30 54/.14);
|
||||
--transition:140ms ease-out;
|
||||
}
|
||||
@media (prefers-color-scheme:dark){:root{
|
||||
--primaire:#6e92e8;--primaire-actif:#8facf0;--primaire-doux:#1d2c4c;
|
||||
--safran:#e89a1f;--safran-doux:#33270f;
|
||||
--fond:#0f1622;--surface:#182234;--surface-2:#1e2a40;
|
||||
--bordure:#2b3850;--bordure-forte:#3d4d6b;
|
||||
--encre:#e8edf5;--encre-2:#a7b4c8;--encre-3:#6d7d96;
|
||||
--st-ouvert:#7da2ee;--st-ouvert-fond:#1c2a47;--st-encours:#a394ec;--st-encours-fond:#262040;
|
||||
--st-attente:#e0a33c;--st-attente-fond:#322510;--st-termine:#4bc084;--st-termine-fond:#12301f;
|
||||
--st-annule:#93a3ba;--st-annule-fond:#222d3f;
|
||||
--prio-bloque:#f26d6d;--prio-bloque-fond:#3a1414;--prio-haute:#f26d6d;
|
||||
--prio-moyenne:#e0a33c;--prio-basse:#4bc084;--prio-aucune:#6d7d96;
|
||||
--succes:#4bc084;--alerte:#e0a33c;--danger:#f26d6d;--info:#7da2ee;
|
||||
--graf-1:#5580e4;--graf-2:#c7820a;--graf-3:#26a896;--graf-4:#9673de;--graf-grille:#24304a;
|
||||
--nav-fond:#0c1524;--nav-encre:#a7b4c8;--nav-encre-vif:#f2f6fc;--nav-bordure:#1e2c44;
|
||||
--ombre-menu:0 8px 24px rgb(0 0 0/.45);
|
||||
}}
|
||||
:root[data-theme="light"]{
|
||||
--primaire:#1f4fb8;--primaire-actif:#1a439c;--primaire-doux:#eaf0fb;
|
||||
--safran:#dd8a0b;--safran-doux:#fdf3e3;
|
||||
--fond:#f5f7fa;--surface:#ffffff;--surface-2:#eef2f7;
|
||||
--bordure:#dce3ec;--bordure-forte:#b9c4d4;
|
||||
--encre:#1b2534;--encre-2:#55647a;--encre-3:#8494ab;
|
||||
--st-ouvert:#3d6fe0;--st-ouvert-fond:#e9effc;--st-encours:#6d5bd8;--st-encours-fond:#efecfa;
|
||||
--st-attente:#b96f07;--st-attente-fond:#fbf1df;--st-termine:#178a50;--st-termine-fond:#e6f5ec;
|
||||
--st-annule:#68788f;--st-annule-fond:#edf0f4;
|
||||
--prio-bloque:#d92626;--prio-bloque-fond:#fdeaea;--prio-haute:#d92626;
|
||||
--prio-moyenne:#b96f07;--prio-basse:#178a50;--prio-aucune:#8494ab;
|
||||
--succes:#178a50;--alerte:#b96f07;--danger:#d92626;--info:#3d6fe0;
|
||||
--graf-1:#3b69d6;--graf-2:#dd8a0b;--graf-3:#1f9e8e;--graf-4:#8a63d2;--graf-grille:#e6ebf2;
|
||||
--nav-fond:#16233b;--nav-encre:#c6d2e4;--nav-encre-vif:#ffffff;--nav-bordure:#24344f;
|
||||
--ombre-menu:0 8px 24px rgb(16 30 54/.14);
|
||||
}
|
||||
:root[data-theme="dark"]{
|
||||
--primaire:#6e92e8;--primaire-actif:#8facf0;--primaire-doux:#1d2c4c;
|
||||
--safran:#e89a1f;--safran-doux:#33270f;
|
||||
--fond:#0f1622;--surface:#182234;--surface-2:#1e2a40;
|
||||
--bordure:#2b3850;--bordure-forte:#3d4d6b;
|
||||
--encre:#e8edf5;--encre-2:#a7b4c8;--encre-3:#6d7d96;
|
||||
--st-ouvert:#7da2ee;--st-ouvert-fond:#1c2a47;--st-encours:#a394ec;--st-encours-fond:#262040;
|
||||
--st-attente:#e0a33c;--st-attente-fond:#322510;--st-termine:#4bc084;--st-termine-fond:#12301f;
|
||||
--st-annule:#93a3ba;--st-annule-fond:#222d3f;
|
||||
--prio-bloque:#f26d6d;--prio-bloque-fond:#3a1414;--prio-haute:#f26d6d;
|
||||
--prio-moyenne:#e0a33c;--prio-basse:#4bc084;--prio-aucune:#6d7d96;
|
||||
--succes:#4bc084;--alerte:#e0a33c;--danger:#f26d6d;--info:#7da2ee;
|
||||
--graf-1:#5580e4;--graf-2:#c7820a;--graf-3:#26a896;--graf-4:#9673de;--graf-grille:#24304a;
|
||||
--nav-fond:#0c1524;--nav-encre:#a7b4c8;--nav-encre-vif:#f2f6fc;--nav-bordure:#1e2c44;
|
||||
--ombre-menu:0 8px 24px rgb(0 0 0/.45);
|
||||
}
|
||||
|
||||
/* ═══ Base ═══ */
|
||||
*{box-sizing:border-box;margin:0}
|
||||
html,body{background:var(--fond)}
|
||||
body{font-family:var(--police-ui);color:var(--encre);font-size:14px;line-height:1.5}
|
||||
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
|
||||
button:focus-visible,a:focus-visible{outline:2px solid var(--primaire);outline-offset:2px;border-radius:4px}
|
||||
table{border-collapse:collapse;font-variant-numeric:tabular-nums}
|
||||
.num{font-variant-numeric:tabular-nums}
|
||||
|
||||
/* ═══ Barre de revue (outil maquette, pas l'app) ═══ */
|
||||
.revue{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
|
||||
padding:10px 16px;background:var(--nav-fond);color:var(--nav-encre);font-size:13px}
|
||||
.revue b{color:var(--nav-encre-vif);letter-spacing:.02em}
|
||||
.revue .onglets{display:flex;gap:4px;flex-wrap:wrap}
|
||||
.revue .onglets button{padding:6px 10px;border-radius:6px;color:var(--nav-encre)}
|
||||
.revue .onglets button:hover{background:rgb(255 255 255/.08);color:var(--nav-encre-vif)}
|
||||
.revue .onglets button[aria-selected="true"]{background:rgb(255 255 255/.12);color:var(--nav-encre-vif);
|
||||
box-shadow:inset 3px 0 0 var(--safran)}
|
||||
.revue .droite{margin-left:auto;display:flex;align-items:center;gap:8px}
|
||||
.revue .theme{padding:6px 10px;border:1px solid var(--nav-bordure);border-radius:6px}
|
||||
.note-ecran{max-width:1280px;margin:14px auto 0;padding:0 20px;color:var(--encre-2);font-size:13px}
|
||||
.note-ecran b{color:var(--encre)}
|
||||
|
||||
/* ═══ Coquille applicative ═══ */
|
||||
.ecran{display:none;max-width:1280px;margin:14px auto 40px;padding:0 20px}
|
||||
.ecran.actif{display:block}
|
||||
.app{display:grid;grid-template-columns:232px 1fr;min-height:720px;border:1px solid var(--bordure);
|
||||
border-radius:14px;overflow:hidden;background:var(--fond)}
|
||||
.app.pleine{grid-template-columns:1fr}
|
||||
|
||||
/* Sidebar (toujours sombre — identité) */
|
||||
.nav{background:var(--nav-fond);color:var(--nav-encre);display:flex;flex-direction:column;padding:16px 0}
|
||||
.logo{display:flex;align-items:center;gap:10px;padding:2px 18px 16px;color:var(--nav-encre-vif)}
|
||||
.logo .marque{display:flex;flex-direction:column;line-height:.55;font-size:11px;color:var(--safran)}
|
||||
.logo b{font-size:19px;letter-spacing:.04em}
|
||||
.logo small{color:var(--nav-encre);font-weight:400;font-size:11px;display:block;margin-top:2px}
|
||||
.nav .groupe{padding:12px 18px 4px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#6b7f9e}
|
||||
.nav a{display:flex;align-items:center;gap:10px;padding:8px 18px;color:var(--nav-encre);
|
||||
text-decoration:none;font-size:13.5px;border-left:3px solid transparent;transition:background var(--transition)}
|
||||
.nav a:hover{background:rgb(255 255 255/.06);color:var(--nav-encre-vif)}
|
||||
.nav a.actif{background:rgb(255 255 255/.09);color:var(--nav-encre-vif);border-left-color:var(--safran)}
|
||||
.nav a .badge-nav{margin-left:auto;background:var(--prio-bloque);color:#fff;font-size:11px;
|
||||
padding:1px 7px;border-radius:999px;font-weight:700}
|
||||
.nav svg{width:17px;height:17px;stroke-width:1.75;flex:none}
|
||||
|
||||
/* Topbar */
|
||||
.contenu{display:flex;flex-direction:column;min-width:0}
|
||||
.topbar{display:flex;align-items:center;gap:12px;padding:12px 24px;background:var(--surface);
|
||||
border-bottom:1px solid var(--bordure)}
|
||||
.recherche{flex:1;max-width:420px;display:flex;align-items:center;gap:8px;background:var(--surface-2);
|
||||
border:1px solid var(--bordure);border-radius:8px;padding:7px 12px;color:var(--encre-3);font-size:13px}
|
||||
.recherche svg{width:15px;height:15px}
|
||||
.chip-urgence{display:flex;align-items:center;gap:7px;background:var(--prio-bloque-fond);
|
||||
color:var(--prio-bloque);border:1px solid color-mix(in srgb,var(--prio-bloque) 30%,transparent);
|
||||
padding:6px 12px;border-radius:999px;font-weight:700;font-size:12.5px}
|
||||
.point-pulse{width:8px;height:8px;border-radius:50%;background:var(--prio-bloque);animation:pulse 1.4s ease-out infinite}
|
||||
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--prio-bloque) 45%,transparent)}
|
||||
70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
|
||||
@media (prefers-reduced-motion:reduce){.point-pulse{animation:none}}
|
||||
.compte{margin-left:auto;display:flex;align-items:center;gap:10px}
|
||||
.chip-demo{font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--safran);
|
||||
background:var(--safran-doux);padding:3px 9px;border-radius:999px;border:1px dashed var(--safran)}
|
||||
.avatar{width:30px;height:30px;border-radius:50%;background:var(--primaire);color:#fff;display:flex;
|
||||
align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none}
|
||||
.compte .qui{line-height:1.15;font-size:12.5px}
|
||||
.compte .qui small{color:var(--encre-2)}
|
||||
|
||||
/* Corps de page */
|
||||
.page{padding:20px 24px;display:flex;flex-direction:column;gap:16px}
|
||||
.entete-page{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
|
||||
.entete-page h1{font-size:21px;font-weight:700;letter-spacing:-.01em;text-wrap:balance}
|
||||
.entete-page .actions{margin-left:auto;display:flex;gap:8px}
|
||||
.filajout{color:var(--encre-3);font-size:12.5px}
|
||||
.filajout a{color:var(--encre-2);text-decoration:none}
|
||||
|
||||
/* Boutons */
|
||||
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:8px;font-size:13.5px;
|
||||
font-weight:600;border:1px solid var(--bordure-forte);background:var(--surface);color:var(--encre);
|
||||
transition:filter var(--transition)}
|
||||
.btn:hover{filter:brightness(.97)}
|
||||
.btn.prim{background:var(--primaire);border-color:var(--primaire);color:#fff}
|
||||
.btn.succes{background:var(--succes);border-color:var(--succes);color:#fff}
|
||||
.btn.danger-l{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,transparent);background:transparent}
|
||||
.btn.ghost{border-color:transparent;background:transparent;color:var(--encre-2)}
|
||||
.btn:disabled{opacity:.45;cursor:not-allowed}
|
||||
.btn svg{width:15px;height:15px;stroke-width:2}
|
||||
|
||||
/* Cartes */
|
||||
.carte{background:var(--surface);border:1px solid var(--bordure);border-radius:var(--rayon);padding:16px 18px}
|
||||
.carte h2{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--encre-2);margin-bottom:12px}
|
||||
.grille-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
|
||||
.grille-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
|
||||
@media(max-width:900px){.grille-2,.grille-3{grid-template-columns:1fr}}
|
||||
|
||||
/* Tuiles KPI */
|
||||
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
|
||||
@media(max-width:1100px){.kpis{grid-template-columns:repeat(2,1fr)}}
|
||||
.kpi{background:var(--surface);border:1px solid var(--bordure);border-radius:var(--rayon);padding:14px 16px}
|
||||
.kpi .lib{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--encre-2);font-weight:600}
|
||||
.kpi .val{font-size:27px;font-weight:700;letter-spacing:-.02em;margin-top:4px}
|
||||
.kpi .delta{font-size:12px;font-weight:600;margin-top:2px}
|
||||
.delta.bon{color:var(--succes)}.delta.mauvais{color:var(--danger)}.delta.neutre{color:var(--encre-3)}
|
||||
.kpi.alarme{border-color:color-mix(in srgb,var(--danger) 45%,transparent)}
|
||||
.kpi.alarme .val{color:var(--danger)}
|
||||
.anneau{display:flex;align-items:center;gap:12px}
|
||||
.anneau svg{flex:none}
|
||||
|
||||
/* Pastilles statut / priorité */
|
||||
.st{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:700}
|
||||
.st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
|
||||
.st.ouvert{color:var(--st-ouvert);background:var(--st-ouvert-fond)}
|
||||
.st.encours{color:var(--st-encours);background:var(--st-encours-fond)}
|
||||
.st.attente{color:var(--st-attente);background:var(--st-attente-fond)}
|
||||
.st.termine{color:var(--st-termine);background:var(--st-termine-fond)}
|
||||
.st.annule{color:var(--st-annule);background:var(--st-annule-fond)}
|
||||
.prio{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600}
|
||||
.prio i{width:8px;height:8px;border-radius:50%;flex:none}
|
||||
.prio.bloque{color:var(--prio-bloque)}.prio.bloque i{background:var(--prio-bloque);animation:pulse 1.4s ease-out infinite}
|
||||
.prio.haute{color:var(--prio-haute)}.prio.haute i{background:var(--prio-haute)}
|
||||
.prio.moyenne{color:var(--prio-moyenne)}.prio.moyenne i{background:var(--prio-moyenne)}
|
||||
.prio.basse{color:var(--prio-basse)}.prio.basse i{background:var(--prio-basse)}
|
||||
|
||||
/* Bandeau urgence */
|
||||
.bandeau-urgence{display:flex;align-items:center;gap:14px;background:var(--prio-bloque-fond);
|
||||
border:1px solid color-mix(in srgb,var(--prio-bloque) 35%,transparent);border-left:4px solid var(--prio-bloque);
|
||||
border-radius:var(--rayon);padding:12px 16px}
|
||||
.bandeau-urgence b{color:var(--prio-bloque)}
|
||||
.bandeau-urgence .depuis{color:var(--encre-2);font-size:12.5px}
|
||||
|
||||
/* Tables */
|
||||
.table{width:100%;overflow-x:auto}
|
||||
.table table{width:100%;font-size:13.5px}
|
||||
.table th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--encre-2);text-align:left;
|
||||
padding:9px 12px;border-bottom:1px solid var(--bordure);background:var(--surface-2);white-space:nowrap}
|
||||
.table td{padding:9px 12px;border-bottom:1px solid var(--bordure);vertical-align:middle}
|
||||
.table tbody tr:hover{background:var(--primaire-doux)}
|
||||
.table .ref{font-weight:700;color:var(--primaire)}
|
||||
.table .sous{color:var(--encre-2);font-size:12px;display:block}
|
||||
.ligne-bloque td:first-child{box-shadow:inset 3px 0 0 var(--prio-bloque)}
|
||||
.avatars{display:flex}
|
||||
.avatars .avatar{width:24px;height:24px;font-size:10px;border:2px solid var(--surface);margin-left:-6px}
|
||||
.avatars .avatar:first-child{margin-left:0}
|
||||
|
||||
/* Filtres */
|
||||
.filtres{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
|
||||
.select{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--bordure-forte);
|
||||
border-radius:8px;padding:7px 11px;font-size:13px;background:var(--surface);color:var(--encre-2)}
|
||||
.select b{color:var(--encre);font-weight:600}
|
||||
|
||||
/* Graphiques */
|
||||
.graf{display:flex;flex-direction:column;gap:10px}
|
||||
.barres-h .ligne-b{display:grid;grid-template-columns:110px 1fr 40px;align-items:center;gap:10px;font-size:13px}
|
||||
.barres-h .fond-b{background:var(--graf-grille);border-radius:4px;height:14px;overflow:hidden}
|
||||
.barres-h .rempli{height:100%;border-radius:4px 0 0 4px}
|
||||
.barres-h .valeur{text-align:right;font-weight:600}
|
||||
.legende{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--encre-2)}
|
||||
.legende span{display:inline-flex;align-items:center;gap:6px}
|
||||
.legende i{width:9px;height:9px;border-radius:3px}
|
||||
|
||||
/* Connexion */
|
||||
.conn{min-height:640px;display:flex;align-items:center;justify-content:center;background:
|
||||
linear-gradient(160deg,var(--fond) 55%,color-mix(in srgb,var(--primaire) 7%,var(--fond)))}
|
||||
.carte-conn{width:400px;max-width:94%;background:var(--surface);border:1px solid var(--bordure);
|
||||
border-radius:14px;padding:32px;display:flex;flex-direction:column;gap:14px}
|
||||
.carte-conn .logo{padding:0 0 4px;color:var(--encre)}
|
||||
.carte-conn .logo small{color:var(--encre-2)}
|
||||
.champ label{display:block;font-size:12.5px;font-weight:600;color:var(--encre-2);margin-bottom:5px}
|
||||
.champ input{width:100%;padding:9px 12px;border:1px solid var(--bordure-forte);border-radius:8px;
|
||||
font:inherit;background:var(--surface);color:var(--encre)}
|
||||
.champ input::placeholder{color:var(--encre-3)}
|
||||
.sep{display:flex;align-items:center;gap:10px;color:var(--encre-3);font-size:11.5px;
|
||||
letter-spacing:.06em;text-transform:uppercase;margin-top:6px}
|
||||
.sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--bordure)}
|
||||
.demo-liste{display:flex;flex-direction:column;gap:6px}
|
||||
.demo-liste button{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--bordure);
|
||||
border-radius:8px;background:var(--surface);text-align:left;transition:border-color var(--transition)}
|
||||
.demo-liste button:hover{border-color:var(--primaire);background:var(--primaire-doux)}
|
||||
.demo-liste .role{margin-left:auto;font-size:11.5px;color:var(--encre-2)}
|
||||
|
||||
/* Fiche : listes de définitions */
|
||||
.infos{display:grid;grid-template-columns:130px 1fr;row-gap:9px;font-size:13.5px}
|
||||
.infos dt{color:var(--encre-2)}
|
||||
.infos dd{font-weight:500}
|
||||
.infos a{color:var(--primaire);text-decoration:none;font-weight:600}
|
||||
.chrono{list-style:none;display:flex;flex-direction:column;gap:0;font-size:13px}
|
||||
.chrono li{position:relative;padding:0 0 16px 22px}
|
||||
.chrono li::before{content:"";position:absolute;left:5px;top:5px;width:8px;height:8px;border-radius:50%;
|
||||
background:var(--bordure-forte)}
|
||||
.chrono li.fait::before{background:var(--primaire)}
|
||||
.chrono li::after{content:"";position:absolute;left:8.5px;top:15px;bottom:-2px;width:1px;background:var(--bordure)}
|
||||
.chrono li:last-child::after{display:none}
|
||||
.chrono .quand{color:var(--encre-3);font-size:11.5px}
|
||||
.check{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--bordure);font-size:13.5px}
|
||||
.check:last-of-type{border-bottom:0}
|
||||
.coche{width:19px;height:19px;border-radius:5px;border:1.5px solid var(--bordure-forte);flex:none;
|
||||
display:flex;align-items:center;justify-content:center;color:#fff}
|
||||
.coche.ok{background:var(--succes);border-color:var(--succes)}
|
||||
.coche.na{background:var(--encre-3);border-color:var(--encre-3)}
|
||||
.check .qui-fait{margin-left:auto;color:var(--encre-3);font-size:12px}
|
||||
.total{display:flex;justify-content:space-between;font-weight:700;padding-top:10px;font-size:14px}
|
||||
|
||||
/* Bilan codé */
|
||||
.bilan{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
|
||||
@media(max-width:900px){.bilan{grid-template-columns:1fr}}
|
||||
.bilan .champ-b{font-size:12.5px}
|
||||
.bilan .champ-b label{color:var(--encre-2);font-weight:600;display:block;margin-bottom:4px}
|
||||
.bilan .champ-b label em{color:var(--danger);font-style:normal}
|
||||
.faux-select{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--bordure-forte);
|
||||
border-radius:8px;padding:8px 11px;background:var(--surface);color:var(--encre)}
|
||||
.faux-select.vide{color:var(--encre-3)}
|
||||
|
||||
/* Organes / documents */
|
||||
.item-liste{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--bordure);font-size:13.5px}
|
||||
.item-liste:last-child{border-bottom:0}
|
||||
.item-liste .ico{width:34px;height:34px;border-radius:8px;background:var(--surface-2);display:flex;
|
||||
align-items:center;justify-content:center;color:var(--encre-2);flex:none}
|
||||
.item-liste .ico svg{width:16px;height:16px;stroke-width:1.75}
|
||||
.item-liste .fin{margin-left:auto;display:flex;align-items:center;gap:10px;color:var(--encre-2);font-size:12.5px}
|
||||
.qr{display:flex;gap:16px;align-items:center}
|
||||
.qr svg{border:1px solid var(--bordure);border-radius:8px;background:#fff;padding:8px;flex:none}
|
||||
|
||||
/* Portail demandeur */
|
||||
.portail{max-width:430px;margin:28px auto;display:flex;flex-direction:column;gap:14px}
|
||||
.gros-toggle{display:flex;align-items:center;gap:12px;background:var(--prio-bloque-fond);
|
||||
border:1px solid color-mix(in srgb,var(--prio-bloque) 30%,transparent);border-radius:10px;padding:12px 14px}
|
||||
.gros-toggle b{color:var(--prio-bloque)}
|
||||
.interrupteur{margin-left:auto;width:44px;height:24px;border-radius:999px;background:var(--bordure-forte);position:relative;flex:none}
|
||||
.interrupteur::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff}
|
||||
.zone-photo{border:1.5px dashed var(--bordure-forte);border-radius:10px;padding:18px;text-align:center;color:var(--encre-2);font-size:13px}
|
||||
.suivi-simple{display:flex;align-items:center;gap:0;font-size:11.5px;color:var(--encre-3);margin-top:6px}
|
||||
.suivi-simple .etape{display:flex;align-items:center;gap:6px}
|
||||
.suivi-simple .etape.fait{color:var(--succes);font-weight:700}
|
||||
.suivi-simple .lien-e{width:26px;height:1px;background:var(--bordure-forte);margin:0 6px}
|
||||
|
||||
/* Mobile */
|
||||
.tels{display:flex;gap:24px;justify-content:center;flex-wrap:wrap}
|
||||
.tel{width:300px;border:1px solid var(--bordure-forte);border-radius:28px;overflow:hidden;background:var(--fond);
|
||||
box-shadow:var(--ombre-menu)}
|
||||
.tel .encoche{height:26px;background:var(--nav-fond);display:flex;justify-content:center;align-items:center}
|
||||
.tel .encoche i{width:70px;height:7px;border-radius:999px;background:rgb(255 255 255/.18)}
|
||||
.tel .ecran-tel{padding:14px;display:flex;flex-direction:column;gap:10px;min-height:520px}
|
||||
.tel h3{font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px}
|
||||
.tel h3 .sync{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--st-termine);
|
||||
background:var(--st-termine-fond);padding:2px 8px;border-radius:999px}
|
||||
.tel h3 .sync.off{color:var(--st-attente);background:var(--st-attente-fond)}
|
||||
.carte-ot-tel{background:var(--surface);border:1px solid var(--bordure);border-radius:12px;padding:12px}
|
||||
.carte-ot-tel .type-t{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--encre-2);
|
||||
font-weight:700;display:flex;justify-content:space-between;align-items:center}
|
||||
.carte-ot-tel b{display:block;margin:3px 0 2px;font-size:14.5px}
|
||||
.carte-ot-tel .ou{color:var(--encre-2);font-size:12.5px}
|
||||
.btn-tel{display:flex;justify-content:center;align-items:center;gap:8px;padding:12px;border-radius:10px;
|
||||
font-weight:700;font-size:14.5px;background:var(--primaire);color:#fff;width:100%}
|
||||
.btn-tel.vert{background:var(--succes)}
|
||||
.btn-tel.gris{background:var(--bordure-forte);color:var(--surface)}
|
||||
.paire-boutons{display:flex;gap:8px}
|
||||
.btn-choix{flex:1;text-align:center;padding:9px;border:1.5px solid var(--bordure-forte);border-radius:9px;font-weight:600;font-size:13px}
|
||||
.btn-choix.actif{border-color:var(--primaire);background:var(--primaire-doux);color:var(--primaire)}
|
||||
.viseur{flex:1;min-height:330px;border-radius:12px;background:
|
||||
radial-gradient(circle at 50% 45%, #2c3a52 0%, #131c2c 70%);position:relative;display:flex;
|
||||
align-items:center;justify-content:center}
|
||||
.viseur .cadre-qr{width:170px;height:170px;border-radius:14px;border:2.5px solid var(--safran);
|
||||
box-shadow:0 0 0 2000px rgb(9 14 22/.45)}
|
||||
.viseur p{position:absolute;bottom:14px;color:#dfe7f2;font-size:12.5px}
|
||||
|
||||
/* Design system : nuanciers */
|
||||
.nuancier{display:flex;gap:8px;flex-wrap:wrap}
|
||||
.puce-c{width:84px;font-size:10.5px;color:var(--encre-2)}
|
||||
.puce-c i{display:block;height:40px;border-radius:8px;border:1px solid var(--bordure);margin-bottom:4px}
|
||||
</style>
|
||||
<style>
|
||||
/* ═══ Ajouts R1 (à reverser dans l'app après validation) ═══ */
|
||||
/* Statuts d'ÉQUIPEMENT (distincts des statuts OT) */
|
||||
.st.arret{color:var(--danger);background:var(--prio-bloque-fond)}
|
||||
.st.maintenance{color:var(--st-encours);background:var(--st-encours-fond)}
|
||||
|
||||
/* Carte géographique (placeholder — Leaflet/OSM + PostGIS dans l'app) */
|
||||
.geo{position:relative;border:1px solid var(--bordure);border-radius:var(--rayon);overflow:hidden;
|
||||
background:
|
||||
linear-gradient(var(--graf-grille) 1px,transparent 1px),
|
||||
linear-gradient(90deg,var(--graf-grille) 1px,transparent 1px),
|
||||
linear-gradient(160deg,var(--surface-2),var(--surface));
|
||||
background-size:34px 34px,34px 34px,100% 100%;min-height:320px}
|
||||
.geo .voie{position:absolute;background:var(--bordure);border-radius:2px}
|
||||
.geo .pin{position:absolute;display:flex;flex-direction:column;align-items:center;transform:translate(-50%,-100%)}
|
||||
.geo .pin i{width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
|
||||
background:var(--primaire);border:2px solid var(--surface);box-shadow:var(--ombre-menu)}
|
||||
.geo .pin i::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--surface)}
|
||||
.geo .pin.alerte i{background:var(--prio-bloque)}
|
||||
.geo .pin b{margin-top:5px;font-size:11px;background:var(--surface);border:1px solid var(--bordure);
|
||||
padding:2px 7px;border-radius:999px;white-space:nowrap}
|
||||
.geo .attribution{position:absolute;right:8px;bottom:6px;font-size:10px;color:var(--encre-3)}
|
||||
|
||||
/* Arborescence des emplacements */
|
||||
.arbre{list-style:none;padding:0;font-size:13.5px}
|
||||
.arbre li{position:relative;padding:7px 0 7px 26px;border-bottom:1px solid var(--bordure)}
|
||||
.arbre li:last-child{border-bottom:0}
|
||||
.arbre li::before{content:"";position:absolute;left:8px;top:0;bottom:0;width:1px;background:var(--bordure)}
|
||||
.arbre li::after{content:"";position:absolute;left:8px;top:50%;width:12px;height:1px;background:var(--bordure)}
|
||||
.arbre li.racine{padding-left:0}
|
||||
.arbre li.racine::before,.arbre li.racine::after{display:none}
|
||||
.arbre .n2{margin-left:22px}
|
||||
.arbre .meta{color:var(--encre-2);font-size:12px;margin-left:8px}
|
||||
.arbre .fin{float:right;color:var(--encre-2);font-size:12px}
|
||||
|
||||
/* Formulaires R1 */
|
||||
.form-grille{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
|
||||
@media(max-width:900px){.form-grille{grid-template-columns:1fr}}
|
||||
.form-grille .pleine-l{grid-column:1/-1}
|
||||
.ligne-organe{display:flex;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--bordure)}
|
||||
.ligne-organe:last-of-type{border-bottom:0}
|
||||
.ligne-organe .faux-select{flex:1}
|
||||
.btn-suppr{color:var(--encre-3);padding:6px;border-radius:6px}
|
||||
.btn-suppr:hover{color:var(--danger);background:var(--prio-bloque-fond)}
|
||||
|
||||
/* Étiquette QR imprimable (A6) */
|
||||
.zone-impression{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap}
|
||||
.etiquette{width:340px;background:#fff;color:#1b2534;border:1px solid var(--bordure-forte);
|
||||
border-radius:12px;padding:22px;display:flex;flex-direction:column;gap:12px;
|
||||
box-shadow:var(--ombre-menu)}
|
||||
.etiquette .tete{display:flex;align-items:center;gap:10px;border-bottom:2px solid #1b2534;padding-bottom:10px}
|
||||
.etiquette .tete .marque{display:flex;flex-direction:column;line-height:.55;font-size:12px;color:#dd8a0b}
|
||||
.etiquette .tete b{font-size:20px;letter-spacing:.04em}
|
||||
.etiquette .corps{display:flex;gap:16px;align-items:center}
|
||||
.etiquette .qr-grand{flex:none;border:1px solid #dce3ec;border-radius:8px;padding:6px;background:#fff}
|
||||
.etiquette h3{font-size:15px;font-weight:700;margin:0}
|
||||
.etiquette .ou{font-size:12px;color:#55647a}
|
||||
.etiquette .consigne{font-size:12.5px;background:#fdf3e3;border:1px dashed #dd8a0b;color:#8a5a06;
|
||||
border-radius:8px;padding:8px 10px;text-align:center;font-weight:600}
|
||||
.etiquette .ref{font-size:11px;color:#8494ab;text-align:center;font-variant-numeric:tabular-nums}
|
||||
|
||||
/* Modale (invitation) — présentée ouverte dans la maquette */
|
||||
.voile{background:color-mix(in srgb,var(--encre) 32%,transparent);border-radius:var(--rayon);
|
||||
padding:34px;display:flex;align-items:flex-start;justify-content:center}
|
||||
.modale{width:430px;max-width:100%;background:var(--surface);border:1px solid var(--bordure);
|
||||
border-radius:12px;box-shadow:var(--ombre-menu);padding:20px;display:flex;flex-direction:column;gap:12px}
|
||||
.modale h3{font-size:15px;font-weight:700}
|
||||
.modale .pied{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
|
||||
|
||||
/* Équipes */
|
||||
.equipes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
|
||||
@media(max-width:1000px){.equipes{grid-template-columns:1fr}}
|
||||
.equipe{border:1px solid var(--bordure);border-radius:var(--rayon);padding:12px 14px;display:flex;
|
||||
flex-direction:column;gap:8px;background:var(--surface)}
|
||||
.equipe b{font-size:13.5px}
|
||||
.equipe .zone{font-size:12px;color:var(--encre-2)}
|
||||
</style>
|
||||
<style>
|
||||
/* ═══ Ajouts R2 (à reverser dans l'app après validation) ═══ */
|
||||
/* Statuts de DEMANDE (parcours sans jargon : Reçue → Approuvée → Résolue) */
|
||||
.st.recue{color:var(--st-ouvert);background:var(--st-ouvert-fond)}
|
||||
.st.approuvee{color:var(--st-encours);background:var(--st-encours-fond)}
|
||||
.st.rejetee{color:var(--st-annule);background:var(--st-annule-fond)}
|
||||
.st.resolue{color:var(--st-termine);background:var(--st-termine-fond)}
|
||||
|
||||
/* Pastille de périodicité (gabarits préventif) */
|
||||
.periode{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;
|
||||
color:var(--primaire);background:var(--primaire-doux);padding:2px 9px;border-radius:999px}
|
||||
.periode.reglementaire{color:var(--safran);background:var(--safran-doux)}
|
||||
|
||||
/* Panneau d'approbation (drawer statique dans la maquette) */
|
||||
.panneau{border:1px solid var(--bordure);border-radius:var(--rayon);background:var(--surface);
|
||||
padding:16px 18px;display:flex;flex-direction:column;gap:12px}
|
||||
.panneau .photo{height:120px;border-radius:8px;background:
|
||||
linear-gradient(160deg,var(--surface-2),var(--bordure));display:flex;align-items:center;
|
||||
justify-content:center;color:var(--encre-3);font-size:12.5px}
|
||||
|
||||
/* Résumé de génération mensuelle */
|
||||
.gen-resume{display:flex;gap:14px;flex-wrap:wrap}
|
||||
.gen-resume .bloc{flex:1;min-width:130px;border:1px solid var(--bordure);border-radius:var(--rayon);
|
||||
padding:12px 14px;text-align:center}
|
||||
.gen-resume .bloc b{display:block;font-size:24px;letter-spacing:-.02em}
|
||||
.gen-resume .bloc span{font-size:11.5px;color:var(--encre-2);text-transform:uppercase;letter-spacing:.05em}
|
||||
|
||||
/* Relevés de compteurs */
|
||||
.releve-saisie{display:flex;gap:8px;align-items:center}
|
||||
.releve-saisie input{width:130px;padding:8px 11px;border:1px solid var(--bordure-forte);
|
||||
border-radius:8px;font:inherit;background:var(--surface);color:var(--encre);text-align:right}
|
||||
</style>
|
||||
|
||||
<!-- ═══════════ BARRE DE REVUE ═══════════ -->
|
||||
<header class="revue">
|
||||
<b>SIOP V2 · Maquettes R2 — Exploitation</b>
|
||||
<nav class="onglets" role="tablist" aria-label="Écrans">
|
||||
<button role="tab" aria-selected="true" data-cible="demandes">1 · Demandes</button>
|
||||
<button role="tab" aria-selected="false" data-cible="nouvel-ot">2 · Nouvel OT</button>
|
||||
<button role="tab" aria-selected="false" data-cible="preventif">3 · Préventif</button>
|
||||
<button role="tab" aria-selected="false" data-cible="ot-preventif">4 · OT préventif (checklist)</button>
|
||||
<button role="tab" aria-selected="false" data-cible="compteurs">5 · Compteurs</button>
|
||||
</nav>
|
||||
<div class="droite"><button class="theme" id="btn-theme">Thème : auto</button></div>
|
||||
</header>
|
||||
|
||||
<!-- ═══════════ 1 · DEMANDES ═══════════ -->
|
||||
<p class="note-ecran" data-note="demandes"><b>Intention :</b> la file d'attente de Salma. Une demande <b>approuvée devient un OT</b> (lien 1-1, jamais de doublon) ; un rejet exige un motif — le demandeur le lit sur son portail, sans jargon. « Personne bloquée » saute en tête, partout.</p>
|
||||
<section class="ecran actif" id="demandes">
|
||||
<div class="app"><aside class="nav">
|
||||
<div class="logo"><span class="marque">▲<br>▼</span><div><b>SIOP</b></div></div>
|
||||
<div class="groupe">Exploitation</div>
|
||||
<a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><rect x="3" y="3" width="7" height="9" rx="1"/><rect x="14" y="3" width="7" height="5" rx="1"/><rect x="14" y="12" width="7" height="9" rx="1"/><rect x="3" y="16" width="7" height="5" rx="1"/></svg>Tableau de bord</a>
|
||||
<a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M14.7 6.3a4.5 4.5 0 0 0-6 6L3 18v3h3l5.7-5.7a4.5 4.5 0 0 0 6-6l-2.6 2.6-2.4-2.4z"/></svg>Ordres de travail</a>
|
||||
<a href="#" class="actif"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M8 10h8M8 14h5M21 12a9 9 0 1 1-4-7.5"/></svg>Demandes<span class="badge-nav">3</span></a>
|
||||
<a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>Préventif</a>
|
||||
</aside>
|
||||
<div class="contenu">
|
||||
<div class="topbar">
|
||||
<div class="recherche"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="11" cy="11" r="7"/><path d="m21 21-4-4"/></svg>Rechercher…</div>
|
||||
<span class="chip-urgence"><span class="point-pulse"></span>1 personne bloquée</span>
|
||||
<div class="compte"><span class="chip-demo">DÉMO</span><span class="avatar">SI</span>
|
||||
<div class="qui"><b>Salma Idrissi</b><br><small>Dispatcher ▾</small></div></div>
|
||||
</div>
|
||||
<div class="page">
|
||||
<div class="entete-page">
|
||||
<h1>Demandes</h1><span class="filajout">3 à traiter · 12 ce mois</span>
|
||||
</div>
|
||||
<div class="grille-2" style="grid-template-columns:1.4fr 1fr">
|
||||
<div class="carte" style="padding:0"><div class="table"><table>
|
||||
<thead><tr><th>N°</th><th>Signalement</th><th>Équipement · Site</th><th>Par</th><th>Statut</th></tr></thead>
|
||||
<tbody>
|
||||
<tr class="ligne-bloque"><td class="ref num">DEM-2026-0112</td><td><b>Personne bloquée en cabine !</b></td><td>Asc. B2<span class="sous">Tour Atlas</span></td><td>Karim (QR)<span class="sous">il y a 4 min</span></td><td><span class="prio bloque"><i></i>Urgence</span></td></tr>
|
||||
<tr style="background:var(--primaire-doux)"><td class="ref num">DEM-2026-0111</td><td>Porte du 3ᵉ ne se ferme plus</td><td>Asc. A1<span class="sous">Résidence Al Manar</span></td><td>Karim (QR)<span class="sous">il y a 2 h</span></td><td><span class="st recue">Reçue</span></td></tr>
|
||||
<tr><td class="ref num">DEM-2026-0110</td><td>Voyant étage éteint</td><td>Asc. C1<span class="sous">Anfa Place</span></td><td>H. Alami (QR)<span class="sous">hier</span></td><td><span class="st recue">Reçue</span></td></tr>
|
||||
<tr><td class="ref num">DEM-2026-0107</td><td>Bruit anormal en gaine</td><td>Asc. A1<span class="sous">Résidence Al Manar</span></td><td>Karim (QR)<span class="sous">hier</span></td><td><span class="st approuvee">OT-2026-0341</span></td></tr>
|
||||
<tr><td class="ref num">DEM-2026-0104</td><td>Odeur de brûlé (fausse alerte)</td><td>Asc. M1<span class="sous">Tour Atlas</span></td><td>Karim (QR)<span class="sous">11 juil.</span></td><td><span class="st rejetee">Rejetée</span></td></tr>
|
||||
<tr><td class="ref num">DEM-2026-0093</td><td>Voyant cabine éteint</td><td>Asc. A1<span class="sous">Résidence Al Manar</span></td><td>Karim (QR)<span class="sous">2 juil.</span></td><td><span class="st resolue">Résolue</span></td></tr>
|
||||
</tbody>
|
||||
</table></div></div>
|
||||
<div class="panneau">
|
||||
<h2 style="font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--encre-2)">DEM-2026-0111 — approbation</h2>
|
||||
<dl class="infos" style="grid-template-columns:110px 1fr">
|
||||
<dt>Équipement</dt><dd><a href="#">Ascenseur A1</a> — Résidence Al Manar</dd>
|
||||
<dt>Signalé par</dt><dd>Karim Doukkali (gardien) · via QR cabine</dd>
|
||||
<dt>Description</dt><dd>« La porte ne se ferme plus au 3ᵉ étage, il faut la retenir à la main. »</dd>
|
||||
</dl>
|
||||
<div class="photo">📷 photo-porte-3e.jpg (fournie par le gardien)</div>
|
||||
<div class="champ"><label>Priorité de l'OT</label><div class="faux-select">Haute <span>▾</span></div></div>
|
||||
<div class="champ"><label>Assigner à</label><div class="faux-select">Ahmed Benali — équipe Mohammedia <span>▾</span></div></div>
|
||||
<div style="display:flex;gap:8px;justify-content:flex-end">
|
||||
<button class="btn danger-l">Rejeter (motif requis)</button>
|
||||
<button class="btn prim">Approuver → créer l'OT</button>
|
||||
</div>
|
||||
<p style="font-size:12px;color:var(--encre-3)">L'OT reprend titre, équipement, photo et description — la demande suit ensuite l'OT (Reçu → Intervention → Résolu côté portail).</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══════════ 2 · NOUVEL OT ═══════════ -->
|
||||
<p class="note-ecran" data-note="nouvel-ot" hidden><b>Intention :</b> l'OT manuel (sans demande) en une carte : type, équipement, priorité — « personne bloquée » est un choix explicite qui déclenche l'urgence partout. Échéance par défaut selon la priorité.</p>
|
||||
<section class="ecran" id="nouvel-ot">
|
||||
<div class="app"><aside class="nav">
|
||||
<div class="logo"><span class="marque">▲<br>▼</span><div><b>SIOP</b></div></div>
|
||||
<div class="groupe">Exploitation</div>
|
||||
<a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><rect x="3" y="3" width="7" height="9" rx="1"/><rect x="14" y="3" width="7" height="5" rx="1"/><rect x="14" y="12" width="7" height="9" rx="1"/><rect x="3" y="16" width="7" height="5" rx="1"/></svg>Tableau de bord</a>
|
||||
<a href="#" class="actif"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M14.7 6.3a4.5 4.5 0 0 0-6 6L3 18v3h3l5.7-5.7a4.5 4.5 0 0 0 6-6l-2.6 2.6-2.4-2.4z"/></svg>Ordres de travail</a>
|
||||
</aside>
|
||||
<div class="contenu">
|
||||
<div class="topbar">
|
||||
<div class="recherche"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="11" cy="11" r="7"/><path d="m21 21-4-4"/></svg>Rechercher…</div>
|
||||
<div class="compte"><span class="chip-demo">DÉMO</span><span class="avatar">SI</span>
|
||||
<div class="qui"><b>Salma Idrissi</b><br><small>Dispatcher ▾</small></div></div>
|
||||
</div>
|
||||
<div class="page" style="max-width:760px">
|
||||
<div class="filajout"><a href="#">Ordres de travail</a> / Nouvel OT</div>
|
||||
<div class="entete-page"><h1>Nouvel ordre de travail</h1></div>
|
||||
<div class="carte">
|
||||
<div class="form-grille">
|
||||
<div class="champ pleine-l"><label for="not-titre">Objet <em style="color:var(--danger)">*</em></label><input id="not-titre" placeholder="Ex. : Remplacement contact de porte"></div>
|
||||
<div class="champ"><label>Type <em style="color:var(--danger)">*</em></label><div class="faux-select">Dépannage <span>▾</span></div></div>
|
||||
<div class="champ"><label>Équipement <em style="color:var(--danger)">*</em></label><div class="faux-select">B2 — Tour Atlas <span>▾</span></div></div>
|
||||
<div class="champ"><label>Priorité <em style="color:var(--danger)">*</em></label><div class="faux-select"><span class="prio haute" style="font-size:12.5px"><i></i>Haute</span> <span>▾</span></div></div>
|
||||
<div class="champ"><label for="not-echeance">Échéance</label><input id="not-echeance" value="18/07/2026" class="num"></div>
|
||||
<div class="champ pleine-l"><label for="not-desc">Description</label><input id="not-desc" placeholder="Constat, contexte, consignes…"></div>
|
||||
<div class="champ"><label>Assigner à</label><div class="faux-select">Ahmed Benali <span>▾</span></div></div>
|
||||
<div class="champ"><label>Équipe</label><div class="faux-select vide">— <span>▾</span></div></div>
|
||||
</div>
|
||||
<div class="gros-toggle" style="margin-top:14px"><b>Personne bloquée dans la cabine ?</b><span style="margin-left:6px;font-size:12px;color:var(--encre-2)">passe l'OT en urgence absolue (bandeau + tête de liste)</span><span class="interrupteur" role="switch" aria-checked="false" aria-label="Personne bloquée"></span></div>
|
||||
</div>
|
||||
<div style="display:flex;justify-content:flex-end;gap:8px">
|
||||
<button class="btn">Annuler</button>
|
||||
<button class="btn prim">Créer l'OT (statut Ouvert)</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══════════ 3 · PRÉVENTIF ═══════════ -->
|
||||
<p class="note-ecran" data-note="preventif" hidden><b>Intention :</b> le réglementaire sans tableur — des <b>gabarits de tâches à périodicité</b> (l'essai parachute est marqué réglementaire), et la <b>génération du mois</b> : un OT « grille du mois » par appareil sous contrat, avec les tâches dues. <b>Regénérer ne double rien</b> ; un appareil jamais contrôlé reçoit le premier contrôle (tout).</p>
|
||||
<section class="ecran" id="preventif">
|
||||
<div class="app"><aside class="nav">
|
||||
<div class="logo"><span class="marque">▲<br>▼</span><div><b>SIOP</b></div></div>
|
||||
<div class="groupe">Exploitation</div>
|
||||
<a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><rect x="3" y="3" width="7" height="9" rx="1"/><rect x="14" y="3" width="7" height="5" rx="1"/><rect x="14" y="12" width="7" height="9" rx="1"/><rect x="3" y="16" width="7" height="5" rx="1"/></svg>Tableau de bord</a>
|
||||
<a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M14.7 6.3a4.5 4.5 0 0 0-6 6L3 18v3h3l5.7-5.7a4.5 4.5 0 0 0 6-6l-2.6 2.6-2.4-2.4z"/></svg>Ordres de travail</a>
|
||||
<a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M8 10h8M8 14h5M21 12a9 9 0 1 1-4-7.5"/></svg>Demandes</a>
|
||||
<a href="#" class="actif"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>Préventif</a>
|
||||
</aside>
|
||||
<div class="contenu">
|
||||
<div class="topbar">
|
||||
<div class="recherche"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="11" cy="11" r="7"/><path d="m21 21-4-4"/></svg>Rechercher…</div>
|
||||
<div class="compte"><span class="chip-demo">DÉMO</span><span class="avatar" style="background:var(--graf-1)">YA</span>
|
||||
<div class="qui"><b>Yasmine Alaoui</b><br><small>Administratrice ▾</small></div></div>
|
||||
</div>
|
||||
<div class="page">
|
||||
<div class="entete-page">
|
||||
<h1>Préventif</h1>
|
||||
<div class="actions"><button class="btn prim">Générer la grille de juillet</button></div>
|
||||
</div>
|
||||
<div class="gen-resume">
|
||||
<div class="bloc"><b class="num">32 / 41</b><span>grilles générées</span></div>
|
||||
<div class="bloc"><b class="num">25</b><span>terminées</span></div>
|
||||
<div class="bloc"><b class="num" style="color:var(--danger)">3</b><span>en retard</span></div>
|
||||
<div class="bloc"><b class="num">2</b><span>premiers contrôles</span></div>
|
||||
</div>
|
||||
<div class="carte" style="border-left:3px solid var(--succes)">
|
||||
<span style="font-size:13px">✓ Dernière génération : <b>1ᵉʳ juillet, 06 h 00</b> (automatique) — 32 OT créés, 0 doublon. Regénérer maintenant ne créerait que les grilles des <b>9 appareils ajoutés depuis</b>.</span>
|
||||
</div>
|
||||
<div class="carte" style="padding:0">
|
||||
<div class="table"><table>
|
||||
<thead><tr><th>Tâche du gabarit</th><th>Organe visé</th><th>Périodicité</th><th>Juillet</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>Contrôle fermeture / verrouillage des portes</td><td>Portes cabine / palières</td><td><span class="periode">Tous les mois</span></td><td><span class="st termine">Due</span></td></tr>
|
||||
<tr><td>Nettoyage cuvette et toit de cabine</td><td>—</td><td><span class="periode">Tous les mois</span></td><td><span class="st termine">Due</span></td></tr>
|
||||
<tr><td>Contrôle niveau d'huile réducteur</td><td>Treuil / machinerie</td><td><span class="periode">Tous les 3 mois</span></td><td><span class="st termine">Due</span></td></tr>
|
||||
<tr><td>Vérification jeu des coulisseaux</td><td>—</td><td><span class="periode">Tous les 6 mois</span></td><td><span class="st annule">Non due</span></td></tr>
|
||||
<tr><td><b>Essai du parachute</b></td><td>Parachute</td><td><span class="periode reglementaire">12 mois · réglementaire</span></td><td><span class="st termine">Due</span></td></tr>
|
||||
<tr><td>Contrôle câbles de traction (usure, tension)</td><td>Treuil / machinerie</td><td><span class="periode">Tous les 6 mois</span></td><td><span class="st annule">Non due</span></td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
</div>
|
||||
<div class="carte" style="border-style:dashed;color:var(--encre-2);font-size:13px">
|
||||
Le gabarit s'applique à tout appareil <b>sous contrat préventif</b>. Un appareil sans historique reçoit
|
||||
un OT « <b>premier contrôle</b> » : toutes les tâches, quelle que soit la périodicité.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══════════ 4 · OT PRÉVENTIF (CHECKLIST) ═══════════ -->
|
||||
<p class="note-ecran" data-note="ot-preventif" hidden><b>Intention :</b> la grille du mois d'Ahmed — chaque tâche se règle en <b>Fait / N-A</b> (avec qui et quand) ; la <b>clôture est bloquée</b> tant qu'une tâche reste sans réponse. Le bilan codé reste requis (écran fiche OT validé en R0).</p>
|
||||
<section class="ecran" id="ot-preventif">
|
||||
<div class="app"><aside class="nav">
|
||||
<div class="logo"><span class="marque">▲<br>▼</span><div><b>SIOP</b></div></div>
|
||||
<div class="groupe">Exploitation</div>
|
||||
<a href="#" class="actif"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M14.7 6.3a4.5 4.5 0 0 0-6 6L3 18v3h3l5.7-5.7a4.5 4.5 0 0 0 6-6l-2.6 2.6-2.4-2.4z"/></svg>Ordres de travail</a>
|
||||
</aside>
|
||||
<div class="contenu">
|
||||
<div class="topbar">
|
||||
<div class="recherche"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="11" cy="11" r="7"/><path d="m21 21-4-4"/></svg>Rechercher…</div>
|
||||
<div class="compte"><span class="chip-demo">DÉMO</span><span class="avatar" style="background:var(--graf-3)">AB</span>
|
||||
<div class="qui"><b>Ahmed Benali</b><br><small>Technicien ▾</small></div></div>
|
||||
</div>
|
||||
<div class="page">
|
||||
<div class="filajout"><a href="#">Ordres de travail</a> / OT-2026-0338</div>
|
||||
<div class="entete-page">
|
||||
<h1>Grille du mois — juillet · Ascenseur A1</h1>
|
||||
<span class="st encours">En cours</span>
|
||||
<div class="actions"><button class="btn succes" disabled>Clôturer (2 tâches sans réponse)</button></div>
|
||||
</div>
|
||||
<div class="grille-2">
|
||||
<div class="carte">
|
||||
<h2>Checklist du mois <span style="color:var(--encre-3);text-transform:none;letter-spacing:0">— 4 / 6 traitées</span></h2>
|
||||
<div class="check"><span class="coche ok">✓</span>Contrôle fermeture / verrouillage des portes<span class="qui-fait">Ahmed · 09 h 12</span></div>
|
||||
<div class="check"><span class="coche ok">✓</span>Nettoyage cuvette et toit de cabine<span class="qui-fait">Ahmed · 09 h 40</span></div>
|
||||
<div class="check"><span class="coche na">N-A</span>Contrôle niveau d'huile réducteur <span style="color:var(--encre-3);font-size:12px">(gearless — sans objet)</span><span class="qui-fait">Ahmed · 09 h 41</span></div>
|
||||
<div class="check"><span class="coche ok">✓</span>Essai du parachute<span class="qui-fait">Ahmed · 10 h 25</span></div>
|
||||
<div class="check"><span class="coche"></span>Contrôle boutons cabine & paliers<span class="qui-fait">—</span></div>
|
||||
<div class="check"><span class="coche"></span>Vérification éclairage de secours<span class="qui-fait">—</span></div>
|
||||
<p style="margin-top:10px;font-size:12.5px;color:var(--alerte)">⚠ La clôture reste bloquée : chaque tâche doit être <b>Fait</b> ou <b>N-A</b>.</p>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:16px">
|
||||
<div class="carte">
|
||||
<h2>Intervention</h2>
|
||||
<dl class="infos">
|
||||
<dt>N°</dt><dd class="num">OT-2026-0338 · Maintenance</dd>
|
||||
<dt>Équipement</dt><dd><a href="#">Ascenseur A1 — Otis Gen2</a></dd>
|
||||
<dt>Généré le</dt><dd class="num">1ᵉʳ juillet (grille mensuelle)</dd>
|
||||
<dt>Échéance</dt><dd class="num">31 juillet 2026</dd>
|
||||
<dt>Assigné</dt><dd>Ahmed Benali</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="carte">
|
||||
<h2>Bilan d'intervention</h2>
|
||||
<p style="font-size:12.5px;color:var(--encre-2)">Requis aussi pour la grille (écran « fiche OT » validé en R0) — prérempli : Action réalisée = <b>Visite d'entretien</b>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══════════ 5 · COMPTEURS ═══════════ -->
|
||||
<p class="note-ecran" data-note="compteurs" hidden><b>Intention :</b> les relevés simples du carnet (heures de marche, démarrages) — saisis en fiche appareil ou en tournée. R2 les stocke et trace ; les seuils d'alerte viendront nourrir le préventif conditionnel (backlog).</p>
|
||||
<section class="ecran" id="compteurs">
|
||||
<div class="app"><aside class="nav">
|
||||
<div class="logo"><span class="marque">▲<br>▼</span><div><b>SIOP</b></div></div>
|
||||
<div class="groupe">Parc</div>
|
||||
<a href="#" class="actif"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><rect x="6" y="2" width="12" height="20" rx="2"/><path d="M10 7l2-2 2 2M10 17l2 2 2-2"/></svg>Ascenseurs</a>
|
||||
</aside>
|
||||
<div class="contenu">
|
||||
<div class="topbar">
|
||||
<div class="recherche"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="11" cy="11" r="7"/><path d="m21 21-4-4"/></svg>Rechercher…</div>
|
||||
<div class="compte"><span class="chip-demo">DÉMO</span><span class="avatar" style="background:var(--graf-3)">AB</span>
|
||||
<div class="qui"><b>Ahmed Benali</b><br><small>Technicien ▾</small></div></div>
|
||||
</div>
|
||||
<div class="page" style="max-width:860px">
|
||||
<div class="filajout"><a href="#">Ascenseurs</a> / <a href="#">Ascenseur A1</a> / Compteurs</div>
|
||||
<div class="entete-page"><h1>Compteurs — Ascenseur A1</h1></div>
|
||||
<div class="grille-2">
|
||||
<div class="carte">
|
||||
<h2>Heures de marche</h2>
|
||||
<div class="releve-saisie">
|
||||
<input value="12 480" class="num" aria-label="Nouveau relevé heures de marche"><span style="color:var(--encre-2);font-size:13px">h</span>
|
||||
<button class="btn prim">Enregistrer le relevé</button>
|
||||
</div>
|
||||
<ul class="chrono" style="margin-top:14px">
|
||||
<li class="fait"><span class="num">12 411 h</span> — relevé mensuel<br><span class="quand">1ᵉʳ juillet · Ahmed (grille)</span></li>
|
||||
<li class="fait"><span class="num">12 322 h</span> — relevé mensuel<br><span class="quand">2 juin · Fatima-Zahra</span></li>
|
||||
<li class="fait"><span class="num">12 246 h</span> — relevé mensuel<br><span class="quand">3 mai · Ahmed</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="carte">
|
||||
<h2>Démarrages</h2>
|
||||
<div class="releve-saisie">
|
||||
<input value="1 844 210" class="num" aria-label="Nouveau relevé démarrages"><span style="color:var(--encre-2);font-size:13px">cycles</span>
|
||||
<button class="btn prim">Enregistrer le relevé</button>
|
||||
</div>
|
||||
<ul class="chrono" style="margin-top:14px">
|
||||
<li class="fait"><span class="num">1 831 970</span><br><span class="quand">1ᵉʳ juillet · Ahmed (grille)</span></li>
|
||||
<li class="fait"><span class="num">1 815 400</span><br><span class="quand">2 juin · Fatima-Zahra</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carte" style="border-style:dashed;color:var(--encre-2);font-size:13px">
|
||||
Un relevé <b>inférieur au précédent</b> est refusé (compteur croissant). Les seuils d'alerte
|
||||
(préventif conditionnel) sont au backlog v2 — R2 stocke et trace.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
var onglets=document.querySelectorAll('.revue .onglets button');
|
||||
var ecrans=document.querySelectorAll('.ecran');
|
||||
var notes=document.querySelectorAll('.note-ecran');
|
||||
onglets.forEach(function(b){b.addEventListener('click',function(){
|
||||
onglets.forEach(function(x){x.setAttribute('aria-selected','false')});
|
||||
b.setAttribute('aria-selected','true');
|
||||
var cible=b.dataset.cible;
|
||||
ecrans.forEach(function(e){e.classList.toggle('actif',e.id===cible)});
|
||||
notes.forEach(function(n){n.hidden=(n.dataset.note!==cible)});
|
||||
window.scrollTo({top:0});
|
||||
})});
|
||||
var ordre=['auto','light','dark'];var i=0;
|
||||
var bt=document.getElementById('btn-theme');
|
||||
bt.addEventListener('click',function(){
|
||||
i=(i+1)%3;var m=ordre[i];
|
||||
if(m==='auto'){document.documentElement.removeAttribute('data-theme')}
|
||||
else{document.documentElement.setAttribute('data-theme',m)}
|
||||
bt.textContent='Thème : '+(m==='auto'?'auto':(m==='light'?'clair':'sombre'));
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -4,6 +4,24 @@ Trace chronologique des sessions (la plus récente en premier). Le **playbook**
|
||||
|
||||
---
|
||||
|
||||
## 2026-07-16 — Pr. Daaif (+ Claude) — R2 ouverte : maquettes des écrans manquants à valider
|
||||
|
||||
**Actions**
|
||||
|
||||
- **R2 « Exploitation » ouverte — design d'abord.** Les écrans cœur sont déjà validés depuis R0 (tableau de bord, liste OT, fiche OT avec bilan codé 6 champs et garde de clôture, portail demandeur) ; `maquette-r2.html` complète avec les **5 écrans manquants** : Demandes (file + panneau d'approbation : approuver → OT 1-1, rejeter avec motif requis), Nouvel OT (interrupteur « personne bloquée » explicite), Préventif (gabarits à périodicité — parachute marqué réglementaire — génération du mois **idempotente**, premiers contrôles), OT préventif (checklist Fait/N-A, clôture bloquée si tâche sans réponse), Compteurs (relevés croissants, historique).
|
||||
- Rendu vérifié (5 écrans + thème sombre, zéro erreur).
|
||||
|
||||
**Décisions (proposées à la validation)**
|
||||
|
||||
- Statuts de DEMANDE distincts (Reçue / Approuvée→OT lié / Rejetée / Résolue) réutilisant la sémantique chromatique des statuts OT ; à trancher : est-ce une entorse à « réservés » de la charte ou une extension cohérente ?
|
||||
- Un rejet de demande **exige un motif** (lisible côté portail, sans jargon).
|
||||
- Génération mensuelle : automatique le 1ᵉʳ à 06 h + bouton manuel ; **regénérer ne crée que le manquant** ; appareil sans historique → OT « premier contrôle » (toutes les tâches).
|
||||
- Relevé de compteur strictement croissant (refus sinon).
|
||||
|
||||
**⛔ Bloquant** : validation des maquettes R2 par le référent avant toute ligne de code R2.
|
||||
|
||||
---
|
||||
|
||||
## 2026-07-16 — Pr. Daaif (+ Claude) — 🏁 R1 CLOSE : recettée, déployée, taguée
|
||||
|
||||
**Actions**
|
||||
|
||||
Reference in New Issue
Block a user