diff --git a/frontend/index.html b/frontend/index.html index 2b3886e..8c109de 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -88,27 +88,50 @@
+
+
⚙️ Réglages rapides
+
Personnalisez votre espace
+
Vault actif, thème et guide d'utilisation en un seul endroit.
+
Vault
- +
+
🗂️
+
+
Contexte de navigation
+ +
+
Thème
- +
+
🌗
+
+
Apparence
+ +
+
Aide
- +
+
💡
+
+
Documentation intégrée
+ +
+
@@ -207,34 +230,141 @@
-

Guide d'utilisation

-

ObsiGate vous permet d'explorer vos notes, de naviguer rapidement entre les vaults et d'utiliser les tags pour filtrer ou retrouver vos contenus.

+
+
+
📘 Guide d'utilisation
+

Bienvenue dans ObsiGate

+

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.

+
+ ⚡ Navigation rapide + 🗂️ Multi-vault + 🏷️ Tags intelligents + 📝 Lecture et édition +
+
+ +
-

Présentation générale de l'interface

-

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.

+
+
+
🔎
+

Rechercher vite

+

Utilisez la barre de recherche en haut pour retrouver un mot, un titre ou un contenu dans vos notes.

+
+
+
🗃️
+

Changer de vault

+

Le sélecteur de vault vous permet de rester sur Tous les vaults ou de vous concentrer sur un espace précis.

+
+
+
🏷️
+

Filtrer par tags

+

Cliquez sur un tag pour affiner les résultats et retrouver rapidement les notes associées.

+
+
-

Sections principales

-

Vaults

-

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.

-

Tags

-

La section Tags affiche les étiquettes disponibles comme #serveur, #TDM, #local, #linux, #debian, #docker, #None, #documentation, #network, #fiche-equipement, #fiche-infra, #fiche-reseau, #ssh et #bruno. Cliquez sur un tag pour lancer un filtrage rapide.

+
+

🧭 Comprendre l’interface

+
+
+
🧱
+
+

En-tête

+

Il regroupe la recherche globale, le bouton menu des options et l’accès rapide à l’identité de l’application.

+
+
+
+
🌲
+
+

Sidebar

+

La barre latérale affiche les vaults, les dossiers, les fichiers et les tags. Elle peut être redimensionnée sur desktop.

+
+
+
+
📄
+
+

Zone centrale

+

Elle sert à lire la note, afficher son chemin, voir ses tags et déclencher les actions comme copier, source, télécharger ou éditer.

+
+
+
+
-

Éléments interactifs

-

Sélection rapide des vaults

-

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 Tous les vaults.

-

Panneaux réductibles

-

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.

+
+

🚀 Parcours recommandé

+
+
+
1
+
+

Choisissez un contexte

+

Sélectionnez un vault dans le menu du haut ou dans la sidebar pour réduire le bruit et cibler votre navigation.

+
+
+
+
2
+
+

Explorez l’arborescence

+

Dépliez les dossiers, ouvrez une note et utilisez le chemin en haut de page pour revenir visuellement au bon endroit dans la sidebar.

+
+
+
+
3
+
+

Affinez avec les tags

+

Ajoutez un ou plusieurs tags pour filtrer vos contenus de façon plus fine et faire émerger les notes pertinentes.

+
+
+
+
-

Actions courantes

-

Créer ou modifier

-

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.

-

Rechercher

-

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.

-

Naviguer

-

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.

+
+

✨ Actions utiles au quotidien

+
+
✅

Basculer entre thème clair et sombre depuis le menu Options.

+
✅

Utiliser Tous les vaults pour une vue globale ou cibler un seul vault pour une navigation plus nette.

+
✅

Cliquer sur un tag dans la note ou dans la sidebar pour lancer un filtrage rapide.

+
✅

Ouvrir une note puis utiliser Copier, Source, Télécharger ou Éditer.

+
+
-

Astuces

-

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.

+
+

💡 Astuces

+
+
+

Navigation visuelle

+

Quand vous cliquez sur le chemin d’une note, la sidebar se repositionne automatiquement pour montrer l’élément correspondant.

+
+
+

Gestion de l’espace

+

Réduisez VAULTS ou TAGS pour donner plus d’espace à la section qui vous intéresse le plus.

+
+
+

Confort de lecture

+

Adaptez la largeur de la sidebar et la hauteur de la zone tags sur desktop pour un affichage plus confortable.

+
+
+
diff --git a/frontend/style.css b/frontend/style.css index d84fd62..28bf310 100644 --- a/frontend/style.css +++ b/frontend/style.css @@ -182,24 +182,28 @@ a:hover { } .header-menu-btn { - background: none; - border: 1px solid var(--border); - border-radius: 8px; - padding: 6px 10px; + background: linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary) 92%, white 8%), var(--bg-secondary)); + border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); + border-radius: 12px; + padding: 10px 12px; cursor: pointer; color: var(--text-secondary); display: flex; align-items: center; - transition: color 200ms ease, border-color 200ms ease; + justify-content: center; + box-shadow: 0 8px 24px rgba(0,0,0,0.22); + transition: color 200ms ease, border-color 200ms ease, background 200ms ease, transform 180ms ease, box-shadow 200ms ease; } .header-menu-btn:hover { color: var(--accent); border-color: var(--accent); + transform: translateY(-1px); + box-shadow: 0 12px 28px rgba(0,0,0,0.28); } .header-menu-btn.active { color: var(--accent); border-color: var(--accent); - background: var(--tag-bg); + background: color-mix(in srgb, var(--accent) 16%, var(--bg-secondary)); } .header-menu-dropdown { @@ -207,20 +211,55 @@ a:hover { position: absolute; top: calc(100% + 8px); right: 0; - background: var(--bg-secondary); + background: linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary) 96%, white 4%), var(--bg-secondary)); border: 1px solid var(--border); - border-radius: 8px; - box-shadow: 0 4px 16px rgba(0,0,0,0.3); - min-width: 220px; + border-radius: 14px; + box-shadow: 0 18px 44px rgba(0,0,0,0.42); + min-width: 330px; z-index: 100; - padding: 8px; + padding: 14px; + backdrop-filter: blur(12px); } .header-menu-dropdown.active { display: block; } +.menu-overview { + padding: 10px 12px 14px; + border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)); + border-radius: 12px; + background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%); + margin-bottom: 10px; +} + +.menu-overview-badge { + display: inline-flex; + align-items: center; + padding: 4px 8px; + border-radius: 999px; + background: color-mix(in srgb, var(--accent) 16%, transparent); + color: var(--accent); + font-family: 'JetBrains Mono', monospace; + font-size: 0.68rem; + margin-bottom: 10px; +} + +.menu-overview-title { + font-family: 'JetBrains Mono', monospace; + font-size: 1rem; + font-weight: 700; + color: var(--text-primary); + margin-bottom: 4px; +} + +.menu-overview-subtitle { + font-size: 0.82rem; + line-height: 1.5; + color: var(--text-secondary); +} + .menu-section { - padding: 8px; + padding: 10px 0; } .menu-label { @@ -233,48 +272,87 @@ a:hover { font-weight: 600; } -.menu-select { - width: 100%; - padding: 6px 10px; +.menu-field-card { + display: flex; + gap: 10px; + align-items: flex-start; + padding: 12px; border: 1px solid var(--border); - border-radius: 6px; - background: var(--search-bg); - color: var(--text-primary); + border-radius: 12px; + background: color-mix(in srgb, var(--bg-primary) 58%, transparent); +} + +.menu-field-icon { + width: 34px; + height: 34px; + border-radius: 10px; + display: inline-flex; + align-items: center; + justify-content: center; + background: color-mix(in srgb, var(--accent) 16%, transparent); + flex: 0 0 auto; + font-size: 1rem; +} + +.menu-field-body { + flex: 1; + min-width: 0; +} + +.menu-field-title { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; + color: var(--text-primary); + margin-bottom: 8px; +} + +.menu-select { + width: 100%; + padding: 11px 14px; + border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border)); + border-radius: 10px; + background: color-mix(in srgb, var(--search-bg) 88%, white 12%); + color: var(--text-primary); + font-family: 'JetBrains Mono', monospace; + font-size: 0.86rem; + font-weight: 700; outline: none; cursor: pointer; - transition: border-color 200ms ease; + transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease; } .menu-select:hover, .menu-select:focus { border-color: var(--accent); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); } .menu-divider { height: 1px; background: var(--border); - margin: 4px 0; + margin: 2px 0; } .menu-theme-btn { width: 100%; - background: none; + background: linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary) 92%, white 8%), var(--bg-primary)); border: 1px solid var(--border); - border-radius: 6px; - padding: 8px 12px; + border-radius: 10px; + padding: 11px 12px; cursor: pointer; color: var(--text-primary); - display: flex; + display: inline-flex; align-items: center; + justify-content: center; gap: 8px; font-family: 'JetBrains Mono', monospace; - font-size: 0.8rem; - transition: all 200ms ease; + font-size: 0.84rem; + font-weight: 700; + transition: border-color 200ms ease, color 200ms ease, background 200ms ease, transform 180ms ease; } .menu-theme-btn:hover { - background: var(--bg-hover); border-color: var(--accent); color: var(--accent); + background: color-mix(in srgb, var(--accent) 10%, var(--bg-primary)); + transform: translateY(-1px); } /* --- Main body --- */ @@ -1101,10 +1179,10 @@ a:hover { } .help-body { padding: 0; - background: var(--bg-primary); + background: radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 10%, transparent), transparent 30%), var(--bg-primary); } .help-content { - max-width: 820px; + max-width: 920px; margin: 0 auto; padding: 28px 24px 40px; } @@ -1139,6 +1217,245 @@ a:hover { padding: 1px 5px; color: var(--text-primary); } + +.help-hero { + display: grid; + grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); + gap: 22px; + align-items: stretch; + padding: 22px; + border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border)); + border-radius: 18px; + background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 45%), color-mix(in srgb, var(--bg-secondary) 92%, var(--bg-primary)); + margin-bottom: 26px; +} + +.help-kicker { + display: inline-flex; + align-items: center; + padding: 5px 10px; + border-radius: 999px; + background: color-mix(in srgb, var(--accent) 16%, transparent); + color: var(--accent); + font-family: 'JetBrains Mono', monospace; + font-size: 0.72rem; + margin-bottom: 12px; +} + +.help-badges { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-top: 16px; +} + +.help-badge { + display: inline-flex; + align-items: center; + padding: 6px 10px; + border-radius: 999px; + background: color-mix(in srgb, var(--bg-primary) 72%, transparent); + border: 1px solid var(--border); + color: var(--text-primary); + font-size: 0.8rem; +} + +.help-hero-visual { + display: flex; + align-items: center; + justify-content: center; +} + +.help-mini-window { + width: 100%; + max-width: 320px; + border-radius: 18px; + overflow: hidden; + border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)); + background: color-mix(in srgb, var(--bg-primary) 88%, black 12%); + box-shadow: 0 18px 44px rgba(0,0,0,0.28); +} + +.help-mini-window-bar { + display: flex; + gap: 7px; + padding: 12px 14px; + border-bottom: 1px solid var(--border); +} + +.help-mini-window-bar span { + width: 9px; + height: 9px; + border-radius: 50%; + background: color-mix(in srgb, var(--accent) 45%, var(--text-muted)); +} + +.help-mini-window-body { + display: flex; + min-height: 190px; +} + +.help-mini-sidebar { + width: 72px; + background: color-mix(in srgb, var(--bg-secondary) 92%, black 8%); + border-right: 1px solid var(--border); +} + +.help-mini-content { + flex: 1; + padding: 16px; +} + +.help-mini-line { + height: 10px; + border-radius: 999px; + background: color-mix(in srgb, var(--text-muted) 28%, transparent); + margin-bottom: 10px; +} + +.help-mini-line.short { + width: 62%; +} + +.help-mini-tags { + display: flex; + flex-wrap: wrap; + gap: 6px; + margin: 14px 0; +} + +.help-mini-tags span { + padding: 3px 8px; + border-radius: 999px; + background: color-mix(in srgb, var(--accent) 16%, transparent); + color: var(--text-primary); + font-size: 0.72rem; +} + +.help-mini-card { + height: 64px; + border-radius: 12px; + border: 1px solid var(--border); + background: linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary) 94%, white 6%), var(--bg-primary)); +} + +.help-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 16px; + margin-bottom: 26px; +} + +.help-card { + padding: 18px; + border-radius: 16px; + border: 1px solid var(--border); + background: color-mix(in srgb, var(--bg-secondary) 92%, var(--bg-primary)); +} + +.help-card-icon { + width: 42px; + height: 42px; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 12px; + background: color-mix(in srgb, var(--accent) 14%, transparent); + font-size: 1.2rem; + margin-bottom: 10px; +} + +.help-section { + margin-top: 26px; +} + +.help-feature-list, +.help-steps, +.help-checklist, +.help-tip-grid { + display: grid; + gap: 14px; +} + +.help-feature-item, +.help-step, +.help-check-item, +.help-tip-card { + border: 1px solid var(--border); + border-radius: 16px; + background: color-mix(in srgb, var(--bg-secondary) 92%, var(--bg-primary)); +} + +.help-feature-item { + display: grid; + grid-template-columns: 52px minmax(0, 1fr); + gap: 14px; + padding: 16px; +} + +.help-feature-emoji { + width: 52px; + height: 52px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 14px; + background: color-mix(in srgb, var(--accent) 12%, transparent); + font-size: 1.4rem; +} + +.help-steps { + counter-reset: step; +} + +.help-step { + display: grid; + grid-template-columns: 44px minmax(0, 1fr); + gap: 14px; + padding: 16px; +} + +.help-step-number { + width: 44px; + height: 44px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + background: color-mix(in srgb, var(--accent) 18%, transparent); + color: var(--accent); + font-family: 'JetBrains Mono', monospace; + font-weight: 700; +} + +.help-check-item { + display: grid; + grid-template-columns: 28px minmax(0, 1fr); + gap: 12px; + padding: 14px 16px; + align-items: start; +} + +.help-check-item span { + font-size: 1rem; + line-height: 1.4; +} + +.help-check-item p { + margin-bottom: 0; +} + +.help-tip-panel { + margin-top: 28px; +} + +.help-tip-grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); +} + +.help-tip-card { + padding: 16px; +} .cm-editor { height: auto; min-height: 100%; @@ -1290,12 +1607,12 @@ body.resizing-v { } .header-menu-btn { - padding: 5px 8px; + padding: 8px 10px; } .header-menu-dropdown { right: -8px; - min-width: 200px; + min-width: 280px; } .sidebar-quick-select { @@ -1354,6 +1671,16 @@ body.resizing-v { padding: 20px 16px 28px; } + .help-hero { + grid-template-columns: 1fr; + padding: 18px; + } + + .help-grid, + .help-tip-grid { + grid-template-columns: 1fr; + } + .content-area { padding: 16px 12px 60px; }