Import initial du projet garant
This commit is contained in:
KANE LAZENI
172
Vue/Infoadherent/index.php
Normal file
172
Vue/Infoadherent/index.php
Normal file
@@ -0,0 +1,172 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title><?= _("Adhérent - Informations");?></title>
|
||||
|
||||
|
||||
<style>
|
||||
.img-profile {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.nav-pills .nav-link.active {
|
||||
background-color: #007bff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.badge-custom {
|
||||
background-color: #f08d79;
|
||||
}
|
||||
|
||||
/* Masquer toutes les sections par défaut */
|
||||
.content-section {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Afficher la section active */
|
||||
.content-section.active {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container mt-5">
|
||||
<div class="card mb-4">
|
||||
<div class="card-body text-center">
|
||||
<?php foreach ($adherents as $adherents):
|
||||
|
||||
?>
|
||||
|
||||
<img src="<?= $adherents['lienPhoto'] ?>" alt="Photo" class="img-fluid img-profile rounded-circle mb-3">
|
||||
<div class="col-md-6 col-lg-4 beneficiary-card" data-name="<?= $adherents['nomAdherent'] ?>" data-number="<?= $adherents['numeroAdherents'] ?>" data-age="<?= $adherents['age'] ?>" data-status="<?= $adherents['statut'] ?>">
|
||||
<h3>ACHI CLAUDE JACQUELINE</h3>
|
||||
<p class="text-muted">Adhérent : <strong>00840053</strong></p>
|
||||
<p><span class="badge badge-custom">Entrée : 05/07/2021</span> | Bénéficiaire(s) : <strong>2</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<ul class="nav nav-pills card-header-pills justify-content-center">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#" data-target="adherent-section">Adhérent</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#" data-target="famille-section">Famille</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#" data-target="reclamations-section">Réclamations</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- Contenu des sections -->
|
||||
<div class="content-section active" id="adherent-section">
|
||||
<h5 class="section-title">Informations sur l'Adhérent</h5>
|
||||
<p><span class="section-title">Police :</span> <a href="#">AIBEF - 21000033</a></p>
|
||||
<p><span class="section-title">Plafond :</span> <strong>10 000 000 FCFA</strong></p>
|
||||
<p><span class="section-title">Prime :</span> <strong>480 000 FCFA</strong></p>
|
||||
</div>
|
||||
|
||||
<div class="content-section" id="famille-section">
|
||||
<h5 class="section-title"><?= _("Informations sur la Famille");?></h5>
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nom</th>
|
||||
<th>Âge</th>
|
||||
<th>Relation</th>
|
||||
<th>Statut</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>ACHI CLAUDE JACQUELINE</td>
|
||||
<td>35</td>
|
||||
<td>Conjoint</td>
|
||||
<td>Actif</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ACHI PIERRE</td>
|
||||
<td>10</td>
|
||||
<td>Fils</td>
|
||||
<td>Actif</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="content-section" id="reclamations-section">
|
||||
<h5 class="section-title">Réclamations récentes</h5>
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
<th>Description</th>
|
||||
<th>Montant</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>01/01/2023</td>
|
||||
<td>Consultation</td>
|
||||
<td>50 000 FCFA</td>
|
||||
<td>Approuvé</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>15/05/2023</td>
|
||||
<td>Hospitalisation</td>
|
||||
<td>500 000 FCFA</td>
|
||||
<td>En cours</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
<script>
|
||||
// Gérer le changement de section lors du clic sur un onglet
|
||||
document.querySelectorAll('.nav-link').forEach(function (navItem) {
|
||||
navItem.addEventListener('click', function (e) {
|
||||
e.preventDefault(); // Empêcher le comportement par défaut du lien
|
||||
|
||||
// Supprimer la classe 'active' de tous les onglets
|
||||
document.querySelectorAll('.nav-link').forEach(function (item) {
|
||||
item.classList.remove('active');
|
||||
});
|
||||
// Ajouter la classe 'active' à l'onglet cliqué
|
||||
this.classList.add('active');
|
||||
|
||||
// Masquer toutes les sections de contenu
|
||||
document.querySelectorAll('.content-section').forEach(function (section) {
|
||||
section.classList.remove('active');
|
||||
});
|
||||
|
||||
// Afficher la section correspondant à l'onglet cliqué
|
||||
const targetId = this.getAttribute('data-target');
|
||||
document.getElementById(targetId).classList.add('active');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user