368 lines
24 KiB
HTML
368 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
|
|
xmlns:h="http://xmlns.jcp.org/jsf/html"
|
|
xmlns:f="http://xmlns.jcp.org/jsf/core"
|
|
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
|
|
xmlns:p="http://primefaces.org/ui"
|
|
template="/templates/main-template.xhtml">
|
|
|
|
<ui:param name="page" value="#{demandesAideBean}"/>
|
|
<ui:define name="title">Tutoriels Vidéo - UnionFlow</ui:define>
|
|
|
|
<ui:define name="content">
|
|
<div class="ui-fluid">
|
|
|
|
<!-- En-tête -->
|
|
<div class="grid mb-4">
|
|
<div class="col-12">
|
|
<div class="surface-card border-round p-4">
|
|
<div class="flex align-items-center justify-content-between mb-4">
|
|
<div>
|
|
<h2 class="text-900 font-bold text-4xl mb-2">
|
|
<i class="pi pi-video text-orange-500 mr-3"></i>
|
|
Tutoriels Vidéo
|
|
</h2>
|
|
<p class="text-600 text-lg mb-0">
|
|
Apprenez UnionFlow grâce à nos tutoriels vidéo étape par étape
|
|
</p>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<p:commandButton value="Playlist Complète"
|
|
styleClass="p-button-outlined"
|
|
icon="pi pi-play-circle" />
|
|
<p:commandButton value="Télécharger"
|
|
styleClass="p-button-primary p-button-outlined"
|
|
icon="pi pi-download" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Statistiques -->
|
|
<div class="grid">
|
|
<div class="col-12 lg:col-3">
|
|
<div class="surface-100 border-round p-4 text-center" style="min-height: 9rem">
|
|
<div class="text-2xl font-bold text-blue-500 mb-2">24</div>
|
|
<div class="text-900 font-semibold mb-1">Tutoriels</div>
|
|
<div class="text-600 text-sm">Disponibles</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 lg:col-3">
|
|
<div class="surface-100 border-round p-4 text-center" style="min-height: 9rem">
|
|
<div class="text-2xl font-bold text-green-500 mb-2">4h 32m</div>
|
|
<div class="text-900 font-semibold mb-1">Durée Totale</div>
|
|
<div class="text-600 text-sm">Contenu vidéo</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 lg:col-3">
|
|
<div class="surface-100 border-round p-4 text-center" style="min-height: 9rem">
|
|
<div class="text-2xl font-bold text-purple-500 mb-2">1,847</div>
|
|
<div class="text-900 font-semibold mb-1">Vues</div>
|
|
<div class="text-600 text-sm">Ce mois-ci</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 lg:col-3">
|
|
<div class="surface-100 border-round p-4 text-center" style="min-height: 9rem">
|
|
<div class="text-2xl font-bold text-orange-500 mb-2">4.8★</div>
|
|
<div class="text-900 font-semibold mb-1">Note Moyenne</div>
|
|
<div class="text-600 text-sm">Sur 156 avis</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filtrres et recherche -->
|
|
<div class="grid mb-4">
|
|
<div class="col-12">
|
|
<div class="surface-card border-round p-4">
|
|
<h:form id="filtresForm">
|
|
<div class="formgrid grid">
|
|
<div class="field col-12 md:col-4">
|
|
<label for="categorieFilter" class="block text-900 font-semibold mb-2">Catégorie</label>
|
|
<p:selectOneMenu id="categorieFilter" styleClass="w-full">
|
|
<f:selectItem itemLabel="Toutes les catégories" itemValue="" />
|
|
<f:selectItem itemLabel="Premiers Pas" itemValue="debutant" />
|
|
<f:selectItem itemLabel="Gestion des Membres" itemValue="membres" />
|
|
<f:selectItem itemLabel="Finances" itemValue="finances" />
|
|
<f:selectItem itemLabel="Événements" itemValue="evenements" />
|
|
<f:selectItem itemLabel="Administration" itemValue="admin" />
|
|
<f:selectItem itemLabel="Rapports" itemValue="rapports" />
|
|
</p:selectOneMenu>
|
|
</div>
|
|
<div class="field col-12 md:col-4">
|
|
<label for="dureeFilter" class="block text-900 font-semibold mb-2">Durée</label>
|
|
<p:selectOneMenu id="dureeFilter" styleClass="w-full">
|
|
<f:selectItem itemLabel="Toutes les durées" itemValue="" />
|
|
<f:selectItem itemLabel="Moins de 5 min" itemValue="court" />
|
|
<f:selectItem itemLabel="5-15 min" itemValue="moyen" />
|
|
<f:selectItem itemLabel="Plus de 15 min" itemValue="long" />
|
|
</p:selectOneMenu>
|
|
</div>
|
|
<div class="field col-12 md:col-4">
|
|
<label for="rechercheVideo" class="block text-900 font-semibold mb-2">Rechercher</label>
|
|
<p:inputText id="rechercheVideo"
|
|
placeholder="Titre, mots-clés..."
|
|
styleClass="w-full" />
|
|
</div>
|
|
</div>
|
|
</h:form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Liste des tutoriels par catégorie -->
|
|
<div class="grid mb-4">
|
|
<div class="col-12">
|
|
<div class="surface-card border-round p-4">
|
|
<h4 class="text-900 font-bold mb-4">
|
|
<i class="pi pi-play mr-2"></i>
|
|
Premiers Pas avec UnionFlow
|
|
</h4>
|
|
|
|
<div class="grid">
|
|
<!-- Tutoriel 1 -->
|
|
<div class="col-12 lg:col-6 xl:col-4">
|
|
<div class="surface-100 hover:surface-200 border-round transition-duration-200 cursor-pointer">
|
|
<div class="relative">
|
|
<div class="w-full h-12rem bg-primary-50 border-round-top flex align-items-center justify-content-center">
|
|
<i class="pi pi-play-circle text-6xl text-primary-500"></i>
|
|
</div>
|
|
<div class="absolute top-0 right-0 m-2">
|
|
<p:tag value="3:45" severity="info" styleClass="text-xs" />
|
|
</div>
|
|
<div class="absolute bottom-0 left-0 right-0 h-1rem bg-blue-500" style="width: 25%; opacity: 0.8;"></div>
|
|
</div>
|
|
<div class="p-3">
|
|
<h6 class="text-900 font-semibold mb-2">Première Connexion</h6>
|
|
<p class="text-600 text-sm mb-3">Découvrez comment vous connecter pour la première fois à UnionFlow</p>
|
|
<div class="flex align-items-center justify-content-between">
|
|
<div class="flex align-items-center gap-2">
|
|
<i class="pi pi-eye text-600 text-sm"></i>
|
|
<span class="text-600 text-sm">2,341 vues</span>
|
|
</div>
|
|
<div class="flex align-items-center gap-1">
|
|
<i class="pi pi-star-fill text-yellow-400"></i>
|
|
<span class="text-600 text-sm">4.9</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tutoriel 2 -->
|
|
<div class="col-12 lg:col-6 xl:col-4">
|
|
<div class="surface-100 hover:surface-200 border-round transition-duration-200 cursor-pointer">
|
|
<div class="relative">
|
|
<div class="w-full h-12rem bg-green-50 border-round-top flex align-items-center justify-content-center">
|
|
<i class="pi pi-play-circle text-6xl text-green-500"></i>
|
|
</div>
|
|
<div class="absolute top-0 right-0 m-2">
|
|
<p:tag value="7:22" severity="success" styleClass="text-xs" />
|
|
</div>
|
|
<div class="absolute bottom-0 left-0 right-0 h-1rem bg-blue-500" style="width: 100%; opacity: 0.8;"></div>
|
|
</div>
|
|
<div class="p-3">
|
|
<h6 class="text-900 font-semibold mb-2">Navigation dans l'Interface</h6>
|
|
<p class="text-600 text-sm mb-3">Tour complet de l'interface utilisateur et des menus principaux</p>
|
|
<div class="flex align-items-center justify-content-between">
|
|
<div class="flex align-items-center gap-2">
|
|
<i class="pi pi-eye text-600 text-sm"></i>
|
|
<span class="text-600 text-sm">1,876 vues</span>
|
|
</div>
|
|
<div class="flex align-items-center gap-1">
|
|
<i class="pi pi-star-fill text-yellow-400"></i>
|
|
<span class="text-600 text-sm">4.7</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tutoriel 3 -->
|
|
<div class="col-12 lg:col-6 xl:col-4">
|
|
<div class="surface-100 hover:surface-200 border-round transition-duration-200 cursor-pointer">
|
|
<div class="relative">
|
|
<div class="w-full h-12rem bg-orange-50 border-round-top flex align-items-center justify-content-center">
|
|
<i class="pi pi-play-circle text-6xl text-orange-500"></i>
|
|
</div>
|
|
<div class="absolute top-0 right-0 m-2">
|
|
<p:tag value="5:18" severity="warning" styleClass="text-xs" />
|
|
</div>
|
|
<div class="absolute bottom-0 left-0 right-0 h-1rem bg-blue-500" style="width: 60%; opacity: 0.8;"></div>
|
|
</div>
|
|
<div class="p-3">
|
|
<h6 class="text-900 font-semibold mb-2">Personnaliser son Profil</h6>
|
|
<p class="text-600 text-sm mb-3">Comment configurer vos informations personnelles et préférences</p>
|
|
<div class="flex align-items-center justify-content-between">
|
|
<div class="flex align-items-center gap-2">
|
|
<i class="pi pi-eye text-600 text-sm"></i>
|
|
<span class="text-600 text-sm">1,432 vues</span>
|
|
</div>
|
|
<div class="flex align-items-center gap-1">
|
|
<i class="pi pi-star-fill text-yellow-400"></i>
|
|
<span class="text-600 text-sm">4.8</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Gestion des Membres -->
|
|
<div class="grid mb-4">
|
|
<div class="col-12">
|
|
<div class="surface-card border-round p-4">
|
|
<h4 class="text-900 font-bold mb-4">
|
|
<i class="pi pi-users mr-2"></i>
|
|
Gestion des Membres
|
|
</h4>
|
|
|
|
<div class="grid">
|
|
<!-- Tutoriel Membre 1 -->
|
|
<div class="col-12 lg:col-6 xl:col-4">
|
|
<div class="surface-100 hover:surface-200 border-round transition-duration-200 cursor-pointer">
|
|
<div class="relative">
|
|
<div class="w-full h-12rem bg-blue-50 border-round-top flex align-items-center justify-content-center">
|
|
<i class="pi pi-play-circle text-6xl text-blue-500"></i>
|
|
</div>
|
|
<div class="absolute top-0 right-0 m-2">
|
|
<p:tag value="12:45" severity="info" styleClass="text-xs" />
|
|
</div>
|
|
<div class="absolute top-0 left-0 m-2">
|
|
<p:tag value="NOUVEAU" severity="danger" styleClass="text-xs" />
|
|
</div>
|
|
</div>
|
|
<div class="p-3">
|
|
<h6 class="text-900 font-semibold mb-2">Inscrire un Nouveau Membre</h6>
|
|
<p class="text-600 text-sm mb-3">Processus complet d'inscription d'un membre avec toutes les étapes</p>
|
|
<div class="flex align-items-center justify-content-between">
|
|
<div class="flex align-items-center gap-2">
|
|
<i class="pi pi-eye text-600 text-sm"></i>
|
|
<span class="text-600 text-sm">987 vues</span>
|
|
</div>
|
|
<div class="flex align-items-center gap-1">
|
|
<i class="pi pi-star-fill text-yellow-400"></i>
|
|
<span class="text-600 text-sm">5.0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tutoriel Membre 2 -->
|
|
<div class="col-12 lg:col-6 xl:col-4">
|
|
<div class="surface-100 hover:surface-200 border-round transition-duration-200 cursor-pointer">
|
|
<div class="relative">
|
|
<div class="w-full h-12rem bg-purple-50 border-round-top flex align-items-center justify-content-center">
|
|
<i class="pi pi-play-circle text-6xl text-purple-500"></i>
|
|
</div>
|
|
<div class="absolute top-0 right-0 m-2">
|
|
<p:tag value="8:33" severity="help" styleClass="text-xs" />
|
|
</div>
|
|
</div>
|
|
<div class="p-3">
|
|
<h6 class="text-900 font-semibold mb-2">Recherche Avancée</h6>
|
|
<p class="text-600 text-sm mb-3">Utiliser les filtres et critères de recherche pour trouver des membres</p>
|
|
<div class="flex align-items-center justify-content-between">
|
|
<div class="flex align-items-center gap-2">
|
|
<i class="pi pi-eye text-600 text-sm"></i>
|
|
<span class="text-600 text-sm">1,234 vues</span>
|
|
</div>
|
|
<div class="flex align-items-center gap-1">
|
|
<i class="pi pi-star-fill text-yellow-400"></i>
|
|
<span class="text-600 text-sm">4.6</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tutoriel Membre 3 -->
|
|
<div class="col-12 lg:col-6 xl:col-4">
|
|
<div class="surface-100 hover:surface-200 border-round transition-duration-200 cursor-pointer">
|
|
<div class="relative">
|
|
<div class="w-full h-12rem bg-teal-50 border-round-top flex align-items-center justify-content-center">
|
|
<i class="pi pi-play-circle text-6xl text-teal-500"></i>
|
|
</div>
|
|
<div class="absolute top-0 right-0 m-2">
|
|
<p:tag value="15:27" severity="success" styleClass="text-xs" />
|
|
</div>
|
|
</div>
|
|
<div class="p-3">
|
|
<h6 class="text-900 font-semibold mb-2">Export et Rapports Membres</h6>
|
|
<p class="text-600 text-sm mb-3">Générer des exports Excel et des rapports personnalisés</p>
|
|
<div class="flex align-items-center justify-content-between">
|
|
<div class="flex align-items-center gap-2">
|
|
<i class="pi pi-eye text-600 text-sm"></i>
|
|
<span class="text-600 text-sm">765 vues</span>
|
|
</div>
|
|
<div class="flex align-items-center gap-1">
|
|
<i class="pi pi-star-fill text-yellow-400"></i>
|
|
<span class="text-600 text-sm">4.9</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Playlist recommandées -->
|
|
<div class="grid">
|
|
<div class="col-12">
|
|
<div class="surface-card border-round p-4">
|
|
<h4 class="text-900 font-bold mb-4">
|
|
<i class="pi pi-bookmark mr-2"></i>
|
|
Playlists Recommandées
|
|
</h4>
|
|
|
|
<div class="grid">
|
|
<div class="col-12 lg:col-6">
|
|
<div class="surface-100 border-round p-4">
|
|
<div class="flex align-items-center mb-3">
|
|
<i class="pi pi-play-circle text-2xl text-primary mr-3"></i>
|
|
<div>
|
|
<h6 class="text-900 font-semibold mb-1">Formation Complète Débutant</h6>
|
|
<p class="text-600 text-sm mb-0">8 vidéos • 45 min</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-600 text-sm mb-3">
|
|
Parcours complet pour débuter avec UnionFlow, de la connexion à la première utilisation
|
|
</p>
|
|
<p:commandButton value="Commencer"
|
|
styleClass="p-button-primary p-button-sm w-full"
|
|
icon="pi pi-play" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 lg:col-6">
|
|
<div class="surface-100 border-round p-4">
|
|
<div class="flex align-items-center mb-3">
|
|
<i class="pi pi-cog text-2xl text-orange-500 mr-3"></i>
|
|
<div>
|
|
<h6 class="text-900 font-semibold mb-1">Administration Avancée</h6>
|
|
<p class="text-600 text-sm mb-0">12 vidéos • 2h 15min</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-600 text-sm mb-3">
|
|
Maîtrisez l'administration d'UnionFlow : utilisateurs, rôles, permissions et configuration
|
|
</p>
|
|
<p:commandButton value="Commencer"
|
|
styleClass="p-button-outlined p-button-sm w-full"
|
|
icon="pi pi-play" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</ui:define>
|
|
|
|
</ui:composition> |