Spaces:
Running
Running
Update templates/index.html
Browse files- templates/index.html +75 -17
templates/index.html
CHANGED
|
@@ -1,4 +1,4 @@
|
|
| 1 |
-
|
| 2 |
<html lang="fr">
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
|
@@ -78,6 +78,44 @@
|
|
| 78 |
.backup-content-expanded {
|
| 79 |
display: block;
|
| 80 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 81 |
</style>
|
| 82 |
</head>
|
| 83 |
|
|
@@ -196,23 +234,24 @@
|
|
| 196 |
</div>
|
| 197 |
<h2 class="text-2xl font-bold text-gray-800">Étude de texte</h2>
|
| 198 |
</div>
|
| 199 |
-
<form id="etude-texte-form" class="space-y-8">
|
| 200 |
<div class="space-y-4">
|
| 201 |
<label class="block text-sm font-medium text-gray-700">
|
| 202 |
<i class="fas fa-image mr-2 text-blue-500"></i>Image du texte
|
| 203 |
</label>
|
| 204 |
-
<div
|
| 205 |
-
|
| 206 |
-
<input type="file" id="image-upload" name="
|
| 207 |
<div class="space-y-3">
|
| 208 |
<div class="bg-blue-50 rounded-full w-16 h-16 flex items-center justify-center mx-auto">
|
| 209 |
<i class="fas fa-cloud-upload-alt text-3xl text-blue-500"></i>
|
| 210 |
</div>
|
| 211 |
-
<p class="text-sm text-gray-600 font-medium">Glissez
|
| 212 |
pour sélectionner</p>
|
| 213 |
<p class="text-xs text-gray-400">PNG, JPG jusqu'à 10MB</p>
|
| 214 |
</div>
|
| 215 |
</div>
|
|
|
|
| 216 |
</div>
|
| 217 |
|
| 218 |
<button type="submit"
|
|
@@ -239,8 +278,9 @@
|
|
| 239 |
|
| 240 |
<script>
|
| 241 |
function initializeFileUpload() {
|
| 242 |
-
const dropZone = document.
|
| 243 |
const fileInput = document.getElementById('image-upload');
|
|
|
|
| 244 |
|
| 245 |
dropZone.addEventListener('click', () => fileInput.click());
|
| 246 |
|
|
@@ -261,21 +301,39 @@
|
|
| 261 |
dropZone.addEventListener('drop', (e) => {
|
| 262 |
e.preventDefault();
|
| 263 |
dropZone.classList.remove('border-blue-500', 'bg-blue-50');
|
| 264 |
-
|
| 265 |
-
|
| 266 |
-
if (fileName) {
|
| 267 |
-
dropZone.querySelector('p').textContent = `Fichier sélectionné : ${fileName}`;
|
| 268 |
-
}
|
| 269 |
});
|
| 270 |
|
| 271 |
fileInput.addEventListener('change', () => {
|
| 272 |
-
const
|
| 273 |
-
|
| 274 |
-
dropZone.querySelector('p').textContent = `Fichier sélectionné : ${fileName}`;
|
| 275 |
-
}
|
| 276 |
});
|
| 277 |
-
}
|
| 278 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 279 |
function sauvegarderReponse(titre, contenu) {
|
| 280 |
const sauvegardes = JSON.parse(localStorage.getItem('mariam_ai_sauvegardes') || '[]');
|
| 281 |
const dateSauvegarde = new Date().toISOString();
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
<html lang="fr">
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
|
|
|
| 78 |
.backup-content-expanded {
|
| 79 |
display: block;
|
| 80 |
}
|
| 81 |
+
|
| 82 |
+
/* Styles for multiple image upload */
|
| 83 |
+
.image-preview {
|
| 84 |
+
display: flex;
|
| 85 |
+
flex-wrap: wrap;
|
| 86 |
+
gap: 10px;
|
| 87 |
+
margin-top: 10px;
|
| 88 |
+
}
|
| 89 |
+
|
| 90 |
+
.image-preview-item {
|
| 91 |
+
position: relative;
|
| 92 |
+
width: 100px;
|
| 93 |
+
height: 100px;
|
| 94 |
+
}
|
| 95 |
+
|
| 96 |
+
.image-preview-item img {
|
| 97 |
+
width: 100%;
|
| 98 |
+
height: 100%;
|
| 99 |
+
object-fit: cover;
|
| 100 |
+
border-radius: 5px;
|
| 101 |
+
}
|
| 102 |
+
|
| 103 |
+
.remove-image {
|
| 104 |
+
position: absolute;
|
| 105 |
+
top: 5px;
|
| 106 |
+
right: 5px;
|
| 107 |
+
background-color: rgba(0, 0, 0, 0.5);
|
| 108 |
+
color: white;
|
| 109 |
+
border: none;
|
| 110 |
+
border-radius: 50%;
|
| 111 |
+
padding: 2px 6px;
|
| 112 |
+
cursor: pointer;
|
| 113 |
+
font-size: 12px;
|
| 114 |
+
}
|
| 115 |
+
|
| 116 |
+
.remove-image:hover {
|
| 117 |
+
background-color: rgba(0, 0, 0, 0.7);
|
| 118 |
+
}
|
| 119 |
</style>
|
| 120 |
</head>
|
| 121 |
|
|
|
|
| 234 |
</div>
|
| 235 |
<h2 class="text-2xl font-bold text-gray-800">Étude de texte</h2>
|
| 236 |
</div>
|
| 237 |
+
<form id="etude-texte-form" class="space-y-8" enctype="multipart/form-data">
|
| 238 |
<div class="space-y-4">
|
| 239 |
<label class="block text-sm font-medium text-gray-700">
|
| 240 |
<i class="fas fa-image mr-2 text-blue-500"></i>Image du texte
|
| 241 |
</label>
|
| 242 |
+
<div class="border-3 border-dashed border-gray-300 rounded-xl p-8 text-center cursor-pointer hover:border-blue-400 transition-all duration-200"
|
| 243 |
+
id="drop-zone">
|
| 244 |
+
<input type="file" id="image-upload" name="images" accept="image/*" class="hidden" multiple>
|
| 245 |
<div class="space-y-3">
|
| 246 |
<div class="bg-blue-50 rounded-full w-16 h-16 flex items-center justify-center mx-auto">
|
| 247 |
<i class="fas fa-cloud-upload-alt text-3xl text-blue-500"></i>
|
| 248 |
</div>
|
| 249 |
+
<p class="text-sm text-gray-600 font-medium">Glissez vos images ici ou cliquez
|
| 250 |
pour sélectionner</p>
|
| 251 |
<p class="text-xs text-gray-400">PNG, JPG jusqu'à 10MB</p>
|
| 252 |
</div>
|
| 253 |
</div>
|
| 254 |
+
<div id="image-preview" class="image-preview"></div>
|
| 255 |
</div>
|
| 256 |
|
| 257 |
<button type="submit"
|
|
|
|
| 278 |
|
| 279 |
<script>
|
| 280 |
function initializeFileUpload() {
|
| 281 |
+
const dropZone = document.getElementById('drop-zone');
|
| 282 |
const fileInput = document.getElementById('image-upload');
|
| 283 |
+
const imagePreview = document.getElementById('image-preview');
|
| 284 |
|
| 285 |
dropZone.addEventListener('click', () => fileInput.click());
|
| 286 |
|
|
|
|
| 301 |
dropZone.addEventListener('drop', (e) => {
|
| 302 |
e.preventDefault();
|
| 303 |
dropZone.classList.remove('border-blue-500', 'bg-blue-50');
|
| 304 |
+
const files = e.dataTransfer.files;
|
| 305 |
+
handleFiles(files);
|
|
|
|
|
|
|
|
|
|
| 306 |
});
|
| 307 |
|
| 308 |
fileInput.addEventListener('change', () => {
|
| 309 |
+
const files = fileInput.files;
|
| 310 |
+
handleFiles(files);
|
|
|
|
|
|
|
| 311 |
});
|
|
|
|
| 312 |
|
| 313 |
+
function handleFiles(files) {
|
| 314 |
+
for (let i = 0; i < files.length; i++) {
|
| 315 |
+
const file = files[i];
|
| 316 |
+
if (!file.type.startsWith('image/')) continue;
|
| 317 |
+
|
| 318 |
+
const reader = new FileReader();
|
| 319 |
+
reader.onload = (e) => {
|
| 320 |
+
const previewItem = document.createElement('div');
|
| 321 |
+
previewItem.classList.add('image-preview-item');
|
| 322 |
+
previewItem.innerHTML = `
|
| 323 |
+
<img src="${e.target.result}" alt="${file.name}">
|
| 324 |
+
<button class="remove-image" title="Supprimer">×</button>
|
| 325 |
+
`;
|
| 326 |
+
imagePreview.appendChild(previewItem);
|
| 327 |
+
|
| 328 |
+
// Remove image event
|
| 329 |
+
previewItem.querySelector('.remove-image').addEventListener('click', () => {
|
| 330 |
+
imagePreview.removeChild(previewItem);
|
| 331 |
+
});
|
| 332 |
+
};
|
| 333 |
+
reader.readAsDataURL(file);
|
| 334 |
+
}
|
| 335 |
+
}
|
| 336 |
+
}
|
| 337 |
function sauvegarderReponse(titre, contenu) {
|
| 338 |
const sauvegardes = JSON.parse(localStorage.getItem('mariam_ai_sauvegardes') || '[]');
|
| 339 |
const dateSauvegarde = new Date().toISOString();
|