WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Portail RH - Tableau de Bord</title> <script src="https://cdn.tailwindcss.com"></script> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"> <script> tailwind.config = { theme: { extend: { fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'], }, } } } </script> <style> body { font-family: 'Inter', sans-serif; } /* Styles pour la sidebar mobile */ @media (max-width: 1023px) { .sidebar { position: fixed; left: -100%; top: 0; height: 100vh; z-index: 50; transition: left 0.3s ease; box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); } .sidebar.active { left: 0; } .overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 40; } .overlay.active { display: block; } } /* Animation pour le menu mobile */ @keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } } .slide-in { animation: slideIn 0.3s ease-out; } </style> </head> <body class="bg-gray-50 antialiased"> <!-- Mobile Menu Button --> <div class="lg:hidden fixed top-4 left-4 z-50"> <button id="hamburgerBtn" class="text-gray-700 text-2xl bg-white p-2 rounded-lg shadow-sm"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/> </svg> </button> </div> <!-- Overlay for mobile sidebar --> <div class="overlay" id="overlay"></div> <div class="flex min-h-screen"> <!-- Sidebar Blanche avec les icônes SVG --> <div class="sidebar w-64 lg:w-72 flex-shrink-0 flex flex-col lg:block bg-white" id="sidebar"> <div class="flex justify-between items-center p-6 border-b border-gray-100"> <div> <h1 class="text-xl font-bold text-gray-900">Portail Employé</h1> <p class="text-sm text-gray-500 mt-0.5">Espace Congés</p> </div> <button id="closeSidebar" class="lg:hidden text-gray-600 text-xl"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/> </svg> </button> </div> <!-- Navigation avec les icônes SVG --> <nav class="flex-1 py-6"> <!-- Tableau de bord --> <a href="tableau-de-bord.html" class="flex items-center px-6 py-3 text-sm font-medium text-blue-600 bg-blue-50 border-l-4 border-blue-600"> <svg class="w-5 h-5 mr-3 text-blue-600" fill="currentColor" viewBox="0 0 20 20"> <rect x="3" y="3" width="6" height="6" rx="1"/> <rect x="11" y="3" width="6" height="6" rx="1"/> <rect x="3" y="11" width="6" height="6" rx="1"/> <rect x="11" y="11" width="6" height="6" rx="1"/> </svg> Tableau de bord </a> <!-- Mes demandes --> <a href="Demandes.html" class="flex items-center px-6 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors"> <svg class="w-5 h-5 mr-3 text-gray-400" fill="currentColor" viewBox="0 0 20 20"> <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/> <path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"/> </svg> Mes demandes </a> <!-- Congés --> <a href="nouvelle-demande.html" class="flex items-center px-6 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors"> <svg class="w-5 h-5 mr-3 text-gray-400" fill="currentColor" viewBox="0 0 20 20"> <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/> <path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"/> </svg> Congés </a> <!-- Gestion des Employés --> <a href="gestion-employe.html" class="flex items-center px-6 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors"> <svg class="w-5 h-5 mr-3 text-gray-400" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"/> </svg> Gestion </a> <!-- Mon profil --> <a href="mon-profil.html" class="flex items-center px-6 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors"> <svg class="w-5 h-5 mr-3 text-gray-400" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"/> </svg> Mon profil </a> </nav> <!-- Support Section --> <div class="p-6 border-t border-gray-100"> <div class="bg-blue-50 rounded-xl p-4 mb-4"> <div class="flex items-center mb-2"> <svg class="w-5 h-5 text-blue-600 mr-2" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/> </svg> <span class="text-sm font-semibold text-blue-600">Support RH</span> </div> <p class="text-xs text-gray-600 mb-1">Besoin d'aide avec vos congés ?</p> <p class="text-xs text-gray-600">Contactez l'équipe RH.</p> </div> <!-- Logout --> <button class="flex items-center w-full px-0 py-2 text-sm text-gray-500 hover:text-gray-700 transition-colors"> <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/> </svg> Déconnexion </button> </div> </div> <!-- Main Content --> <main class="flex-1 flex flex-col min-w-0"> <!-- Header --> <header class="bg-white border-b border-gray-200 px-4 sm:px-6 lg:px-12 py-4 sticky top-0 z-40"> <div class="flex items-center justify-between"> <div class="flex items-center gap-3"> <!-- Date --> <p class="text-xs sm:text-sm text-gray-500">Mercredi, 24 Mai 2025</p> </div> <div class="flex items-center gap-2 sm:gap-4"> <!-- Notification Button --> <button class="relative w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors flex items-center justify-center"> <svg class="w-4 h-4 sm:w-5 sm:h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/> </svg> <span class="absolute top-1.5 right-1.5 sm:top-2 sm:right-2 w-2 h-2 bg-red-500 rounded-full border-2 border-white"></span> </button> <!-- User Info --> <div class="hidden sm:flex items-center gap-3"> <div class="text-right"> <h3 class="text-sm font-semibold text-gray-900">Thomas Dupont</h3> <p class="text-xs text-gray-500">Développeur Senior</p> </div> <div class="w-10 h-10 rounded-full overflow-hidden bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center"> <img src="https://plus.unsplash.com/premium_photo-1682144187125-b55e638cf286?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8bWVuJTIwcG9ydHJhaXR8ZW58MHx8MHx8fDA%3D" alt="Photo" class="w-full h-full object-cover"> </div> </div> <!-- User Avatar Mobile --> <div class="sm:hidden w-8 h-8 rounded-full overflow-hidden bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center"> <img src="https://plus.unsplash.com/premium_photo-1682144187125-b55e638cf286?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8bWVuJTIwcG9ydHJhaXR8ZW58MHx8MHx8fDA%3D" alt="Photo" class="w-full h-full object-cover"> </div> </div> </div> </header> <!-- Dashboard Content --> <div class="flex-1 overflow-y-auto px-4 sm:px-6 lg:px-12 py-6 sm:py-8 lg:py-10"> <!-- Dashboard Header --> <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between mb-6 sm:mb-8 gap-4"> <div> <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-2">Tableau de Bord</h2> <p class="text-sm sm:text-base text-gray-600">Bonjour, Thomas. Voici le récapitulatif de vos congés.</p> </div> <div class="flex gap-3"> <button class="flex items-center justify-center gap-2 px-4 sm:px-5 py-2 sm:py-2.5 bg-white border border-gray-300 rounded-lg text-xs sm:text-sm font-semibold text-gray-700 hover:bg-gray-50 transition-colors"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/> </svg> <span class="hidden sm:inline">Historique</span> </button> <button class="flex items-center justify-center gap-2 px-4 sm:px-5 py-2 sm:py-2.5 bg-blue-600 rounded-lg text-xs sm:text-sm font-semibold text-white hover:bg-blue-700 transition-colors"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/> </svg> <a href="nouvelle-demande.html"> <span class="hidden sm:inline">Nouvelle demande</span> <span class="sm:hidden">Nouveau</span> </a> </button> </div> </div> <!-- Stats Cards --> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 mb-8 sm:mb-10"> <!-- Card 1 - Congés Restants --> <div class="bg-white rounded-xl sm:rounded-2xl p-6 sm:p-8 shadow-sm relative overflow-hidden"> <div class="relative z-10"> <div class="w-10 h-10 sm:w-12 sm:h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-4 sm:mb-5"> <svg class="w-5 h-5 sm:w-6 sm:h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/> </svg> </div> <p class="text-xs sm:text-sm text-gray-500 mb-2">Congés Restants</p> <h3 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-3 sm:mb-4">22 Jours</h3> <div class="mb-2"> <div class="h-1.5 bg-gray-100 rounded-full overflow-hidden"> <div class="h-full bg-blue-600 rounded-full" style="width: 75%"></div> </div> </div> <p class="text-xs text-gray-500">75% de votre solde annuel</p> </div> <svg class="absolute -right-6 -bottom-6 w-28 h-28 sm:w-36 sm:h-36 text-gray-900 opacity-[0.02]" fill="currentColor" viewBox="0 0 24 24"> <path d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/> </svg> </div> <!-- Card 2 - Demandes en Attente --> <div class="bg-white rounded-xl sm:rounded-2xl p-6 sm:p-8 shadow-sm relative overflow-hidden"> <div class="relative z-10"> <div class="w-10 h-10 sm:w-12 sm:h-12 bg-orange-100 rounded-xl flex items-center justify-center mb-4 sm:mb-5"> <svg class="w-5 h-5 sm:w-6 sm:h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/> </svg> </div> <p class="text-xs sm:text-sm text-gray-500 mb-2">Demandes en Attente</p> <h3 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-3 sm:mb-4">1</h3> <span class="inline-block px-2.5 sm:px-3 py-1 bg-orange-100 text-orange-600 rounded-full text-xs font-semibold"> En cours de validation </span> </div> <svg class="absolute -right-6 -bottom-6 w-28 h-28 sm:w-36 sm:h-36 text-gray-900 opacity-[0.02]" fill="currentColor" viewBox="0 0 24 24"> <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/> <path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"/> </svg> </div> <!-- Card 3 - Absences cette année --> <div class="bg-white rounded-xl sm:rounded-2xl p-6 sm:p-8 shadow-sm relative overflow-hidden"> <div class="relative z-10"> <div class="w-10 h-10 sm:w-12 sm:h-12 bg-purple-100 rounded-xl flex items-center justify-center mb-4 sm:mb-5"> <svg class="w-5 h-5 sm:w-6 sm:h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/> </svg> </div> <p class="text-xs sm:text-sm text-gray-500 mb-2">Absences cette année</p> <h3 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-3 sm:mb-4">2 Jours</h3> <p class="text-xs text-gray-500">Dernière absence : Février 2024</p> </div> <svg class="absolute -right-6 -bottom-6 w-28 h-28 sm:w-36 sm:h-36 text-gray-900 opacity-[0.02]" fill="currentColor" viewBox="0 0 24 24"> <path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z"/> </svg> </div> </div> <!-- Content Row --> <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6"> <!-- Activity Section --> <div class="lg:col-span-2 bg-white rounded-xl sm:rounded-2xl p-4 sm:p-6 lg:p-8 shadow-sm"> <div class="flex items-center justify-between mb-4 sm:mb-6"> <h3 class="text-lg sm:text-xl font-bold text-gray-900">Activité Récente</h3> <a href="#" class="text-xs sm:text-sm font-semibold text-blue-600 hover:text-blue-700">Voir tout</a> </div> <!-- Table Desktop --> <div class="hidden sm:block overflow-x-auto"> <table class="w-full"> <thead> <tr class="border-b border-gray-100"> <th class="text-left text-xs font-semibold text-gray-500 uppercase tracking-wider pb-3">Type</th> <th class="text-left text-xs font-semibold text-gray-500 uppercase tracking-wider pb-3">Dates</th> <th class="text-left text-xs font-semibold text-gray-500 uppercase tracking-wider pb-3">Durée</th> <th class="text-left text-xs font-semibold text-gray-500 uppercase tracking-wider pb-3">Statut</th> </tr> </thead> <tbody class="divide-y divide-gray-50"> <!-- Row 1 --> <tr class="hover:bg-gray-50 transition-colors"> <td class="py-4"> <div class="flex items-center gap-3"> <div class="w-2 h-2 bg-blue-500 rounded-full"></div> <span class="text-sm font-medium text-gray-900">Congés Payés</span> </div> </td> <td class="py-4"> <span class="text-sm text-gray-600">12 Juin - 16 Juin</span> </td> <td class="py-4"> <span class="text-sm text-gray-600">5 Jours</span> </td> <td class="py-4"> <span class="inline-flex items-center gap-1.5 px-2.5 py-1 bg-orange-100 text-orange-700 rounded-md text-xs font-medium"> <span class="w-1.5 h-1.5 bg-orange-500 rounded-full"></span> En attente </span> </td> </tr> <!-- Row 2 --> <tr class="hover:bg-gray-50 transition-colors"> <td class="py-4"> <div class="flex items-center gap-3"> <div class="w-2 h-2 bg-purple-500 rounded-full"></div> <span class="text-sm font-medium text-gray-900">Absence Maladie</span> </div> </td> <td class="py-4"> <span class="text-sm text-gray-600">14 Fév - 15 Fév</span> </td> <td class="py-4"> <span class="text-sm text-gray-600">2 Jours</span> </td> <td class="py-4"> <span class="inline-flex items-center gap-1.5 px-2.5 py-1 bg-green-100 text-green-700 rounded-md text-xs font-medium"> <span class="w-1.5 h-1.5 bg-green-500 rounded-full"></span> Validé </span> </td> </tr> <!-- Row 3 --> <tr class="hover:bg-gray-50 transition-colors"> <td class="py-4"> <div class="flex items-center gap-3"> <div class="w-2 h-2 bg-blue-500 rounded-full"></div> <span class="text-sm font-medium text-gray-900">Congés Payés</span> </div> </td> <td class="py-4"> <span class="text-sm text-gray-600">23 Déc - 30 Déc</span> </td> <td class="py-4"> <span class="text-sm text-gray-600">6 Jours</span> </td> <td class="py-4"> <span class="inline-flex items-center gap-1.5 px-2.5 py-1 bg-green-100 text-green-700 rounded-md text-xs font-medium"> <span class="w-1.5 h-1.5 bg-green-500 rounded-full"></span> Validé </span> </td> </tr> <!-- Row 4 --> <tr class="hover:bg-gray-50 transition-colors"> <td class="py-4"> <div class="flex items-center gap-3"> <div class="w-2 h-2 bg-gray-400 rounded-full"></div> <span class="text-sm font-medium text-gray-900">RTT</span> </div> </td> <td class="py-4"> <span class="text-sm text-gray-600">10 Nov</span> </td> <td class="py-4"> <span class="text-sm text-gray-600">1 Jour</span> </td> <td class="py-4"> <span class="inline-flex items-center gap-1.5 px-2.5 py-1 bg-red-100 text-red-700 rounded-md text-xs font-medium"> <span class="w-1.5 h-1.5 bg-red-500 rounded-full"></span> Refusé </span> </td> </tr> </tbody> </table> </div> <!-- Mobile Cards --> <div class="sm:hidden space-y-3"> <!-- Card 1 --> <div class="border border-gray-100 rounded-lg p-4"> <div class="flex items-start justify-between mb-3"> <div class="flex items-center gap-2"> <div class="w-2 h-2 bg-blue-500 rounded-full"></div> <span class="text-sm font-semibold text-gray-900">Congés Payés</span> </div> <span class="inline-flex items-center gap-1.5 px-2 py-0.5 bg-orange-100 text-orange-700 rounded-md text-xs font-medium"> <span class="w-1.5 h-1.5 bg-orange-500 rounded-full"></span> En attente </span> </div> <p class="text-xs text-gray-600 mb-1">12 Juin - 16 Juin</p> <p class="text-xs text-gray-500">5 Jours</p> </div> <!-- Card 2 --> <div class="border border-gray-100 rounded-lg p-4"> <div class="flex items-start justify-between mb-3"> <div class="flex items-center gap-2"> <div class="w-2 h-2 bg-purple-500 rounded-full"></div> <span class="text-sm font-semibold text-gray-900">Absence Maladie</span> </div> <span class="inline-flex items-center gap-1.5 px-2 py-0.5 bg-green-100 text-green-700 rounded-md text-xs font-medium"> <span class="w-1.5 h-1.5 bg-green-500 rounded-full"></span> Validé </span> </div> <p class="text-xs text-gray-600 mb-1">14 Fév - 15 Fév</p> <p class="text-xs text-gray-500">2 Jours</p> </div> <!-- Card 3 --> <div class="border border-gray-100 rounded-lg p-4"> <div class="flex items-start justify-between mb-3"> <div class="flex items-center gap-2"> <div class="w-2 h-2 bg-blue-500 rounded-full"></div> <span class="text-sm font-semibold text-gray-900">Congés Payés</span> </div> <span class="inline-flex items-center gap-1.5 px-2 py-0.5 bg-green-100 text-green-700 rounded-md text-xs font-medium"> <span class="w-1.5 h-1.5 bg-green-500 rounded-full"></span> Validé </span> </div> <p class="text-xs text-gray-600 mb-1">23 Déc - 30 Déc</p> <p class="text-xs text-gray-500">6 Jours</p> </div> <!-- Card 4 --> <div class="border border-gray-100 rounded-lg p-4"> <div class="flex items-start justify-between mb-3"> <div class="flex items-center gap-2"> <div class="w-2 h-2 bg-gray-400 rounded-full"></div> <span class="text-sm font-semibold text-gray-900">RTT</span> </div> <span class="inline-flex items-center gap-1.5 px-2 py-0.5 bg-red-100 text-red-700 rounded-md text-xs font-medium"> <span class="w-1.5 h-1.5 bg-red-500 rounded-full"></span> Refusé </span> </div> <p class="text-xs text-gray-600 mb-1">10 Nov</p> <p class="text-xs text-gray-500">1 Jour</p> </div> </div> </div> <!-- Right Sidebar --> <div class="space-y-4 sm:space-y-6"> <!-- Upcoming Holidays --> <div class="bg-white rounded-xl sm:rounded-2xl p-5 sm:p-6 shadow-sm"> <h3 class="text-base sm:text-lg font-bold text-gray-900 mb-4 sm:mb-5">Jours Fériés à venir</h3> <div class="space-y-3 sm:space-y-4"> <!-- Holiday 1 --> <div class="flex gap-3 sm:gap-4"> <div class="flex flex-col items-center justify-center w-12 h-12 sm:w-14 sm:h-14 bg-blue-50 rounded-xl flex-shrink-0"> <span class="text-xs font-semibold text-blue-600 uppercase">Juil</span> <span class="text-lg sm:text-xl font-bold text-blue-600">14</span> </div> <div class="flex-1 min-w-0"> <h4 class="text-sm font-semibold text-gray-900">Fête Nationale</h4> <p class="text-xs text-gray-500 mt-0.5">Dimanche</p> </div> </div> <!-- Holiday 2 --> <div class="flex gap-3 sm:gap-4"> <div class="flex flex-col items-center justify-center w-12 h-12 sm:w-14 sm:h-14 bg-blue-50 rounded-xl flex-shrink-0"> <span class="text-xs font-semibold text-blue-600 uppercase">Aoû</span> <span class="text-lg sm:text-xl font-bold text-blue-600">15</span> </div> <div class="flex-1 min-w-0"> <h4 class="text-sm font-semibold text-gray-900">Assomption</h4> <p class="text-xs text-gray-500 mt-0.5">Jeudi</p> </div> </div> <!-- Holiday 3 --> <div class="flex gap-3 sm:gap-4"> <div class="flex flex-col items-center justify-center w-12 h-12 sm:w-14 sm:h-14 bg-blue-50 rounded-xl flex-shrink-0"> <span class="text-xs font-semibold text-blue-600 uppercase">Nov</span> <span class="text-lg sm:text-xl font-bold text-blue-600">01</span> </div> <div class="flex-1 min-w-0"> <h4 class="text-sm font-semibold text-gray-900">Toussaint</h4> <p class="text-xs text-gray-500 mt-0.5">Vendredi</p> </div> </div> </div> </div> <!-- Télétravail Card --> <div class="bg-gradient-to-br from-blue-600 to-blue-700 rounded-xl sm:rounded-2xl p-5 sm:p-6 shadow-lg text-white"> <h3 class="text-base sm:text-lg font-bold mb-3">Télétravail</h3> <p class="text-xs sm:text-sm text-blue-100 mb-4 sm:mb-5 leading-relaxed"> Déclarez vos jours de télétravail directement depuis votre calendrier. </p> <button class="w-full bg-white text-blue-600 font-semibold py-2.5 sm:py-3 px-4 rounded-lg hover:bg-blue-50 transition-colors text-xs sm:text-sm"> <a href="calendrier.html" class="block w-full h-full text-blue-600"> Accéder au calendrier </a> </button> </div> </div> </div> </div> </main> </div> <!-- JavaScript --> <script> // Mobile Menu document.addEventListener('DOMContentLoaded', function() { const hamburgerBtn = document.getElementById('hamburgerBtn'); const closeSidebar = document.getElementById('closeSidebar'); const sidebar = document.getElementById('sidebar'); const overlay = document.getElementById('overlay'); // sidebar sur un click hamburger function toggleSidebar() { sidebar.classList.toggle('active'); overlay.classList.toggle('active'); document.body.style.overflow = sidebar.classList.contains('active') ? 'hidden' : ''; } if (hamburgerBtn) { hamburgerBtn.addEventListener('click', toggleSidebar); } if (closeSidebar) { closeSidebar.addEventListener('click', toggleSidebar); } if (overlay) { overlay.addEventListener('click', toggleSidebar); } // Close de la sidebar document.addEventListener('click', function(event) { if (window.innerWidth < 1024 && sidebar.classList.contains('active') && !sidebar.contains(event.target) && !hamburgerBtn.contains(event.target)) { toggleSidebar(); } }); // Adjustement sidebar window.addEventListener('resize', function() { if (window.innerWidth >= 1024) { sidebar.classList.remove('active'); overlay.classList.remove('active'); document.body.style.overflow = ''; } }); }); </script> </body> </html>
/* Replace with your CSS Code (Leave empty if not needed) */
/* Replace with your JS Code (Leave empty if not needed) */
Preview
Open Advanced Editor
HTML
CSS
JS
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Portail RH - Tableau de Bord</title> <script src="https://cdn.tailwindcss.com"></script> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"> <script> tailwind.config = { theme: { extend: { fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'], }, } } } </script> <style> body { font-family: 'Inter', sans-serif; } /* Styles pour la sidebar mobile */ @media (max-width: 1023px) { .sidebar { position: fixed; left: -100%; top: 0; height: 100vh; z-index: 50; transition: left 0.3s ease; box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); } .sidebar.active { left: 0; } .overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 40; } .overlay.active { display: block; } } /* Animation pour le menu mobile */ @keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } } .slide-in { animation: slideIn 0.3s ease-out; } </style> </head> <body class="bg-gray-50 antialiased"> <!-- Mobile Menu Button --> <div class="lg:hidden fixed top-4 left-4 z-50"> <button id="hamburgerBtn" class="text-gray-700 text-2xl bg-white p-2 rounded-lg shadow-sm"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/> </svg> </button> </div> <!-- Overlay for mobile sidebar --> <div class="overlay" id="overlay"></div> <div class="flex min-h-screen"> <!-- Sidebar Blanche avec les icônes SVG --> <div class="sidebar w-64 lg:w-72 flex-shrink-0 flex flex-col lg:block bg-white" id="sidebar"> <div class="flex justify-between items-center p-6 border-b border-gray-100"> <div> <h1 class="text-xl font-bold text-gray-900">Portail Employé</h1> <p class="text-sm text-gray-500 mt-0.5">Espace Congés</p> </div> <button id="closeSidebar" class="lg:hidden text-gray-600 text-xl"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/> </svg> </button> </div> <!-- Navigation avec les icônes SVG --> <nav class="flex-1 py-6"> <!-- Tableau de bord --> <a href="tableau-de-bord.html" class="flex items-center px-6 py-3 text-sm font-medium text-blue-600 bg-blue-50 border-l-4 border-blue-600"> <svg class="w-5 h-5 mr-3 text-blue-600" fill="currentColor" viewBox="0 0 20 20"> <rect x="3" y="3" width="6" height="6" rx="1"/> <rect x="11" y="3" width="6" height="6" rx="1"/> <rect x="3" y="11" width="6" height="6" rx="1"/> <rect x="11" y="11" width="6" height="6" rx="1"/> </svg> Tableau de bord </a> <!-- Mes demandes --> <a href="Demandes.html" class="flex items-center px-6 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors"> <svg class="w-5 h-5 mr-3 text-gray-400" fill="currentColor" viewBox="0 0 20 20"> <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/> <path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"/> </svg> Mes demandes </a> <!-- Congés --> <a href="nouvelle-demande.html" class="flex items-center px-6 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors"> <svg class="w-5 h-5 mr-3 text-gray-400" fill="currentColor" viewBox="0 0 20 20"> <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/> <path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"/> </svg> Congés </a> <!-- Gestion des Employés --> <a href="gestion-employe.html" class="flex items-center px-6 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors"> <svg class="w-5 h-5 mr-3 text-gray-400" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"/> </svg> Gestion </a> <!-- Mon profil --> <a href="mon-profil.html" class="flex items-center px-6 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors"> <svg class="w-5 h-5 mr-3 text-gray-400" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"/> </svg> Mon profil </a> </nav> <!-- Support Section --> <div class="p-6 border-t border-gray-100"> <div class="bg-blue-50 rounded-xl p-4 mb-4"> <div class="flex items-center mb-2"> <svg class="w-5 h-5 text-blue-600 mr-2" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/> </svg> <span class="text-sm font-semibold text-blue-600">Support RH</span> </div> <p class="text-xs text-gray-600 mb-1">Besoin d'aide avec vos congés ?</p> <p class="text-xs text-gray-600">Contactez l'équipe RH.</p> </div> <!-- Logout --> <button class="flex items-center w-full px-0 py-2 text-sm text-gray-500 hover:text-gray-700 transition-colors"> <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/> </svg> Déconnexion </button> </div> </div> <!-- Main Content --> <main class="flex-1 flex flex-col min-w-0"> <!-- Header --> <header class="bg-white border-b border-gray-200 px-4 sm:px-6 lg:px-12 py-4 sticky top-0 z-40"> <div class="flex items-center justify-between"> <div class="flex items-center gap-3"> <!-- Date --> <p class="text-xs sm:text-sm text-gray-500">Mercredi, 24 Mai 2025</p> </div> <div class="flex items-center gap-2 sm:gap-4"> <!-- Notification Button --> <button class="relative w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors flex items-center justify-center"> <svg class="w-4 h-4 sm:w-5 sm:h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/> </svg> <span class="absolute top-1.5 right-1.5 sm:top-2 sm:right-2 w-2 h-2 bg-red-500 rounded-full border-2 border-white"></span> </button> <!-- User Info --> <div class="hidden sm:flex items-center gap-3"> <div class="text-right"> <h3 class="text-sm font-semibold text-gray-900">Thomas Dupont</h3> <p class="text-xs text-gray-500">Développeur Senior</p> </div> <div class="w-10 h-10 rounded-full overflow-hidden bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center"> <img src="https://plus.unsplash.com/premium_photo-1682144187125-b55e638cf286?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8bWVuJTIwcG9ydHJhaXR8ZW58MHx8MHx8fDA%3D" alt="Photo" class="w-full h-full object-cover"> </div> </div> <!-- User Avatar Mobile --> <div class="sm:hidden w-8 h-8 rounded-full overflow-hidden bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center"> <img src="https://plus.unsplash.com/premium_photo-1682144187125-b55e638cf286?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8bWVuJTIwcG9ydHJhaXR8ZW58MHx8MHx8fDA%3D" alt="Photo" class="w-full h-full object-cover"> </div> </div> </div> </header> <!-- Dashboard Content --> <div class="flex-1 overflow-y-auto px-4 sm:px-6 lg:px-12 py-6 sm:py-8 lg:py-10"> <!-- Dashboard Header --> <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between mb-6 sm:mb-8 gap-4"> <div> <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-2">Tableau de Bord</h2> <p class="text-sm sm:text-base text-gray-600">Bonjour, Thomas. Voici le récapitulatif de vos congés.</p> </div> <div class="flex gap-3"> <button class="flex items-center justify-center gap-2 px-4 sm:px-5 py-2 sm:py-2.5 bg-white border border-gray-300 rounded-lg text-xs sm:text-sm font-semibold text-gray-700 hover:bg-gray-50 transition-colors"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/> </svg> <span class="hidden sm:inline">Historique</span> </button> <button class="flex items-center justify-center gap-2 px-4 sm:px-5 py-2 sm:py-2.5 bg-blue-600 rounded-lg text-xs sm:text-sm font-semibold text-white hover:bg-blue-700 transition-colors"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/> </svg> <a href="nouvelle-demande.html"> <span class="hidden sm:inline">Nouvelle demande</span> <span class="sm:hidden">Nouveau</span> </a> </button> </div> </div> <!-- Stats Cards --> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 mb-8 sm:mb-10"> <!-- Card 1 - Congés Restants --> <div class="bg-white rounded-xl sm:rounded-2xl p-6 sm:p-8 shadow-sm relative overflow-hidden"> <div class="relative z-10"> <div class="w-10 h-10 sm:w-12 sm:h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-4 sm:mb-5"> <svg class="w-5 h-5 sm:w-6 sm:h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/> </svg> </div> <p class="text-xs sm:text-sm text-gray-500 mb-2">Congés Restants</p> <h3 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-3 sm:mb-4">22 Jours</h3> <div class="mb-2"> <div class="h-1.5 bg-gray-100 rounded-full overflow-hidden"> <div class="h-full bg-blue-600 rounded-full" style="width: 75%"></div> </div> </div> <p class="text-xs text-gray-500">75% de votre solde annuel</p> </div> <svg class="absolute -right-6 -bottom-6 w-28 h-28 sm:w-36 sm:h-36 text-gray-900 opacity-[0.02]" fill="currentColor" viewBox="0 0 24 24"> <path d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/> </svg> </div> <!-- Card 2 - Demandes en Attente --> <div class="bg-white rounded-xl sm:rounded-2xl p-6 sm:p-8 shadow-sm relative overflow-hidden"> <div class="relative z-10"> <div class="w-10 h-10 sm:w-12 sm:h-12 bg-orange-100 rounded-xl flex items-center justify-center mb-4 sm:mb-5"> <svg class="w-5 h-5 sm:w-6 sm:h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/> </svg> </div> <p class="text-xs sm:text-sm text-gray-500 mb-2">Demandes en Attente</p> <h3 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-3 sm:mb-4">1</h3> <span class="inline-block px-2.5 sm:px-3 py-1 bg-orange-100 text-orange-600 rounded-full text-xs font-semibold"> En cours de validation </span> </div> <svg class="absolute -right-6 -bottom-6 w-28 h-28 sm:w-36 sm:h-36 text-gray-900 opacity-[0.02]" fill="currentColor" viewBox="0 0 24 24"> <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/> <path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"/> </svg> </div> <!-- Card 3 - Absences cette année --> <div class="bg-white rounded-xl sm:rounded-2xl p-6 sm:p-8 shadow-sm relative overflow-hidden"> <div class="relative z-10"> <div class="w-10 h-10 sm:w-12 sm:h-12 bg-purple-100 rounded-xl flex items-center justify-center mb-4 sm:mb-5"> <svg class="w-5 h-5 sm:w-6 sm:h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/> </svg> </div> <p class="text-xs sm:text-sm text-gray-500 mb-2">Absences cette année</p> <h3 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-3 sm:mb-4">2 Jours</h3> <p class="text-xs text-gray-500">Dernière absence : Février 2024</p> </div> <svg class="absolute -right-6 -bottom-6 w-28 h-28 sm:w-36 sm:h-36 text-gray-900 opacity-[0.02]" fill="currentColor" viewBox="0 0 24 24"> <path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z"/> </svg> </div> </div> <!-- Content Row --> <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6"> <!-- Activity Section --> <div class="lg:col-span-2 bg-white rounded-xl sm:rounded-2xl p-4 sm:p-6 lg:p-8 shadow-sm"> <div class="flex items-center justify-between mb-4 sm:mb-6"> <h3 class="text-lg sm:text-xl font-bold text-gray-900">Activité Récente</h3> <a href="#" class="text-xs sm:text-sm font-semibold text-blue-600 hover:text-blue-700">Voir tout</a> </div> <!-- Table Desktop --> <div class="hidden sm:block overflow-x-auto"> <table class="w-full"> <thead> <tr class="border-b border-gray-100"> <th class="text-left text-xs font-semibold text-gray-500 uppercase tracking-wider pb-3">Type</th> <th class="text-left text-xs font-semibold text-gray-500 uppercase tracking-wider pb-3">Dates</th> <th class="text-left text-xs font-semibold text-gray-500 uppercase tracking-wider pb-3">Durée</th> <th class="text-left text-xs font-semibold text-gray-500 uppercase tracking-wider pb-3">Statut</th> </tr> </thead> <tbody class="divide-y divide-gray-50"> <!-- Row 1 --> <tr class="hover:bg-gray-50 transition-colors"> <td class="py-4"> <div class="flex items-center gap-3"> <div class="w-2 h-2 bg-blue-500 rounded-full"></div> <span class="text-sm font-medium text-gray-900">Congés Payés</span> </div> </td> <td class="py-4"> <span class="text-sm text-gray-600">12 Juin - 16 Juin</span> </td> <td class="py-4"> <span class="text-sm text-gray-600">5 Jours</span> </td> <td class="py-4"> <span class="inline-flex items-center gap-1.5 px-2.5 py-1 bg-orange-100 text-orange-700 rounded-md text-xs font-medium"> <span class="w-1.5 h-1.5 bg-orange-500 rounded-full"></span> En attente </span> </td> </tr> <!-- Row 2 --> <tr class="hover:bg-gray-50 transition-colors"> <td class="py-4"> <div class="flex items-center gap-3"> <div class="w-2 h-2 bg-purple-500 rounded-full"></div> <span class="text-sm font-medium text-gray-900">Absence Maladie</span> </div> </td> <td class="py-4"> <span class="text-sm text-gray-600">14 Fév - 15 Fév</span> </td> <td class="py-4"> <span class="text-sm text-gray-600">2 Jours</span> </td> <td class="py-4"> <span class="inline-flex items-center gap-1.5 px-2.5 py-1 bg-green-100 text-green-700 rounded-md text-xs font-medium"> <span class="w-1.5 h-1.5 bg-green-500 rounded-full"></span> Validé </span> </td> </tr> <!-- Row 3 --> <tr class="hover:bg-gray-50 transition-colors"> <td class="py-4"> <div class="flex items-center gap-3"> <div class="w-2 h-2 bg-blue-500 rounded-full"></div> <span class="text-sm font-medium text-gray-900">Congés Payés</span> </div> </td> <td class="py-4"> <span class="text-sm text-gray-600">23 Déc - 30 Déc</span> </td> <td class="py-4"> <span class="text-sm text-gray-600">6 Jours</span> </td> <td class="py-4"> <span class="inline-flex items-center gap-1.5 px-2.5 py-1 bg-green-100 text-green-700 rounded-md text-xs font-medium"> <span class="w-1.5 h-1.5 bg-green-500 rounded-full"></span> Validé </span> </td> </tr> <!-- Row 4 --> <tr class="hover:bg-gray-50 transition-colors"> <td class="py-4"> <div class="flex items-center gap-3"> <div class="w-2 h-2 bg-gray-400 rounded-full"></div> <span class="text-sm font-medium text-gray-900">RTT</span> </div> </td> <td class="py-4"> <span class="text-sm text-gray-600">10 Nov</span> </td> <td class="py-4"> <span class="text-sm text-gray-600">1 Jour</span> </td> <td class="py-4"> <span class="inline-flex items-center gap-1.5 px-2.5 py-1 bg-red-100 text-red-700 rounded-md text-xs font-medium"> <span class="w-1.5 h-1.5 bg-red-500 rounded-full"></span> Refusé </span> </td> </tr> </tbody> </table> </div> <!-- Mobile Cards --> <div class="sm:hidden space-y-3"> <!-- Card 1 --> <div class="border border-gray-100 rounded-lg p-4"> <div class="flex items-start justify-between mb-3"> <div class="flex items-center gap-2"> <div class="w-2 h-2 bg-blue-500 rounded-full"></div> <span class="text-sm font-semibold text-gray-900">Congés Payés</span> </div> <span class="inline-flex items-center gap-1.5 px-2 py-0.5 bg-orange-100 text-orange-700 rounded-md text-xs font-medium"> <span class="w-1.5 h-1.5 bg-orange-500 rounded-full"></span> En attente </span> </div> <p class="text-xs text-gray-600 mb-1">12 Juin - 16 Juin</p> <p class="text-xs text-gray-500">5 Jours</p> </div> <!-- Card 2 --> <div class="border border-gray-100 rounded-lg p-4"> <div class="flex items-start justify-between mb-3"> <div class="flex items-center gap-2"> <div class="w-2 h-2 bg-purple-500 rounded-full"></div> <span class="text-sm font-semibold text-gray-900">Absence Maladie</span> </div> <span class="inline-flex items-center gap-1.5 px-2 py-0.5 bg-green-100 text-green-700 rounded-md text-xs font-medium"> <span class="w-1.5 h-1.5 bg-green-500 rounded-full"></span> Validé </span> </div> <p class="text-xs text-gray-600 mb-1">14 Fév - 15 Fév</p> <p class="text-xs text-gray-500">2 Jours</p> </div> <!-- Card 3 --> <div class="border border-gray-100 rounded-lg p-4"> <div class="flex items-start justify-between mb-3"> <div class="flex items-center gap-2"> <div class="w-2 h-2 bg-blue-500 rounded-full"></div> <span class="text-sm font-semibold text-gray-900">Congés Payés</span> </div> <span class="inline-flex items-center gap-1.5 px-2 py-0.5 bg-green-100 text-green-700 rounded-md text-xs font-medium"> <span class="w-1.5 h-1.5 bg-green-500 rounded-full"></span> Validé </span> </div> <p class="text-xs text-gray-600 mb-1">23 Déc - 30 Déc</p> <p class="text-xs text-gray-500">6 Jours</p> </div> <!-- Card 4 --> <div class="border border-gray-100 rounded-lg p-4"> <div class="flex items-start justify-between mb-3"> <div class="flex items-center gap-2"> <div class="w-2 h-2 bg-gray-400 rounded-full"></div> <span class="text-sm font-semibold text-gray-900">RTT</span> </div> <span class="inline-flex items-center gap-1.5 px-2 py-0.5 bg-red-100 text-red-700 rounded-md text-xs font-medium"> <span class="w-1.5 h-1.5 bg-red-500 rounded-full"></span> Refusé </span> </div> <p class="text-xs text-gray-600 mb-1">10 Nov</p> <p class="text-xs text-gray-500">1 Jour</p> </div> </div> </div> <!-- Right Sidebar --> <div class="space-y-4 sm:space-y-6"> <!-- Upcoming Holidays --> <div class="bg-white rounded-xl sm:rounded-2xl p-5 sm:p-6 shadow-sm"> <h3 class="text-base sm:text-lg font-bold text-gray-900 mb-4 sm:mb-5">Jours Fériés à venir</h3> <div class="space-y-3 sm:space-y-4"> <!-- Holiday 1 --> <div class="flex gap-3 sm:gap-4"> <div class="flex flex-col items-center justify-center w-12 h-12 sm:w-14 sm:h-14 bg-blue-50 rounded-xl flex-shrink-0"> <span class="text-xs font-semibold text-blue-600 uppercase">Juil</span> <span class="text-lg sm:text-xl font-bold text-blue-600">14</span> </div> <div class="flex-1 min-w-0"> <h4 class="text-sm font-semibold text-gray-900">Fête Nationale</h4> <p class="text-xs text-gray-500 mt-0.5">Dimanche</p> </div> </div> <!-- Holiday 2 --> <div class="flex gap-3 sm:gap-4"> <div class="flex flex-col items-center justify-center w-12 h-12 sm:w-14 sm:h-14 bg-blue-50 rounded-xl flex-shrink-0"> <span class="text-xs font-semibold text-blue-600 uppercase">Aoû</span> <span class="text-lg sm:text-xl font-bold text-blue-600">15</span> </div> <div class="flex-1 min-w-0"> <h4 class="text-sm font-semibold text-gray-900">Assomption</h4> <p class="text-xs text-gray-500 mt-0.5">Jeudi</p> </div> </div> <!-- Holiday 3 --> <div class="flex gap-3 sm:gap-4"> <div class="flex flex-col items-center justify-center w-12 h-12 sm:w-14 sm:h-14 bg-blue-50 rounded-xl flex-shrink-0"> <span class="text-xs font-semibold text-blue-600 uppercase">Nov</span> <span class="text-lg sm:text-xl font-bold text-blue-600">01</span> </div> <div class="flex-1 min-w-0"> <h4 class="text-sm font-semibold text-gray-900">Toussaint</h4> <p class="text-xs text-gray-500 mt-0.5">Vendredi</p> </div> </div> </div> </div> <!-- Télétravail Card --> <div class="bg-gradient-to-br from-blue-600 to-blue-700 rounded-xl sm:rounded-2xl p-5 sm:p-6 shadow-lg text-white"> <h3 class="text-base sm:text-lg font-bold mb-3">Télétravail</h3> <p class="text-xs sm:text-sm text-blue-100 mb-4 sm:mb-5 leading-relaxed"> Déclarez vos jours de télétravail directement depuis votre calendrier. </p> <button class="w-full bg-white text-blue-600 font-semibold py-2.5 sm:py-3 px-4 rounded-lg hover:bg-blue-50 transition-colors text-xs sm:text-sm"> <a href="calendrier.html" class="block w-full h-full text-blue-600"> Accéder au calendrier </a> </button> </div> </div> </div> </div> </main> </div> <!-- JavaScript --> <script> // Mobile Menu document.addEventListener('DOMContentLoaded', function() { const hamburgerBtn = document.getElementById('hamburgerBtn'); const closeSidebar = document.getElementById('closeSidebar'); const sidebar = document.getElementById('sidebar'); const overlay = document.getElementById('overlay'); // sidebar sur un click hamburger function toggleSidebar() { sidebar.classList.toggle('active'); overlay.classList.toggle('active'); document.body.style.overflow = sidebar.classList.contains('active') ? 'hidden' : ''; } if (hamburgerBtn) { hamburgerBtn.addEventListener('click', toggleSidebar); } if (closeSidebar) { closeSidebar.addEventListener('click', toggleSidebar); } if (overlay) { overlay.addEventListener('click', toggleSidebar); } // Close de la sidebar document.addEventListener('click', function(event) { if (window.innerWidth < 1024 && sidebar.classList.contains('active') && !sidebar.contains(event.target) && !hamburgerBtn.contains(event.target)) { toggleSidebar(); } }); // Adjustement sidebar window.addEventListener('resize', function() { if (window.innerWidth >= 1024) { sidebar.classList.remove('active'); overlay.classList.remove('active'); document.body.style.overflow = ''; } }); }); </script> </body> </html>
/* Replace with your CSS Code (Leave empty if not needed) */
/* Replace with your JS Code (Leave empty if not needed) */
Preview
Validating your code, please wait...