Compare commits

...

67 Commits

Author SHA1 Message Date
bbf921bbfe bog : supprimer réactif 2025-12-16 13:18:18 +01:00
aef7d63451 feat: ajouter_prestation validée w3c validator et normalisee 2025-12-16 09:58:38 +01:00
55a31a507c integration de password.js à reinitialisation mdp 2025-12-16 08:50:31 +01:00
706d3ece23 FEAT : page profil 2025-12-16 08:31:11 +01:00
ee068c9d6f commit de fin de journée 2025-12-14 21:06:10 +01:00
4022e385eb petites modifs 2025-12-14 14:11:39 +01:00
cf5a366650 edition pages statique texte 2025-12-14 14:00:52 +01:00
11e4cc9767 Page configuration 2025-12-14 13:41:23 +01:00
d3af22566a Message d'actu 2025-12-14 13:16:24 +01:00
4340bcab6d Normalisation Menus 2025-12-14 12:42:14 +01:00
b0673ad90d FEAT bouton publier sur facebook 2025-12-14 11:57:29 +01:00
b4e037f11d normalisation blog + gestion images 2025-12-14 11:42:13 +01:00
1950fd3902 FEAT : pages veto 2025-12-14 09:32:34 +01:00
75abb10913 validation HTML 2025-12-13 07:45:59 +01:00
6de5eb546e FAQ + TinyMCE globale 2025-12-12 22:39:03 +01:00
a220868c03 Merge branch 'main' of ssh://git.lalanguebleue.fr:2222/ileauchiens/maquette_backoffi
vendredi 12 au soir
2025-12-12 20:59:09 +01:00
ben
da0dfdc8c7 nettoyage de doucmentation 2025-12-12 17:09:55 +01:00
ben
e37b8c4c7d modifier presta: DOM message + header + chemins. W3C éffectué sur les 3pages commité 2025-12-12 17:03:35 +01:00
ben
946bda115a ajouter slider : DOM message + header + chemins 2025-12-12 16:49:50 +01:00
ben
248bc80da5 Ajouter prestation : DOM message + mise ne place du header+fichier style css prestation 2025-12-12 16:34:45 +01:00
ben
f72b6e9337 mise a jour du dom ajouter catégorie 2025-12-12 15:32:17 +01:00
e40317e726 Merge branch 'main' of ssh://git.lalanguebleue.fr:2222/ileauchiens/maquette_backoffice 2025-12-12 15:06:08 +01:00
dbd1ccee68 script delete 2025-12-12 15:02:57 +01:00
ben
b140b6a4ec Merge branch 'main' of ssh://git.lalanguebleue.fr:2222/ileauchiens/maquette_backoffice 2025-12-12 14:43:16 +01:00
ben
4fe4facd32 mise a jour du Dom de ajouter article et modifier article 2025-12-12 14:38:43 +01:00
f02c69449a feat:creation dossier components 2025-12-12 11:28:09 +01:00
b77f82f216 ups modif prestations accueil 2025-12-12 10:00:08 +01:00
a0ef8c98c9 feat: ajouter une carte 2025-12-12 09:46:52 +01:00
47a1243464 feat: ajouter une categorie mb-4 mt-3 2025-12-12 09:46:01 +01:00
374334de44 feat:modification page prestation 2025-12-12 09:43:17 +01:00
ben
5d86176a97 nettoyage du 12 décembre 2025-12-12 09:35:34 +01:00
f4b7254223 Merge branch 'main' into david 2025-12-12 09:27:16 +01:00
7cebda02ee Merge branch 'main' into david
integration du citations
2025-12-12 09:24:59 +01:00
ce04d847f6 feat:corrections 2025-12-12 09:17:09 +01:00
21dab81e7a citations-modifs 2025-12-12 08:49:08 +01:00
41d739df95 feat:creation delete-composant.html et delete-composant.js 2025-12-12 08:43:43 +01:00
c7aaa923af feat: creation header composant html et js 2025-12-12 08:43:43 +01:00
77f43fff95 citations 2025-12-12 08:33:41 +01:00
c4a6dcf798 Merge branch 'main' into david 2025-12-12 07:40:34 +01:00
c976d4666b Merge avec conservation de ma version locale 2025-12-11 22:29:54 +01:00
ben
63592a114d mise a jour DOM page modifier categorie 2025-12-11 16:34:46 +01:00
ben
74a04ea355 retouche des redirections de page 2025-12-11 16:12:16 +01:00
5b0edbccca feat: modifier chemin js 2025-12-11 15:18:33 +01:00
ad9e8b8308 os : accordeon 2025-12-11 15:07:04 +01:00
fc19007b05 feat:liste_avant_apres modifie 2025-12-11 13:23:21 +01:00
efad1b078e feat: quelques ajustements liste_slider 2025-12-11 12:54:14 +01:00
16ab4707e2 feat:modifier_avant_apres rechangement structure 2025-12-11 12:34:48 +01:00
ben
84d8f1c481 ajout du badge publié sur facebook (bootstrap) dans la page accueil blog 2025-12-11 12:02:29 +01:00
ben
9e80b99abe correction erreur 2025-12-11 11:11:57 +01:00
ben
2125bfb126 Merge branch 'main' of ssh://git.lalanguebleue.fr:2222/ileauchiens/maquette_backoffice 2025-12-11 11:06:44 +01:00
ben
a0e14bfa92 Mise en place tinymce dans accueil blog avec clé et domaine 2025-12-11 11:04:42 +01:00
e2fe18ec04 feat:modifier_avant_apres changement structure 2025-12-11 10:49:11 +01:00
8fe2e99953 feat:liste_avant_apres prête2 2025-12-11 10:10:07 +01:00
417ff38b59 feat:liste_avant_apres prête 2025-12-11 10:06:53 +01:00
aa5f003be8 feat:work in progress 2025-12-11 09:45:48 +01:00
8867ae1b06 travail en cours 2025-12-11 09:45:48 +01:00
2923a9eb52 correction page accueil blog 2025-12-10 20:57:30 +01:00
ben
50b3904af6 mise a jour categorie (liste deroulante et remplissage obligatoire) + mise a jour checkbox + insertion de TinyMCE (pas finis) 2025-12-10 19:24:00 +01:00
55c3b2d050 Merge branch 'david' of ssh://git.lalanguebleue.fr:2222/ileauchiens/maquette_backoffice 2025-12-10 18:13:29 +01:00
ben
7fc3e350d0 suppressions des pages html liste categorie et liste article 2025-12-10 16:56:09 +01:00
ben
5297dcbcc3 ajout de la page accueil blog + page liste categorie_article regroupant les pages articles et categorie 2025-12-10 16:48:28 +01:00
ben
37b1d7ede5 retrait du max-width sur les pages html de blog + integration du header sur les pages html de blog + creation d'une page accueil blog 2025-12-10 15:10:16 +01:00
77310c974e avant validation 2025-12-10 14:17:34 +01:00
ben
e04e29bf48 Ajout du favicon depuis la branche david 2025-12-10 13:18:49 +01:00
bf25a80f43 feat:ajouter avant apres avec header 2025-12-10 13:00:11 +01:00
7fb728fc00 feat:ajouter avant apres corrigé 2025-12-10 12:49:26 +01:00
ben
33b0c0cab8 ajout login page de connexion + mise a jours des pages mdp oublié, page de connxeion 2025-12-10 12:24:00 +01:00
64 changed files with 4553 additions and 1836 deletions

187
blog/html/accueil_blog.html Normal file
View File

@@ -0,0 +1,187 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liste des vétos - L'Il'eau chiens - Admin</title>
<link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/node_modules/bs-icon/icons.css">
<link rel="shortcut icon" href="/favicon.png" type="image/png">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-xl bg-body-tertiary">
<div class="container-fluid align-items-center">
<a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link left-label" aria-current="page" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Boutique</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Prestations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">FAQ</a></li>
<li class="nav-item"><a class="nav-link active left-label" href="#">Vétos</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Citations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">À propos</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message d'actu</a>
</li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i> Voir le
site</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-gear me-1"></i> Configuration</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
<i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
<li><a class="dropdown-item" href="#">Profil</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sortir</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="my-5 fs-6">
<div class="container">
<header>
<h1 class="title fs-2 text-center">Modifier la page blog</h1>
</header>
<div class="content">
<section class="mb-5 section-categories">
<h2 class="my-4 fs-3">Liste des catégories</h2>
<!-- Message succès catégories -->
<div id="successCategoriesMsg" class="alert alert-success d-none"></div>
<!-- Bouton ajouter catégorie -->
<div class="d-flex justify-content-start mb-4">
<a href="ajouter_categorie.html" class="btn btn-primary">Ajouter une catégorie</a>
</div>
<!-- Tableau catégories -->
<table class="table table-striped table-hover">
<thead class="table-dark">
<tr>
<th>Nom</th>
<th class="text-end">Actions</th>
</tr>
</thead>
<tbody id="categoriesTableBody">
<tr>
<td>Soins</td>
<td class="text-end">
<a href="modifier_categorie.html"
class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<a href="index.php" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal"
data-bs-target="#confirmDeleteModal">Supprimer</a>
</td>
</tr>
<tr>
<td>Alimentation</td>
<td class="text-end">
<a href="modifier_categorie.html"
class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<a href="index.php" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal"
data-bs-target="#confirmDeleteModal">Supprimer</a>
</td>
</tr>
</tbody>
</table>
</section>
<section class="section-articles">
<h2 class="my-4 fs-3">Liste des articles</h2>
<div class="d-flex justify-content-start mb-4">
<a href="ajouter_article.html" class="btn btn-primary">Ajouter un article</a>
</div>
<table class="table table-striped table-hover">
<thead class="table-dark">
<tr>
<th>Titre</th>
<th class="text-end">Actions</th>
</tr>
</thead>
<tbody id="articlesTableBody">
<tr>
<td>Mon premier article</td>
<td class="text-end">
<a href="modifier_article.html"
class="btn btn-sm btn-secondary me-1 disabled">Facebook</a>
<a href="modifier_article.html"
class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<a href="index.php" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal"
data-bs-target="#confirmDeleteModal">Supprimer</a>
</td>
</tr>
<tr>
<td>Mon deuxième article</td>
<td class="text-end">
<a href="modifier_article.html"
class="btn btn-sm btn-outline-success me-1">Facebook</a>
<a href="modifier_article.html"
class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<a href="index.php" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal"
data-bs-target="#confirmDeleteModal">Supprimer</a>
</td>
</tr>
</tbody>
</table>
</section>
</div>
</div>
</main>
<footer class="bg-body-tertiary py-4 mt-auto">
<div class="container d-flex gap-3 flex-wrap">
<span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
<a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
<a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
</div>
</footer>
<div class="modal fade" id="confirmDeleteModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Confirmer la suppression</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Êtes-vous sûr de vouloir supprimer cette catégorie ou cet article ? Cette action est irréversible.
<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>
</div>
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/js/confirmDelete.js"></script>
</body>
</html>

View File

@@ -1,123 +1,158 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajouter un article</title> <title>Liste des vétos - L'Il'eau chiens - Admin</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"> <link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script> <link rel="stylesheet" href="/node_modules/bs-icon/icons.css">
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/translations/fr.js"></script> <link rel="shortcut icon" href="/favicon.png" type="image/png">
<link rel="stylesheet" href="/css/style.css">
<style>
body {
background: #f4f6f9;
}
.container {
max-width: 700px;
margin: 40px auto;
}
.ck-editor__editable {
min-height: 350px;
}
</style>
</head> </head>
<body>
<div class="container"> <body>
<header>
<nav class="navbar navbar-expand-xl bg-body-tertiary">
<div class="container-fluid align-items-center">
<a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link left-label" aria-current="page" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Boutique</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Prestations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">FAQ</a></li>
<li class="nav-item"><a class="nav-link active left-label" href="#">Vétos</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Citations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">À propos</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message d'actu</a>
</li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i> Voir le
site</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-gear me-1"></i> Configuration</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
<i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
<li><a class="dropdown-item" href="#">Profil</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sortir</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="container mt-5">
<h2 class="mb-5 text-center">Ajouter un article</h2> <h2 class="mb-5 text-center">Ajouter un article</h2>
<form id="ajouterArticleForm"> <form id="ajouterArticleForm">
<!--Erreur titre vide--> <div id="messages" class="mb-3"></div>
<div id="errorEmpty" class="alert alert-danger d-none">Le titre de l'article est obligatoire</div>
<!--Erreur image invalide-->
<div id="errorImage" class="alert alert-danger d-none">
Format d'image invalide. Formats acceptés : JPG, PNG
</div>
<!--Erreur titre existant--> <div class="mb-3">
<div id="errorExists" class="alert alert-danger d-none">Ce titre existe déjà. Choisissez un autre titre.</div> <label class="form-label fw-bold">Catégorie (obligatoire)</label>
<select id="articleCategory" class="form-select" required>
<option value="none" disabled selected>Choisissez une catégorie</option>
<option value="actualités">Actualités</option>
<option value="chien">Chien</option>
<option value="chat">Chat</option>
<option value="boutique">Boutique</option>
</select>
</div>
<!--Succès ajout article--> <!-- Titre -->
<div id="successMsg" class="alert alert-success d-none">Article ajouté avec succès !</div> <div class="mb-4">
<label class="form-label fw-bold" for="articleTitle">Titre (obligatoire)</label>
<input type="text" id="articleTitle" class="form-control" placeholder="Entrez le titre de l'article"
required>
</div>
<!-- Catégorie --> <div class="mb-4">
<div class="mb-3"> <label class="form-label fw-bold" for="description">Description (obligatoire)</label>
<label class="form-label fw-bold">Catégorie de l'article</label> <input type="text" id="description" class="form-control" placeholder="Entrez la description de l'article"
<input list="categories" id="articleCategory" class="form-control" placeholder="Entrez une catégorie"> required>
</div>
<datalist id="categories">
<option value="actualités">
<option value="chien">
<option value="chat">
<option value="boutique">
</datalist>
</div>
<!-- Titre --> <!-- Contenu -->
<div class="mb-4"> <div class="row mb-3">
<label class="form-label fw-bold">Titre de l'article (obligatoire)</label> <div class="col-md-4 image">
<input type="text" id="articleTitle" class="form-control" placeholder="Entrez le titre de l'article"> <div class="mb-4">
</div> <label class="form-label fw-bold" for="articleImage">Image (optionnelle)</label>
<!-- Contenu --> <input type="file" id="imageInput" class="form-control" accept="image/png, image/jpeg, image/jpg, image/webp">
<div class="mb-3">
<label class="form-label fw-bold">Contenu de l'article</label>
<textarea id="articleContent" class="form-control" rows="5" placeholder="Entrez le contenu de l'article"></textarea>
</div>
<!-- Image --> </div>
<div class="mb-4"> <div class="preview-img-container">
<label class="form-label fw-bold">Image de l'article</label> </div>
<input type="file" id="articleImage" class="form-control" accept="image/*"> </div>
</div>
<div class="col-md-8 conent">
<div class="mb-3">
<label class="form-label fw-bold" for="articleContent">Contenu (obligatoire)</label>
<div class="row">
</div>
<textarea id="articleContent" required></textarea>
</div>
</div>
</div>
<!--Publié-->
<!-- Publié -->
<div class="form-check mb-3"> <div class="form-check mb-3">
<input class="form-check-input" type="checkbox" id="articlePublished"> <input class="form-check-input" type="checkbox" id="articlePublished">
<label class="form-check-label" for="articlePublished">Publié (sera publié sur le blog)</label> <label class="form-check-label" for="articlePublished">Publié</label>
</div> </div>
<!-- Boutons -->
<!--Boutons-->
<div class="d-flex gap-3 mt-4"> <div class="d-flex gap-3 mt-4">
<a href="../html/liste_article.html" class="btn btn-secondary w-50">Annuler</a> <a href="../html/accueil_blog.html" class="btn btn-secondary w-50">Annuler</a>
<button type="submit" class="btn btn-primary w-50">Ajouter</button> <button type="submit" class="btn btn-primary w-50">Ajouter</button>
</div> </div>
</form> </form>
</div> </main>
<footer class="bg-body-tertiary py-4 mt-auto">
<script src="../js/ajouter_article.js"></script> <div class="container d-flex gap-3 flex-wrap">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
<script> <a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
<a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
ClassicEditor </div>
.create(document.querySelector('#articleContent'), { </footer>
language: 'fr',
toolbar: [
'heading',
'bold', 'italic', 'underline',
'bulletedList', 'numberedList',
'undo', 'redo'
]
})
.catch(error => {
console.error(error);
});
</script> <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/node_modules/tinymce/tinymce.min.js"></script>
<script src="/node_modules/tinymce-i18n/langs8/fr-FR.js"></script>
<script src="/js/tinyMce.js"></script>
<script src="/js/previewImage.js"></script>
</body> </body>
</html> </html>

View File

@@ -1,57 +1,109 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajouter une catégorie</title> <title>Liste des vétos - L'Il'eau chiens - Admin</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"> <link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/node_modules/bs-icon/icons.css">
<link rel="shortcut icon" href="/favicon.png" type="image/png">
<link rel="stylesheet" href="/css/style.css">
<style>
body{
background: #f4f6f981;
}
.container{
max-width: 600px;
margin-top: 50px;
}
</style>
</head> </head>
<body>
<div class="container"> <body>
<header>
<nav class="navbar navbar-expand-xl bg-body-tertiary">
<div class="container-fluid align-items-center">
<a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link left-label" aria-current="page" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Boutique</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Prestations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">FAQ</a></li>
<li class="nav-item"><a class="nav-link active left-label" href="#">Vétos</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Citations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">À propos</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message d'actu</a>
</li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i> Voir le
site</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-gear me-1"></i> Configuration</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
<i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
<li><a class="dropdown-item" href="#">Profil</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sortir</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<h2 class="mb-5 text-center">Ajouter une catégorie</h2> <h2 class="mb-5 text-center">Ajouter une catégorie</h2>
<!--Erreur champ vide -->
<div id="errorEmpty" class="alert alert-danger d-none">Le nom de catégorie est obligatoire.</div>
<!--Erreur nom deja existant --> <div id="messages" class="mb-3"></div>
<div id="errorExists" class="alert alert-danger d-none">Cette catégorie existe déjà. Veuillez en choisir une autre.</div>
<!--Succès ajout catégorie -->
<div id="successMessage" class="alert alert-success d-none">Catégorie ajoutée avec succès !</div>
<form id="addCategoryForm"> <form id="addCategoryForm">
<div class="mb-4"> <div class="mb-4">
<label class="form-label fw-bold">Nom de la catégorie (obligatoire)</label> <label class="form-label fw-bold">Nom de la catégorie (obligatoire)</label>
<input type="text" id="categoryName" class="form-control" placeholder="Actualité, chien, chat .." required></div> <input
type="text"
id="categoryName"
class="form-control"
placeholder="Actualité, chien, chat…" required>
</div>
<div class="mb-3"> <div class="mb-3">
<label class="form-label fw-bold">Description</label> <label class="form-label fw-bold">Description</label>
<textarea id="categoryDescription" class="form-control" rows="4" placeholder="Entrez une description (optionnel)"></textarea> <textarea
id="categoryDescription"
class="form-control"
rows="4"
placeholder="Entrez une description (optionnel)">
</textarea>
</div> </div>
<div class="d-flex gap-3 mt-4"> <div class="d-flex gap-3 mt-4">
<a href="../../../blog/categories/liste_categorie/liste_categorie.html" class="btn btn-secondary w-50">Annuler</a> <a href="../html/accueil_blog.html" class="btn btn-secondary w-50">Annuler</a>
<button type="submit" class="btn btn-primary w-50">Ajouter</button> <button type="submit" class="btn btn-primary w-50">Ajouter</button>
</div> </div>
</form> </form>
</div> </div>
<footer class="bg-body-tertiary py-4 mt-auto">
<script src="../js/ajouter_categorie.js"></script> <div class="container d-flex gap-3 flex-wrap">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
<a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
<a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
</div>
</footer>
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/node_modules/tinymce/tinymce.min.js"></script>
<script src="/node_modules/tinymce-i18n/langs8/fr-FR.js"></script>
<script src="/js/tinyMce.js"></script>
</body> </body>
</html> </html>

View File

@@ -1,67 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liste des article</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
<style>
body {
background: #f4f6f9;
}
.container {
margin-top: 60px;
}
</style>
</head>
<body>
<div class="container">
<div class="d-flex justify-content-between align-items-center mb-4">
<h2 class="mb-0">Listes des articles</h2>
<a href="ajouter_article.html" class="btn btn-primary">Ajouter un article</a>
</div>
<table class="table table-bordered table-hover bg-white">
<thead class="table-light">
<tr>
<th>Titre</th>
<th>Catégorie</th>
<th>Publié</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mon premier article</td>
<td>Chien</td>
<td>Oui</td>
<td>
<a href="voir_article.html" class="btn btn-sm btn-outline-secondary">Voir</a>
<a href="../html/modifier_article.html" class="btn btn-sm btn-outline-primary">Modifier</a>
<button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
</td>
</tr>
<tr>
<td>Mon deuxième article</td>
<td>Chat</td>
<td>Oui</td>
<td>
<a href="voir_article.html" class="btn btn-sm btn-outline-secondary">Voir</a>
<a href="../html/modifier_article.html" class="btn btn-sm btn-outline-primary">Modifier</a>
<button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
</td>
</tr>
</tbody>
</table>
</div>
<script src="../js/liste_articles.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

View File

@@ -1,56 +0,0 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liste des catégories</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
<style>
body {
background: #f4f6f9;
padding: 30px;
}
.container {
max-width: 800px;
margin-top: 40px;
}
</style>
</head>
<body>
<div class="container">
<h2 class="text-center mb-4">Liste des catégories</h2>
<!-- Message succès -->
<div id="successMsg" class="alert alert-success d-none"></div>
<!-- Bouton ajouter -->
<div class="d-flex justify-content-end mb-4">
<a href="../html/ajouter_categorie.html" class="btn btn-primary">
Ajouter une catégorie
</a>
</div>
<!-- Tableau -->
<table class="table table-striped table-hover">
<thead class="table-dark">
<tr>
<th>Nom</th>
<th>Description</th>
<th class="text-center">Actions</th>
</tr>
</thead>
<tbody id="categoriesTableBody">
<!-- rempli en JS -->
</tbody>
</table>
</div>
<script src="../js/liste_categorie.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

View File

@@ -1,134 +1,144 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modifier un article</title> <title>Liste des vétos - L'Il'eau chiens - Admin</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"> <link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script> <link rel="stylesheet" href="/node_modules/bs-icon/icons.css">
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/translations/fr.js"></script> <link rel="shortcut icon" href="/favicon.png" type="image/png">
<link rel="stylesheet" href="/css/style.css">
<style>
body {
background: #f4f6f9;
}
.container {
max-width: 700px;
margin-top: 40px;
}
.preview-img {
max-width: 15px;
border-radius: 8px
}
.ck-editor__editable {
min-height: 350px;
}
</style>
</head> </head>
<body> <body>
<header>
<nav class="navbar navbar-expand-xl bg-body-tertiary">
<div class="container-fluid align-items-center">
<a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link left-label" aria-current="page" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Boutique</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Prestations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">FAQ</a></li>
<li class="nav-item"><a class="nav-link active left-label" href="#">Vétos</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Citations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">À propos</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message d'actu</a>
</li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i> Voir le
site</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-gear me-1"></i> Configuration</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
<i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
<li><a class="dropdown-item" href="#">Profil</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sortir</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container"> <div class="container">
<h2 class="mb-4 text-center">Modifier un article</h2> <h2 class="mb-4 text-center">Modifier un article</h2>
<div id="messages" class="mb-3"></div>
<!--Erreur titre vide-->
<div id="errorEmpty" class="alert alert-danger d-none">
g Le titre de l'article est obligatoire.
</div>
<!--Erreur image invalide-->
<div id="errorImage" class="alert alert-danger d-none">
Format d'image invalide. Formats acceptés : JPG, PNG, GIF.
</div>
<!--Erreur titre existant-->
<div id="errorExists" class="alert alert-danger d-none">
Ce titre existe déjà. Veuillez en choisir un autre.
</div>
<!--Succès-->
<div id="successMsg" class="alert alert-success d-none">
L'article a été modifié avec succès !
</div>
<!-- Formulaire -->
<form id="editArticleForm"> <form id="editArticleForm">
<!-- Titre -->
<!--Titre-->
<div class="mb-3"> <div class="mb-3">
<label class="form-label fw-bold">Titre de l'article (obligatoire)</label> <label class="form-label fw-bold">Titre (obligatoire)</label>
<input type="text" id="articleTitle" class="form-control" value="Titre de l'article actuel" placeholder="Modifier le titre"> <input type="text" id="articleTitle" class="form-control" value="Les chats, ces réveils matin détraqués">
</div>
<div class="mb-4">
<label class="form-label fw-bold" for="description">Description (obligatoire)</label>
<input type="text" id="description" class="form-control" value="la description de précédente"
required>
</div> </div>
<!--Contenu--> <div class="mb-4 categorie">
<label class="form-label fw-bold" for="categories">Catégorie (obligatoire)</label>
<select id="categories" class="form-select">
<option value="none" disabled>Choisissez une catégorie</option>
<option value="actualités">Actualités</option>
<option value="chien">Chien</option>
<option value="chat" selected>Chat</option>
<option value="boutique">Boutique</option>
</select>
</div>
<!-- Contenu -->
<div class="row mb-3">
<div class="col-md-4 image">
<div class="mb-4">
<label class="form-label fw-bold" for="articleImage">Image (optionnelle)</label>
<input type="file" id="imageInput" class="form-control" accept="image/png, image/jpeg, image/jpg, image/webp">
</div>
<div class="preview-img-container">
</div>
</div>
<div class="col-md-8 conent">
<div class="mb-3"> <div class="mb-3">
<label class="form-label fw-bold">Contenu de l'article</label> <label class="form-label fw-bold" for="articleContent">Contenu (obligatoire)</label>
<textarea id="articleContent" class="form-control" rows="5">Contenu de l'article actuel...</textarea> <div class="row">
</div>
<!--Catégorie-->
<div class="mb-4">
<label class="form-label fw-bold">Catégorie de l'article</label>
<input
type="text"
id="articleCategory"
class="form-control"
list="categories"
placeholder="Entrez une catégorie">
<datalist id="categories">
<option value="actualités">
<option value="chien">
<option value="chat">
<option value="boutique">
</datalist>
</div> </div>
<textarea id="articleContent" required></textarea>
<!-- Image actuelle --> </div>
<label class="fw-bold">Image actuelle</label> </div>
<div class="mb-4">
<img src="/blog/categories/images/article1.jpg" alt="Image actuelle" class="preview-img mb-2">
<input type="file" id="articleImage" class="form-control" accept="image/*">
</div> </div>
<!--Publié--> <!-- Publié -->
<div class="form-check mb-3"> <div class="form-check mb-3">
<input class="form-check-input" type="checkbox" id="articlePublished" checked> <input class="form-check-input" type="checkbox" id="articlePublished">
<label class="form-check-label">Publié</label> <label class="form-check-label">Publié</label>
</div> </div>
<!--Boutons--> <!-- Boutons -->
<div class="d-flex gap-3 mt-4"> <div class="d-flex gap-3 mt-4">
<a href="../html/liste_article.html" class="btn btn-secondary w-50">Annuler</a> <a href="../../blog/html/accueil_blog.html" class="btn btn-secondary w-50">Annuler</a>
<button type="submit" class="btn btn-primary w-50">Enregistrer</button> <button type="submit" class="btn btn-primary w-50">Enregistrer</button>
</div> </div>
</form> </form>
</div> </div>
<footer class="bg-body-tertiary py-4 mt-auto">
<script> <div class="container d-flex gap-3 flex-wrap">
ClassicEditor <span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
.create(document.querySelector('#articleContent'), { <a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
language: 'fr', <a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
toolbar: [ </div>
'heading', </footer>
'bold', 'italic', 'underline',
'bulletedList', 'numberedList',
'undo', 'redo'
]
})
</script>
<script src="../js/modifier_article.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/node_modules/tinymce/tinymce.min.js"></script>
<script src="/node_modules/tinymce-i18n/langs8/fr-FR.js"></script>
<script src="/js/tinyMce.js"></script>
<script src="/js/previewImage.js"></script>
</body> </body>
</html> </html>

View File

@@ -1,58 +1,104 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modifier une catégorie</title> <title>Liste des vétos - L'Il'eau chiens - Admin</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"> <link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/node_modules/bs-icon/icons.css">
<link rel="shortcut icon" href="/favicon.png" type="image/png">
<link rel="stylesheet" href="/css/style.css">
<style>
body {
background: #f4f6f981;
}
.container {
max-width: 600px;
margin: 50px auto;
}
</style>
</head> </head>
<body>
<div class="container"> <body>
<header>
<nav class="navbar navbar-expand-xl bg-body-tertiary">
<div class="container-fluid align-items-center">
<a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link left-label" aria-current="page" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Boutique</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Prestations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">FAQ</a></li>
<li class="nav-item"><a class="nav-link active left-label" href="#">Vétos</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Citations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">À propos</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message d'actu</a>
</li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i> Voir le
site</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-gear me-1"></i> Configuration</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
<i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
<li><a class="dropdown-item" href="#">Profil</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sortir</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<h2 class="mb-5 text-center">Modifier une catégorie</h2> <h2 class="mb-5 text-center">Modifier une catégorie</h2>
<div id="errorMsg" class="alert alert-danger d-none">Veuillez ezmplir tous les champs obligatoires</div>
<div id="successMsg" class="alert alert-success d-none">La catégorie a été modifiée avec succès !</div>
<form id="modifierCategorie"> <form id="modifierCategorie">
<div class="mb-4"> <div class="mb-4">
<label class="form-label fw-bold">Nom de la catégorie (obligatoire)</label> <label class="form-label fw-bold">Nom de la catégorie (obligatoire)</label>
<input type="text" id="categoryName" class="form-control" placeholder="Entrez le nom de la catégorie" required> <input type="text" id="categoryName" class="form-control" placeholder="Entrez le nom de la catégorie"
required>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label class="form-label fw-bold">Description (optionnel)</label> <label class="form-label fw-bold">Description (optionnel)</label>
<textarea id="categorieDescription" class="form-control" rows="4" placeholder="Entrez une description" required></textarea> <textarea id="categorieDescription" class="form-control" rows="4"></textarea>
</div> </div>
<div class="d-flex gap-3 mt-4"> <div class="d-flex gap-3 mt-4">
<a href="../../categories/liste_categorie/liste_categorie.html" class="btn btn-secondary w-50">Annuler</a> <a href="../html/accueil_blog.html" class="btn btn-secondary w-50">Annuler</a>
<button type="submit" class="btn btn-primary w-50">Enregistrer</button> <button type="submit" class="btn btn-primary w-50">Enregistrer</button>
</div> </div>
</form> </form>
</div> </div>
<footer class="bg-body-tertiary py-4 mt-auto">
<script src="../js/modifier_categorie.js"></script> <div class="container d-flex gap-3 flex-wrap">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
<a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
<a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
</div>
</footer>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/node_modules/tinymce/tinymce.min.js"></script>
<script src="/node_modules/tinymce-i18n/langs8/fr-FR.js"></script>
<script src="/js/tinyMce.js"></script>
</body> </body>
</html> </html>

View File

@@ -1,59 +1,108 @@
const form = document.getElementById('ajouterArticleForm'); const form = document.getElementById("ajouterArticleForm");
const imgField = document.getElementById('articleImage'); const messages = document.getElementById("messages");
const titleField = document.getElementById('articleTitle');
const contentField = document.getElementById('articleContent');
const categoryField = document.getElementById('articleCategory');
const publishedField = document.getElementById('articlePublished');
const errorEmpty = document.getElementById('errorEmpty'); const imgField = document.getElementById("articleImage");
const errorImage = document.getElementById('errorImage'); const imgPreview = document.getElementById("imagePreview");
const errorExists = document.getElementById('errorExists'); const titleField = document.getElementById("articleTitle");
const successMsg = document.getElementById('successMsg'); const categoryField = document.getElementById("articleCategory");
const publishedField = document.getElementById("articlePublished");
// Simulation BDD // Simulation BDD
const titreExistants = ['décoration noel', 'coupe de chien']; const titresExistants = ["décoration noel", "coupe de chien"];
form.addEventListener('submit', function(e) {
function showMessage(type, text) {
messages.innerHTML = "";
const div = document.createElement("div");
div.className = `alert alert-${type}`;
div.textContent = text;
messages.appendChild(div);
}
function imageValide(file) {
if (!file) return true;
return ["image/jpeg", "image/png"].includes(file.type);
}
// Preview image on selection via generic loader (global)
const imgLoader = window.initImagePreview && window.initImagePreview("articleImage", "articleImagePreview", ["image/jpeg", "image/png"]);
form.addEventListener("submit", function (e) {
e.preventDefault(); e.preventDefault();
messages.innerHTML = "";
const titre = titleField.value.trim().toLowerCase(); const titre = titleField.value.trim();
const fichierImage = imgField.files[0]; const titreLower = titre.toLowerCase();
const contenu = tinymce.get("articleContent").getContent().trim();
const categorie = categoryField.value;
const image = imgField.files[0];
const published = publishedField.checked;
// Reset messages // Catégorie obligatoire
errorEmpty.classList.add('d-none'); if (!categorie) {
errorImage.classList.add('d-none'); showMessage("danger", "Veuillez choisir une catégorie.");
errorExists.classList.add('d-none'); return;
successMsg.classList.add('d-none'); }
// Titre obligatoire // Titre obligatoire
if (titre === "") { if (!titre) {
errorEmpty.classList.remove('d-none'); showMessage("danger", "Le titre de l'article est obligatoire.");
return; return;
} }
// Titre déjà existant // Titre existant
if (titreExistants.includes(titre)) { if (titresExistants.includes(titreLower)) {
errorExists.classList.remove('d-none'); showMessage("danger", "Ce titre existe déjà. Choisissez-en un autre.");
return; return;
} }
// Image invalide // Contenu obligatoire
if (fichierImage) { if (!contenu) {
const validFormats = ['image/jpeg', 'image/png']; showMessage("danger", "Le contenu de l'article ne peut pas être vide.");
if (!validFormats.includes(fichierImage.type)) {
errorImage.classList.remove('d-none');
return; return;
} }
// Image valide
if (!imageValide(image)) {
showMessage("danger", "Format d'image invalide. JPG ou PNG uniquement.");
return;
} }
// Simuler enregistrement // Enregistrement titre simulé
titreExistants.push(titre); titresExistants.push(titreLower);
// Succès // Création article
successMsg.classList.remove('d-none'); const nouvelArticle = {
id: Date.now(),
titre,
contenu,
categorie,
published,
date: new Date().toISOString()
};
// Redirection après 1 seconde // LocalStorage
const articles = JSON.parse(localStorage.getItem("articles")) || [];
articles.push(nouvelArticle);
localStorage.setItem("articles", JSON.stringify(articles));
showMessage("success", "Article ajouté avec succès !");
// Reset
form.reset();
tinymce.get("articleContent").setContent("");
if (imgLoader && typeof imgLoader.reset === "function") {
imgLoader.reset();
}
// Redirection
setTimeout(() => { setTimeout(() => {
window.location.href = "../html/liste_article.html"; window.location.href = "../html/accueil_blog.html";
}, 1000); }, 1500);
}); });

View File

@@ -1,47 +1,52 @@
const form = document.getElementById("addCategoryForm"); const form = document.getElementById("addCategoryForm");
const messages = document.getElementById("messages");
const nameField = document.getElementById("categoryName"); const nameField = document.getElementById("categoryName");
const descField = document.getElementById("categoryDescription"); const descField = document.getElementById("categoryDescription");
const errorEmpty = document.getElementById("errorEmpty"); // Catégories existantes (simulation BDD)
const errorExists = document.getElementById("errorExists");
const successMessage = document.getElementById("successMessage");
// Catégories existantes ( à remplacer en BD si besoin)
const existingCategories = ["Actualités", "Chien", "Chat", "Boutique"]; const existingCategories = ["Actualités", "Chien", "Chat", "Boutique"];
function showMessage(type, text) {
messages.innerHTML = "";
const div = document.createElement("div");
div.className = `alert alert-${type}`;
div.textContent = text;
messages.appendChild(div);
}
form.addEventListener("submit", function (e) { form.addEventListener("submit", function (e) {
e.preventDefault(); e.preventDefault();
messages.innerHTML = "";
const nom = nameField.value.trim(); const nom = nameField.value.trim();
//Remettre tout a zero // Champ obligatoire
errorEmpty.classList.add("d-none"); if (!nom) {
errorExists.classList.add("d-none"); showMessage("danger", "Le nom de la catégorie est obligatoire.");
successMessage.classList.add("d-none");
//Erreur champs vide
if (nom === "") {
errorEmpty.classList.remove("d-none");
return; return;
} }
//Erreur catégorie existante // Catégorie existante
if (existingCategories.includes(nom)) { if (existingCategories.includes(nom)) {
errorExists.classList.remove("d-none"); showMessage("danger", "Cette catégorie existe déjà. Veuillez en choisir une autre.");
return; return;
} }
// Succès // Ajout catégorie (simulation)
successMessage.classList.remove("d-none"); existingCategories.push(nom);
// Ajout d'une nouvelle catégorie showMessage("success", "Catégorie ajoutée avec succès !");
existingCategories.push(nom);
// Redirection après 1 seconde
setTimeout(() => {
window.location.href = "../html/liste_categorie.html";
}, 1000);
// Reset formulaire
form.reset();
// Redirection
setTimeout(() => {
window.location.href = "../html/accueil_blog.html";
}, 1500);
}); });

View File

@@ -0,0 +1,67 @@
// Sélecteur du tableau
const articlesTableBody = document.getElementById("articlesTableBody");
// Charger les articles depuis le localStorage
let articles = JSON.parse(localStorage.getItem("articles")) || [];
// Fonction d'affichage des articles
function afficherArticles() {
articlesTableBody.innerHTML = ""; // Nettoie le tableau
if (articles.length === 0) {
articlesTableBody.innerHTML = `
<tr>
<td colspan="2" class="text-center text-muted py-3">
Aucun article pour le moment.
</td>
</tr>
`;
return;
}
articles.forEach(article => {
const tr = document.createElement("tr");
tr.innerHTML = `
<td>
${article.titre}
${article.published ? '<span class="badge bg-primary ms-2">Publié Facebook</span>' : ''}
</td>
<td class="text-end">
<a href="modifier_article.html?id=${article.id}"
class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<button class="btn btn-sm btn-outline-danger delete-btn" data-id="${article.id}">
Supprimer
</button>
</td>
`;
articlesTableBody.appendChild(tr);
});
}
// Gestion de suppression
document.addEventListener("click", function (e) {
const btn = e.target.closest(".delete-btn");
if (!btn) return;
const row = btn.closest("tr");
const titre = row.querySelector("td").textContent.trim();
const id = Number(btn.dataset.id);
if (confirm(`Voulez-vous vraiment supprimer l'article : "${titre}" ?`)) {
// Supprimer dans le tableau local
articles = articles.filter(article => article.id !== id);
localStorage.setItem("articles", JSON.stringify(articles));
// Supprimer visuel
row.remove();
alert("Article supprimé !");
}
});
// Lancer l'affichage dès que la page charge
afficherArticles();

View File

@@ -1,14 +0,0 @@
document.addEventListener("click", function (e) {
const btn = e.target.closest(".delete-btn");
if (!btn) return; // on a cliqué ailleurs
// On récupère la ligne de l'article
const row = btn.closest("tr");
const titre = row.querySelector("td").textContent.trim();
if (confirm(`Voulez-vous vraiment supprimer l'article : "${titre}" ?`)) {
row.remove(); // supprime la ligne
alert("Article supprimé !");
}
});

View File

@@ -17,14 +17,15 @@ function afficherCategories() {
const row = ` const row = `
<tr> <tr>
<td>${cat.nom}</td> <td>${cat.nom}</td>
<td>${cat.description || "-"}</td>
<td class="text-center"> <td class="text-end">
<a href="../html/modifier_categorie.html?id=${cat.id}" class="btn btn-warning btn-sm"> <a href="../html/modifier_categorie.html?id=${cat.id}"
class="btn btn-sm btn-outline-primary me-1">
Modifier Modifier
</a> </a>
<button class="btn btn-danger btn-sm" onclick="supprimerCategorie(${index})"> <button class="btn btn-sm btn-outline-danger"
onclick="supprimerCategorie(${index})">
Supprimer Supprimer
</button> </button>
</td> </td>

View File

@@ -1,60 +1,90 @@
const form = document.getElementById("editArticleForm"); const form = document.getElementById("editArticleForm");
const messages = document.getElementById("messages");
const imgField = document.getElementById("articleImage"); const imgField = document.getElementById("articleImage");
const titleField = document.getElementById("articleTitle"); const titleField = document.getElementById("articleTitle");
const imgPreview = document.getElementById("imagePreview");
const contentField = document.getElementById("articleContent"); const contentField = document.getElementById("articleContent");
const categoryField = document.getElementById("articleCategory"); const categoryField = document.getElementById("articleCategory");
const publishedField = document.getElementById("articlePublished"); const publishedField = document.getElementById("articlePublished");
const errorEmpty = document.getElementById("errorEmpty"); // Simulation BDD pour doublons
const errorImage = document.getElementById("errorImage");
const errorExists = document.getElementById("errorExists");
const successMsg = document.getElementById("successMsg");
// Simulation BDD pour vérifier doublons
const titresExistants = [ const titresExistants = [
"article de test", "article de test",
"nouveautés chiens", "nouveautés chiens",
"actualité du mois", "actualité du mois"
]; ];
function showMessage(type, text) {
messages.innerHTML = "";
const div = document.createElement("div");
div.className = `alert alert-${type}`;
div.textContent = text;
messages.appendChild(div);
}
function imageValide(file) {
if (!file) return true;
return ["image/jpeg", "image/png", "image/gif"].includes(file.type);
}
// Preview image on selection
imgField.addEventListener("change", function () {
const file = imgField.files && imgField.files[0];
if (!file || !imageValide(file)) {
if (imgPreview) {
imgPreview.src = "";
imgPreview.classList.add("d-none");
}
return;
}
const url = URL.createObjectURL(file);
imgPreview.src = url;
imgPreview.classList.remove("d-none");
});
form.addEventListener("submit", function (e) { form.addEventListener("submit", function (e) {
e.preventDefault(); e.preventDefault();
messages.innerHTML = "";
const titre = titleField.value.trim().toLowerCase(); const titre = titleField.value.trim().toLowerCase();
const fichierImage = imgField.files[0]; const contenu = tinymce.get("articleContent").getContent().trim();
const image = imgField.files[0];
// Reset messages // Titre obligatoire
errorEmpty.classList.add("d-none"); if (!titre) {
errorImage.classList.add("d-none"); showMessage("danger", "Le titre de l'article est obligatoire.");
errorExists.classList.add("d-none");
successMsg.classList.add("d-none");
//Titre obligatoire
if (titre === "") {
errorEmpty.classList.remove("d-none");
return; return;
} }
// Titre déjà existant ? // Titre existant
if (titresExistants.includes(titre)) { if (titresExistants.includes(titre)) {
errorExists.classList.remove("d-none"); showMessage("danger", "Ce titre existe déjà. Veuillez en choisir un autre.");
return; return;
} }
//Vérification image // Contenu obligatoire
if (fichierImage) { if (!contenu) {
const validFormats = ["image/jpeg", "image/png", "image/gif"]; showMessage("danger", "Le contenu de l'article ne peut pas être vide.");
if (!validFormats.includes(fichierImage.type)) {
errorImage.classList.remove("d-none");
return; return;
} }
// Image valide
if (!imageValide(image)) {
showMessage("danger", "Format d'image invalide. JPG, PNG ou GIF uniquement.");
return;
} }
// Succès // Succès
successMsg.classList.remove("d-none"); showMessage("success", "L'article a été modifié avec succès !");
// Redirection après succès // Redirection
setTimeout(() => { setTimeout(() => {
window.location.href = "../html/liste_article.html"; window.location.href = "../../blog/html/accueil_blog.html";
}, 1500); }, 1500);
}); });

View File

@@ -1,26 +1,37 @@
const form = document.getElementById("modifierCategorie"); const form = document.getElementById("modifierCategorie");
const nameField = document.getElementById("categoryName"); const nameField = document.getElementById("categoryName");
const descField = document.getElementById("categorieDescription"); const descField = document.getElementById("categorieDescription");
const errorMsg = document.getElementById("errorMsg");
const successMsg = document.getElementById("successMsg"); // Fonction pour afficher un message Bootstrap
function showMessage(type, message) {
// Création de l'alert
const alert = document.createElement("div");
alert.className = `alert alert-${type} mt-3`;
alert.textContent = message;
// Ajout en haut du formulaire
form.prepend(alert);
// Suppression automatique après 2 secondes
setTimeout(() => {
alert.remove();
}, 2000);
}
form.addEventListener("submit", function (e) { form.addEventListener("submit", function (e) {
e.preventDefault(); e.preventDefault();
// Vérification des champs obligatoires // Vérification des champs obligatoires
if (nameField.value.trim() === "" || descField.value.trim() === "") { if (nameField.value.trim() === "" || descField.value.trim() === "") {
errorMsg.classList.remove("d-none"); showMessage("danger", "Veuillez remplir tous les champs obligatoires");
successMsg.classList.add("d-none");
return; return;
} }
// Succès // Message succès
errorMsg.classList.add("d-none"); showMessage("success", "La catégorie a été modifiée avec succès !");
successMsg.classList.remove("d-none");
// Redirection après succès // Redirection après succès
setTimeout(() => { setTimeout(() => {
window.location.href = "../html/liste_categorie.html"; window.location.href = "../html/accueil_blog.html";
}, 1500); }, 1500);
}); });

View File

@@ -0,0 +1,181 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Citations - L'Il'eau chiens - Admin</title>
<link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/node_modules/bs-icon/icons.css">
<link rel="shortcut icon" href="/favicon.png" type="image/png">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/citations.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-xl bg-body-tertiary">
<div class="container-fluid align-items-center">
<a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link left-label" aria-current="page" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Boutique</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Prestations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">FAQ</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Vétos</a></li>
<li class="nav-item"><a class="nav-link active left-label" href="#">Citations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">À propos</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message d'actu</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i> Voir le site</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-gear me-1"></i> Configuration</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
<li><a class="dropdown-item" href="#">Profil</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Sortir</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="my-5 fs-6">
<div class="container">
<header>
<h1 class="title my-4 fs-2 text-center">Liste des citations</h1>
</header>
<div class="content">
<div class="ajouter">
<a href="#" class="btn btn-primary">Ajouter une citation</a>
</div>
<section class="chiens my-4">
<h2 class="fs-4">Citations chiens</h2>
<table class="table table-striped table-hover">
<thead class="table-dark">
<tr>
<th>Citations</th>
<th class="text-end">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Le chien est le seul être sur terre qui vous aime plus qu'il ne s'aime lui-même. (Josh Billings)</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a>
<a href="index.php" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal" data-bs-target="#confirmDeleteModal">Supprimer</a>
</td>
</tr>
<tr>
<td>Un chien est la seule chose sur terre qui vous aime plus qu'il ne s'aime lui-même. (Josh Billings)</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a>
<a href="#" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal" data-bs-target="#confirmDeleteModal">Supprimer</a>
</td>
</tr>
</tbody>
</table>
</section>
<section class="chats my-4">
<h2 class="fs-4">Citations chats</h2>
<table class="table table-striped table-hover">
<thead class="table-dark">
<tr>
<th>Citations</th>
<th class="text-end">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Le chien est le seul être sur terre qui vous aime plus qu'il ne s'aime lui-même. (Josh Billings)</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a>
<a href="index.php?suppression" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal" data-bs-target="#confirmDeleteModal">Supprimer</a>
</td>
</tr>
<tr>
<td>Un chien est la seule chose sur terre qui vous aime plus qu'il ne s'aime lui-même. (Josh Billings)</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a>
<a href="#" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal" data-bs-target="#confirmDeleteModal">Supprimer</a>
</td>
</tr>
</tbody>
</table>
</section>
<section class="divers my-4">
<h2 class="fs-4">Citations divers</h2>
<table class="table table-striped table-hover">
<thead class="table-dark">
<tr>
<th>Citations</th>
<th class="text-end">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Le chien est le seul être sur terre qui vous aime plus qu'il ne s'aime lui-même. (Josh Billings)</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a>
<a href="index.php?suppression" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal" data-bs-target="#confirmDeleteModal">Supprimer</a>
</td>
</tr>
<tr>
<td>Un chien est la seule chose sur terre qui vous aime plus qu'il ne s'aime lui-même. (Josh Billings)</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a>
<a href="#" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal" data-bs-target="#confirmDeleteModal">Supprimer</a>
</td>
</tr>
</tbody>
</table>
</section>
</div>
</div>
</main>
<footer class="bg-body-tertiary py-4 mt-auto">
<div class="container d-flex gap-3 flex-wrap">
<span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
<a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
<a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
</div>
</footer>
<div class="modal fade" id="confirmDeleteModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Confirmer la suppression</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Êtes-vous sûr de vouloir supprimer cette citation ? Cette action est définitive.
</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="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/js/contentReduct.js"></script>
<script src="/js/confirmDelete.js"></script>
</body>
</html>

View File

@@ -0,0 +1,101 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajouter une citation - L'Il'eau chiens - Admin</title>
<link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/node_modules/bs-icon/icons.css">
<link rel="shortcut icon" href="/favicon.png" type="image/png">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-xl bg-body-tertiary">
<div class="container-fluid align-items-center">
<a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link left-label" aria-current="page" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Boutique</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Prestations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">FAQ</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Vétos</a></li>
<li class="nav-item"><a class="nav-link active left-label" href="#">Citations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">À propos</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message
d'actu</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i>
Voir le site</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-gear me-1"></i>
Configuration</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
<li><a class="dropdown-item" href="#">Profil</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sortir</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="my-5 fs-6">
<div class="container">
<header>
<h1 class="title my-4 fs-2 text-center">Ajouter une citation</h1>
</header>
<div class="content">
<form id="ajouterArticleForm">
<div class="mb-4 quote-addition">
<label class="form-label fw-bold" for="citation">La citations (obligatoire)</label>
<input type="text" id="citation" class="form-control"
placeholder="Il faut ne jamais abandonner..." required>
</div>
<div class="mb-3 citation-category">
<label class="form-label fw-bold" for="citationCategory">Catégorie de la citation (obligatoire)</label>
<select id="citationCategory" class="form-select" required>
<option value="" disabled selected>Choisissez une catégorie</option>
<option value="chiens">Chiens</option>
<option value="chats">Chats</option>
<option value="divers">Divers</option>
</select>
</div>
<div class="d-flex gap-3 mt-4 confirmation-buttons">
<a href="./accueil.html" class="btn btn-secondary w-50">Annuler</a>
<button type="submit" class="btn btn-primary w-50">Ajouter</button>
</div>
</form>
</div>
</div>
</main>
<footer class="bg-body-tertiary py-4 mt-auto">
<div class="container d-flex gap-3 flex-wrap">
<span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
<a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
<a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
</div>
</footer>
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

View File

@@ -0,0 +1,101 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modifier une citation - L'Il'eau chiens - Admin</title>
<link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/node_modules/bs-icon/icons.css">
<link rel="shortcut icon" href="/favicon.png" type="image/png">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-xl bg-body-tertiary">
<div class="container-fluid align-items-center">
<a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link left-label" aria-current="page" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Boutique</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Prestations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">FAQ</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Vétos</a></li>
<li class="nav-item"><a class="nav-link active left-label" href="#">Citations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">À propos</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message
d'actu</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i>
Voir le site</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-gear me-1"></i>
Configuration</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
<li><a class="dropdown-item" href="#">Profil</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sortir</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="my-5 fs-6">
<div class="container">
<header>
<h1 class="title my-4 fs-2 text-center">Modifier une citation</h1>
</header>
<div class="content">
<form id="ajouterArticleForm">
<div class="mb-4 quote-addition">
<label class="form-label fw-bold" for="citation">La citations (obligatoire)</label>
<input type="text" id="citation" class="form-control"
placeholder="Il faut ne jamais abandonner..." value="La citation à modifier" required>
</div>
<div class="mb-3 citation-category">
<label class="form-label fw-bold" for="citationCategory">Catégorie de la citation (obligatoire)</label>
<select id="citationCategory" class="form-select" required>
<option value="" disabled>Choisissez une catégorie</option>
<option value="chiens" selected>Chiens</option>
<option value="chats">Chats</option>
<option value="divers">Divers</option>
</select>
</div>
<div class="d-flex gap-3 mt-4 confirmation-buttons">
<a href="./accueil.html" class="btn btn-secondary w-50">Annuler</a>
<button type="submit" class="btn btn-primary w-50">Ajouter</button>
</div>
</form>
</div>
</div>
</main>
<footer class="bg-body-tertiary py-4 mt-auto">
<div class="container d-flex gap-3 flex-wrap">
<span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
<a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
<a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
</div>
</footer>
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

View File

@@ -0,0 +1,173 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Configuration - L'Il'eau chiens - Admin</title>
<link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/node_modules/bs-icon/icons.css">
<link rel="shortcut icon" href="/favicon.png" type="image/png">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-xl bg-body-tertiary">
<div class="container-fluid align-items-center">
<a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link left-label" aria-current="page" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Boutique</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Prestations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">FAQ</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Vétos</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Citations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">À propos</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message d'actu</a>
</li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i> Voir le
site</a></li>
<li class="nav-item"><a class="nav-link active" href="#"><i class="bi bi-gear me-1"></i> Configuration</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
<i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
<li><a class="dropdown-item" href="#">Profil</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sortir</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="my-5 fs-6">
<div class="container">
<header>
<h1 class="title my-4 fs-2 text-center">Configuration</h1>
</header>
<div class="content">
<form id="configForm">
<div class="validation my-4">
<button type="submit" class="btn btn-primary">Modifier</button>
</div>
<table class="table table-striped table-hover align-middle">
<thead class="table-dark">
<tr>
<th scope="col">Clé</th>
<th scope="col">Valeur</th>
</tr>
</thead>
<tbody>
<tr class="cfg-tel">
<td><label class="form-label fw-bold" for="tel">Téléphone</label></td>
<td><input type="tel" id="tel" class="form-control" value="06 12 34 56 78"></td>
</tr>
<tr class="cfg-mail">
<td><label class="form-label fw-bold" for="mail">Mail de contact</label></td>
<td><input type="email" id="mail" class="form-control" value="contact@example.com"></td>
</tr>
<tr class="cfg-adresse">
<td><label class="form-label fw-bold" for="adresse">Adresse</label></td>
<td><input type="text" id="adresse" class="form-control" value="12 rue des Lilas"></td>
</tr>
<tr class="cfg-code-postal">
<td><label class="form-label fw-bold" for="codePostal">Code postal</label></td>
<td><input type="text" id="codePostal" class="form-control" value="75001" pattern="\\d{5}"></td>
</tr>
<tr class="cfg-gps">
<td><label class="form-label fw-bold" for="gpsLat">Coordonnées GPS</label></td>
<td>
<div class="row g-2">
<div class="col-6">
<input type="text" id="gpsLat" class="form-control" value="Latitude (ex: 48.8566)" pattern="-?\d{1,2}\.\d+">
</div>
<div class="col-6">
<input type="text" id="gpsLng" class="form-control" value="Longitude (ex: 2.3522)" pattern="-?\d{1,3}\.\d+">
</div>
</div>
</td>
</tr>
<tr class="cfg-ville">
<td><label class="form-label fw-bold" for="ville">Ville</label></td>
<td><input type="text" id="ville" class="form-control" value="Paris"></td>
</tr>
<tr class="cfg-horaire-matin-debut">
<td><label class="form-label fw-bold" for="horaireMatinDebut">Horaires début matinée</label></td>
<td><input type="time" id="horaireMatinDebut" class="form-control" value="09:00"></td>
</tr>
<tr class="cfg-horaire-matin-fin">
<td><label class="form-label fw-bold" for="horaireMatinFin">Horaires fin matinée</label></td>
<td><input type="time" id="horaireMatinFin" class="form-control" value="12:00"></td>
</tr>
<tr class="cfg-horaire-aprem-debut">
<td><label class="form-label fw-bold" for="horaireApremDebut">Horaires début après-midi</label></td>
<td><input type="time" id="horaireApremDebut" class="form-control" value="14:00"></td>
</tr>
<tr class="cfg-horaire-aprem-fin">
<td><label class="form-label fw-bold" for="horaireApremFin">Horaires fin après-midi</label></td>
<td><input type="time" id="horaireApremFin" class="form-control" value="18:00"></td>
</tr>
<tr class="cfg-jours-ouverts">
<td><label class="form-label fw-bold" for="joursOuverts">Jours ouverts</label></td>
<td>
<select id="joursOuverts" class="form-select" multiple size="5">
<option value="lundi">Lundi</option>
<option value="mardi">Mardi</option>
<option value="mercredi">Mercredi</option>
<option value="jeudi">Jeudi</option>
<option value="vendredi">Vendredi</option>
<option value="samedi">Samedi</option>
<option value="dimanche">Dimanche</option>
</select>
<small class="text-muted">Maintenez Ctrl (Cmd sur Mac) pour sélectionner plusieurs jours.</small>
</td>
</tr>
<tr class="cfg-facebook">
<td><label class="form-label fw-bold" for="pageFacebook">Page Facebook</label></td>
<td><input type="url" id="pageFacebook" class="form-control" value="https://www.facebook.com/votrepage"></td>
</tr>
<tr class="cfg-siret">
<td><label class="form-label fw-bold" for="siret">SIRET</label></td>
<td><input type="text" id="siret" class="form-control" value="123 456 789 00012" pattern="\d{3}\s?\d{3}\s?\d{3}\s?\d{5}"></td>
</tr>
</tbody>
</table>
<div class="validation">
<button type="submit" class="btn btn-primary">Modifier</button>
</div>
</form>
</div>
</div>
</main>
<footer class="bg-body-tertiary py-4 mt-auto">
<div class="container d-flex gap-3 flex-wrap">
<span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
<a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
<a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
</div>
</footer>
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

View File

@@ -1,13 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head>
<head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mot de passe oublié</title> <title>Mot de passe oublié</title>
<link <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" />
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
/>
<style> <style>
body { body {
@@ -17,45 +15,42 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.forgot-password-card { .forgot-password-card {
width: 100%; width: 100%;
max-width: 380px; max-width: 380px;
} }
</style> </style>
</head> </head>
<body>
<body>
<div class="card shadow forgot-password-card"> <div class="card shadow forgot-password-card">
<div class="card-body p-4"> <div class="card-body p-4">
<h3 class="text-center mb-4">Mot de passe oublié</h3> <h1 class="text-center mb-4 fs-3">Mot de passe oublié</h1>
<p> <p class="text text-muted mb-4">
Nous avons besoin de votre adresse mail pour pouvoir réinitialiser Nous avons besoin de votre adresse mail pour pouvoir réinitialiser
votre mot de passe. votre mot de passe.
</p> </p>
<form> <form>
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Adresse e-mail</label> <label class="form-label" for="email">Adresse e-mail</label>
<input <input type="email" class="form-control" placeholder="exemple@mail.com" required />
type="email"
class="form-control"
placeholder="exemple@mail.com"
/>
</div> </div>
<button class="btn btn-primary w-100">
<button class="btn btn-primary w-100" type="submit">
Réinitialiser le mot de passe Réinitialiser le mot de passe
</button> </button>
<div class="text-center mt-3"> <div class="text-center mt-3">
<a <a href="../html/page_de_connexion.html" class="text-decoration-none">Retour à la connexion</a>
href="../html/page_de_connexion.html"
class="text-decoration-none"
>Retour à la connexion</a
>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body> </body>
</html> </html>

View File

@@ -26,12 +26,23 @@
<body> <body>
<div class="card shadow login-card"> <div class="card shadow login-card">
<div class="card-body p-4"> <div class="card-body p-4">
<h3 class="text-center mb-4">Connexion Admin</h3> <h1 class="text-center mb-4 fs-3">Connexion Admin</h1>
<form> <form>
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Mot de passe</label> <label class="form-label">Adresse e-mail </label>
<input
type="email"
class="form-control"
id="textInput"
/>
</div>
<div class="mb-3">
<label class="form-label" for="password">Mot de passe</label>
<input <input
type="password" type="password"
class="form-control" class="form-control"
@@ -44,7 +55,7 @@
</label> </label>
</div> </div>
<button class="btn btn-primary w-100">Se connecter</button> <button class="btn btn-primary w-100" type="submit">Se connecter</button>
<div class="text-center mt-3"> <div class="text-center mt-3">
<a href="../html/mot_de_passe_oublie.html" class="text-decoration-none">Mot de passe oublié ?</a> <a href="../html/mot_de_passe_oublie.html" class="text-decoration-none">Mot de passe oublié ?</a>
@@ -53,6 +64,7 @@
</div> </div>
</div> </div>
<script src="../js/page_de_connexion.js"></script> <script src="../js/page_de_connexion.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body> </body>
</html> </html>

View File

@@ -1,70 +1,54 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Réinitialisation du mot de passe</title> <title>Réinitialisation du mot de passe</title>
<link <link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
rel="stylesheet" <link rel="shortcut icon" href="/favicon.png" type="image/png">
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
/>
<style> <style>
body { body {
background: #f4f6f981;
height: 100vh; height: 100vh;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.reset-password-card { .reset-password-card {
width: 100%; width: 100%;
max-width: 380px; max-width: 380px;
} }
</style> </style>
</head> </head>
<body>
<body>
<div class="card shadow reset-password-card"> <div class="card shadow reset-password-card">
<div class="card-body p-4"> <div class="card-body p-4">
<h3 class="text-center mb-4">Nouveau mot de passe</h3> <h1 class="text-center mb-4 fs-3">Nouveau mot de passe</h1>
<p class="text-center text-muted mb-4"> <p class="text text-muted mb-4">
Pour réinitialiser votre mot de passe, veuillez saisir un nouveau mot Pour réinitialiser votre mot de passe, veuillez saisir un nouveau mot
de passe ainsi qu'une confirmation. de passe ainsi qu'une confirmation.
</p> </p>
<div
id="errorMsg"
class="alert alert-danger text-center" <form id="password-form">
style="display: none" <main>
> <div class="mb-4">
Les mots de passe ne correspondent pas. <label class="form-label">Nouveau mot de passe <br><span class="small"><span id="min8">8 caractères minimum</span>, incluant une <span id="uppercase">majuscule</span>, une <span id="lowercase">minuscule</span> et un <span id="digit">chiffre</span></span></label>
<input type="password" class="form-control" id="password" required />
</div> </div>
<form id="resetForm"> <div class="mb-2">
<div class="mb-3"> <label class="form-label">Confirmer le mot de passe</label>
<label class="form-label" <input type="password" class="form-control" id="passwordConfirm" required />
>Nouveau mot de passe (minimum 8 caractères)</label
>
<input
type="password"
class="form-control"
id="password"
required
/>
<small id="passwordIndicator" class="fw-bold"></small>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label class="form-label"
>Confirmer le mot de passe (minimum 8 caractères)</label
>
<input
type="password"
class="form-control"
id="confirmPassword"
required
/>
<label for="showPassword" class="mt-3"> <label for="showPassword" class="mt-3">
<input type="checkbox" id="showPassword" /> <input type="checkbox" id="showPassword" />
Voir le mot de passe Voir le mot de passe
@@ -75,21 +59,19 @@
<div
id="successMsg"
class="alert alert-success text-center"
style="display: none"
>
Votre mot de passe a été modifié avec succès !
</div>
<button class="btn btn-primary w-100" type="submit"> <button class="btn btn-primary w-100" type="submit">
Changer le mot de passe Changer le mot de passe
</button> </button>
<div class="text-center mt-3">
<a href="../html/page_de_connexion.html" class="text-decoration-none">Retour à la connexion</a>
</form> </form>
</main>
</div> </div>
</div> </div>
<script src="../js/reinitialisation_du_mot_de_passe.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <script src="/js/password.js"></script>
</body> </body>
</html> </html>

View File

@@ -40,7 +40,7 @@ form.addEventListener('submit', function(e) {
if (pass.length < minLength) { if (pass.length < minLength) {
errorMsg.style.display = 'block'; errorMsg.style.display = 'block';
errorMsg.textContent = `Le mot de passe doit contenir au moins ${minLength} caractères.`; errorMsg.textContent = `Le mot de passe doit contenir au moins ${minLength} caractères.`;
return; return;8 caractères minimum
} }
//Correspondance //Correspondance
@@ -61,7 +61,7 @@ form.addEventListener('submit', function(e) {
showPasswordCheckbox.addEventListener('change', function() { showPasswordCheckbox.addEventListener('change', function() {
if (this.checked) { if (this.checked) {8 caractères minimum
password.type = 'text'; password.type = 'text';
confirmPassword.type = 'text'; confirmPassword.type = 'text';

10
css/avant_apres.css Normal file
View File

@@ -0,0 +1,10 @@
/*=============================================================================
Image Preview Styles
=============================================================================*/
.img-preview {
max-width: 150px;
border-radius: 8px;
display: none;
/* cachée tant qu'il n'y a pas d'image */
}

0
css/prestation.css Normal file
View File

88
css/style.css Normal file
View File

@@ -0,0 +1,88 @@
/*=============================================================================
Header Navbar Styles
=============================================================================*/
a.nav-link {
font-size: 1rem;
}
.navbar-brand {
font-size: 1.1rem;
line-height: 1;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.brand-sep {
height: .8rem;
}
@media (max-width: 1320px) AND (min-width: 1200px) {
.navbar .nav-link {
font-size: .85rem !important;
}
}
@media (max-width: 1199.98px) {
.navbar .nav-item {
background-color: var(--bs-light);
border: 1px solid var(--bs-border-color);
border-radius: .25rem;
margin-bottom: .375rem;
text-align: center;
}
#navbarSupportedContent>ul:first-child {
margin-top: .5rem;
}
#navbarSupportedContent>ul:last-child {
margin-top: 1rem;
}
.bi {
display: none;
}
}
/*=============================================================================
Divers
=============================================================================*/
a.tox-promotion-link {
display: none !important;
}
body {
background: #f4f6f981;
}
.container {
margin: 50px auto;
}
/*=============================================================================
Placeholders (global)
=============================================================================*/
[placeholder] {
font-size: 0.9rem !important;
font-style: italic !important;
}
/*=============================================================================
Image Previews
=============================================================================*/
.preview-img-container{
margin-top: -.8rem;
width: 100%;
height: 20.3rem;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
border-radius: .25rem;
margin-bottom: 1rem;
background-color: rgb(238, 236, 236);
}

180
faq/faq_accueil.html Normal file
View File

@@ -0,0 +1,180 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FAQ - L'Il'eau chiens - Admin</title>
<link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/node_modules/bs-icon/icons.css">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/citations.css">
<link rel="shortcut icon" href="/favicon.png" type="image/png">
</head>
<body>
<header>
<nav class="navbar navbar-expand-xl bg-body-tertiary">
<div class="container-fluid align-items-center">
<a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link left-label" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Boutique</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Prestations</a></li>
<li class="nav-item"><a class="nav-link active left-label" href="#">FAQ</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Vétos</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Citations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">À propos</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message d'actu</a>
</li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i> Voir le
site</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-gear me-1"></i> Configuration</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
<i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
<li><a class="dropdown-item" href="#">Profil</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sortir</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="my-5 fs-6">
<div class="container">
<header>
<h1 class="title my-4 fs-2 text-center">Liste des FAQ</h1>
</header>
<div class="content">
<section class="themes my-4">
<h2 class="fs-4">Gérer les thèmes des questions</h2>
<div class="d-flex justify-content-start mb-4">
<a href="ajouter.html" class="btn btn-primary">Ajouter un thème</a>
</div>
<table class="table table-striped table-hover">
<thead class="table-dark">
<tr>
<th>Thème</th>
<th class="text-end">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chiens</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a>
<a href="index.php" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal"
data-bs-target="#confirmDeleteModal">Supprimer</a>
</td>
</tr>
<tr>
<td>Chat</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a>
<a href="#" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal"
data-bs-target="#confirmDeleteModal">Supprimer</a>
</td>
</tr>
<tr>
<td>Autres questions</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a>
<a href="#" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal"
data-bs-target="#confirmDeleteModal">Supprimer</a>
</td>
</tr>
</tbody>
</table>
</section>
<section class="questions my-5">
<h2 class="fs-4">Gérer les questions</h2>
<div class="d-flex justify-content-start mb-4">
<a href="ajouter.html" class="btn btn-primary">Ajouter une question</a>
</div>
<table class="table table-striped table-hover">
<thead class="table-dark">
<tr>
<th>Questions</th>
<th class="text-end">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pourquoi les chiens lèvent-ils la patte pour uriner ?</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a>
<a href="index.php?suppression" class="btn btn-sm btn-outline-danger" role="button"
data-bs-toggle="modal" data-bs-target="#confirmDeleteModal">Supprimer</a>
</td>
</tr>
<tr>
<td>Comment savoir si mon chat est heureux ?</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a>
<a href="#" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal"
data-bs-target="#confirmDeleteModal">Supprimer</a>
</td>
</tr>
</tbody>
</table>
</section>
</div>
</div>
</main>
<footer class="bg-body-tertiary py-4 mt-auto">
<div class="container d-flex gap-3 flex-wrap">
<span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
<a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
<a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
</div>
</footer>
<div class="modal fade" id="confirmDeleteModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Confirmer la suppression</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Êtes-vous sûr de vouloir supprimer ce thème ou cette question ? Cette action est irréversible.
<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>
</div>
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/js/contentReduct.js"></script>
<script src="/js/confirmDelete.js"></script>
</body>
</html>

View File

@@ -0,0 +1,113 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajouter une question - L'Il'eau chiens - Admin</title>
<link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/node_modules/bs-icon/icons.css">
<link rel="stylesheet" href="/css/style.css">
<link rel="shortcut icon" href="/favicon.png" type="image/png">
</head>
<body>
<header>
<nav class="navbar navbar-expand-xl bg-body-tertiary">
<div class="container-fluid align-items-center">
<a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link left-label" aria-current="page" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Boutique</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Prestations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">FAQ</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Vétos</a></li>
<li class="nav-item"><a class="nav-link active left-label" href="#">Citations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">À propos</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message
d'actu</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i>
Voir le site</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-gear me-1"></i>
Configuration</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
<li><a class="dropdown-item" href="#">Profil</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sortir</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="my-5 fs-6">
<div class="container">
<header>
<h1 class="title my-4 fs-2 text-center">Ajouter une question</h1>
</header>
<div class="content">
<form>
<div class="mb-4 question-addition">
<label class="form-label fw-bold" for="question">Question (obligatoire)</label>
<input type="text" id="question" class="form-control" placeholder="Une question" required>
</div>
<div class="mb-4 theme-addition">
<label class="form-label fw-bold" for="theme">Thème (obligatoire)</label>
<select name="theme" id="theme" class="form-select" required>
<option value="" disabled selected>Choisir un thème</option>
<option value="1">Chiens</option>
<option value="2">Thème 2</option>
<option value="3">Thème 3</option>
</select>
</div>
<div class="mb-4 reponse-addition">
<label class="form-label fw-bold" for="reponse">Réponse (obligatoire)</label>
<textarea id="reponse" class="form-control" placeholder="Votre réponse ici..." required></textarea>
</div>
<div class="d-flex gap-3 mt-4 confirmation-buttons">
<a href="./accueil.html" class="btn btn-secondary w-50">Annuler</a>
<button type="submit" class="btn btn-primary w-50">Ajouter</button>
</div>
</form>
</div>
</div>
</main>
<footer class="bg-body-tertiary py-4 mt-auto">
<div class="container d-flex gap-3 flex-wrap">
<span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
<a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
<a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
</div>
</footer>
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/node_modules/tinymce/tinymce.min.js"></script>
<script src="/node_modules/tinymce-i18n/langs8/fr-FR.js"></script>
<script src="/js/tinyMce.js"></script>
</body>
</html>

View File

@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajouter un thème de questions - L'Il'eau chiens - Admin</title>
<link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/node_modules/bs-icon/icons.css">
<link rel="stylesheet" href="/css/style.css">
<link rel="shortcut icon" href="/favicon.png" type="image/png">
</head>
<body>
<header>
<nav class="navbar navbar-expand-xl bg-body-tertiary">
<div class="container-fluid align-items-center">
<a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link left-label" aria-current="page" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Boutique</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Prestations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">FAQ</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Vétos</a></li>
<li class="nav-item"><a class="nav-link active left-label" href="#">Citations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">À propos</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message
d'actu</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i>
Voir le site</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-gear me-1"></i>
Configuration</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
<li><a class="dropdown-item" href="#">Profil</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sortir</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="my-5 fs-6">
<div class="container">
<header>
<h1 class="title my-4 fs-2 text-center">Ajouter un thème de question</h1>
</header>
<div class="content">
<form>
<div class="mb-4 theme-addition">
<label class="form-label fw-bold" for="theme">Thème (obligatoire)</label>
<input type="text" id="theme" class="form-control" placeholder="Un thème de question" required>
</div>
<div class="d-flex gap-3 mt-4 confirmation-buttons">
<a href="./accueil.html" class="btn btn-secondary w-50">Annuler</a>
<button type="submit" class="btn btn-primary w-50">Ajouter</button>
</div>
</form>
</div>
</div>
</main>
<footer class="bg-body-tertiary py-4 mt-auto">
<div class="container d-flex gap-3 flex-wrap">
<span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
<a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
<a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
</div>
</footer>
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/js/contentReduct.js"></script>
</body>
</html>

View File

@@ -0,0 +1,110 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modifier une question - L'Il'eau chiens - Admin</title>
<link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/node_modules/bs-icon/icons.css">
<link rel="stylesheet" href="/css/style.css">
<link rel="shortcut icon" href="/favicon.png" type="image/png">
</head>
<body>
<header>
<nav class="navbar navbar-expand-xl bg-body-tertiary">
<div class="container-fluid align-items-center">
<a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link left-label" aria-current="page" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Boutique</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Prestations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">FAQ</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Vétos</a></li>
<li class="nav-item"><a class="nav-link active left-label" href="#">Citations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">À propos</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message
d'actu</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i>
Voir le site</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-gear me-1"></i>
Configuration</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
<li><a class="dropdown-item" href="#">Profil</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sortir</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="my-5 fs-6">
<div class="container">
<header>
<h1 class="title my-4 fs-2 text-center">Modifier une question</h1>
</header>
<div class="content">
<form>
<div class="mb-4 question-addition">
<label class="form-label fw-bold" for="question">Question (obligatoire)</label>
<input type="text" id="question" class="form-control"
value="Pourquoi les chiens lèvent-ils la patte quand ils font pipi ?" required>
</div>
<div class="mb-4 theme-addition">
<label class="form-label fw-bold" for="theme">Thème (obligatoire)</label>
<select name="theme" id="theme" class="form-select" required>
<option value="" disabled>Choisir un thème</option>
<option value="1" selected>Chiens</option>
<option value="2">Thème 2</option>
<option value="3">Thème 3</option>
</select>
</div>
<div class="mb-4 reponse-addition">
<label class="form-label fw-bold" for="reponse">Réponse (obligatoire)</label>
<textarea id="reponse" class="form-control" required>Car si ils lèvent les deux, ils ne peuvent pas se retenir.</textarea>
</div>
<div class="d-flex gap-3 mt-4 confirmation-buttons">
<a href="./accueil.html" class="btn btn-secondary w-50">Annuler</a>
<button type="submit" class="btn btn-primary w-50">Modifier</button>
</div>
</form>
</div>
</div>
</main>
<footer class="bg-body-tertiary py-4 mt-auto">
<div class="container d-flex gap-3 flex-wrap">
<span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
<a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
<a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
</div>
</footer>
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/node_modules/tinymce/tinymce.min.js"></script>
<script src="/node_modules/tinymce-i18n/langs8/fr-FR.js"></script>
<script src="/js/tinyMce.js"></script>
</body>
</html>

View File

@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modifier un thème de questions - L'Il'eau chiens - Admin</title>
<link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/node_modules/bs-icon/icons.css">
<link rel="stylesheet" href="/css/style.css">
<link rel="shortcut icon" href="/favicon.png" type="image/png">
</head>
<body>
<header>
<nav class="navbar navbar-expand-xl bg-body-tertiary">
<div class="container-fluid align-items-center">
<a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link left-label" aria-current="page" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Boutique</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Prestations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">FAQ</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Vétos</a></li>
<li class="nav-item"><a class="nav-link active left-label" href="#">Citations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">À propos</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message
d'actu</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i>
Voir le site</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-gear me-1"></i>
Configuration</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
<li><a class="dropdown-item" href="#">Profil</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sortir</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="my-5 fs-6">
<div class="container">
<header>
<h1 class="title my-4 fs-2 text-center">Modifier un thème de question</h1>
</header>
<div class="content">
<form>
<div class="mb-4 theme-addition">
<label class="form-label fw-bold" for="theme">Thème (obligatoire)</label>
<input type="text" id="theme" class="form-control" value="Le nom du thème à modifier" required>
</div>
<div class="d-flex gap-3 mt-4 confirmation-buttons">
<a href="./accueil.html" class="btn btn-secondary w-50">Annuler</a>
<button type="submit" class="btn btn-primary w-50">Modifier</button>
</div>
</form>
</div>
</div>
</main>
<footer class="bg-body-tertiary py-4 mt-auto">
<div class="container d-flex gap-3 flex-wrap">
<span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
<a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
<a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
</div>
</footer>
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

60
js/confirmDelete.js Normal file
View File

@@ -0,0 +1,60 @@
/**
* confirmDelete.js
*
* Modal de confirmation générique pour les actions de suppression.
*
* Usage:
* 1. Ajouter data-bs-toggle="modal" et data-bs-target="#confirmDeleteModal" au lien de suppression.
* 2. Lors de la confirmation, l'attribut href du lien est utilisé pour la navigation (GET).
*/
(function(){
let pendingHref = null;
let pendingModalId = '#confirmDeleteModal';
function getBootstrapModal(modalEl){
//retourne l'instance Bootstrap Modal associée à modalEl, ou en crée une nouvelle si nécessaire
if (!modalEl || !window.bootstrap) return null;
return bootstrap.Modal.getInstance(modalEl) || new bootstrap.Modal(modalEl);
}
document.addEventListener('click', function(e){
const btn = e.target.closest('a[data-bs-toggle="modal"][data-bs-target]');
if (!btn) return;
const target = btn.getAttribute('data-bs-target');
// Gérer les boutons de type suppression ; restreindre éventuellement en utilisant une classe CSS spécifique
// Pour un appariement plus strict, ajouter une classe dédiée et la vérifier ici.
e.preventDefault();
pendingHref = btn.getAttribute('href');
pendingModalId = btn.getAttribute('data-confirm-modal') || target || '#confirmDeleteModal';
const modalEl = document.querySelector(pendingModalId);
const modal = getBootstrapModal(modalEl);
if (modal) modal.show();
});
document.addEventListener('click', function(e){
const confirmBtn = e.target.closest('#confirmDeleteBtn');
if (!confirmBtn) return;
if (pendingHref && pendingHref !== '#' && pendingHref.trim() !== ''){
window.location.assign(pendingHref);
return; // la navigation va se produire, arrêter le traitement ici
}
// Si aucun href n'est présent, fermer simplement le modal
const modalEl = document.querySelector(pendingModalId);
const modal = getBootstrapModal(modalEl);
if (modal) modal.hide();
pendingHref = null;
pendingModalId = '#confirmDeleteModal';
});
// Réinitialiser l'état stocké lorsque n'importe quel modal Bootstrap est caché
document.addEventListener('hidden.bs.modal', function(){
pendingHref = null;
pendingModalId = '#confirmDeleteModal';
});
})();

44
js/contentReduct.js Normal file
View File

@@ -0,0 +1,44 @@
/**
* Réduit le contenu des cellules td des tableaux
*/
const BREAKPOINT_SM = 1000;
const NB_CARACTERES = 40;
(() => {
// Récupère les cellules td (premier d'un tr) à traiter
const getTargetCells = () => {
const tbodyRows = Array.from(document.querySelectorAll("tbody tr"));
let cells = tbodyRows.map((row) => row.querySelector("td")).filter(Boolean);
if (cells.length === 0) {
const allRows = Array.from(document.querySelectorAll("tr"));
cells = allRows.map((row) => row.querySelector("td")).filter(Boolean);
}
return cells;
};
const tdElts = getTargetCells();
tdElts.forEach((td) => {
if (!td.dataset.fullText) {
td.dataset.fullText = td.textContent.trim();
}
});
const applyTruncation = () => {
const narrow = window.innerWidth < BREAKPOINT_SM;
tdElts.forEach((td) => {
const full = td.dataset.fullText ?? td.textContent;
const text = (full || "").trim();
if (narrow) {
td.textContent = text.length > 40 ? text.slice(0, NB_CARACTERES) + '...': text;
} else {
td.textContent = full;
}
});
};
applyTruncation();
window.addEventListener("resize", applyTruncation);
})();

99
js/password.js Normal file
View File

@@ -0,0 +1,99 @@
/**
* Verification et gestion du mot de passe lors de la réinitialisation
*/
const PASSWORD_LENGTH = 8;
const PASSWORD_CONTENT = ['[A-Z]', '[a-z]', '[0-9]'];
const passwordElt = document.getElementById('password');
const confirmPasswordElt = document.getElementById('passwordConfirm');
const min8Elt = document.getElementById('min8');
const uppercaseElt = document.getElementById('uppercase');
const lowercaseElt = document.getElementById('lowercase');
const digitElt = document.getElementById('digit');
const specialElt = document.getElementById('special');
//Pattern du mot de passe
passwordElt.addEventListener('input', function() {
const password = passwordElt.value;
// Vérification de la longueur
if (password.length >= PASSWORD_LENGTH) {
min8Elt.style.color = 'green';
} else {
min8Elt.style.color = 'red';
}
// Vérification du contenu
PASSWORD_CONTENT.forEach((pattern, index) => {
const regex = new RegExp(pattern);
const element = [uppercaseElt, lowercaseElt, digitElt, specialElt][index];
if (regex.test(password)) {
element.style.color = 'green';
} else {
element.style.color = 'red';
}
});
});
// Vérification de la confirmation du mot de passe
confirmPasswordElt.addEventListener('input', function() {
const password = passwordElt.value;
const confirmPassword = confirmPasswordElt.value;
if (password === confirmPassword) {
confirmPasswordElt.style.borderColor = 'green';
} else {
confirmPasswordElt.style.borderColor = 'red';
}
});
// Afficher ou masquer le mot de passe
const showPasswordElt = document.getElementById('showPassword');
showPasswordElt.addEventListener('change', function() {
if (showPasswordElt.checked) {
passwordElt.type = 'text';
confirmPasswordElt.type = 'text';
} else {
passwordElt.type = 'password';
confirmPasswordElt.type = 'password';
}
});
// Gestion de la soumission du formulaire
const passwordForm = document.getElementById('password-form');
passwordForm.addEventListener('submit', function(event) {
const password = passwordElt.value;
const confirmPassword = confirmPasswordElt.value;
// Empêcher la soumission si les critères ne sont pas remplis
if (password.length < PASSWORD_LENGTH ||
!/[A-Z]/.test(password) ||
!/[a-z]/.test(password) ||
!/[0-9]/.test(password) ||
password !== confirmPassword) {
event.preventDefault();
const main = document.querySelector('main');
const existingAlert = main.querySelector('#password-alert');
if (existingAlert) {
existingAlert.remove();
}
const alertElt = document.createElement('div');
alertElt.id = 'password-alert';
alertElt.className = 'alert alert-danger text-center';
alertElt.textContent = "Le mot de passe ne respecte pas les critères requis ou la confirmation ne correspond pas.";
main.prepend(alertElt);
window.scrollTo(0, 0);
}
});

19
js/previewImage.js Normal file
View File

@@ -0,0 +1,19 @@
/**
*
* Preview image when selected in input field
*/
document.getElementById("imageInput").addEventListener("change", function (e) {
const file = e.target.files[0];
const preview = document.querySelector(".preview-img-container");
if (file && ["image/jpeg", "image/png"].includes(file.type)) {
const reader = new FileReader();
reader.onload = function (event) {
preview.innerHTML = `<img src="${event.target.result}" alt="Aperçu de l'image" class="img-fluid">`;
};
reader.readAsDataURL(file);
preview.style.backgroundColor = "transparent";
} else {
preview.innerHTML = `<p class="text-muted">Aucun aperçu disponible <br> Le format n'est pas autorisé</p>`;
}
})

50
js/tinyMce.js Normal file
View File

@@ -0,0 +1,50 @@
/**
* Initialisation de TinyMCE avec des boutons personnalisés.
*/
tinymce.init({
selector: "textarea",
height: 400,
language: "fr-FR",
branding: false,
menubar: false,
menu: {},
plugins: "link, lists fullscreen",
toolbar: "h3 h4 h5 h6 | undo redo | link | bold | bullist numlist | outdent indent | fullscreen",
license_key: 'gpl',
setup: function (editor) {
['h3', 'h4', 'h5', 'h6'].forEach(function (tag) {
editor.ui.registry.addToggleButton(tag, {
text: tag.toUpperCase(),
tooltip: 'Titre ' + tag.substring(1),
onAction: function () {
try {
if (editor.formatter && typeof editor.formatter.toggle === 'function') {
editor.formatter.toggle(tag);
} else {
editor.execCommand('FormatBlock', false, tag);
}
} catch (e) {
// fallback
editor.execCommand('FormatBlock', false, tag);
}
},
onSetup: function (api) {
var nodeChangeHandler = function () {
try {
api.setActive(editor.formatter ? !!editor.formatter.match(tag) : false);
} catch (e) {
api.setActive(false);
}
};
editor.on('NodeChange', nodeChangeHandler);
return function () {
editor.off('NodeChange', nodeChangeHandler);
};
}
});
});
}
});

View File

@@ -0,0 +1,108 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Message d'actualités - L'Il'eau chiens - Admin</title>
<link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/node_modules/bs-icon/icons.css">
<link rel="shortcut icon" href="/favicon.png" type="image/png">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-xl bg-body-tertiary">
<div class="container-fluid align-items-center">
<a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link left-label" aria-current="page" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Boutique</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Prestations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">FAQ</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Vétos</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Citations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">À propos</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link active" href="#"><i class="bi bi-megaphone me-1"></i> Message
d'actu</a>
</li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i> Voir le
site</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-gear me-1"></i> Configuration</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
<i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
<li><a class="dropdown-item" href="#">Profil</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sortir</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="my-5 fs-6">
<div class="container">
<header>
<h1 class="title my-4 fs-2 text-center">Message d'actualités</h1>
</header>
<div class="Intro">
<p>Gérez ici le message d'actualités qui s'affiche en haut du site public. Vous pouvez activer ou désactiver
l'affichage du message ainsi que modifier son contenu.</p>
</div>
<div class="content mt-4">
<form id="messageActuForm">
<div class="mb-3">
<label for="contenuMessageActu" class="form-label fw-bold">Contenu du message d'actualités</label>
<textarea class="form-control" id="contenuMessageActu" rows="3"
required>Bienvenue sur le site de L'Il'eau chiens ! Profitez de nos offres spéciales du mois.</textarea>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="activerMessageActu" checked>
<label class="form-check-label" for="activerMessageActu">Activer le message d'actualités</label>
</div>
<div class="validation">
<button type="submit" class="btn btn-primary">Enregistrer les modifications</button>
</div>
</form>
</div>
</div>
</main>
<footer class="bg-body-tertiary py-4 mt-auto">
<div class="container d-flex gap-3 flex-wrap">
<span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
<a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
<a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
</div>
</footer>
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/node_modules/tinymce/tinymce.min.js"></script>
<script src="/node_modules/tinymce-i18n/langs8/fr-FR.js"></script>
<script src="/js/tinyMce.js"></script>
</body>
</html>

54
pages.html Normal file
View File

@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Liste des pages</title>
<link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="shortcut icon" href="/favicon.png" type="image/png" />
<link rel="stylesheet" href="/css/style.css" />
<style>
.pages-grid { columns: 3 320px; column-gap: 1.5rem; }
.pages-grid a { display: inline-block; margin: .25rem 0; }
</style>
</head>
<body>
<main class="container my-4">
<h1 class="fs-2 text-center mb-4">Menu des pages HTML</h1>
<ol class="pages-grid">
<li><a href="/pagesText/mentionsLegales.html">pagesText/mentionsLegales.html</a></li>
<li><a href="/pagesText/cgv.html">pagesText/cgv.html</a></li>
<li><a href="/configuration/html/configuration.html">configuration/html/configuration.html</a></li>
<li><a href="/messageActu/html/messageActu_accueil.html">messageActu/html/messageActu_accueil.html</a></li>
<li><a href="/connexion/html/page_de_connexion.html">connexion/html/page_de_connexion.html</a></li>
<li><a href="/connexion/html/mot_de_passe_oublie.html">connexion/html/mot_de_passe_oublie.html</a></li>
<li><a href="/connexion/html/reinitialisation_mot_de_passe.html">connexion/html/reinitialisation_mot_de_passe.html</a></li>
<li><a href="/blog/html/accueil_blog.html">blog/html/accueil_blog.html</a></li>
<li><a href="/blog/html/ajouter_article.html">blog/html/ajouter_article.html</a></li>
<li><a href="/blog/html/modifier_article.html">blog/html/modifier_article.html</a></li>
<li><a href="/blog/html/ajouter_categorie.html">blog/html/ajouter_categorie.html</a></li>
<li><a href="/blog/html/modifier_categorie.html">blog/html/modifier_categorie.html</a></li>
<li><a href="/faq/faq_accueil.html">faq/faq_accueil.html</a></li>
<li><a href="/faq/faq_ajouter_question.html">faq/faq_ajouter_question.html</a></li>
<li><a href="/faq/faq_modifier_question.html">faq/faq_modifier_question.html</a></li>
<li><a href="/faq/faq_ajouter_theme.html">faq/faq_ajouter_theme.html</a></li>
<li><a href="/faq/faq_modifier_theme.html">faq/faq_modifier_theme.html</a></li>
<li><a href="/citations/html/citations_accueil.html">citations/html/citations_accueil.html</a></li>
<li><a href="/citations/html/citations_ajouter.html">citations/html/citations_ajouter.html</a></li>
<li><a href="/citations/html/citations_modifier.html">citations/html/citations_modifier.html</a></li>
<li><a href="/Veto/html/veto_accueil.html">Veto/html/veto_accueil.html</a></li>
<li><a href="/Veto/html/ajouter_veterinaire.html">Veto/html/ajouter_veterinaire.html</a></li>
<li><a href="/Veto/html/modifier_veterinaire.html">Veto/html/modifier_veterinaire.html</a></li>
<li><a href="/prestations/html/prestation_accueil.html">prestations/html/prestation_accueil.html</a></li>
<li><a href="/prestations/html/ajouter_prestation.html">prestations/html/ajouter_prestation.html</a></li>
<li><a href="/prestations/html/modifier_prestation.html">prestations/html/modifier_prestation.html</a></li>
<li><a href="/prestations/html/ajouter_slider.html">prestations/html/ajouter_slider.html</a></li>
<li><a href="/prestations/html/modifier_slider.html">prestations/html/modifier_slider.html</a></li>
<li><a href="/prestations/html/ajouter_avant_apres.html">prestations/html/ajouter_avant_apres.html</a></li>
<li><a href="/prestations/html/modifier_avant_apres.html">prestations/html/modifier_avant_apres.html</a></li>
</ol>
</main>
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

98
pagesText/cgv.html Normal file
View File

@@ -0,0 +1,98 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conditions générales de vente - L'Il'eau chiens - Admin</title>
<link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/node_modules/bs-icon/icons.css">
<link rel="shortcut icon" href="/favicon.png" type="image/png">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-xl bg-body-tertiary">
<div class="container-fluid align-items-center">
<a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link left-label" aria-current="page" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Boutique</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Prestations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">FAQ</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Vétos</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Citations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">À propos</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message
d'actu</a>
</li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i>
Voir le
site</a></li>
<li class="nav-item"><a class="nav-link active" href="#"><i class="bi bi-gear me-1"></i>
Configuration</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
<li><a class="dropdown-item" href="#">Profil</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sortir</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="my-5 fs-6">
<div class="container">
<header>
<h1 class="title my-4 fs-2 text-center">Conditions générales de vente</h1>
</header>
<div class="content">
<form action="" class="mb-5">
<div class="mb-4">
<label for="conditionsGeneralesDeVente" class="form-label">Contenu des conditions générales de vente</label>
<textarea class="form-control" id="conditionsGeneralesDeVente" rows="15"></textarea>
</div>
<div class="d-flex justify-content-start mb-4">
<button type="submit" class="btn btn-primary">Enregistrer les modifications</button>
</div>
</form>
</div>
</div>
</main>
<footer class="bg-body-tertiary py-4 mt-auto">
<div class="container d-flex gap-3 flex-wrap">
<span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
<a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
<a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
</div>
</footer>
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/node_modules/tinymce/tinymce.min.js"></script>
<script src="/node_modules/tinymce-i18n/langs8/fr-FR.js"></script>
<script src="/js/tinyMce.js"></script>
</body>
</html>

View File

@@ -0,0 +1,99 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mentions légales - L'Il'eau chiens - Admin</title>
<link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/node_modules/bs-icon/icons.css">
<link rel="shortcut icon" href="/favicon.png" type="image/png">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-xl bg-body-tertiary">
<div class="container-fluid align-items-center">
<a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link left-label" aria-current="page" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Boutique</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Prestations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">FAQ</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Vétos</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Citations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">À propos</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message
d'actu</a>
</li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i>
Voir le
site</a></li>
<li class="nav-item"><a class="nav-link active" href="#"><i class="bi bi-gear me-1"></i>
Configuration</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
<li><a class="dropdown-item" href="#">Profil</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sortir</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="my-5 fs-6">
<div class="container">
<header>
<h1 class="title my-4 fs-2 text-center">Mentions légales</h1>
</header>
<div class="content">
<form action="" class="mb-5">
<div class="mb-4">
<label for="mentionsLegales" class="form-label">Contenu des mentions légales</label>
<textarea class="form-control" id="mentionsLegales" rows="15"></textarea>
</div>
<div class="d-flex justify-content-start mb-4">
<button type="submit" class="btn btn-primary">Enregistrer les modifications</button>
</div>
</form>
</div>
</div>
</main>
<footer class="bg-body-tertiary py-4 mt-auto">
<div class="container d-flex gap-3 flex-wrap">
<span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
<a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
<a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
</div>
</footer>
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/node_modules/tinymce/tinymce.min.js"></script>
<script src="/node_modules/tinymce-i18n/langs8/fr-FR.js"></script>
<script src="/js/tinyMce.js"></script>
</body>
</html>

View File

@@ -4,28 +4,27 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajouter une paire avant/après</title> <title>Ajouter un résultat avant/après</title>
<link href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="../../node_modules/bs-icon/icons.css">
<link rel="stylesheet" href="../../css/style.css">
<link rel="stylesheet" href="../../css/avant_apres.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
<style>
.img-preview {
max-width: 150px;
border-radius: 8px;
display: none; /* cachée tant qu'il n'y a pas d'image */
}
</style>
</head> </head>
<body class="bg-light py-4 py-md-5">
<div class="container" style="max-width: 800px;"> <body>
<h1 class="mb-4 mb-md-5 text-center">Ajouter une paire avant/après</h1> <div id="header-placeholder"></div>
<main class="my-5 fs-6">
<div class="container">
<header>
<h1 class="title fs-2 text-center">Ajouter un résultat en images (Avant / Après)</h1>
<!-- Message succès --> <!-- Message succès -->
<div id="successMsg" class="alert alert-success d-none"> <div id="successMsg" class="alert alert-success d-none">
Nouvelle paire ajoutée avec succès ! Nouveau résultat ajouté avec succès !
</div> </div>
<!-- Message erreur --> <!-- Message erreur -->
@@ -37,18 +36,20 @@
<div id="errorFormat" class="alert alert-danger d-none"> <div id="errorFormat" class="alert alert-danger d-none">
Format d'image invalide. Formats acceptés : JPG, PNG, WEBP. Format d'image invalide. Formats acceptés : JPG, PNG, WEBP.
</div> </div>
</header>
<div class="section">
<form id="addPairForm" class="mt-3"> <form id="addPairForm" class="mt-3">
<!-- Titre / label --> <!-- Titre -->
<div class="mb-3"> <div class="mb-3">
<label class="form-label" for="pairTitle">Titre de la paire (obligatoire)</label> <label class="form-label fw-bold" for="pairTitle">Titre du résultat (obligatoire)</label>
<input type="text" id="pairTitle" class="form-control" required> <input type="text" id="pairTitle" class="form-control" required>
</div> </div>
<!-- Type --> <!-- Type -->
<div class="mb-3"> <div class="mb-3">
<label class="form-label" for="pairType">Type (obligatoire)</label> <label class="form-label fw-bold" for="pairType">Type (obligatoire)</label>
<select id="pairType" class="form-select" required> <select id="pairType" class="form-select" required>
<option value="">-- Choisir --</option> <option value="">-- Choisir --</option>
<option value="Chien">Chien</option> <option value="Chien">Chien</option>
@@ -58,7 +59,9 @@
<!-- Image AVANT --> <!-- Image AVANT -->
<div class="mb-4"> <div class="mb-4">
<label class="form-label" for="beforeImage">Image AVANT (obligatoire)</label> <label class="form-label fw-bold" for="beforeImage">Image AVANT (obligatoire, formats acceptés :
jpg,
png, webp)</label>
<input type="file" id="beforeImage" class="form-control" accept="image/*" required> <input type="file" id="beforeImage" class="form-control" accept="image/*" required>
<img id="beforePreview" class="img-preview border mt-2" src="#" alt="image avant"> <img id="beforePreview" class="img-preview border mt-2" src="#" alt="image avant">
@@ -66,7 +69,9 @@
<!-- Image APRÈS --> <!-- Image APRÈS -->
<div class="mb-4"> <div class="mb-4">
<label class="form-label" for="afterImage">Image APRÈS (obligatoire)</label> <label class="form-label fw-bold" for="afterImage">Image APRÈS (obligatoire, formats acceptés :
jpg,
png, webp)</label>
<input type="file" id="afterImage" class="form-control" accept="image/*" required> <input type="file" id="afterImage" class="form-control" accept="image/*" required>
<img id="afterPreview" class="img-preview border mt-2" src="#" alt="image après"> <img id="afterPreview" class="img-preview border mt-2" src="#" alt="image après">
@@ -75,7 +80,7 @@
<!-- Boutons : empilés en mobile, côte à côte en md+ --> <!-- Boutons : empilés en mobile, côte à côte en md+ -->
<div class="row mt-4 g-3"> <div class="row mt-4 g-3">
<div class="col-12 col-md-6"> <div class="col-12 col-md-6">
<a href="../liste_avant_apres/liste_avant_apres.html" class="btn btn-secondary w-100"> <a href="../html/liste_avant_apres.html" class="btn btn-secondary w-100">
Annuler Annuler
</a> </a>
</div> </div>
@@ -87,12 +92,16 @@
</div> </div>
</form> </form>
</div>
<script src="ajouter_avant_apres.js"></script> </div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> </div>
</main>
<script src="../js/ajouter_avant_apres.js"></script>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../../header-composant.js"></script>
</body> </body>
</html> </html>

View File

@@ -1,88 +1,158 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajouter une catégorie</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
<style> <title>Ajouter une préstation</title>
body { <link href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
background: #f4f6f981; <link rel="stylesheet" href="node_modules/bs-icon/icons.css">
<link rel="shortcut icon" href="favicon.png" type="image/png">
} <link rel="stylesheet" href="../../css/style.css">
.container {
max-width: 600px;
margin-top: 50px;
}
</style>
</head> </head>
<body> <body>
<div class="container"> <header>
<h1 class="mb-5 text-center">Ajouter une prestation</h2> <nav class="navbar navbar-expand-xxl bg-body-tertiary shadow-sm">
<div class="container-fluid align-items-center">
<a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
<!--Erreur champ vide --> <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active left-label" aria-current="page" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link left-label" href="#">Boutique</a>
</li>
<li class="nav-item">
<a class="nav-link left-label" href="#">Prestations</a>
</li>
<li class="nav-item">
<a class="nav-link left-label" href="#">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link left-label" href="#">Fiche renseignements</a>
</li>
<li class="nav-item">
<a class="nav-link left-label" href="#">Partenaires</a>
</li>
<li class="nav-item">
<a class="nav-link left-label" href="#">Citations</a>
</li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message d'actu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i> Voir le site</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-gear me-1"></i> Configuration</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
<li><a class="dropdown-item" href="#">Profil</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Sortir</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="my-5 fs-6">
<div class="container">
<header>
<h1 class="title my-4 fs-2">Ajouter une prestation</h1>
<!-- Erreur champ vide -->
<div id="errorEmpty" class="alert alert-danger d-none">Le titre est obligatoire.</div> <div id="errorEmpty" class="alert alert-danger d-none">Le titre est obligatoire.</div>
<!--Erreur nom deja existant --> <!-- Erreur nom déjà existant -->
<div id="errorExists" class="alert alert-danger d-none">Cette prestation existe déjà. Veuillez en choisir <div id="errorExists" class="alert alert-danger d-none">
une autre.</div> Cette prestation existe déjà. Veuillez en choisir une autre.
</div>
<!--Succès ajout catégorie --> <!-- Succès ajout -->
<div id="successMessage" class="alert alert-success d-none">Prestation ajoutée avec succès !</div> <div id="successMessage" class="alert alert-success d-none">
Prestation ajoutée avec succès !
</div>
</header>
<div class="section">
<form id="addCategoryForm"> <form id="addCategoryForm">
<div class="mb-4"> <div class="mb-4">
<label class="form-label fw-bold">Titre de la prestation (obligatoire)</label> <label class="form-label fw-bold" for="categoryName">
Titre de la prestation (obligatoire)
</label>
<input type="text" id="categoryName" class="form-control" required> <input type="text" id="categoryName" class="form-control" required>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label class="form-label fw-bold">Type de prestation</label> <label class="form-label fw-bold" for="prestationType">
<select id="prestationType" class="form-select"> Type de prestation (obligatoire)
<option value="chien" selected>Chien</option> </label>
<select id="prestationType" class="form-select" required>
<option value="" selected disabled>-- Choisissez un type --</option>
<option value="chien">Chien</option>
<option value="chat">Chat</option> <option value="chat">Chat</option>
</select> </select>
</div> </div>
<!--Description (liste à puces)--> <!-- Étapes -->
<div class="mb-3"> <div class="mb-3">
<label class="form-label fw-bold">Description de la prestation</label> <label class="form-label fw-bold">Choisissez les étapes (obligatoire)</label>
<textarea id="prestationDescription" class="form-control" rows="5">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="stepCiseaux" name="steps" value="coupe_ciseaux">
<label class="form-check-label" for="stepCiseaux">Coupe ciseaux</label>
</textarea>
</div> </div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="stepGriffes" name="steps" value="coupe_griffes">
<label class="form-check-label" for="stepGriffes">Coupe griffes</label>
</div>
<!--Tariffs--> <div class="form-check">
<input class="form-check-input" type="checkbox" id="stepSechage" name="steps" value="sechage_doux">
<label class="form-check-label" for="stepSechage">Séchage doux</label>
</div>
</div>
<!-- Tarifs -->
<div class="mb-3"> <div class="mb-3">
<label class="form-label fw-bold">Tarif (fourchette)</label> <label class="form-label fw-bold">Tarif (fourchette) (obligatoire)</label>
<div class="d-flex gap-3"> <div class="d-flex gap-3">
<input type="number" id="priceMin" class="form-control" placeholder="Prix min (€)" value="35"> <input type="number" id="priceMin" class="form-control" placeholder="Prix min (€)" value="35" required>
<input type="number" id="priceMax" class="form-control" placeholder="Prix max (€)" value="60"> <input type="number" id="priceMax" class="form-control" placeholder="Prix max (€)" value="60" required>
</div> </div>
</div> </div>
<div class="d-flex gap-3 mt-4"> <div class="d-flex gap-3 mt-4">
<a href="../../prestations/liste_prestation/liste_prestation.html" class="btn btn-secondary w-50">Annuler</a> <a href="../html/prestation_accueil.html" class="btn btn-secondary w-50">Annuler</a>
<button type="submit" class="btn btn-primary w-50">Ajouter</button> <button type="submit" class="btn btn-primary w-50">Ajouter</button>
</div> </div>
</form> </form>
</div> </div>
</div>
</main>
<script src="ajouter_prestation.js"></script> <script src="../js/ajouter_prestation.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <script src="../..
</body>
</html>

View File

@@ -1,74 +1,147 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ajouter un slide</title> <title>Ajouter un slide</title>
<link
rel="stylesheet"
href="/node_modules/bootstrap/dist/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="/css/prestation.css" />
</head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> <body>
<header>
<nav class="navbar navbar-expand-xl bg-body-tertiary shadow-sm">
<div class="container-fluid align-items-center">
<a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
<style> <button
body { class="navbar-toggler"
background: #f4f6f9; type="button"
padding: 40px; data-bs-toggle="collapse"
} data-bs-target="#navbarSupportedContent"
.container { aria-controls="navbarSupportedContent"
max-width: 600px; aria-expanded="false"
} aria-label="Toggle navigation"
</style> >
</head> <span class="navbar-toggler-icon"></span>
</button>
<body> <div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- MENU GAUCHE -->
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Boutique</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Prestations</a>
</li>
<li class="nav-item"><a class="nav-link" href="#">FAQ</a></li>
<li class="nav-item">
<a class="nav-link" href="#">Fiche de renseignements</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Partenaires</a>
</li>
</ul>
<div class="container"> <!-- MENU DROIT -->
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#"
><i class="bi bi-megaphone me-1"></i> Message d'actu</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#"
><i class="bi bi-box-arrow-up-right me-1"></i> Voir le site</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#"
><i class="bi bi-gear me-1"></i> Configuration</a
>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="userMenu"
data-bs-toggle="dropdown"
>
<i class="bi bi-person-circle me-1"></i>
<span id="userFirstName">Prénom</span>
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Profil</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item" href="#">Sortir</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div id="header-placeholder"></div>
<div class="container">
<h2 class="text-center mb-4">Ajouter une image au slider</h2> <h2 class="text-center mb-4">Ajouter une image au slider</h2>
<!-- Erreur : image manquante --> <!-- Messages DOM -->
<div id="errorEmpty" class="alert alert-danger d-none"> <div id="messages" class="mb-3"></div>
Merci de sélectionner une image.
</div>
<!-- Erreur : format invalide -->
<div id="errorFormat" class="alert alert-danger d-none">
Format d'image invalide. Formats acceptés : JPG, PNG, WEBP.
</div>
<!-- Succès -->
<div id="successMsg" class="alert alert-success d-none">
Slide ajouté avec succès !
</div>
<form id="addSlideForm"> <form id="addSlideForm">
<!-- Image --> <!-- Image -->
<div class="mb-3"> <div class="mb-3">
<label class="form-label fw-bold">Image du slide (obligatoire)</label> <label class="form-label fw-bold">Image du slide *</label>
<input type="file" id="slideImage" class="form-control" accept="image/*"> <input
type="file"
id="slideImage"
class="form-control"
accept="image/*"
/>
</div> </div>
<!-- ALT --> <!-- ALT -->
<div class="mb-3"> <div class="mb-3">
<label class="form-label fw-bold">Texte ALT (obligatoire)</label> <label class="form-label fw-bold">Texte ALT *</label>
<input type="text" id="slideAlt" class="form-control" placeholder="Description de limage"> <input
type="text"
id="slideAlt"
class="form-control"
placeholder="Description de limage"
/>
</div> </div>
<!-- Titre --> <!-- Titre -->
<div class="mb-3"> <div class="mb-3">
<label class="form-label fw-bold">Titre (optionnel)</label> <label class="form-label fw-bold">Titre (optionnel)</label>
<input type="text" id="slideTitle" class="form-control"> <input type="text" id="slideTitle" class="form-control" />
</div> </div>
<!-- Boutons --> <!-- Boutons -->
<div class="d-flex gap-3 mt-4"> <div class="d-flex gap-3 mt-4">
<a href="../../../slider/liste_slider/liste_slider.html" class="btn btn-secondary w-50">Annuler</a> <a
href="/prestations/html/prestation_accueil.html"
class="btn btn-secondary w-50"
>Annuler</a
>
<button type="submit" class="btn btn-primary w-50">Ajouter</button> <button type="submit" class="btn btn-primary w-50">Ajouter</button>
</div> </div>
</form> </form>
</div> </div>
<script src="ajouter_slider.js"></script> <script src="/prestations/js/ajouter_slider.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</body>
</html> </html>
<!--<script src="../../header-composant.js"></script>-->

View File

@@ -1,84 +0,0 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liste des paires avant/après</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
</head>
<body class="bg-light py-4 py-md-5">
<div class="container" style="max-width: 1000px;">
<h1 class="mb-4 mb-md-5 text-center">Liste des paires avant/après</h1>
<!-- Message succès -->
<div id="succesDeleteMsg" class="alert alert-success d-none">
Paire supprimée avec succès !
</div>
<div class="d-flex justify-content-end mb-4">
<a href="../ajouter_avant_apres/ajouter_avant_apres.html" class="btn btn-primary">
Ajouter une paire
</a>
</div>
<!-- Table responsive -->
<div class="table-responsive">
<table class="table table-striped table-hover align-middle mb-0">
<thead class="table-dark">
<tr>
<th>Titre paire</th>
<th>Type</th>
<th>Avant</th>
<th>Après</th>
<th class="text-center">Actions</th>
</tr>
</thead>
<tbody id="prestationTableBody">
<!-- JS -->
</tbody>
</table>
</div>
</div>
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" id="deleteModalLabel">Confirmer la suppression</h2>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
</div>
<div class="modal-body">
Voulez-vous vraiment supprimer cette paire avant/après ?
</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.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="liste_avant_apres.js"></script>
</body>
</html>

View File

@@ -1,59 +0,0 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liste des prestations</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
<style>
body {
background: #f4f6f9;
padding: 30px;
}
.container {
margin-top: 100px;
}
.action-btns button,
.action-btns a {
margin-right: 100px;
}
</style>
</head>
<body>
<div class="container">
<h2 class="mb-5 text-center">Liste des prestations</h2>
<!--Message succès-->
<div id="succesDeleteMsg" class="alert alert-success d-none">Prestation supprimée avec succès !</div>
<div class="d-flex justify-content-end mb-4">
<a href="../ajouter_prestation/ajouter_prestation.html" class="btn btn-primary">Ajouter une prestation</a>
</div>
<table class="table table-striped table-hover align-middle">
<thead class="table-dark">
<tr>
<th>Titre</th>
<th>Type</th>
<th>Description</th>
<th>Tarif</th>
<th class="text-center">Actions</th>
</tr>
</thead>
<tbody id="prestationTableBody">
<!--Rempli en JS-->
</tbody>
</table>
</div>
<script src="../../prestations/liste_prestation/liste_prestation.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

View File

@@ -1,65 +0,0 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liste des slides</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background: #f4f6f9;
padding: 40px;
}
.container {
max-width: 900px;
}
.miniature {
width: 90px;
height: 60px;
object-fit: cover;
border-radius: 5px;
}
.action-buttons button,
.action-buttons a {
margin-right: 8px;
}
</style>
</head>
<body>
<div class="container">
<h2 class="text-center mb-4">Slider Liste des images</h2>
<!-- Message succès (suppression / ordre) -->
<div id="successMsg" class="alert alert-success d-none"></div>
<!-- Bouton ajouter -->
<div class="d-flex justify-content-end mb-4">
<a href="../../slider/ajouter_slider/ajouter_slider.html" class="btn btn-primary">Ajouter une image au slider</a>
</div>
<table class="table table-striped table-hover align-middle">
<thead class="table-dark">
<tr>
<th>Image</th>
<th>Texte ALT</th>
<th>Titre</th>
<th>Ordre</th>
<th class="text-center">Actions</th>
</tr>
</thead>
<tbody id="sliderTableBody">
<!-- rempli en JS -->
</tbody>
</table>
</div>
<script src="liste_slider.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

View File

@@ -4,25 +4,26 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modifier une paire avant/après</title> <title>Modifier un résultat avant/après</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"> <link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/node_modules/bs-icon/icons.css">
<style> <link rel="stylesheet" href="/css/style.css">
.img-preview { <link rel="stylesheet" href="/css/avant_apres.css">
max-width: 150px;
border-radius: 8px;
}
</style>
</head> </head>
<body class="bg-light py-4 py-md-5"> <body>
<div class="container" style="max-width: 800px;"> <div id="header-placeholder"></div>
<h2 class="mb-4 mb-md-5 text-center">Modifier une paire avant/après</h2>
<main class="my-5 fs-6">
<div class="container">
<header>
<h1 class="title fs-2 text-center">Modifier un résultat en images (Avant / Après)</h1>
<!-- Messages --> <!-- Messages -->
<div id="successMsg" class="alert alert-success d-none"> <div id="successMsg" class="alert alert-success d-none">
La paire avant/après a été modifiée avec succès. Le résultat a été modifié avec succès.
</div> </div>
<div id="errorMsg" class="alert alert-danger d-none"> <div id="errorMsg" class="alert alert-danger d-none">
Une erreur est survenue. Merci de vérifier le formulaire. Une erreur est survenue. Merci de vérifier le formulaire.
@@ -32,6 +33,10 @@
<div id="errorFormat" class="alert alert-danger d-none"> <div id="errorFormat" class="alert alert-danger d-none">
Format d'image invalide. Formats acceptés : JPG, PNG, WEBP. Format d'image invalide. Formats acceptés : JPG, PNG, WEBP.
</div> </div>
</header>
<div class="section">
<!-- Formulaire de modification --> <!-- Formulaire de modification -->
<form id="editPairForm" class="mt-3"> <form id="editPairForm" class="mt-3">
@@ -39,15 +44,16 @@
<!-- ID caché --> <!-- ID caché -->
<input type="hidden" id="pairId"> <input type="hidden" id="pairId">
<!-- Titre / label --> <!-- Titre-->
<div class="mb-3"> <div class="mb-3">
<label for="pairTitle" class="form-label">Titre / label de la paire (obligatoire)</label> <label for="pairTitle" class="form-label fw-bold">Titre du résultat
(obligatoire)</label>
<input type="text" class="form-control" id="pairTitle" required> <input type="text" class="form-control" id="pairTitle" required>
</div> </div>
<!-- Type --> <!-- Type -->
<div class="mb-3"> <div class="mb-3">
<label class="form-label" for="pairType">Type (obligatoire)</label> <label class="form-label fw-bold" for="pairType">Type (obligatoire)</label>
<select id="pairType" class="form-select" required> <select id="pairType" class="form-select" required>
<option value="">-- Choisir --</option> <option value="">-- Choisir --</option>
<option value="Chien">Chien</option> <option value="Chien">Chien</option>
@@ -55,29 +61,31 @@
</select> </select>
</div> </div>
<!-- Images AVANT / APRÈS sur une ligne en md+, empilées en mobile --> <!-- Images AVANT / APRÈS -->
<div class="row gy-4 mb-4"> <div class="row gy-4 mb-4">
<!-- Image AVANT --> <!-- Image AVANT -->
<div class="col-12 col-md-6"> <div class="col-12">
<label class="form-label" for="beforeImage">Image AVANT (obligatoire)</label> <label class="form-label fw-bold" for="beforeImage">
Image AVANT (obligatoire, formats acceptés : jpg, png, webp)
</label>
<input type="file" class="form-control" id="beforeImage" accept="image/*" required> <input type="file" class="form-control" id="beforeImage" accept="image/*" required>
<!-- Aperçu éventuel -->
<img id="beforePreview" class="img-preview mt-2 d-none" src="#" alt="Aperçu avant"> <img id="beforePreview" class="img-preview mt-2 d-none" src="#" alt="Aperçu avant">
</div> </div>
<!-- Image APRÈS --> <!-- Image APRÈS -->
<div class="col-12 col-md-6"> <div class="col-12">
<label class="form-label" for="afterImage">Image APRÈS (obligatoire)</label> <label class="form-label fw-bold" for="afterImage">
Image APRÈS (obligatoire, formats acceptés : jpg, png, webp)
</label>
<input type="file" class="form-control" id="afterImage" accept="image/*" required> <input type="file" class="form-control" id="afterImage" accept="image/*" required>
<!-- Aperçu éventuel -->
<img id="afterPreview" class="img-preview mt-2 d-none" src="#" alt="Aperçu après"> <img id="afterPreview" class="img-preview mt-2 d-none" src="#" alt="Aperçu après">
</div> </div>
</div> </div>
<!-- Boutons : empilés en mobile, côte à côte en md+ --> <!-- Boutons -->
<div class="row mt-4 g-3"> <div class="row mt-4 g-3">
<div class="col-12 col-md-6"> <div class="col-12 col-md-6">
<a href="../liste_avant_apres/liste_avant_apres.html" class="btn btn-secondary w-100"> <a href="../html/liste_avant_apres.html" class="btn btn-secondary w-100">
Annuler Annuler
</a> </a>
</div> </div>
@@ -89,10 +97,15 @@
</div> </div>
</form> </form>
</div>
<script src="modifier_avant_apres.js"></script> </div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> </div>
</main>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../js/modifier_avant_apres.js"></script>
<script src="../../header-composant.js"></script>
</body> </body>
</html> </html>

View File

@@ -1,44 +1,44 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Modifier une prestation</title> <title>Modifier une prestation</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"> <link
rel="stylesheet"
href="/node_modules/bootstrap/dist/css/bootstrap.min.css"
/>
<style> <link rel="stylesheet" href="/css/prestation.css" />
body { </head>
background: #f4f6f9; <body>
} <header>
.container { <nav class="navbar navbar-expand-xl bg-body-tertiary shadow-sm">
max-width: 700px; <div class="container-fluid align-items-center">
margin-top: 40px; <a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
} </div>
</nav>
</style> </header>
</head>
<body>
<div class="container"> <div class="container">
<h2 class="mb-4 text-center">Modifier une prestation</h2> <h2 class="mb-4 text-center">Modifier une prestation</h2>
<!--Erreur--> <div id="messages" class="mb-3"></div>
<div id="errorEmpty" class="alert alert-danger d-none">Le titre est obligatoire.</div>
<div id="errorTechnical" class="alert alert-danger d-none">Une erreur est survenue. Veuillez réessayer plus tard.</div>
<!--Succès-->
<div id="successMsg" class="alert alert-success d-none">Prestation modifiée avec succès !</div>
<form id="editPrestationForm"> <form id="editPrestationForm">
<!-- Titre -->
<!--Titre-->
<div class="mb-3"> <div class="mb-3">
<label class="form-label fw-bold">Titre de la prestation (obligatoire)</label> <label class="form-label fw-bold">Titre de la prestation *</label>
<input type="text" id="prestationTitle" class="form-control" value="Toilettage complet pour chien"> <input
type="text"
id="prestationTitle"
class="form-control"
value="Toilettage complet pour chien"
/>
</div> </div>
<!--Type--> <!-- Type -->
<div class="mb-3"> <div class="mb-3">
<label class="form-label fw-bold">Type de prestation</label> <label class="form-label fw-bold">Type de prestation</label>
<select id="prestationType" class="form-select"> <select id="prestationType" class="form-select">
@@ -47,38 +47,52 @@
</select> </select>
</div> </div>
<!-- Description -->
<!--Description (liste à puces)-->
<div class="mb-3"> <div class="mb-3">
<label class="form-label fw-bold">Description de la prestation</label> <label class="form-label fw-bold">Description de la prestation</label>
<textarea id="prestationDescription" class="form-control" rows="5"> <textarea id="prestationDescription" class="form-control" rows="5">
• Bain complet • Bain complet
• Séchage • Séchage
• Coupe aux ciseaux • Coupe aux ciseaux
• Nettoyage des oreilles</textarea> • Nettoyage des oreilles
</textarea
>
</div> </div>
<!--Tariffs--> <!-- Tarifs -->
<div class="mb-3"> <div class="mb-3">
<label class="form-label fw-bold">Tarif (fourchette)</label> <label class="form-label fw-bold">Tarif (fourchette)</label>
<div class="d-flex gap-3"> <div class="d-flex gap-3">
<input type="number" id="priceMin" class="form-control" placeholder="Prix min (€)" value="35"> <input
<input type="number" id="priceMax" class="form-control" placeholder="Prix max (€)" value="60"> type="number"
id="priceMin"
class="form-control"
value="35"
/>
<input
type="number"
id="priceMax"
class="form-control"
value="60"
/>
</div> </div>
</div> </div>
<!-- Boutons --> <!-- Boutons -->
<div class="d-flex gap-3 mt-4"> <div class="d-flex gap-3 mt-4">
<a href="../../prestations/liste_prestation/liste_prestation.html" class="btn btn-secondary w-50">Annuler</a> <a
<button type="submit" class="btn btn-primary w-50">Enregistrer les modifications</button> href="/prestations/html/prestation_accueil.html"
class="btn btn-secondary w-50"
>Annuler</a
>
<button type="submit" class="btn btn-primary w-50">
Enregistrer les modifications
</button>
</div> </div>
</form> </form>
</div> </div>
<script src="modifier_prestation.js"></script> <script src="/prestations/js/modifier_prestation.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</body>
</html> </html>

View File

@@ -8,6 +8,9 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<style> <style>
body { body {
background: #f4f6f9; background: #f4f6f9;
} }
@@ -27,6 +30,9 @@
<body> <body>
<div id="header-placeholder"></div>
<div class="container"> <div class="container">
<h2 class="text-center mb-5">Modifier une image du slider</h2> <h2 class="text-center mb-5">Modifier une image du slider</h2>
@@ -71,6 +77,7 @@
<script src="modifier_slider.js"></script> <script src="modifier_slider.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="../../header-composant.js"></script>
</body> </body>
</html> </html>

View File

@@ -1,74 +1,336 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin - Prestations</title> <title>Gérer les prestations</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="node_modules/bs-icon/icons.css">
<style> <link rel="shortcut icon" href="favicon.png" type="image/png">
body { <link rel="stylesheet" href="../../css/style.css">
background: #f4f6f9;
padding: 40px;
}
.menu-card {
transition: 0.2s;
cursor: pointer;
}
.menu-card:hover {
transform: scale(1.03);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}
.menu-icon {
font-size: 40px;
}
</style>
</head> </head>
<body> <body>
<div class="container text-center"> <header>
<h2 class="mb-5">Gestion des prestations</h2> <nav class="navbar navbar-expand-xxl bg-body-tertiary">
<div class="container-fluid align-items-center">
<a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
<div class="row g-4"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active left-label" aria-current="page" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link left-label" href="#">Boutique</a>
</li>
<li class="nav-item">
<a class="nav-link left-label" href="#">Prestations</a>
</li>
<li class="nav-item">
<a class="nav-link left-label" href="#">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link left-label" href="#">Fiche renseignements</a>
</li>
<li class="nav-item">
<a class="nav-link left-label" href="#">Partenaires</a>
</li>
<li class="nav-item">
<a class="nav-link left-label" href="#">Citations</a>
</li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message d'actu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i> Voir le site</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-gear me-1"></i> Configuration</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
<li><a class="dropdown-item" href="#">Profil</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sortir</a></li>
</ul>
</li>
</ul>
<!-- Prestations -->
<div class="col-md-4">
<a href="../liste_prestation/liste_prestation.html" class="text-decoration-none">
<div class="card p-4 menu-card">
<div class="menu-icon">💼</div>
<h4 class="mt-3 text-dark">Gérer les prestations</h4>
<p class="text-muted">Ajouter, modifier, supprimer les prestations.</p>
</div> </div>
</div>
</nav>
</header>
<main class="my-5 fs-6">
<div class="container">
<header>
<h1 class="title fs-2 my-4 text-center">Gérer la page prestations</h1>
</header>
<div class="section">
<div class="accordion" id="accordionExample">
<!-- ACCORDÉON 1 -->
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Gérer les prestations et leurs catégories
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show"
data-bs-parent="#accordionExample">
<div class="accordion-body">
<section class="presta my-3">
<h3 class="fs-4">Prestations</h3>
<div class="mb-4 mt-2">
<a href="../html/ajouter_prestation.html" class="btn btn-primary btn-sm">
Ajouter une prestation
</a> </a>
</div> </div>
<!-- Slider --> <table class="table table-striped table-hover align-middle">
<div class="col-md-4"> <thead class="table-dark">
<a href="../slider/liste_slider/liste_slider.html" class="text-decoration-none"> <tr>
<div class="card p-4 menu-card"> <th>Titre</th>
<div class="menu-icon">🎞️</div>
<h4 class="mt-3 text-dark">Gérer le slider</h4> <th class="text-end">Actions</th>
<p class="text-muted">Images du slider de la page Prestations chiens.</p> </tr>
</div> </thead>
<tbody>
<!-- Prestation 1 -->
<tr>
<td>Toilettage complet</td>
<td class="text-end">
<a href="../html/modifier_prestation.html"
class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<button
class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
</td>
</tr>
<!-- Prestation 2 -->
<tr>
<td>Toilettage express</td>
<td class="text-end">
<a href="../html/modifier_prestation.html"
class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<button
class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
</td>
</tr>
</tbody>
</table>
</section>
<section class="carte my-3">
<h3 class="fs-4 mt-4">Étapes</h3>
<div class="mb-4 mt-2">
<a href="#" class="btn btn-primary btn-sm">
Ajouter une étape
</a> </a>
</div> </div>
<!-- Avant / Après --> <table class="table table-striped table-hover align-middle">
<div class="col-md-4"> <thead class="table-dark">
<a href="../avant_apres/liste_avant_apres/liste_avant_apres.html" class="text-decoration-none"> <tr>
<div class="card p-4 menu-card"> <th>Titre</th>
<div class="menu-icon">🖼️</div>
<h4 class="mt-3 text-dark">Galerie Avant / Après</h4> <th class="text-end">Actions</th>
<p class="text-muted">Ajouter, modifier ou supprimer les photos.</p> </tr>
</thead>
<tbody>
<tr>
<td>Coupe ciseaux</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<button
class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
</tr>
<tr>
<td>Coupe griffes</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<button
class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
</td>
</tr>
<tr>
<td>Séchage doux</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<button
class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
</tr>
</tbody>
</table>
</section>
</div> </div>
</div>
</div>
<!-- ACCORDÉON 2 -->
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Gérer le slider
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
<div class="mb-4 mt-2">
<a href="../html/ajouter_slider.html" class="btn btn-primary btn-sm">
Ajouter un slider
</a> </a>
</div> </div>
<table class="table table-striped table-hover align-middle">
<thead class="table-dark">
<tr>
<th>Titre</th>
<th class="text-end">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chien toiletté</td>
<td class="text-end">
<a href="../html/modifier_slider.html"
class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<button
class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
</td>
</tr>
<tr>
<td>Avant / Après</td>
<td class="text-end">
<a href="../html/modifier_slider.html"
class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<button
class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
</td>
</tr>
<tr>
<td>Nouveauté</td>
<td class="text-end">
<a href="../html/modifier_slider.html"
class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<button
class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div> </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <!-- ACCORDÉON 3 -->
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Gérer la galerie avant/après
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
<div class="mb-4 mt-2">
<a href="../html/ajouter_avant_apres.html" class="btn btn-primary btn-sm">
Ajouter un résultat
</a>
</div>
<table class="table table-striped table-hover align-middle">
<thead class="table-dark">
<tr>
<th>Titre</th>
<th class="text-end">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Toilettage complet</td>
<td class="text-end">
<a href="../html/modifier_avant_apres.html"
class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<button
class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
</td>
</tr>
<tr>
<td>Toilettage complet</td>
<td class="text-end">
<a href="../html/modifier_avant_apres.html"
class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<button
class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div> <!-- /#accordionExample -->
</div>
</div>
<div id="modal-placeholder"></div>
</main>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body> </body>
</html> </html>

111
prestations/html/verif.html Normal file
View File

@@ -0,0 +1,111 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modifier un résultat avant/après</title>
<link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/node_modules/bs-icon/icons.css">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/avant_apres.css">
</head>
<body>
<div id="header-placeholder"></div>
<main class="my-5 fs-6">
<div class="container">
<header>
<h1 class="title fs-2 text-center">Modifier un résultat en images (Avant / Après)</h1>
<!-- Messages -->
<div id="successMsg" class="alert alert-success d-none">
Le résultat a été modifié avec succès.
</div>
<div id="errorMsg" class="alert alert-danger d-none">
Une erreur est survenue. Merci de vérifier le formulaire.
</div>
<!-- Erreur : format invalide -->
<div id="errorFormat" class="alert alert-danger d-none">
Format d'image invalide. Formats acceptés : JPG, PNG, WEBP.
</div>
</header>
<div class="section">
<!-- Formulaire de modification -->
<form id="editPairForm" class="mt-3">
<!-- ID caché -->
<input type="hidden" id="pairId">
<!-- Titre-->
<div class="mb-3">
<label for="pairTitle" class="form-label fw-bold">Titre du résultat
(obligatoire)</label>
<input type="text" class="form-control" id="pairTitle" required>
</div>
<!-- Type -->
<div class="mb-3">
<label class="form-label fw-bold" for="pairType">Type (obligatoire)</label>
<select id="pairType" class="form-select" required>
<option value="">-- Choisir --</option>
<option value="Chien">Chien</option>
<option value="Chat">Chat</option>
</select>
</div>
<!-- Images AVANT / APRÈS -->
<div class="row gy-4 mb-4">
<!-- Image AVANT -->
<div class="col-12">
<label class="form-label fw-bold" for="beforeImage">
Image AVANT (obligatoire, formats acceptés : jpg, png, webp)
</label>
<input type="file" class="form-control" id="beforeImage" accept="image/*" required>
<img id="beforePreview" class="img-preview mt-2 d-none" src="#" alt="Aperçu avant">
</div>
<!-- Image APRÈS -->
<div class="col-12">
<label class="form-label fw-bold" for="afterImage">
Image APRÈS (obligatoire, formats acceptés : jpg, png, webp)
</label>
<input type="file" class="form-control" id="afterImage" accept="image/*" required>
<img id="afterPreview" class="img-preview mt-2 d-none" src="#" alt="Aperçu après">
</div>
</div>
<!-- Boutons -->
<div class="row mt-4 g-3">
<div class="col-12 col-md-6">
<a href="../html/liste_avant_apres.html" class="btn btn-secondary w-100">
Annuler
</a>
</div>
<div class="col-12 col-md-6">
<button type="submit" class="btn btn-primary w-100">
Enregistrer les modifications
</button>
</div>
</div>
</form>
</div>
</div>
</main>
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../js/modifier_avant_apres.js"></script>
</body>
</html>

View File

@@ -1,64 +0,0 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Voir la paire avant/après</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
<style>
.img-preview {
max-width: 250px;
border-radius: 10px;
}
</style>
</head>
<body class="bg-light py-4 py-md-5">
<div class="container" style="max-width: 800px;">
<h1 class="mb-4 mb-md-5 text-center">Détails de la paire avant/après</h1>
<!-- Message erreur -->
<div id="errorMsg" class="alert alert-danger d-none">
Impossible d'afficher cette paire.
</div>
<div id="detailsSection" class="mt-3">
<h2 id="pairTitle" class="text-center mb-4" aria-live="polite">Chargement...</h2>
<!-- AVANT / APRÈS : empilés en mobile, côte à côte en md+ -->
<div class="row justify-content-center align-items-start mb-4 g-4">
<div class="col-12 col-md-6 text-center">
<p class="fw-bold">AVANT</p>
<img id="beforePreview" class="img-preview border img-fluid" src="#" alt="Photo avant">
</div>
<div class="col-12 col-md-6 text-center">
<p class="fw-bold">APRÈS</p>
<img id="afterPreview" class="img-preview border img-fluid" src="#" alt="Photo après" >
</div>
</div>
<!-- Bouton retour -->
<div class="text-center mt-4">
<a href="../liste_avant_apres/liste_avant_apres.html" class="btn btn-secondary">
Retour à la liste
</a>
</div>
</div>
</div>
<script src="voir_avant_apres.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

View File

@@ -1,16 +1,14 @@
// Récupération des éléments // Éléments
const form = document.getElementById("addCategoryForm"); const form = document.getElementById("addCategoryForm");
const messages = document.getElementById("messages");
const titleField = document.getElementById("categoryName"); const titleField = document.getElementById("categoryName");
const typeField = document.getElementById("prestationType"); const typeField = document.getElementById("prestationType");
const descField = document.getElementById("prestationDescription"); const descField = document.getElementById("prestationDescription");
const priceMinField = document.getElementById("priceMin"); const priceMinField = document.getElementById("priceMin");
const priceMaxField = document.getElementById("priceMax"); const priceMaxField = document.getElementById("priceMax");
const errorEmpty = document.getElementById("errorEmpty"); // Prestations existantes (simulation BDD)
const errorExists = document.getElementById("errorExists");
const successMessage = document.getElementById("successMessage");
// Prestations existantes (simulation)
const existingPrestations = [ const existingPrestations = [
"Toilettage complet", "Toilettage complet",
"Coupe ciseaux", "Coupe ciseaux",
@@ -18,38 +16,43 @@ const existingPrestations = [
"Démêlage poil long" "Démêlage poil long"
]; ];
function showMessage(type, text) {
messages.innerHTML = "";
const div = document.createElement("div");
div.className = `alert alert-${type}`;
div.textContent = text;
messages.appendChild(div);
}
form.addEventListener("submit", function (e) { form.addEventListener("submit", function (e) {
e.preventDefault(); e.preventDefault();
messages.innerHTML = "";
// Récupérer le titre
const titre = titleField.value.trim(); const titre = titleField.value.trim();
// Réinitialiser les alertes // Titre obligatoire
errorEmpty.classList.add("d-none"); if (!titre) {
errorExists.classList.add("d-none"); showMessage("danger", "Le titre de la prestation est obligatoire.");
successMessage.classList.add("d-none");
// 1. Vérif : titre obligatoire
if (titre === "") {
errorEmpty.classList.remove("d-none");
return; return;
} }
// 2. Vérif : prestation déjà existante (exemple simple) // Doublon
if (existingPrestations.includes(titre)) { if (existingPrestations.includes(titre)) {
errorExists.classList.remove("d-none"); showMessage("danger", "Cette prestation existe déjà. Veuillez en choisir une autre.");
return; return;
} }
// 3. Tout est ok → succès // Succès
successMessage.classList.remove("d-none");
// Simuler ajout en base
existingPrestations.push(titre); existingPrestations.push(titre);
showMessage("success", "Prestation ajoutée avec succès !");
// Redirection
setTimeout(() => { setTimeout(() => {
window.location.href = "../liste_prestation/liste_prestation.html";
window.location.href = "../html/prestation_accueil.html";
}, 1500); }, 1500);
}); });

View File

@@ -1,44 +1,52 @@
const form = document.getElementById('addSlideForm'); const form = document.getElementById("addSlideForm");
const imgField = document.getElementById('slideImage'); const messages = document.getElementById("messages");
const altField = document.getElementById('slideAlt');
const titleField = document.getElementById('slideTitle');
const errorEmpty = document.getElementById('errorEmpty'); const imgField = document.getElementById("slideImage");
const errorFormat = document.getElementById('errorFormat'); const altField = document.getElementById("slideAlt");
const successMsg = document.getElementById('successMsg'); const titleField = document.getElementById("slideTitle");
// Création du tableau simulant la BDD // Simulation BDD
let slides = []; let slides = [];
form.addEventListener('submit', function (e) {
e.preventDefault();
// Reset messages function showMessage(type, text) {
errorEmpty.classList.add('d-none'); messages.innerHTML = "";
errorFormat.classList.add('d-none');
successMsg.classList.add('d-none'); const div = document.createElement("div");
div.className = `alert alert-${type}`;
div.textContent = text;
messages.appendChild(div);
}
form.addEventListener("submit", function (e) {
e.preventDefault();
messages.innerHTML = "";
const image = imgField.files[0]; const image = imgField.files[0];
const alt = altField.value.trim(); const alt = altField.value.trim();
const title = titleField.value.trim();
// Image obligatoire // Image obligatoire
if (!image) { if (!image) {
errorEmpty.textContent = "Merci de sélectionner une image."; showMessage("danger", "Merci de sélectionner une image.");
errorEmpty.classList.remove('d-none');
return; return;
} }
// ALT obligatoire // ALT obligatoire
if (alt === "") { if (!alt) {
errorEmpty.textContent = "Le texte ALT est obligatoire."; showMessage("danger", "Le texte ALT est obligatoire.");
errorEmpty.classList.remove('d-none');
return; return;
} }
// Vérification format // Vérification format
const validFormats = ["image/jpeg", "image/png", "image/webp"]; const validFormats = ["image/jpeg", "image/png", "image/webp"];
if (!validFormats.includes(image.type)) { if (!validFormats.includes(image.type)) {
errorFormat.classList.remove('d-none'); showMessage(
"danger",
"Format d'image invalide. Formats acceptés : JPG, PNG, WEBP."
);
return; return;
} }
@@ -46,18 +54,18 @@ form.addEventListener('submit', function (e) {
slides.push({ slides.push({
id: Date.now(), id: Date.now(),
image: image.name, image: image.name,
alt: alt, alt,
title: titleField.value.trim(), title,
order: slides.length + 1 order: slides.length + 1
}); });
console.log("Nouveau slide ajouté :", slides); console.log("Nouveau slide ajouté :", slides);
// Succès // Succès
successMsg.classList.remove('d-none'); showMessage("success", "Slide ajouté avec succès !");
// Redirection // Redirection
setTimeout(() => { setTimeout(() => {
window.location.href = "../../../slider/liste_slider/liste_slider.html"; window.location.href = "/prestations/html/prestation_accueil.html";
}, 1500); }, 1500);
}); });

View File

@@ -1,117 +0,0 @@
// ===============================
// Données simulées (à remplacer plus tard par une BDD)
// ===============================
let galleryPairs = [
{
id: 1,
titre: "Petit chien poils longs",
type: "Chien",
avant: "../../img/avant1.jpg",
apres: "../../img/apres1.jpg"
},
{
id: 2,
titre: "Coupe ciseaux",
type: "Chat",
avant: "../../img/avant2.jpg",
apres: "../../img/apres2.jpg"
}
];
// Sélecteurs
const tableBody = document.getElementById("prestationTableBody");
const succesDeleteMsg = document.getElementById("succesDeleteMsg");
// Modal & bouton de confirmation
const deleteModalEl = document.getElementById("deleteModal");
const confirmDeleteBtn = document.getElementById("confirmDeleteBtn");
const deleteModal = new bootstrap.Modal(deleteModalEl);
// ID de la paire en attente de suppression
let pairIdToDelete = null;
// ===============================
// Fonction d'affichage
// ===============================
function displayPairs() {
tableBody.innerHTML = ""; // reset tableau
galleryPairs.forEach(pair => {
const row = document.createElement("tr");
row.innerHTML = `
<td>${pair.titre}</td>
<td>${pair.type}</td>
<td>
<img src="${pair.avant}" class="img-thumbnail" style="max-width: 80px;">
</td>
<td>
<img src="${pair.apres}" class="img-thumbnail" style="max-width: 80px;">
</td>
<td class="text-center text-md-start">
<div class="d-flex flex-column flex-md-row justify-content-center justify-content-md-start gap-2">
<!-- Bouton Voir -->
<a href="../voir_avant_apres/voir_avant_apres.html?id=${pair.id}"
class="btn btn-info btn-sm">
Voir
</a>
<!-- Bouton Modifier -->
<a href="../modifier_avant_apres/modifier_avant_apres.html?id=${pair.id}"
class="btn btn-warning btn-sm">
Modifier
</a>
<!-- Bouton Supprimer -->
<button class="btn btn-danger btn-sm" onclick="openDeleteModal(${pair.id})">
Supprimer
</button>
</div>
</td>
`;
tableBody.appendChild(row);
});
}
// ===============================
// Ouvrir le modal de suppression
// ===============================
function openDeleteModal(id) {
pairIdToDelete = id; // on mémorise l'id
deleteModal.show(); // on ouvre le modal
}
// ===============================
// Fonction de suppression réelle
// ===============================
function deletePair(id) {
galleryPairs = galleryPairs.filter(pair => pair.id !== id);
displayPairs();
succesDeleteMsg.classList.remove("d-none");
setTimeout(() => {
succesDeleteMsg.classList.add("d-none");
}, 2000);
}
// ===============================
// Clic sur "Supprimer" dans le modal
// ===============================
confirmDeleteBtn.addEventListener("click", () => {
if (pairIdToDelete !== null) {
deletePair(pairIdToDelete);
pairIdToDelete = null;
}
deleteModal.hide();
});
// ===============================
// Chargement initial
// ===============================
displayPairs();

View File

@@ -1,61 +0,0 @@
// Exemple BDD
const prestations = [
{
id: 1,
titre: "Toilettage complet",
type: "Chien",
description: "• Bain complet \n• Séchage \n• Coupe aux ciseaux\n• Nettoyage des oreilles",
prixMin: 35,
prixMax: 60
},
{
id: 2,
titre: "Toilettage express",
type: "Chat",
description: "• Bain rapide\n• Séchage\n• Brossage",
prixMin: 20,
prixMax: 35
}
];
// Sélection des éléments
const tableBody = document.getElementById('prestationTableBody');
const successDeleteMsg = document.getElementById('successDeleteMsg');
// Fonction pour extrait description
function extrait(desc, limite = 60) {
return desc.length > limite ? desc.substring(0, limite) + '...' : desc;
}
// Affichage du tableau
function afficherPrestations() {
tableBody.innerHTML = '';
prestations.forEach((p, index) => {
const row = `
<tr>
<td>${p.titre}</td>
<td>${p.type}</td>
<td>${extrait(p.description.replace(/\n/g, " "))}</td>
<td>${p.prixMin}€ - ${p.prixMax}€</td>
<td class="text-center action-btns">
<a href="consulter_prestation.html?id=${p.id}" class="btn btn-info btn-sm">Voir</a>
<a href="../../prestations/modifier_prestation/modifier_prestation.html?id=${p.id}" class="btn btn-warning btn-sm">Modifier</a>
<button class="btn btn-danger btn-sm" onclick="supprimerPrestation(${index})">Supprimer</button>
</td>
</tr>
`;
tableBody.innerHTML += row;
});
}
afficherPrestations();
// Suppression
function supprimerPrestation(index) {
prestations.splice(index, 1);
afficherPrestations();
successDeleteMsg.classList.remove("d-none");
}

View File

@@ -1,87 +0,0 @@
// Simulation BDD slider
let slides = [
{ id: 1, image: "slide1.webp", alt: "Chien toiletté", title: "Promo du mois", order: 1 },
{ id: 2, image: "slide2.webp", alt: "Avant / Après", title: "", order: 2 },
{ id: 3, image: "slide3.webp", alt: "Coupe ciseaux", title: "Nouveauté", order: 3 }
];
const tableBody = document.getElementById("sliderTableBody");
const successMsg = document.getElementById("successMsg");
function afficherSlides() {
// trier par ordre
slides.sort((a, b) => a.order - b.order);
tableBody.innerHTML = "";
slides.forEach((slide, index) => {
const row = `
<tr>
<td><img src="#" alt="${slide.alt}" class="miniature"></td>
<td>${slide.alt}</td>
<td>${slide.title || "-"}</td>
<td>${slide.order}</td>
<td class="text-center action-buttons">
<button class="btn btn-secondary btn-sm" onclick="monter(${index})">↑</button>
<button class="btn btn-secondary btn-sm" onclick="descendre(${index})">↓</button>
<a href="../../slider/modifier_slider/modifier_slider.html?id=${slide.id}"
class="btn btn-warning btn-sm">Modifier</a>
<button class="btn btn-danger btn-sm" onclick="supprimerSlide(${index})">Supprimer</button>
</td>
</tr>
`;
tableBody.innerHTML += row;
});
}
afficherSlides();
// Suppression
function supprimerSlide(index) {
if (confirm("Voulez-vous vraiment supprimer cette image du slider ?")) {
slides.splice(index, 1);
// Réordonner après suppression
slides.forEach((s, i) => s.order = i + 1);
afficherSlides();
successMsg.textContent = "Image du slider supprimée avec succès.";
successMsg.classList.remove("d-none");
}
}
// Monter
function monter(index) {
if (index === 0) return; // déjà en haut
[slides[index - 1], slides[index]] = [slides[index], slides[index - 1]];
// recalcul ordre
slides.forEach((s, i) => s.order = i + 1);
afficherSlides();
successMsg.textContent = "Ordre mis à jour.";
successMsg.classList.remove("d-none");
}
// Descendre
function descendre(index) {
if (index === slides.length - 1) return; // déjà en bas
[slides[index], slides[index + 1]] = [slides[index + 1], slides[index]];
slides.forEach((s, i) => s.order = i + 1);
afficherSlides();
successMsg.textContent = "Ordre mis à jour.";
successMsg.classList.remove("d-none");
}

View File

@@ -1,41 +1,45 @@
const form = document.getElementById("editPrestationForm");
const messages = document.getElementById("messages");
const form = document.getElementById('editPrestationForm'); const titleField = document.getElementById("prestationTitle");
const titleField = document.getElementById('prestationTitle'); const descriptionField = document.getElementById("prestationDescription");
const descriptionField = document.getElementById('prestationDescription'); const typeField = document.getElementById("prestationType");
const typeField = document.getElementById('prestationType'); const priceMinField = document.getElementById("priceMin");
const priceMinField = document.getElementById('priceMin'); const priceMaxField = document.getElementById("priceMax");
const priceMaxField = document.getElementById('priceMax');
const errorEmpty = document.getElementById('errorEmpty');
const errorTechnical = document.getElementById('errorTechnical');
const successMsg = document.getElementById('successMsg');
form.addEventListener('submit', function (e) { function showMessage(type, text) {
messages.innerHTML = "";
const div = document.createElement("div");
div.className = `alert alert-${type}`;
div.textContent = text;
messages.appendChild(div);
}
form.addEventListener("submit", function (e) {
e.preventDefault(); e.preventDefault();
messages.innerHTML = "";
errorEmpty.classList.add('d-none');
errorTechnical.classList.add('d-none');
successMsg.classList.add('d-none');
const title = titleField.value.trim(); const title = titleField.value.trim();
// Champ obligatoire
// champ obligatoire manquant if (!title) {
if (title === '') { showMessage("danger", "Le titre de la prestation est obligatoire.");
errorEmpty.classList.remove('d-none');
return; return;
} }
// 2 Simulation derreur technique // Simulation erreur technique
const erreurTechnique = false; // mettre true pour tester const erreurTechnique = false; // mettre true pour tester
if (erreurTechnique) { if (erreurTechnique) {
errorTechnical.classList.remove('d-none'); showMessage("danger", "Une erreur est survenue. Veuillez réessayer plus tard.");
return; return;
} }
//Succès // Succès
successMsg.classList.remove('d-none'); showMessage("success", "Prestation modifiée avec succès !");
console.log("Nouvelles données :", { console.log("Nouvelles données :", {
titre: title, titre: title,
@@ -45,8 +49,8 @@ form.addEventListener('submit', function (e) {
prixMax: priceMaxField.value prixMax: priceMaxField.value
}); });
// Redirection après un court délai // Redirection
setTimeout(() => { setTimeout(() => {
window.location.href = "../liste_prestation/liste_prestation.html"; window.location.href = "/prestations/html/prestation_accueil.html";
}, 1500); }, 1500);
}); });

View File

@@ -1,58 +0,0 @@
// ===============================
// Données simulées (à remplacer plus tard par BDD / API)
// ===============================
let galleryPairs = [
{
id: 1,
titre: "Petit chien poils longs",
type: "Chien",
avant: "../../img/avant1.jpg",
apres: "../../img/apres1.jpg"
},
{
id: 2,
titre: "Coupe ciseaux",
type: "Chat",
avant: "../../img/avant2.jpg",
apres: "../../img/apres2.jpg"
}
];
// Sélecteurs
const titleEl = document.getElementById("pairTitle");
const beforePreview = document.getElementById("beforePreview");
const afterPreview = document.getElementById("afterPreview");
const errorMsg = document.getElementById("errorMsg");
const detailsSection = document.getElementById("detailsSection");
// ===============================
// Récup ID dans l'URL
// ===============================
function getIdFromUrl() {
const params = new URLSearchParams(window.location.search);
return parseInt(params.get("id"));
}
// ===============================
// Charger les infos de la paire
// ===============================
function loadPairDetails() {
const id = getIdFromUrl();
const pair = galleryPairs.find(p => p.id === id);
if (!pair) {
errorMsg.classList.remove("d-none");
detailsSection.classList.add("d-none");
return;
}
// Affichage du titre
titleEl.textContent = pair.titre;
// Affichage des images
beforePreview.src = pair.avant;
afterPreview.src = pair.apres;
}
// Initialisation
loadPairDetails();

126
profil/html/profil.html Normal file
View File

@@ -0,0 +1,126 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profil - L'Il'eau chiens - Admin</title>
<link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/node_modules/bs-icon/icons.css">
<link rel="shortcut icon" href="/favicon.png" type="image/png">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/citations.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-xl bg-body-tertiary">
<div class="container-fluid align-items-center">
<a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link left-label" aria-current="page" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Boutique</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Prestations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">FAQ</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Vétos</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Citations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">À propos</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message d'actu</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i> Voir le site</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-gear me-1"></i> Configuration</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
<li><a class="dropdown-item active" href="#">Profil</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Sortir</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="my-5 fs-6">
<div class="container">
<header>
<h1 class="title my-4 fs-2 text-center">Mon profil</h1>
</header>
<div class="content">
<section class="my-4">
<h2 class="fs-4 mb-3">Informations personnelles</h2>
<form class="row g-3" id="profile-info-form">
<div class="col-md-12">
<label for="lastName" class="form-label">Nom (obligatoire)</label>
<input type="text" class="form-control" id="lastName" name="lastName" placeholder="Votre nom" value="Nom de famille" required>
</div>
<div class="col-md-12">
<label for="firstName" class="form-label">Prénom (obligatoire)</label>
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="Votre prénom" value="Sandrine" required>
</div>
<div class="col-12">
<label for="email" class="form-label">Email (obligatoire)</label>
<input type="email" class="form-control" id="email" name="email" placeholder="votre@email.com" value="sandrine@gmail.com">
</div>
<div class="col-12 d-flex justify-content-star">
<button type="submit" class="btn btn-primary">Modifier</button>
</div>
</form>
</section>
<section class="my-5">
<h2 class="fs-4">Mot de passe</h2>
<form class="row" id="password-form">
<div class="col-12 my-2">
<small class="text-muted">Laissez ces champs vides pour ne pas modifier votre mot de passe.</small>
</div>
<div class="col-12 mb-3">
<label for="password" class="form-label">Nouveau mot de passe (<span id="min8">8 caractères minimum</span>, incluant une <span id="uppercase">majuscule</span>, une <span id="lowercase">minuscule</span> et un <span id="digit">chiffre</span>)</label>
<input type="password" class="form-control" id="password" name="password" placeholder="Nouveau mot de passe">
</div>
<div class="col-12">
<label for="passwordConfirm" class="form-label">Confirmation</label>
<input type="password" class="form-control" id="passwordConfirm" name="passwordConfirm" placeholder="Confirmer le mot de passe">
</div>
<div class="col-12">
<label for="showPassword" class="mt-2 mb-3">
<input type="checkbox" id="showPassword" />
Voir le mot de passe
</label>
</div>
<div class="col-12 d-flex justify-content-star">
<button type="submit" class="btn btn-primary">Modifier</button>
</div>
</form>
</section>
</div>
</div>
</main>
<footer class="bg-body-tertiary py-4 mt-auto">
<div class="container d-flex gap-3 flex-wrap">
<span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
<a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
<a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
</div>
</footer>
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/js/password.js"></script>
</body>
</html>

View File

@@ -1,52 +1,8 @@
<!DOCTYPE html> <header>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CE sera le titre de la page</title>
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="node_modules/bs-icon/icons.css">
<link rel="shortcut icon" href="favicon.png" type="image/png">
<style>
.navbar-brand { font-size: 1.2rem; line-height: 1; padding-top: 0.25rem; padding-bottom: 0.25rem; }
.brand-sep { height: 1.2rem; }
@media (max-width: 1399.98px) {
.navbar .nav-item {
background-color: var(--bs-light);
border: 1px solid var(--bs-border-color);
border-radius: .25rem;
margin-bottom: .375rem;
text-align: center;
}
#navbarSupportedContent > ul:first-child { margin-top: .5rem; }
#navbarSupportedContent > ul:last-child { margin-top: 1rem; }
.bi{
display: none;
}
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-expand-xxl bg-body-tertiary"> <nav class="navbar navbar-expand-xxl bg-body-tertiary">
<div class="container-fluid align-items-center"> <div class="container-fluid align-items-center">
<a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a> <a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation"> aria-expanded="false" aria-label="Toggle navigation">
@@ -67,14 +23,16 @@
<a class="nav-link left-label" href="#">FAQ</a> <a class="nav-link left-label" href="#">FAQ</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link left-label" href="#">Fiche de renseignements</a> <a class="nav-link left-label" href="#">Fiche renseignements</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link left-label" href="#">Partenaires</a> <a class="nav-link left-label" href="#">Partenaires</a>
</li> </li>
<li class="nav-item">
<a class="nav-link left-label" href="#">Citations</a>
</li>
</ul> </ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0"> <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message d'actu</a> <a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message d'actu</a>
@@ -102,20 +60,3 @@
</nav> </nav>
</header> </header>
<main class="my-5 fs-6">
<div class="container">
<header>
<h1 class="title fs-2">Titre de la page</h1>
</header>
<main>
Contenu de la page
</main>
</div>
</main>
</body>
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</html>

82
template.html Normal file
View File

@@ -0,0 +1,82 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CE sera le titre de la page</title>
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="node_modules/bs-icon/icons.css">
<link rel="shortcut icon" href="/favicon.png" type="image/png">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-xl bg-body-tertiary">
<div class="container-fluid align-items-center">
<a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link left-label" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Boutique</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Prestations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">FAQ</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Vétos</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Citations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">À propos</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message d'actu</a>
</li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i> Voir le
site</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-gear me-1"></i> Configuration</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
<i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
<li><a class="dropdown-item" href="#">Profil</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sortir</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="my-5 fs-6">
<div class="container">
<header>
<h1 class="title my-4 fs-2 text-center">Titre de la page</h1>
</header>
<div class="content">
Contenu de la page
</div>
</div>
</main>
<footer class="border-top py-3 mt-4">
<div class="container d-flex gap-3 flex-wrap">
<a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
<a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
</div>
</footer>
</body>
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</html>

View File

@@ -0,0 +1,116 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liste des vétos - L'Il'eau chiens - Admin</title>
<link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/node_modules/bs-icon/icons.css">
<link rel="shortcut icon" href="/favicon.png" type="image/png">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-xl bg-body-tertiary">
<div class="container-fluid align-items-center">
<a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link left-label" aria-current="page" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Boutique</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Prestations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">FAQ</a></li>
<li class="nav-item"><a class="nav-link active left-label" href="#">Vétos</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Citations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">À propos</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message d'actu</a>
</li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i> Voir le
site</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-gear me-1"></i> Configuration</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
<i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
<li><a class="dropdown-item" href="#">Profil</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sortir</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="my-5 fs-6">
<div class="container">
<header>
<h1 class="title my-4 fs-2 text-center">Ajouter un vétérinaire</h1>
</header>
<div class="content">
<form id="ajouterArticleForm">
<div class="mb-4 veto-addition">
<label class="form-label fw-bold" for="veto">Nom du vétérinaire (obligatoire)</label>
<input type="text" id="veto" class="form-control"
placeholder="Veto bidule" required>
</div>
<div class="mb-4 veto-adresse1">
<label class="form-label fw-bold" for="address">Adresse du vétérinaire (obligatoire)</label>
<input type="text" id="address" class="form-control"
placeholder="123 Rue Exemple" required>
</div>
<div class="mb-4 veto-adresse2">
<label class="form-label fw-bold" for="address2">Complément d'adresse (optionnel)</label>
<input type="text" id="address2" class="form-control"
placeholder="Appartement, étage, bâtiment, etc.">
</div>
<div class="mb-4 veto-adresse2">
<label class="form-label fw-bold" for="code_postal">Code postal (obligatoire)</label>
<input type="text" id="code_postal" class="form-control"
placeholder="75000" required>
</div>
<div class="mb-4 veto-commune">
<label class="form-label fw-bold" for="commune">Commune (obligatoire)</label>
<input type="text" id="commune" class="form-control"
placeholder="Paris" required>
</div>
<div class="mb-4 veto-telephone">
<label class="form-label fw-bold" for="telephone">Téléphone (obligatoire)</label>
<input type="text" id="telephone" class="form-control"
placeholder="0123456789" required>
</div>
<div class="d-flex gap-3 mt-4 confirmation-buttons">
<a href="./accueil.html" class="btn btn-secondary w-50">Annuler</a>
<button type="submit" class="btn btn-primary w-50">Ajouter</button>
</div>
</form>
</div>
</div>
</main>
<footer class="bg-body-tertiary py-4 mt-auto">
<div class="container d-flex gap-3 flex-wrap">
<span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
<a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
<a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
</div>
</footer>
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

View File

@@ -0,0 +1,113 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modifier un vétérinaire - L'Il'eau chiens - Admin</title>
<link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/node_modules/bs-icon/icons.css">
<link rel="shortcut icon" href="/favicon.png" type="image/png">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-xl bg-body-tertiary">
<div class="container-fluid align-items-center">
<a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link left-label" aria-current="page" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Boutique</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Prestations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">FAQ</a></li>
<li class="nav-item"><a class="nav-link active left-label" href="#">Vétos</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Citations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">À propos</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message
d'actu</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i>
Voir le site</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-gear me-1"></i>
Configuration</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
<li><a class="dropdown-item" href="#">Profil</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sortir</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="my-5 fs-6">
<div class="container">
<header>
<h1 class="title my-4 fs-2 text-center">Modifier un vétérinaire</h1>
</header>
<div class="content">
<form id="ajouterArticleForm">
<div class="mb-4 veto-addition">
<label class="form-label fw-bold" for="veto">Nom du vétérinaire (obligatoire)</label>
<input type="text" id="veto" class="form-control" value="Clinique vétérinaire de Victor hugo" required>
</div>
<div class="mb-4 veto-adresse1">
<label class="form-label fw-bold" for="address">Adresse du vétérinaire (obligatoire)</label>
<input type="text" id="address" class="form-control" value="1 Boulevard René Chabasse" required>
</div>
<div class="mb-4 veto-adresse2">
<label class="form-label fw-bold" for="address2">Complément d'adresse (optionnel)</label>
<input type="text" id="address2" class="form-control" value="Appartement, étage, bâtiment, etc.">
</div>
<div class="mb-4 veto-adresse2">
<label class="form-label fw-bold" for="code_postal">Code postal (obligatoire)</label>
<input type="text" id="code_postal" class="form-control" value="16000" required>
</div>
<div class="mb-4 veto-commune">
<label class="form-label fw-bold" for="commune">Commune (obligatoire)</label>
<input type="text" id="commune" class="form-control" value="Angoulême" required>
</div>
<div class="mb-4 veto-telephone">
<label class="form-label fw-bold" for="telephone">Téléphone (obligatoire)</label>
<input type="text" id="telephone" class="form-control" value="0545367890" required>
</div>
<div class="d-flex gap-3 mt-4 confirmation-buttons">
<a href="./accueil.html" class="btn btn-secondary w-50">Annuler</a>
<button type="submit" class="btn btn-primary w-50">Modifier</button>
</div>
</form>
</div>
</div>
</main>
<footer class="bg-body-tertiary py-4 mt-auto">
<div class="container d-flex gap-3 flex-wrap">
<span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
<a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
<a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
</div>
</footer>
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

141
veto/html/veto_accueil.html Normal file
View File

@@ -0,0 +1,141 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liste des vétos - L'Il'eau chiens - Admin</title>
<link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/node_modules/bs-icon/icons.css">
<link rel="shortcut icon" href="/favicon.png" type="image/png">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-xl bg-body-tertiary">
<div class="container-fluid align-items-center">
<a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link left-label" aria-current="page" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Boutique</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Prestations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">FAQ</a></li>
<li class="nav-item"><a class="nav-link active left-label" href="#">Vétos</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Citations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">À propos</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message d'actu</a>
</li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i> Voir le
site</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-gear me-1"></i> Configuration</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
<i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
<li><a class="dropdown-item" href="#">Profil</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sortir</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="my-5 fs-6">
<div class="container">
<header>
<h1 class="title my-4 fs-2 text-center">Liste des vétérinaires</h1>
</header>
<div class="content">
<div class="ajouter mb-4">
<a href="#" class="btn btn-primary">Ajouter un vétérinaire</a>
</div>
<table class="table table-striped table-hover">
<thead class="table-dark">
<tr>
<th>Vétérinaire</th>
<th class="text-end">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Clinique vétérinaire de Victor Hugo</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a>
<a href="index.php" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal"
data-bs-target="#confirmDeleteModal">Supprimer</a>
</td>
</tr>
<tr>
<td>Clinique du Champs de Mars</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a>
<a href="#" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal"
data-bs-target="#confirmDeleteModal">Supprimer</a>
</td>
</tr>
<tr>
<td>Véto 16</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a>
<a href="#" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal"
data-bs-target="#confirmDeleteModal">Supprimer</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
<div class="modal fade" id="confirmDeleteModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Confirmer la suppression</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Êtes-vous sûr de vouloir supprimer cette citation ? Cette action est définitive.
</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-body-tertiary py-4 mt-auto">
<div class="container d-flex gap-3 flex-wrap">
<span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
<a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
<a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
</div>
</footer>
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/js/contentReduct.js"></script>
<script src="/js/confirmDelete.js"></script>
</body>
</html>