Configure Maven repository for unionflow-server-api dependency
This commit is contained in:
dahoud
294
target/classes/META-INF/resources/pages/public/formulaires.xhtml
Normal file
294
target/classes/META-INF/resources/pages/public/formulaires.xhtml
Normal file
@@ -0,0 +1,294 @@
|
||||
<!DOCTYPE html>
|
||||
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:ui="http://java.sun.com/jsf/facelets"
|
||||
xmlns:f="http://java.sun.com/jsf/core"
|
||||
xmlns:h="http://java.sun.com/jsf/html"
|
||||
xmlns:p="http://primefaces.org/ui"
|
||||
template="/templates/public-template.xhtml">
|
||||
|
||||
<ui:define name="title">Nos Formulaires - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="head">
|
||||
<style>
|
||||
.formulaire-card {
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
.formulaire-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.formulaire-card.recommande {
|
||||
border-color: #10b981;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.formulaire-card.recommande::before {
|
||||
content: 'RECOMMANDÉ';
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: #10b981;
|
||||
color: white;
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.prix-badge {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.prix-periode {
|
||||
font-size: 0.9rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.fonctionnalite-active {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.fonctionnalite-inactive {
|
||||
color: #d1d5db;
|
||||
}
|
||||
|
||||
.toggle-facturation {
|
||||
background: #f3f4f6;
|
||||
border-radius: 8px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.facturation-option {
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.facturation-option.active {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.economie-badge {
|
||||
background: linear-gradient(135deg, #fbbf24, #f59e0b);
|
||||
color: white;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<!-- En-tête Hero -->
|
||||
<div class="surface-section px-4 py-8 md:px-6 lg:px-8">
|
||||
<div class="max-w-screen-lg mx-auto text-center">
|
||||
<div class="text-900 text-6xl font-bold mb-4">Choisissez votre formule</div>
|
||||
<div class="text-700 text-xl mb-6">
|
||||
Des solutions adaptées à chaque taille d'organisation
|
||||
</div>
|
||||
<div class="text-600 line-height-3 text-lg">
|
||||
Gérez efficacement votre association avec nos outils professionnels.
|
||||
Commencez gratuitement et évoluez selon vos besoins.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toggle Facturation -->
|
||||
<div class="surface-section px-4 py-4 md:px-6 lg:px-8 border-bottom-1 surface-border">
|
||||
<div class="max-w-screen-lg mx-auto">
|
||||
<div class="flex justify-content-center">
|
||||
<div class="toggle-facturation">
|
||||
<div class="flex">
|
||||
<div class="facturation-option #{formulaireBean.typeFacturationSelectionne.name() == 'MENSUEL' ? 'active' : ''}">
|
||||
<p:commandLink value="Mensuel"
|
||||
action="#{formulaireBean.setTypeFacturationSelectionne('MENSUEL')}"
|
||||
update="formulaires-grid"
|
||||
styleClass="no-underline" />
|
||||
</div>
|
||||
<div class="facturation-option #{formulaireBean.typeFacturationSelectionne.name() == 'ANNUEL' ? 'active' : ''}">
|
||||
<p:commandLink value="Annuel"
|
||||
action="#{formulaireBean.setTypeFacturationSelectionne('ANNUEL')}"
|
||||
update="formulaires-grid"
|
||||
styleClass="no-underline" />
|
||||
<span class="economie-badge ml-2">Économisez jusqu'à 16%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Grille des Formulaires -->
|
||||
<div class="surface-section px-4 py-8 md:px-6 lg:px-8">
|
||||
<div class="max-w-screen-xl mx-auto">
|
||||
<h:panelGroup id="formulaires-grid">
|
||||
<div class="grid">
|
||||
<ui:repeat value="#{formulaireBean.formulaires}" var="formulaire">
|
||||
<div class="col-12 md:col-6 xl:col-3">
|
||||
<div class="formulaire-card surface-card p-6 border-round shadow-2 #{formulaire.recommande ? 'recommande' : ''}">
|
||||
|
||||
<!-- En-tête du formulaire -->
|
||||
<div class="text-center mb-5">
|
||||
<div class="#{formulaire.couleurTheme} text-white inline-flex align-items-center justify-content-center border-circle mb-3"
|
||||
style="width: 60px; height: 60px;">
|
||||
<i class="#{formulaire.iconeFormulaire} text-2xl"></i>
|
||||
</div>
|
||||
<div class="text-900 font-bold text-2xl mb-2">#{formulaire.nom}</div>
|
||||
<div class="text-600 line-height-3">#{formulaire.description}</div>
|
||||
</div>
|
||||
|
||||
<!-- Prix -->
|
||||
<div class="text-center mb-5">
|
||||
<div class="text-900 prix-badge">
|
||||
#{formulaireBean.getPrixAffiche(formulaire)}
|
||||
</div>
|
||||
<div class="prix-periode">
|
||||
Jusqu'à #{formulaire.quotaMaxMembres} membres
|
||||
</div>
|
||||
<h:panelGroup rendered="#{formulaireBean.typeFacturationSelectionne.name() == 'ANNUEL'}">
|
||||
<div class="text-green-600 font-semibold text-sm mt-1">
|
||||
#{formulaireBean.getEconomieAffichee(formulaire)}
|
||||
</div>
|
||||
</h:panelGroup>
|
||||
</div>
|
||||
|
||||
<!-- Fonctionnalités -->
|
||||
<div class="mb-6">
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check fonctionnalite-active mr-2"></i>
|
||||
<span class="text-900">Gestion des membres</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check fonctionnalite-active mr-2"></i>
|
||||
<span class="text-900">Gestion des cotisations</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi #{formulaire.gestionEvenements ? 'pi-check fonctionnalite-active' : 'pi-times fonctionnalite-inactive'} mr-2"></i>
|
||||
<span class="text-900">Gestion des événements</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi #{formulaire.gestionAides ? 'pi-check fonctionnalite-active' : 'pi-times fonctionnalite-inactive'} mr-2"></i>
|
||||
<span class="text-900">Demandes d'aide</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi #{formulaire.rapportsAvances ? 'pi-check fonctionnalite-active' : 'pi-times fonctionnalite-inactive'} mr-2"></i>
|
||||
<span class="text-900">Rapports avancés</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi #{formulaire.supportPrioritaire ? 'pi-check fonctionnalite-active' : 'pi-times fonctionnalite-inactive'} mr-2"></i>
|
||||
<span class="text-900">Support prioritaire</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Boutons d'action -->
|
||||
<div class="flex flex-column gap-3">
|
||||
<p:commandButton value="Choisir ce formulaire"
|
||||
action="#{formulaireBean.selectionnerFormulaire(formulaire)}"
|
||||
oncomplete="PF('souscriptionDialog').show()"
|
||||
update=":souscription-form"
|
||||
styleClass="p-button-lg w-full #{formulaire.couleurTheme.replace('bg-', 'p-button-')}"/>
|
||||
|
||||
<p:commandButton value="Voir les détails"
|
||||
action="#{formulaireBean.voirDetailsFormulaire(formulaire)}"
|
||||
styleClass="p-button-outlined p-button-secondary w-full"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:repeat>
|
||||
</div>
|
||||
</h:panelGroup>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Section FAQ rapide -->
|
||||
<div class="surface-100 px-4 py-8 md:px-6 lg:px-8">
|
||||
<div class="max-w-screen-lg mx-auto text-center">
|
||||
<div class="text-900 text-4xl font-bold mb-4">Questions fréquentes</div>
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="surface-card p-4 border-round shadow-1 h-full">
|
||||
<i class="pi pi-question-circle text-blue-500 text-3xl mb-3"></i>
|
||||
<div class="text-900 font-bold mb-2">Puis-je changer de formule ?</div>
|
||||
<div class="text-600">Oui, vous pouvez upgrader ou downgrader à tout moment selon vos besoins.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="surface-card p-4 border-round shadow-1 h-full">
|
||||
<i class="pi pi-shield text-green-500 text-3xl mb-3"></i>
|
||||
<div class="text-900 font-bold mb-2">Mes données sont-elles sécurisées ?</div>
|
||||
<div class="text-600">Absolument. Nous utilisons un chiffrement de niveau bancaire pour protéger vos données.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="surface-card p-4 border-round shadow-1 h-full">
|
||||
<i class="pi pi-phone text-purple-500 text-3xl mb-3"></i>
|
||||
<div class="text-900 font-bold mb-2">Quel support est disponible ?</div>
|
||||
<div class="text-600">Support par email pour tous, support prioritaire et téléphonique pour Premium+.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dialog de souscription -->
|
||||
<p:dialog id="souscription-dialog" widgetVar="souscriptionDialog"
|
||||
header="Finaliser votre souscription"
|
||||
modal="true" responsive="true" width="600" height="400">
|
||||
<h:form id="souscription-form">
|
||||
<h:panelGroup rendered="#{formulaireBean.formulaireSelectionne != null}">
|
||||
<div class="p-4">
|
||||
<div class="text-center mb-4">
|
||||
<div class="#{formulaireBean.formulaireSelectionne.couleurTheme} text-white inline-flex align-items-center justify-content-center border-circle mb-3"
|
||||
style="width: 60px; height: 60px;">
|
||||
<i class="#{formulaireBean.formulaireSelectionne.iconeFormulaire} text-2xl"></i>
|
||||
</div>
|
||||
<div class="text-900 font-bold text-2xl">#{formulaireBean.formulaireSelectionne.nom}</div>
|
||||
<div class="text-600">#{formulaireBean.getPrixAffiche(formulaireBean.formulaireSelectionne)}</div>
|
||||
</div>
|
||||
|
||||
<div class="formgrid grid mb-4">
|
||||
<div class="field col">
|
||||
<label class="block text-900 font-medium mb-2">Type de facturation</label>
|
||||
<p:selectOneRadio value="#{formulaireBean.typeFacturationSelectionne}" layout="custom">
|
||||
<f:selectItem itemValue="MENSUEL" itemLabel="Mensuel" />
|
||||
<f:selectItem itemValue="ANNUEL" itemLabel="Annuel (économisez 16%)" />
|
||||
</p:selectOneRadio>
|
||||
<div class="grid">
|
||||
<div class="col-6">
|
||||
<p:radioButton itemIndex="0" />
|
||||
<label class="ml-2">Mensuel</label>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<p:radioButton itemIndex="1" />
|
||||
<label class="ml-2">Annuel</label>
|
||||
<span class="economie-badge ml-2">-16%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<p:commandButton value="Procéder au paiement"
|
||||
action="#{formulaireBean.procederSouscription()}"
|
||||
styleClass="p-button-lg #{formulaireBean.formulaireSelectionne.couleurTheme.replace('bg-', 'p-button-')}"
|
||||
icon="pi pi-credit-card"/>
|
||||
</div>
|
||||
</div>
|
||||
</h:panelGroup>
|
||||
</h:form>
|
||||
</p:dialog>
|
||||
</ui:define>
|
||||
</ui:composition>
|
||||
98
target/classes/META-INF/resources/pages/public/home.xhtml
Normal file
98
target/classes/META-INF/resources/pages/public/home.xhtml
Normal file
@@ -0,0 +1,98 @@
|
||||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:h="http://xmlns.jcp.org/jsf/html"
|
||||
xmlns:f="http://xmlns.jcp.org/jsf/core"
|
||||
xmlns:p="http://primefaces.org/ui">
|
||||
|
||||
<h:head>
|
||||
<title>UnionFlow - Accueil</title>
|
||||
<style>
|
||||
body {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
}
|
||||
.container {
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
padding: 40px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
||||
min-width: 500px;
|
||||
}
|
||||
.logo {
|
||||
text-align: center;
|
||||
font-size: 48px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: #333;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
</h:head>
|
||||
|
||||
<h:body>
|
||||
<div class="container">
|
||||
<div class="logo">🦁</div>
|
||||
<h1>UnionFlow</h1>
|
||||
|
||||
<h:form id="mainForm">
|
||||
<p:panel header="Bienvenue sur UnionFlow" style="margin-bottom: 20px;">
|
||||
<h:panelGrid columns="2" cellpadding="10">
|
||||
<h:outputText value="#{helloView.message}" style="font-weight: bold; color: #667eea;"/>
|
||||
</h:panelGrid>
|
||||
</p:panel>
|
||||
|
||||
<p:panel header="Test Interactif">
|
||||
<h:panelGrid columns="3" cellpadding="5">
|
||||
<p:outputLabel for="nameInput" value="Votre nom:"/>
|
||||
<p:inputText id="nameInput" value="#{helloView.name}"
|
||||
placeholder="Entrez votre nom"/>
|
||||
<p:commandButton value="Dire Bonjour"
|
||||
action="#{helloView.sayHello}"
|
||||
update="greetingPanel"
|
||||
icon="pi pi-user"/>
|
||||
</h:panelGrid>
|
||||
|
||||
<p:panel id="greetingPanel" style="margin-top: 20px;">
|
||||
<h:outputText value="#{helloView.greeting}"
|
||||
style="font-size: 18px; color: #764ba2;"
|
||||
rendered="#{not empty helloView.greeting}"/>
|
||||
</p:panel>
|
||||
</p:panel>
|
||||
|
||||
<p:panel header="Informations Système" style="margin-top: 20px;">
|
||||
<h:panelGrid columns="2" cellpadding="5">
|
||||
<h:outputText value="Framework:" style="font-weight: bold;"/>
|
||||
<h:outputText value="Quarkus + PrimeFaces"/>
|
||||
|
||||
<h:outputText value="Version PrimeFaces:" style="font-weight: bold;"/>
|
||||
<h:outputText value="14.0.5"/>
|
||||
|
||||
<h:outputText value="Thème:" style="font-weight: bold;"/>
|
||||
<h:outputText value="Freya Blue Light"/>
|
||||
|
||||
<h:outputText value="Port:" style="font-weight: bold;"/>
|
||||
<h:outputText value="8082"/>
|
||||
</h:panelGrid>
|
||||
</p:panel>
|
||||
|
||||
<div style="text-align: center; margin-top: 20px;">
|
||||
<p:button value="Documentation" icon="pi pi-book"
|
||||
href="https://www.primefaces.org/showcase"
|
||||
target="_blank"
|
||||
style="margin-right: 10px;"/>
|
||||
<p:button value="GitHub" icon="pi pi-github"
|
||||
href="https://github.com/quarkiverse/quarkus-primefaces"
|
||||
target="_blank"/>
|
||||
</div>
|
||||
</h:form>
|
||||
</div>
|
||||
</h:body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user