|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Mariam AI - Analyse Littéraire (Bientôt !)</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
|
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
-webkit-tap-highlight-color: transparent; |
|
|
} |
|
|
|
|
|
h1, h2, h3, h4, h5, h6 { |
|
|
font-family: 'Playfair Display', serif; |
|
|
} |
|
|
|
|
|
|
|
|
.disabled-drop-zone { |
|
|
cursor: not-allowed; |
|
|
opacity: 0.6; |
|
|
|
|
|
|
|
|
} |
|
|
.disabled-drop-zone .text-blue-600 { |
|
|
color: #6b7280; |
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.coming-soon-banner { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.75rem; |
|
|
background-color: #fef3c7; |
|
|
color: #92400e; |
|
|
padding: 0.75rem 1rem; |
|
|
border-radius: 0.5rem; |
|
|
border: 1px solid #fde68a; |
|
|
font-size: 0.875rem; |
|
|
font-weight: 500; |
|
|
text-align: center; |
|
|
justify-content: center; |
|
|
} |
|
|
@media (min-width: 640px) { |
|
|
.coming-soon-banner { |
|
|
font-size: 1rem; |
|
|
} |
|
|
} |
|
|
|
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gradient-to-br from-gray-50 to-blue-50 min-h-screen text-gray-800"> |
|
|
|
|
|
<div class="max-w-3xl mx-auto px-4 py-6 sm:px-6 sm:py-8"> |
|
|
|
|
|
|
|
|
<header class="text-center mb-8 sm:mb-12"> |
|
|
<h1 class="text-4xl sm:text-5xl font-bold text-gray-900 mb-2">Mariam AI</h1> |
|
|
<p class="text-base sm:text-lg text-gray-600">Votre Assistant d'Analyse Littéraire</p> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden"> |
|
|
<form id="uploadForm" class="p-5 sm:p-8 space-y-5 sm:space-y-6"> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label for="imageInput" class="block text-base sm:text-lg font-semibold text-gray-800 mb-3 opacity-60"> |
|
|
1. Choisissez votre document |
|
|
</label> |
|
|
|
|
|
<div id="dropZone" class="disabled-drop-zone mt-2 flex flex-col items-center justify-center px-4 py-8 sm:px-6 sm:py-10 border-2 border-gray-300 border-dashed rounded-lg bg-gray-50"> |
|
|
<div class="text-center"> |
|
|
<svg class="mx-auto h-10 w-10 text-gray-400 mb-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 16.5V9.75m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.33-2.33 4.5 4.5 0 013.75 8.775h-1.5M6.75 19.5h10.5" /> |
|
|
</svg> |
|
|
<div class="text-sm sm:text-base text-gray-600"> |
|
|
<span class="font-medium text-blue-600">Cliquez pour choisir</span> ou glissez-déposez |
|
|
</div> |
|
|
<p class="text-xs sm:text-sm text-gray-500 mt-1">PNG, JPG, PDF (max 10MB)</p> |
|
|
|
|
|
<input id="imageInput" name="image" type="file" class="sr-only" accept="image/*,application/pdf" disabled> |
|
|
</div> |
|
|
|
|
|
<div id="fileName" class="mt-3 text-sm font-medium text-gray-700 hidden"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label for="consignesInput" class="block text-base sm:text-lg font-semibold text-gray-800 mb-3 opacity-60"> |
|
|
2. Consignes <span class="text-sm font-normal text-gray-500">(optionnel)</span> |
|
|
</label> |
|
|
|
|
|
<textarea id="consignesInput" name="consignes" rows="3" class="w-full border border-gray-300 rounded-md p-3 text-sm placeholder-gray-400 transition duration-150 ease-in-out bg-gray-100 cursor-not-allowed" placeholder="Ex: Analyser les thèmes principaux..." disabled></textarea> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="coming-soon-banner" role="alert"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 sm:w-6 sm:h-6"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" /> |
|
|
</svg> |
|
|
<span>Cette fonctionnalité sera bientôt disponible !</span> |
|
|
</div> |
|
|
|
|
|
|
|
|
<button type="submit" class="w-full bg-gray-400 text-white rounded-lg px-4 py-3 text-base font-semibold focus:outline-none cursor-not-allowed shadow-md flex items-center justify-center space-x-2" disabled> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423L16.5 15.75l.394 1.183a2.25 2.25 0 001.423 1.423L19.5 18.75l-1.183.394a2.25 2.25 0 00-1.423 1.423z" /> |
|
|
</svg> |
|
|
<span>Lancer l'analyse</span> |
|
|
</button> |
|
|
</form> |
|
|
|
|
|
|
|
|
<div id="loading" class="hidden fixed inset-0 bg-black bg-opacity-60 flex items-center justify-center z-50 p-4"> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="result" class="hidden border-t border-gray-200"> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<footer class="text-center mt-8 mb-4"> |
|
|
<p class="text-xs text-gray-500">© 2024 Mariam AI - Tous droits réservés.</p> |
|
|
</footer> |
|
|
|
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
console.log("Page Mariam AI - Fonctionnalité en cours de développement."); |
|
|
|
|
|
</script> |
|
|
|
|
|
</body> |
|
|
</html> |
