Projets/ObsiGate
1
1
Fork 0
Code Issues 16 Pull Requests Actions Packages Projects Releases 19 Wiki Activity

feat: redesign help modal with enhanced hero section, improved navigation styling, and card-based layout

Browse Source 
- Increase help container max-width from 960px to 1320px for wider layout
- Add overflow-y auto and scroll-behavior smooth to help-body
- Redesign help navigation with wider sidebar (260px), softer background colors, and rounded pill-style links
- Add emoji icons to all navigation menu items for better visual hierarchy
- Transform navigation links with rounded borders, gradient backgrounds on
This commit is contained in:
bruno
2026-03-31 13:15:25 -04:00
parent 7dc7e9932b
commit 4c4b8be215
3 changed files with 100 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.html
+35 -18
View File
@@ -640,27 +640,44 @@
<nav class="help-nav" id="help-nav">
<div class="help-nav-title">Sommaire</div>
<ul class="help-nav-list">
<li><a href="#help-intro" class="help-nav-link">Introduction</a></li>
<li><a href="#help-interface" class="help-nav-link">Interface</a></li>
<li><a href="#help-navigation" class="help-nav-link">Navigation</a></li>
<li><a href="#help-recherche" class="help-nav-link">Recherche</a></li>
<li><a href="#help-tags" class="help-nav-link">Tags</a></li>
<li><a href="#help-fichiers" class="help-nav-link">Fichiers</a></li>
<li><a href="#help-personnalisation" class="help-nav-link">Personnalisation</a></li>
<li><a href="#help-raccourcis" class="help-nav-link">Raccourcis</a></li>
<li><a href="#help-astuces" class="help-nav-link">Astuces</a></li>
<li><a href="#help-intro" class="help-nav-link">📘 Introduction</a></li>
<li><a href="#help-interface" class="help-nav-link">🧭 Interface</a></li>
<li><a href="#help-navigation" class="help-nav-link">🗺️ Navigation</a></li>
<li><a href="#help-recherche" class="help-nav-link">🔍 Recherche</a></li>
<li><a href="#help-tags" class="help-nav-link">🏷️ Tags</a></li>
<li><a href="#help-fichiers" class="help-nav-link">📁 Fichiers</a></li>
<li><a href="#help-personnalisation" class="help-nav-link">🎨 Personnalisation</a></li>
<li><a href="#help-raccourcis" class="help-nav-link">⌨️ Raccourcis</a></li>
<li><a href="#help-astuces" class="help-nav-link">💡 Astuces</a></li>
</ul>
</nav>
<div class="help-content">
<section class="help-section" id="help-intro">
<h1>📘 Bienvenue dans ObsiGate</h1>
<p class="help-lead">ObsiGate est votre porte d'entrée web vers vos vaults Obsidian. Accédez, naviguez et recherchez dans toutes vos notes depuis n'importe quel appareil via une interface moderne et responsive.</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>
<span class="help-badge">🔍 Recherche TF-IDF</span>
<section class="help-section help-hero" id="help-intro">
<div class="help-hero-copy">
<div class="help-kicker">Guide officiel</div>
<h1>📘 Bienvenue dans ObsiGate</h1>
<p class="help-lead">ObsiGate est votre porte d'entrée web vers vos vaults Obsidian. Accédez, naviguez et recherchez dans toutes vos notes depuis n'importe quel appareil via une interface moderne et responsive.</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>
<span class="help-badge">🔍 Recherche TF-IDF</span>
</div>
</div>
<div class="help-hero-visual" aria-hidden="true">
<div class="help-stat-card">
<span class="help-stat-label">Expérience</span>
<strong>Simple</strong>
</div>
<div class="help-stat-card">
<span class="help-stat-label">Recherche</span>
<strong>Instantanée</strong>
</div>
<div class="help-stat-card">
<span class="help-stat-label">Accès</span>
<strong>Multi-vault</strong>
</div>
</div>
</section>