241 lines
13 KiB
HTML
241 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Administration - MH Wilds Couronnes</title>
|
|
|
|
<!-- Métadonnées pour le partage -->
|
|
<meta property="og:title" content="Administration - MH Wilds Couronnes">
|
|
<meta property="og:description" content="Interface d'administration pour le site de partage de quêtes à couronnes.">
|
|
<meta property="og:image" content="img/logo.png">
|
|
<meta property="og:url" content="https://votresite.com/admin.html">
|
|
<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">Administration</h1>
|
|
</div>
|
|
<div>
|
|
<a href="index.html" class="btn btn-outline-light me-2">Retour au site</a>
|
|
<button id="logoutBtn" class="btn btn-danger">Déconnexion</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container my-4">
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<div class="list-group">
|
|
<a href="#announcementsSection" class="list-group-item list-group-item-action active" id="announcementsTab">Annonces</a>
|
|
<a href="#monstersSection" class="list-group-item list-group-item-action" id="monstersTab">Monstres</a>
|
|
<a href="#maintenanceSection" class="list-group-item list-group-item-action" id="maintenanceTab">Maintenance</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-9">
|
|
<!-- Section des annonces -->
|
|
<div id="announcementsSection" class="admin-section">
|
|
<div class="card">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h2 class="h4 mb-0">Gestion des annonces</h2>
|
|
<button class="btn btn-primary btn-sm" id="addAnnouncementBtn">Ajouter une annonce</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Texte</th>
|
|
<th>Statut</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="announcementsList">
|
|
<!-- Liste des annonces générée dynamiquement -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div id="emptyAnnouncementsMessage" class="alert alert-info d-none">
|
|
Aucune annonce pour le moment.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section des monstres -->
|
|
<div id="monstersSection" class="admin-section d-none">
|
|
<div class="card">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h2 class="h4 mb-0">Gestion des monstres</h2>
|
|
<button class="btn btn-primary btn-sm" id="addMonsterBtn">Ajouter un monstre</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Image</th>
|
|
<th>Nom</th>
|
|
<th>Quêtes</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="monstersList">
|
|
<!-- Liste des monstres générée dynamiquement -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div id="emptyMonstersMessage" class="alert alert-info d-none">
|
|
Aucun monstre pour le moment.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section de maintenance -->
|
|
<div id="maintenanceSection" class="admin-section d-none">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2 class="h4 mb-0">Maintenance du site</h2>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-4">
|
|
<h3 class="h5">Nettoyer les quêtes anciennes</h3>
|
|
<p>Cette action supprimera toutes les quêtes datant de plus de 7 jours.</p>
|
|
<button class="btn btn-warning" id="cleanOldQuestsBtn">Nettoyer les quêtes anciennes</button>
|
|
<div id="cleanResult" class="alert alert-success mt-3 d-none"></div>
|
|
</div>
|
|
<hr>
|
|
<div>
|
|
<h3 class="h5">Statistiques du site</h3>
|
|
<ul class="list-group">
|
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
|
Nombre total de monstres
|
|
<span class="badge bg-primary rounded-pill" id="totalMonstersCount">0</span>
|
|
</li>
|
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
|
Nombre total de quêtes
|
|
<span class="badge bg-primary rounded-pill" id="totalQuestsCount">0</span>
|
|
</li>
|
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
|
Quêtes avec petite couronne
|
|
<span class="badge bg-warning rounded-pill" id="smallCrownQuestsCount">0</span>
|
|
</li>
|
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
|
Quêtes avec grande couronne
|
|
<span class="badge bg-secondary rounded-pill" id="largeCrownQuestsCount">0</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Modale d'ajout/édition d'annonce -->
|
|
<div class="modal fade" id="announcementModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="announcementModalTitle">Ajouter une annonce</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="announcementForm">
|
|
<input type="hidden" id="announcementId">
|
|
<div class="mb-3">
|
|
<label for="announcementText" class="form-label">Texte de l'annonce</label>
|
|
<textarea class="form-control" id="announcementText" rows="3" required></textarea>
|
|
</div>
|
|
<div class="form-check mb-3">
|
|
<input class="form-check-input" type="checkbox" id="announcementActive" checked>
|
|
<label class="form-check-label" for="announcementActive">
|
|
Activer l'annonce
|
|
</label>
|
|
</div>
|
|
<div class="d-grid">
|
|
<button type="submit" class="btn btn-primary" id="saveAnnouncementBtn">Enregistrer</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modale d'ajout/édition de monstre -->
|
|
<div class="modal fade" id="monsterModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="monsterModalTitle">Ajouter un monstre</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="monsterForm">
|
|
<input type="hidden" id="monsterId">
|
|
<div class="mb-3">
|
|
<label for="monsterName" class="form-label">Nom du monstre</label>
|
|
<input type="text" class="form-control" id="monsterName" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="monsterImage" class="form-label">Chemin de l'image</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text">img/</span>
|
|
<input type="text" class="form-control" id="monsterImage" required placeholder="Nom_du_monstre.jpg">
|
|
</div>
|
|
<div class="form-text">Format recommandé: jpg, 300x200px. Exemple: Rathalos.jpg</div>
|
|
</div>
|
|
<div class="d-grid">
|
|
<button type="submit" class="btn btn-primary" id="saveMonsterBtn">Enregistrer</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modale de confirmation de suppression -->
|
|
<div class="modal fade" id="confirmDeleteModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="confirmDeleteTitle">Confirmer la suppression</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p id="confirmDeleteMessage">Êtes-vous sûr de vouloir supprimer cet élément ?</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>
|
|
|
|
<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>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="js/admin.js"></script>
|
|
</body>
|
|
</html> |