163 lines
6.2 KiB
HTML
163 lines
6.2 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>
|
|
|
|
<!-- 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";
|
|
import { EditorState } from "https://esm.sh/@codemirror/state@6.2.0";
|
|
import { defaultHighlightStyle, syntaxHighlighting, indentOnInput, bracketMatching, foldGutter, foldKeymap } from "https://esm.sh/@codemirror/language@6.6.0";
|
|
import { defaultKeymap, history, historyKeymap } from "https://esm.sh/@codemirror/commands@6.2.3";
|
|
import { searchKeymap, highlightSelectionMatches } from "https://esm.sh/@codemirror/search@6.3.0";
|
|
import { autocompletion, completionKeymap, closeBrackets, closeBracketsKeymap } from "https://esm.sh/@codemirror/autocomplete@6.5.0";
|
|
import { markdown } from "https://esm.sh/@codemirror/lang-markdown@6.1.0";
|
|
import { oneDark } from "https://esm.sh/@codemirror/theme-one-dark@6.1.0";
|
|
|
|
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">
|
|
<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 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 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>
|
|
</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-section-title">Vaults</div>
|
|
<div id="vault-tree"></div>
|
|
</div>
|
|
|
|
<!-- Tag resize handle -->
|
|
<div class="tag-resize-handle" id="tag-resize-handle"></div>
|
|
|
|
<div class="tag-cloud-section" id="tag-cloud-section">
|
|
<div class="tag-cloud-title">Tags</div>
|
|
<div class="tag-cloud" id="tag-cloud"></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">
|
|
<i data-lucide="x" style="width:14px;height:14px"></i>
|
|
Annuler
|
|
</button>
|
|
<button class="editor-btn primary" id="editor-save">
|
|
<i data-lucide="save" style="width:14px;height:14px"></i>
|
|
Sauvegarder
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="editor-body" id="editor-body"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/static/app.js"></script>
|
|
</body>
|
|
</html>
|