```
✨ feat(all): Ajoute l'inscription, Turnstile, Sentry et améliore l'EPAGE en français.
```
This commit is contained in:
Serreau Jovann
@@ -60,6 +60,18 @@ L'overflow-y-auto n'est plus nécessaire ici car c'est le <body> qui gère le sc
|
||||
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.523 5.754 18 7.5 18s3.332.477 4.5 1.247m0-13C13.168 5.477 14.754 5 16.5 5s3.332.477 4.5 1.253v13C19.832 18.523 18.246 18 16.5 18s-3.332.477-4.5 1.247"></path></svg>
|
||||
AG (Assemblée Générale)
|
||||
</a>
|
||||
<a href="{{ path('admin_ag') }}" class="flex items-center py-2 px-6 text-gray-400 hover:bg-gray-700 hover:text-white transition duration-200 mt-1 rounded-r-lg">
|
||||
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.523 5.754 18 7.5 18s3.332.477 4.5 1.247m0-13C13.168 5.477 14.754 5 16.5 5s3.332.477 4.5 1.253v13C19.832 18.523 18.246 18 16.5 18s-3.332.477-4.5 1.247"></path></svg>
|
||||
EPage - Validation
|
||||
</a>
|
||||
<a href="{{ path('admin_ag') }}" class="flex items-center py-2 px-6 text-gray-400 hover:bg-gray-700 hover:text-white transition duration-200 mt-1 rounded-r-lg">
|
||||
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.523 5.754 18 7.5 18s3.332.477 4.5 1.247m0-13C13.168 5.477 14.754 5 16.5 5s3.332.477 4.5 1.253v13C19.832 18.523 18.246 18 16.5 18s-3.332.477-4.5 1.247"></path></svg>
|
||||
EPage - Cosplayeur(s)
|
||||
</a>
|
||||
<a href="{{ path('admin_epage_invite') }}" class="flex items-center py-2 px-6 text-gray-400 hover:bg-gray-700 hover:text-white transition duration-200 mt-1 rounded-r-lg">
|
||||
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.523 5.754 18 7.5 18s3.332.477 4.5 1.247m0-13C13.168 5.477 14.754 5 16.5 5s3.332.477 4.5 1.253v13C19.832 18.523 18.246 18 16.5 18s-3.332.477-4.5 1.247"></path></svg>
|
||||
EPage - Invitation
|
||||
</a>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
|
||||
93
templates/admin/epage/invitation.twig
Normal file
93
templates/admin/epage/invitation.twig
Normal file
@@ -0,0 +1,93 @@
|
||||
{% extends 'admin/base.twig' %}
|
||||
|
||||
{% block title %}Ajouter/Éditer un événement{% endblock %}
|
||||
{% block page_title %}
|
||||
Epage - Invitation
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
|
||||
<!-- Conteneur principal: utiliser bg-gray-900 pour l'arrière-plan du corps -->
|
||||
|
||||
<div class="bg-gray-900 text-gray-100 min-h-screen p-6">
|
||||
<!-- Tableau des événements -->
|
||||
<!-- Fond du tableau en gris foncé, ombre conservée -->
|
||||
<div class="bg-gray-800 shadow-xl overflow-hidden sm:rounded-lg">
|
||||
{% if invitations is empty %}
|
||||
<!-- Texte vide en gris clair -->
|
||||
<div class="p-6 text-center text-gray-400">
|
||||
Aucun invitation trouvé. Commencez par en créer un !
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-700">
|
||||
<!-- En-tête du tableau -->
|
||||
<thead class="bg-gray-700">
|
||||
<tr>
|
||||
<!-- Texte de l'en-tête en gris clair/blanc -->
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
|
||||
Titre
|
||||
</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider hidden sm:table-cell">
|
||||
Lieu
|
||||
</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider hidden md:table-cell">
|
||||
Organisateur
|
||||
</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
|
||||
Début
|
||||
</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider hidden md:table-cell">
|
||||
Fin
|
||||
</th>
|
||||
<th scope="col" class="relative px-6 py-3">
|
||||
<span class="sr-only">Actions</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<!-- Corps du tableau -->
|
||||
<tbody class="bg-gray-800 divide-y divide-gray-700">
|
||||
{% for event in events %}
|
||||
<!-- Ligne au survol en gris légèrement plus clair -->
|
||||
<tr class="hover:bg-gray-700 transition duration-100">
|
||||
<!-- Titre en blanc -->
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-100">
|
||||
{{ event.title }}
|
||||
</td>
|
||||
<!-- Texte des cellules en gris clair -->
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400 hidden sm:table-cell">
|
||||
{{ event.location }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400 hidden md:table-cell">
|
||||
{{ event.organizer }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">
|
||||
{{ event.startAt|date('d/m/Y') }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400 hidden md:table-cell">
|
||||
{{ event.endAt|date('d/m/Y') }}
|
||||
</td>
|
||||
<!-- Actions : lien Modifier en indigo, lien Supprimer en rouge -->
|
||||
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||
<a href="{{ path('admin_events_edit', {id: event.id}) }}" class="text-indigo-400 hover:text-indigo-300 mr-3">
|
||||
Modifier
|
||||
</a>
|
||||
<!-- Bouton de suppression -->
|
||||
<form method="POST" action="{{ path('admin_events_delete', {id: event.id}) }}" class="inline-block" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer cet événement ? Cette action est irréversible.');">
|
||||
<input type="hidden" name="_token" value="{{ csrf_token('delete' ~ event.id) }}">
|
||||
<button type="submit" class="text-red-400 hover:text-red-300 focus:outline-none">
|
||||
Supprimer
|
||||
</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -115,7 +115,19 @@
|
||||
{% if app.environment == "prod" %}
|
||||
<script defer src="https://datas.e-cosplay.fr/vs.js"
|
||||
data-website-id="b929d372-fbea-403e-9ae2-781433828787"></script> {% endif %}
|
||||
|
||||
<script src="/sc.js" crossorigin="anonymous"></script>
|
||||
<script>
|
||||
Sentry.onLoad(function() {
|
||||
Sentry.init({
|
||||
tunnel:'/tunnel',
|
||||
// Tracing
|
||||
tracesSampleRate: 1.0, // Capture 100% of the transactions
|
||||
// Session Replay
|
||||
replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
|
||||
replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
{# Le corps aura un fond gris clair pour correspondre au fond du logo #}
|
||||
<body class="flex flex-col min-h-screen bg-gray-100">
|
||||
@@ -128,6 +140,7 @@
|
||||
{ 'name': 'Boutiques'|trans, 'route': 'app_shop' },
|
||||
{ 'name': 'Documents'|trans, 'route': 'app_doc' },
|
||||
{ 'name': 'Dons'|trans, 'route': 'app_dons' },
|
||||
{ 'name': 'Nous rejoindre'|trans, 'route': 'app_recruit' },
|
||||
{ 'name': 'Contact'|trans, 'route': 'app_contact' }
|
||||
] %}
|
||||
<header class="bg-white shadow-md sticky top-0 z-40">
|
||||
@@ -420,7 +433,7 @@
|
||||
</div>
|
||||
|
||||
{# 2. Réseaux Sociaux #}
|
||||
<div style="height: 210px">gestion commercial
|
||||
<div style="height: 210px">
|
||||
<h3 class="text-lg font-semibold mb-3 text-gray-900">{{ 'footer_follow_us_title'|trans }}</h3>
|
||||
<div class="flex space-x-4">
|
||||
<a href="https://www.facebook.com/assocationecosplay" target="_blank" rel="noopener noreferrer"
|
||||
|
||||
235
templates/join.twig
Normal file
235
templates/join.twig
Normal file
@@ -0,0 +1,235 @@
|
||||
{% extends 'base.twig' %}
|
||||
|
||||
{% block title %}{{'joint_page.title'|trans}}{% endblock %}
|
||||
{% block meta_description %}{{'joint_page.description'|trans}}{% endblock %}
|
||||
|
||||
{% block canonical_url %}<link rel="canonical" href="{{ url('app_recruit') }}" />{% endblock %}
|
||||
|
||||
{% block breadcrumb_schema %}
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [
|
||||
{ "@type": "ListItem", "position": 1, "name": "{{ 'breadcrumb.home'|trans }}", "item": "{{ app.request.schemeAndHttpHost }}" },
|
||||
{ "@type": "ListItem", "position": 2, "name": "{{ 'breadcrumb.joint'|trans }}", "item": "{{ app.request.schemeAndHttpHost }}{{ path('app_recruit') }}" }
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "FAQPage",
|
||||
"mainEntity": [{
|
||||
"@type": "Question",
|
||||
"name": "{{ 'faq.validation.question'|trans }}",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "{{ 'faq.validation.answer'|trans }}"
|
||||
}
|
||||
}]
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="bg-white text-gray-900 font-sans leading-normal">
|
||||
|
||||
{# --- HERO SECTION --- #}
|
||||
<section class="relative py-24 bg-[#1A1A1A] text-white overflow-hidden text-center border-b-8 border-[#FFC107]">
|
||||
<div class="absolute inset-0 opacity-10" style="background-image: radial-gradient(circle, #ffffff 1px, transparent 1px); background-size: 40px 40px;"></div>
|
||||
<div class="container mx-auto px-6 relative z-10">
|
||||
<h1 class="text-5xl md:text-8xl font-black mb-6 tracking-tighter uppercase italic">
|
||||
<span class="text-white">{{ 'hero.join.text'|trans }}</span> <span class="text-[#FFC107]">{{ 'hero.brand.name'|trans }}</span>
|
||||
</h1>
|
||||
<div class="inline-block bg-[#E63946] text-white px-10 py-6 rounded-sm shadow-[8px_8px_0px_0px_rgba(255,193,7,1)] transform -rotate-1 border-2 border-black">
|
||||
<span class="text-sm font-black uppercase tracking-widest block mb-1">{{ 'hero.fee.label'|trans }}</span>
|
||||
<div class="text-5xl font-black">{{ 'hero.fee.amount'|trans }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{# --- SECTION PROCESSUS D'ADHÉSION --- #}
|
||||
<section class="py-16 bg-gray-50 border-b-4 border-black">
|
||||
<div class="container mx-auto px-6 max-w-5xl">
|
||||
<h2 class="text-4xl font-black uppercase italic mb-10 tracking-tighter text-center">{{ 'process.title'|trans }}</h2>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-8 items-stretch">
|
||||
<div class="bg-white border-4 border-black p-8 shadow-[10px_10px_0px_0px_rgba(26,26,26,1)]">
|
||||
<div class="text-[#E63946] text-4xl font-black mb-4">{{ 'process.unanimous.percent'|trans }}</div>
|
||||
<h3 class="text-xl font-black uppercase mb-4">{{ 'process.unanimous.title'|trans }}</h3>
|
||||
<p class="font-bold text-gray-700 leading-relaxed">
|
||||
{{ 'process.unanimous.description'|trans|raw }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#1A1A1A] border-4 border-[#FFC107] p-8 text-white shadow-[10px_10px_0px_0px_rgba(255,193,7,1)]">
|
||||
<div class="text-[#FFC107] text-4xl font-black mb-4 text-center">{{ 'process.feedback.icon'|trans }}</div>
|
||||
<h3 class="text-xl font-black uppercase mb-4 text-[#FFC107]">{{ 'process.feedback.title'|trans }}</h3>
|
||||
<p class="font-medium text-gray-300 leading-relaxed text-center">
|
||||
{{ 'process.feedback.description'|trans|raw }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{# --- GOUVERNANCE PARTAGÉE --- #}
|
||||
<section class="py-16 bg-[#FFC107] border-b-8 border-black">
|
||||
<div class="container mx-auto px-6">
|
||||
<div class="bg-white border-4 border-black p-8 shadow-[10px_10px_0px_0px_rgba(0,0,0,1)]">
|
||||
<h2 class="text-3xl md:text-5xl font-black uppercase italic mb-8 tracking-tighter text-center">{{ 'governance.title'|trans }}</h2>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
{% set steps = {
|
||||
'💡': 'governance.step.propose'|trans,
|
||||
'👂': 'governance.step.listen'|trans,
|
||||
'🗳️': 'governance.step.vote'|trans,
|
||||
'🚀': 'governance.step.apply'|trans
|
||||
} %}
|
||||
{% for icon, title in steps %}
|
||||
<div class="p-4 border-2 border-black bg-gray-50 text-center transform hover:scale-105 transition">
|
||||
<div class="text-3xl mb-2">{{ icon }}</div>
|
||||
<h4 class="font-black uppercase text-sm">{{ title }}</h4>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<p class="mt-8 text-center font-black uppercase text-gray-800 tracking-tighter">
|
||||
{{ 'governance.footer'|trans }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{# --- SERVICES & HANDICAP --- #}
|
||||
<section class="py-20">
|
||||
<div class="container mx-auto px-6">
|
||||
<div class="grid lg:grid-cols-2 gap-12">
|
||||
{# Portfolio #}
|
||||
<div class="flex gap-6 items-start">
|
||||
<div class="bg-black text-[#FFC107] p-4 font-black text-2xl border-2 border-black">01</div>
|
||||
<div>
|
||||
<h3 class="text-2xl font-black uppercase italic">{{ 'services.portfolio.title'|trans }}</h3>
|
||||
<p class="text-gray-600 font-bold">{{ 'services.portfolio.description'|trans }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{# Handicap #}
|
||||
<div class="flex gap-6 items-start p-6 bg-gray-100 border-l-8 border-[#E63946]">
|
||||
<div class="text-5xl">♿</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-black uppercase">{{ 'services.inclusion.title'|trans }}</h3>
|
||||
<p class="text-gray-600 italic">{{ 'services.inclusion.description'|trans }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{# --- SAFE SPACE --- #}
|
||||
<section class="py-12 bg-[#1A1A1A] text-white text-center">
|
||||
<h2 class="text-2xl font-black uppercase italic text-[#FFC107]">{{ 'safespace.title'|trans }}</h2>
|
||||
<p class="mt-4 font-bold tracking-widest text-sm">{{ 'safespace.subtitle'|trans }}</p>
|
||||
</section>
|
||||
|
||||
{# --- FORMULAIRE --- #}
|
||||
<section class="py-24 bg-gray-50" style="display:none;">
|
||||
<div class="container mx-auto px-6 max-w-4xl">
|
||||
<div class="bg-white border-8 border-black p-8 md:p-12 shadow-[20px_20px_0px_0px_rgba(26,26,26,1)]">
|
||||
<h2 class="text-4xl md:text-6xl font-black uppercase italic mb-10 tracking-tighter text-center decoration-[#FFC107] underline decoration-8">
|
||||
{{ 'form.header.title'|trans }}
|
||||
</h2>
|
||||
|
||||
{{ form_start(form, {'attr': {'class': 'space-y-8','data-turbo':false}}) }}
|
||||
|
||||
{# IDENTITÉ #}
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<div class="flex flex-col">
|
||||
{{ form_label(form.name, 'form.label.name'|trans, {'label_attr': {'class': 'font-black uppercase text-sm mb-2'}}) }}
|
||||
{{ form_widget(form.name, {'attr': {'class': 'border-4 border-black p-3 focus:bg-yellow-50 outline-none transition'}}) }}
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
{{ form_label(form.surname, 'form.label.surname'|trans, {'label_attr': {'class': 'font-black uppercase text-sm mb-2'}}) }}
|
||||
{{ form_widget(form.surname, {'attr': {'class': 'border-4 border-black p-3 focus:bg-yellow-50 outline-none transition'}}) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# CONTACT #}
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<div class="flex flex-col">
|
||||
{{ form_label(form.email, 'form.label.email'|trans, {'label_attr': {'class': 'font-black uppercase text-sm mb-2'}}) }}
|
||||
{{ form_widget(form.email, {'attr': {'class': 'border-4 border-black p-3 focus:bg-yellow-50 outline-none transition'}}) }}
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
{{ form_label(form.phone, 'form.label.phone'|trans, {'label_attr': {'class': 'font-black uppercase text-sm mb-2'}}) }}
|
||||
{{ form_widget(form.phone, {'attr': {'class': 'border-4 border-black p-3 focus:bg-yellow-50 outline-none transition'}}) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# INFOS PERSO #}
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<div class="flex flex-col">
|
||||
{{ form_label(form.dateBirth, 'form.label.birthdate'|trans, {'label_attr': {'class': 'font-black uppercase text-sm mb-2'}}) }}
|
||||
{{ form_widget(form.dateBirth, {'attr': {'class': 'border-4 border-black p-3'}}) }}
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
{{ form_label(form.sexe, 'form.label.gender'|trans, {'label_attr': {'class': 'font-black uppercase text-sm mb-2'}}) }}
|
||||
{{ form_widget(form.sexe, {'attr': {'class': 'border-4 border-black p-3'}}) }}
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
{{ form_label(form.pronom, 'form.label.pronouns'|trans, {'label_attr': {'class': 'font-black uppercase text-sm mb-2'}}) }}
|
||||
{{ form_widget(form.pronom, {'attr': {'class': 'border-4 border-black p-3'}}) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ADRESSE #}
|
||||
<div class="flex flex-col">
|
||||
{{ form_label(form.address, 'form.label.address'|trans, {'label_attr': {'class': 'font-black uppercase text-sm mb-2'}}) }}
|
||||
{{ form_widget(form.address, {'attr': {'class': 'border-4 border-black p-3'}}) }}
|
||||
</div>
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<div class="flex flex-col">
|
||||
{{ form_label(form.zipCode, 'form.label.zipcode'|trans, {'label_attr': {'class': 'font-black uppercase text-sm mb-2'}}) }}
|
||||
{{ form_widget(form.zipCode, {'attr': {'class': 'border-4 border-black p-3'}}) }}
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
{{ form_label(form.city, 'form.label.city'|trans, {'label_attr': {'class': 'font-black uppercase text-sm mb-2'}}) }}
|
||||
{{ form_widget(form.city, {'attr': {'class': 'border-4 border-black p-3'}}) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# RÉSEAUX SOCIAUX #}
|
||||
<div class="p-6 bg-gray-100 border-4 border-black border-dashed">
|
||||
<h3 class="font-black uppercase italic mb-4 text-[#E63946]">{{ 'form.section.social'|trans }}</h3>
|
||||
<div class="grid md:grid-cols-2 gap-4">
|
||||
{{ form_row(form.discordAccount, {'label': 'form.label.discord'|trans, 'attr': {'class': 'border-2 border-black p-2 w-full'}}) }}
|
||||
{{ form_row(form.instaLink, {'label': 'form.label.insta'|trans, 'attr': {'class': 'border-2 border-black p-2 w-full'}}) }}
|
||||
{{ form_row(form.tiktokLink, {'label': 'form.label.tiktok'|trans, 'attr': {'class': 'border-2 border-black p-2 w-full'}}) }}
|
||||
{{ form_row(form.facebookLink, {'label': 'form.label.facebook'|trans, 'attr': {'class': 'border-2 border-black p-2 w-full'}}) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# RÔLE & MOTIVATION #}
|
||||
<div class="flex flex-col">
|
||||
{{ form_label(form.who, 'form.label.who'|trans, {'label_attr': {'class': 'font-black uppercase text-sm mb-2'}}) }}
|
||||
{{ form_widget(form.who, {'attr': {'class': 'border-4 border-black p-3 min-h-[100px]'}}) }}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col">
|
||||
{{ form_label(form.role, 'form.label.role'|trans, {'label_attr': {'class': 'font-black uppercase text-sm mb-2'}}) }}
|
||||
{{ form_widget(form.role, {'attr': {'class': 'border-4 border-black p-3'}}) }}
|
||||
</div>
|
||||
|
||||
{# BOUTON ENVOI #}
|
||||
<div class="pt-10 text-center">
|
||||
<button type="submit" class="inline-block px-16 py-8 bg-[#FFC107] text-black font-black text-2xl rounded-sm border-4 border-black shadow-[10px_10px_0px_0px_rgba(26,26,26,1)] hover:bg-[#E63946] hover:text-white transition-all transform hover:-translate-y-2 uppercase cursor-pointer">
|
||||
{{ 'form.button.submit'|trans }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{{ form_end(form) }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
149
templates/pages/onboarding.twig
Normal file
149
templates/pages/onboarding.twig
Normal file
@@ -0,0 +1,149 @@
|
||||
{% extends 'base.twig' %}
|
||||
|
||||
{% block title %}{{'page.onboarding.title'|trans}}{% endblock %}
|
||||
{% block meta_description %}{{'page.onboarding.description'|trans}}{% endblock %}
|
||||
{% block canonical_url %}<link rel="canonical" href="{{ url('app_pages_onboaring',{type:app.request.get('abo','M1')}) }}" />{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
{{ form_start(form) }}
|
||||
<!-- Conteneur principal de la carte -->
|
||||
<div class="mt-2 mb-2 w-full max-w-4xl mx-auto mt-2 bg-white shadow-xl rounded-2xl p-6 md:p-10 border border-gray-100">
|
||||
|
||||
<h1 class="text-3xl font-bold text-gray-800 mb-8 text-center">{{ 'onboarding.form.title'|trans }}</h1>
|
||||
|
||||
<!-- Contenu des Étapes (Formulaire) - Tous affichés en colonnes -->
|
||||
<div class="space-y-6">
|
||||
|
||||
<!-- Étape 1 Contenu -->
|
||||
<div class="form-section">
|
||||
<div class="p-6 bg-indigo-50 rounded-xl border border-indigo-200 shadow-sm">
|
||||
<h2 class="text-2xl font-bold text-indigo-700 mb-4 border-b border-indigo-300 pb-2 flex items-center">
|
||||
<svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
|
||||
{{ 'onboarding.form.section1.title'|trans }}
|
||||
</h2>
|
||||
<p class="text-indigo-600 mb-6">{{ 'onboarding.form.section1.description'|trans }}</p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 form-input-group">
|
||||
<!-- Nom -->
|
||||
<div>
|
||||
{{ form_row(form.name) }}
|
||||
</div>
|
||||
<!-- Prénom -->
|
||||
<div>
|
||||
{{ form_row(form.surname) }}
|
||||
</div>
|
||||
<!-- Email -->
|
||||
<div class="md:col-span-1">
|
||||
{{ form_row(form.email) }}
|
||||
</div>
|
||||
<!-- Date de naissance -->
|
||||
<div class="md:col-span-1">
|
||||
{{ form_row(form.birdth) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Étape 2 Contenu -->
|
||||
<div class="p-6 bg-yellow-50 rounded-xl border border-yellow-200 shadow-sm">
|
||||
<h2 class="text-2xl font-bold text-yellow-700 mb-4 border-b border-yellow-300 pb-2 flex items-center">
|
||||
<svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.639a2 2 0 01-1.789-2.894l3.5-7z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 9H2.236a2 2 0 01-1.789-2.894l3.5-7A2 2 0 014.737 3h4.636a2 2 0 011.789 2.894l-3.5 7z"></path></svg>
|
||||
{{ 'onboarding.form.section2.title'|trans }}
|
||||
</h2>
|
||||
<p class="text-yellow-600 mb-6">{{ 'onboarding.form.section2.description'|trans }}</p>
|
||||
<!-- Simulation du contenu du formulaire -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 form-input-group">
|
||||
<div class="md:col-span-2">
|
||||
{{ form_row(form.nameCosplayer) }}
|
||||
</div>
|
||||
<div class="md:col-span-2">
|
||||
{{ form_row(form.description)}}
|
||||
</div>
|
||||
{{ form_row(form.epage) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Étape 3 Contenu -->
|
||||
<div class="p-6 bg-green-50 rounded-xl border border-green-200 shadow-sm">
|
||||
<h2 class="text-2xl font-bold text-green-700 mb-4 border-b border-green-300 pb-2 flex items-center">
|
||||
<svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.886l2.273 2.273.744-.744-2.273-2.273z"></path></svg>
|
||||
{{ 'onboarding.form.section3.title'|trans }}
|
||||
</h2>
|
||||
<p class="text-green-600 mb-6">{{ 'onboarding.form.section3.description'|trans }}</p>
|
||||
|
||||
<div class="grid grid-cols-2 md:grid-cols-2 gap-6 form-input-group">
|
||||
<div>
|
||||
{{ form_row(form.linkFacebook) }}
|
||||
</div>
|
||||
<div>
|
||||
{{ form_row(form.linkInstagram) }}
|
||||
</div>
|
||||
<div>
|
||||
{{ form_row(form.linkTiktok) }}
|
||||
</div>
|
||||
<div>
|
||||
{{ form_row(form.linkX) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Étape 4 Contenu -->
|
||||
<div class="p-6 bg-blue-50 rounded-xl border border-blue-200 shadow-sm">
|
||||
<h2 class="text-2xl font-bold text-blue-700 mb-4 border-b border-blue-200 pb-2 flex items-center">
|
||||
<svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.5 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.5-3-9s1.343-9 3-9m-9 9h.01"></path></svg>
|
||||
{{ 'onboarding.form.section4.title'|trans }}
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 gap-6 form-input-group">
|
||||
|
||||
<!-- Checkbox for Custom Domain (form.useDomain) -->
|
||||
<div class="mt-4 flex items-center">
|
||||
{{ form_row(form.useDomain) }}
|
||||
</div>
|
||||
|
||||
<!-- Custom Domain Input (form.domain) - Hidden by default -->
|
||||
<div id="custom-domain-group" class="hidden transition-all duration-300 pt-4 border-t border-blue-200 mt-4">
|
||||
{{ form_row(form.domain) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bouton unique de soumission -->
|
||||
<div class="mt-8 flex justify-center">
|
||||
<button class="px-8 py-3 text-lg font-semibold rounded-lg text-white bg-indigo-600 hover:bg-indigo-700 transition duration-150 shadow-lg shadow-indigo-200">
|
||||
{{ 'onboarding.form.submit_button'|trans }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{{ form_end(form) }}
|
||||
|
||||
<script>
|
||||
document.addEventListener('turbo:load', () => {
|
||||
const useDomainCheckbox = document.getElementById('e_page_onboard_useDomain');
|
||||
const customDomainGroup = document.getElementById('custom-domain-group');
|
||||
const customDomainInput = document.getElementById('e_page_onboard_domain');
|
||||
|
||||
function toggleDomainFields() {
|
||||
if (useDomainCheckbox.checked) {
|
||||
// Show custom domain field
|
||||
customDomainGroup.classList.remove('hidden');
|
||||
customDomainInput.setAttribute('required', 'required');
|
||||
|
||||
} else {
|
||||
// Hide custom domain field
|
||||
customDomainGroup.classList.add('hidden');
|
||||
customDomainInput.removeAttribute('required');
|
||||
customDomainInput.value = ''; // Clear custom domain value
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// Initial state setup (in case of browser refresh retaining checkbox state)
|
||||
toggleDomainFields();
|
||||
|
||||
// Event listener for the checkbox
|
||||
useDomainCheckbox.addEventListener('change', toggleDomainFields);
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -285,7 +285,7 @@
|
||||
</div>
|
||||
|
||||
{# BLOC DE TARIFICATION EPage (CARTE UNIQUE AVEC SÉLECTEUR) - CENTRÉ ET RESPONSIVE #}
|
||||
<div class="mt-16 text-center" style="display:none;">
|
||||
<div class="mt-16 text-center" style="display: none">
|
||||
<h3 class="text-4xl font-extrabold text-gray-800 mb-8">{{ 'page.presentation.pricing.choose_period'|trans }}</h3>
|
||||
|
||||
<div class="max-w-xl mx-auto p-6 sm:p-8 bg-white border-4 border-red-500 rounded-3xl shadow-2xl">
|
||||
@@ -350,7 +350,7 @@
|
||||
<p id="price-per-month" class="text-lg sm:text-xl text-gray-500 mb-8"></p>
|
||||
|
||||
{# BOUTON D'ACTION #}
|
||||
<button class="w-full px-8 py-4 bg-gradient-to-r from-yellow-500 to-red-600 text-white font-extrabold text-xl rounded-xl transition duration-300 transform hover:scale-[1.03] shadow-lg shadow-red-300/50">
|
||||
<button onclick="redirectToCheckout()" class="w-full px-8 py-4 bg-gradient-to-r from-yellow-500 to-red-600 text-white font-extrabold text-xl rounded-xl transition duration-300 transform hover:scale-[1.03] shadow-lg shadow-red-300/50">
|
||||
{{ 'page.presentation.pricing.cta_button'|trans }}
|
||||
</button>
|
||||
|
||||
@@ -446,6 +446,29 @@
|
||||
updatePrice('1M');
|
||||
}
|
||||
|
||||
function redirectToCheckout() {
|
||||
const selectedDurationInput = document.querySelector('input[name="duration"]:checked');
|
||||
|
||||
if (selectedDurationInput) {
|
||||
const selectedDuration = selectedDurationInput.value;
|
||||
|
||||
// --- AJOUT DE LA VALIDATION DE DURÉE ---
|
||||
if (VALID_DURATIONS.includes(selectedDuration)) {
|
||||
// Redirection avec le paramètre 'abo' valide
|
||||
window.location.href = `/pages/onboaring?abo=${selectedDuration}`;
|
||||
} else {
|
||||
// Fallback si la durée sélectionnée n'est pas dans la liste des valides
|
||||
console.error("Durée d'abonnement sélectionnée non valide:", selectedDuration);
|
||||
// On peut rediriger vers la page par défaut si l'on ne veut pas bloquer l'utilisateur
|
||||
window.location.href = `/pages/onboaring?abo=1M`;
|
||||
}
|
||||
} else {
|
||||
// Fallback si rien n'est sélectionné (redirection par défaut vers 1M ou page de découverte)
|
||||
console.error("Aucune durée d'abonnement sélectionnée. Redirection par défaut.");
|
||||
window.location.href = `/pages/onboaring?abo=1M`;
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof window.Turbo !== 'undefined') {
|
||||
document.addEventListener('turbo:load', initializePrice);
|
||||
} else {
|
||||
|
||||
Reference in New Issue
Block a user