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" >
2025-03-09 17:23:38 +01:00
<!-- Styles spécifiques pour le sélecteur de monstre avec recherche -->
< style id = "monster-search-styles" >
/* Styles pour le select searchable personnalisé */
.monster-search-container {
position: relative;
}
.monster-search-results {
position: absolute;
width: 100%;
max-height: 250px;
overflow-y: auto;
background-color: var(--mh-light-bg);
border: 1px solid var(--mh-accent);
border-radius: 0.375rem;
z-index: 1050;
margin-top: 2px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.monster-search-item {
padding: 8px 12px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
color: var(--mh-light);
}
.monster-search-item:hover,
.monster-search-item.active {
background-color: var(--mh-dark);
}
.monster-search-item:last-child {
border-bottom: none;
}
.selected-monster {
font-weight: bold;
color: var(--mh-accent);
}
.monster-search-no-results {
padding: 10px;
text-align: center;
color: var(--mh-light);
font-style: italic;
}
< / style >
2025-03-09 16:15:31 +01:00
< / 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" >
2025-03-09 17:23:38 +01:00
< label for = "monsterSearchSelect" class = "form-label" > Monstre< / label >
< div class = "monster-search-container" >
< div class = "input-group" >
< span class = "input-group-text" > < i class = "bi bi-search" > 🔍< / i > < / span >
< input type = "text" class = "form-control" id = "monsterSearchSelect"
placeholder="Rechercher et sélectionner un monstre..." autocomplete="off">
< input type = "hidden" id = "selectedMonsterId" name = "selectedMonsterId" required >
< / div >
< div class = "monster-search-results d-none" id = "monsterSearchResults" >
<!-- Les résultats seront générés dynamiquement ici -->
< / div >
< / div >
< div class = "invalid-feedback" > Veuillez sélectionner un monstre< / div >
2025-03-09 16:15:31 +01:00
< / 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 >
