177 lines
8.9 KiB
HTML
177 lines
8.9 KiB
HTML
<!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>
|
|
<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>
|
|
</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> |