e644dc4b85
✨ feat(templates): Améliore la lisibilité et l'esthétique de l'interface
Ce commit met à jour les couleurs et les styles de texte dans plusieurs
templates pour améliorer la lisibilité et l'esthétique globale de
l'interface utilisateur. Les couleurs de texte secondaires sont
ajustées pour un meilleur contraste.
```
101 lines
6.4 KiB
Twig
101 lines
6.4 KiB
Twig
{% extends 'dashboard/base.twig' %}
|
|
|
|
{% block title %}Création d'une nouvelle formule{% endblock %}
|
|
|
|
{% block body %}
|
|
<div class="min-h-screen p-6 flex flex-col items-center justify-start">
|
|
|
|
{# Header & Tabs #}
|
|
<div class="w-full max-w-4xl mb-8 flex flex-col md:flex-row justify-center items-center gap-6">
|
|
<div class="flex gap-2 p-1 bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl">
|
|
<a href="{{ path('app_crm_formules_add',{type:"pack"}) }}" class="px-6 py-2 rounded-xl text-sm font-bold transition-all {% if type == 'pack' %}bg-blue-600 text-white shadow-lg shadow-blue-600/20{% else %}text-slate-400 hover:text-white{% endif %}">Mode Pack</a>
|
|
<a href="{{ path('app_crm_formules_add',{type:"free"}) }}" class="px-6 py-2 rounded-xl text-sm font-bold transition-all {% if type == 'free' %}bg-blue-600 text-white shadow-lg shadow-blue-600/20{% else %}text-slate-400 hover:text-white{% endif %}">Mode Libre</a>
|
|
</div>
|
|
</div>
|
|
|
|
{# Main Form Container #}
|
|
<div class="w-full space-y-6">
|
|
{{ form_start(form, {'attr': {'class': 'space-y-6'}}) }}
|
|
|
|
{# Glass Section: Image Upload #}
|
|
<div class="backdrop-blur-2xl bg-white/5 border border-white/10 rounded-[2.5rem] p-8 shadow-2xl overflow-hidden relative group">
|
|
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-blue-500/50 to-transparent"></div>
|
|
|
|
<h3 class="text-[10px] font-black text-blue-400 uppercase tracking-[0.2em] mb-8 flex items-center">
|
|
<span class="w-6 h-6 bg-blue-500/10 rounded flex items-center justify-center mr-3">01</span>
|
|
Visuel de la formule
|
|
</h3>
|
|
|
|
<div class="flex flex-col md:flex-row items-center gap-10">
|
|
<div class="relative group/img">
|
|
<div class="w-44 h-44 rounded-3xl overflow-hidden border border-white/10 bg-slate-900/80 flex items-center justify-center shadow-inner">
|
|
<img id="product-image-preview"
|
|
src="{{ formule.imageName ? vich_uploader_asset(formule, 'imageFile') : '#' }}"
|
|
class="w-full h-full object-cover {{ formule.imageName ? '' : 'hidden' }}">
|
|
|
|
<svg id="product-image-placeholder"
|
|
class="w-12 h-12 text-slate-700 {{ formule.imageName ? 'hidden' : '' }}"
|
|
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-1 w-full space-y-4">
|
|
{{ form_label(form.imageFile, 'Cliquer pour uploader un visuel', {'label_attr': {'class': 'text-[10px] font-black text-slate-300 uppercase tracking-widest'}}) }}
|
|
{{ form_widget(form.imageFile, {
|
|
'id': 'product_image_input',
|
|
'attr': {
|
|
'class': 'block w-full text-xs text-slate-400
|
|
file:mr-6 file:py-3 file:px-6
|
|
file:rounded-xl file:border file:border-white/10
|
|
file:text-[10px] file:font-black file:uppercase
|
|
file:bg-white/5 file:text-white file:backdrop-blur-md
|
|
hover:file:bg-white/20 transition-all cursor-pointer'
|
|
}
|
|
}) }}
|
|
<p class="text-[10px text-slate-300 italic">Formats acceptés: PNG, JPG (Max 2Mo)</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# Glass Section: Form Data #}
|
|
<div class="backdrop-blur-2xl bg-white/5 border border-white/10 rounded-[2.5rem] p-8 shadow-2xl">
|
|
<h3 class="text-[10px] font-black text-purple-400 uppercase tracking-[0.2em] mb-8 flex items-center">
|
|
<span class="w-6 h-6 bg-purple-500/10 rounded flex items-center justify-center mr-3">02</span>
|
|
Informations Générales
|
|
</h3>
|
|
|
|
<div class="space-y-6">
|
|
<div class="space-y-2">
|
|
<label class="text-[10px] font-black text-slate-300 uppercase tracking-widest ml-1">Nom de la formule</label>
|
|
{{ form_widget(form.name, {
|
|
'attr': {
|
|
'placeholder': 'ex: Pack Premium Gold',
|
|
'class': 'w-full bg-white/5 border border-white/10 rounded-xl py-4 px-5 text-white placeholder-slate-600 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all'
|
|
}
|
|
}) }}
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<label class="text-[10px] font-black text-slate-300 uppercase tracking-widest ml-1">Description détaillée</label>
|
|
{{ form_widget(form.description, {
|
|
'attr': {
|
|
'class': 'w-full bg-white/5 border border-white/10 rounded-xl py-4 px-5 text-white placeholder-slate-600 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all min-h-[150px]',
|
|
'placeholder': 'Décrivez les avantages de cette formule...'
|
|
}
|
|
}) }}
|
|
</div>
|
|
<button type="submit" class="group relative w-full inline-flex items-center justify-center px-8 py-4 font-black text-[10px] uppercase tracking-widest text-white transition-all bg-blue-600 rounded-xl hover:bg-blue-500 shadow-[0_10px_20px_rgba(37,99,235,0.3)]">
|
|
Enregistrer la configuration
|
|
<svg class="w-4 h-4 ml-2 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{{ form_end(form) }}
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|