← Tous les manuels · Portail

MANUAL — portail

Manuel d'instructions de cette app. À LIRE avant toute intervention, et à METTRE À JOUR après chaque modification (ajouter une ligne au CHANGELOG en bas).
Dernière génération/MAJ : 2026-08-06

1. Identité

  • - Rôle : page nouvel onglet custom de Matt (dashboard perso). Design "Verrière" (glassmorphism) : fond image nature/architecture aléatoire, horloge, météo, raccourcis vers tout l'écosystème, mini-liste de tâches. Sert aussi de portail vers les apps + les manuels d'instructions.
  • - URL : servie en local sur http://127.0.0.1:8341 (utilisée comme page nouvel onglet du navigateur). Pas d'exposition publique nécessaire.
  • - Entité : transverse (MOA · RP · MOA Properties · perso).

    • 2. Exécution / infra

  • - Dossier : /root/workspace/apps/portail
  • - Stack : HTML/CSS/JS statique, aucun backend.
  • - Service systemd : portail.service = python3 -m http.server 8341 --bind 127.0.0.1 --directory /root/workspace/apps/portail
  • - Port : 8341 (localhost only)
  • - Redémarrer : inutile pour un changement de contenu (serveur statique, fichiers relus à chaque requête). systemctl restart portail.service seulement si le service est tombé.

    • 3. Structure & fichiers clés

  • - index.html — la page (tout est inline : CSS + JS). Layout "rive gauche / rive droite" : horloge à gauche, raccourcis groupés par entité à droite, ruban tâches en bas.
  • - guide-scraping.html — guide annexe (lié depuis les raccourcis).
  • - manuals/ — pages HTML des manuels d'apps, générées par le skill app-manual (app_manual.py publish).
  • - Bloc <!-- MANUALS:START --> ... <!-- MANUALS:END --> dans index.html : injecté automatiquement par app_manual.py publish (regex). NE PAS le remplir à la main, mais le CONSERVER (sinon la publication des manuels casse).

    • 4. Données

  • - Raccourcis : codés en dur dans le tableau JS GROUPS de index.html. Chaque groupe porte {t,c,k,items} (titre, couleur c du point, classe entité k parmi rp/moa/mp/tech/perso, liste d'items). Chaque item porte {n,i,u} (nom, clé d'icône dans l'objet P, url). La classe k du groupe est appliquée à chaque chip et teinte l'icône via les règles .rp/.moa/.mp/.tech/.perso (elles ne sont donc PAS du CSS mort). Pour ajouter une app : ajouter un item au bon groupe (et vérifier que sa clé i existe dans P, sinon la pastille d'icône reste vide).
  • - Tâches : stockées côté navigateur en localStorage (clé portail_tasks). Pas de backend, propre à la machine/navigateur.
  • - Géoloc météo : cachée en localStorage (clé geo).

    • 5. API / endpoints (externes appelés côté client)

  • - Fond : images.unsplash.com (liste d'IDs de photos en dur, choisies au hasard), repli loremflickr.com si une image échoue.
  • - Météo : api.open-meteo.com (gratuit, sans clé), lat/lon via géoloc navigateur, repli Asunción (-25.28, -57.63).

    • 6. Intégrations & secrets

  • - Aucun secret. Open-Meteo et Unsplash (CDN images) sont sans clé.

    • 6bis. Branding des sections (2026-09-12)

  • - Toutes les sections portent un bandeau coloré (dégradé --b1→--b2 + trait --edge), mappé par classe entité dans le CSS (.rp/.moa/.mp/.pilot/.tech/.perso). But : repérer chaque catégorie en un coup d'oeil.
  • - logoSq:true = logo carré (MOA) agrandi à 44px. Sinon logo large (RP, MP) à 32px.
  • - Logos de section dans assets/ : rp-logo.png, moa-logo.png (carré), mp-logo.png. Copiés depuis les refontes de site ; re-copier si une charte change.
  • - Icône par app = glyphe unique : chaque app a son propre glyphe (objet P), plus de doublons génériques. Ajouter une app = choisir/ajouter une clé dans P.
  • - Vrais logos par app (champ logo: sur l'item, rendu <img> dans une pastille .ic-img) : Dofus Rétro = assets/logo-dofus.svg (oeuf de dragon), Lama Screener = assets/logo-yugioh.svg (Puzzle du Millénaire). SVG faits maison (pas de logo tiers téléchargé). Même mécanisme réutilisable pour d'autres apps.
  • - YouTube : i:"youtube" → SVG plein rouge #FF0033 (constante YT), pastille rouge quelle que soit la section. App "YouTube (contenu & stats)" = contenu.panelbay.com.

    • 7. Pièges connus / à savoir

  • - Conserver les marqueurs MANUALS:START/END : app_manual.py publish réécrit ce bloc + régénère manuals/. Le CSS de index.html stylise les cartes injectées (.card/.grid/.ico/.tag) pour coller au thème verre ; garder ces règles.
  • - Pas besoin de restart pour un changement d'index.html (statique).
  • - Fond aléatoire : si un ID Unsplash meurt (404), le repli LoremFlickr prend le relais automatiquement (par image). Valider les IDs au curl avant d'en ajouter.
  • - La météo par défaut est Asunción tant que la géoloc n'est pas accordée ; une fois accordée, elle est mémorisée.

    • 8. CHANGELOG

  • - 2026-09-24 : ajout au dashboard de Prompteur, Téléchargeur vidéo (dl), Outils PDF (Stirling), Analytics (Umami) dans Tech & Outils, et Mercado inmobiliario dans MOA Real Estate. Réflexe reconfirmé par Matt : toute nouvelle app va sur le dashboard.
  • - 2026-09-12 (6) : Site RP repassé en badge navigateur (demande Matt : "le site RP met la même icône site que les autres, pas de drapeau"). L'item Site RP passe de logo:"assets/flag-paraguay.svg" à site:true : il porte désormais le même badge navigateur bleu que Site MOA et Site Properties. Glyphe P.browser retravaillé pour ressembler nettement à une page web : fenêtre de navigateur avec pastilles de contrôle, barre d'adresse en pilule, bloc image (hero) + lignes de texte + ligne de pied. Site Uruguay et Site Bolivie gardent leur drapeau (sites-pays). assets/flag-paraguay.svg devient inutilisé. Vérifié au navigateur. Statique, pas de restart.
  • - 2026-09-12 (5) : Icônes de sites + OpenReply (demande Matt : "sites = icône explicite pas de la couleur de la section"). Nouveau champ item site:true = badge navigateur bleu distinct (glyphe P.browser + classe .ic-site, --c forcé #2fa8e6, indépendant de la teinte de section) appliqué à Site MOA et Site Properties. Sites-pays passés en drapeaux SVG : assets/flag-paraguay.svg (Site RP), assets/flag-uruguay.svg, assets/flag-bolivia.svg. OpenReply passe au logo Instagram assets/logo-instagram.svg (outil auto-DM Insta). Règle : un site = drapeau si pays, sinon badge navigateur bleu ; plus de globe monochrome noyé dans la couleur de section. Vérifié au navigateur. Statique, pas de restart.
  • - 2026-09-12 (4) : Identité de "marque" propre par catégorie neutre + mini-logos produits (demande Matt : "un vrai style par catégorie comme une entreprise, et des mini-logos sur les cases quand pertinent"). Chaque catégorie neutre a désormais un embleme, une typo et une tagline dédiés (map CAT_BRAND + constantes EMB_PILOT/EMB_TECH en JS, branche de rendu entity-head cat) : Pilotage = hexagone jauge + Inter 900 uppercase + trame quadrillée + "Tour de contrôle" ; Tech & Outils = carré </> + JetBrains Mono + trame pointillée + "Atelier & outils" ; Perso = cachet rond doré monogramme "M" Fraunces italique + "Cachet personnel". Fonts ajoutées : JetBrains Mono 700/800, Fraunces italique, Inter 900. Mini-logos réels ajoutés sur les tuiles de produits reconnaissables : assets/logo-n8n.svg (n8n), assets/logo-meta.svg (Meta Leads), assets/logo-vaultwarden.svg (Mots de passe), en plus de YouTube/Dofus/Yu-Gi-Oh. Règle : logo seulement pour un vrai produit externe identifiable, jamais pour une app interne (elles gardent leur glyphe). Vérifié au navigateur (1440px). Statique, pas de restart.
  • - 2026-09-12 (3) : Logo MOA Properties (demande Matt : "wordmark MP presque identique à MOA"). La section MP réutilise désormais moa-logo.png + le mot "Properties" en serif blanc (Fraunces 600, classe .logo-suffix, champ logoSuffix sur le groupe), au lieu de mp-logo.png. Logos de marque agrandis : .brand-logo 32->40px, .brand-logo.sq 44->56px (MOA et MP plus présents). Statique, pas de restart.
  • - 2026-09-12 (2) : Généralisation des bandeaux colorés à TOUTES les sections (Pilotage indigo via nouvelle classe pilot, Tech acier, Perso ambre) pour un repérage instantané. Un glyphe unique par app (fin des doublons génériques), ~12 nouveaux glyphes ajoutés à P. Vrais logos par app via champ logo: sur l'item : Dofus Rétro (oeuf de dragon) et Lama Screener/Yu-Gi-Oh (Puzzle du Millénaire), SVG maison dans assets/. Vérifié au navigateur.
  • - 2026-09-12 : Branding des sections par entité (demande Matt : "cadres RP/MOA identifiables en 1 clin d'oeil, avec logo"). Ajout d'un dossier assets/ (logos RP/MOA/MOA Properties). Les sections RP, MOA Real Estate et MOA Properties portent désormais un bandeau aux couleurs officielles de leur charte + leur logo (au lieu de la pastille icône). Couleurs alignées sur context/design-system (RP navy #111168 + trait rouge #DF2020 ; MOA/MP verts, MP hérite du vert MOA en teinte plus claire). Icône YouTube rouge ajoutée et appliquée à l'app "YouTube (contenu & stats)" (ex-"Dashboard contenu", contenu.panelbay.com). Sections Pilotage/Tech/Perso inchangées (neutres). Polices de marque (Fraunces, Merriweather) chargées. Vérifié au navigateur (1440px). Statique, pas de restart.
  • - 2026-08-06 : Refonte lisibilité (demande Matt : "trouver l'app en un clin d'oeil"). Abandon de la mise en page rive gauche horloge / colonne étroite de puces. Nouveau layout : barre haute compacte (marque + horloge + météo) puis grille de grosses sections par entreprise (.entities > .entity), chacune avec barre d'accent colorée à gauche, en-tête (badge icône + titre + compteur d'apps) et tuiles d'app plus grandes (a.app, icône 38px teintée par l'accent d'entité + libellé 14.5px). Blocs quasi opaques (--panel:rgba(14,19,27,.82), voile #veil renforcé) : le fond image ne transparaît plus qu'un peu. Bloc Manuels déplacé en <details> repliable en bas (marqueurs MANUALS:START/END + structure #shortcuts .grid/a.card intacts pour app_manual publish). Rendu HTML des sections désormais via #entities (le JS lit GROUPS, ajout d'un champ ei = icône d'en-tête par groupe). Aucun changement d'URL/service (statique, port 8341). Vérifié au navigateur (1440px).
  • - 2026-08-05 : Corrections d'audit (accessibilité + UI). Ajout des paths d'icônes send (OpenReply) et phone (Closer RDV) dans l'objet P : ces deux chips affichaient une pastille vide. Contrôles de tâches passés en vrais <button> (coché + suppression) avec aria-label et aria-pressed, donc focusables et actionnables au clavier (Entrée/Espace natifs). Structure sémantique : .brand en <h1>, corps (.body) en <main>, raccourcis en <nav aria-label="Raccourcis">. aria-label="Ajouter une tâche" sur #newtask. :focus-visible (contour blanc) sur chips, cartes manuels, boutons de tâches et champ. Voile (#veil) renforcé pour le contraste du texte sur fond image aléatoire. SVG d'icônes marqués aria-hidden="true" focusable="false". Drift MANUAL/code corrigé : chaque groupe porte désormais une classe entité k appliquée au chip (teinte l'icône), les règles .rp/.moa/.mp/.tech/.perso ne sont plus du CSS mort. Liens des chips vérifiés au curl : tous debout sauf metaleads.bouthors-m.tenga.run qui renvoie 404 à la racine (service webhook sans page d'accueil, laissé en place).
  • - 2026-08-02 — Allègement + icônes. Suppression des grands panneaux dépolis (horloge/raccourcis/tâches sans fond) pour laisser respirer l'image ; voile éclairci. Emojis remplacés par un jeu d'icônes SVG line monochromes (objet P + helper svg() dans le JS ; icône livre en data-URI CSS pour les cartes manuels). Suppression du ruban de couleur à gauche des puces (jugé cheap) ; seul reste un petit point coloré par groupe. Pastilles d'icônes uniformisées (blanc translucide).
  • - 2026-08-02 — Refonte complète en page "Verrière" (glassmorphism). Nouveau layout rive gauche (horloge + citation) / rive droite (raccourcis groupés par entité en étagères de verre) / ruban tâches pleine largeur. Ajouts : fond image nature/architecture aléatoire à chaque ouverture (Unsplash + repli LoremFlickr), météo en pastille haut-droite (Open-Meteo, sans clé, géoloc + repli Asunción), mini-tâches en localStorage (ajout/coché/suppression). Marqueurs MANUALS conservés + restylés. Ancienne version = liste de cartes sombres.
  • - 2026-08-02 — Manuel initialisé (bootstrap auto).