2025-03-09 16:15:31 +01:00
<!DOCTYPE html>
< html lang = "fr" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > MH Wilds - Partage de Quêtes à Couronnes< / title >
<!-- Métadonnées pour le partage -->
< meta property = "og:title" content = "MH Wilds - Partage de Quêtes à Couronnes" >
< meta property = "og:description" content = "Partagez vos quêtes d'investigation avec couronnes pour Monster Hunter Wilds et complétez votre collection !" >
< meta property = "og:image" content = "img/logo.png" >
< meta property = "og:url" content = "https://votresite.com" >
< meta name = "twitter:card" content = "summary_large_image" >
<!-- Favicon -->
< link rel = "icon" href = "img/logo.png" type = "image/png" >
<!-- Bootstrap CSS with dark theme -->
< link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel = "stylesheet" >
<!-- Notre CSS personnalisé -->
< link rel = "stylesheet" href = "css/styles.css" >
< / head >
< body >
< header class = "bg-dark text-white py-3" >
< div class = "container" >
< div class = "d-flex justify-content-between align-items-center" >
< div class = "d-flex align-items-center" >
< img src = "img/logo.png" alt = "Logo" height = "40" class = "me-2" >
< h1 class = "h2 mb-0" > MH Wilds - Quêtes à Couronnes< / h1 >
< / div >
< div >
< a href = "tutorial.html" class = "btn btn-outline-light me-2" > Tutoriel< / a >
< a href = "login.html" class = "btn btn-outline-light" > Admin< / a >
< / div >
< / div >
< / div >
< / header >
< main class = "container my-4" >
< div class = "d-flex justify-content-between align-items-center mb-4" >
< h2 > Liste des monstres< / h2 >
< button class = "btn btn-primary" id = "addQuestBtn" > + Ajouter ma quête< / button >
< / div >
< div class = "row mb-4" >
< div class = "col-md-6 mx-auto" >
< div class = "input-group" >
< span class = "input-group-text" > < i class = "bi bi-search" > 🔍< / i > < / span >
< input type = "text" class = "form-control" id = "monsterSearch" placeholder = "Rechercher un monstre..." >
< button class = "btn btn-outline-light" type = "button" id = "clearSearchBtn" > Effacer< / button >
< / div >
< / div >
< / div >
< div class = "alert alert-info d-none" id = "announcementArea" >
<!-- Les annonces seront affichées ici -->
< / div >
< div class = "row g-4 mb-4" id = "monsterList" >
<!-- La liste des monstres sera générée dynamiquement ici -->
< div class = "col-12 text-center py-5" >
< div class = "spinner-border" role = "status" >
< span class = "visually-hidden" > Chargement...< / span >
< / div >
< p class = "mt-2" > Chargement des monstres...< / p >
< / div >
< / div >
< / main >
< footer class = "bg-dark text-white py-3 mt-auto" >
< div class = "container text-center" >
< p class = "mb-0" > Ce site est réalisé dans le cadre de la branche < a href = "https://camelia-studio.org/branches/alt+tab/" target = "_blank" > Alt Tab< / a > de l'association < a href = "https://camelia-studio.org/" target = "_blank" > Camélia Studio< / a > .< / p >
2025-03-09 16:20:13 +01:00
< p class = "mb-0 mt-1" > < small > Images des monstres par Sui Yun - Site sous licence MIT, code source sur < a href = "https://git.crystalyx.net/camelia-studio/Chasse_aux_couronnes" target = "_blank" > Gitea< / a > < / small > < / p >
2025-03-09 16:15:31 +01:00
< / div >
< / footer >
<!-- Modale de consultation des quêtes -->
< div class = "modal fade" id = "questListModal" tabindex = "-1" aria-hidden = "true" >
< div class = "modal-dialog modal-lg" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title" > Quêtes disponibles pour < span id = "modalMonsterName" > < / span > < / h5 >
< button type = "button" class = "btn-close" data-bs-dismiss = "modal" aria-label = "Fermer" > < / button >
< / div >
< div class = "modal-body" >
< div class = "mb-3" >
< div class = "btn-group" role = "group" >
< input type = "radio" class = "btn-check" name = "crownFilter" id = "filterAll" value = "all" checked >
< label class = "btn btn-outline-accent" for = "filterAll" > Toutes< / label >
< input type = "radio" class = "btn-check" name = "crownFilter" id = "filterSmall" value = "small" >
< label class = "btn btn-outline-accent" for = "filterSmall" > Petites couronnes< / label >
< input type = "radio" class = "btn-check" name = "crownFilter" id = "filterLarge" value = "large" >
< label class = "btn btn-outline-accent" for = "filterLarge" > Grandes couronnes< / label >
< / div >
< / div >
< div id = "questList" >
<!-- La liste des quêtes sera générée dynamiquement ici -->
< / div >
< / div >
< / div >
< / div >
< / div >
<!-- Modale d'ajout de quête -->
< div class = "modal fade" id = "addQuestModal" tabindex = "-1" aria-hidden = "true" >
< div class = "modal-dialog" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title" > Ajouter une quête< / h5 >
< button type = "button" class = "btn-close" data-bs-dismiss = "modal" aria-label = "Fermer" > < / button >
< / div >
< div class = "modal-body" >
< form id = "addQuestForm" >
< div class = "mb-3" >
< label for = "monsterSelect" class = "form-label" > Monstre< / label >
< select class = "form-select" id = "monsterSelect" required >
< option value = "" selected disabled > Sélectionner un monstre< / option >
<!-- Options générées dynamiquement -->
< / select >
< / div >
< div class = "mb-3" >
< label class = "form-label" > Type de couronne< / label >
< div class = "form-check" >
< input class = "form-check-input" type = "radio" name = "crownType" id = "smallCrown" value = "small" required >
< label class = "form-check-label" for = "smallCrown" >
Petite couronne
< / label >
< / div >
< div class = "form-check" >
< input class = "form-check-input" type = "radio" name = "crownType" id = "largeCrown" value = "large" >
< label class = "form-check-label" for = "largeCrown" >
Grande couronne
< / label >
< / div >
< / div >
< div class = "mb-3" >
< label for = "playerName" class = "form-label" > Votre pseudo< / label >
< input type = "text" class = "form-control" id = "playerName" required >
< / div >
< div class = "mb-3" >
< label for = "playerId" class = "form-label" > Votre ID en jeu< / label >
< input type = "text" class = "form-control" id = "playerId" required >
< / div >
< div class = "d-grid" >
< button type = "submit" class = "btn btn-primary" > Ajouter la quête< / button >
< / div >
< / form >
< / div >
< / div >
< / div >
< / div >
<!-- Modale de confirmation de suppression -->
< div class = "modal fade" id = "deleteQuestModal" tabindex = "-1" aria-hidden = "true" >
< div class = "modal-dialog" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title" > Supprimer la quête< / h5 >
< button type = "button" class = "btn-close" data-bs-dismiss = "modal" aria-label = "Fermer" > < / button >
< / div >
< div class = "modal-body" >
< p > Êtes-vous sûr de vouloir supprimer cette quête ?< / p >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-secondary" data-bs-dismiss = "modal" > Annuler< / button >
< button type = "button" class = "btn btn-danger" id = "confirmDeleteBtn" > Supprimer< / button >
< / div >
< / div >
< / div >
< / div >
< script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" > < / script >
< script src = "js/main.js" > < / script >
< / body >
< / html >
