technostrea/trouvetonprofile
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

refacto page mon profile

Browse Source
This commit is contained in:
styve Lioumba
2025-11-15 17:30:09 +01:00
parent 620b781219
commit b669190bce
29 changed files with 1702 additions and 743 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/app/routes/profile/profile-list/profile-list.component.html
View File

@@ -1,19 +1,31 @@
<section class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 pb-16">
<section
class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 pb-16"
>
<!-- Hero Section avec recherche -->
<div class="relative overflow-hidden">
<!-- Décorations de fond -->
<div class="absolute inset-0 overflow-hidden pointer-events-none">
<div class="absolute -top-40 -right-40 w-80 h-80 bg-indigo-400 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob"></div>
<div class="absolute -bottom-40 -left-40 w-80 h-80 bg-purple-400 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-2000"></div>
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-pink-400 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-4000"></div>
<div
class="absolute -top-40 -right-40 w-80 h-80 bg-indigo-400 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob"
></div>
<div
class="absolute -bottom-40 -left-40 w-80 h-80 bg-purple-400 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-2000"
></div>
<div
class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-pink-400 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-4000"
></div>
</div>
<div class="relative max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-12">
<!-- Titre de la page -->
<div class="text-center mb-8 animate-fade-in">
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white mb-4">
<h1
class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white mb-4"
>
Découvrez les
<span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-purple-600">
<span
class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-purple-600"
>
meilleurs profils
</span>
</h1>
@@ -24,7 +36,9 @@
<!-- Barre de recherche améliorée -->
<div class="max-w-3xl mx-auto animate-slide-up animation-delay-200">
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-4 sm:p-6 hover:shadow-2xl transition-shadow duration-300">
<div
class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-4 sm:p-6 hover:shadow-2xl transition-shadow duration-300"
>
<app-search (onSearchChange)="showNewQuery($event)" />
</div>
</div>
@@ -34,16 +48,21 @@
<!-- Liste des profils -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-8">
@if (loading().isLoading) {
<app-loading message="Chargement des profils..."/>
<app-loading message="Chargement des profils..." />
} @else {
<!-- Titre de section -->
<div class="mb-6 flex items-center justify-between animate-fade-in">
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">
Tous les profils
</h2>
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">Tous les profils</h2>
<div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z" />
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"
/>
</svg>
<span>{{ profiles().length }} profil(s)</span>
</div>