mirror of
https://github.com/JMP-MS/ASPIC.git
synced 2026-10-27 16:07:10 +00:00
V1.009 Homogénéisation des écrans (début)
This commit is contained in:
@@ -0,0 +1,32 @@
|
||||
# ASPIC — .htaccess racine de l'application
|
||||
# ---------------------------------------------------------------------------
|
||||
# Ajouté le 3 septembre 2026 (voir journal) : évite d'avoir à passer par une
|
||||
# navigation privée pour voir une nouvelle version après un dépôt de fichiers
|
||||
# — le navigateur devait jusqu'ici servir une copie en cache de la page tant
|
||||
# qu'elle restait dans sa fenêtre de fraîcheur heuristique, sans même
|
||||
# redemander au serveur.
|
||||
#
|
||||
# "no-cache" (et non "no-store") : le navigateur peut toujours garder une
|
||||
# copie, mais doit obligatoirement revalider auprès du serveur avant de
|
||||
# l'utiliser (requête conditionnelle, via ETag/Last-Modified, gérée
|
||||
# automatiquement par Apache) — la nouvelle version est donc servie dès
|
||||
# qu'elle est déposée, sans re-téléchargement complet à chaque fois.
|
||||
#
|
||||
# Limité à .html/.js/.css : les fichiers .php sont dynamiques et déjà non
|
||||
# mis en cache par défaut ; les images/polices (.jpg/.png/.woff2/.ttf) sont
|
||||
# volontairement laissées en cache normal, elles changent rarement.
|
||||
#
|
||||
# À déposer À LA RACINE de l'application (même dossier que identification.html),
|
||||
# sous le nom exact ".htaccess" (renommer ce fichier .txt après dépôt — voir
|
||||
# note de la session au sujet des fichiers technique non nommés .htaccess
|
||||
# envoyés depuis la conversation).
|
||||
#
|
||||
# Nécessite le module Apache mod_headers activé sur le VPS. S'il ne semble
|
||||
# pas produire d'effet après dépôt, c'est le premier point à vérifier
|
||||
# (`a2enmod headers` puis redémarrage d'Apache, si accès SSH).
|
||||
|
||||
<IfModule mod_headers.c>
|
||||
<FilesMatch "\.(html|js|css)$">
|
||||
Header set Cache-Control "no-cache, must-revalidate"
|
||||
</FilesMatch>
|
||||
</IfModule>
|
||||
+156
-143
@@ -4,6 +4,9 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ASPIC — Écran de fond (essai)</title>
|
||||
<!-- Icône d'onglet (3 septembre 2026, voir journal) : logo Mévélia Solutions,
|
||||
fourni par Jean-Marc, reprise à l'identique sur tous les écrans. -->
|
||||
<link rel="icon" href="mevelia-icone.png">
|
||||
<style>
|
||||
/* ecran_fond.html — 2 septembre 2026
|
||||
Premier essai de l'écran de fond "bureau à l'ancienne" (voir journal de
|
||||
@@ -80,30 +83,12 @@
|
||||
#classeur-contacts:hover{
|
||||
box-shadow:inset 0 0 0 2px rgba(255,255,255,.7);
|
||||
}
|
||||
/* Chevalet en bas à droite (2 septembre 2026, essai — simplifié le même
|
||||
jour à la demande de Jean-Marc) : plus que le prénom de l'utilisateur
|
||||
connecté (USR_Prenom), la société retirée ("l'utilisateur la connaît
|
||||
déjà"). Une seule ligne, donc plus de place pour une police nettement
|
||||
plus grande — c'était le point d'origine du problème de lisibilité.
|
||||
Donnée réelle de la session (preferences.php, voir script), jamais de
|
||||
texte figé. Ellipsis de sécurité si un prénom venait à être long. */
|
||||
#chevalet{
|
||||
position:fixed;
|
||||
display:flex;align-items:center;justify-content:center;
|
||||
text-align:center;
|
||||
color:#333;
|
||||
font-family:"Segoe UI","Arial",sans-serif;
|
||||
font-weight:700;
|
||||
pointer-events:none;
|
||||
user-select:none;
|
||||
overflow:hidden;
|
||||
}
|
||||
#chevalet-nom{
|
||||
white-space:nowrap;
|
||||
max-width:100%;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
/* Chevalet supprimé le 3 septembre 2026 (voir journal) : Jean-Marc l'a
|
||||
rangé — "libère de la place sur le bureau" — dans la nouvelle photo qui
|
||||
ne le montre plus. Le prénom de l'utilisateur reste affiché ailleurs,
|
||||
dans le groupe société/prénom/marque repris de liste_contacts.html
|
||||
(voir #statut-version-bloc plus bas), désormais fixé en bas à droite
|
||||
de l'écran plutôt que calé sur un objet du bureau. */
|
||||
/* Micro cliquable (2 septembre 2026, essai — retouché le même jour après
|
||||
retour de Jean-Marc). Deux éléments distincts, superposés mais avec des
|
||||
rôles différents :
|
||||
@@ -167,16 +152,9 @@
|
||||
0%,100%{ transform:scaleY(.55); }
|
||||
50%{ transform:scaleY(1); }
|
||||
}
|
||||
/* Numéro de version, sur le bureau. Même source que #statut-version dans
|
||||
liste_contacts.html (version.php, voir commentaire de chargerVersion()
|
||||
ci-dessous) : jamais de numéro figé en dur, pour rester juste même si
|
||||
la version évolue sans repasser par cet écran. Repositionné le
|
||||
2 septembre 2026 : plus à droite (bord droit de l'écran plutôt que
|
||||
calé sur le chevalet) et plus bas, juste au-dessus de la bande claire
|
||||
qui marque la tranche avant du bureau. Couleur assombrie et rendue
|
||||
opaque (au lieu d'une transparence à 62%) à la demande de Jean-Marc —
|
||||
reste plus sobre que les objets fonctionnels, mais plus affirmée
|
||||
qu'avant. */
|
||||
/* Numéro de version : voir #statut-version-bloc plus haut — depuis le
|
||||
3 septembre 2026, fixé en bas à droite de l'écran (même place et même
|
||||
habillage que dans liste_contacts.html) plutôt que calé sur le bureau. */
|
||||
/* Pastille "nombre de contacts" sur le classeur Contacts (2 septembre
|
||||
2026, essai). Idée de Jean-Marc : au fur et à mesure que chaque classeur
|
||||
sera branché à sa table, afficher une petite pastille collée dessous le
|
||||
@@ -218,22 +196,60 @@
|
||||
font-weight:700;
|
||||
line-height:1;
|
||||
}
|
||||
#version-desk{
|
||||
/* Bloc société + prénom + marque (3 septembre 2026, voir journal). Posé
|
||||
d'abord calé sur le bureau comme le reste de cet écran, puis Jean-Marc a
|
||||
précisé vouloir "les infos en bas à droite à la même place que dans la
|
||||
liste des contacts" — repris ici en position FIXE par rapport à l'écran
|
||||
(et non plus en fraction de l'image), avec exactement les mêmes id, la
|
||||
même mise en forme et les mêmes tailles qu'en bas de liste_contacts.html
|
||||
(pixels fixes, pas de recalcul dans positionner()) : société, point
|
||||
séparateur, prénom, point séparateur, puis #marque-aspic (icône Mévélia
|
||||
+ logo ASPIC miniature + version). */
|
||||
#statut-version-bloc{
|
||||
position:fixed;
|
||||
color:#3a2712;
|
||||
right:16px;
|
||||
bottom:10px;
|
||||
display:flex;align-items:center;gap:8px;
|
||||
}
|
||||
.point-separateur{
|
||||
font-size:14px;line-height:1;color:#2a2a2a;
|
||||
}
|
||||
#societe-utilisateur, #prenom-utilisateur{
|
||||
font-size:11px;font-weight:700;color:#2a2a2a;
|
||||
font-family:"Segoe UI","Arial",sans-serif;
|
||||
white-space:nowrap;
|
||||
}
|
||||
#marque-aspic{
|
||||
display:flex;align-items:center;gap:4px;
|
||||
}
|
||||
#icone-mevelia{
|
||||
width:16px;height:16px;
|
||||
border-radius:50%;
|
||||
display:block;
|
||||
}
|
||||
#logo-aspic-mini{
|
||||
display:flex;align-items:center;
|
||||
background:#1B1B1B;
|
||||
border-radius:4px;
|
||||
padding:2px 6px;
|
||||
font-family:"Metro DF","Segoe UI Black","Segoe UI Semibold","Segoe UI",Arial,sans-serif;
|
||||
font-weight:900;font-size:9px;letter-spacing:1px;
|
||||
}
|
||||
#logo-aspic-mini .A{color:#FF5A1F;}
|
||||
#logo-aspic-mini .rest{color:#FFFFFF;}
|
||||
#statut-version{
|
||||
color:#4a4a4a;
|
||||
font-family:"Segoe UI","Arial",sans-serif;
|
||||
font-weight:700;
|
||||
letter-spacing:0.02em;
|
||||
text-align:right;
|
||||
white-space:nowrap;
|
||||
pointer-events:none;
|
||||
user-select:none;
|
||||
font-size:11px;
|
||||
}
|
||||
/* Post-its de la ToDoList personnelle (2 septembre 2026, premier
|
||||
affichage réel — voir journal section 28). Posés dans la zone décrite
|
||||
par ZONE_POSTITS_* plus bas dans le script : une bande occupant 30% de
|
||||
la largeur de l'écran depuis le bord droit, juste au-dessus du chevalet
|
||||
— décision de Jean-Marc ("le vilain petit canard sera l'humain", donc
|
||||
la largeur de l'écran depuis le bord droit, jusqu'à la ligne du bureau
|
||||
(chevalet supprimé le 3 septembre 2026, voir journal — la zone descend
|
||||
désormais jusqu'à la nouvelle limite mesurée sur la photo, avec la même
|
||||
marge de sécurité qu'avant) — décision de Jean-Marc ("le vilain petit canard sera l'humain", donc
|
||||
plus de place que chaque assistant, dont la ToDoList n'est pas encore
|
||||
gérée — voir Réflexions stratégiques section 11 et le fil du 2-3
|
||||
septembre). Grille à 4 colonnes × 5 lignes = 20 cases, volontairement
|
||||
@@ -294,9 +310,6 @@
|
||||
|
||||
<a id="classeur-contacts" href="liste_contacts.html" title="Ouvrir le classeur des contacts"></a>
|
||||
<div id="etiquette-contacts">Contacts</div>
|
||||
<div id="chevalet">
|
||||
<div id="chevalet-nom"></div>
|
||||
</div>
|
||||
<button id="micro-desk" type="button"></button>
|
||||
<div id="micro-icone">
|
||||
<svg id="glyphe-repos" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
@@ -311,80 +324,68 @@
|
||||
</svg>
|
||||
</div>
|
||||
<div id="pastille-contacts"><span id="pastille-contacts-nombre">…</span></div>
|
||||
<div id="version-desk"></div>
|
||||
<div id="statut-version-bloc">
|
||||
<span id="societe-utilisateur" hidden></span>
|
||||
<span class="point-separateur" id="point-societe" hidden aria-hidden="true">•</span>
|
||||
<span id="prenom-utilisateur"></span>
|
||||
<span class="point-separateur" aria-hidden="true">•</span>
|
||||
<div id="marque-aspic" title="ASPIC
|
||||
Créé par Mevelia Solutions">
|
||||
<img id="icone-mevelia" src="mevelia-icone.png" alt="Mévélia Solutions">
|
||||
<span id="logo-aspic-mini"><span class="A">A</span><span class="rest">SPIC</span></span>
|
||||
<span id="statut-version"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Référence de l'image : 1024×457 (voir ecran_fond.jpg — 2ᵉ recadrage du
|
||||
// 2 septembre 2026). Toutes les coordonnées ci-dessous sont exprimées en
|
||||
// Référence de l'image : 1024×457, inchangée en dimensions (voir
|
||||
// ecran_fond.jpg — 3ᵉ version le 3 septembre 2026, Jean-Marc a raccourci
|
||||
// le bureau de 13px en bas de la photo et ajouté 13px de liège en haut,
|
||||
// chevalet retiré). Toutes les coordonnées ci-dessous sont exprimées en
|
||||
// pixels de CETTE image de référence, puis converties en fraction pour
|
||||
// rester calées quelle que soit la taille réelle d'affichage (voir calcul
|
||||
// dans positionner()).
|
||||
// dans positionner()). Constantes remesurées directement sur la nouvelle
|
||||
// photo (comparaison pixel à pixel avec l'ancienne, tranche du classeur et
|
||||
// silhouette du micro) : décalage vertical uniforme de +13 confirmé pour
|
||||
// tout ce qui était calé sur le bureau ou le mur, aucun décalage
|
||||
// horizontal — cohérent avec la description de Jean-Marc.
|
||||
const IMG_W = 1024, IMG_H = 457;
|
||||
// Centre de l'étiquette du 1er classeur, remesuré une 3ᵉ fois le
|
||||
// 2 septembre 2026 : la mesure précédente (69) incluait par erreur
|
||||
// l'étiquette du classeur bleu voisin dans le calcul du centre ligne par
|
||||
// ligne (les deux étiquettes, blanches toutes les deux, se touchent
|
||||
// presque et le seuil de luminosité ne les distinguait pas) — d'où un
|
||||
// texte qui débordait vers la droite, dans le classeur bleu, au lieu de
|
||||
// rester dans le classeur bleu-vert. Remesuré en isolant la seule
|
||||
// première plage claire (x<80) sur plusieurs lignes : rectangle
|
||||
// d'étiquette réel x:[44,71], y:[240,324], centre (57.5, 282).
|
||||
// Centre de l'étiquette du 1er classeur (57.5, 282 -> 57.5, 295 : +13).
|
||||
const ETIQ_CENTRE_X_FRAC = 57.5 / IMG_W;
|
||||
const ETIQ_CENTRE_Y_FRAC = 282 / IMG_H;
|
||||
const ETIQ_CENTRE_Y_FRAC = 295 / IMG_H;
|
||||
const ETIQ_POLICE_FRAC = 19 / IMG_W;
|
||||
// Rectangle de la tranche visible du 1er classeur (face plate, sans le
|
||||
// dessus incliné), mesuré sur ecran_fond.jpg : x:[37,78], y:[224,397].
|
||||
// Rectangle de la tranche visible du 1er classeur (x inchangé, y:[224,397]
|
||||
// -> y:[237,410]).
|
||||
const CLASSEUR_X1 = 37, CLASSEUR_X2 = 78;
|
||||
const CLASSEUR_Y1 = 224, CLASSEUR_Y2 = 397;
|
||||
// Rectangle de la partie blanche du chevalet, mesuré sur ecran_fond.jpg :
|
||||
// x:[860,982], y:[359,394] — léger retrait (marge intérieure) pour ne pas
|
||||
// coller le texte au cadre en bois.
|
||||
const CHEVALET_X1 = 866, CHEVALET_X2 = 976;
|
||||
const CHEVALET_Y1 = 362, CHEVALET_Y2 = 391;
|
||||
// Une seule ligne désormais (prénom seul) : le chevalet est bas et
|
||||
// large, la police peut être nettement plus grande qu'avant.
|
||||
const CHEVALET_POLICE_FRAC = 18 / IMG_W;
|
||||
// Zone cliquable/survolable du micro : tout le silhouette du micro, du
|
||||
// pied à la tête (bras de la nacelle inclus), mesurée sur ecran_fond.jpg :
|
||||
// x:[465,543], y:[236,406].
|
||||
const CLASSEUR_Y1 = 237, CLASSEUR_Y2 = 410;
|
||||
// Chevalet supprimé le 3 septembre 2026 (voir journal) : plus d'objet à
|
||||
// cet endroit sur la nouvelle photo, Jean-Marc l'a rangé.
|
||||
// Zone cliquable/survolable du micro : silhouette complète, x inchangé,
|
||||
// y:[236,406] -> y:[249,419].
|
||||
const MICRO_ZONE_X1 = 465, MICRO_ZONE_X2 = 543;
|
||||
const MICRO_ZONE_Y1 = 236, MICRO_ZONE_Y2 = 406;
|
||||
// Centre du rond noir en haut du micro (grille), pour l'icône seule —
|
||||
// remonté le 2 septembre 2026 (icône perçue trop basse avec 268) : la
|
||||
// pointe du dôme est à y≈242, sa partie courbe se termine vers y≈260
|
||||
// avant de devenir un cylindre à largeur quasi constante (mesh) jusqu'à
|
||||
// y≈308. Centre replacé dans le haut du dôme, pas dans le cylindre :
|
||||
// (512, 255), diamètre réduit à ~22px pour ne pas déborder au-dessus de
|
||||
// la pointe (y=242).
|
||||
const ICONE_CENTRE_X = 512, ICONE_CENTRE_Y = 255;
|
||||
const MICRO_ZONE_Y1 = 249, MICRO_ZONE_Y2 = 419;
|
||||
// Centre du rond noir en haut du micro (grille), pour l'icône seule :
|
||||
// (512, 255) -> (512, 268).
|
||||
const ICONE_CENTRE_X = 512, ICONE_CENTRE_Y = 268;
|
||||
const ICONE_TAILLE_FRAC = 22 / IMG_W;
|
||||
// Coin haut-droit du texte de version (2 septembre 2026, repositionné) :
|
||||
// plus près du bord droit de l'écran (1024 de large) qu'aligné sur le
|
||||
// chevalet, et juste au-dessus de la bande claire de la tranche avant du
|
||||
// bureau — mesurée sur ecran_fond.jpg vers y:[442,450] ; le texte est
|
||||
// calé pour se terminer avant, vers y=436.
|
||||
const VERSION_X = 1012, VERSION_Y = 424;
|
||||
const VERSION_POLICE_FRAC = 11 / IMG_W;
|
||||
// Pastille "nombre de contacts", sous le trou cerclé de métal du classeur
|
||||
// Contacts. Trou mesuré sur ecran_fond.jpg : centre (58, 354), anneau
|
||||
// métallique jusqu'à y≈365. Pastille centrée sur le même axe X que le
|
||||
// trou (cohérence visuelle), posée juste en dessous, avant la fin du
|
||||
// classeur (bas de la tranche à y=397, voir CLASSEUR_Y2). Diamètre réduit
|
||||
// de 22 à 17 le 2 septembre 2026 (retour de Jean-Marc : "trop présente") —
|
||||
// centre recalé à (58, 381) pour rester au milieu de l'espace disponible
|
||||
// entre l'anneau et le bas du classeur avec la nouvelle taille.
|
||||
const PASTILLE_CONTACTS_CENTRE_X = 58, PASTILLE_CONTACTS_CENTRE_Y = 381;
|
||||
// Contacts : centre (58, 381) -> (58, 394).
|
||||
const PASTILLE_CONTACTS_CENTRE_X = 58, PASTILLE_CONTACTS_CENTRE_Y = 394;
|
||||
const PASTILLE_CONTACTS_DIAM_FRAC = 17 / IMG_W;
|
||||
|
||||
// Zone des post-its personnels (2 septembre 2026, premier affichage réel
|
||||
// — voir commentaire CSS .postit ci-dessus pour le détail des décisions).
|
||||
// 30% de la largeur de l'écran depuis le bord droit (1024 × 0.30 ≈ 307),
|
||||
// du haut de l'image jusqu'à juste au-dessus du chevalet (CHEVALET_Y1 =
|
||||
// 362, marge de 10px). Grille 4 colonnes × 5 lignes = 20 cases, alignée
|
||||
// sur CAPACITE_TABLEAU_PAR_UTILISATEUR (todolist.php) — à faire évoluer
|
||||
// 30% de la largeur de l'écran depuis le bord droit (1024 × 0.30 ≈ 307).
|
||||
// Bas de la zone (Y2) recalculé le 3 septembre 2026 : n'était plus borné
|
||||
// par le chevalet (supprimé) mais par la nouvelle ligne de bureau
|
||||
// (CLASSEUR_Y2 = 410), avec la même marge de sécurité qu'avant (~15px) —
|
||||
// 352 devient 395, quelques pixels de plus qu'un simple +13 puisque
|
||||
// l'espace se libère réellement, comme relevé par Jean-Marc. Grille
|
||||
// 4 colonnes × 5 lignes = 20 cases, volontairement alignée sur
|
||||
// CAPACITE_TABLEAU_PAR_UTILISATEUR (todolist.php) — à faire évoluer
|
||||
// ensemble le jour où cette capacité changera.
|
||||
const ZONE_POSTITS_X1 = 717, ZONE_POSTITS_X2 = 1024;
|
||||
const ZONE_POSTITS_Y1 = 6, ZONE_POSTITS_Y2 = 352;
|
||||
const ZONE_POSTITS_Y1 = 6, ZONE_POSTITS_Y2 = 395;
|
||||
const GRILLE_POSTITS_COLONNES = 4, GRILLE_POSTITS_LIGNES = 5;
|
||||
// Taille d'un post-it : ~60% de la plus petite dimension de case, pour
|
||||
// laisser de la marge au jitter sans jamais déborder sur la case voisine
|
||||
@@ -428,13 +429,6 @@
|
||||
classeur.style.width = (((CLASSEUR_X2 - CLASSEUR_X1) / IMG_W) * dispW) + 'px';
|
||||
classeur.style.height = (((CLASSEUR_Y2 - CLASSEUR_Y1) / IMG_H) * dispH) + 'px';
|
||||
|
||||
const chevalet = document.getElementById('chevalet');
|
||||
chevalet.style.left = (offX + (CHEVALET_X1 / IMG_W) * dispW) + 'px';
|
||||
chevalet.style.top = (offY + (CHEVALET_Y1 / IMG_H) * dispH) + 'px';
|
||||
chevalet.style.width = (((CHEVALET_X2 - CHEVALET_X1) / IMG_W) * dispW) + 'px';
|
||||
chevalet.style.height = (((CHEVALET_Y2 - CHEVALET_Y1) / IMG_H) * dispH) + 'px';
|
||||
chevalet.style.fontSize = (CHEVALET_POLICE_FRAC * dispW) + 'px';
|
||||
|
||||
const microDesk = document.getElementById('micro-desk');
|
||||
microDesk.style.left = (offX + (MICRO_ZONE_X1 / IMG_W) * dispW) + 'px';
|
||||
microDesk.style.top = (offY + (MICRO_ZONE_Y1 / IMG_H) * dispH) + 'px';
|
||||
@@ -448,11 +442,10 @@
|
||||
microIcone.style.width = iconeTaille + 'px';
|
||||
microIcone.style.height = iconeTaille + 'px';
|
||||
|
||||
const versionDesk = document.getElementById('version-desk');
|
||||
versionDesk.style.left = (offX + (VERSION_X / IMG_W) * dispW - 200) + 'px';
|
||||
versionDesk.style.width = '200px';
|
||||
versionDesk.style.top = (offY + (VERSION_Y / IMG_H) * dispH) + 'px';
|
||||
versionDesk.style.fontSize = (VERSION_POLICE_FRAC * dispW) + 'px';
|
||||
// #statut-version-bloc (société/prénom/marque) ne fait plus partie de ce
|
||||
// calcul depuis le 3 septembre 2026 : position fixe en bas à droite de
|
||||
// l'écran, en pixels fixes CSS — voir le commentaire au-dessus de sa
|
||||
// règle #statut-version-bloc et le journal.
|
||||
|
||||
const pastilleContacts = document.getElementById('pastille-contacts');
|
||||
const pastilleDiam = PASTILLE_CONTACTS_DIAM_FRAC * dispW;
|
||||
@@ -528,46 +521,63 @@
|
||||
});
|
||||
appliquerEtatMicroDesk();
|
||||
|
||||
// Identité affichée sur le chevalet : preferences.php (voir journal
|
||||
// section 22), qui renvoie USR_Prenom (ajouté le 2 septembre 2026 dans
|
||||
// ASP_Users à la demande de Jean-Marc). Société retirée de l'affichage
|
||||
// le même jour ("l'utilisateur la connaît déjà") — plus besoin d'aller
|
||||
// chercher USR_Societe ici. Repli silencieux (mêmes principes que
|
||||
// chargerPreferences()) si la session n'est pas active.
|
||||
async function chargerIdentiteChevalet() {
|
||||
const elNom = document.getElementById('chevalet-nom');
|
||||
// Société et prénom de l'utilisateur connecté (3 septembre 2026, voir
|
||||
// journal) : preferences.php, même endpoint et même logique que
|
||||
// chargerPreferences() dans liste_contacts.html — repris ici à l'identique
|
||||
// pour le groupe #statut-version-bloc (voir plus haut, id communs avec
|
||||
// liste_contacts.html). Le chevalet qui affichait seul le prénom
|
||||
// (USR_Prenom, ajouté le 2 septembre 2026 dans ASP_Users) a été retiré du
|
||||
// bureau le 3 septembre — cette fonction ne porte donc plus que ce groupe.
|
||||
// Repli silencieux si la session n'est pas active.
|
||||
async function chargerIdentiteUtilisateur() {
|
||||
const elSociete = document.getElementById('societe-utilisateur');
|
||||
const elPointSociete = document.getElementById('point-societe');
|
||||
const elPrenom = document.getElementById('prenom-utilisateur');
|
||||
try {
|
||||
const reponsePrefs = await fetch('preferences.php');
|
||||
if (!reponsePrefs.ok) throw new Error('HTTP ' + reponsePrefs.status);
|
||||
const prefs = await reponsePrefs.json();
|
||||
elNom.textContent = prefs.USR_Prenom || prefs.USR_Code || '—';
|
||||
if (prefs.USR_Societe) {
|
||||
elSociete.textContent = prefs.USR_Societe;
|
||||
elSociete.hidden = false;
|
||||
elPointSociete.hidden = false;
|
||||
} else {
|
||||
elSociete.hidden = true;
|
||||
elPointSociete.hidden = true;
|
||||
}
|
||||
if (prefs.USR_Prenom) elPrenom.textContent = prefs.USR_Prenom;
|
||||
} catch (erreur) {
|
||||
console.error('Erreur de chargement de preferences.php (chevalet) :', erreur);
|
||||
elNom.textContent = 'Prénom';
|
||||
console.error('Erreur de chargement de preferences.php (identité) :', erreur);
|
||||
}
|
||||
}
|
||||
chargerIdentiteChevalet();
|
||||
chargerIdentiteUtilisateur();
|
||||
|
||||
// Numéro de version affiché sur le bureau : même endpoint que
|
||||
// #statut-version dans liste_contacts.html (chargerVersion(), voir
|
||||
// journal). Repli silencieux si non joignable (fichier hors serveur, ou
|
||||
// version.php absent de ce dossier) : l'écran reste utilisable sans.
|
||||
async function chargerVersionDesk() {
|
||||
// Numéro de version : même endpoint que #statut-version dans
|
||||
// liste_contacts.html (chargerVersion(), voir journal). Repli silencieux
|
||||
// si non joignable (fichier hors serveur, ou version.php absent de ce
|
||||
// dossier) : l'écran reste utilisable sans.
|
||||
async function chargerVersionBureau() {
|
||||
try {
|
||||
const reponse = await fetch('version.php');
|
||||
if (!reponse.ok) throw new Error('HTTP ' + reponse.status);
|
||||
const data = await reponse.json();
|
||||
if (data.version) document.getElementById('version-desk').textContent = data.version;
|
||||
if (data.version) {
|
||||
document.getElementById('statut-version').textContent = data.version;
|
||||
// Infobulle du groupe icône Mévélia + logo ASPIC + version (3
|
||||
// septembre 2026, voir journal), identique à liste_contacts.html.
|
||||
const elMarque = document.getElementById('marque-aspic');
|
||||
if (elMarque) elMarque.title = 'ASPIC ' + data.version + '\nCréé par Mevelia Solutions';
|
||||
}
|
||||
} catch (erreur) {
|
||||
console.error('Erreur de chargement de version.php (bureau) :', erreur);
|
||||
}
|
||||
}
|
||||
chargerVersionDesk();
|
||||
chargerVersionBureau();
|
||||
|
||||
// Pastille "nombre de contacts" du classeur Contacts : total réel de la
|
||||
// table (contacts.php?compte=1, voir journal section 28 et commentaire
|
||||
// ajouté dans contacts.php), jamais un chiffre figé. Repli visuel "—" en
|
||||
// cas d'échec (même logique que chargerIdentiteChevalet), pour ne jamais
|
||||
// cas d'échec (même logique que chargerIdentiteUtilisateur), pour ne jamais
|
||||
// laisser une pastille vide sans explication. Le pattern (constantes
|
||||
// PASTILLE_*, positionnement dans positionner(), chargement ici) est
|
||||
// pensé pour être dupliqué sur les prochains classeurs à mesure qu'ils
|
||||
@@ -645,14 +655,17 @@
|
||||
chargerMesPostits();
|
||||
|
||||
// Lien visible "→ Liste des tâches" retiré le 2 septembre 2026 à la
|
||||
// demande de Jean-Marc. Échap conservé comme échappatoire silencieuse
|
||||
// (même logique que le reste de l'appli), pour ne pas rester bloqué sur
|
||||
// cet écran tant qu'il ne porte aucun objet fonctionnel.
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
window.location.href = 'liste_todolist.html';
|
||||
}
|
||||
});
|
||||
// demande de Jean-Marc. Échap avait été conservé ce soir-là comme
|
||||
// échappatoire silencieuse vers liste_todolist.html, pour ne pas rester
|
||||
// bloqué sur cet écran tant qu'il ne portait aucun objet fonctionnel.
|
||||
// Retiré le 3 septembre 2026 (bug signalé par Jean-Marc) : cet écran est
|
||||
// depuis la veille le véritable écran d'accueil post-identification (voir
|
||||
// journal, section 28) — liste_contacts.html y ramène désormais par Échap
|
||||
// (voir journal du 3 septembre), donc un Échap qui, depuis l'écran
|
||||
// d'accueil lui-même, repartait ailleurs créait une boucle incohérente.
|
||||
// Aucune redirection ne remplace celle-ci : Échap ne fait plus rien ici,
|
||||
// faute d'un "retour" qui ait un sens depuis l'écran d'accueil. À revoir
|
||||
// le jour où la ToDoList aura son propre objet cliquable sur le bureau.
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 89 KiB After Width: | Height: | Size: 119 KiB |
@@ -4,6 +4,9 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ASPIC — Identification</title>
|
||||
<!-- Icône d'onglet (3 septembre 2026, voir journal) : logo Mévélia Solutions,
|
||||
fourni par Jean-Marc, reprise à l'identique sur tous les écrans. -->
|
||||
<link rel="icon" href="mevelia-icone.png">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'MetroDF';
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
Ce document explique comment utiliser ASPIC au quotidien, écran par écran. Il est écrit pour l'utilisateur de l'application, pas pour un développeur — pour les détails techniques (choix d'architecture, code, structure de la base de données), voir le "Journal de développement ASPIC", document séparé dans ce même projet.
|
||||
|
||||
Ce premier jet couvre les deux écrans construits à ce jour (identification et liste des contacts). Il sera complété au fur et à mesure que de nouveaux écrans seront ajoutés à l'application.
|
||||
Ce premier jet couvre les écrans construits à ce jour (identification, écran d'accueil, liste des contacts). Il sera complété au fur et à mesure que de nouveaux écrans seront ajoutés ou documentés — en particulier le panneau de détail du contact, la ToDoList et le pilotage vocal, déjà en service mais pas encore décrits ici.
|
||||
|
||||
## 1. Se connecter à ASPIC
|
||||
|
||||
@@ -25,15 +25,25 @@ Pour fermer ce message d'erreur sans quitter l'application et corriger votre sai
|
||||
|
||||
**Quitter l'application** : la touche **Échap**, utilisée à tout autre moment sur cet écran (aucun message d'erreur affiché), ferme directement l'application.
|
||||
|
||||
Une fois l'identification réussie, vous êtes automatiquement redirigé vers l'écran "Liste des contacts".
|
||||
Une fois l'identification réussie, vous êtes automatiquement redirigé vers l'**écran d'accueil** (le bureau — voir ci-dessous).
|
||||
|
||||
## 2. La liste des contacts
|
||||
## 2. L'écran d'accueil
|
||||
|
||||
C'est l'écran d'accueil de l'application une fois connecté : un tableau présentant tous vos contacts actifs, avec sept colonnes — Nom, Prénom, Département, Ville, Téléphone, Portable, Mail.
|
||||
C'est le premier écran affiché après connexion : une photo de bureau, sur lequel sont posés les objets et raccourcis fonctionnels de l'application.
|
||||
|
||||
- Le **classeur "Contacts"** (à gauche) s'ouvre d'un clic et affiche la liste des contacts (voir section 3). Une petite pastille sur le classeur indique en permanence le nombre de contacts actifs.
|
||||
- Le **micro**, au centre du bureau, permet de basculer son affichage entre inactif et en écoute — le pilotage vocal réel n'est pas encore documenté ici.
|
||||
- En bas à droite de l'écran : votre société, votre prénom, et le numéro de version de l'application — les mêmes informations, à la même place, se retrouvent sur l'écran "Liste des contacts" (voir section 3).
|
||||
|
||||
La touche **Échap** n'a pas d'effet particulier sur cet écran pour l'instant.
|
||||
|
||||
## 3. La liste des contacts
|
||||
|
||||
Cet écran s'ouvre depuis l'écran d'accueil (clic sur le classeur "Contacts") : un tableau présentant tous vos contacts actifs, avec sept colonnes — Nom, Prénom, Département, Ville, Téléphone, Portable, Mail.
|
||||
|
||||
### Se repérer dans la liste
|
||||
|
||||
La barre en bas de l'écran indique en permanence : le nombre de contacts actuellement affichés sur le nombre total de contacts actifs, le tri en cours, et le filtre actif s'il y en a un.
|
||||
Le bandeau du haut porte le titre de l'écran. La barre en bas indique en permanence : le nombre de contacts actuellement affichés sur le nombre total de contacts actifs, le tri en cours, le filtre actif s'il y en a un, ainsi que votre société, votre prénom et le numéro de version (même bloc qu'à l'accueil, voir section 2).
|
||||
|
||||
### Trier la liste
|
||||
|
||||
@@ -44,7 +54,7 @@ Un clic sur l'en-tête **Nom** ou **Ville** trie la liste sur cette colonne ; un
|
||||
- Un clic sur une ligne la sélectionne (encadré vert).
|
||||
- Les flèches **haut/bas** du clavier déplacent la sélection ligne par ligne.
|
||||
- **Page précédente / Page suivante** font défiler la liste par blocs.
|
||||
- La touche **Entrée**, une fois un contact sélectionné, ouvre son détail *(écran à venir — pour l'instant un message temporaire s'affiche à la place)*.
|
||||
- La touche **Entrée**, une fois un contact sélectionné, ouvre son détail dans un panneau latéral.
|
||||
|
||||
### Actions sur un contact : le menu contextuel
|
||||
|
||||
@@ -62,15 +72,11 @@ La case à cocher **Supprimer les filtres**, en haut du panneau, vide et désact
|
||||
|
||||
Une fois les filtres saisis, le bouton **Appliquer** met à jour la liste ; **Réinitialiser** efface la saisie du formulaire sans quitter le panneau. L'icône entonnoir se met en surbrillance dès qu'un filtre est actif, pour le rappeler visuellement même une fois le panneau refermé.
|
||||
|
||||
### Le menu principal
|
||||
### Fermer un panneau, ou revenir à l'accueil
|
||||
|
||||
L'icône en forme de menu ("hamburger"), en haut à gauche, ouvre un menu avec les grandes sections de l'application. À ce stade, seule *Gestion des contacts* (cet écran) est active ; *Gestion des actions* et *Documentation* apparaissent grisées, en attente de leur développement.
|
||||
|
||||
### Fermer un panneau ouvert
|
||||
|
||||
Quel que soit le panneau actuellement ouvert (menu contextuel, menu principal, ou panneau de filtre), la touche **Échap** le referme. Si aucun panneau n'est ouvert, Échap n'a pas d'effet sur cet écran.
|
||||
Quel que soit le panneau actuellement ouvert (menu contextuel, panneau de détail, ou panneau de filtre), la touche **Échap** le referme. Si aucun panneau n'est ouvert, Échap vous ramène à l'écran d'accueil (section 2).
|
||||
|
||||
## À venir
|
||||
|
||||
- **Écran de détail du contact** : consultation et modification des informations d'un contact, et de l'historique de ses réalisations (actions menées auprès de lui — appels, échanges, prospections… — chacune pouvant porter son propre commentaire).
|
||||
- **Panneau de détail du contact**, **ToDoList** et **pilotage vocal** : déjà en service dans l'application, pas encore décrits dans ce document — à rédiger.
|
||||
- Les données affichées correspondent à vos contacts actifs uniquement ; un contact supprimé n'est pas détruit mais simplement retiré de cette liste (récupérable en cas de besoin, fonctionnalité à venir).
|
||||
|
||||
@@ -78,12 +78,15 @@ Point relevé par Jean-Marc en toute fin de session, à traiter plus tard : les
|
||||
|
||||
Version incrémentée une seule fois pour l'ensemble de cette session (pastille classeur + capacité tableau + affichage post-its), conformément à la règle d'une incrémentation par session : **V1.008**.
|
||||
|
||||
**3 septembre 2026 : homogénéisation liste des contacts / écran de fond, adaptation à la nouvelle photo de bureau (V1.009).** Détail complet en section 28 du journal (`/journal` sur GitHub). Résumé : nettoyage des bandeaux de `liste_contacts.html` (hamburger, avatar, badge société et micro retirés du haut, regroupés avec le logo et la version dans la barre du bas désormais commune aux deux écrans) ; icône Mévélia Solutions ajoutée devant le logo ASPIC (et en favicon) avec infobulle ; bug corrigé où Échap sur l'écran de fond ouvrait par erreur la ToDoList ; correctif `.htaccess` livré pour un problème récurrent de cache navigateur (déploiement non encore confirmé) ; nouvelle photo `ecran_fond.jpg` fournie par Jean-Marc (chevalet physiquement retiré de la scène, 13px de bureau en moins / de liège en plus), tous les positionnements calés sur l'image repris avec un décalage de +13px mesuré par analyse de pixels ; bloc identité (société/prénom/logo/version) reconstruit en position fixe de viewport, identique sur les deux écrans, après une première tentative erronée de le caler sur les coordonnées de la photo ; bug d'alignement horizontal entre les deux écrans corrigé (résidu de calcul `--sb-width` sans rapport avec cette barre). Version incrémentée une seule fois pour l'ensemble de cette session : **V1.009**. Documentation utilisateur mise à jour en fin de session pour refléter le nouvel écran d'accueil et la disparition du hamburger.
|
||||
|
||||
**Reste à faire, noté au passage :**
|
||||
- Vérifier concrètement que le `.htaccess` du dossier `/journal` bloque bien l'accès direct (`curl -I` sur un fichier du dossier doit répondre `403`, pas `200` — point en suspens depuis le 31 août).
|
||||
- Confirmer le déploiement du correctif `.htaccess` de cache livré le 3 septembre (fichier `htaccess-racine-aspic.txt`, à renommer et déposer à la racine de l'application).
|
||||
- Pilotage vocal, étape 2 : définir les règles d'interprétation du contenu dicté (aujourd'hui stocké tel quel), envisagée via n8n avec des règles modifiables par l'utilisateur.
|
||||
- Continuer à observer les agents actifs (Viktor, Matilda, Léon, Nikita) en usage réel ; ajuster `AGN_Variantes` en base si de nouvelles confusions apparaissent.
|
||||
- Documentation utilisateur du pilotage vocal : pas encore rédigée, fonctionnalité encore en phase d'essais techniques.
|
||||
- Écran de fond : revoir un jour le sujet de la "tranche du bureau" non visible chez Jean-Marc ; décider si les autres objets photographiés (carnet, téléphone) doivent devenir cliquables ; brancher le micro du bureau sur la reconnaissance vocale réelle ; trancher un jour le sort de la piste "maquette liège + post-its par agent" (Claude Design, mise de côté pour cet essai, pas explicitement abandonnée).
|
||||
- Documentation utilisateur : le panneau de détail du contact, la ToDoList et le pilotage vocal restent à documenter (mise à jour du 3 septembre limitée à l'écran d'accueil et à la liste des contacts).
|
||||
- Écran de fond : reconfirmer l'état de la "tranche du bureau" après le recadrage du 3 septembre (a pu déplacer le problème sans que ce soit son objet) ; décider si les autres objets photographiés (carnet, téléphone) doivent devenir cliquables ; brancher le micro du bureau (et celui de la barre de statut) sur la reconnaissance vocale réelle ; trancher un jour le sort de la piste "maquette liège + post-its par agent" (Claude Design, mise de côté pour cet essai, pas explicitement abandonnée).
|
||||
- Tableau de liège : coder la répartition dynamique des 70% entre assistants par charge de tâches (formule actée, voir Statut actuel) — bloqué tant que la ToDoList des assistants n'existe pas réellement.
|
||||
- Étendre `ASP_ToDoList`/`todolist.php` pour qu'un assistant puisse être attributaire d'une tâche (discriminant humain/agent à définir) — préalable à la répartition dynamique et aux couleurs de post-it par assistant (`AGN_Couleur`, à ajouter).
|
||||
- Écran "journalier" (trace des réalisations, humain + assistants) — donnée déjà quasi disponible (`TDL_RealDate`/`TDL_RealUser`/`TDL_RealText`), écran de consultation à construire.
|
||||
|
||||
@@ -95,28 +95,82 @@ Implémenté dans `ecran_fond.html`, en s'appuyant sur le pattern `positionner()
|
||||
|
||||
`contacts.php` (paramètre `?compte=1`), `ecran_fond.html` (pastille classeur + zone et grille de post-its), `todolist.php` (constante et vérification de capacité), `version.php` (`V1.008`).
|
||||
|
||||
## 3 septembre 2026 : homogénéisation des écrans, adaptation à la nouvelle photo de bureau (V1.009)
|
||||
|
||||
Session dédiée, dès l'ouverture, à mettre en cohérence l'écran de fond avec la liste des contacts (bandeaux, identité utilisateur, micro) — objectif explicite de Jean-Marc : *"mettre en cohérence la gestion des contacts avec ce que l'on a mis en place hier"*. De nombreux allers-retours de correction fine, avec plusieurs incompréhensions de Claude corrigées en cours de route par Jean-Marc — détaillées ci-dessous car elles éclairent des règles de conception à retenir pour la suite.
|
||||
|
||||
### Nettoyage des barres de `liste_contacts.html`
|
||||
|
||||
Retiré du bandeau haut : l'icône menu ("hamburger", devenue inutile depuis que l'écran de fond est le véritable écran d'accueil), l'avatar/nom court, le badge société, et l'icône micro. Le bandeau haut ne porte plus que le titre, renommé de "LISTE DES CONTACTS" à **"CLASSEUR DES CONTACTS. Liste de synthèse"**, calé là où était le hamburger.
|
||||
|
||||
La barre de statut basse regroupe en contrepartie tout ce qui identifie l'utilisateur et l'application : société, prénom, micro (recentré au milieu de la barre — voir plus bas), logo ASPIC miniature et numéro de version. Hauteur portée de 20 à 32px pour que le bouton micro y tienne à sa taille réelle.
|
||||
|
||||
Touche **Échap** sur cet écran : ramène désormais à `ecran_fond.html` (au lieu de fermer l'application — comportement de l'écran d'identification, qui n'a plus lieu d'être ici puisque l'écran de fond fait maintenant tampon).
|
||||
|
||||
### Logo, icône Mévélia, numéro de version — une "marque" commune aux deux écrans
|
||||
|
||||
Le logo ASPIC, retiré du bandeau haut, réapparaît en mini format dans la barre du bas, devant le numéro de version, avec le même traitement graphique repris à l'identique sur l'écran de fond (cohérence explicitement demandée par Jean-Marc — *"ajoute de la même façon le logo dans l'écran de départ"*).
|
||||
|
||||
Ajouts successifs sur ce groupe (`#marque-aspic`) : icône ronde Mévélia Solutions (fournie par Jean-Marc, initialement carrée puis reprise en cercle via `border-radius:50%`, après vérification par Claude — masque circulaire en Python/PIL — que le recadrage ne coupait aucune partie du logo) placée devant le logo ASPIC ; infobulle multi-lignes au survol du groupe entier ("ASPIC Vn.nnn / Créé par Mevelia Solutions", numéro de version injecté dynamiquement) ; espacement interne réduit de moitié (8px→4px) à la demande de Jean-Marc. Icône Mévélia également posée en favicon sur les quatre écrans HTML de l'application. Onglet du navigateur renommé "ASPIC. Classeur des contacts" (au lieu de "ASPIC - Liste des taches", resté de l'époque où la ToDoList était l'écran d'accueil).
|
||||
|
||||
### Identité utilisateur (société, prénom) — repositionnement et corrections
|
||||
|
||||
Société et prénom, auparavant dans le bandeau haut (badge société en cartouche bleu, avatar prénom), sont désormais du texte simple dans la barre du bas, séparés par un "gros point" (`•`, 14px) — un entre société et prénom, un second entre prénom et le groupe `#marque-aspic`. Le badge cartouche est abandonné : même mise en forme simple pour les deux informations.
|
||||
|
||||
**Erreur corrigée en cours de route par Jean-Marc :** un premier essai groupait par erreur le bouton micro avec ce bloc identité en bas à droite. Correction demandée : le micro doit être **seul**, centré au milieu de toute la barre — pas dans le groupe identité — par cohérence avec le micro de l'écran de fond, posé au milieu du bureau, sans lien avec une notion d'identité. Bouton `#bouton-micro` sorti du bloc, repositionné en absolu centré (`left:50%;top:50%;transform:translate(-50%,-50%)`), icônes et couleurs reprises à l'identique de l'écran de fond (SVG glyphe-repos/glyphe-ecoute, gris au repos `#d9d9d3`, rouge `#e14a5c` en écoute, mêmes barres d'animation `pulse-barre`). Un rond de fond noir (`background:var(--cartouche-bg)`, `border-radius:50%`) a ensuite été ajouté derrière l'icône, celle-ci étant quasi invisible en gris sur gris sur le fond de la barre.
|
||||
|
||||
### Bug corrigé : Échap sur l'écran de fond ouvrait la ToDoList
|
||||
|
||||
Repéré par hasard par Jean-Marc (*"quad je tape esc dans l'écran de départ j'accède à l'écran de la todolist"*). Cause : un gestionnaire de touche Échap resté de l'époque où `liste_todolist.html` était l'écran d'accueil, jamais retiré quand l'écran de fond a pris ce rôle. Le gestionnaire a été purement et simplement supprimé — Échap sur l'écran de fond n'a désormais aucun effet de navigation.
|
||||
|
||||
### Correctif de cache navigateur (`.htaccess`)
|
||||
|
||||
En marge des demandes visuelles, Jean-Marc a signalé un problème récurrent et ancien : après dépôt d'une nouvelle version, les pages restent affichées dans leur ancien état malgré rafraîchissements classiques (F5, Ctrl-F5), un passage par la navigation privée étant jusqu'ici son seul contournement fiable. Fichier livré : `htaccess-racine-aspic.txt` (à renommer `.htaccess` et déposer à la racine de l'application) — ajoute `Cache-Control: no-cache, must-revalidate` sur les fichiers `.html`/`.js`/`.css`, pour que le navigateur revérifie systématiquement auprès du serveur plutôt que de servir une copie locale périmée. **Non confirmé déployé par Jean-Marc à la clôture de cette session — à vérifier à la prochaine.**
|
||||
|
||||
### Nouvelle photo de bureau — chevalet retiré, repositionnement complet
|
||||
|
||||
Jean-Marc a livré une nouvelle version de `ecran_fond.jpg` (mêmes dimensions 1024×457) : 13px retirés en bas de la photo (tranche de bureau), 13px de liège ajoutés en haut, et le petit chevalet — porteur jusque-là du prénom de l'utilisateur — physiquement retiré de la scène photographiée (*"je l'ai rangé dans une armoire"*).
|
||||
|
||||
Décalage vérifié empiriquement par Claude par analyse de pixels (Python/PIL — repérage de transitions de couleur et de boîtes englobantes sur des objets reconnaissables des deux photos) plutôt que déduit du seul énoncé de Jean-Marc : +13px uniforme sur l'axe vertical, aucun décalage horizontal, confirmé sur plusieurs objets de contrôle avant application.
|
||||
|
||||
Répercuté dans `ecran_fond.html` : toutes les constantes de positionnement calées sur l'image (étiquette du classeur, zone cliquable du classeur, zone et icône du micro, pastille de comptage) décalées de +13 en Y ; zone des post-its agrandie en hauteur (limite basse repoussée de y=352 à y=395) puisque le chevalet ne la borne plus. Le chevalet a été retiré intégralement : CSS, HTML, constantes JS, fonction `chargerIdentiteChevalet()` renommée `chargerIdentiteUtilisateur()` (logique chevalet proprement retirée, seule la lecture société/prénom est conservée), `chargerVersionDesk()` renommée `chargerVersionBureau()`.
|
||||
|
||||
**Incompréhension corrigée en cours de route par Jean-Marc, à retenir comme règle de conception :** dans un premier temps, Claude avait replacé le bloc identité (société/prénom/marque) sur l'écran de fond en le calant sur le système de coordonnées de la photo, comme les autres éléments du décor — raisonnement erroné. Rappel de Jean-Marc : *"tu affiches les infos en bas à droite à la même place que dans la liste des contacts"* — ce bloc n'est **pas** un élément photographié, c'est une donnée d'interface qui doit rester à une position fixe du viewport, identique pixel pour pixel à celle de `liste_contacts.html`, indépendamment de la photo affichée derrière. Reconstruit en conséquence : mêmes identifiants HTML que `liste_contacts.html` (pas de suffixe `-desk`), CSS `position:fixed;right:16px;bottom:10px`, entièrement sorti de la fonction `positionner()` (qui ne recalcule plus que les éléments réellement ancrés sur la photo).
|
||||
|
||||
### Alignement horizontal entre les deux écrans — bug du `--sb-width`
|
||||
|
||||
Après déploiement et test réel par Jean-Marc (*"tatillon, je sais"*), écart horizontal constaté entre les deux écrans sur ce même bloc identité : décalé vers la droite sur la liste des contacts par rapport à l'écran de fond. Cause identifiée : `liste_contacts.html` calait le bloc avec `right:calc(var(--sb-width) + 10px)`, `--sb-width` étant en réalité la largeur de l'ascenseur *interne* de la liste (mesurée en JS, servant à l'origine à aligner l'en-tête de colonnes sur l'ascenseur du corps de liste) — une variable sans rapport avec la barre de statut du bas, qui ne porte plus aucun repère visuel d'ascenseur. Reliquat de raisonnement par réutilisation d'une variable déjà présente, plutôt qu'une vraie contrainte de mise en page. Corrigé en calant `right:16px` en dur, valeur identique à `ecran_fond.html` — vérifié par mesure de position réelle (`getBoundingClientRect()`) : les deux blocs tombent désormais exactement à `right:16px` / `left:1034,375px` sur une même largeur de fenêtre.
|
||||
|
||||
### Fichiers touchés (3 septembre 2026)
|
||||
|
||||
`liste_contacts.html`, `ecran_fond.html`, `ecran_fond.jpg` (nouvelle photo fournie par Jean-Marc), `identification.html` et `liste_todolist.html` (favicon uniquement), `mevelia-icone.png` (nouveau), `htaccess-racine-aspic.txt` (nouveau, non encore déployé), `version.php` (`V1.009`, incrémentée une seule fois pour l'ensemble de cette session).
|
||||
|
||||
## Point ouvert, non tranché
|
||||
|
||||
- La question enveloppes/Gmail (voir plus haut) portait sur la maquette liège/post-its, mise de côté par le changement de cap ci-dessus — à retrancher le jour où cette piste sera reprise, pas urgent pour l'essai en cours.
|
||||
- Confirmer un jour le libellé du 4ᵉ classeur envisagé dans la maquette liège ("À faire" / ToDoList) — question qui ne se pose plus dans l'immédiat : l'essai en cours n'a pour l'instant qu'un seul classeur fonctionnel ("Contacts").
|
||||
- La "tranche du bureau" (bord avant du plan de travail, en bas de l'image) n'est pas visible à l'écran chez Jean-Marc. Il précise que ça ne le gêne pas dans l'immédiat, mais que ça pourrait poser problème plus tard — à revoir un jour. Cause non investiguée à ce stade.
|
||||
- Répartition dynamique des 70% entre assistants par charge de tâches (formule actée, voir ci-dessus) — pas codée, bloquée tant que la ToDoList des assistants n'existe pas réellement.
|
||||
- La "tranche du bureau" (bord avant du plan de travail) n'était pas visible à l'écran chez Jean-Marc sur l'ancienne photo — non revérifié depuis le recadrage du 3 septembre (13px retirés en bas), qui a pu déplacer ou atténuer le problème sans que ce soit son objet. À reconfirmer à l'usage.
|
||||
- Répartition dynamique des 70% entre assistants par charge de tâches (formule actée, voir plus haut) — pas codée, bloquée tant que la ToDoList des assistants n'existe pas réellement.
|
||||
- Discriminant humain/agent à ajouter à `ASP_ToDoList`/`todolist.php` pour qu'un assistant puisse être attributaire d'une tâche — préalable à la répartition dynamique et aux couleurs de post-it par assistant (`AGN_Couleur`).
|
||||
- Écran "journalier" (trace des réalisations, humain + assistants) — donnée déjà quasi disponible, écran à construire.
|
||||
- Règles de calcul des pastilles rouge/orange/vert à revoir (voir remarque de Jean-Marc ci-dessus).
|
||||
- Règles de calcul des pastilles rouge/orange/vert à revoir (voir remarque de Jean-Marc, nuit du 2-3 septembre).
|
||||
- Comportement du clic sur un post-it à décider (aujourd'hui inerte) : ouvrir `liste_todolist.html` sur la tâche précise, ou détail affiché directement sur l'écran de fond.
|
||||
- Capacité du tableau (20) et taille de la grille (4×5) sont des valeurs provisoires posées avant d'avoir les vrais pixels de la version aboutie — à ajuster ensemble après usage réel prolongé.
|
||||
- Déploiement du correctif `.htaccess` de cache (voir ci-dessus) — à confirmer par Jean-Marc.
|
||||
- Documentation utilisateur : certains passages décrivant l'écran "Liste des contacts" comme écran d'accueil et le menu hamburger sont devenus obsolètes suite aux changements du 3 septembre — corrections ponctuelles apportées le jour même (voir document séparé), une repasse plus complète (écran de fond, panneau détail, ToDoList, pilotage vocal — aucun de ces écrans n'est encore documenté pour l'utilisateur) reste à faire un jour.
|
||||
|
||||
## Statut et suite
|
||||
|
||||
**Deux livraisons réelles sur la même soirée du 2 septembre, la seconde se prolongeant après minuit (3 septembre) :** l'essai fonctionnel initial (classeur Contacts, chevalet, micro test d'affichage, version — V1.007), puis la pastille de comptage sur le classeur et un premier affichage réel, fonctionnel et testé, du tableau de post-its personnels de Jean-Marc (V1.008). Plusieurs allers-retours de correction fine à chaque étape, à partir des retours directs de Jean-Marc sur son propre écran ou sur des rendus envoyés par Claude — la mesure de position sur une photo réelle (plutôt que sur un dessin vectoriel) continue de demander une vérification fine à chaque retour.
|
||||
**Trois livraisons réelles en trois jours consécutifs (2-3 septembre) :** l'essai fonctionnel initial de l'écran de fond (classeur Contacts, chevalet, micro test d'affichage, version — V1.007), la pastille de comptage et le premier affichage réel du tableau de post-its (V1.008), puis cette session d'homogénéisation des deux écrans et d'adaptation à la nouvelle photo sans chevalet (V1.009). Plusieurs allers-retours de correction fine à chaque étape, à partir des retours directs de Jean-Marc sur son propre écran ou sur des rendus envoyés par Claude — la mesure de position sur une photo réelle (plutôt que sur un dessin vectoriel) continue de demander une vérification fine à chaque retour, y compris pour des détails de mise en page fine (calage horizontal du bloc identité).
|
||||
|
||||
Séance close sur un bilan explicitement positif de Jean-Marc ("très satisfait du travail accompli"), après une séance précédente terminée sur une note plus mitigée. Fin de session actée à sa demande, sans blocage — dépôt des fichiers sur GitHub prévu par ses soins le lendemain matin.
|
||||
Séance close sur un bilan explicitement positif de Jean-Marc — *"content car... j'ai commencé à homogénéiser la logique des écrans, ce qui est pour moi important"*, confirmé "very well" après déploiement et test réel sur son propre environnement. Fin de session actée à sa demande, protocole habituel de clôture suivi (mise à jour du journal, copies téléchargeables, vérification du dépôt une fois le push de Jean-Marc effectué).
|
||||
|
||||
**Reste à faire, noté au passage :**
|
||||
- Revoir un jour le sujet de la "tranche du bureau" non visible chez Jean-Marc (voir ci-dessus).
|
||||
- Décider si les autres objets photographiés sur le bureau (carnet, téléphone) doivent devenir cliquables/fonctionnels dans une prochaine étape, ou rester un habillage visuel statique pour l'instant.
|
||||
- Brancher réellement le micro du bureau sur la reconnaissance vocale de `micro.js` (aujourd'hui : bascule d'affichage seule, sans effet sur l'écoute réelle).
|
||||
- Confirmer le déploiement du correctif `.htaccess` de cache.
|
||||
- Reconfirmer l'état de la "tranche du bureau" après le recadrage du 3 septembre (voir ci-dessus).
|
||||
- Décider si les autres objets photographiés sur le bureau (carnet, téléphone) doivent devenir cliquables/fonctionnels, ou rester un habillage visuel statique.
|
||||
- Brancher réellement le micro du bureau (et celui de la barre de statut) sur la reconnaissance vocale de `micro.js` (aujourd'hui : bascule d'affichage seule, sans effet sur l'écoute réelle).
|
||||
- Trancher, un jour, le sort de la piste "maquette liège + post-its par agent" (Claude Design) : mise de côté pour les essais en cours, mais pas explicitement enterrée pour une version plus aboutie.
|
||||
- Artifact de travail de la maquette liège (dernière version, non utilisée dans l'essai actuel) : https://claude.ai/code/artifact/a647369f-d320-4b21-9f8c-11b20f2ad353 — lien privé à Jean-Marc, à ne pas considérer comme un livrable définitif.
|
||||
- Repasse complète de la documentation utilisateur pour couvrir l'écran de fond, le panneau détail, la ToDoList et le pilotage vocal.
|
||||
- Répartition dynamique par charge, discriminant humain/agent, écran journalier, règles de pastilles, comportement du clic sur un post-it, calibrage capacité/grille : voir "Point ouvert, non tranché" ci-dessus.
|
||||
|
||||
+200
-156
@@ -2,7 +2,10 @@
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>ASPIC — Liste des contacts</title>
|
||||
<title>ASPIC. Classeur des contacts</title>
|
||||
<!-- Icône d'onglet (3 septembre 2026, voir journal) : logo Mévélia Solutions,
|
||||
fourni par Jean-Marc, reprise à l'identique sur tous les écrans. -->
|
||||
<link rel="icon" href="mevelia-icone.png">
|
||||
<style>
|
||||
@font-face{
|
||||
font-family:"Metro DF";
|
||||
@@ -59,87 +62,82 @@
|
||||
padding:0 16px;
|
||||
gap:14px;
|
||||
}
|
||||
#hamburger{
|
||||
font-size:20px;cursor:pointer;color:var(--texte-bandeau);
|
||||
padding:2px 6px;border-radius:4px;
|
||||
display:flex;align-items:center;
|
||||
}
|
||||
#hamburger:hover{background:rgba(0,0,0,0.08);}
|
||||
#logo-aspic{
|
||||
display:flex;align-items:center;
|
||||
background:var(--cartouche-bg);
|
||||
border-radius:5px;
|
||||
padding:4px 10px;
|
||||
font-family:var(--font-logo);
|
||||
font-weight:900;font-size:15px;letter-spacing:1.5px;
|
||||
}
|
||||
#logo-aspic .A{color:var(--orange);}
|
||||
#logo-aspic .rest{color:#FFFFFF;}
|
||||
/* Icône hamburger et logo ASPIC du bandeau haut supprimés le 3 septembre
|
||||
2026 (voir journal) : le menu hamburger n'a plus de raison d'être
|
||||
maintenant que l'écran de fond (ecran_fond.html) est le véritable écran
|
||||
d'accueil et qu'Échap y ramène directement depuis cet écran ; le logo
|
||||
ASPIC est réduit et déplacé dans la barre de statut, devant le numéro de
|
||||
version (voir #logo-aspic-mini plus bas). #titre-ecran prend la place
|
||||
laissée par l'icône hamburger, en tout premier dans le bandeau. */
|
||||
#titre-ecran{
|
||||
font-size:16px;font-weight:800;color:var(--texte-bandeau);letter-spacing:0.5px;
|
||||
}
|
||||
#bandeau-spacer{flex:1;}
|
||||
#avatar{
|
||||
width:28px;height:28px;border-radius:50%;
|
||||
background:var(--bleu-badge);color:#FFFFFF;
|
||||
display:flex;align-items:center;justify-content:center;
|
||||
font-weight:700;font-size:10px;cursor:default;
|
||||
border:1px solid rgba(0,0,0,0.2);
|
||||
margin-left:6px;
|
||||
}
|
||||
/* Badge société (29 août 2026) : repère visuel d'environnement, à gauche
|
||||
de l'avatar. "Bouton" non cliquable (cursor:default, pas de hover) —
|
||||
forme pilule plutôt que le disque de l'avatar, pour bien distinguer les
|
||||
deux informations (société vs utilisateur) tout en les regroupant
|
||||
visuellement. Masqué (display:none) si USR_Societe est vide en base
|
||||
pour l'utilisateur connecté — voir chargerPreferences(). */
|
||||
#badge-societe{
|
||||
height:20px;padding:0 10px;border-radius:10px;
|
||||
background:var(--bleu-badge);color:#FFFFFF;
|
||||
display:flex;align-items:center;justify-content:center;
|
||||
font-weight:700;font-size:10px;letter-spacing:0.3px;cursor:default;
|
||||
border:1px solid rgba(0,0,0,0.2);
|
||||
/* Avatar (nom court de l'utilisateur) et badge société supprimés d'ici le
|
||||
3 septembre 2026 (voir journal) : le bandeau haut ne porte plus que le
|
||||
titre. Société et prénom sont désormais affichés en texte simple dans
|
||||
la barre de statut basse (#societe-utilisateur, #prenom-utilisateur),
|
||||
par cohérence avec le chevalet de l'écran de fond qui affiche déjà
|
||||
USR_Prenom sans cartouche. */
|
||||
|
||||
/* Société et prénom de l'utilisateur connecté (3 septembre 2026, voir
|
||||
journal) : dans la barre de statut basse, la société juste devant le
|
||||
prénom, lui-même juste devant le logo ASPIC miniature — voir
|
||||
#statut-version-bloc. Même mise en forme pour les deux (texte simple,
|
||||
plus de cartouche bleu comme l'ancien badge société). */
|
||||
#societe-utilisateur, #prenom-utilisateur{
|
||||
font-size:11px;font-weight:700;color:#2a2a2a;
|
||||
white-space:nowrap;
|
||||
}
|
||||
#badge-societe[hidden]{display:none;}
|
||||
#societe-utilisateur[hidden]{display:none;}
|
||||
|
||||
/* -------- Bouton micro : pilotage vocal (aspect graphique, 1er septembre
|
||||
2026 — la reconnaissance vocale elle-même n'est pas encore branchée à ce
|
||||
stade, seul le rond cliquable et son animation d'écoute le sont).
|
||||
Placé après l'avatar (plutôt qu'avant le badge société) pour rester à
|
||||
une position fixe dans le bandeau : contrairement au badge société,
|
||||
toujours visible, il ne doit pas se déplacer selon que l'utilisateur
|
||||
connecté a ou non une société renseignée. */
|
||||
Déplacé du bandeau haut vers la barre de statut basse le 3 septembre
|
||||
2026 (voir journal), puis recentré au milieu de cette barre le même
|
||||
jour — cohérence demandée avec l'écran de fond, où le micro est posé au
|
||||
milieu du bureau. Repris de l'écran de fond également : mêmes icônes
|
||||
SVG (glyphe repos/écoute, voir ecran_fond.html #micro-icone) et mêmes
|
||||
couleurs (gris clair au repos, rouge en écoute) — seul micro.js (le
|
||||
comportement réel, partagé entre écrans) reste inchangé : il ne fait
|
||||
que basculer la classe "ecoute" sur #bouton-micro, geste indépendant de
|
||||
l'habillage. Rond noir ajouté le 3 septembre 2026 (retour de Jean-Marc :
|
||||
l'icône gris clair sur le fond gris clair de la barre était quasiment
|
||||
invisible — sur l'écran de fond elle se détachait sur le noir du micro
|
||||
photographié, contraste absent ici) — même teinte que le logo ASPIC
|
||||
miniature (--cartouche-bg) pour rester dans le même langage visuel. */
|
||||
#bouton-micro{
|
||||
width:28px;height:28px;border-radius:50%;
|
||||
background:var(--rouge-micro);
|
||||
position:absolute;left:50%;top:50%;
|
||||
transform:translate(-50%,-50%);
|
||||
width:24px;height:24px;
|
||||
border:none;background:var(--cartouche-bg);border-radius:50%;padding:0;margin:0;
|
||||
display:flex;align-items:center;justify-content:center;
|
||||
cursor:pointer;border:1px solid rgba(0,0,0,0.2);
|
||||
flex:0 0 auto;
|
||||
cursor:pointer;
|
||||
}
|
||||
#bouton-micro:hover{filter:brightness(1.08);}
|
||||
#bouton-micro:active{filter:brightness(0.94);}
|
||||
/* État repos : icône micro simple. */
|
||||
#icone-micro{display:block;}
|
||||
#icone-micro, #barres-ecoute{width:70%;height:70%;display:block;}
|
||||
/* État repos : icône micro simple, gris clair (identique à l'écran de
|
||||
fond). */
|
||||
#icone-micro{fill:#d9d9d3;opacity:.92;}
|
||||
#bouton-micro.ecoute #icone-micro{display:none;}
|
||||
/* État écoute : petites barres verticales animées (façon égaliseur),
|
||||
substituées à l'icône micro tant que l'écoute est active. */
|
||||
#barres-ecoute{
|
||||
display:none;align-items:flex-end;justify-content:center;
|
||||
gap:2px;height:14px;
|
||||
/* État écoute : barres façon vu-mètre, rouge, animées — masquées par
|
||||
défaut (identique à l'écran de fond, sélecteur svg[hidden] repris tel
|
||||
quel). */
|
||||
#barres-ecoute{display:none;fill:#e14a5c;}
|
||||
#barres-ecoute[hidden]{display:none;}
|
||||
#bouton-micro.ecoute #barres-ecoute{display:block;}
|
||||
#barres-ecoute .barre{
|
||||
transform-box:fill-box;
|
||||
transform-origin:50% 100%;
|
||||
animation:pulse-barre 1s ease-in-out infinite;
|
||||
}
|
||||
#bouton-micro.ecoute #barres-ecoute{display:flex;}
|
||||
#barres-ecoute span{
|
||||
width:3px;background:#FFFFFF;border-radius:2px;
|
||||
animation:onde-vocale 0.9s ease-in-out infinite;
|
||||
}
|
||||
#barres-ecoute span:nth-child(1){height:6px;animation-delay:0s;}
|
||||
#barres-ecoute span:nth-child(2){height:14px;animation-delay:0.15s;}
|
||||
#barres-ecoute span:nth-child(3){height:9px;animation-delay:0.3s;}
|
||||
#barres-ecoute span:nth-child(4){height:12px;animation-delay:0.45s;}
|
||||
@keyframes onde-vocale{
|
||||
0%,100%{transform:scaleY(0.4);}
|
||||
50%{transform:scaleY(1);}
|
||||
#barres-ecoute .barre:nth-child(1){ animation-delay:-.6s; }
|
||||
#barres-ecoute .barre:nth-child(2){ animation-delay:-.3s; }
|
||||
#barres-ecoute .barre:nth-child(3){ animation-delay:0s; }
|
||||
#barres-ecoute .barre:nth-child(4){ animation-delay:-.45s; }
|
||||
@keyframes pulse-barre{
|
||||
0%,100%{ transform:scaleY(.55); }
|
||||
50%{ transform:scaleY(1); }
|
||||
}
|
||||
|
||||
/* -------- En-tête colonnes -------- */
|
||||
@@ -208,8 +206,12 @@
|
||||
.ligne-contact .col{font-size:11px;}
|
||||
|
||||
/* -------- Barre de statut -------- */
|
||||
/* Hauteur portée de 20 à 32px le 3 septembre 2026 (voir journal) : le
|
||||
bouton micro (déplacé ici depuis le bandeau haut, voir plus bas)
|
||||
n'y tenait pas sans être rogné. Reste centré verticalement comme les
|
||||
autres éléments de la barre via align-items:center ci-dessous. */
|
||||
#statut{
|
||||
height:20px;width:100%;flex:0 0 auto;
|
||||
height:32px;width:100%;flex:0 0 auto;
|
||||
background:var(--statut-bg);
|
||||
border-top:1px solid #a0a0a0;
|
||||
display:flex;align-items:center;
|
||||
@@ -218,23 +220,73 @@
|
||||
gap:24px;
|
||||
position:relative;
|
||||
}
|
||||
/* Numéro de version (28 août 2026, repositionné le même jour x2 à la
|
||||
demande de Jean-Marc : d'abord "à fond à droite" — le margin-left:auto
|
||||
précédent laissait en fait de la place après lui pour le repère
|
||||
d'ascenseur, ce qui ne faisait pas assez "collé au bord" à l'usage —
|
||||
puis rendu plus lisible, la première teinte grise étant trop proche du
|
||||
fond de la barre pour être vue sans effort). Sorti du flux flex et
|
||||
calé en absolu contre le bord droit réel de la barre, juste avant le
|
||||
repère d'ascenseur (--sb-width, déjà utilisé plus haut pour ce même
|
||||
repère). Couleur assombrie et graisse ajoutée pour un contraste correct
|
||||
sur le fond clair de la barre, tout en restant plus sobre que le texte
|
||||
fonctionnel (compte/tri/filtre). Propre à cet environnement déployé —
|
||||
voir version.php. */
|
||||
#statut-version{
|
||||
/* Bloc société + prénom + marque (28 août 2026, numéro de version seul à
|
||||
l'origine ; complété le 3 septembre 2026 — voir journal). Sorti du flux
|
||||
flex et calé en absolu contre le bord droit réel de la barre — "à fond
|
||||
à droite" plutôt qu'un margin-left:auto, qui laissait de la place après
|
||||
lui. Regroupe désormais, de gauche à droite : la société de
|
||||
l'utilisateur connecté (ex-badge du bandeau haut, même donnée mais sans
|
||||
cartouche), un point séparateur, son prénom, un second point
|
||||
séparateur, puis #marque-aspic (icône Mévélia Solutions + logo ASPIC
|
||||
miniature + numéro de version, voir plus bas) — un seul conteneur flex
|
||||
pour ne jamais avoir à recalculer une largeur fixe quand l'un de ces
|
||||
éléments change de taille. Le bouton micro n'en fait plus partie depuis
|
||||
le 3 septembre 2026 : recentré au milieu de toute la barre, voir
|
||||
#bouton-micro plus bas, par cohérence avec l'écran de fond.
|
||||
right:16px fixé en dur (et non plus calc(var(--sb-width)+10px)) depuis
|
||||
le 3 septembre 2026 : --sb-width mesure la largeur de l'ascenseur
|
||||
interne de #zone-liste, sans rapport avec cette barre du bas qui n'a
|
||||
pas d'ascenseur propre — ce calc introduisait un décalage horizontal
|
||||
variable et rendait ce bloc mal aligné avec le même bloc, positionné en
|
||||
fixed;right:16px, sur l'écran de fond. Jean-Marc l'a repéré à l'usage
|
||||
("la ligne du bas... se décale vers la droite"). Valeur désormais
|
||||
identique aux deux écrans, pour un alignement pixel près. */
|
||||
#statut-version-bloc{
|
||||
position:absolute;
|
||||
right:calc(var(--sb-width) + 10px);
|
||||
right:16px;
|
||||
top:50%;
|
||||
transform:translateY(-50%);
|
||||
display:flex;align-items:center;gap:8px;
|
||||
}
|
||||
/* Points séparateurs (3 septembre 2026, voir journal) : entre société et
|
||||
prénom, puis entre prénom et #marque-aspic — "gros point" demandé par
|
||||
Jean-Marc, plus grand que le texte environnant (11px) pour bien
|
||||
marquer la séparation. #point-societe masqué en même temps que
|
||||
#societe-utilisateur (voir chargerPreferences()) pour ne jamais laisser
|
||||
un point orphelin quand l'utilisateur connecté n'a pas de société. */
|
||||
.point-separateur{
|
||||
font-size:14px;line-height:1;color:#2a2a2a;
|
||||
}
|
||||
/* Marque ASPIC (3 septembre 2026, voir journal) : icône Mévélia Solutions
|
||||
(fournie par Jean-Marc) + logo ASPIC miniature + numéro de version,
|
||||
groupés visuellement comme un seul bloc de marque — d'où un espacement
|
||||
interne plus serré (4px) que le reste de la barre, moitié du 8px
|
||||
d'origine entre logo et version, à la demande de Jean-Marc. Porte
|
||||
l'infobulle "ASPIC Vx.xxx / Créé par Mevelia Solutions" sur l'ensemble
|
||||
du groupe (title posé ici en HTML avec la version à blanc, complété par
|
||||
chargerVersion() une fois le numéro réel connu — voir script). */
|
||||
#marque-aspic{
|
||||
display:flex;align-items:center;gap:4px;
|
||||
}
|
||||
/* Rond plutôt que carré (3 septembre 2026, retour de Jean-Marc) — image
|
||||
source encore carrée à ce jour, simplement recadrée en cercle ici ;
|
||||
Jean-Marc prévoit de retravailler l'image elle-même de son côté. */
|
||||
#icone-mevelia{
|
||||
width:16px;height:16px;
|
||||
border-radius:50%;
|
||||
display:block;
|
||||
}
|
||||
#logo-aspic-mini{
|
||||
display:flex;align-items:center;
|
||||
background:var(--cartouche-bg);
|
||||
border-radius:4px;
|
||||
padding:2px 6px;
|
||||
font-family:var(--font-logo);
|
||||
font-weight:900;font-size:9px;letter-spacing:1px;
|
||||
}
|
||||
#logo-aspic-mini .A{color:var(--orange);}
|
||||
#logo-aspic-mini .rest{color:#FFFFFF;}
|
||||
#statut-version{
|
||||
color:#4a4a4a;
|
||||
font-weight:700;
|
||||
font-size:11px;
|
||||
@@ -288,15 +340,6 @@
|
||||
#menu-detail-contextuel .item.item-a-venir{font-style:italic;}
|
||||
#menu-contextuel .separateur, #menu-detail-contextuel .separateur{height:1px;background:#e0e0e0;}
|
||||
|
||||
/* -------- Menu hamburger -------- */
|
||||
#menu-hamburger{
|
||||
position:absolute;top:44px;left:16px;display:none;
|
||||
min-width:240px;z-index:500;
|
||||
}
|
||||
#menu-hamburger .item{padding:12px 18px;font-size:14px;color:#1e1e1e;cursor:pointer;}
|
||||
#menu-hamburger .item:hover{background:var(--gris-clair);}
|
||||
#menu-hamburger .item.desactive{color:#aaaaaa;cursor:not-allowed;}
|
||||
|
||||
/* -------- Panneau filtre -------- */
|
||||
#voile{
|
||||
position:fixed;top:0;left:0;width:100vw;height:100vh;
|
||||
@@ -658,29 +701,13 @@
|
||||
<div id="app">
|
||||
|
||||
<!-- Bandeau applicatif -->
|
||||
<!-- Avatar (nom court), badge société et bouton micro retirés d'ici le
|
||||
3 septembre 2026 (voir journal) : le bandeau haut ne porte plus que le
|
||||
titre — société, prénom, micro et logo sont désormais regroupés dans
|
||||
la barre de statut basse (voir #statut-version-bloc plus bas). -->
|
||||
<div id="bandeau">
|
||||
<div id="hamburger" title="Menu">☰</div>
|
||||
<div id="logo-aspic"><span class="A">A</span><span class="rest">SPIC</span></div>
|
||||
<div id="titre-ecran">LISTE DES CONTACTS</div>
|
||||
<div id="titre-ecran">CLASSEUR DES CONTACTS. Liste de synthèse</div>
|
||||
<div id="bandeau-spacer"></div>
|
||||
<div id="badge-societe" title="Société" hidden></div>
|
||||
<div id="avatar" title="Utilisateur"></div>
|
||||
<div id="bouton-micro" title="Le micro est inactif" role="button" tabindex="0">
|
||||
<svg id="icone-micro" viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
|
||||
<path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3z" fill="#FFFFFF"/>
|
||||
<path d="M19 11a7 7 0 0 1-14 0" stroke="#FFFFFF" stroke-width="1.6" fill="none" stroke-linecap="round"/>
|
||||
<path d="M12 18v3M9 21h6" stroke="#FFFFFF" stroke-width="1.6" stroke-linecap="round"/>
|
||||
<!-- Barre diagonale (micro inactif) : ligne de fond couleur du
|
||||
bouton pour "découper" le glyphe, puis ligne blanche fine
|
||||
par-dessus pour un tracé net — même technique que les icônes
|
||||
"off" usuelles (caméra coupée, notifications coupées...). -->
|
||||
<line x1="5" y1="5" x2="19" y2="19" stroke="#D9364B" stroke-width="3.2" stroke-linecap="round"/>
|
||||
<line x1="5" y1="5" x2="19" y2="19" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<div id="barres-ecoute" aria-hidden="true">
|
||||
<span></span><span></span><span></span><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- En-tête de colonnes -->
|
||||
@@ -717,7 +744,35 @@
|
||||
<span id="statut-compte">0/0 contacts</span>
|
||||
<span id="statut-tri">Tri : Nom ascendant</span>
|
||||
<span id="statut-filtre">Filtre : aucun</span>
|
||||
<!-- Bouton micro (3 septembre 2026, voir journal) : centré au milieu de
|
||||
toute la barre (position absolue indépendante de #statut-version-
|
||||
bloc ci-dessous), par cohérence avec l'écran de fond où le micro
|
||||
est posé au milieu du bureau. Icônes et comportement identiques à
|
||||
ecran_fond.html #micro-icone (voir commentaire CSS). -->
|
||||
<button id="bouton-micro" type="button" title="Le micro est inactif">
|
||||
<svg id="icone-micro" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z"/>
|
||||
<path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/>
|
||||
</svg>
|
||||
<svg id="barres-ecoute" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" hidden aria-hidden="true">
|
||||
<rect class="barre" x="2" y="14" width="3.5" height="7" rx="1"/>
|
||||
<rect class="barre" x="8" y="9" width="3.5" height="12" rx="1"/>
|
||||
<rect class="barre" x="14" y="4" width="3.5" height="17" rx="1"/>
|
||||
<rect class="barre" x="20" y="11" width="3.5" height="10" rx="1"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div id="statut-version-bloc">
|
||||
<span id="societe-utilisateur" hidden></span>
|
||||
<span class="point-separateur" id="point-societe" hidden aria-hidden="true">•</span>
|
||||
<span id="prenom-utilisateur"></span>
|
||||
<span class="point-separateur" aria-hidden="true">•</span>
|
||||
<div id="marque-aspic" title="ASPIC
|
||||
Créé par Mevelia Solutions">
|
||||
<img id="icone-mevelia" src="mevelia-icone.png" alt="Mévélia Solutions">
|
||||
<span id="logo-aspic-mini"><span class="A">A</span><span class="rest">SPIC</span></span>
|
||||
<span id="statut-version"></span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="case-ascenseur"></span>
|
||||
</div>
|
||||
|
||||
@@ -732,15 +787,6 @@
|
||||
<div class="item" id="menu-filtrer">Filtrer</div>
|
||||
</div>
|
||||
|
||||
<!-- Menu hamburger -->
|
||||
<div id="menu-hamburger" class="panneau-aspic">
|
||||
<div class="panneau-titre">Menu principal</div>
|
||||
<div class="item" id="menu-vers-todolist">ToDoList</div>
|
||||
<div class="item">Gestion des contacts</div>
|
||||
<div class="item desactive">Gestion des actions</div>
|
||||
<div class="item desactive">Documentation</div>
|
||||
</div>
|
||||
|
||||
<!-- Voile générique : sert au panneau filtre ET au panneau détail (un seul
|
||||
panneau modal ouvert à la fois sur cet écran). -->
|
||||
<div id="voile"></div>
|
||||
@@ -1238,16 +1284,17 @@ document.addEventListener("keydown", (e)=>{
|
||||
fermerMenuContextuel();
|
||||
return;
|
||||
}
|
||||
if(menuHamburger.style.display === "block"){
|
||||
e.preventDefault();
|
||||
fermerMenuHamburger();
|
||||
return;
|
||||
}
|
||||
if(voile.style.display === "block"){
|
||||
e.preventDefault();
|
||||
fermerPanneauFiltre();
|
||||
return;
|
||||
}
|
||||
// Aucun panneau superposé ouvert (3 septembre 2026, voir journal) :
|
||||
// Échap ramène directement à l'écran de fond, devenu le véritable écran
|
||||
// d'accueil post-identification depuis le 2-3 septembre 2026 — plus
|
||||
// besoin de passer par le menu hamburger, supprimé de cet écran.
|
||||
e.preventDefault();
|
||||
window.location.href = "ecran_fond.html";
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -1369,22 +1416,10 @@ function afficherToast(message){
|
||||
// partagé par tous les écrans — voir chargement en fin de fichier et le
|
||||
// commentaire d'en-tête de micro.js pour le pourquoi de cette séparation.
|
||||
|
||||
// ---- Menu hamburger ----
|
||||
const menuHamburger = document.getElementById("menu-hamburger");
|
||||
document.getElementById("hamburger").addEventListener("click", (e)=>{
|
||||
e.stopPropagation();
|
||||
menuHamburger.style.display = menuHamburger.style.display === "block" ? "none" : "block";
|
||||
});
|
||||
document.addEventListener("click", ()=>{ menuHamburger.style.display = "none"; });
|
||||
function fermerMenuHamburger(){
|
||||
menuHamburger.style.display = "none";
|
||||
}
|
||||
// ToDoList (31 août 2026, voir journal) : nouvel écran d'entrée post-
|
||||
// identification, accessible depuis ici par symétrie avec l'entrée
|
||||
// "Gestion des contacts" du menu hamburger de la ToDoList elle-même.
|
||||
document.getElementById("menu-vers-todolist").addEventListener("click", ()=>{
|
||||
window.location.href = "liste_todolist.html";
|
||||
});
|
||||
// Menu hamburger supprimé le 3 septembre 2026 (voir journal) : plus de
|
||||
// raison d'être depuis que l'écran de fond (ecran_fond.html) est le vrai
|
||||
// écran d'accueil et qu'Échap y ramène directement depuis cet écran — voir
|
||||
// le gestionnaire Échap plus bas.
|
||||
|
||||
// ---- Panneau filtre ----
|
||||
const voile = document.getElementById("voile");
|
||||
@@ -1794,7 +1829,14 @@ async function chargerVersion(){
|
||||
const reponse = await fetch("version.php");
|
||||
if(!reponse.ok) throw new Error("HTTP " + reponse.status);
|
||||
const data = await reponse.json();
|
||||
if(data.version) document.getElementById("statut-version").textContent = data.version;
|
||||
if(data.version){
|
||||
document.getElementById("statut-version").textContent = data.version;
|
||||
// Infobulle du groupe icône Mévélia + logo ASPIC + version (3
|
||||
// septembre 2026, voir journal) : complétée ici une fois le numéro
|
||||
// réel connu (posée à blanc "ASPIC" seul en HTML en attendant).
|
||||
const elMarque = document.getElementById("marque-aspic");
|
||||
if(elMarque) elMarque.title = "ASPIC " + data.version + "\nCréé par Mevelia Solutions";
|
||||
}
|
||||
} catch(erreur){
|
||||
console.error("Erreur de chargement de version.php :", erreur);
|
||||
}
|
||||
@@ -1808,23 +1850,25 @@ async function chargerPreferences(){
|
||||
if(typeof data.USR_RatioPanneauContact === "number") PREFERENCES.USR_RatioPanneauContact = data.USR_RatioPanneauContact;
|
||||
if(typeof data.USR_RatioPanneauProspect === "number") PREFERENCES.USR_RatioPanneauProspect = data.USR_RatioPanneauProspect;
|
||||
|
||||
// Avatar (29 août 2026) : jusqu'ici du texte figé "JMP" dans le HTML,
|
||||
// jamais vraiment branché sur la session — corrigé au passage à
|
||||
// l'occasion du badge société ci-dessous (voir journal).
|
||||
const elAvatar = document.getElementById("avatar");
|
||||
if(elAvatar && data.USR_Code) elAvatar.textContent = data.USR_Code;
|
||||
|
||||
// Badge société (29 août 2026) : repère d'environnement, masqué si
|
||||
// l'utilisateur connecté n'a pas encore de USR_Societe renseignée.
|
||||
const elBadge = document.getElementById("badge-societe");
|
||||
if(elBadge){
|
||||
// Société et prénom de l'utilisateur (3 septembre 2026, voir journal) :
|
||||
// barre de statut basse, texte simple — remplacent l'ancien badge
|
||||
// société (cartouche bleu) et l'avatar (nom court) du bandeau haut,
|
||||
// tous deux supprimés. Société masquée si USR_Societe est vide en base
|
||||
// pour l'utilisateur connecté (comportement du badge conservé).
|
||||
const elSociete = document.getElementById("societe-utilisateur");
|
||||
const elPointSociete = document.getElementById("point-societe");
|
||||
if(elSociete){
|
||||
if(data.USR_Societe){
|
||||
elBadge.textContent = data.USR_Societe;
|
||||
elBadge.hidden = false;
|
||||
elSociete.textContent = data.USR_Societe;
|
||||
elSociete.hidden = false;
|
||||
if(elPointSociete) elPointSociete.hidden = false;
|
||||
} else {
|
||||
elBadge.hidden = true;
|
||||
elSociete.hidden = true;
|
||||
if(elPointSociete) elPointSociete.hidden = true;
|
||||
}
|
||||
}
|
||||
const elPrenom = document.getElementById("prenom-utilisateur");
|
||||
if(elPrenom && data.USR_Prenom) elPrenom.textContent = data.USR_Prenom;
|
||||
} catch(erreur){
|
||||
console.error("Erreur de chargement de preferences.php :", erreur);
|
||||
// Pas de toast : une préférence d'affichage non chargée retombe sur le
|
||||
|
||||
@@ -3,6 +3,9 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>ASPIC — ToDoList</title>
|
||||
<!-- Icône d'onglet (3 septembre 2026, voir journal) : logo Mévélia Solutions,
|
||||
fourni par Jean-Marc, reprise à l'identique sur tous les écrans. -->
|
||||
<link rel="icon" href="mevelia-icone.png">
|
||||
<style>
|
||||
@font-face{
|
||||
font-family:"Metro DF";
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
+1
-1
@@ -24,7 +24,7 @@
|
||||
* d'identification, avant toute connexion.
|
||||
*/
|
||||
|
||||
const ASPIC_VERSION = 'V1.008';
|
||||
const ASPIC_VERSION = 'V1.009';
|
||||
|
||||
if (basename($_SERVER['SCRIPT_NAME']) === 'version.php') {
|
||||
header('Content-Type: application/json; charset=utf-8');
|
||||
|
||||
Reference in New Issue
Block a user