246 lines
11 KiB
HTML
246 lines
11 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/lucide@0.344.0/dist/umd/lucide.min.js"></script>
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"@codemirror/state": "https://esm.sh/@codemirror/state@6.2.0"
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- CodeMirror 6 -->
|
|
<script type="module">
|
|
import { EditorView, keymap, lineNumbers, highlightActiveLineGutter, highlightSpecialChars, drawSelection, dropCursor, rectangularSelection, crosshairCursor, highlightActiveLine } from "https://esm.sh/@codemirror/view@6.9.0?external=@codemirror/state";
|
|
import { EditorState } from "@codemirror/state";
|
|
import { defaultHighlightStyle, syntaxHighlighting, indentOnInput, bracketMatching, foldGutter, foldKeymap } from "https://esm.sh/@codemirror/language@6.6.0?external=@codemirror/state";
|
|
import { defaultKeymap, history, historyKeymap } from "https://esm.sh/@codemirror/commands@6.2.3?external=@codemirror/state";
|
|
import { searchKeymap, highlightSelectionMatches } from "https://esm.sh/@codemirror/search@6.3.0?external=@codemirror/state";
|
|
import { autocompletion, completionKeymap, closeBrackets, closeBracketsKeymap } from "https://esm.sh/@codemirror/autocomplete@6.5.0?external=@codemirror/state";
|
|
import { markdown } from "https://esm.sh/@codemirror/lang-markdown@6.1.0?external=@codemirror/state";
|
|
import { oneDark } from "https://esm.sh/@codemirror/theme-one-dark@6.1.0?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-section">
|
|
<div class="menu-label">Vault</div>
|
|
<select id="vault-filter" class="menu-select">
|
|
<option value="all">Tous les vaults</option>
|
|
</select>
|
|
</div>
|
|
<div class="menu-divider"></div>
|
|
<div class="menu-section">
|
|
<div class="menu-label">Thème</div>
|
|
<button class="menu-theme-btn" id="theme-toggle">
|
|
<i data-lucide="sun" style="width:16px;height:16px"></i>
|
|
<span id="theme-label">Clair</span>
|
|
</button>
|
|
</div>
|
|
<div class="menu-divider"></div>
|
|
<div class="menu-section">
|
|
<div class="menu-label">Aide</div>
|
|
<button class="menu-theme-btn" id="help-open-btn">
|
|
<i data-lucide="circle-help" style="width:16px;height:16px"></i>
|
|
<span>Ouvrir l'aide</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">
|
|
<h1>Guide d'utilisation</h1>
|
|
<p>ObsiGate vous permet d'explorer vos notes, de naviguer rapidement entre les vaults et d'utiliser les tags pour filtrer ou retrouver vos contenus.</p>
|
|
|
|
<h2>Présentation générale de l'interface</h2>
|
|
<p>L'application est organisée autour de trois zones principales : l'en-tête avec la recherche et les options, la barre latérale avec les vaults et les tags, et la zone centrale pour consulter, rechercher et modifier les fichiers.</p>
|
|
|
|
<h2>Sections principales</h2>
|
|
<h3>Vaults</h3>
|
|
<p>La section Vaults regroupe les espaces suivants : Recettes, IT, Main, Workout, Sessions et Bruno. Vous pouvez ouvrir un vault pour explorer son arborescence, puis sélectionner un fichier pour l'afficher.</p>
|
|
<h3>Tags</h3>
|
|
<p>La section Tags affiche les étiquettes disponibles comme <code>#serveur</code>, <code>#TDM</code>, <code>#local</code>, <code>#linux</code>, <code>#debian</code>, <code>#docker</code>, <code>#None</code>, <code>#documentation</code>, <code>#network</code>, <code>#fiche-equipement</code>, <code>#fiche-infra</code>, <code>#fiche-reseau</code>, <code>#ssh</code> et <code>#bruno</code>. Cliquez sur un tag pour lancer un filtrage rapide.</p>
|
|
|
|
<h2>Éléments interactifs</h2>
|
|
<h3>Sélection rapide des vaults</h3>
|
|
<p>Le menu déroulant en haut de l'arborescence vous permet de vous focaliser instantanément sur un vault précis ou de revenir à l'affichage global avec <code>Tous les vaults</code>.</p>
|
|
<h3>Panneaux réductibles</h3>
|
|
<p>Les sections Vaults et Tags peuvent être réduites ou développées depuis leur en-tête pour gagner de l'espace dans la barre latérale.</p>
|
|
|
|
<h2>Actions courantes</h2>
|
|
<h3>Créer ou modifier</h3>
|
|
<p>Ouvrez un fichier puis utilisez l'action d'édition pour modifier son contenu. Le mode source et la sauvegarde sont accessibles depuis la zone de lecture.</p>
|
|
<h3>Rechercher</h3>
|
|
<p>Utilisez la barre de recherche en haut pour retrouver des notes par texte. Vous pouvez combiner la recherche avec un vault sélectionné et un ou plusieurs tags.</p>
|
|
<h3>Naviguer</h3>
|
|
<p>Dépliez les dossiers et vaults dans la barre latérale, ou utilisez directement la sélection rapide pour aller au bon contexte plus vite.</p>
|
|
|
|
<h2>Astuces</h2>
|
|
<p>Le thème clair/sombre est disponible dans le menu Options. Vous pouvez aussi redimensionner la barre latérale et la zone des tags sur desktop pour adapter l'affichage à votre usage.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/static/app.js"></script>
|
|
</body>
|
|
</html>
|