feat:ajouter avant apres corrigé

This commit is contained in:
2025-12-10 12:48:36 +01:00
parent 33b0c0cab8
commit 7fb728fc00

View File

@@ -12,16 +12,23 @@
.img-preview { .img-preview {
max-width: 150px; max-width: 150px;
border-radius: 8px; border-radius: 8px;
display: none; /* cachée tant qu'il n'y a pas d'image */ display: none;
/* cachée tant qu'il n'y a pas d'image */
}
.container {
max-width: 600px;
margin-top: 50px;
} }
</style> </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 class="container">
<h1 class="mb-5 text-center">Ajouter une paire 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">
@@ -42,13 +49,13 @@
<!-- Titre / label --> <!-- Titre / label -->
<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 de la paire (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 +65,7 @@
<!-- 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 +73,7 @@
<!-- 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">
@@ -89,10 +96,9 @@
</form> </form>
</div> </div>
<script src="ajouter_avant_apres.js"></script> <script src="../js/ajouter_avant_apres.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>
</body> </body>
</html> </html>