<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Répertoire de Référentiels de Formation</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-color: #2c3e50;
--secondary-color: #3498db;
--accent-color: #1abc9c;
--light-color: #ecf0f1;
--dark-color: #2c3e50;
--danger-color: #e74c3c;
--warning-color: #f39c12;
--success-color: #27ae60;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f5f7fa;
color: #333;
line-height: 1.6;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Header */
header {
background-color: var(--primary-color);
color: white;
padding: 1rem 0;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
position: sticky;
top: 0;
z-index: 100;
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
gap: 10px;
}
.logo h1 {
font-size: 1.5rem;
font-weight: 600;
}
.logo i {
font-size: 1.8rem;
color: var(--accent-color);
}
nav ul {
display: flex;
list-style: none;
}
nav ul li {
margin-left: 1.5rem;
}
nav ul li a {
color: white;
text-decoration: none;
padding: 0.5rem 1rem;
border-radius: 4px;
transition: background-color 0.3s;
}
nav ul li a:hover {
background-color: rgba(255, 255, 255, 0.1);
}
nav ul li a.active {
background-color: var(--accent-color);
}
.mobile-menu-btn {
display: none;
background: none;
border: none;
color: white;
font-size: 1.5rem;
cursor: pointer;
}
/* Main content */
.main-content {
min-height: calc(100vh - 200px);
padding: 2rem 0;
}
/* Page titles */
.page-title {
margin-bottom: 2rem;
color: var(--primary-color);
border-bottom: 3px solid var(--accent-color);
padding-bottom: 0.5rem;
display: inline-block;
}
/* Cards */
.card {
background: white;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
padding: 1.5rem;
margin-bottom: 1.5rem;
transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}
/* Forms */
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: var(--primary-color);
}
.form-control {
width: 100%;
padding: 0.75rem;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 1rem;
transition: border-color 0.3s;
}
.form-control:focus {
border-color: var(--secondary-color);
outline: none;
}
.form-row {
display: flex;
gap: 1rem;
}
.form-row .form-group {
flex: 1;
}
/* Buttons */
.btn {
display: inline-block;
padding: 0.75rem 1.5rem;
background-color: var(--secondary-color);
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
transition: background-color 0.3s;
text-decoration: none;
}
.btn:hover {
background-color: #2980b9;
}
.btn-accent {
background-color: var(--accent-color);
}
.btn-accent:hover {
background-color: #16a085;
}
.btn-danger {
background-color: var(--danger-color);
}
.btn-danger:hover {
background-color: #c0392b;
}
.btn-warning {
background-color: var(--warning-color);
}
.btn-warning:hover {
background-color: #d68910;
}
.btn-small {
padding: 0.5rem 1rem;
font-size: 0.9rem;
}
.btn-block {
display: block;
width: 100%;
text-align: center;
}
/* Search box */
.search-box {
display: flex;
margin-bottom: 2rem;
}
.search-box input {
flex: 1;
padding: 0.75rem 1rem;
border: 1px solid #ddd;
border-radius: 4px 0 0 4px;
font-size: 1rem;
}
.search-box button {
border-radius: 0 4px 4px 0;
}
/* Filters */
.filters {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 2rem;
background: white;
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.filter-group {
flex: 1;
min-width: 200px;
}
/* Referentials list */
.referentials-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
}
.referentiel-card {
border-left: 4px solid var(--accent-color);
}
.referentiel-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1rem;
}
.referentiel-title {
font-size: 1.2rem;
font-weight: 600;
color: var(--primary-color);
}
.referentiel-sector {
display: inline-block;
padding: 0.25rem 0.5rem;
background-color: #e8f4fc;
color: var(--secondary-color);
border-radius: 4px;
font-size: 0.8rem;
font-weight: 600;
}
.referentiel-details {
margin-bottom: 1rem;
font-size: 0.9rem;
color: #666;
}
.referentiel-details span {
display: block;
margin-bottom: 0.25rem;
}
.documents-list {
margin-top: 1rem;
}
.documents-list h4 {
margin-bottom: 0.5rem;
color: var(--primary-color);
}
.document-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem;
background-color: #f9f9f9;
border-radius: 4px;
margin-bottom: 0.5rem;
}
.document-item i {
color: var(--danger-color);
}
/* File upload */
.file-upload-area {
border: 2px dashed #ddd;
border-radius: 8px;
padding: 2rem;
text-align: center;
margin-bottom: 1rem;
cursor: pointer;
transition: border-color 0.3s;
}
.file-upload-area:hover {
border-color: var(--secondary-color);
}
.file-upload-area i {
font-size: 3rem;
color: var(--secondary-color);
margin-bottom: 1rem;
}
.file-list {
margin-top: 1rem;
}
.file-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem;
background-color: #f9f9f9;
border-radius: 4px;
margin-bottom: 0.5rem;
}
.document-required {
display: inline-block;
padding: 0.25rem 0.5rem;
background-color: #f8f9fa;
color: #666;
border-radius: 4px;
font-size: 0.75rem;
margin-left: 0.5rem;
font-weight: 600;
}
/* Footer */
footer {
background-color: var(--primary-color);
color: white;
padding: 2rem 0;
margin-top: 2rem;
}
.footer-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-links {
display: flex;
gap: 1.5rem;
}
.footer-links a {
color: white;
text-decoration: none;
}
.footer-links a:hover {
color: var(--accent-color);
}
/* Page navigation */
.page-navigation {
display: flex;
justify-content: center;
margin-top: 2rem;
gap: 0.5rem;
}
.page-navigation a {
display: inline-block;
padding: 0.5rem 1rem;
background-color: white;
border: 1px solid #ddd;
border-radius: 4px;
color: var(--primary-color);
text-decoration: none;
transition: all 0.3s;
}
.page-navigation a:hover {
background-color: var(--secondary-color);
color: white;
border-color: var(--secondary-color);
}
.page-navigation a.active {
background-color: var(--accent-color);
color: white;
border-color: var(--accent-color);
}
/* Document types */
.document-type {
display: inline-block;
padding: 0.2rem 0.5rem;
background-color: #f0f0f0;
border-radius: 3px;
font-size: 0.75rem;
color: #666;
margin-left: 0.5rem;
}
/* Custom qualification input */
.qualification-container {
display: flex;
gap: 0.5rem;
}
.qualification-container .form-control {
flex: 1;
}
/* Responsive styles */
@media (max-width: 992px) {
.form-row {
flex-direction: column;
gap: 0;
}
.qualification-container {
flex-direction: column;
}
}
@media (max-width: 768px) {
.header-container {
flex-direction: column;
align-items: flex-start;
}
nav {
width: 100%;
margin-top: 1rem;
}
nav ul {
flex-direction: column;
}
nav ul li {
margin-left: 0;
margin-bottom: 0.5rem;
}
.mobile-menu-btn {
display: block;
position: absolute;
top: 1rem;
right: 1rem;
}
.filters {
flex-direction: column;
}
.footer-content {
flex-direction: column;
gap: 1rem;
text-align: center;
}
.referentials-list {
grid-template-columns: 1fr;
}
}
/* Hidden class for page navigation */
.hidden {
display: none;
}
/* Info message */
.info-message {
background-color: #e8f4fc;
border-left: 4px solid var(--secondary-color);
padding: 1rem;
margin-bottom: 1.5rem;
border-radius: 4px;
}
/* Alert messages */
.alert {
padding: 1rem;
border-radius: 4px;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.alert-success {
background-color: #d4edda;
color: #155724;
border-left: 4px solid #28a745;
}
.alert-warning {
background-color: #fff3cd;
color: #856404;
border-left: 4px solid #ffc107;
}
</style>
</head>
<body>
<!-- Header -->
<header>
<div class="container header-container">
<div class="logo">
<i class="fas fa-book-open"></i>
<h1>Répertoire de Référentiels</h1>
</div>
<button class="mobile-menu-btn" id="mobileMenuBtn">
<i class="fas fa-bars"></i>
</button>
<nav id="mainNav">
<ul>
<li><a href="#" class="nav-link active" data-page="home">Accueil</a></li>
<li><a href="#" class="nav-link" data-page="add">Ajouter un référentiel</a></li>
<li><a href="#" class="nav-link" data-page="browse">Parcourir les référentiels</a></li>
<li><a href="#" class="nav-link" data-page="search">Recherche avancée</a></li>
</ul>
</nav>
</div>
</header>
<!-- Main Content -->
<div class="container main-content">
<!-- Home Page -->
<div id="home-page" class="page">
<h2 class="page-title">Bienvenue dans le répertoire de référentiels</h2>
<div class="card">
<p>Ce portail vous permet de gérer et consulter tous les référentiels de formation disponibles dans notre base de données.</p>
<p>Chaque référentiel peut contenir jusqu'à 6 documents PDF :</p>
<ul style="margin-left: 1.5rem; margin-top: 0.5rem; margin-bottom: 1.5rem;">
<li><strong>RAST</strong> - Rapport d'analyse de la situation de travail</li>
<li><strong>RMC</strong> - Référentiel Métier Compétence</li>
<li><strong>RF</strong> - Référentiel de formation</li>
<li><strong>REVA</strong> - Référentiel d'évaluation</li>
<li><strong>GP</strong> - Guide pédagogique</li>
<li><strong>GOPM</strong> - Guide d'organisation pédagogique et matériel</li>
</ul>
<p>Vous pouvez ajouter de nouveaux référentiels, rechercher des référentiels existants par secteur, métier, niveau de qualification ou année d'édition, et télécharger les documents associés.</p>
<div style="margin-top: 2rem; display: flex; gap: 1rem; flex-wrap: wrap;">
<a href="#" class="btn btn-accent nav-link" data-page="add">
<i class="fas fa-plus-circle"></i> Ajouter un référentiel
</a>
<a href="#" class="btn nav-link" data-page="browse">
<i class="fas fa-search"></i> Parcourir les référentiels
</a>
<a href="#" class="btn nav-link" data-page="search">
<i class="fas fa-filter"></i> Recherche avancée
</a>
</div>
</div>
<div class="card">
<h3 style="margin-bottom: 1rem;">Statistiques</h3>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
<div style="text-align: center; padding: 1rem; background-color: #e8f4fc; border-radius: 8px;">
<div style="font-size: 2rem; font-weight: bold; color: var(--secondary-color);">24</div>
<div>Référentiels au total</div>
</div>
<div style="text-align: center; padding: 1rem; background-color: #e8f6ef; border-radius: 8px;">
<div style="font-size: 2rem; font-weight: bold; color: var(--success-color);">8</div>
<div>Métiers du secteur primaire</div>
</div>
<div style="text-align: center; padding: 1rem; background-color: #fef5e7; border-radius: 8px;">
<div style="font-size: 2rem; font-weight: bold; color: var(--warning-color);">10</div>
<div>Métiers du secteur secondaire</div>
</div>
<div style="text-align: center; padding: 1rem; background-color: #fdedec; border-radius: 8px;">
<div style="font-size: 2rem; font-weight: bold; color: var(--danger-color);">6</div>
<div>Métiers du secteur tertiaire</div>
</div>
</div>
</div>
</div>
<!-- Add Referential Page -->
<div id="add-page" class="page hidden">
<h2 class="page-title">Ajouter un nouveau référentiel</h2>
<div class="info-message">
<i class="fas fa-info-circle" style="color: var(--secondary-color);"></i>
<span>Les 6 documents PDF ne sont pas obligatoires. Vous pouvez ajouter les documents disponibles maintenant ou plus tard.</span>
</div>
<div class="card">
<form id="add-referential-form">
<div class="form-row">
<div class="form-group">
<label for="referentiel-name">Nom du référentiel *</label>
<input type="text" id="referentiel-name" class="form-control" required>
</div>
<div class="form-group">
<label for="sector">Secteur de métier *</label>
<select id="sector" class="form-control" required>
<option value="">Sélectionner un secteur</option>
<option value="primaire">Primaire</option>
<option value="secondaire">Secondaire</option>
<option value="tertiaire">Tertiaire</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="metier">Métier/Spécialité *</label>
<input type="text" id="metier" class="form-control" required>
</div>
<div class="form-group">
<label for="qualification">Niveau de qualification *</label>
<div class="qualification-container">
<select id="qualification" class="form-control" required>
<option value="">Sélectionner un niveau</option>
<option value="CAP">CAP</option>
<option value="BAC">BAC</option>
<option value="BAC+2">BAC+2</option>
<option value="BAC+3">BAC+3</option>
<option value="BAC+5">BAC+5</option>
<option value="autre">Autre (saisir manuellement)</option>
</select>
<button type="button" class="btn btn-warning" id="add-qualification-btn" style="display: none;">
<i class="fas fa-plus"></i> Ajouter
</button>
</div>
</div>
</div>
<div id="custom-qualification-group" class="form-group" style="display: none;">
<label for="custom-qualification">Saisir le niveau de qualification *</label>
<input type="text" id="custom-qualification" class="form-control" placeholder="Ex: BAC+4, Niveau 5, etc.">
</div>
<div class="form-row">
<div class="form-group">
<label for="edition-year">Année d'édition *</label>
<input type="number" id="edition-year" class="form-control" min="2000" max="2030" value="2023" required>
</div>
<div class="form-group">
<label for="status">Statut</label>
<select id="status" class="form-control">
<option value="actif">Actif</option>
<option value="archivé">Archivé</option>
<option value="en révision">En révision</option>
</select>
</div>
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea id="description" class="form-control" rows="4"></textarea>
</div>
<div class="form-group">
<label>Téléchargement des documents PDF (optionnel)</label>
<p style="margin-bottom: 1rem; color: #666; font-size: 0.9rem;">Vous pouvez ajouter jusqu'à 6 documents PDF pour ce référentiel. Chaque document doit être nommé correctement.</p>
<div id="required-documents-list">
<div style="background-color: #f8f9fa; padding: 1rem; border-radius: 4px; margin-bottom: 1rem;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
<span><strong>1. RAST</strong> - Rapport d'analyse de la situation de travail</span>
<span class="document-required">Optionnel</span>
</div>
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
<span><strong>2. RMC</strong> - Référentiel Métier Compétence</span>
<span class="document-required">Optionnel</span>
</div>
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
<span><strong>3. RF</strong> - Référentiel de formation</span>
<span class="document-required">Optionnel</span>
</div>
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
<span><strong>4. REVA</strong> - Référentiel d'évaluation</span>
<span class="document-required">Optionnel</span>
</div>
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
<span><strong>5. GP</strong> - Guide pédagogique</span>
<span class="document-required">Optionnel</span>
</div>
<div style="display: flex; justify-content: space-between; align-items: center;">
<span><strong>6. GOPM</strong> - Guide d'organisation pédagogique et matériel</span>
<span class="document-required">Optionnel</span>
</div>
</div>
</div>
<div id="file-upload-area" class="file-upload-area">
<i class="fas fa-cloud-upload-alt"></i>
<p>Glissez-déposez vos fichiers PDF ici ou cliquez pour sélectionner</p>
<input type="file" id="file-input" multiple accept=".pdf" style="display: none;">
</div>
<div id="file-list" class="file-list">
<!-- Les fichiers sélectionnés apparaîtront ici -->
</div>
<div id="upload-progress" style="margin-top: 1rem; display: none;">
<div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
<span>Progression du téléchargement</span>
<span id="progress-percentage">0%</span>
</div>
<div style="height: 10px; background-color: #eee; border-radius: 5px; overflow: hidden;">
<div id="progress-bar" style="height: 100%; width: 0%; background-color: var(--accent-color); transition: width 0.3s;"></div>
</div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-accent btn-block">
<i class="fas fa-save"></i> Enregistrer le référentiel
</button>
</div>
</form>
</div>
</div>
<!-- Browse Referentials Page -->
<div id="browse-page" class="page hidden">
<h2 class="page-title">Parcourir les référentiels</h2>
<div class="filters">
<div class="filter-group">
<label for="filter-sector">Filtrer par secteur</label>
<select id="filter-sector" class="form-control">
<option value="">Tous les secteurs</option>
<option value="primaire">Primaire</option>
<option value="secondaire">Secondaire</option>
<option value="tertiaire">Tertiaire</option>
</select>
</div>
<div class="filter-group">
<label for="filter-qualification">Filtrer par niveau</label>
<select id="filter-qualification" class="form-control">
<option value="">Tous les niveaux</option>
<!-- Les niveaux seront générés dynamiquement -->
</select>
</div>
<div class="filter-group">
<label for="filter-year">Filtrer par année</label>
<select id="filter-year" class="form-control">
<option value="">Toutes les années</option>
<option value="2023">2023</option>
<option value="2022">2022</option>
<option value="2021">2021</option>
<option value="2020">2020</option>
</select>
</div>
<div class="filter-group">
<label for="sort-by">Trier par</label>
<select id="sort-by" class="form-control">
<option value="name">Nom (A-Z)</option>
<option value="year">Année (récente d'abord)</option>
<option value="sector">Secteur</option>
</select>
</div>
</div>
<div class="referentials-list" id="referentials-list">
<!-- Les référentiels seront générés ici par JavaScript -->
</div>
<div class="page-navigation">
<a href="#" class="active">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">Suivant</a>
</div>
</div>
<!-- Search Page -->
<div id="search-page" class="page hidden">
<h2 class="page-title">Recherche avancée</h2>
<div class="card">
<div class="search-box">
<input type="text" id="search-query" placeholder="Rechercher un référentiel, un métier, une spécialité...">
<button class="btn" id="search-button">
<i class="fas fa-search"></i> Rechercher
</button>
</div>
<div style="display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem;">
<div style="flex: 1; min-width: 300px;">
<h3 style="margin-bottom: 1rem; color: var(--primary-color);">Options de recherche</h3>
<div class="form-group">
<label for="search-sector">Secteur</label>
<select id="search-sector" class="form-control">
<option value="">Tous les secteurs</option>
<option value="primaire">Primaire</option>
<option value="secondaire">Secondaire</option>
<option value="tertiaire">Tertiaire</option>
</select>
</div>
<div class="form-group">
<label for="search-qualification">Niveau de qualification</label>
<select id="search-qualification" class="form-control">
<option value="">Tous les niveaux</option>
<!-- Les niveaux seront générés dynamiquement -->
</select>
</div>
<div class="form-row">
<div class="form-group">
<label for="search-year-from">Année d'édition (de)</label>
<input type="number" id="search-year-from" class="form-control" min="2000" max="2030" placeholder="2000">
</div>
<div class="form-group">
<label for="search-year-to">Année d'édition (à)</label>
<input type="number" id="search-year-to" class="form-control" min="2000" max="2030" placeholder="2023">
</div>
</div>
<button class="btn btn-accent btn-block" id="apply-filters-btn">
<i class="fas fa-filter"></i> Appliquer les filtres
</button>
</div>
<div style="flex: 2; min-width: 300px;">
<h3 style="margin-bottom: 1rem; color: var(--primary-color);">Résultats de recherche</h3>
<div id="search-results">
<p style="text-align: center; padding: 2rem; color: #666;">
<i class="fas fa-search" style="font-size: 3rem; margin-bottom: 1rem; display: block; color: #ddd;"></i>
Utilisez le formulaire pour rechercher des référentiels
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Referential Details Page -->
<div id="details-page" class="page hidden">
<h2 class="page-title" id="details-title">Détails du référentiel</h2>
<div class="card">
<div class="referentiel-header">
<div>
<h3 id="referentiel-full-name" style="color: var(--primary-color); margin-bottom: 0.5rem;"></h3>
<span id="referentiel-sector-badge" class="referentiel-sector"></span>
</div>
<div>
<a href="#" class="btn btn-small" id="back-to-browse">
<i class="fas fa-arrow-left"></i> Retour
</a>
</div>
</div>
<div class="referentiel-details">
<span><strong>Métier/Spécialité:</strong> <span id="referentiel-metier"></span></span>
<span><strong>Niveau de qualification:</strong> <span id="referentiel-qualification"></span></span>
<span><strong>Année d'édition:</strong> <span id="referentiel-year"></span></span>
<span><strong>Statut:</strong> <span id="referentiel-status"></span></span>
<span><strong>Description:</strong> <span id="referentiel-description"></span></span>
</div>
<div class="documents-list">
<h4>Documents disponibles</h4>
<div id="referentiel-documents">
<!-- Les documents seront chargés ici -->
</div>
<div id="no-documents-message" style="display: none; text-align: center; padding: 2rem; color: #666;">
<i class="fas fa-file-pdf" style="font-size: 3rem; margin-bottom: 1rem; display: block; color: #ddd;"></i>
Aucun document n'est disponible pour ce référentiel.
</div>
</div>
<div style="margin-top: 2rem; text-align: center;">
<button class="btn btn-accent" id="download-all-btn" style="display: none;">
<i class="fas fa-download"></i> Télécharger tous les documents (ZIP)
</button>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer>
<div class="container footer-content">
<div>
<p>© 2023 Répertoire de Référentiels de Formation. Tous droits réservés.</p>
</div>
<div class="footer-links">
<a href="#">Mentions légales</a>
<a href="#">Politique de confidentialité</a>
<a href="#">Contact</a>
</div>
</div>
</footer>
<script>
// Données de démonstration pour les référentiels avec les 6 documents corrigés
let referentielsData = [
{
id: 1,
name: "Référentiel Agriculteur",
sector: "primaire",
metier: "Agriculture",
qualification: "BAC",
year: 2023,
status: "actif",
description: "Formation complète pour le métier d'agriculteur avec spécialisation en agriculture durable.",
documents: [
{ name: "Rapport d'analyse de la situation de travail", type: "RAST", code: "RAST" },
{ name: "Référentiel Métier Compétence", type: "RMC", code: "RMC" },
{ name: "Référentiel de formation", type: "RF", code: "RF" },
{ name: "Référentiel d'évaluation", type: "REVA", code: "REVA" },
{ name: "Guide pédagogique", type: "GP", code: "GP" },
{ name: "Guide d'organisation pédagogique et matériel", type: "GOPM", code: "GOPM" }
]
},
{
id: 2,
name: "Référentiel Électricien",
sector: "secondaire",
metier: "Électricité",
qualification: "CAP",
year: 2022,
status: "actif",
description: "Formation pour devenir électricien avec spécialisation en installations domestiques.",
documents: [
{ name: "Rapport d'analyse de la situation de travail", type: "RAST", code: "RAST" },
{ name: "Référentiel Métier Compétence", type: "RMC", code: "RMC" },
{ name: "Référentiel de formation", type: "RF", code: "RF" },
{ name: "Référentiel d'évaluation", type: "REVA", code: "REVA" },
{ name: "Guide pédagogique", type: "GP", code: "GP" },
{ name: "Guide d'organisation pédagogique et matériel", type: "GOPM", code: "GOPM" }
]
},
{
id: 3,
name: "Référentiel Comptable",
sector: "tertiaire",
metier: "Comptabilité",
qualification: "BAC+3",
year: 2023,
status: "actif",
description: "Formation complète en comptabilité et gestion d'entreprise.",
documents: [
{ name: "Rapport d'analyse de la situation de travail", type: "RAST", code: "RAST" },
{ name: "Référentiel Métier Compétence", type: "RMC", code: "RMC" },
{ name: "Référentiel de formation", type: "RF", code: "RF" },
{ name: "Référentiel d'évaluation", type: "REVA", code: "REVA" },
{ name: "Guide pédagogique", type: "GP", code: "GP" },
{ name: "Guide d'organisation pédagogique et matériel", type: "GOPM", code: "GOPM" }
]
},
{
id: 4,
name: "Référentiel Mécanicien Auto",
sector: "secondaire",
metier: "Mécanique automobile",
qualification: "BAC",
year: 2021,
status: "en révision",
description: "Formation en mécanique automobile avec spécialisation en véhicules récents.",
documents: [
{ name: "Rapport d'analyse de la situation de travail", type: "RAST", code: "RAST" },
{ name: "Référentiel Métier Compétence", type: "RMC", code: "RMC" },
{ name: "Référentiel de formation", type: "RF", code: "RF" },
{ name: "Référentiel d'évaluation", type: "REVA", code: "REVA" },
{ name: "Guide pédagogique", type: "GP", code: "GP" }
// Note: Ce référentiel n'a pas le document GOPM pour démontrer qu'ils sont optionnels
]
}
];
// Liste des niveaux de qualification disponibles
let qualificationLevels = ["CAP", "BAC", "BAC+2", "BAC+3", "BAC+5"];
// État de l'application
let currentPage = 'home';
let selectedFiles = [];
let showSuccessAlert = false;
// Éléments DOM
const pages = document.querySelectorAll('.page');
const navLinks = document.querySelectorAll('.nav-link');
const mobileMenuBtn = document.getElementById('mobileMenuBtn');
const mainNav = document.getElementById('mainNav');
const referentialsList = document.getElementById('referentials-list');
const fileUploadArea = document.getElementById('file-upload-area');
const fileInput = document.getElementById('file-input');
const fileList = document.getElementById('file-list');
const addReferentialForm = document.getElementById('add-referential-form');
const searchButton = document.getElementById('search-button');
const applyFiltersBtn = document.getElementById('apply-filters-btn');
const qualificationSelect = document.getElementById('qualification');
const addQualificationBtn = document.getElementById('add-qualification-btn');
const customQualificationGroup = document.getElementById('custom-qualification-group');
const customQualificationInput = document.getElementById('custom-qualification');
// Initialisation
document.addEventListener('DOMContentLoaded', function() {
// Initialiser la navigation
initNavigation();
// Initialiser la page de parcours
renderReferentials(referentielsData);
// Initialiser les listes de niveaux de qualification
updateQualificationLists();
// Initialiser les écouteurs d'événements pour les filtres
initFilters();
// Initialiser le téléchargement de fichiers
initFileUpload();
// Initialiser le formulaire d'ajout
initAddForm();
// Initialiser la recherche
initSearch();
// Gérer la sélection de niveau de qualification
initQualificationSelection();
// Vérifier si on doit afficher une alerte de succès
checkForSuccessAlert();
});
// Navigation entre les pages
function initNavigation() {
// Navigation par liens
navLinks.forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
// Retirer la classe active de tous les liens
navLinks.forEach(l => l.classList.remove('active'));
// Ajouter la classe active au lien cliqué
this.classList.add('active');
// Cacher toutes les pages
pages.forEach(page => page.classList.add('hidden'));
// Afficher la page correspondante
const pageId = this.getAttribute('data-page');
showPage(pageId);
// Fermer le menu mobile si ouvert
if (window.innerWidth <= 768) {
mainNav.style.display = 'none';
}
});
});
// Bouton de menu mobile
mobileMenuBtn.addEventListener('click', function() {
if (mainNav.style.display === 'block') {
mainNav.style.display = 'none';
} else {
mainNav.style.display = 'block';
}
});
// Gestion du bouton "Retour" dans la page de détails
document.getElementById('back-to-browse').addEventListener('click', function(e) {
e.preventDefault();
// Retirer la classe active de tous les liens
navLinks.forEach(l => l.classList.remove('active'));
// Ajouter la classe active au lien "Parcourir"
document.querySelector('[data-page="browse"]').classList.add('active');
// Afficher la page de parcours
showPage('browse');
});
}
// Afficher une page spécifique
function showPage(pageId) {
currentPage = pageId;
const pageElement = document.getElementById(pageId + '-page');
if (pageElement) {
pages.forEach(page => page.classList.add('hidden'));
pageElement.classList.remove('hidden');
// Si on affiche la page de détails, il faut d'abord sélectionner un référentiel
if (pageId === 'details') {
// Par défaut, afficher le premier référentiel
showReferentialDetails(referentielsData[0]);
}
// Si on affiche la page de recherche, initialiser les résultats
if (pageId === 'search') {
performSearch();
}
}
}
// Initialiser la sélection de niveau de qualification
function initQualificationSelection() {
// Gérer le changement dans la liste déroulante
qualificationSelect.addEventListener('change', function() {
if (this.value === 'autre') {
// Afficher le champ de saisie manuelle
customQualificationGroup.style.display = 'block';
addQualificationBtn.style.display = 'block';
customQualificationInput.required = true;
} else {
// Cacher le champ de saisie manuelle
customQualificationGroup.style.display = 'none';
addQualificationBtn.style.display = 'none';
customQualificationInput.required = false;
}
});
// Gérer le clic sur le bouton "Ajouter"
addQualificationBtn.addEventListener('click', function() {
const customQualification = customQualificationInput.value.trim();
if (customQualification) {
// Ajouter le nouveau niveau à la liste
if (!qualificationLevels.includes(customQualification)) {
qualificationLevels.push(customQualification);
// Mettre à jour les listes déroulantes
updateQualificationLists();
// Sélectionner le nouveau niveau
qualificationSelect.value = customQualification;
// Cacher le champ de saisie manuelle
customQualificationGroup.style.display = 'none';
addQualificationBtn.style.display = 'none';
customQualificationInput.required = false;
// Réinitialiser le champ
customQualificationInput.value = '';
// Afficher un message de confirmation
showTemporaryAlert('Niveau de qualification ajouté avec succès!', 'success');
} else {
alert('Ce niveau de qualification existe déjà dans la liste.');
}
} else {
alert('Veuillez saisir un niveau de qualification.');
}
});
}
// Mettre à jour les listes déroulantes des niveaux de qualification
function updateQualificationLists() {
// Trier les niveaux
qualificationLevels.sort();
// Mettre à jour la liste dans le formulaire d'ajout
const qualificationSelect = document.getElementById('qualification');
const existingOptions = qualificationSelect.querySelectorAll('option:not([value=""]):not([value="autre"])');
// Supprimer les options existantes (sauf "Sélectionner" et "Autre")
existingOptions.forEach(option => option.remove());
// Ajouter les options triées
qualificationLevels.forEach(level => {
const option = document.createElement('option');
option.value = level;
option.textContent = level;
qualificationSelect.insertBefore(option, qualificationSelect.querySelector('option[value="autre"]'));
});
// Mettre à jour les listes dans les filtres
const filterQualification = document.getElementById('filter-qualification');
const searchQualification = document.getElementById('search-qualification');
// Vider les options existantes (sauf "Tous les niveaux")
[filterQualification, searchQualification].forEach(select => {
const existingFilterOptions = select.querySelectorAll('option:not([value=""])');
existingFilterOptions.forEach(option => option.remove());
// Ajouter les options triées
qualificationLevels.forEach(level => {
const option = document.createElement('option');
option.value = level;
option.textContent = level;
select.appendChild(option);
});
});
}
// Afficher les détails d'un référentiel
function showReferentialDetails(referentiel) {
document.getElementById('referentiel-full-name').textContent = referentiel.name;
document.getElementById('referentiel-metier').textContent = referentiel.metier;
document.getElementById('referentiel-qualification').textContent = referentiel.qualification;
document.getElementById('referentiel-year').textContent = referentiel.year;
document.getElementById('referentiel-status').textContent = referentiel.status;
document.getElementById('referentiel-description').textContent = referentiel.description;
// Mettre à jour le badge du secteur
const sectorBadge = document.getElementById('referentiel-sector-badge');
sectorBadge.textContent = referentiel.sector.charAt(0).toUpperCase() + referentiel.sector.slice(1);
// Mettre à jour la couleur du badge selon le secteur
sectorBadge.style.backgroundColor = getSectorColor(referentiel.sector);
// Mettre à jour le titre de la page
document.getElementById('details-title').textContent = `Détails: ${referentiel.name}`;
// Afficher les documents
const documentsContainer = document.getElementById('referentiel-documents');
const noDocumentsMessage = document.getElementById('no-documents-message');
const downloadAllBtn = document.getElementById('download-all-btn');
if (referentiel.documents && referentiel.documents.length > 0) {
documentsContainer.innerHTML = '';
noDocumentsMessage.style.display = 'none';
downloadAllBtn.style.display = 'inline-block';
referentiel.documents.forEach(doc => {
const docElement = document.createElement('div');
docElement.className = 'document-item';
docElement.innerHTML = `
<div>
<i class="fas fa-file-pdf" style="color: #e74c3c; margin-right: 0.5rem;"></i>
${doc.name}
<span class="document-type">${doc.code}</span>
</div>
<a href="#" class="btn btn-small download-doc-btn" data-code="${doc.code}">
<i class="fas fa-download"></i> Télécharger
</a>
`;
documentsContainer.appendChild(docElement);
});
// Ajouter des écouteurs d'événements aux boutons de téléchargement
document.querySelectorAll('.download-doc-btn').forEach(button => {
button.addEventListener('click', function(e) {
e.preventDefault();
const docCode = this.getAttribute('data-code');
alert(`Téléchargement du document ${docCode} pour le référentiel "${referentiel.name}"`);
// Ici, vous implémenteriez le téléchargement réel du fichier
});
});
} else {
documentsContainer.innerHTML = '';
noDocumentsMessage.style.display = 'block';
downloadAllBtn.style.display = 'none';
}
// Afficher la page de détails
showPage('details');
}
// Rendu des référentiels sur la page de parcours
function renderReferentials(referentiels) {
referentialsList.innerHTML = '';
if (referentiels.length === 0) {
referentialsList.innerHTML = `
<div style="grid-column: 1 / -1; text-align: center; padding: 3rem;">
<i class="fas fa-search" style="font-size: 3rem; color: #ddd; margin-bottom: 1rem;"></i>
<p style="color: #666; font-size: 1.1rem;">Aucun référentiel ne correspond aux critères de recherche.</p>
</div>
`;
return;
}
referentiels.forEach(referentiel => {
const card = document.createElement('div');
card.className = 'card referentiel-card';
const sectorColor = getSectorColor(referentiel.sector);
const documentCount = referentiel.documents ? referentiel.documents.length : 0;
card.innerHTML = `
<div class="referentiel-header">
<div class="referentiel-title">${referentiel.name}</div>
<span class="referentiel-sector" style="background-color: ${sectorColor}">${referentiel.sector.charAt(0).toUpperCase() + referentiel.sector.slice(1)}</span>
</div>
<div class="referentiel-details">
<span><strong>Métier:</strong> ${referentiel.metier}</span>
<span><strong>Niveau:</strong> ${referentiel.qualification}</span>
<span><strong>Année:</strong> ${referentiel.year}</span>
<span><strong>Statut:</strong> ${referentiel.status}</span>
</div>
<p style="margin-top: 0.5rem; font-size: 0.9rem;">${referentiel.description}</p>
<div style="margin-top: 1rem;">
<div style="font-size: 0.85rem; color: #666; margin-bottom: 0.5rem;">
<i class="fas fa-file-pdf" style="color: ${documentCount > 0 ? '#e74c3c' : '#999'}"></i>
${documentCount} document(s) PDF
</div>
</div>
<div style="margin-top: 1rem; display: flex; justify-content: space-between;">
<button class="btn btn-small view-details-btn" data-id="${referentiel.id}">
<i class="fas fa-eye"></i> Voir détails
</button>
${documentCount > 0 ?
`<button class="btn btn-small btn-accent download-btn" data-id="${referentiel.id}">
<i class="fas fa-download"></i> Télécharger
</button>` :
`<button class="btn btn-small" disabled style="opacity: 0.6;">
<i class="fas fa-download"></i> Aucun document
</button>`
}
</div>
`;
referentialsList.appendChild(card);
});
// Ajouter des écouteurs d'événements aux boutons "Voir détails"
document.querySelectorAll('.view-details-btn').forEach(button => {
button.addEventListener('click', function() {
const referentielId = parseInt(this.getAttribute('data-id'));
const referentiel = referentielsData.find(r => r.id === referentielId);
if (referentiel) {
// Retirer la classe active de tous les liens
navLinks.forEach(l => l.classList.remove('active'));
// Afficher la page de détails
showReferentialDetails(referentiel);
}
});
});
// Ajouter des écouteurs d'événements aux boutons "Télécharger"
document.querySelectorAll('.download-btn:not(:disabled)').forEach(button => {
button.addEventListener('click', function() {
const referentielId = parseInt(this.getAttribute('data-id'));
const referentiel = referentielsData.find(r => r.id === referentielId);
if (referentiel) {
alert(`Téléchargement de tous les documents du référentiel "${referentiel.name}" au format ZIP`);
// Ici, vous implémenteriez le téléchargement réel de l'archive ZIP
}
});
});
}
// Initialiser les filtres
function initFilters() {
const filterSector = document.getElementById('filter-sector');
const filterQualification = document.getElementById('filter-qualification');
const filterYear = document.getElementById('filter-year');
const sortBy = document.getElementById('sort-by');
const applyFilters = () => {
let filtered = [...referentielsData];
// Filtrer par secteur
if (filterSector.value) {
filtered = filtered.filter(r => r.sector === filterSector.value);
}
// Filtrer par qualification
if (filterQualification.value) {
filtered = filtered.filter(r => r.qualification === filterQualification.value);
}
// Filtrer par année
if (filterYear.value) {
filtered = filtered.filter(r => r.year === parseInt(filterYear.value));
}
// Trier
if (sortBy.value === 'name') {
filtered.sort((a, b) => a.name.localeCompare(b.name));
} else if (sortBy.value === 'year') {
filtered.sort((a, b) => b.year - a.year);
} else if (sortBy.value === 'sector') {
filtered.sort((a, b) => a.sector.localeCompare(b.sector));
}
renderReferentials(filtered);
};
filterSector.addEventListener('change', applyFilters);
filterQualification.addEventListener('change', applyFilters);
filterYear.addEventListener('change', applyFilters);
sortBy.addEventListener('change', applyFilters);
}
// Initialiser le téléchargement de fichiers
function initFileUpload() {
// Cliquer sur la zone de dépôt pour ouvrir le sélecteur de fichiers
fileUploadArea.addEventListener('click', function() {
fileInput.click();
});
// Gérer la sélection de fichiers
fileInput.addEventListener('change', function() {
handleFiles(this.files);
});
// Gérer le glisser-déposer
fileUploadArea.addEventListener('dragover', function(e) {
e.preventDefault();
this.style.borderColor = 'var(--secondary-color)';
this.style.backgroundColor = 'rgba(52, 152, 219, 0.05)';
});
fileUploadArea.addEventListener('dragleave', function() {
this.style.borderColor = '#ddd';
this.style.backgroundColor = 'transparent';
});
fileUploadArea.addEventListener('drop', function(e) {
e.preventDefault();
this.style.borderColor = '#ddd';
this.style.backgroundColor = 'transparent';
if (e.dataTransfer.files.length) {
handleFiles(e.dataTransfer.files);
}
});
}
// Gérer les fichiers sélectionnés
function handleFiles(files) {
const uploadProgress = document.getElementById('upload-progress');
const progressBar = document.getElementById('progress-bar');
const progressPercentage = document.getElementById('progress-percentage');
// Afficher la barre de progression
uploadProgress.style.display = 'block';
progressBar.style.width = '0%';
progressPercentage.textContent = '0%';
// Simuler un téléchargement progressif
let progress = 0;
const interval = setInterval(() => {
progress += 10;
progressBar.style.width = `${progress}%`;
progressPercentage.textContent = `${progress}%`;
if (progress >= 100) {
clearInterval(interval);
// Cacher la barre de progression après un court délai
setTimeout(() => {
uploadProgress.style.display = 'none';
}, 1000);
}
}, 100);
for (let i = 0; i < files.length; i++) {
const file = files[i];
// Vérifier que c'est un PDF
if (file.type === 'application/pdf') {
// Ajouter aux fichiers sélectionnés
selectedFiles.push(file);
// Afficher dans la liste
const fileItem = document.createElement('div');
fileItem.className = 'file-item';
fileItem.innerHTML = `
<div>
<i class="fas fa-file-pdf" style="color: #e74c3c; margin-right: 0.5rem;"></i>
${file.name}
<span style="font-size: 0.8rem; color: #666; margin-left: 0.5rem;">(${(file.size / 1024 / 1024).toFixed(2)} MB)</span>
</div>
<button class="btn btn-small btn-danger remove-file-btn" data-name="${file.name}">
<i class="fas fa-times"></i>
</button>
`;
fileList.appendChild(fileItem);
} else {
alert('Seuls les fichiers PDF sont autorisés.');
}
}
// Ajouter des écouteurs d'événements aux boutons de suppression
document.querySelectorAll('.remove-file-btn').forEach(button => {
button.addEventListener('click', function() {
const fileName = this.getAttribute('data-name');
// Retirer le fichier de la liste
selectedFiles = selectedFiles.filter(file => file.name !== fileName);
// Retirer l'élément de l'interface
this.parentElement.remove();
});
});
}
// Initialiser le formulaire d'ajout
function initAddForm() {
addReferentialForm.addEventListener('submit', function(e) {
e.preventDefault();
// Récupérer les valeurs du formulaire
const name = document.getElementById('referentiel-name').value;
const sector = document.getElementById('sector').value;
const metier = document.getElementById('metier').value;
const year = parseInt(document.getElementById('edition-year').value);
const status = document.getElementById('status').value;
const description = document.getElementById('description').value;
// Déterminer le niveau de qualification
let qualification;
if (qualificationSelect.value === 'autre') {
qualification = customQualificationInput.value.trim();
if (!qualification) {
alert('Veuillez saisir un niveau de qualification.');
return;
}
// Ajouter le nouveau niveau à la liste s'il n'existe pas déjà
if (!qualificationLevels.includes(qualification)) {
qualificationLevels.push(qualification);
updateQualificationLists();
}
} else {
qualification = qualificationSelect.value;
}
// Créer les documents à partir des fichiers sélectionnés
const documents = [];
const documentTypes = ["RAST", "RMC", "RF", "REVA", "GP", "GOPM"];
const documentNames = [
"Rapport d'analyse de la situation de travail",
"Référentiel Métier Compétence",
"Référentiel de formation",
"Référentiel d'évaluation",
"Guide pédagogique",
"Guide d'organisation pédagogique et matériel"
];
// Pour chaque fichier sélectionné, créer un document
// Note: Dans une application réelle, vous associeriez les fichiers aux types de documents
for (let i = 0; i < Math.min(selectedFiles.length, 6); i++) {
documents.push({
name: documentNames[i],
type: documentTypes[i],
code: documentTypes[i]
});
}
// Créer un nouvel objet référentiel
const newReferentiel = {
id: referentielsData.length + 1,
name,
sector,
metier,
qualification,
year,
status,
description,
documents: documents
};
// Ajouter aux données
referentielsData.push(newReferentiel);
// Réinitialiser le formulaire
addReferentialForm.reset();
selectedFiles = [];
fileList.innerHTML = '';
customQualificationGroup.style.display = 'none';
addQualificationBtn.style.display = 'none';
customQualificationInput.required = false;
// Marquer pour afficher l'alerte de succès
showSuccessAlert = true;
// Rediriger vers la page de parcours avec l'alerte
document.querySelector('[data-page="browse"]').click();
});
}
// Initialiser la recherche
function initSearch() {
searchButton.addEventListener('click', performSearch);
applyFiltersBtn.addEventListener('click', performSearch);
// Permettre la recherche avec la touche Entrée
document.getElementById('search-query').addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
performSearch();
}
});
}
// Exécuter une recherche
function performSearch() {
const searchQuery = document.getElementById('search-query').value.toLowerCase();
const searchSector = document.getElementById('search-sector').value;
const searchQualification = document.getElementById('search-qualification').value;
const searchYearFrom = document.getElementById('search-year-from').value;
const searchYearTo = document.getElementById('search-year-to').value;
let results = [...referentielsData];
// Filtrer par mot-clé
if (searchQuery) {
results = results.filter(r =>
r.name.toLowerCase().includes(searchQuery) ||
r.metier.toLowerCase().includes(searchQuery) ||
r.description.toLowerCase().includes(searchQuery)
);
}
// Filtrer par secteur
if (searchSector) {
results = results.filter(r => r.sector === searchSector);
}
// Filtrer par qualification
if (searchQualification) {
results = results.filter(r => r.qualification === searchQualification);
}
// Filtrer par année
if (searchYearFrom) {
results = results.filter(r => r.year >= parseInt(searchYearFrom));
}
if (searchYearTo) {
results = results.filter(r => r.year <= parseInt(searchYearTo));
}
// Afficher les résultats
displaySearchResults(results);
}
// Afficher les résultats de recherche
function displaySearchResults(results) {
const searchResults = document.getElementById('search-results');
if (results.length === 0) {
searchResults.innerHTML = `
<div style="text-align: center; padding: 2rem; color: #666;">
<i class="fas fa-search" style="font-size: 3rem; margin-bottom: 1rem; display: block; color: #ddd;"></i>
Aucun référentiel ne correspond à votre recherche.
</div>
`;
return;
}
let html = `<div style="display: grid; gap: 1rem;">`;
results.forEach(referentiel => {
const sectorColor = getSectorColor(referentiel.sector);
const documentCount = referentiel.documents ? referentiel.documents.length : 0;
html += `
<div style="background: white; border-radius: 8px; padding: 1.5rem; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem;">
<h4 style="color: var(--primary-color);">${referentiel.name}</h4>
<span class="referentiel-sector" style="background-color: ${sectorColor}">${referentiel.sector.charAt(0).toUpperCase() + referentiel.sector.slice(1)}</span>
</div>
<div style="margin-bottom: 1rem;">
<div><strong>Métier:</strong> ${referentiel.metier}</div>
<div><strong>Niveau:</strong> ${referentiel.qualification}</div>
<div><strong>Année:</strong> ${referentiel.year}</div>
<div><strong>Documents:</strong> ${documentCount} PDF</div>
</div>
<p style="font-size: 0.9rem; color: #666; margin-bottom: 1rem;">${referentiel.description}</p>
<div style="display: flex; gap: 0.5rem;">
<button class="btn btn-small view-details-search-btn" data-id="${referentiel.id}" style="flex: 1;">
<i class="fas fa-eye"></i> Voir détails
</button>
${documentCount > 0 ?
`<button class="btn btn-small btn-accent download-search-btn" data-id="${referentiel.id}" style="flex: 1;">
<i class="fas fa-download"></i> Télécharger
</button>` :
`<button class="btn btn-small" disabled style="flex: 1; opacity: 0.6;">
<i class="fas fa-download"></i> Aucun document
</button>`
}
</div>
</div>
`;
});
html += `</div>`;
searchResults.innerHTML = html;
// Ajouter des écouteurs d'événements aux boutons dans les résultats de recherche
document.querySelectorAll('.view-details-search-btn').forEach(button => {
button.addEventListener('click', function() {
const referentielId = parseInt(this.getAttribute('data-id'));
const referentiel = referentielsData.find(r => r.id === referentielId);
if (referentiel) {
// Retirer la classe active de tous les liens
navLinks.forEach(l => l.classList.remove('active'));
// Afficher la page de détails
showReferentialDetails(referentiel);
}
});
});
document.querySelectorAll('.download-search-btn:not(:disabled)').forEach(button => {
button.addEventListener('click', function() {
const referentielId = parseInt(this.getAttribute('data-id'));
const referentiel = referentielsData.find(r => r.id === referentielId);
if (referentiel) {
alert(`Téléchargement de tous les documents du référentiel "${referentiel.name}" au format ZIP`);
// Ici, vous implémenteriez le téléchargement réel de l'archive ZIP
}
});
});
}
// Obtenir la couleur associée à un secteur
function getSectorColor(sector) {
switch(sector) {
case 'primaire': return '#e8f6ef';
case 'secondaire': return '#fef5e7';
case 'tertiaire': return '#fdedec';
default: return '#e8f4fc';
}
}
// Adapter le menu pour les écrans mobiles
window.addEventListener('resize', function() {
if (window.innerWidth > 768) {
mainNav.style.display = 'block';
} else {
mainNav.style.display = 'none';
}
});
// Gestion du bouton "Télécharger tous les documents"
document.getElementById('download-all-btn').addEventListener('click', function() {
const referentielName = document.getElementById('referentiel-full-name').textContent;
alert(`Téléchargement de tous les documents du référentiel "${referentielName}" au format ZIP`);
// Ici, vous implémenteriez le téléchargement réel de l'archive ZIP
});
// Vérifier s'il faut afficher une alerte de succès
function checkForSuccessAlert() {
if (showSuccessAlert) {
// Créer et afficher l'alerte
const alertDiv = document.createElement('div');
alertDiv.className = 'alert alert-success';
alertDiv.innerHTML = `
<i class="fas fa-check-circle"></i>
<span>Référentiel ajouté avec succès! Vous pouvez maintenant le parcourir dans la liste.</span>
`;
// Insérer l'alerte en haut de la page de parcours
const browsePage = document.getElementById('browse-page');
const pageTitle = browsePage.querySelector('.page-title');
browsePage.insertBefore(alertDiv, pageTitle.nextSibling);
// Supprimer l'alerte après 5 secondes
setTimeout(() => {
alertDiv.remove();
}, 5000);
// Réinitialiser le drapeau
showSuccessAlert = false;
}
}
// Afficher une alerte temporaire
function showTemporaryAlert(message, type) {
const alertDiv = document.createElement('div');
alertDiv.className = `alert alert-${type}`;
alertDiv.innerHTML = `
<i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-triangle'}"></i>
<span>${message}</span>
`;
// Insérer l'alerte en haut de la page actuelle
const currentPageElement = document.getElementById(`${currentPage}-page`);
const pageTitle = currentPageElement.querySelector('.page-title');
currentPageElement.insertBefore(alertDiv, pageTitle.nextSibling);
// Supprimer l'alerte après 3 secondes
setTimeout(() => {
alertDiv.remove();
}, 3000);
}
</script>
</body>
</html>
