362 lines
16 KiB
HTML
362 lines
16 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr" data-theme="dark">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>ObsiGate</title>
|
||
<link rel="stylesheet" href="/static/style.css">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css" id="hljs-theme-dark">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css" id="hljs-theme-light" disabled>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
|
||
<script src="https://unpkg.com/[email protected]/dist/umd/lucide.min.js"></script>
|
||
<script type="importmap">
|
||
{
|
||
"imports": {
|
||
"@codemirror/state": "https://esm.sh/@codemirror/[email protected]"
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<!-- CodeMirror 6 -->
|
||
<script type="module">
|
||
import { EditorView, keymap, lineNumbers, highlightActiveLineGutter, highlightSpecialChars, drawSelection, dropCursor, rectangularSelection, crosshairCursor, highlightActiveLine } from "https://esm.sh/@codemirror/[email protected]?external=@codemirror/state";
|
||
import { EditorState } from "@codemirror/state";
|
||
import { defaultHighlightStyle, syntaxHighlighting, indentOnInput, bracketMatching, foldGutter, foldKeymap } from "https://esm.sh/@codemirror/[email protected]?external=@codemirror/state";
|
||
import { defaultKeymap, history, historyKeymap } from "https://esm.sh/@codemirror/[email protected]?external=@codemirror/state";
|
||
import { searchKeymap, highlightSelectionMatches } from "https://esm.sh/@codemirror/[email protected]?external=@codemirror/state";
|
||
import { autocompletion, completionKeymap, closeBrackets, closeBracketsKeymap } from "https://esm.sh/@codemirror/[email protected]?external=@codemirror/state";
|
||
import { markdown } from "https://esm.sh/@codemirror/[email protected]?external=@codemirror/state";
|
||
import { oneDark } from "https://esm.sh/@codemirror/[email protected]?external=@codemirror/state";
|
||
|
||
const basicSetup = [
|
||
lineNumbers(),
|
||
highlightActiveLineGutter(),
|
||
highlightSpecialChars(),
|
||
history(),
|
||
foldGutter(),
|
||
drawSelection(),
|
||
dropCursor(),
|
||
EditorState.allowMultipleSelections.of(true),
|
||
indentOnInput(),
|
||
syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
|
||
bracketMatching(),
|
||
closeBrackets(),
|
||
autocompletion(),
|
||
rectangularSelection(),
|
||
crosshairCursor(),
|
||
highlightActiveLine(),
|
||
highlightSelectionMatches(),
|
||
keymap.of([
|
||
...closeBracketsKeymap,
|
||
...defaultKeymap,
|
||
...searchKeymap,
|
||
...historyKeymap,
|
||
...foldKeymap,
|
||
...completionKeymap,
|
||
])
|
||
];
|
||
|
||
window.CodeMirror = { EditorView, EditorState, basicSetup, markdown, oneDark, keymap };
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<div class="app-container">
|
||
|
||
<!-- Header -->
|
||
<header class="header">
|
||
<div class="header-left">
|
||
<button class="hamburger-btn" id="hamburger-btn" title="Menu">
|
||
<i data-lucide="menu" style="width:20px;height:20px"></i>
|
||
</button>
|
||
|
||
<div class="header-logo" id="header-logo">
|
||
<i data-lucide="book-open" style="width:20px;height:20px"></i>
|
||
ObsiGate
|
||
</div>
|
||
</div>
|
||
|
||
<div class="header-center">
|
||
<div class="search-wrapper">
|
||
<i data-lucide="search" class="search-icon" style="width:16px;height:16px"></i>
|
||
<input type="text" id="search-input" placeholder="Recherche..." autocomplete="off">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="header-right">
|
||
<div class="header-menu">
|
||
<button class="header-menu-btn" id="header-menu-btn" title="Options">
|
||
<i data-lucide="settings" style="width:18px;height:18px"></i>
|
||
</button>
|
||
<div class="header-menu-dropdown" id="header-menu-dropdown">
|
||
<div class="menu-list" role="menu" aria-label="Options">
|
||
<label class="menu-list-row menu-list-select-row" for="vault-filter">
|
||
<span class="menu-list-icon" aria-hidden="true">
|
||
<i data-lucide="folders" style="width:17px;height:17px"></i>
|
||
</span>
|
||
<span class="menu-list-content">
|
||
<span class="menu-list-title">Vault</span>
|
||
<select id="vault-filter" class="menu-select menu-list-select">
|
||
<option value="all">Tous les vaults</option>
|
||
</select>
|
||
</span>
|
||
</label>
|
||
<button class="menu-list-row menu-list-button" id="theme-toggle" type="button" role="menuitem">
|
||
<span class="menu-list-icon" aria-hidden="true">
|
||
<i data-lucide="sun" style="width:17px;height:17px"></i>
|
||
</span>
|
||
<span class="menu-list-content">
|
||
<span class="menu-list-title">Thème</span>
|
||
<span class="menu-list-subtitle" id="theme-label">Clair</span>
|
||
</span>
|
||
</button>
|
||
<button class="menu-list-row menu-list-button" id="help-open-btn" type="button" role="menuitem">
|
||
<span class="menu-list-icon" aria-hidden="true">
|
||
<i data-lucide="circle-help" style="width:17px;height:17px"></i>
|
||
</span>
|
||
<span class="menu-list-content">
|
||
<span class="menu-list-title">Guide d'utilisation</span>
|
||
<span class="menu-list-subtitle">Ouvrir l'aide</span>
|
||
</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Main -->
|
||
<div class="main-body">
|
||
|
||
<!-- Mobile overlay -->
|
||
<div class="sidebar-overlay" id="sidebar-overlay"></div>
|
||
|
||
<!-- Sidebar -->
|
||
<aside class="sidebar" id="sidebar">
|
||
<!-- Sidebar filter -->
|
||
<div class="sidebar-filter">
|
||
<i data-lucide="filter" class="sidebar-filter-icon" style="width:14px;height:14px"></i>
|
||
<input type="text" id="sidebar-filter-input" placeholder="Filtrer fichiers et tags..." autocomplete="off">
|
||
</div>
|
||
|
||
<div class="sidebar-tree" id="sidebar-tree">
|
||
<div class="sidebar-quick-select">
|
||
<select id="vault-quick-select" class="menu-select sidebar-quick-select-control">
|
||
<option value="all">Tous les vaults</option>
|
||
</select>
|
||
</div>
|
||
<button class="sidebar-panel-toggle" id="vault-panel-toggle" type="button" aria-expanded="true" aria-controls="vault-panel-content">
|
||
<span class="sidebar-section-title">Vaults</span>
|
||
<i data-lucide="chevron-down" style="width:16px;height:16px"></i>
|
||
</button>
|
||
<div class="sidebar-panel-content" id="vault-panel-content">
|
||
<div id="vault-tree"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tag resize handle -->
|
||
<div class="tag-resize-handle" id="tag-resize-handle"></div>
|
||
|
||
<div class="tag-cloud-section" id="tag-cloud-section">
|
||
<button class="sidebar-panel-toggle" id="tag-panel-toggle" type="button" aria-expanded="true" aria-controls="tag-panel-content">
|
||
<span class="tag-cloud-title">Tags</span>
|
||
<i data-lucide="chevron-down" style="width:16px;height:16px"></i>
|
||
</button>
|
||
<div class="sidebar-panel-content" id="tag-panel-content">
|
||
<div class="tag-cloud" id="tag-cloud"></div>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- Sidebar resize handle -->
|
||
<div class="sidebar-resize-handle" id="sidebar-resize-handle"></div>
|
||
|
||
<!-- Content -->
|
||
<main class="content-area" id="content-area">
|
||
<div class="welcome" id="welcome">
|
||
<i data-lucide="library" style="width:48px;height:48px;color:var(--text-muted)"></i>
|
||
<h2>ObsiGate</h2>
|
||
<p>Sélectionnez un fichier dans la sidebar ou utilisez la recherche pour commencer.</p>
|
||
</div>
|
||
</main>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Editor Modal -->
|
||
<div class="editor-modal" id="editor-modal">
|
||
<div class="editor-container">
|
||
<div class="editor-header">
|
||
<div class="editor-title" id="editor-title">Édition</div>
|
||
<div class="editor-actions">
|
||
<button class="editor-btn" id="editor-cancel" title="Annuler" aria-label="Annuler">
|
||
<i data-lucide="rotate-ccw" style="width:16px;height:16px"></i>
|
||
</button>
|
||
<button class="editor-btn danger" id="editor-delete" title="Supprimer" aria-label="Supprimer">
|
||
<i data-lucide="trash-2" style="width:16px;height:16px"></i>
|
||
</button>
|
||
<button class="editor-btn primary" id="editor-save" title="Sauvegarder" aria-label="Sauvegarder">
|
||
<i data-lucide="check" style="width:16px;height:16px"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="editor-body" id="editor-body"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Help Modal -->
|
||
<div class="editor-modal" id="help-modal">
|
||
<div class="editor-container help-container">
|
||
<div class="editor-header">
|
||
<div class="editor-title" id="help-title">Aide ObsiGate</div>
|
||
<div class="editor-actions">
|
||
<button class="editor-btn" id="help-close" title="Fermer l'aide" aria-label="Fermer l'aide">
|
||
<i data-lucide="x" style="width:16px;height:16px"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="editor-body help-body" id="help-body">
|
||
<div class="help-content">
|
||
<section class="help-hero">
|
||
<div class="help-hero-copy">
|
||
<div class="help-kicker">📘 Guide d'utilisation</div>
|
||
<h1>Bienvenue dans ObsiGate</h1>
|
||
<p>Explorez vos notes, changez de vault en un clic, filtrez avec les tags et retrouvez immédiatement le bon document grâce à une navigation pensée pour aller vite.</p>
|
||
<div class="help-badges">
|
||
<span class="help-badge">⚡ Navigation rapide</span>
|
||
<span class="help-badge">🗂️ Multi-vault</span>
|
||
<span class="help-badge">🏷️ Tags intelligents</span>
|
||
<span class="help-badge">📝 Lecture et édition</span>
|
||
</div>
|
||
</div>
|
||
<div class="help-hero-visual" aria-hidden="true">
|
||
<div class="help-mini-window">
|
||
<div class="help-mini-window-bar">
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
</div>
|
||
<div class="help-mini-window-body">
|
||
<div class="help-mini-sidebar"></div>
|
||
<div class="help-mini-content">
|
||
<div class="help-mini-line short"></div>
|
||
<div class="help-mini-line"></div>
|
||
<div class="help-mini-tags">
|
||
<span>#docker</span>
|
||
<span>#infra</span>
|
||
<span>#linux</span>
|
||
</div>
|
||
<div class="help-mini-card"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="help-grid">
|
||
<article class="help-card">
|
||
<div class="help-card-icon">🔎</div>
|
||
<h2>Rechercher vite</h2>
|
||
<p>Utilisez la barre de recherche en haut pour retrouver un mot, un titre ou un contenu dans vos notes.</p>
|
||
</article>
|
||
<article class="help-card">
|
||
<div class="help-card-icon">🗃️</div>
|
||
<h2>Changer de vault</h2>
|
||
<p>Le sélecteur de vault vous permet de rester sur <code>Tous les vaults</code> ou de vous concentrer sur un espace précis.</p>
|
||
</article>
|
||
<article class="help-card">
|
||
<div class="help-card-icon">🏷️</div>
|
||
<h2>Filtrer par tags</h2>
|
||
<p>Cliquez sur un tag pour affiner les résultats et retrouver rapidement les notes associées.</p>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="help-section">
|
||
<h2>🧭 Comprendre l’interface</h2>
|
||
<div class="help-feature-list">
|
||
<div class="help-feature-item">
|
||
<div class="help-feature-emoji">🧱</div>
|
||
<div>
|
||
<h3>En-tête</h3>
|
||
<p>Il regroupe la recherche globale, le bouton menu des options et l’accès rapide à l’identité de l’application.</p>
|
||
</div>
|
||
</div>
|
||
<div class="help-feature-item">
|
||
<div class="help-feature-emoji">🌲</div>
|
||
<div>
|
||
<h3>Sidebar</h3>
|
||
<p>La barre latérale affiche les vaults, les dossiers, les fichiers et les tags. Elle peut être redimensionnée sur desktop.</p>
|
||
</div>
|
||
</div>
|
||
<div class="help-feature-item">
|
||
<div class="help-feature-emoji">📄</div>
|
||
<div>
|
||
<h3>Zone centrale</h3>
|
||
<p>Elle sert à lire la note, afficher son chemin, voir ses tags et déclencher les actions comme copier, source, télécharger ou éditer.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="help-section">
|
||
<h2>🚀 Parcours recommandé</h2>
|
||
<div class="help-steps">
|
||
<div class="help-step">
|
||
<div class="help-step-number">1</div>
|
||
<div>
|
||
<h3>Choisissez un contexte</h3>
|
||
<p>Sélectionnez un vault dans le menu du haut ou dans la sidebar pour réduire le bruit et cibler votre navigation.</p>
|
||
</div>
|
||
</div>
|
||
<div class="help-step">
|
||
<div class="help-step-number">2</div>
|
||
<div>
|
||
<h3>Explorez l’arborescence</h3>
|
||
<p>Dépliez les dossiers, ouvrez une note et utilisez le chemin en haut de page pour revenir visuellement au bon endroit dans la sidebar.</p>
|
||
</div>
|
||
</div>
|
||
<div class="help-step">
|
||
<div class="help-step-number">3</div>
|
||
<div>
|
||
<h3>Affinez avec les tags</h3>
|
||
<p>Ajoutez un ou plusieurs tags pour filtrer vos contenus de façon plus fine et faire émerger les notes pertinentes.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="help-section">
|
||
<h2>✨ Actions utiles au quotidien</h2>
|
||
<div class="help-checklist">
|
||
<div class="help-check-item"><span>✅</span><p>Basculer entre thème <strong>clair</strong> et <strong>sombre</strong> depuis le menu Options.</p></div>
|
||
<div class="help-check-item"><span>✅</span><p>Utiliser <code>Tous les vaults</code> pour une vue globale ou cibler un seul vault pour une navigation plus nette.</p></div>
|
||
<div class="help-check-item"><span>✅</span><p>Cliquer sur un tag dans la note ou dans la sidebar pour lancer un filtrage rapide.</p></div>
|
||
<div class="help-check-item"><span>✅</span><p>Ouvrir une note puis utiliser <strong>Copier</strong>, <strong>Source</strong>, <strong>Télécharger</strong> ou <strong>Éditer</strong>.</p></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="help-section help-tip-panel">
|
||
<h2>💡 Astuces</h2>
|
||
<div class="help-tip-grid">
|
||
<div class="help-tip-card">
|
||
<h3>Navigation visuelle</h3>
|
||
<p>Quand vous cliquez sur le chemin d’une note, la sidebar se repositionne automatiquement pour montrer l’élément correspondant.</p>
|
||
</div>
|
||
<div class="help-tip-card">
|
||
<h3>Gestion de l’espace</h3>
|
||
<p>Réduisez <code>VAULTS</code> ou <code>TAGS</code> pour donner plus d’espace à la section qui vous intéresse le plus.</p>
|
||
</div>
|
||
<div class="help-tip-card">
|
||
<h3>Confort de lecture</h3>
|
||
<p>Adaptez la largeur de la sidebar et la hauteur de la zone tags sur desktop pour un affichage plus confortable.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="/static/app.js"></script>
|
||
</body>
|
||
</html>
|