mirror of https://github.com/itsmrval/somycal
71 lines
2.5 KiB
HTML
71 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Liste d'Équipes</title>
|
|
<!-- Bootstrap CSS (via CDN) -->
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
|
|
</head>
|
|
<body>
|
|
<div class="container mt-5">
|
|
<h1 class="text-center mb-4">Liste d'Équipes</h1>
|
|
<input type="text" id="searchInput" class="form-control mb-4" placeholder="Rechercher une équipe..." oninput="filterTeams()">
|
|
<ul id="teamList" class="list-group"></ul>
|
|
</div>
|
|
|
|
<!-- Bootstrap JS, Popper.js, and jQuery (via CDN) -->
|
|
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
|
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
|
|
|
|
<script>
|
|
// Liste d'équipes (exemple)
|
|
const teams = [
|
|
"Équipe 1",
|
|
"Équipe 2",
|
|
"Équipe 3",
|
|
"Équipe 4",
|
|
"Équipe 5",
|
|
"Équipe 6",
|
|
"Équipe 7",
|
|
"Équipe 8",
|
|
"Équipe 9",
|
|
"Équipe 10"
|
|
// Ajoutez plus d'équipes au besoin
|
|
];
|
|
|
|
// Fonction pour afficher les équipes dans la liste
|
|
function displayTeams(filteredTeams) {
|
|
const teamList = document.getElementById("teamList");
|
|
teamList.innerHTML = "";
|
|
|
|
for (let i = 0; i < filteredTeams.length; i++) {
|
|
const teamItem = document.createElement("li");
|
|
teamItem.className = "list-group-item";
|
|
teamItem.textContent = filteredTeams[i];
|
|
teamItem.onclick = function () {
|
|
alert("Vous avez cliqué sur " + filteredTeams[i]);
|
|
};
|
|
|
|
teamList.appendChild(teamItem);
|
|
}
|
|
}
|
|
|
|
// Affiche les cinq premières équipes par défaut
|
|
displayTeams(teams.slice(0, 5));
|
|
|
|
// Fonction pour filtrer les équipes en fonction de la recherche
|
|
function filterTeams() {
|
|
const searchInput = document.getElementById("searchInput");
|
|
const searchTerm = searchInput.value.toLowerCase();
|
|
|
|
const filteredTeams = teams.filter(team => team.toLowerCase().includes(searchTerm));
|
|
|
|
// Affiche les équipes filtrées
|
|
displayTeams(filteredTeams);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|