Hugging Face's logo

Spaces:
ticoyoyo
/
test
Running

App Files Community
test / index.html
ticoyoyo's picture
ticoyoyo
Add 2 files
91a8bac verified
Raw
History Blame Contribute Delete
30.2 kB
<!DOCTYPE html>
<html lang="fr">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>RecruitFlow | Plateforme moderne de ATS</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
 font-family: 'Inter', sans-serif;
 background-color: #f8fafc;
 }
.gradient-bg {
 background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
 }
.card-hover:hover {
 transform: translateY(-5px);
 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 }
.transition-all {
 transition: all 0.3s ease;
 }
.sidebar-item:hover {
 background-color: rgba(255, 255, 255, 0.1);
 }
.candidate-card:hover {
 border-color: #818cf8;
 }
.animate-pulse {
 animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
@keyframes pulse {
 0%, 100% {
 opacity: 1;
 }
 50% {
 opacity: 0.5;
 }
 }
 </style>
</head>
<body class="text-gray-800">
 <!-- Navigation -->
 <nav class="gradient-bg text-white shadow-lg">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="flex justify-between h-16 items-center">
 <div class="flex items-center">
 <div class="flex-shrink-0 flex items-center">
 <i class="fas fa-user-tie text-2xl mr-2"></i>
 <span class="text-xl font-semibold">RecruitFlow</span>
 </div>
 <div class="hidden md:block ml-10">
 <div class="flex space-x-4">
 <a href="#" class="px-3 py-2 rounded-md text-sm font-medium bg-white bg-opacity-20">Tableau de bord</a>
 <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-white hover:bg-opacity-20">Candidats</a>
 <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-white hover:bg-opacity-20">Offres d'emploi</a>
 <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-white hover:bg-opacity-20">Analytiques</a>
 </div>
 </div>
 </div>
 <div class="hidden md:block">
 <div class="flex items-center space-x-4">
 <div class="relative">
 <button class="p-1 rounded-full text-white hover:bg-white hover:bg-opacity-20 focus:outline-none">
 <i class="fas fa-bell"></i>
 <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
 </button>
 </div>
 <div class="flex items-center space-x-2">
 <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
 <span class="text-sm font-medium">Jean Dupont</span>
 <i class="fas fa-chevron-down text-xs"></i>
 </div>
 </div>
 </div>
 <div class="-mr-2 flex md:hidden">
 <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-white hover:bg-white hover:bg-opacity-20 focus:outline-none">
 <i class="fas fa-bars"></i>
 </button>
 </div>
 </div>
 </div>
 </nav>
<div class="flex">
 <!-- Sidebar -->
 <div class="hidden md:flex md:flex-shrink-0">
 <div class="flex flex-col w-64 gradient-bg text-white">
 <div class="h-0 flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
 <div class="px-4">
 <h2 class="text-lg font-semibold">Pipeline de recrutement</h2>
 </div>
 <nav class="mt-5 flex-1 space-y-1 px-2">
 <a href="#" class="sidebar-item flex items-center px-2 py-2 text-sm font-medium rounded-md bg-white bg-opacity-20">
 <i class="fas fa-home mr-3"></i>
 Tableau de bord
 </a>
 <a href="#" class="sidebar-item flex items-center px-2 py-2 text-sm font-medium rounded-md hover:bg-white hover:bg-opacity-20">
 <i class="fas fa-users mr-3"></i>
 Candidats
 </a>
 <a href="#" class="sidebar-item flex items-center px-2 py-2 text-sm font-medium rounded-md hover:bg-white hover:bg-opacity-20">
 <i class="fas fa-briefcase mr-3"></i>
 Offres d'emploi
 </a>
 <a href="#" class="sidebar-item flex items-center px-2 py-2 text-sm font-medium rounded-md hover:bg-white hover:bg-opacity-20">
 <i class="fas fa-envelope mr-3"></i>
 Messages
 </a>
 <a href="#" class="sidebar-item flex items-center px-2 py-2 text-sm font-medium rounded-md hover:bg-white hover:bg-opacity-20">
 <i class="fas fa-chart-line mr-3"></i>
 Analytiques
 </a>
 <a href="#" class="sidebar-item flex items-center px-2 py-2 text-sm font-medium rounded-md hover:bg-white hover:bg-opacity-20">
 <i class="fas fa-cog mr-3"></i>
 Paramètres
 </a>
 </nav>
 </div>
 <div class="flex-shrink-0 flex border-t border-white border-opacity-20 p-4">
 <div class="flex items-center">
 <img class="h-9 w-9 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
 <div class="ml-3">
 <p class="text-sm font-medium">Jean Dupont</p>
 <a href="#" class="text-xs font-medium text-white text-opacity-70 hover:text-opacity-100">Voir le profil</a>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Main Content -->
 <div class="flex-1 overflow-auto">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
 <!-- Header -->
 <div class="flex justify-between items-center mb-8">
 <div>
 <h1 class="text-2xl font-bold text-gray-900">Tableau de bord</h1>
 <p class="text-gray-500">Bon retour ! Voici ce qui se passe dans votre recrutement aujourd'hui.</p>
 </div>
 <button class="gradient-bg text-white px-4 py-2 rounded-md hover:opacity-90 transition-all flex items-center">
 <i class="fas fa-plus mr-2"></i> Nouvelle offre d'emploi
 </button>
 </div>
<!-- Stats Cards -->
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
 <div class="bg-white rounded-lg shadow p-6 card-hover transition-all">
 <div class="flex items-center">
 <div class="p-3 rounded-full bg-indigo-100 text-indigo-600 mr-4">
 <i class="fas fa-users text-xl"></i>
 </div>
 <div>
 <p class="text-sm font-medium text-gray-500">Candidats totaux</p>
 <p class="text-2xl font-semibold text-gray-900">1 254</p>
 <p class="text-xs text-green-500 flex items-center">
 <i class="fas fa-arrow-up mr-1"></i> 12% par rapport au mois dernier
 </p>
 </div>
 </div>
 </div>
<div class="bg-white rounded-lg shadow p-6 card-hover transition-all">
 <div class="flex items-center">
 <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4">
 <i class="fas fa-briefcase text-xl"></i>
 </div>
 <div>
 <p class="text-sm font-medium text-gray-500">Offres actives</p>
 <p class="text-2xl font-semibold text-gray-900">24</p>
 <p class="text-xs text-green-500 flex items-center">
 <i class="fas fa-arrow-up mr-1"></i> 3 nouvelles cette semaine
 </p>
 </div>
 </div>
 </div>
<div class="bg-white rounded-lg shadow p-6 card-hover transition-all">
 <div class="flex items-center">
 <div class="p-3 rounded-full bg-green-100 text-green-600 mr-4">
 <i class="fas fa-check-circle text-xl"></i>
 </div>
 <div>
 <p class="text-sm font-medium text-gray-500">Embauches ce mois</p>
 <p class="text-2xl font-semibold text-gray-900">18</p>
 <p class="text-xs text-green-500 flex items-center">
 <i class="fas fa-arrow-up mr-1"></i> 20% par rapport au mois dernier
 </p>
 </div>
 </div>
 </div>
<div class="bg-white rounded-lg shadow p-6 card-hover transition-all">
 <div class="flex items-center">
 <div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-4">
 <i class="fas fa-clock text-xl"></i>
 </div>
 <div>
 <p class="text-sm font-medium text-gray-500">Délai moyen d'embauche</p>
 <p class="text-2xl font-semibold text-gray-900">23 jours</p>
 <p class="text-xs text-red-500 flex items-center">
 <i class="fas fa-arrow-down mr-1"></i> 2 jours plus rapide
 </p>
 </div>
 </div>
 </div>
 </div>
<!-- Recent Activity and Top Candidates -->
 <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
 <div class="lg:col-span-2">
 <div class="bg-white rounded-lg shadow overflow-hidden">
 <div class="px-6 py-4 border-b border-gray-200">
 <h2 class="text-lg font-semibold text-gray-900">Activité récente</h2>
 </div>
 <div class="divide-y divide-gray-200">
 <div class="px-6 py-4">
 <div class="flex items-center">
 <div class="flex-shrink-0">
 <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
 </div>
 <div class="ml-4">
 <div class="text-sm font-medium text-gray-900">Sarah Johnson</div>
 <div class="text-sm text-gray-500">A postulé pour Designer UX Senior</div>
 </div>
 <div class="ml-auto text-sm text-gray-500">
 Il y a 2 heures
 </div>
 </div>
 </div>
 <div class="px-6 py-4">
 <div class="flex items-center">
 <div class="flex-shrink-0">
 <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
 </div>
 <div class="ml-4">
 <div class="text-sm font-medium text-gray-900">Michael Chen</div>
 <div class="text-sm text-gray-500">A terminé l'évaluation technique</div>
 </div>
 <div class="ml-auto text-sm text-gray-500">
 Il y a 5 heures
 </div>
 </div>
 </div>
 <div class="px-6 py-4">
 <div class="flex items-center">
 <div class="flex-shrink-0">
 <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
 </div>
 <div class="ml-4">
 <div class="text-sm font-medium text-gray-900">David Wilson</div>
 <div class="text-sm text-gray-500">Entretien programmé pour demain</div>
 </div>
 <div class="ml-auto text-sm text-gray-500">
 Il y a 1 jour
 </div>
 </div>
 </div>
 <div class="px-6 py-4">
 <div class="flex items-center">
 <div class="flex-shrink-0">
 <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
 </div>
 <div class="ml-4">
 <div class="text-sm font-medium text-gray-900">Emily Rodriguez</div>
 <div class="text-sm text-gray-500">A accepté l'offre pour Marketing Manager</div>
 </div>
 <div class="ml-auto text-sm text-gray-500">
 Il y a 2 jours
 </div>
 </div>
 </div>
 </div>
 <div class="px-6 py-4 border-t border-gray-200">
 <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">Voir toute l'activité</a>
 </div>
 </div>
 </div>
<div>
 <div class="bg-white rounded-lg shadow overflow-hidden">
 <div class="px-6 py-4 border-b border-gray-200">
 <h2 class="text-lg font-semibold text-gray-900">Meilleurs candidats</h2>
 </div>
 <div class="divide-y divide-gray-200">
 <div class="px-6 py-4">
 <div class="flex items-center">
 <div class="flex-shrink-0">
 <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
 </div>
 <div class="ml-4">
 <div class="text-sm font-medium text-gray-900">Robert Johnson</div>
 <div class="text-sm text-gray-500">Ingénieur logiciel</div>
 </div>
 <div class="ml-auto">
 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
 Meilleur match
 </span>
 </div>
 </div>
 </div>
 <div class="px-6 py-4">
 <div class="flex items-center">
 <div class="flex-shrink-0">
 <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
 </div>
 <div class="ml-4">
 <div class="text-sm font-medium text-gray-900">Jennifer Lee</div>
 <div class="text-sm text-gray-500">Product Manager</div>
 </div>
 <div class="ml-auto">
 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
 Haut potentiel
 </span>
 </div>
 </div>
 </div>
 <div class="px-6 py-4">
 <div class="flex items-center">
 <div class="flex-shrink-0">
 <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
 </div>
 <div class="ml-4">
 <div class="text-sm font-medium text-gray-900">Thomas Smith</div>
 <div class="text-sm text-gray-500">Data Scientist</div>
 </div>
 <div class="ml-auto">
 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">
 Rapide
 </span>
 </div>
 </div>
 </div>
 <div class="px-6 py-4">
 <div class="flex items-center">
 <div class="flex-shrink-0">
 <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
 </div>
 <div class="ml-4">
 <div class="text-sm font-medium text-gray-900">Amanda Wilson</div>
 <div class="text-sm text-gray-500">UX Designer</div>
 </div>
 <div class="ml-auto">
 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
 Nouveau
 </span>
 </div>
 </div>
 </div>
 </div>
 <div class="px-6 py-4 border-t border-gray-200">
 <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">Voir tous les candidats</a>
 </div>
 </div>
 </div>
 </div>
<!-- Current Openings -->
 <div class="mb-8">
 <div class="flex justify-between items-center mb-4">
 <h2 class="text-lg font-semibold text-gray-900">Offres actuelles</h2>
 <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">Voir toutes les offres</a>
 </div>
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
 <div class="bg-white rounded-lg shadow overflow-hidden card-hover transition-all">
 <div class="p-6">
 <div class="flex items-center justify-between">
 <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Active</span>
 <div class="text-sm text-gray-500">5 candidats</div>
 </div>
 <h3 class="mt-2 text-lg font-semibold text-gray-900">Développeur Frontend Senior</h3>
 <p class="mt-1 text-sm text-gray-500">Ingénierie • Temps plein • Remote</p>
 <div class="mt-4 flex justify-between items-center">
 <div class="flex items-center">
 <i class="fas fa-map-marker-alt text-gray-400 mr-1"></i>
 <span class="text-sm text-gray-500">San Francisco, CA</span>
 </div>
 <span class="text-sm font-medium text-gray-900">120k$ - 150k$</span>
 </div>
 </div>
 <div class="bg-gray-50 px-6 py-3 flex justify-end">
 <button class="text-sm font-medium text-indigo-600 hover:text-indigo-500">Voir les détails</button>
 </div>
 </div>
<div class="bg-white rounded-lg shadow overflow-hidden card-hover transition-all">
 <div class="p-6">
 <div class="flex items-center justify-between">
 <span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">Nouveau</span>
 <div class="text-sm text-gray-500">12 candidats</div>
 </div>
 <h3 class="mt-2 text-lg font-semibold text-gray-900">Product Manager</h3>
 <p class="mt-1 text-sm text-gray-500">Produit • Temps plein • Hybride</p>
 <div class="mt-4 flex justify-between items-center">
 <div class="flex items-center">
 <i class="fas fa-map-marker-alt text-gray-400 mr-1"></i>
 <span class="text-sm text-gray-500">New York, NY</span>
 </div>
 <span class="text-sm font-medium text-gray-900">110k$ - 140k$</span>
 </div>
 </div>
 <div class="bg-gray-50 px-6 py-3 flex justify-end">
 <button class="text-sm font-medium text-indigo-600 hover:text-indigo-500">Voir les détails</button>
 </div>
 </div>
<div class="bg-white rounded-lg shadow overflow-hidden card-hover transition-all">
 <div class="p-6">
 <div class="flex items-center justify-between">
 <span class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">Clôture bientôt</span>
 <div class="text-sm text-gray-500">8 candidats</div>
 </div>
 <h3 class="mt-2 text-lg font-semibold text-gray-900">Data Scientist</h3>
 <p class="mt-1 text-sm text-gray-500">Data • Temps plein • Sur site</p>
 <div class="mt-4 flex justify-between items-center">
 <div class="flex items-center">
 <i class="fas fa-map-marker-alt text-gray-400 mr-1"></i>
 <span class="text-sm text-gray-500">Austin, TX</span>
 </div>
 <span class="text-sm font-medium text-gray-900">100k$ - 130k$</span>
 </div>
 </div>
 <div class="bg-gray-50 px-6 py-3 flex justify-end">
 <button class="text-sm font-medium text-indigo-600 hover:text-indigo-500">Voir les détails</button>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<script>
 // Simple JavaScript pour les éléments interactifs
 document.addEventListener('DOMContentLoaded', function() {
 // Effet de survol pour les cartes de candidats
 const candidateCards = document.querySelectorAll('.candidate-card');
 candidateCards.forEach(card => {
 card.addEventListener('mouseenter', function() {
 this.classList.add('border-indigo-300');
 this.classList.add('shadow-md');
 });
 card.addEventListener('mouseleave', function() {
 this.classList.remove('border-indigo-300');
 this.classList.remove('shadow-md');
 });
 });
// Le toggle du menu mobile irait ici
 // const mobileMenuButton = document.querySelector('[aria-controls="mobile-menu"]');
 // const mobileMenu = document.getElementById('mobile-menu');
 // mobileMenuButton.addEventListener('click', function() {
 // mobileMenu.classList.toggle('hidden');
 // });
// Vous pourriez ajouter plus de fonctionnalités interactives comme :
 // - Filtrage des candidats
 // - Tri des offres d'emploi
 // - Chargement AJAX de plus de contenu
 // - Boîtes de dialogue modales pour les actions
 });
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ticoyoyo/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>