skycel/Portfolio-Codex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ Story 5.6: feedback utilisateur

Browse Source
This commit is contained in:
skycel
2026-02-04 21:31:10 +01:00
parent 5b1539a3aa
commit 0545a6e14b
6 changed files with 210 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
pages/contact.php
View File

@@ -134,13 +134,48 @@ include_template('navbar', compact('currentPage'));
<div class="flex flex-col sm:flex-row gap-4 pt-4">
<button type="submit" id="submit-btn" class="btn-primary flex-1 justify-center">
Envoyer le message
<span id="submit-text">Envoyer le message</span>
<span id="submit-loading" class="hidden">
<svg class="animate-spin w-5 h-5" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
</svg>
Envoi en cours...
</span>
</button>
<button type="button" id="clear-form-btn" class="btn-ghost">
Effacer le formulaire
</button>
</div>
</form>
<div id="success-message" class="hidden mt-8 p-6 bg-success/10 border border-success/30 rounded-lg text-center">
<svg class="w-12 h-12 text-success mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
<h3 class="text-lg font-semibold text-text-primary mb-2">Message envoyé avec succès !</h3>
<p class="text-text-secondary mb-4">
Merci pour votre message. Je vous répondrai dans les meilleurs délais.
</p>
<p class="text-sm text-text-muted">
Si vous ne recevez pas de réponse sous 48h, pensez à vérifier vos spams.
</p>
</div>
<div id="error-message" class="hidden mt-8 p-6 bg-error/10 border border-error/30 rounded-lg">
<div class="flex items-start gap-4">
<svg class="w-6 h-6 text-error flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
<div>
<h3 class="font-semibold text-error mb-1">Erreur</h3>
<p class="text-text-secondary" id="error-text"></p>
<p class="text-sm text-text-muted mt-2">
Vos données ont été conservées. Vous pouvez réessayer.
</p>
</div>
</div>
</div>
</div>
</div>
</section>