150 lines
7.9 KiB
Twig
150 lines
7.9 KiB
Twig
|
{% 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 %}
|