andil/THE-TIP-TOP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Responsive : toutes les pages et composants Header/Footer

Browse Source 
- Header : menu hamburger animé pour mobile, nav cachée sur petit écran
- Footer : grid 2 colonnes sur mobile, 4 colonnes sur desktop
- Accueil : titres et paddings adaptés mobile/tablette/desktop
- ReglesJeu : titres, cartes et CTA responsives
- MentionsLegales / Confidentialite : paddings et titres adaptés mobile
- Contact : padding et formulaire adaptés mobile
- Admin : tableau avec scroll horizontal sur mobile
- Employe : formulaire de recherche en colonne sur mobile
- Ajout composants Layout, Header, Footer et logo depuis branche Alexis

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Emma781227
2026-06-24 10:19:52 +02:00
parent 4727a3a268
commit 4ea733440f
9 changed files with 316 additions and 691 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
frontend/src/pages/Admin.jsx
View File

@@ -13,57 +13,59 @@ const MOCK_USERS = [
export default function Admin() {
return (
<div className="min-h-screen bg-gray-50 p-6">
<div className="min-h-screen bg-gray-50 p-4 sm:p-6">
<div className="max-w-4xl mx-auto">
<h1 className="text-2xl font-bold text-gray-800 mb-6">Tableau de bord Admin</h1>
<h1 className="text-xl sm:text-2xl font-bold text-gray-800 mb-4 sm:mb-6">Tableau de bord Admin</h1>
{/* Stats */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
<div className="grid grid-cols-2 md:grid-cols-4 gap-3 sm:gap-4 mb-6 sm:mb-8">
{[
{ label: 'Participants', value: MOCK_STATS.totalParticipants },
{ label: 'Gains remis', value: MOCK_STATS.gainsRemis },
{ label: 'En attente', value: MOCK_STATS.gainsEnAttente },
{ label: 'Taux participation', value: MOCK_STATS.tauxParticipation },
].map((stat) => (
<div key={stat.label} className="bg-white rounded-xl shadow p-4 text-center">
<p className="text-2xl font-bold text-green-700">{stat.value}</p>
<p className="text-sm text-gray-500 mt-1">{stat.label}</p>
<div key={stat.label} className="bg-white rounded-xl shadow p-3 sm:p-4 text-center">
<p className="text-xl sm:text-2xl font-bold text-green-700">{stat.value}</p>
<p className="text-xs sm:text-sm text-gray-500 mt-1">{stat.label}</p>
</div>
))}
</div>
{/* Tirage au sort */}
<div className="bg-white rounded-xl shadow p-6 mb-6">
<h2 className="text-lg font-bold text-gray-800 mb-3">Grand tirage au sort</h2>
<div className="bg-white rounded-xl shadow p-4 sm:p-6 mb-4 sm:mb-6">
<h2 className="text-base sm:text-lg font-bold text-gray-800 mb-3">Grand tirage au sort</h2>
<button
onClick={() => alert('TODO: connecter au backend')}
className="bg-green-700 hover:bg-green-800 text-white font-semibold px-6 py-2.5 rounded-lg transition-colors"
className="bg-green-700 hover:bg-green-800 text-white font-semibold px-5 sm:px-6 py-2 sm:py-2.5 rounded-lg transition-colors text-sm sm:text-base"
>
Lancer le tirage
</button>
</div>
{/* Liste participants */}
<div className="bg-white rounded-xl shadow p-6">
<h2 className="text-lg font-bold text-gray-800 mb-4">Participants</h2>
<table className="w-full text-sm">
<thead>
<tr className="text-left text-gray-500 border-b">
<th className="pb-2">Nom</th>
<th className="pb-2">Email</th>
<th className="pb-2 text-right">Gains</th>
</tr>
</thead>
<tbody>
{MOCK_USERS.map((user) => (
<tr key={user.id} className="border-b last:border-0">
<td className="py-3 font-medium text-gray-800">{user.name}</td>
<td className="py-3 text-gray-500">{user.email}</td>
<td className="py-3 text-right text-green-700 font-semibold">{user.gains}</td>
<div className="bg-white rounded-xl shadow p-4 sm:p-6">
<h2 className="text-base sm:text-lg font-bold text-gray-800 mb-4">Participants</h2>
<div className="overflow-x-auto -mx-4 sm:mx-0">
<table className="w-full text-sm min-w-[400px]">
<thead>
<tr className="text-left text-gray-500 border-b">
<th className="pb-2 px-4 sm:px-0">Nom</th>
<th className="pb-2 px-4 sm:px-0">Email</th>
<th className="pb-2 px-4 sm:px-0 text-right">Gains</th>
</tr>
))}
</tbody>
</table>
</thead>
<tbody>
{MOCK_USERS.map((user) => (
<tr key={user.id} className="border-b last:border-0">
<td className="py-3 px-4 sm:px-0 font-medium text-gray-800 whitespace-nowrap">{user.name}</td>
<td className="py-3 px-4 sm:px-0 text-gray-500 text-xs sm:text-sm">{user.email}</td>
<td className="py-3 px-4 sm:px-0 text-right text-green-700 font-semibold">{user.gains}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
</div>