92 lines
8.5 KiB
HTML
92 lines
8.5 KiB
HTML
<div id="content-help" class="hidden tab-content pt-0" style="height: calc(100vh - 280px); margin: 0 -1rem -1rem -1rem;">
|
|
<div class="flex h-full">
|
|
<!-- Sidebar Navigation -->
|
|
<div id="help-sidebar" class="w-72 border-r border-[var(--border-primary)] bg-[var(--bg-secondary)] flex flex-col flex-shrink-0 h-full overflow-hidden">
|
|
<!-- Search -->
|
|
<div class="p-3 border-b border-[var(--border-primary)]">
|
|
<div class="relative">
|
|
<input type="text" id="help-search" placeholder="Rechercher dans la doc..."
|
|
class="w-full pl-9 pr-3 py-2 text-sm bg-[var(--bg-primary)] border border-[var(--border-secondary)] rounded-lg text-[var(--text-primary)] placeholder-[var(--text-muted)] focus:outline-none focus:ring-2 focus:ring-[var(--border-accent)] focus:border-transparent">
|
|
<i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-[var(--text-muted)] text-xs"></i>
|
|
</div>
|
|
<!-- Search results dropdown -->
|
|
<div id="help-search-results" class="hidden mt-2 bg-[var(--bg-primary)] border border-[var(--border-secondary)] rounded-lg shadow-lg max-h-64 overflow-y-auto"></div>
|
|
</div>
|
|
<!-- Navigation tree -->
|
|
<nav id="help-nav" class="flex-1 overflow-y-auto p-3 space-y-1">
|
|
<!-- Populated by JS -->
|
|
</nav>
|
|
<!-- Home link -->
|
|
<div class="p-3 border-t border-[var(--border-primary)]">
|
|
<button onclick="loadDocPage('', 'index')" class="w-full flex items-center gap-2 px-3 py-2 text-sm text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)] rounded-lg transition-colors">
|
|
<i class="fas fa-home text-xs"></i>
|
|
<span>Accueil documentation</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Mobile sidebar toggle -->
|
|
<button id="help-sidebar-toggle" class="hidden fixed bottom-4 left-4 z-50 bg-[var(--bg-accent)] text-white p-3 rounded-full shadow-lg sm:hidden" onclick="toggleHelpSidebar()">
|
|
<i class="fas fa-bars"></i>
|
|
</button>
|
|
<!-- Main Content Area -->
|
|
<div id="help-content-area" class="flex-1 overflow-y-auto">
|
|
<!-- Loading state -->
|
|
<div id="help-loading" class="hidden flex items-center justify-center h-full">
|
|
<div class="text-center">
|
|
<i class="fas fa-spinner fa-spin text-2xl text-[var(--text-accent)] mb-3"></i>
|
|
<p class="text-sm text-[var(--text-muted)]">Chargement...</p>
|
|
</div>
|
|
</div>
|
|
<!-- Welcome state (shown initially) -->
|
|
<div id="help-welcome" class="flex items-center justify-center h-full p-8">
|
|
<div class="text-center max-w-lg">
|
|
<i class="fas fa-book-open text-5xl text-[var(--text-accent)] mb-6"></i>
|
|
<h2 class="text-2xl font-semibold text-[var(--text-primary)] mb-3">Documentation DictIA</h2>
|
|
<p class="text-[var(--text-secondary)] mb-6">Bienvenue dans la documentation intégrée de DictIA. Sélectionnez une page dans le menu de gauche pour commencer.</p>
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
|
<button onclick="loadDocPage('guide-utilisateur', 'index')" class="flex flex-col items-center p-4 bg-[var(--bg-tertiary)] rounded-lg border border-[var(--border-primary)] hover:border-[var(--border-accent)] hover:shadow-md transition-all">
|
|
<i class="fas fa-book-open text-xl text-[var(--text-accent)] mb-2"></i>
|
|
<span class="text-sm font-medium text-[var(--text-primary)]">Guide Utilisateur</span>
|
|
</button>
|
|
<button onclick="loadDocPage('depannage', 'index')" class="flex flex-col items-center p-4 bg-[var(--bg-tertiary)] rounded-lg border border-[var(--border-primary)] hover:border-[var(--border-accent)] hover:shadow-md transition-all">
|
|
<i class="fas fa-life-ring text-xl text-[var(--text-accent)] mb-2"></i>
|
|
<span class="text-sm font-medium text-[var(--text-primary)]">Dépannage</span>
|
|
</button>
|
|
<button id="help-admin-card" onclick="loadDocPage('guide-admin', 'index')" class="hidden flex-col items-center p-4 bg-[var(--bg-tertiary)] rounded-lg border border-[var(--border-primary)] hover:border-[var(--border-accent)] hover:shadow-md transition-all">
|
|
<i class="fas fa-shield-alt text-xl text-[var(--text-accent)] mb-2"></i>
|
|
<span class="text-sm font-medium text-[var(--text-primary)]">Guide Admin</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Document content -->
|
|
<div id="help-doc-content" class="hidden">
|
|
<!-- Breadcrumb -->
|
|
<div id="help-breadcrumb" class="sticky top-0 z-10 bg-[var(--bg-primary)] border-b border-[var(--border-primary)] px-8 py-3">
|
|
<div class="flex items-center gap-2 text-sm text-[var(--text-muted)]">
|
|
<button onclick="showHelpWelcome()" class="hover:text-[var(--text-accent)]"><i class="fas fa-home"></i></button>
|
|
<i class="fas fa-chevron-right text-xs"></i>
|
|
<span id="help-breadcrumb-section"></span>
|
|
<i class="fas fa-chevron-right text-xs"></i>
|
|
<span id="help-breadcrumb-page" class="text-[var(--text-primary)]"></span>
|
|
</div>
|
|
</div>
|
|
<!-- Rendered content -->
|
|
<div id="help-rendered-content" class="prose prose-sm max-w-none px-8 py-6">
|
|
<!-- Rendered markdown HTML goes here -->
|
|
</div>
|
|
<!-- Navigation footer -->
|
|
<div id="help-nav-footer" class="border-t border-[var(--border-primary)] px-8 py-4 flex justify-between">
|
|
<button id="help-prev-page" class="hidden flex items-center gap-2 text-sm text-[var(--text-accent)] hover:underline" onclick="navigateDocPrev()">
|
|
<i class="fas fa-arrow-left"></i> <span id="help-prev-title"></span>
|
|
</button>
|
|
<div></div>
|
|
<button id="help-next-page" class="hidden flex items-center gap-2 text-sm text-[var(--text-accent)] hover:underline" onclick="navigateDocNext()">
|
|
<span id="help-next-title"></span> <i class="fas fa-arrow-right"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|