|
<!DOCTYPE html> |
|
<html lang="fr"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Mariam AI - SVT</title> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.0.2/marked.min.js"></script> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"> |
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> |
|
<style> |
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
|
|
|
:root { |
|
--color-primary: #2563eb; |
|
--color-primary-dark: #1d4ed8; |
|
--color-secondary: #4b5563; |
|
--color-accent: #8b5cf6; |
|
--color-background: #f6f8fc; |
|
--color-surface: #ffffff; |
|
--color-error: #ef4444; |
|
--color-success: #10b981; |
|
} |
|
|
|
body { |
|
font-family: 'Poppins', sans-serif; |
|
background: linear-gradient(135deg, var(--color-background) 0%, #e9f0f7 100%); |
|
} |
|
|
|
.animate-fade-in { |
|
animation: fadeIn 0.5s ease-in; |
|
} |
|
|
|
.animate-slide-up { |
|
animation: slideUp 0.5s ease-out; |
|
} |
|
|
|
.animate-slide-in { |
|
animation: slideIn 0.5s ease-out; |
|
} |
|
|
|
@keyframes fadeIn { |
|
from { opacity: 0; } |
|
to { opacity: 1; } |
|
} |
|
|
|
@keyframes slideUp { |
|
from { transform: translateY(20px); opacity: 0; } |
|
to { transform: translateY(0); opacity: 1; } |
|
} |
|
|
|
@keyframes slideIn { |
|
from { transform: translateX(20px); opacity: 0; } |
|
to { transform: translateX(0); opacity: 1; } |
|
} |
|
|
|
.glass-effect { |
|
background: rgba(255, 255, 255, 0.95); |
|
backdrop-filter: blur(10px); |
|
border: 1px solid rgba(255, 255, 255, 0.2); |
|
} |
|
|
|
.hover-scale { |
|
transition: transform 0.2s; |
|
} |
|
|
|
.hover-scale:hover { |
|
transform: scale(1.02); |
|
} |
|
|
|
.image-preview { |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.image-preview:hover .image-overlay { |
|
opacity: 1; |
|
} |
|
|
|
.image-overlay { |
|
opacity: 0; |
|
transition: opacity 0.3s ease; |
|
background: rgba(0, 0, 0, 0.5); |
|
} |
|
|
|
.preview-container { |
|
display: grid; |
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); |
|
gap: 1rem; |
|
} |
|
|
|
|
|
.tab-active { |
|
border-bottom: 3px solid var(--color-primary); |
|
color: var(--color-primary); |
|
} |
|
|
|
.tab-content { |
|
display: none; |
|
} |
|
|
|
.tab-content.active { |
|
display: block; |
|
} |
|
|
|
#response { |
|
white-space: pre-wrap; |
|
word-wrap: break-word; |
|
overflow-wrap: break-word; |
|
} |
|
|
|
|
|
#response p { |
|
margin-bottom: 1em; |
|
line-height: 1.6; |
|
} |
|
|
|
#response ul, #response ol { |
|
padding-left: 1.5em; |
|
margin-bottom: 1em; |
|
} |
|
|
|
#response li { |
|
margin-bottom: 0.5em; |
|
} |
|
|
|
|
|
.notification { |
|
position: fixed; |
|
top: 20px; |
|
right: 20px; |
|
padding: 15px 20px; |
|
border-radius: 8px; |
|
box-shadow: 0 4px 12px rgba(0,0,0,0.1); |
|
z-index: 1000; |
|
transform: translateX(120%); |
|
transition: transform 0.3s ease-out; |
|
} |
|
|
|
.notification.show { |
|
transform: translateX(0); |
|
} |
|
|
|
|
|
@media (max-width: 640px) { |
|
.preview-container { |
|
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); |
|
} |
|
.image-preview img { |
|
height: 32px; |
|
object-fit: cover; |
|
} |
|
#historyContainer .grid { |
|
grid-template-columns: repeat(1, minmax(0, 1fr)); |
|
} |
|
#response { |
|
font-size: 0.95rem; |
|
padding: 1rem; |
|
} |
|
|
|
#response p, #response li { |
|
line-height: 1.7; |
|
} |
|
|
|
#response ul, #response ol { |
|
padding-left: 1.2em; |
|
} |
|
} |
|
</style> |
|
</head> |
|
<body class="min-h-screen flex items-center justify-center p-4 md:p-8"> |
|
<div id="notificationContainer"></div> |
|
|
|
<div class="container mx-auto glass-effect rounded-2xl shadow-xl max-w-4xl animate-fade-in p-6 md:p-8"> |
|
<header class="flex flex-col md:flex-row justify-between items-center mb-8"> |
|
<div class="text-center md:text-left mb-4 md:mb-0"> |
|
<h1 class="text-4xl font-bold text-blue-900">Mariam AI</h1> |
|
<p class="text-gray-600 mt-2">Assistant SVT Intelligent</p> |
|
</div> |
|
<div class="flex space-x-4"> |
|
<button onclick="showInfo()" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-xl hover-scale transition-all duration-300 flex items-center gap-2" aria-label="Guide d'utilisation"> |
|
<i class="fas fa-info-circle"></i> |
|
<span>Guide d'utilisation</span> |
|
</button> |
|
</div> |
|
</header> |
|
|
|
|
|
<div class="flex border-b border-gray-200 mb-6"> |
|
<button id="tabMain" class="tab-active px-4 py-2 font-medium text-lg focus:outline-none" onclick="switchTab('main')" aria-label="Onglet principal"> |
|
Analyse |
|
</button> |
|
<button id="tabHistory" class="px-4 py-2 font-medium text-lg text-gray-600 focus:outline-none" onclick="switchTab('history')" aria-label="Onglet historique"> |
|
Historique |
|
</button> |
|
</div> |
|
|
|
|
|
<div id="mainContent" class="tab-content active animate-slide-up"> |
|
<div class="space-y-8"> |
|
<div class="relative"> |
|
<label for="svtOption" class="block mb-3 text-lg font-medium text-gray-700">Type d'exercice :</label> |
|
<select id="svtOption" class="w-full p-4 border border-gray-200 rounded-xl bg-white shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300" aria-label="Sélectionner le type d'exercice"> |
|
<option value="Restitution organisée des connaissances">Restitution Organisée des Connaissances</option> |
|
<option value="Exploitation du document">Exploitation du Document</option> |
|
<option value="Synthèse">Synthèse</option> |
|
</select> |
|
</div> |
|
|
|
<div class="relative"> |
|
<label class="block mb-3 text-lg font-medium text-gray-700">Images du sujet :</label> |
|
<div class="border-2 border-dashed border-gray-300 rounded-xl p-8 text-center hover:border-blue-500 transition-all duration-300" |
|
id="dropZone" |
|
aria-label="Zone de dépôt d'images"> |
|
<input type="file" id="imageUpload" class="hidden" multiple accept="image/*" onchange="handleImageUpload(event)"> |
|
<label for="imageUpload" class="cursor-pointer"> |
|
<i class="fas fa-cloud-upload-alt text-4xl text-blue-500 mb-4"></i> |
|
<p class="text-gray-600">Glissez vos images ici ou cliquez pour sélectionner</p> |
|
<p class="text-sm text-gray-500 mt-2">Format acceptés : JPG, PNG, GIF</p> |
|
</label> |
|
</div> |
|
|
|
|
|
<div id="previewContainer" class="preview-container mt-4" aria-live="polite"> |
|
|
|
</div> |
|
</div> |
|
|
|
<button onclick="submitQuestion()" class="w-full bg-gradient-to-r from-blue-600 to-blue-800 text-white py-4 rounded-xl hover-scale transition-all duration-300 font-semibold text-lg flex items-center justify-center gap-2" aria-label="Analyser les images"> |
|
<i class="fas fa-paper-plane"></i> |
|
Analyser |
|
</button> |
|
|
|
<div id="loader" class="hidden" aria-hidden="true"> |
|
<div class="flex flex-col items-center space-y-4 p-8"> |
|
<div class="animate-spin rounded-full h-12 w-12 border-4 border-blue-500 border-t-transparent"></div> |
|
<p class="text-gray-600 text-lg">Analyse en cours...</p> |
|
</div> |
|
</div> |
|
|
|
<div id="response" class="mt-6 p-6 bg-white rounded-xl shadow-sm prose max-w-none" aria-live="polite"></div> |
|
|
|
<div id="copyResponseContainer" class="hidden mb-8"> |
|
<button onclick="copyResponse()" class="w-full bg-gray-800 hover:bg-gray-900 text-white px-6 py-3 rounded-xl hover-scale transition-all duration-300 flex items-center justify-center gap-2" aria-label="Copier la réponse"> |
|
<i class="fas fa-copy"></i> |
|
Copier la réponse |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="historyContent" class="tab-content animate-slide-in"> |
|
<div class="space-y-8"> |
|
<div class="flex justify-between items-center"> |
|
<h2 class="text-2xl font-bold text-blue-900">Historique des Réponses</h2> |
|
<button onclick="clearLocalStorage()" class="bg-red-500 hover:bg-red-700 text-white px-4 py-2 rounded-lg hover-scale transition-all duration-300" aria-label="Effacer l'historique"> |
|
<i class="fas fa-trash-alt mr-2"></i> |
|
Effacer l'historique |
|
</button> |
|
</div> |
|
<div id="historyContainer" aria-live="polite"> |
|
|
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
let uploadedFiles = []; |
|
|
|
|
|
function switchTab(tabName) { |
|
|
|
document.querySelectorAll('.tab-content').forEach(tab => { |
|
tab.classList.remove('active'); |
|
}); |
|
|
|
|
|
document.getElementById('tabMain').classList.remove('tab-active'); |
|
document.getElementById('tabHistory').classList.remove('tab-active'); |
|
|
|
|
|
if (tabName === 'main') { |
|
document.getElementById('mainContent').classList.add('active'); |
|
document.getElementById('tabMain').classList.add('tab-active'); |
|
} else if (tabName === 'history') { |
|
document.getElementById('historyContent').classList.add('active'); |
|
document.getElementById('tabHistory').classList.add('tab-active'); |
|
|
|
displayHistory(); |
|
} |
|
} |
|
|
|
|
|
function showNotification(message, type = 'info') { |
|
const container = document.getElementById('notificationContainer'); |
|
const notification = document.createElement('div'); |
|
|
|
let bgColor, icon; |
|
switch(type) { |
|
case 'success': |
|
bgColor = 'bg-green-500'; |
|
icon = 'fa-check-circle'; |
|
break; |
|
case 'error': |
|
bgColor = 'bg-red-500'; |
|
icon = 'fa-exclamation-circle'; |
|
break; |
|
case 'warning': |
|
bgColor = 'bg-yellow-500'; |
|
icon = 'fa-exclamation-triangle'; |
|
break; |
|
default: |
|
bgColor = 'bg-blue-500'; |
|
icon = 'fa-info-circle'; |
|
} |
|
|
|
notification.className = `notification ${bgColor} text-white flex items-center gap-2`; |
|
notification.innerHTML = ` |
|
<i class="fas ${icon}"></i> |
|
<span>${message}</span> |
|
`; |
|
|
|
container.appendChild(notification); |
|
|
|
|
|
setTimeout(() => { |
|
notification.classList.add('show'); |
|
}, 10); |
|
|
|
|
|
setTimeout(() => { |
|
notification.classList.remove('show'); |
|
setTimeout(() => { |
|
container.removeChild(notification); |
|
}, 300); |
|
}, 3000); |
|
} |
|
|
|
|
|
const dropZone = document.getElementById('dropZone'); |
|
|
|
dropZone.addEventListener('dragover', (e) => { |
|
e.preventDefault(); |
|
dropZone.classList.add('border-blue-500'); |
|
}); |
|
|
|
dropZone.addEventListener('dragleave', () => { |
|
dropZone.classList.remove('border-blue-500'); |
|
}); |
|
|
|
dropZone.addEventListener('drop', (e) => { |
|
e.preventDefault(); |
|
dropZone.classList.remove('border-blue-500'); |
|
|
|
if (e.dataTransfer.files.length > 0) { |
|
handleImageUpload({ target: { files: e.dataTransfer.files } }); |
|
} |
|
} |
|
}); |
|
|
|
function handleImageUpload(event) { |
|
const files = event.target.files; |
|
const previewContainer = document.getElementById('previewContainer'); |
|
|
|
for (let i = 0; i < files.length; i++) { |
|
const file = files[i]; |
|
if (!file.type.startsWith('image/')) { |
|
showNotification('Seuls les fichiers image sont acceptés', 'error'); |
|
continue; |
|
} |
|
|
|
uploadedFiles.push(file); |
|
|
|
const reader = new FileReader(); |
|
reader.onload = function(e) { |
|
const imageId = `img-${Date.now()}-${i}`; |
|
const previewDiv = document.createElement('div'); |
|
previewDiv.className = 'image-preview relative rounded-lg overflow-hidden animate-fade-in'; |
|
previewDiv.id = imageId; |
|
previewDiv.innerHTML = ` |
|
<img src="${e.target.result}" alt="${file.name}" class="w-full h-40 object-cover"> |
|
<div class="image-overlay absolute inset-0 flex items-center justify-center"> |
|
<button onclick="removeImage('${imageId}')" class="bg-red-500 hover:bg-red-600 text-white p-2 rounded-full transition-all duration-300" aria-label="Supprimer l'image"> |
|
<i class="fas fa-trash"></i> |
|
</button> |
|
<button onclick="previewImage('${e.target.result}')" class="bg-blue-500 hover:bg-blue-600 text-white p-2 rounded-full ml-2 transition-all duration-300" aria-label="Prévisualiser l'image"> |
|
<i class="fas fa-eye"></i> |
|
</button> |
|
<button onclick="editImage('${imageId}', '${e.target.result}')" class="bg-purple-500 hover:bg-purple-600 text-white p-2 rounded-full ml-2 transition-all duration-300" aria-label="Modifier l'image"> |
|
<i class="fas fa-crop-alt"></i> |
|
</button> |
|
</div> |
|
<div class="bg-black bg-opacity-50 text-white text-xs p-1 absolute bottom-0 left-0 right-0"> |
|
${file.name.substring(0, 15)}${file.name.length > 15 ? '...' : ''} |
|
</div> |
|
`; |
|
previewContainer.appendChild(previewDiv); |
|
}; |
|
reader.readAsDataURL(file); |
|
} |
|
|
|
if (files.length > 0) { |
|
showNotification(`${files.length} image(s) ajoutée(s)`, 'success'); |
|
} |
|
} |
|
|
|
function removeImage(imageId) { |
|
const imageIndex = uploadedFiles.findIndex((file, index) => { |
|
const element = document.getElementById(imageId); |
|
return element && element.querySelector('img').src.includes(file.name); |
|
}); |
|
|
|
if (imageIndex !== -1) { |
|
uploadedFiles.splice(imageIndex, 1); |
|
} |
|
|
|
const element = document.getElementById(imageId); |
|
if (element) { |
|
element.classList.add('animate-fade-out'); |
|
setTimeout(() => { |
|
element.remove(); |
|
showNotification('Image supprimée', 'info'); |
|
}, 300); |
|
} |
|
} |
|
|
|
function previewImage(src) { |
|
Swal.fire({ |
|
imageUrl: src, |
|
imageAlt: 'Prévisualisation', |
|
width: '80%', |
|
showConfirmButton: false, |
|
showCloseButton: true, |
|
customClass: { |
|
image: 'max-h-[80vh] object-contain' |
|
} |
|
}); |
|
} |
|
|
|
|
|
function editImage(imageId, src) { |
|
Swal.fire({ |
|
title: 'Modification de l\'image', |
|
html: ` |
|
<div class="image-editor"> |
|
<div class="flex justify-center mb-4"> |
|
<img id="editableImage" src="${src}" class="max-h-[50vh] object-contain" /> |
|
</div> |
|
<div class="flex justify-center gap-4"> |
|
<button id="rotateLeft" class="bg-gray-200 hover:bg-gray-300 p-2 rounded-full"> |
|
<i class="fas fa-undo"></i> |
|
</button> |
|
<button id="rotateRight" class="bg-gray-200 hover:bg-gray-300 p-2 rounded-full"> |
|
<i class="fas fa-redo"></i> |
|
</button> |
|
<button id="cropMode" class="bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded-lg"> |
|
Mode recadrage |
|
</button> |
|
</div> |
|
</div> |
|
`, |
|
showCancelButton: true, |
|
showConfirmButton: true, |
|
confirmButtonText: 'Appliquer', |
|
cancelButtonText: 'Annuler', |
|
confirmButtonColor: '#3085d6', |
|
didOpen: () => { |
|
|
|
|
|
let rotation = 0; |
|
const img = document.getElementById('editableImage'); |
|
|
|
document.getElementById('rotateLeft').addEventListener('click', () => { |
|
rotation -= 90; |
|
img.style.transform = `rotate(${rotation}deg)`; |
|
}); |
|
|
|
document.getElementById('rotateRight').addEventListener('click', () => { |
|
rotation += 90; |
|
img.style.transform = `rotate(${rotation}deg)`; |
|
}); |
|
|
|
document.getElementById('cropMode').addEventListener('click', () => { |
|
|
|
Swal.fire({ |
|
icon: 'info', |
|
text: 'Fonctionnalité de recadrage en développement', |
|
toast: true, |
|
position: 'top-end', |
|
showConfirmButton: false, |
|
timer: 2000 |
|
}); |
|
}); |
|
} |
|
}).then((result) => { |
|
if (result.isConfirmed) { |
|
|
|
|
|
showNotification('Modifications appliquées', 'success'); |
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
}); |
|
} |
|
|
|
function showInfo() { |
|
Swal.fire({ |
|
title: 'Guide d\'utilisation', |
|
html: ` |
|
<div class="text-left space-y-4"> |
|
<div class="flex items-start gap-3"> |
|
<i class="fas fa-check-circle text-green-500 mt-1"></i> |
|
<p>Sélectionnez le type d'exercice correspondant à votre sujet.</p> |
|
</div> |
|
<div class="flex items-start gap-3"> |
|
<i class="fas fa-image text-blue-500 mt-1"></i> |
|
<p>Assurez-vous que vos images sont nettes et bien cadrées.</p> |
|
</div> |
|
<div class="flex items-start gap-3"> |
|
<i class="fas fa-crop-alt text-purple-500 mt-1"></i> |
|
<p>Utilisez notre éditeur pour recadrer et faire pivoter vos images si nécessaire.</p> |
|
</div> |
|
<div class="flex items-start gap-3"> |
|
<i class="fas fa-history text-yellow-500 mt-1"></i> |
|
<p>Consultez l'onglet "Historique" pour retrouver vos analyses précédentes.</p> |
|
</div> |
|
</div> |
|
`, |
|
icon: 'info', |
|
confirmButtonText: 'Compris', |
|
confirmButtonColor: '#2563eb', |
|
customClass: { |
|
container: 'font-sans' |
|
} |
|
}); |
|
} |
|
|
|
function copyResponse() { |
|
const responseDiv = document.getElementById('response'); |
|
const range = document.createRange(); |
|
range.selectNode(responseDiv); |
|
window.getSelection().removeAllRanges(); |
|
window.getSelection().addRange(range); |
|
document.execCommand('copy'); |
|
window.getSelection().removeAllRanges(); |
|
|
|
showNotification('Réponse copiée dans le presse-papiers', 'success'); |
|
} |
|
|
|
async function submitQuestion() { |
|
if (uploadedFiles.length === 0) { |
|
Swal.fire({ |
|
icon: 'error', |
|
title: 'Images manquantes', |
|
text: 'Veuillez sélectionner au moins une image du sujet.', |
|
confirmButtonColor: '#2563eb' |
|
}); |
|
return; |
|
} |
|
|
|
const option = document.getElementById('svtOption').value; |
|
const loader = document.getElementById('loader'); |
|
const responseDiv = document.getElementById('response'); |
|
const copyResponseContainer = document.getElementById('copyResponseContainer'); |
|
|
|
loader.classList.remove('hidden'); |
|
responseDiv.innerHTML = ''; |
|
copyResponseContainer.classList.add('hidden'); |
|
|
|
const formData = new FormData(); |
|
formData.append('option', option); |
|
|
|
for (let i = 0; i < uploadedFiles.length; i++) { |
|
formData.append('images', uploadedFiles[i]); |
|
} |
|
|
|
try { |
|
const response = await fetch('/svt_submit', { |
|
method: 'POST', |
|
body: formData |
|
}); |
|
|
|
const data = await response.json(); |
|
loader.classList.add('hidden'); |
|
|
|
if (data.error) { |
|
responseDiv.innerHTML = ` |
|
<div class="bg-red-50 border-l-4 border-red-500 p-4 rounded"> |
|
<p class="text-red-700">Erreur : ${data.error}</p> |
|
</div> |
|
`; |
|
showNotification('Une erreur est survenue', 'error'); |
|
} else { |
|
const htmlContent = marked.parse(data.response); |
|
responseDiv.innerHTML = htmlContent; |
|
responseDiv.classList.add('animate-fade-in'); |
|
copyResponseContainer.classList.remove('hidden'); |
|
showNotification('Analyse complétée avec succès', 'success'); |
|
|
|
|
|
const imagesData = await Promise.all(uploadedFiles.map(file => { |
|
return new Promise((resolve) => { |
|
const reader = new FileReader(); |
|
reader.onload = (e) => resolve(e.target.result); |
|
reader.readAsDataURL(file); |
|
}); |
|
})); |
|
|
|
saveResponseToLocalStorage(option, imagesData, data.response); |
|
} |
|
} catch (error) { |
|
loader.classList.add('hidden'); |
|
responseDiv.innerHTML = ` |
|
<div class="bg-red-50 border-l-4 border-red-500 p-4 rounded"> |
|
<p class="text-red-700">Erreur de connexion au serveur. Veuillez réessayer plus tard.</p> |
|
</div> |
|
`; |
|
showNotification('Erreur de connexion', 'error'); |
|
console.error('Error:', error); |
|
} |
|
} |
|
|
|
|
|
function saveResponseToLocalStorage(option, images, response) { |
|
const timestamp = new Date().toISOString(); |
|
const data = { option, images, response, timestamp }; |
|
localStorage.setItem('svt_response_' + timestamp, JSON.stringify(data)); |
|
} |
|
|
|
function loadResponsesFromLocalStorage() { |
|
const responses = []; |
|
for (let i = 0; i < localStorage.length; i++) { |
|
const key = localStorage.key(i); |
|
if (key.startsWith('svt_response_')) { |
|
try { |
|
const data = JSON.parse(localStorage.getItem(key)); |
|
responses.push(data); |
|
} catch (e) { |
|
console.error('Error parsing stored response:', e); |
|
} |
|
} |
|
} |
|
return responses.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp)); |
|
} |
|
|
|
function clearLocalStorage() { |
|
Swal.fire({ |
|
title: 'Êtes-vous sûr ?', |
|
text: "Tout l'historique de vos analyses sera définitivement supprimé.", |
|
icon: 'warning', |
|
showCancelButton: true, |
|
confirmButtonColor: '#ef4444', |
|
cancelButtonColor: '#6b7280', |
|
confirmButtonText: 'Oui, supprimer', |
|
cancelButtonText: 'Annuler' |
|
}).then((result) => { |
|
if (result.isConfirmed) { |
|
const keysToRemove = []; |
|
for (let i = 0; i < localStorage.length; i++) { |
|
const key = localStorage.key(i); |
|
if (key.startsWith('svt_response_')) { |
|
keysToRemove.push(key); |
|
} |
|
} |
|
for (const key of keysToRemove) { |
|
localStorage.removeItem(key); |
|
} |
|
displayHistory(); |
|
showNotification('Historique supprimé', 'success'); |
|
} |
|
}); |
|
} |
|
|
|
function displayHistory() { |
|
const responses = loadResponsesFromLocalStorage(); |
|
const historyContainer = document.getElementById('historyContainer'); |
|
historyContainer.innerHTML = ''; |
|
|
|
if (responses.length === 0) { |
|
historyContainer.innerHTML = '<p class="text-gray-500 text-center py-10">Aucun historique disponible.</p>'; |
|
return; |
|
} |
|
|
|
const responseList = document.createElement('div'); |
|
responseList.className = 'grid gap-4 md:grid-cols-2'; |
|
|
|
responses.forEach(response => { |
|
const card = document.createElement('div'); |
|
card.className = 'bg-white p-4 rounded-lg shadow-md hover:shadow-lg transition duration-300 animate-fade-in'; |
|
|
|
const header = document.createElement('div'); |
|
header.className = 'flex justify-between items-center mb-3'; |
|
|
|
const title = document.createElement('h4'); |
|
title.className = 'text-lg font-semibold text-blue-800'; |
|
title.textContent = response.option; |
|
header.appendChild(title); |
|
|
|
const date = document.createElement('span'); |
|
date.className = 'text-sm text-gray-500'; |
|
date.textContent = new Date(response.timestamp).toLocaleString(); |
|
header.appendChild(date); |
|
|
|
card.appendChild(header); |
|
|
|
const previewContainer = document.createElement('div'); |
|
previewContainer.className = 'flex gap-2 mb-3 overflow-x-auto pb-2'; |
|
|
|
if (response.images && response.images.length > 0) { |
|
response.images.forEach(imageData => { |
|
const imgContainer = document.createElement('div'); |
|
imgContainer.className = 'flex-shrink-0 relative'; |
|
|
|
const img = document.createElement('img'); |
|
img.src = imageData; |
|
img.className = 'h-16 w-16 object-cover rounded-md cursor-pointer transition-transform hover:scale-105'; |
|
img.alt = "Image du sujet"; |
|
img.setAttribute('aria-label', 'Cliquez pour agrandir'); |
|
img.onclick = () => previewImage(imageData); |
|
|
|
imgContainer.appendChild(img); |
|
previewContainer.appendChild(imgContainer); |
|
}); |
|
} else { |
|
const noImages = document.createElement('p'); |
|
noImages.className = 'text-sm text-gray-400 italic'; |
|
noImages.textContent = 'Pas d\'images disponibles'; |
|
previewContainer.appendChild(noImages); |
|
} |
|
|
|
card.appendChild(previewContainer); |
|
|
|
const contentContainer = document.createElement('div'); |
|
contentContainer.className = 'border-t border-gray-100 pt-3'; |
|
|
|
const responsePreview = document.createElement('p'); |
|
responsePreview.className = 'text-gray-600 text-sm mb-3'; |
|
responsePreview.textContent = response.response.substring(0, 150) + (response.response.length > 150 ? '...' : ''); |
|
contentContainer.appendChild(responsePreview); |
|
|
|
const actionButtons = document.createElement('div'); |
|
actionButtons.className = 'flex justify-between'; |
|
|
|
const viewButton = document.createElement('button'); |
|
viewButton.className = 'bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm transition-colors'; |
|
viewButton.innerHTML = '<i class="fas fa-eye mr-2"></i>Voir'; |
|
viewButton.onclick = () => { |
|
document.getElementById('response').innerHTML = marked.parse(response.response); |
|
document.getElementById('copyResponseContainer').classList.remove('hidden'); |
|
switchTab('main'); |
|
setTimeout(() => { |
|
document.getElementById('response').scrollIntoView({ behavior: 'smooth' }); |
|
}, 300); |
|
}; |
|
viewButton.setAttribute('aria-label', 'Voir la réponse complète'); |
|
|
|
const deleteButton = document.createElement('button'); |
|
deleteButton.className = 'bg-gray-200 hover:bg-red-100 text-gray-700 hover:text-red-500 px-4 py-2 rounded-lg text-sm transition-colors'; |
|
deleteButton.innerHTML = '<i class="fas fa-trash-alt mr-2"></i>Supprimer'; |
|
deleteButton.onclick = (e) => { |
|
e.stopPropagation(); |
|
Swal.fire({ |
|
title: 'Confirmer la suppression', |
|
text: "Voulez-vous supprimer cette analyse ?", |
|
icon: 'warning', |
|
showCancelButton: true, |
|
confirmButtonColor: '#ef4444', |
|
cancelButtonColor: '#6b7280', |
|
confirmButtonText: 'Supprimer', |
|
cancelButtonText: 'Annuler' |
|
}).then((result) => { |
|
if (result.isConfirmed) { |
|
localStorage.removeItem('svt_response_' + response.timestamp); |
|
displayHistory(); |
|
showNotification('Analyse supprimée', 'success'); |
|
} |
|
}); |
|
}; |
|
deleteButton.setAttribute('aria-label', 'Supprimer cette analyse'); |
|
|
|
actionButtons.appendChild(viewButton); |
|
actionButtons.appendChild(deleteButton); |
|
contentContainer.appendChild(actionButtons); |
|
|
|
card.appendChild(contentContainer); |
|
responseList.appendChild(card); |
|
}); |
|
|
|
historyContainer.appendChild(responseList); |
|
} |
|
|
|
|
|
function init() { |
|
|
|
displayHistory(); |
|
|
|
|
|
document.addEventListener('dragover', (e) => { |
|
e.preventDefault(); |
|
}); |
|
|
|
document.addEventListener('drop', (e) => { |
|
e.preventDefault(); |
|
}); |
|
} |
|
|
|
|
|
window.addEventListener('DOMContentLoaded', init); |
|
</script> |
|
</body> |
|
</html> |
