ileauchiens/maquette_backoffice
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

normalisation blog + gestion images

Browse Source
This commit is contained in:
pestak
2025-12-14 11:42:13 +01:00
parent 1950fd3902
commit b4e037f11d
12 changed files with 367 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
blog/html/accueil_blog.html
View File

@@ -5,9 +5,9 @@
<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 |Modifier le blog</title> <title>Admin |Modifier le blog</title>
<link href="../../node_modules/bootstrap/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"> <link rel="stylesheet" href="/node_modules/bs-icon/icons.css">
<link rel="stylesheet" href="../../css/style.css"> <link rel="stylesheet" href="/css/style.css">
@@ -39,11 +39,9 @@
<li class="nav-item"> <li class="nav-item">
<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="#">Vétérinaires</a>
</li>
<li class="nav-item">
<a class="nav-link left-label" href="#">Partenaires</a>
</li> </li>
</ul> </ul>
@@ -83,7 +81,7 @@
<header> <header>
<h1 class="title fs-2">Modifier la page blog</h1> <h1 class="title fs-2">Modifier la page blog</h1>
</header> </header>
<main> <div class="content">
<section class="mb-5 section-categories"> <section class="mb-5 section-categories">
@@ -153,7 +151,7 @@
</tbody> </tbody>
</table> </table>
</section> </section>
</main> </div>
</div> </div>
</main> </main>
<script src="../js/liste_categorie.js"></script> <script src="../js/liste_categorie.js"></script>

227
blog/html/ajouter_article.html
View File

@@ -1,133 +1,156 @@
<!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>Ajouter un article</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">
<link rel="stylesheet" href="../../css/blog.css"> <link rel="stylesheet" href="/css/style.css">
<script src="https://cdn.tiny.cloud/1/1up68ybfp3crmpssl9o7pu6d0e8v3okcnsinhoujnmak7wft/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
</head> </head>
<body> <body>
<header> <header>
<nav class="navbar navbar-expand-xxl bg-body-tertiary shadow-sm"> <nav class="navbar navbar-expand-xxl bg-body-tertiary shadow-sm">
<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">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent"> <div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- MENU GAUCHE --> <!-- MENU GAUCHE -->
<ul class="navbar-nav me-auto mb-2 mb-lg-0"> <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 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="#">Boutique</a></li>
<li class="nav-item"><a class="nav-link" href="#">Prestations</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="#">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>
<!-- MENU DROIT --> <li class="nav-item"><a class="nav-link" href="#">Vétérinaires</a></li>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0"> </ul>
<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"> <!-- MENU DROIT -->
<a class="nav-link dropdown-toggle" href="#" id="userMenu" data-bs-toggle="dropdown"> <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span> <li class="nav-item">
</a> <a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message d'actu</a>
<ul class="dropdown-menu dropdown-menu-end"> </li>
<li><a class="dropdown-item" href="#">Profil</a></li> <li class="nav-item">
<li><hr class="dropdown-divider"></li> <a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i> Voir le site</a>
<li><a class="dropdown-item" href="#">Sortir</a></li> </li>
</ul> <li class="nav-item">
</li> <a class="nav-link" href="#"><i class="bi bi-gear me-1"></i> Configuration</a>
</ul> </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> </div>
</div> </nav>
</nav> </header>
</header>
<div class="container mt-5"> <div 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">
<div id="messages" class="mb-3"></div>
<!-- Catégorie --> <div id="messages" class="mb-3"></div>
<div class="mb-3">
<label class="form-label fw-bold">Catégorie *</label>
<select id="articleCategory" class="form-select">
<option value="">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>
<!-- Titre -->
<div class="mb-4">
<label class="form-label fw-bold">Titre *</label>
<input type="text" id="articleTitle" class="form-control">
</div>
<!-- Contenu --> <div class="mb-3">
<div class="mb-3"> <label class="form-label fw-bold">Catégorie (obligatoire)</label>
<label class="form-label fw-bold">Contenu</label> <select id="articleCategory" class="form-select" required>
<textarea id="articleContent"></textarea> <option value="none" disabled selected>Choisissez une catégorie</option>
</div> <option value="actualités">Actualités</option>
<option value="chien">Chien</option>
<option value="chat">Chat</option>
<option value="boutique">Boutique</option>
</select>
</div>
<!-- Image --> <!-- Titre -->
<div class="mb-4"> <div class="mb-4">
<label class="form-label fw-bold">Image</label> <label class="form-label fw-bold" for="articleTitle">Titre (obligatoire)</label>
<input type="file" id="articleImage" class="form-control"> <input type="text" id="articleTitle" class="form-control" placeholder="Entrez le titre de l'article"
</div> required>
</div>
<!-- Publié -->
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" id="articlePublished">
<label class="form-check-label">Publié</label>
</div>
<!-- Boutons --> <!-- Contenu -->
<div class="d-flex gap-3 mt-4"> <div class="row mb-3">
<a href="../html/accueil_blog.html" class="btn btn-secondary w-50">Annuler</a> <div class="col-md-4 image">
<button type="submit" class="btn btn-primary w-50">Ajouter</button> <div class="mb-4">
</div> <label class="form-label fw-bold" for="articleImage">Image (optionnelle)</label>
</form>
</div> <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">
<label class="form-label fw-bold" for="articleContent">Contenu (obligatoire)</label>
<div class="row">
</div>
<textarea id="articleContent" required></textarea>
</div>
</div>
</div>
<!-- Publié -->
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" id="articlePublished">
<label class="form-check-label" for="articlePublished">Publié</label>
</div>
<!-- Boutons -->
<div class="d-flex gap-3 mt-4">
<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>
</div>
</form>
</div>
<script src="/js/imgLoad.js"></script>
<script src="../js/ajouter_article.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>
<script src="../js/ajouter_article.js"></script>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script>
tinymce.init({
selector: '#articleContent',
height: 400,
language: 'fr',
plugins: 'lists fullscreen',
toolbar: 'undo redo | bold italic underline | bullist numlist | fullscreen'
});
</script>
</body> </body>
</html>
</html>

14
blog/html/ajouter_categorie.html
View File

@@ -5,7 +5,7 @@
<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>Ajouter une catégorie</title>
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/blog.css"> <link rel="stylesheet" href="/css/style.css">
</head> </head>
<body> <body>
@@ -28,8 +28,8 @@
<li class="nav-item"><a class="nav-link" href="#">Boutique</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="#">Prestations</a></li>
<li class="nav-item"><a class="nav-link" href="#">FAQ</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> <li class="nav-item"><a class="nav-link" href="#">Vétérinaires</a></li>
</ul> </ul>
<!-- MENU DROIT --> <!-- MENU DROIT -->
@@ -70,12 +70,12 @@
<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 *</label> <label class="form-label fw-bold">Nom de la catégorie (obligatoire)</label>
<input <input
type="text" type="text"
id="categoryName" id="categoryName"
class="form-control" class="form-control"
placeholder="Actualité, chien, chat…"> placeholder="Actualité, chien, chat…" required>
</div> </div>
<div class="mb-3"> <div class="mb-3">
@@ -98,5 +98,9 @@
<script src="../js/ajouter_categorie.js"></script> <script src="../js/ajouter_categorie.js"></script>
<script src="/node_modules/bootstrap/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>
</body> </body>
</html> </html>

90
blog/html/modifier_article.html
View File

@@ -4,16 +4,11 @@
<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>Modifier un article</title>
<link rel="stylesheet" href="../../css/blog.css">
<script src="https://cdn.tiny.cloud/1/1up68ybfp3crmpssl9o7pu6d0e8v3okcnsinhoujnmak7wft/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/style.css">
</head> </head>
<body> <body>
<header> <header>
<nav class="navbar navbar-expand-xxl bg-body-tertiary shadow-sm"> <nav class="navbar navbar-expand-xxl bg-body-tertiary shadow-sm">
<div class="container-fluid align-items-center"> <div class="container-fluid align-items-center">
@@ -33,8 +28,8 @@
<li class="nav-item"><a class="nav-link" href="#">Boutique</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="#">Prestations</a></li>
<li class="nav-item"><a class="nav-link" href="#">FAQ</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> <li class="nav-item"><a class="nav-link" href="#">Vétérinaires</a></li>
</ul> </ul>
<!-- MENU DROIT --> <!-- MENU DROIT -->
@@ -68,49 +63,56 @@
<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> <div id="messages" class="mb-3"></div>
<form id="editArticleForm"> <form id="editArticleForm">
<!-- Titre --> <!-- Titre -->
<div class="mb-3"> <div class="mb-3">
<label class="form-label fw-bold">Titre *</label> <label class="form-label fw-bold">Titre (obligatoire)</label>
<input type="text" id="articleTitle" class="form-control"> <input type="text" id="articleTitle" class="form-control" value="Les chats, ces réveils matin détraqués">
</div>
<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> </div>
<!-- Contenu --> <!-- Contenu -->
<div class="mb-3"> <div class="row mb-3">
<label class="form-label fw-bold">Contenu</label> <div class="col-md-4 image">
<textarea id="articleContent"></textarea> <div class="mb-4">
</div> <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">
<!-- Catégorie --> </div>
<div class="mb-4"> <div class="preview-img-container">
<label class="form-label fw-bold">Catégorie</label> </div>
<input type="text" id="articleCategory" class="form-control" list="categories"> </div>
<datalist id="categories">
<option value="actualités">
<option value="chien">
<option value="chat">
<option value="boutique">
</datalist>
</div>
<!-- Image --> <div class="col-md-8 conent">
<div class="mb-4"> <div class="mb-3">
<label class="fw-bold">Image actuelle</label> <label class="form-label fw-bold" for="articleContent">Contenu (obligatoire)</label>
<div> <div class="row">
<img id="imagePreview" class="preview-img mb-2 d-none" alt="apercu image">
<input type="file" id="articleImage" class="form-control"> </div>
<textarea id="articleContent" required></textarea>
</div>
</div>
</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">Publié (sera publié sur facebook)</label> <label class="form-check-label">Publié</label>
</div> </div>
<!-- Boutons --> <!-- Boutons -->
@@ -125,20 +127,10 @@
<script src="../js/modifier_article.js"></script> <script src="../js/modifier_article.js"></script>
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script> <script src="/node_modules/tinymce/tinymce.min.js"></script>
tinymce.init({ <script src="/node_modules/tinymce-i18n/langs8/fr-FR.js"></script>
selector: "#articleContent", <script src="/js/tinyMce.js"></script>
height: 400,
language: "fr",
plugins: "lists fullscreen",
toolbar: "undo redo | bold italic underline | bullist numlist | fullscreen",
branding: false,
promotion: false,
menubar: false
});
</script>
<script src="/js/previewImage.js"></script>
</body> </body>
</html> </html>

154
blog/html/modifier_categorie.html
View File

@@ -1,100 +1,108 @@
<!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>Modifier une catégorie</title>
<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../../css/blog.css"> <link rel="stylesheet" href="/css/style.css">
</head> </head>
<body> <body>
<!-- HEADER --> <!-- HEADER -->
<header> <header>
<nav class="navbar navbar-expand-xxl bg-body-tertiary shadow-sm"> <nav class="navbar navbar-expand-xxl bg-body-tertiary shadow-sm">
<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">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent"> <div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- MENU GAUCHE --> <!-- MENU GAUCHE -->
<ul class="navbar-nav me-auto mb-2 mb-lg-0"> <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 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="#">Boutique</a></li>
<li class="nav-item"><a class="nav-link" href="#">Prestations</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="#">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>
<!-- MENU DROIT --> <li class="nav-item"><a class="nav-link" href="#">Vétérinaires</a></li>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0"> </ul>
<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"> <!-- MENU DROIT -->
<a class="nav-link dropdown-toggle" href="#" id="userMenu" data-bs-toggle="dropdown"> <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span> <li class="nav-item">
</a> <a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message d'actu</a>
<ul class="dropdown-menu dropdown-menu-end"> </li>
<li><a class="dropdown-item" href="#">Profil</a></li> <li class="nav-item">
<li><hr class="dropdown-divider"></li> <a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i> Voir le site</a>
<li><a class="dropdown-item" href="#">Sortir</a></li> </li>
</ul> <li class="nav-item">
</li> <a class="nav-link" href="#"><i class="bi bi-gear me-1"></i> Configuration</a>
</ul> </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 class="container">
<h2 class="mb-5 text-center">Modifier une catégorie</h2>
<form id="modifierCategorie">
<div class="mb-4">
<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>
</div> </div>
</div>
</nav>
</header>
<div class="container">
<h2 class="mb-5 text-center">Modifier une catégorie</h2>
<form id="modifierCategorie">
<div class="mb-4"> <div class="mb-3">
<label class="form-label fw-bold">Nom de la catégorie (obligatoire)</label> <label class="form-label fw-bold">Description (optionnel)</label>
<input type="text" id="categoryName" class="form-control" placeholder="Entrez le nom de la catégorie" required> <textarea id="categorieDescription" class="form-control" rows="4"></textarea>
</div>
</div> <div class="d-flex gap-3 mt-4">
<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>
</div>
</form>
</div>
<div class="mb-3"> <script src="../js/modifier_categorie.js"></script>
<label class="form-label fw-bold">Description (optionnel)</label> <script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<textarea id="categorieDescription" class="form-control" rows="4" placeholder="Entrez une description" required></textarea>
</div>
<div class="d-flex gap-3 mt-4"> <script src="/node_modules/tinymce/tinymce.min.js"></script>
<a href="../html/accueil_blog.html" class="btn btn-secondary w-50">Annuler</a> <script src="/node_modules/tinymce-i18n/langs8/fr-FR.js"></script>
<button type="submit" class="btn btn-primary w-50">Enregistrer</button> <script src="/js/tinyMce.js"></script>
</div>
</form>
</div>
<script src="../js/modifier_categorie.js"></script>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body> </body>
</html> </html>

18
blog/js/ajouter_article.js
View File

@@ -2,6 +2,7 @@ const form = document.getElementById("ajouterArticleForm");
const messages = document.getElementById("messages"); const messages = document.getElementById("messages");
const imgField = document.getElementById("articleImage"); const imgField = document.getElementById("articleImage");
const imgPreview = document.getElementById("imagePreview");
const titleField = document.getElementById("articleTitle"); const titleField = document.getElementById("articleTitle");
const categoryField = document.getElementById("articleCategory"); const categoryField = document.getElementById("articleCategory");
const publishedField = document.getElementById("articlePublished"); const publishedField = document.getElementById("articlePublished");
@@ -26,6 +27,9 @@ function imageValide(file) {
return ["image/jpeg", "image/png"].includes(file.type); 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) { form.addEventListener("submit", function (e) {
e.preventDefault(); e.preventDefault();
@@ -91,6 +95,9 @@ form.addEventListener("submit", function (e) {
// Reset // Reset
form.reset(); form.reset();
tinymce.get("articleContent").setContent(""); tinymce.get("articleContent").setContent("");
if (imgLoader && typeof imgLoader.reset === "function") {
imgLoader.reset();
}
// Redirection // Redirection
setTimeout(() => { setTimeout(() => {
@@ -98,13 +105,4 @@ form.addEventListener("submit", function (e) {
}, 1500); }, 1500);
}); });
/* =========================
TinyMCE
========================= */
tinymce.init({
selector: "#articleContent",
height: 400,
language: "fr",
plugins: "lists fullscreen",
toolbar: "undo redo | bold italic underline | bullist numlist | fullscreen"
});

16
blog/js/modifier_article.js
View File

@@ -3,6 +3,7 @@ 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");
@@ -31,6 +32,21 @@ function imageValide(file) {
return ["image/jpeg", "image/png", "image/gif"].includes(file.type); 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();

11
css/blog.css
View File

@@ -1,11 +0,0 @@
body {
background: #f4f6f9;
}
.container {
margin: 40px auto;
}
.ck-editor__editable {
min-height: 350px;
}

0
css/citations.css
View File

2
css/prestation.css
View File

@@ -1,2 +0,0 @@
body { background: #f4f6f981; }
.container { margin-top: 50px; }

89
css/style.css
View File

@@ -1,44 +1,44 @@
/*============================================================================= /*=============================================================================
Header Navbar Styles Header Navbar Styles
=============================================================================*/ =============================================================================*/
a.nav-link{ a.nav-link {
font-size: .95rem; font-size: .95rem;
} }
.navbar-brand { .navbar-brand {
font-size: 1.1rem; font-size: 1.1rem;
line-height: 1; line-height: 1;
padding-top: 0.25rem; padding-top: 0.25rem;
padding-bottom: 0.25rem; padding-bottom: 0.25rem;
} }
.brand-sep { .brand-sep {
height: .8rem; height: .8rem;
} }
@media (max-width: 1399.98px) { @media (max-width: 1399.98px) {
.navbar .nav-item { .navbar .nav-item {
background-color: var(--bs-light); background-color: var(--bs-light);
border: 1px solid var(--bs-border-color); border: 1px solid var(--bs-border-color);
border-radius: .25rem; border-radius: .25rem;
margin-bottom: .375rem; margin-bottom: .375rem;
text-align: center; text-align: center;
} }
#navbarSupportedContent>ul:first-child { #navbarSupportedContent>ul:first-child {
margin-top: .5rem; margin-top: .5rem;
} }
#navbarSupportedContent>ul:last-child { #navbarSupportedContent>ul:last-child {
margin-top: 1rem; margin-top: 1rem;
} }
.bi { .bi {
display: none; display: none;
} }
} }
@@ -46,5 +46,38 @@ a.nav-link{
Divers Divers
=============================================================================*/ =============================================================================*/
a.tox-promotion-link { a.tox-promotion-link {
display: none !important; 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);
} }

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>`;
}
})