feat: panneau A propos elegant + retrait Editor POC
CI / lint (push) Failing after 2s
CI / test (push) Has been skipped
CI / build (push) Has been skipped
CI / e2e (push) Has been skipped
CI / security (push) Failing after -8s

- Remplace Editor POC par A propos (sparkles) dans le menu header
- Modale About avec animation fade+scale, logo SVG, hero gradient
- Stats live: fichiers, vaults (API /health), tests (285)
- Stack techno: 12 badges (FastAPI, vanilla JS, Docker, etc.)
- Footer: date livraison, blague aleatoire (10 variantes humour)
- Touche d'humour: git push --force accidentels, CSS > backend
- Fermeture: bouton X, clic overlay, Escape
- initAboutModal dans sync.js + config.js export
This commit is contained in:
2026-06-16 07:37:39 -04:00
parent fccee296a5
commit 66039028a5
6 changed files with 197 additions and 8289 deletions
+65 -4
View File
@@ -611,7 +611,7 @@
</button>
<button
class="menu-list-row menu-list-button"
id="editor-poc-btn"
id="about-open-btn"
type="button"
role="menuitem"
>
@@ -620,16 +620,16 @@
aria-hidden="true"
>
<i
data-lucide="pencil"
data-lucide="sparkles"
style="width: 17px; height: 17px"
></i>
</span>
<span class="menu-list-content">
<span class="menu-list-title"
>Editor POC</span
>A propos</span
>
<span class="menu-list-subtitle"
>Nouvel editeur (demo)</span
>Version, credits &amp; info</span
>
</span>
</button>
@@ -4780,5 +4780,66 @@ curl -X POST https://votre-serveur.com/webhook \
</div>
</div>
</div>
<!-- About Modal -->
<div class="about-overlay" id="about-overlay">
<div class="about-modal">
<button class="about-close" id="about-close" aria-label="Fermer">&times;</button>
<div class="about-hero">
<div class="about-logo">
<svg width="56" height="56" viewBox="0 0 56 56" fill="none">
<rect width="56" height="56" rx="14" fill="var(--accent)" opacity="0.15"/>
<rect x="12" y="8" width="14" height="18" rx="3" fill="var(--accent)" opacity="0.9"/>
<rect x="29" y="8" width="14" height="18" rx="3" fill="var(--accent)" opacity="0.5"/>
<rect x="12" y="30" width="14" height="18" rx="3" fill="var(--accent)" opacity="0.7"/>
<rect x="29" y="30" width="14" height="18" rx="3" fill="var(--accent)" opacity="0.35"/>
</svg>
</div>
<h1 class="about-title">ObsiGate</h1>
<p class="about-tagline">Vos notes Obsidian,<br>simplement accessibles.</p>
<span class="about-version">v2.0.0-dev</span>
</div>
<div class="about-body">
<div class="about-stats">
<div class="about-stat">
<span class="about-stat-value" id="about-stat-files">—</span>
<span class="about-stat-label">Fichiers</span>
</div>
<div class="about-stat">
<span class="about-stat-value" id="about-stat-vaults">—</span>
<span class="about-stat-label">Vaults</span>
</div>
<div class="about-stat">
<span class="about-stat-value">285</span>
<span class="about-stat-label">Tests</span>
</div>
</div>
<div class="about-stack">
<h3>Construit avec</h3>
<div class="about-stack-grid">
<span class="about-stack-badge">🐍 FastAPI</span>
<span class="about-stack-badge">⚡ vanilla JS</span>
<span class="about-stack-badge">🎨 CSS custom</span>
<span class="about-stack-badge">🐳 Docker</span>
<span class="about-stack-badge">🔍 TF-IDF</span>
<span class="about-stack-badge">📝 CodeMirror 6</span>
<span class="about-stack-badge">🧜 Mermaid.js</span>
<span class="about-stack-badge">🧠 Argon2id</span>
<span class="about-stack-badge">🔄 Watchdog</span>
<span class="about-stack-badge">📊 WeasyPrint</span>
<span class="about-stack-badge">🧪 Playwright</span>
<span class="about-stack-badge">🤖 AI multi-provider</span>
</div>
</div>
<div class="about-footer">
<div class="about-meta">
<span>Derniere livraison&nbsp;: <strong id="about-build-date">Juin 2026</strong></span>
<span>Git&nbsp;: <strong id="about-commit">—</strong></span>
</div>
<p class="about-joke" id="about-joke"></p>
<p class="about-copy">&copy; 2026 — Fait avec ☕, 🎧 et quelques <code>git push --force</code> accidentels.</p>
</div>
</div>
</div>
</div>
</body>
</html>