Utilité :
Kanban Trello est un gestionnaire Kanban ultra‑léger et autonome : une seule page HTML/JS pouvant être ouverte dans n'importe quel navigateur moderne. Il fonctionne sans serveur, stocke tout dans localStorage (avec compression LZ‑String), gère plusieurs tableaux (boards), colonnes, cartes, historique (Undo), snapshots, versioning, timer par carte, vues calendrier & liste, export/import (JSON ou compressé), modes de visualisation (thèmes, orientation), lecture seule et verrouillage granulaire. Idéal pour : prototypage, gestion personnelle de tâches, planification offline, démonstrations pédagogiques, usage en contexte isolé (air‑gapped), embarqué dans d'autres apps ou WebViews.
Tout est local, aucune requête réseau hors CDN CSS/ICÔNES facultatifs. Les données ne quittent jamais votre machine (sauf si vous exportez). Le code privilégie la lisibilité, des structures plates et des opérations synchrone rapides.
Résumé rapide des capacités :
• Multi‑boards dans un seul fichier (workspace local)
• Colonnes dynamiques (titre, limite de cartes, verrouillage déplacement, collapse)
• Cartes avec : titre, description, tags colorés auto, priorité, deadline, images (URL/base64), checklist, sous‑tâches, temps passé (timer), versioning, verrouillage individuel
• Drag & drop cartes + colonnes (desktop + mobile basique) avec auto‑scroll de confort
• Filtrage par tag / priorité, recherche temps réel (throttle)
• Barre de progression (checklist → %)
• Notifications locales des deadlines (si autorisées)
• Snapshots multiples + comparaison différentielle simplifiée
• Undo multi‑états (pile compressée, limite configurable)
• Export / import JSON lisible ou bloc compressé UTF‑16
• Thèmes pré‑définis (Neon, Minimal, Material, Pastel, Noir total) + orientation horizontale/verticale
• Mode lecture seule global (verrouille actions & drag)
• Contexte menu (clic droit) : Edit, Duplicate, Archive, Delete, Lock/Unlock, Copy/Paste JSON
• Versioning de cartes (historique interne avec restauration)
• Vues secondaires : Liste globale des tâches, Calendrier des échéances, Stats agrégées, Settings
• API interne JS accessible via window.MiniTrello
• Compression LZ‑String transparente (performance & stockage optimisés)
Modèle de données (structure principale) :
{
meta: {
created: ISOString,
theme: 'neon'|'minimal'|'material'|'pastel'|'noir',
autosave: true,
autosaveIntervalSec: 5,
readOnly: false,
orientation: 'horizontal'|'vertical'
},
boards: [
{
id, title,
columns: [
{
id, title, cards: [], limit: Number, nonDraggable: Boolean, collapsed: Boolean
}
]
}
],
activeBoard: boardId,
undo: [CompressedStateUTF16,...]
}
Carte (card) enrichie :
{
id, title, description,
tags: [String,...],
priority: 'high'|'normal'|'low'|'',
due: ISODateString|'',
checklist: [{id,text,done},...],
subtasks: [{id,text,done,time},...],
images: [urlOrBase64,...],
time: Number(seconds),
locked: Boolean,
versions: [ { at: ISOString, data: { ...snapshotFields } }, ... ],
notified: Boolean (deadline déjà notifiée),
created, updated
}
Fonctionnement général :
1- Sélection du board actif (sidebar)
2- Ajout / édition colonnes (titre, limite, verrouillage, collapse)
3- Création rapide de cartes (input bas de colonne) ou duplication
4- Double clic carte → ouverture modale détaillée (édition complète + versioning)
5- Drag & drop pour réorganiser colonnes et déplacer cartes (limites & locks respectés)
6- Snapshots ponctuels (archive d'état) + comparaison Δ nombre de cartes
7- Undo pour revenir à un état précédent (pile compressée)
8- Export compressé ou JSON lisible → Import remplace l'état courant
9- Notifications deadlines (background interval 60s)
10- Vue Liste / Calendrier / Stats / Settings pour autres perspectives
Boutons & UI principaux :
• Header: Undo, Orientation, Read-only, Theme, Export, Import, New board
• Sidebar (Quick): Snapshots, Compare snaps, Archive, Stats, All tasks, Calendar, Settings
• Column header: Edit (titre/limite/verrouillage), Del, Collapse
• Carte (clic droit): Edit / Duplicate / Archive / Delete / Lock / Unlock / Copy JSON / Paste JSON
• Modale carte: Save, Checklist + sous‑tâches, Timer, Versions (restore), Copy title/desc
• Settings: Intervalle autosave, orientation, thème, lecture seule
Fonctions internes clés :
createCard(colId, partial)
moveCard(cardId, fromColId, toColId)
deleteCard(cardId, colId)
addColumn(title)
MiniTrello.getState()
MiniTrello.importCompressed(string)
API interne (via window.MiniTrello) :
• MiniTrello.createCard(colId, {title, ...}) → crée carte
• MiniTrello.moveCard(cardId, fromCol, toCol) → déplace carte (respecte locks/limites)
• MiniTrello.deleteCard(cardId, colId) → supprime carte
• MiniTrello.addColumn(title) → ajoute colonne au board actif
• MiniTrello.getState() → snapshot JS cloné de l'état
• MiniTrello.importCompressed(comp) → remplace l'état à partir d'une chaîne compressée
Exemples Console :
// Ajouter une carte programmatiquement
MiniTrello.createCard(document.querySelector('[data-col-id]').dataset.colId, {
title: 'Tâche rapide', priority: 'high', tags: ['urgent','build']
});
// Lister toutes les cartes
const st = MiniTrello.getState();
st.boards.forEach(b => b.columns.forEach(c => c.cards.forEach(card => console.log(card.title))));
// Export compressé manuel (copier dans presse‑papier)
const compressed = LZString.compressToUTF16(JSON.stringify(MiniTrello.getState()));
Performance & stockage :
• Compression UTF‑16 réduit taille moyenne 40–65% selon contenu.
• Pile Undo limitée (40 états) pour éviter gonflement localStorage.
• Rendu: ré‑génération complète de colonnes avec opérations DOM légères.
• Throttle recherche (180 ms) pour ne pas surcharger en frappe rapide.
Sécurité & confidentialité :
• Aucune fuite réseau (hors CDN si conservés — remplaçables en local).
• Export compressé non chiffré → chiffrer manuellement si besoin (ex AES avant partage).
• Lecture seule pour protéger un état en démonstration ou audit interne.
• Verrouillage carte / colonne empêche déplacement accidentel.
Limitations actuelles :
• Pas de multi‑utilisateur / synchronisation en temps réel.
• Notifications deadlines non persistantes (pas de re‑programmation si onglet fermé).
• Mobile iOS: drag & drop HTML5 peut être partiel (nécessiter polyfill si critique).
• Comparaison snapshots: métrique simplifiée (Δ cartes) — pas de diff profond par champs.
• Pas de cryptage natif du stockage local.
• Aucun tri avancé (manuel ou auto) dans colonnes (hors reorder DnD).
Améliorations possibles (roadmap personnelle) :
• Diff snapshots détaillé (ajouts / suppressions / modifications par champ).
• Vue calendrier mensuelle + drag réordonnancement par date.
• Focus mode plein écran carte + navigation séquentielle.
• IA locale (génération checklist à partir du titre).
• Barre de productivité (scores, badges gamification).
• Cryptage côté client + mot de passe (AES + PBKDF2).
• Import partiel (merge sélectif).
• Stats avancées (temps moyen par colonne, goulots).
Codes de retour / messages (principaux) :
• Alertes limites colonne: "Column limit reached".
• Verrouillage destination: "Destination column is locked".
• Undo pile vide: "Nothing to undo".
• Notifications deadlines: permission demandée au chargement si nécessaire.
Mini Guide d’utilisation rapide :
1. Ouvrir le fichier dans votre navigateur.
2. Cliquer "Add column" pour créer une nouvelle colonne.
3. Saisir le titre d’une carte dans l’input rapide puis Add.
4. Double clic sur carte → éditer, ajouter checklist / sous‑tâches / image.
5. Définir une date limite (deadline) pour activer notification locale.
6. Utiliser Snapshot pour capturer état; Compare snaps pour voir évolution.
7. Export (JSON lisible ou compressé) pour backup externe.
8. Toggle Read-only avant présentation pour éviter modifications accidentelles.
Badges / Indicateurs :
FAQ courte :
• Q: "Puis‑je partager un board ?" → Export JSON et envoyer le fichier, l’autre personne importe.
• Q: "Sauvegarde cloud ?" → Non native. Utilisez script externe (ex: cron qui récupère localStorage via WebDriver).
• Q: "Pourquoi UTF‑16 pour compression ?" → Méthode compressToUTF16 évite caractères problématiques et maximise compatibilité copy/paste.
• Q: "Puis‑je ajouter un champ custom ?" → Étendre l’objet carte et ajuster rendus (zones marquées par renderActiveBoard).
• Q: "Compat navigateur ?" → Moderne (Chrome, Firefox, Edge). Safari iOS: drag éventuellement partiel.
Purpose:
kanban Trello is a single‑file offline Kanban board: pure HTML/JS, no backend needed. It stores everything in localStorage (LZ‑String compression), supports multiple boards, columns, cards, undo history, snapshots, versioning, timers, calendar & list views, theme/orientation toggles, read‑only mode, granular locking, JSON import/export, deadline notifications, and an internal JS API — perfect for personal productivity, air‑gapped environments, demos or embedding.
Key Capabilities:
• Multi boards in one page
• Dynamic columns (title, card limit, lock movement, collapse)
• Cards: title, description, auto colored tags, priority, deadline, images, checklist, subtasks, tracked time, versioning, lock
• Drag & drop (cards + columns) with auto‑scroll comfort
• Tag / priority filters + real‑time search (throttled)
• Progress bar from checklist completion
• Local deadline notifications (if granted)
• Snapshots + simple compare (Δ cards)
• Undo stack (compressed states)
• Export/import (readable JSON or compressed UTF‑16 blob)
• Themes (Neon, Minimal, Material, Pastel, Noir) + horizontal/vertical orientation
• Global Read‑Only mode
• Context menu: Edit / Duplicate / Archive / Delete / Lock / Unlock / Copy / Paste JSON
• Card version history + restore
• Secondary views: List, Calendar, Stats, Settings
• Internal API via window.MiniTrello
Data Model (simplified):
{ meta:{theme,autosaveIntervalSec,readOnly,orientation}, boards:[{id,title,columns:[{id,title,cards,limit,nonDraggable,collapsed}]}], activeBoard, undo:[] }Card structure:
{id,title,description,tags,priority,due,checklist,subtasks,images,time,locked,versions:[{at,data}],notified,created,updated}Workflow:
1- Select active board
2- Add/edit columns (limit, lock, collapse)
3- Quick add cards or duplicate
4- Double click card → modal edit (checklist, subtasks, images, version restore)
5- Drag & drop for ordering and moving (respects limits & locks)
6- Take snapshots, compare evolution (Δ cards)
7- Undo previous state (compressed history)
8- Export / Import for backup & transfer
9- Deadline notifications when time reached
10- Explore List / Calendar / Stats / Settings views
Internal Functions:
MiniTrello.createCard(colId, partial)
MiniTrello.moveCard(cardId, fromCol, toCol)
MiniTrello.deleteCard(cardId, colId)
MiniTrello.addColumn(title)
MiniTrello.getState()
MiniTrello.importCompressed(string)Console Examples:
// Add a quick card
MiniTrello.createCard(document.querySelector('[data-col-id]').dataset.colId, {
title: 'Quick task', priority: 'high', tags: ['urgent']
});
// List all card titles
MiniTrello.getState().boards.forEach(b=>b.columns.forEach(c=>c.cards.forEach(card=>console.log(card.title))));
// Manual compressed export
const comp = LZString.compressToUTF16(JSON.stringify(MiniTrello.getState()));
Performance & Storage:
• LZ‑String reduces size ~40–65%
• Undo capped (40 states)
• Full re‑render with lean DOM creation
• Search throttled (180ms)
Security & Privacy:
• Pure local operation (replace CDNs for full isolation)
• Compressed exports are NOT encrypted; add client crypto if required
• Read‑Only mode prevents accidental changes during demos
• Locks prevent unwanted drag/drop
Limitations:
• No real‑time multi‑user sync
• Deadline notifications only while tab stays open
• iOS Safari drag & drop may need polyfill
• Snapshot diff limited (card count only)
• No built‑in encryption or advanced sorting
Potential Improvements:
• Deep snapshot diff (field changes)
• Monthly calendar grid + drag by date
• Focus full‑screen card mode
• Local AI (generate checklist suggestions)
• Productivity scoring / badges
• Client encryption (AES + PBKDF2)
• Partial merge import
• Advanced metrics (avg time per column)
Quick Usage Guide:
1. Open the file in your browser.
2. Click "Add column".
3. Type a card title and click Add.
4. Double click card to edit details.
5. Set deadlines for notification.
6. Use Snapshot & Compare to track history.
7. Export JSON for backup.
8. Toggle Read-only before presenting.
FAQ:
• Share a board? → Export JSON, send, import on target.
• Cloud sync? → Not built‑in; use external automation/WebDriver to extract & push.
• Why UTF‑16 compression? → Ensures safe copy/paste, avoids control chars issues.
• Custom field? → Extend card object & update renderActiveBoard.
• Browser support? → Modern browsers; partial drag on iOS Safari.
Kanban Trello — Single file productivity. Adapt, extend, fork librement.