// Produits de la pharmacie
const products = [
{ id: 1, name: "Paracétamol 500mg", category: "medicaments", price: 5, icon: "fa-pills" },
{ id: 2, name: "Ibuprofène 400mg", category: "medicaments", price: 7, icon: "fa-pills" },
{ id: 3, name: "Vitamine C 1000mg", category: "vitamines", price: 10, icon: "fa-capsules" },
{ id: 4, name: "Multivitamines", category: "vitamines", price: 15, icon: "fa-capsules" },
{ id: 5, name: "Crème hydratante", category: "beaute", price: 12, icon: "fa-spa" },
{ id: 6, name: "Savon antiseptique", category: "parapharmacie", price: 4, icon: "fa-pump-medical" },
{ id: 7, name: "Gel désinfectant", category: "parapharmacie", price: 6, icon: "fa-pump-medical" },
{ id: 8, name: "Shampooing bébé", category: "bebe", price: 8, icon: "fa-baby" },
{ id: 9, name: "Thermomètre digital", category: "equipement", price: 20, icon: "fa-crutch" },
{ id: 10, name: "Bandage stérile", category: "equipement", price: 3, icon: "fa-crutch" },
{ id: 11, name: "Antalgique fort", category: "medicaments", price: 12, icon: "fa-pills" },
{ id: 12, name: "Crème solaire SPF50", category: "beaute", price: 18, icon: "fa-spa" }
];
let cart = [];
// Initialisation
[Link]('DOMContentLoaded', () => {
displayProducts(products);
setupFilters();
setupCart();
setupModals();
setupForms();
});
// Afficher les produits
function displayProducts(productsToShow) {
const grid = [Link]('productsGrid');
[Link] = [Link](product => `
<div class="product-card" data-category="${[Link]}">
<div class="product-image">
<i class="fas ${[Link]}"></i>
</div>
<div class="product-info">
<h3 class="product-name">${[Link]}</h3>
<p class="product-category">${[Link]}</p>
<p class="product-price">$${[Link]}</p>
<button class="add-to-cart" onclick="addToCart(${[Link]})">
<i class="fas fa-shopping-cart"></i> Ajouter au panier
</button>
</div>
</div>
`).join('');
// Filtres
function setupFilters() {
const filterBtns = [Link]('.filter-btn');
[Link](btn => {
[Link]('click', () => {
[Link](b => [Link]('active'));
[Link]('active');
const filter = [Link];
if (filter === 'all') {
displayProducts(products);
} else {
const filtered = [Link](p => [Link] === filter);
displayProducts(filtered);
});
});
// Panier
function addToCart(productId) {
const product = [Link](p => [Link] === productId);
const existingItem = [Link](item => [Link] === productId);
if (existingItem) {
[Link]++;
} else {
[Link]({ ...product, quantity: 1 });
}
updateCartCount();
showNotification('Produit ajouté au panier!');
function updateCartCount() {
const count = [Link]((sum, item) => sum + [Link], 0);
[Link]('cartCount').textContent = count;
function setupCart() {
[Link]('cartIcon').addEventListener('click', () => {
displayCart();
[Link]('cartModal').[Link]('active');
});
[Link]('checkoutBtn').addEventListener('click', () => {
[Link]('cartModal').[Link]('active');
displayOrderForm();
[Link]('orderModal').[Link]('active');
});
function displayCart() {
const cartItems = [Link]('cartItems');
if ([Link] === 0) {
[Link] = '<p class="empty-cart">Votre panier est vide</p>';
[Link]('cartTotal').textContent = '$0';
return;
[Link] = [Link](item => `
<div class="cart-item">
<div>
<strong>${[Link]}</strong>
<p>$${[Link]} x ${[Link]}</p>
</div>
<div>$${[Link] * [Link]}</div>
</div>
`).join('');
const total = [Link]((sum, item) => sum + ([Link] * [Link]), 0);
[Link]('cartTotal').textContent = `$${total}`;
// Modals
function setupModals() {
[Link]('closeCart').addEventListener('click', () => {
[Link]('cartModal').[Link]('active');
});
[Link]('closeOrder').addEventListener('click', () => {
[Link]('orderModal').[Link]('active');
});
[Link]('click', (e) => {
if ([Link]('modal')) {
[Link]('active');
});
function displayOrderForm() {
const summary = [Link]('orderSummary');
const total = [Link]((sum, item) => sum + ([Link] * [Link]), 0);
[Link] = `
<h4>Résumé de commande:</h4>
${[Link](item => `<p>${[Link]} x ${[Link]} = $${[Link] *
[Link]}</p>`).join('')}
<p><strong>Total: $${total}</strong></p>
`;
}
// Formulaires
function setupForms() {
[Link]('contactForm').addEventListener('submit', (e) => {
[Link]();
showNotification('Message envoyé avec succès!');
[Link]();
});
[Link]('orderForm').addEventListener('submit', (e) => {
[Link]();
const name = [Link]('name').value;
const phone = [Link]('phone').value;
const address = [Link]('address').value;
const payment = [Link]('payment').value;
showNotification(`Commande confirmée pour ${name}! Nous vous contacterons au ${phone}.`);
cart = [];
updateCartCount();
[Link]('orderModal').[Link]('active');
[Link]();
});
// Notification
function showNotification(message) {
const notification = [Link]('div');
[Link] = `
position: fixed;
top: 20px;
right: 20px;
background: #2ecc71;
color: white;
padding: 1rem 2rem;
border-radius: 5px;
z-index: 3000;
box-shadow: 0 3px 10px rgba(0,0,0,0.2);
`;
[Link] = message;
[Link](notification);
setTimeout(() => [Link](), 3000);
}
juste la gestion des TFC défendus dans la faculté
Je vais créer les fichiers du site de gestion des TFC défendus directement dans la réponse.
***
## 🎓 Site de Gestion des TFC Défendus - UPEL Wembonyama
Voici un système complet de gestion et consultation des **Travaux de Fin de Cycle déjà défendus** à la
faculté des sciences et technologies.
### 📁 Créez un dossier `tfc_lumumba` avec ces 3 fichiers :
***
### 1. **[Link]**
```html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gestion TFC - UPEL Wembonyama</title>
<link rel="stylesheet" href="[Link]">
<link rel="stylesheet" href="[Link]
[Link]">
</head>
<body>
<header class="header">
<div class="container">
<div class="logo">
<i class="fas fa-university"></i>
<div>
<h1>UPEL Wembonyama</h1>
<span class="tagline">Faculté des Sciences et Technologies</span>
</div>
</div>
<nav class="nav">
<a href="#accueil" class="nav-link active">Accueil</a>
<a href="#tfcs" class="nav-link">TFC Défendus</a>
<a href="#recherche" class="nav-link">Recherche</a>
<a href="#stats" class="nav-link">Statistiques</a>
</nav>
</div>
</header>
<section id="accueil" class="hero">
<div class="hero-content">
<h2>Archives des Travaux de Fin de Cycle</h2>
<p>Faculté des Sciences et Technologies - Université Patrice Emery Lumumba, Wembonyama</p>
<p class="hero-subtitle">Consultez les TFC défendus et leurs évaluations</p>
</div>
</section>
<section class="stats-section">
<div class="container">
<div class="stats-grid">
<div class="stat-card">
<i class="fas fa-file-alt"></i>
<h3 id="totalTFC">0</h3>
<p>TFC Défendus</p>
</div>
<div class="stat-card">
<i class="fas fa-user-graduate"></i>
<h3 id="totalEtudiants">0</h3>
<p>Étudiants</p>
</div>
<div class="stat-card">
<i class="fas fa-chalkboard-teacher"></i>
<h3 id="totalSuperviseurs">0</h3>
<p>Superviseurs</p>
</div>
<div class="stat-card">
<i class="fas fa-star"></i>
<h3 id="moyenneGenerale">0</h3>
<p>Moyenne Générale</p>
</div>
</div>
</div>
</section>
<section id="recherche" class="search-section">
<div class="container">
<h2 class="section-title">Rechercher un TFC</h2>
<div class="search-filters">
<input type="text" id="searchInput" placeholder="Rechercher par titre, étudiant,
superviseur...">
<select id="filterSpecialite">
<option value="">Toutes les spécialités</option>
<option value="informatique">Informatique</option>
<option value="mathematiques">Mathématiques</option>
<option value="physique">Physique</option>
<option value="chimie">Chimie</option>
<option value="biologie">Biologie</option>
</select>
<select id="filterAnnee">
<option value="">Toutes les années</option>
<option value="2024">2024</option>
<option value="2023">2023</option>
<option value="2022">2022</option>
<option value="2021">2021</option>
</select>
<select id="filterNote">
<option value="">Toutes les notes</option>
<option value="excellent">Excellent (18-20)</option>
<option value="verygood">Très Bien (16-17.9)</option>
<option value="good">Bien (14-15.9)</option>
<option value="average">Assez Bien (12-13.9)</option>
</select>
<button class="btn btn-primary" id="searchBtn">
<i class="fas fa-search"></i> Rechercher
</button>
</div>
</div>
</section>
<section id="tfcs" class="tfcs-section">
<div class="container">
<h2 class="section-title">TFC Défendus</h2>
<div class="tfcs-grid" id="tfcsGrid"></div>
</div>
</section>
<div class="modal" id="tfcdModal">
<div class="modal-content modal-large">
<div class="modal-header">
<h3 id="tfcTitle">Détails du TFC</h3>
<button class="close-btn" id="closeModal">×</button>
</div>
<div class="modal-body" id="tfcBody"></div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h4>UPEL Wembonyama</h4>
<p>Faculté des Sciences et Technologies</p>
<p>Université Patrice Emery Lumumba</p>
</div>
<div class="footer-section">
<h4>Liens rapides</h4>
<ul>
<li><a href="#accueil">Accueil</a></li>
<li><a href="#tfcs">TFC Défendus</a></li>
<li><a href="#recherche">Recherche</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Contact</h4>
<p>Wembonyama, RDC</p>
<p>[Link]@[Link]</p>
</div>
</div>
<div class="footer-bottom">
<p>© 2026 UPEL Wembonyama - Tous droits réservés.</p>
</div>
</div>
</footer>
<script src="[Link]"></script>
</body>
</html>
```
***
### 2. **[Link]**
```css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
/* Header */
.header {
background: linear-gradient(135deg, #1a237e, #0d47a1);
color: white;
padding: 1rem 0;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
.header .container {
display: flex;
justify-content: space-between;
align-items: center;
.logo {
display: flex;
align-items: center;
gap: 15px;
.logo i {
font-size: 2.5rem;
.logo h1 {
font-size: 1.8rem;
.tagline {
font-size: 0.85rem;
opacity: 0.9;
.nav {
display: flex;
gap: 2rem;
.nav-link {
color: white;
text-decoration: none;
font-weight: 500;
transition: opacity 0.3s;
.nav-link:hover,
.[Link] {
opacity: 0.8;
border-bottom: 2px solid white;
/* Hero */
.hero {
background: linear-gradient(135deg, #1a237e, #0d47a1);
color: white;
padding: 80px 0;
text-align: center;
}
.hero-content h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
.hero-subtitle {
font-size: 1.2rem;
margin-top: 1rem;
opacity: 0.9;
/* Boutons */
.btn {
padding: 12px 30px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
transition: transform 0.3s, box-shadow 0.3s;
.btn-primary {
background: #1a237e;
color: white;
}
.btn-primary:hover {
background: #0d47a1;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(26, 35, 126, 0.4);
/* Stats */
.stats-section {
padding: 40px 0;
background: #f5f5f5;
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.5rem;
.stat-card {
background: white;
padding: 2rem;
border-radius: 10px;
text-align: center;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
.stat-card i {
font-size: 2.5rem;
color: #1a237e;
margin-bottom: 1rem;
.stat-card h3 {
font-size: 2.5rem;
color: #1a237e;
/* Section Title */
.section-title {
text-align: center;
font-size: 2rem;
margin-bottom: 2rem;
color: #1a237e;
/* Search */
.search-section {
padding: 40px 0;
}
.search-filters {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
align-items: end;
.search-filters input,
.search-filters select {
padding: 12px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 1rem;
.search-filters input {
grid-column: 1 / -1;
/* TFCs Grid */
.tfcs-section {
padding: 60px 0;
background: #f5f5f5;
}
.tfcs-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 2rem;
.tfc-card {
background: white;
border-radius: 10px;
padding: 1.5rem;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
transition: transform 0.3s;
.tfc-card:hover {
transform: translateY(-5px);
.tfc-header {
display: flex;
justify-content: space-between;
align-items: start;
margin-bottom: 1rem;
}
.tfc-title {
font-size: 1.3rem;
font-weight: 700;
color: #1a237e;
flex: 1;
.tfc-badge {
padding: 5px 12px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
.badge-excellent {
background: #4caf50;
color: white;
.badge-verygood {
background: #2196f3;
color: white;
}
.badge-good {
background: #ff9800;
color: white;
.badge-average {
background: #9c27b0;
color: white;
.tfc-info {
margin-bottom: 0.8rem;
font-size: 0.95rem;
.tfc-info strong {
color: #1a237e;
.tfc-specialite {
display: inline-block;
background: #e3f2fd;
color: #1976d2;
padding: 4px 12px;
border-radius: 15px;
font-size: 0.85rem;
margin: 1rem 0;
.tfc-details {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #eee;
.tfc-details p {
font-size: 0.9rem;
margin-bottom: 0.5rem;
color: #666;
.btn-details {
width: 100%;
padding: 10px;
background: #1a237e;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: 600;
margin-top: 1rem;
.btn-details:hover {
background: #0d47a1;
/* Modal */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
z-index: 2000;
justify-content: center;
align-items: center;
overflow-y: auto;
.[Link] {
display: flex;
}
.modal-content {
background: white;
padding: 2rem;
border-radius: 10px;
max-width: 700px;
width: 90%;
max-height: 85vh;
overflow-y: auto;
.modal-large {
max-width: 900px;
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 2px solid #1a237e;
}
.modal-header h3 {
color: #1a237e;
.close-btn {
background: none;
border: none;
font-size: 2rem;
cursor: pointer;
color: #999;
.tfc-detail-section {
margin-bottom: 1.5rem;
.tfc-detail-section h4 {
color: #1a237e;
margin-bottom: 0.8rem;
border-bottom: 1px solid #eee;
padding-bottom: 0.5rem;
.tfc-detail-section p {
margin-bottom: 0.5rem;
}
.jury-list {
list-style: none;
.jury-list li {
padding: 0.5rem 0;
border-bottom: 1px solid #f0f0f0;
.note-grande {
font-size: 3rem;
color: #1a237e;
font-weight: 700;
text-align: center;
margin: 1rem 0;
/* Footer */
.footer {
background: #1a237e;
color: white;
padding: 2rem 0 1rem;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin-bottom: 1.5rem;
.footer-section h4 {
margin-bottom: 1rem;
.footer-section ul {
list-style: none;
.footer-section ul li {
margin-bottom: 0.5rem;
.footer-section a {
color: white;
text-decoration: none;
opacity: 0.8;
}
.footer-section a:hover {
opacity: 1;
.footer-bottom {
text-align: center;
padding-top: 1.5rem;
border-top: 1px solid rgba(255,255,255,0.1);
/* Responsive */
@media (max-width: 768px) {
.header .container {
flex-direction: column;
gap: 1rem;
.nav {
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
.hero-content h2 {
font-size: 1.8rem;
.tfcs-grid {
grid-template-columns: 1fr;
```
***
### 3. **[Link]**
```javascript
// Base de données des TFC défendus
const tfcs = [
id: 1,
titre: "Développement d'une application mobile de e-commerce pour la pharmacie Nicophar",
etudiant: "Jean Kabeya Mutombo",
matricule: "UPSEL/2024/001",
specialite: "informatique",
annee: 2024,
note: 16.5,
mention: "Très Bien",
superviseur: "Dr. Pierre Nzambi",
jury: ["Prof. Marie Tshilumba", "Dr. Pierre Nzambi", "M. Jean Kilenda"],
resume: "Conception et réalisation d'une plateforme e-commerce complète pour la vente de
produits pharmaceutiques.",
dateDefense: "2024-06-15"
},
id: 2,
titre: "Système expert pour le diagnostic de maladies tropicales",
etudiant: "Sarah lukonga",
matricule: "UPSEL/2024/002",
specialite: "informatique",
annee: 2024,
note: 18,
mention: "Excellent",
superviseur: "Prof. Marie Tshilumba",
jury: ["Prof. Marie Tshilumba", "Dr. Jean Nzambi", "M. Paul Kabongo"],
resume: "Développement d'un système à base de connaissances pour l'aide au diagnostic médical.",
dateDefense: "2024-06-16"
},
id: 3,
titre: "Analyse statistique des données climatiques en RDC",
etudiant: "Michel Tshiefert",
matricule: "UPSEL/2024/003",
specialite: "mathematiques",
annee: 2024,
note: 15,
mention: "Bien",
superviseur: "Dr. Claude Mbuyi",
jury: ["Dr. Claude Mbuyi", "Prof. Luc Kalenda", "M. Marc Tshilumbu"],
resume: "Étude statistique des variations climatiques sur 30 ans en République Démocratique du
Congo.",
dateDefense: "2024-06-17"
},
id: 4,
titre: "Synthèse et caractérisation de nouveaux polymères biodégradables",
etudiant: "Anne Mpemba",
matricule: "UPSEL/2023/045",
specialite: "chimie",
annee: 2023,
note: 17,
mention: "Très Bien",
superviseur: "Dr. Sofia Kapinga",
jury: ["Dr. Sofia Kapinga", "Prof. Henri Tshimpala", "M. Roger Lubanda"],
resume: "Recherche sur les polymères écologiques pour remplacer les plastiques traditionnels.",
dateDefense: "2023-07-10"
},
id: 5,
titre: "Modélisation mathématique de la propagation des épidémies",
etudiant: "David Kalala",
matricule: "UPSEL/2023/032",
specialite: "mathematiques",
annee: 2023,
note: 14.5,
mention: "Bien",
superviseur: "Dr. Claude Mbuyi",
jury: ["Dr. Claude Mbuyi", "Prof. Jean Kapenda", "M. Pierre Tshikala"],
resume: "Application des équations différentielles à la modélisation des épidémies comme Ebola et
COVID-19.",
dateDefense: "2023-07-11"
},
id: 6,
titre: "Étude de la qualité de l'eau dans les rivières de Wembonyama",
etudiant: "Grace Ilunga",
matricule: "UPSEL/2023/028",
specialite: "biologie",
annee: 2023,
note: 16,
mention: "Très Bien",
superviseur: "Dr. Michel Tshiani",
jury: ["Dr. Michel Tshiani", "Prof. Sarah Kapinga", "M. Jean Mukendi"],
resume: "Analyse physico-chimique et biologique des eaux de rivière pour évaluer la potabilité.",
dateDefense: "2023-07-12"
},
{
id: 7,
titre: "Plateforme web de gestion des stocks pour PME",
etudiant: "Patrick Mbuyi",
matricule: "UPSEL/2022/089",
specialite: "informatique",
annee: 2022,
note: 15.5,
mention: "Bien",
superviseur: "Dr. Pierre Nzambi",
jury: ["Dr. Pierre Nzambi", "Prof. Marie Tshilumba", "M. Jean Kilenda"],
resume: "Développement d'un système de gestion de stock en ligne pour les petites et moyennes
entreprises.",
dateDefense: "2022-07-20"
},
id: 8,
titre: "Étude spectrométrique des minéraux de la région du Katanga",
etudiant: "Clovis Tshomba",
matricule: "UPSEL/2022/067",
specialite: "physique",
annee: 2022,
note: 13,
mention: "Assez Bien",
superviseur: "Prof. Luc Kalenda",
jury: ["Prof. Luc Kalenda", "Dr. Jean Kabongo", "M. Marc Tshilumbu"],
resume: "Analyse spectrométrique des échantillons minerais pour identifier les compositions
chimiques.",
dateDefense: "2022-07-21"
},
id: 9,
titre: "Applications de l'intelligence artificielle en médecine",
etudiant: "Nadia Kabongo",
matricule: "UPSEL/2024/015",
specialite: "informatique",
annee: 2024,
note: 19,
mention: "Excellent",
superviseur: "Prof. Marie Tshilumba",
jury: ["Prof. Marie Tshilumba", "Dr. Pierre Nzambi", "M. Jean Kilenda"],
resume: "Revue et implémentation d'algorithmes de machine learning pour le diagnostic médical
assisté.",
dateDefense: "2024-06-18"
},
id: 10,
titre: "Biodiversité microbienne des sols agricoles de Wembonyama",
etudiant: "Eric Mukendi",
matricule: "UPSEL/2023/051",
specialite: "biologie",
annee: 2023,
note: 14,
mention: "Bien",
superviseur: "Dr. Michel Tshiani",
jury: ["Dr. Michel Tshiani", "Prof. Sarah Kapinga", "M. Jean Mukendi"],
resume: "Étude de la flore microbienne des sols et son impact sur la productivité agricole.",
dateDefense: "2023-07-13"
];
// Initialisation
[Link]('DOMContentLoaded', () => {
updateStats();
displayTFCs(tfcs);
setupSearch();
setupModal();
});
// Mettre à jour les statistiques
function updateStats() {
[Link]('totalTFC').textContent = [Link];
[Link]('totalEtudiants').textContent = [Link];
const superviseurs = [...new Set([Link](tfc => [Link]))];
[Link]('totalSuperviseurs').textContent = [Link];
const moyenne = ([Link]((sum, tfc) => sum + [Link], 0) / [Link]).toFixed(1);
[Link]('moyenneGenerale').textContent = moyenne;
// Obtenir la classe deBadge
function getBadgeClass(note) {
if (note >= 18) return 'badge-excellent';
if (note >= 16) return 'badge-verygood';
if (note >= 14) return 'badge-good';
return 'badge-average';
// Obtenir la mention
function getMention(note) {
if (note >= 18) return 'Excellent';
if (note >= 16) return 'Très Bien';
if (note >= 14) return 'Bien';
if (note >= 12) return 'Assez Bien';
return 'Insuffisant';
// Afficher les TFC
function displayTFCs(tfcsToShow) {
const grid = [Link]('tfcsGrid');
if ([Link] === 0) {